feat: add UI elements to change nav display

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>

Author: enjeck

src/modules/modals/CreateContext.vue

@@ -39,6 +39,24 @@
 				</div>
 				<NcContextResource :resources.sync="resources" :receivers.sync="receivers" />
 			</div>
+			<div class="row space-T">
+				<div>
+					{{ t('tables', 'Navigation bar entry') }}
+				</div>
+				<NcCheckboxRadioSwitch :checked.sync="displayMode" value="NAV_ENTRY_MODE_HIDDEN"
+					name="NAV_ENTRY_MODE_HIDDEN" type="radio">
+					No navigation bar entry
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :checked.sync="displayMode" value="NAV_ENTRY_MODE_RECIPIENTS"
+					name="NAV_ENTRY_MODE_RECIPIENTS" type="radio">
+					Navigation bar entry for share recipients, but not the owner
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :checked.sync="displayMode" value="NAV_ENTRY_MODE_ALL" name="NAV_ENTRY_MODE_ALL"
+					type="radio">
+					Navigation bar entry for everybody
+				</NcCheckboxRadioSwitch>
+				<br>
+			</div>
 			<div class="row space-R row space-T">
 				<div class="fix-col-4 end">
 					<NcButton type="primary" :aria-label="t('tables', 'Create application')" data-cy="createContextSubmitBtn" @click="submit">
@@ -51,13 +69,14 @@
 </template>
 
 <script>
-import { NcModal, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcModal, NcButton, NcIconSvgWrapper, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import NcContextResource from '../../shared/components/ncContextResource/NcContextResource.vue'
 import NcIconPicker from '../../shared/components/ncIconPicker/NcIconPicker.vue'
 import svgHelper from '../../shared/components/ncIconPicker/mixins/svgHelper.js'
 import permissionBitmask from '../../shared/components/ncContextResource/mixins/permissionBitmask.js'
+import { NAV_ENTRY_MODE } from '../../shared/constants.js'
 
 export default {
 	name: 'CreateContext',
@@ -67,6 +86,7 @@ export default {
 		NcButton,
 		NcIconSvgWrapper,
 		NcContextResource,
+		NcCheckboxRadioSwitch,
 	},
 	mixins: [svgHelper, permissionBitmask],
 	props: {
@@ -87,6 +107,7 @@ export default {
 			description: '',
 			resources: [],
 			receivers: [],
+			displayMode: 'NAV_ENTRY_MODE_HIDDEN',
 		}
 	},
 	watch: {
@@ -147,7 +168,7 @@ export default {
 				description: this.description,
 				nodes: dataResources,
 			}
-			const res = await this.$store.dispatch('insertNewContext', { data, previousReceivers: [], receivers: this.receivers })
+			const res = await this.$store.dispatch('insertNewContext', { data, previousReceivers: [], receivers: this.receivers, displayMode: NAV_ENTRY_MODE[this.displayMode] })
 			if (res) {
 				return res.id
 			} else {
@@ -159,6 +180,7 @@ export default {
 			this.errorTitle = false
 			this.setIcon(this.randomIcon())
 			this.customTitleChosen = false
+			this.displayMode = 'NAV_ENTRY_MODE_HIDDEN'
 		},
 	},
 }

src/modules/navigation/partials/NavigationContextItem.vue

@@ -29,11 +29,14 @@
 				</template>
 				{{ t('tables', 'Delete application') }}
 			</NcActionButton>
+			<NcActionCheckbox :value="showInNavigation" @change="updateDisplayMode">
+				Show in Navigation
+			</NcActionCheckbox>
 		</template>
 	</NcAppNavigationItem>
 </template>
 <script>
-import { NcAppNavigationItem, NcActionButton, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcAppNavigationItem, NcActionButton, NcIconSvgWrapper, NcActionCheckbox } from '@nextcloud/vue'
 import '@nextcloud/dialogs/dist/index.css'
 import { mapGetters } from 'vuex'
 import TableIcon from 'vue-material-design-icons/Table.vue'
@@ -43,6 +46,7 @@ import FileSwap from 'vue-material-design-icons/FileSwap.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
 import svgHelper from '../../../shared/components/ncIconPicker/mixins/svgHelper.js'
+import { getCurrentUser } from '@nextcloud/auth'
 
 export default {
 	name: 'NavigationContextItem',
@@ -55,6 +59,7 @@ export default {
 		NcIconSvgWrapper,
 		NcAppNavigationItem,
 		NcActionButton,
+		NcActionCheckbox,
 	},
 
 	mixins: [permissionsMixin, svgHelper],
@@ -69,6 +74,7 @@ export default {
 	data() {
 		return {
 			icon: null,
+			showInNavigation: false,
 		}
 	},
 	computed: {
@@ -95,6 +101,15 @@ export default {
 		deleteContext() {
 			emit('tables:context:delete', this.context)
 		},
+		updateDisplayMode() {
+			this.showInNavigation = !this.showInNavigation
+			if (this.context) {
+				const share = Object.values(this.context.sharing || {}).find(share => share.receiver === getCurrentUser().uid)
+				if (share) {
+					this.$store.dispatch('updateDisplayMode', { shareId: share.share_id, displayMode: this.showInNavigation ? 1 : 0, userId: getCurrentUser().uid })
+				}
+			}
+		},
 	},
 
 }

src/shared/constants.js

@@ -41,3 +41,9 @@ export const TYPE_TEXT = 'text'
 export const TYPE_NUMBER = 'number'
 export const TYPE_DATETIME = 'datetime'
 export const TYPE_USERGROUP = 'usergroup'
+
+export const NAV_ENTRY_MODE = {
+	NAV_ENTRY_MODE_HIDDEN: 0,
+	NAV_ENTRY_MODE_RECIPIENTS: 1,
+	NAV_ENTRY_MODE_ALL: 2,
+}

src/store/store.js

@@ -342,11 +342,11 @@ export default new Vuex.Store({
 
 			return true
 		},
-		async shareContext({ dispatch }, { id, previousReceivers, receivers }) {
+		async shareContext({ dispatch }, { id, previousReceivers, receivers, displayMode }) {
 			const share = {
 				nodeType: 'context',
 				nodeId: id,
-				displayMode: 2,
+				displayMode,
 			}
 			try {
 				for (const receiver of receivers) {
@@ -376,15 +376,24 @@ export default new Vuex.Store({
 				displayError(e, t('tables', 'Could not remove application share.'))
 			}
 		},
-		async insertNewContext({ commit, state, dispatch }, { data, receivers }) {
+
+		async updateDisplayMode({ dispatch }, { shareId, displayMode, userId }) {
+			try {
+				await axios.put(generateUrl('/apps/tables/share/' + shareId + '/display-mode'), { displayMode, userId })
+			} catch (e) {
+				displayError(e, t('tables', 'Could not update display mode.'))
+			}
+		},
+
+		async insertNewContext({ commit, state, dispatch }, { data, receivers, displayMode }) {
 			commit('setLoading', { key: 'contexts', value: true })
 			let res = null
 
 			try {
 				res = await axios.post(generateOcsUrl('/apps/tables/api/2/contexts'), data)
 				const id = res?.data?.ocs?.data?.id
 				if (id) {
-					await dispatch('shareContext', { id, previousReceivers: [], receivers })
+					await dispatch('shareContext', { id, previousReceivers: [], receivers, displayMode })
 				}
 			} catch (e) {
 				displayError(e, t('tables', 'Could not insert application.'))