Merge pull request #1259 from nextcloud/fix/ui-quirks

fix/ui quirks

src/App.vue

@@ -2,9 +2,9 @@
 	<NcContent app-name="tables">
 		<Navigation />
 		<NcAppContent>
-			<div v-if="somethingIsLoading" class="icon-loading" />
+			<div v-if="isLoadingSomething" class="icon-loading" />
 
-			<router-view v-if="!somethingIsLoading" />
+			<router-view v-if="!isLoadingSomething" />
 		</NcAppContent>
 		<Sidebar />
 	</NcContent>
@@ -13,7 +13,7 @@
 <script>
 import { NcContent, NcAppContent } from '@nextcloud/vue'
 import Navigation from './modules/navigation/sections/Navigation.vue'
-import { mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 import Sidebar from './modules/sidebar/sections/Sidebar.vue'
 import { useResizeObserver } from '@vueuse/core'
 import { loadState } from '@nextcloud/initial-state'
@@ -39,10 +39,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(['tablesLoading', 'contextsLoading']),
-		somethingIsLoading() {
-			return this.tablesLoading || this.contextsLoading || this.loading
-		},
+		...mapGetters(['isLoadingSomething']),
 	},
 	watch: {
 		'$route'(to, from) {
@@ -102,9 +99,9 @@ export default {
 			}
 		},
 		switchActiveMenuEntry(targetElement) {
-			const currentlyActive = document.querySelector('header .header-left .app-menu li.app-menu-entry__active')
-			currentlyActive.classList.remove('app-menu-entry__active')
-			targetElement.classList.add('app-menu-entry__active')
+			const currentlyActive = document.querySelector('header .header-left .app-menu li.app-menu-entry--active')
+			currentlyActive.classList.remove('app-menu-entry--active')
+			targetElement.classList.add('app-menu-entry--active')
 		},
 		setPageTitle(title) {
 			if (this.defaultPageTitle === false) {

src/modules/modals/CreateTable.vue

@@ -132,7 +132,7 @@ export default {
 		showModal() {
 			// every time when the modal opens chose a new emoji
 			this.loadEmoji()
-			this.$nextTick(() => this.$refs.titleInput.focus())
+			this.$nextTick(() => this.$refs?.titleInput?.focus())
 		},
 	},
 	methods: {

src/modules/navigation/sections/Navigation.vue

@@ -9,9 +9,9 @@
 				</NcTextField>
 			</div>
 
-			<div v-if="tablesLoading" class="icon-loading" />
+			<div v-if="isLoadingSomething" class="icon-loading" />
 
-			<ul v-if="!tablesLoading">
+			<ul v-if="!isLoadingSomething">
 				<NcAppNavigationCaption v-if="getFavoriteNodes.length > 0" :name="t('tables', 'Favorites')" />
 
 				<!-- FAVORITES -->
@@ -56,8 +56,7 @@
 						:filter-string="filterString" :table="table" />
 				</NcAppNavigationItem>
 			</ul>
-			<div v-if="contextsLoading" class="icon-loading" />
-			<ul v-if="!contextsLoading">
+			<ul v-if="!isLoadingSomething">
 				<NcAppNavigationCaption :name="t('tables', 'Applications')">
 					<template #actions>
 						<NcActionButton :aria-label="t('tables', 'Create application')" icon="icon-add" data-cy="createContextIcon"
@@ -102,7 +101,7 @@ import {
 import NavigationViewItem from '../partials/NavigationViewItem.vue'
 import NavigationTableItem from '../partials/NavigationTableItem.vue'
 import NavigationContextItem from '../partials/NavigationContextItem.vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import Archive from 'vue-material-design-icons/Archive.vue'
@@ -134,7 +133,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(['appNavCollapsed', 'tables', 'views', 'tablesLoading', 'contexts', 'contextsLoading']),
+		...mapState(['appNavCollapsed', 'tables', 'views', 'contexts']),
+		...mapGetters(['isLoadingSomething', 'isLoading']),
 		getAllNodes() {
 			return [...this.getFilteredTables, ...this.getOwnViews, ...this.getSharedViews]
 		},

src/modules/sidebar/partials/ShareForm.vue

@@ -44,7 +44,7 @@
 import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { NcSelect } from '@nextcloud/vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import formatting from '../../../shared/mixins/formatting.js'
 import ShareTypes from '../../../shared/mixins/shareTypesMixin.js'
 import searchUserGroup from '../../../shared/mixins/searchUserGroup.js'
@@ -74,7 +74,8 @@ export default {
 	},
 
 	computed: {
-		...mapState(['tables', 'tablesLoading', 'showSidebar']),
+		...mapState(['tables', 'showSidebar']),
+		...mapGetters(['isLoadingSomething']),
 	},
 
 	mounted() {

src/modules/sidebar/partials/ShareList.vue

@@ -158,8 +158,8 @@ export default {
 	},
 
 	computed: {
-		...mapState(['tables', 'tablesLoading', 'showSidebar']),
-		...mapGetters(['activeElement', 'isView']),
+		...mapState(['tables', 'showSidebar']),
+		...mapGetters(['isLoadingSomething', 'activeElement', 'isView']),
 		sortedShares() {
 			return [...this.userShares, ...this.groupShares].slice()
 				.sort(this.sortByDisplayName)

src/modules/sidebar/sections/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NcAppSidebar v-show="showSidebar"
+		<NcAppSidebar v-if="showSidebar"
 			:active="activeSidebarTab"
 			:name="elementTitle"
 			@update:active="tab => activeSidebarTab = tab"

src/modules/sidebar/sections/SidebarIntegration.vue

@@ -64,8 +64,8 @@ export default {
 	},
 
 	computed: {
-		...mapState(['tables', 'tablesLoading']),
-		...mapGetters(['activeElement', 'isView']),
+		...mapState(['tables']),
+		...mapGetters(['activeElement', 'isLoadingSomething', 'isView']),
 		apiEndpointUrl() {
 			const params = {
 				elementId: this.activeElement.id,

src/store/store.js

@@ -17,12 +17,15 @@ export default new Vuex.Store({
 	},
 
 	state: {
-		tablesLoading: false,
+		loading: {
+			tables: true,
+			viewsShared: true,
+			contexts: true,
+		},
 		tables: [],
 		views: [],
 		templates: [],
 		contexts: [],
-		contextsLoading: false,
 		activeViewId: null,
 		activeTableId: null,
 		activeRowId: null,
@@ -70,16 +73,19 @@ export default new Vuex.Store({
 		isView(state) {
 			return state.activeElementIsView
 		},
+		isLoading(state) {
+			return (key) => state.loading[key] ?? false
+		},
+		isLoadingSomething(state) {
+			return Object.keys(state.loading).filter(key => state.loading[key]).length > 0
+		},
 	},
 	mutations: {
 		setAppNavCollapsed(state, value) {
 			state.appNavCollapsed = !!(value)
 		},
-		setTablesLoading(state, value) {
-			state.tablesLoading = !!(value)
-		},
-		setContextsLoading(state, value) {
-			state.contextsLoading = !!(value)
+		setLoading(state, { key, value }) {
+			state.loading[key] = !!(value)
 		},
 		setActiveViewId(state, viewId) {
 			if (state.activeViewId !== viewId) {
@@ -138,18 +144,15 @@ export default new Vuex.Store({
 				displayError(e, t('tables', 'Could not insert table.'))
 				return false
 			}
-			if (data.template !== 'custom') {
-				await dispatch('loadTablesFromBE')
-				await dispatch('loadViewsSharedWithMeFromBE')
-			} else {
-				const tables = state.tables
-				tables.push(res.data)
-				commit('setTables', tables)
-			}
+
+			const tables = state.tables
+			tables.push(res.data)
+			commit('setTables', tables)
+
 			return res.data
 		},
 		async loadTablesFromBE({ commit, state }) {
-			commit('setTablesLoading', true)
+			commit('setLoading', { key: 'tables', value: true })
 
 			try {
 				const res = await axios.get(generateUrl('/apps/tables/table'))
@@ -164,11 +167,11 @@ export default new Vuex.Store({
 				showError(t('tables', 'Could not fetch tables'))
 			}
 
-			commit('setTablesLoading', false)
+			commit('setLoading', { key: 'tables', value: false })
 			return true
 		},
 		async loadViewsSharedWithMeFromBE({ commit, state }) {
-			commit('setTablesLoading', true)
+			commit('setLoading', { key: 'viewsShared', value: true })
 
 			try {
 				const res = await axios.get(generateUrl('/apps/tables/view'))
@@ -182,7 +185,7 @@ export default new Vuex.Store({
 				showError(t('tables', 'Could not load shared views'))
 			}
 
-			commit('setTablesLoading', false)
+			commit('setLoading', { key: 'viewsShared', value: false })
 			return true
 		},
 		async loadTemplatesFromBE({ commit }) {
@@ -374,7 +377,7 @@ export default new Vuex.Store({
 			}
 		},
 		async insertNewContext({ commit, state, dispatch }, { data, receivers }) {
-			commit('setContextsLoading', true)
+			commit('setLoading', { key: 'contexts', value: true })
 			let res = null
 
 			try {
@@ -391,7 +394,7 @@ export default new Vuex.Store({
 			contexts.push(res.data.ocs.data)
 			commit('setContexts', contexts)
 
-			commit('setContextsLoading', false)
+			commit('setLoading', { key: 'contexts', value: false })
 			return res.data.ocs.data
 		},
 		async updateContext({ state, commit, dispatch }, { id, data, previousReceivers, receivers }) {
@@ -429,7 +432,7 @@ export default new Vuex.Store({
 		},
 
 		async getAllContexts({ commit, state }) {
-			commit('setContextsLoading', true)
+			commit('setLoading', { key: 'contexts', value: true })
 			try {
 				const res = await axios.get(generateOcsUrl('/apps/tables/api/2/contexts'))
 				commit('setContexts', res.data.ocs.data)
@@ -438,7 +441,7 @@ export default new Vuex.Store({
 				displayError(e, t('tables', 'Could not load applications.'))
 				showError(t('tables', 'Could not fetch applications'))
 			}
-			commit('setContextsLoading', false)
+			commit('setLoading', { key: 'contexts', value: false })
 			return true
 		},