diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2020-01-16 02:03:29 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2020-01-22 19:33:49 +0300 |
commit | 05742c083c039561841d258a69fd47dd84debfd6 (patch) | |
tree | 46f335a05149165b657fc2c4c61f162f93533361 /apps/settings/src/views | |
parent | a6a224e7a14faa8814e9ce783f626666828b96db (diff) |
Migrate to @nextcloud/vue 1.x.x
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'apps/settings/src/views')
-rw-r--r-- | apps/settings/src/views/Apps.vue | 164 | ||||
-rw-r--r-- | apps/settings/src/views/Users.vue | 319 |
2 files changed, 229 insertions, 254 deletions
diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue index 74b5fbde0fa..c125edcb93c 100644 --- a/apps/settings/src/views/Apps.vue +++ b/apps/settings/src/views/Apps.vue @@ -27,7 +27,57 @@ :navigation-class="{ 'icon-loading': loading }"> <AppNavigation> <ul id="appscategories"> - <AppNavigationItem v-for="item in menu" :key="item.key" :item="item" /> + <AppNavigationItem + id="app-category-your-apps" + :to="{ name: 'apps' }" + :exact="true" + icon="icon-category-installed" + :title="t('settings', 'Your apps')" /> + <AppNavigationItem + id="app-category-enabled" + :to="{ name: 'apps-category', params: { category: 'enabled' } }" + icon="icon-category-enabled" + :title="t('settings', 'Active apps')" /> + <AppNavigationItem + id="app-category-disabled" + :to="{ name: 'apps-category', params: { category: 'disabled' } }" + icon="icon-category-disabled" + :title="t('settings', 'Disabled apps')" /> + <AppNavigationItem + v-if="updateCount > 0" + id="app-category-updates" + :to="{ name: 'apps-category', params: { category: 'updates' } }" + icon="icon-download" + :title="t('settings', 'Updates')"> + <AppNavigationCounter slot="counter"> + {{ updateCount }} + </AppNavigationCounter> + </AppNavigationItem> + <AppNavigationItem + id="app-category-your-bundles" + :to="{ name: 'apps-category', params: { category: 'app-bundles' } }" + icon="icon-category-app-bundles" + :title="t('settings', 'App bundles')" /> + + <AppNavigationSpacer /> + + <!-- App store categories --> + <template v-if="settings.appstoreEnabled"> + <AppNavigationItem + v-for="cat in categories" + :key="'icon-category-' + cat.ident" + :icon="'icon-category-' + cat.ident" + :to="{ + name: 'apps-category', + params: { category: cat.ident }, + }" + :title="cat.displayName" /> + </template> + + <AppNavigationItem + id="app-developer-docs" + href="settings.developerDocumentation" + :title="t('settings', 'Developer documentation') + ' ↗'" /> </ul> </AppNavigation> <AppContent class="app-settings-content" :class="{ 'icon-loading': loadingList }"> @@ -40,16 +90,17 @@ </template> <script> -import { - AppContent, - AppNavigation, - AppNavigationItem, - AppSidebar, - Content, -} from 'nextcloud-vue' -import AppList from '../components/AppList' +import AppContent from '@nextcloud/vue/dist/Components/AppContent' +import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation' +import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter' +import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem' +import AppNavigationSpacer from '@nextcloud/vue/dist/Components/AppNavigationSpacer' +import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar' +import Content from '@nextcloud/vue/dist/Components/Content' import Vue from 'vue' import VueLocalStorage from 'vue-localstorage' + +import AppList from '../components/AppList' import AppDetails from '../components/AppDetails' Vue.use(VueLocalStorage) @@ -58,12 +109,14 @@ export default { name: 'Apps', components: { AppContent, + AppDetails, + AppList, AppNavigation, + AppNavigationCounter, AppNavigationItem, + AppNavigationSpacer, AppSidebar, Content, - AppDetails, - AppList, }, props: { category: { @@ -102,95 +155,6 @@ export default { settings() { return this.$store.getters.getServerData }, - - // BUILD APP NAVIGATION MENU OBJECT - menu() { - // Data provided php side - let categories = this.$store.getters.getCategories - categories = Array.isArray(categories) ? categories : [] - - // Map groups - categories = categories.map(category => { - const item = {} - item.id = 'app-category-' + category.ident - item.icon = 'icon-category-' + category.ident - item.classes = [] // empty classes, active will be set later - item.router = { // router link to - name: 'apps-category', - params: { category: category.ident }, - } - item.text = category.displayName - - return item - }) - - // Add everyone group - const defaultCategories = [ - { - id: 'app-category-your-apps', - classes: [], - router: { name: 'apps' }, - icon: 'icon-category-installed', - text: t('settings', 'Your apps'), - }, - { - id: 'app-category-enabled', - classes: [], - icon: 'icon-category-enabled', - router: { name: 'apps-category', params: { category: 'enabled' } }, - text: t('settings', 'Active apps'), - }, { - id: 'app-category-disabled', - classes: [], - icon: 'icon-category-disabled', - router: { name: 'apps-category', params: { category: 'disabled' } }, - text: t('settings', 'Disabled apps'), - }, - ] - - if (!this.settings.appstoreEnabled) { - return defaultCategories - } - - if (this.$store.getters.getUpdateCount > 0) { - defaultCategories.push({ - id: 'app-category-updates', - classes: [], - icon: 'icon-download', - router: { name: 'apps-category', params: { category: 'updates' } }, - text: t('settings', 'Updates'), - utils: { counter: this.$store.getters.getUpdateCount }, - }) - } - - defaultCategories.push({ - id: 'app-category-app-bundles', - classes: [], - icon: 'icon-category-app-bundles', - router: { name: 'apps-category', params: { category: 'app-bundles' } }, - text: t('settings', 'App bundles'), - }) - - categories = defaultCategories.concat(categories) - - // Set current group as active - const activeGroup = categories.findIndex(group => group.id === 'app-category-' + this.category) - if (activeGroup >= 0) { - categories[activeGroup].classes.push('active') - } else { - categories[0].classes.push('active') - } - - categories.push({ - id: 'app-developer-docs', - classes: [], - href: this.settings.developerDocumentation, - text: t('settings', 'Developer documentation') + ' ↗', - }) - - // Return - return categories - }, }, watch: { category: function(val, old) { diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue index 7954cf42905..01fb9a9b48a 100644 --- a/apps/settings/src/views/Users.vue +++ b/apps/settings/src/views/Users.vue @@ -28,7 +28,70 @@ button-class="icon-add" @click="toggleNewUserMenu" /> <ul id="usergrouplist"> - <AppNavigationItem v-for="item in menu" :key="item.key" :item="item" /> + <AppNavigationItem + id="addgroup" + ref="addGroup" + :edit-placeholder="t('settings', 'Enter group name')" + :editable="true" + :loading="loadingAddGroup" + :title="t('settings', 'Add group')" + icon="icon-add" + @click="toggleAddGroupEntry(true)" + @update:title="createGroup" /> + <AppNavigationItem + id="everyone" + :exact="true" + :title="t('settings', 'Everyone')" + :to="{ name: 'users' }" + icon="icon-contacts-dark"> + <AppNavigationCounter v-if="userCount > 0" slot="counter"> + {{ userCount }} + </AppNavigationCounter> + </AppNavigationItem> + <AppNavigationItem + id="admin" + :exact="true" + :title="t('settings', 'Admins')" + :to="{ name: 'users', params: { selectedGroup: 'admin' } }" + icon="icon-user-admin"> + <AppNavigationCounter v-if="adminGroupMenu.count" slot="counter"> + {{ adminGroupMenu.count }} + </AppNavigationCounter> + </AppNavigationItem> + + <!-- Hide the disabled if none, if we don't have the data (-1) show it --> + <AppNavigationItem + v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1" + id="disabled" + :exact="true" + :title="t('settings', 'Disabled users')" + :to="{ name: 'users', params: { selectedGroup: 'disabled' } }" + icon="icon-disabled-users"> + <AppNavigationCounter v-if="disabledGroupMenu.usercount > 0" slot="counter"> + {{ disabledGroupMenu.usercount }} + </AppNavigationCounter> + </AppNavigationItem> + + <AppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" /> + <AppNavigationItem + v-for="group in groupList" + :id="group.id" + :key="group.id" + :exact="true" + :title="group.title" + :to="{ name: 'users', params: { selectedGroup: group.id } }"> + <AppNavigationCounter v-if="group.count" slot="counter"> + {{ group.count }} + </AppNavigationCounter> + <template slot="actions"> + <ActionButton + v-if="group.id !== 'admin' && group.id !== 'disabled' && settings.isAdmin" + icon="icon-delete" + @click="removeGroup(group.id)"> + {{ t('settings', 'Remove group') }} + </ActionButton> + </template> + </AppNavigationItem> </ul> <AppNavigationSettings> <div> @@ -85,17 +148,19 @@ </template> <script> +import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' +import AppContent from '@nextcloud/vue/dist/Components/AppContent' +import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation' +import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption' +import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter' +import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem' +import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew' +import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings' +import Content from '@nextcloud/vue/dist/Components/Content' +import Multiselect from '@nextcloud/vue/dist/Components/Multiselect' import Vue from 'vue' import VueLocalStorage from 'vue-localstorage' -import { - AppContent, - AppNavigation, - AppNavigationItem, - AppNavigationNew, - AppNavigationSettings, - Content, - Multiselect, -} from 'nextcloud-vue' + import UserList from '../components/UserList' Vue.use(VueLocalStorage) @@ -103,14 +168,17 @@ Vue.use(VueLocalStorage) export default { name: 'Users', components: { + ActionButton, AppContent, AppNavigation, + AppNavigationCaption, + AppNavigationCounter, AppNavigationItem, AppNavigationNew, AppNavigationSettings, Content, - UserList, Multiselect, + UserList, }, props: { selectedGroup: { @@ -125,7 +193,6 @@ export default { // temporary value used for multiselect change selectedQuota: false, externalActions: [], - showAddGroupEntry: false, loadingAddGroup: false, showConfig: { showStoragePath: false, @@ -140,6 +207,9 @@ export default { users() { return this.$store.getters.getUsers }, + groups() { + return this.$store.getters.getGroups + }, usersOffset() { return this.$store.getters.getUsersOffset }, @@ -206,134 +276,20 @@ export default { }, - // BUILD APP NAVIGATION MENU OBJECT - menu() { - // Data provided php side - const self = this - let groups = this.$store.getters.getGroups - groups = Array.isArray(groups) ? groups : [] - - // Map groups - groups = groups.map(group => { - const item = {} - item.id = group.id.replace(' ', '_') - item.key = item.id - item.utils = {} - - // router link to - item.router = { - name: 'group', - params: { selectedGroup: group.id }, - } - - // group name - item.text = group.name - item.title = group.name - - // users count for all groups - if (group.usercount - group.disabled > 0 || group.usercount === -1) { - item.utils.counter = group.usercount - group.disabled - } - - if (item.id !== 'admin' && item.id !== 'disabled' && this.settings.isAdmin) { - // add delete button on real groups - item.utils.actions = [{ - icon: 'icon-delete', - text: t('settings', 'Remove group'), - action: function() { - self.removeGroup(group.id) - }, - }] - } - return item - }) - - // Every item is added on top of the array, so we're going backward - // Groups, separator, disabled, admin, everyone - - // Add separator - let realGroups = groups.find((group) => { return group.id !== 'disabled' && group.id !== 'admin' }) - realGroups = typeof realGroups === 'undefined' ? [] : realGroups - realGroups = Array.isArray(realGroups) ? realGroups : [realGroups] - if (realGroups.length > 0) { - const separator = { - caption: true, - text: t('settings', 'Groups'), - } - groups.unshift(separator) - } - - // Adjust admin and disabled groups - const adminGroup = groups.find(group => group.id === 'admin') - const disabledGroup = groups.find(group => group.id === 'disabled') - - // filter out admin and disabled - groups = groups.filter(group => ['admin', 'disabled'].indexOf(group.id) === -1) - - if (adminGroup && adminGroup.text) { - adminGroup.text = t('settings', 'Admins') // rename admin group - adminGroup.icon = 'icon-user-admin' // set icon - groups.unshift(adminGroup) // add admin group if present - } - if (disabledGroup && disabledGroup.text) { - disabledGroup.text = t('settings', 'Disabled users') // rename disabled group - disabledGroup.icon = 'icon-disabled-users' // set icon - if (disabledGroup.utils && ( - disabledGroup.utils.counter > 0 // add disabled if not empty - || disabledGroup.utils.counter === -1) // add disabled if ldap enabled - ) { - groups.unshift(disabledGroup) - if (disabledGroup.utils.counter === -1) { - // hides the counter instead of showing -1 - delete disabledGroup.utils.counter - } - } - } - - // Add everyone group - const everyoneGroup = { - id: 'everyone', - key: 'everyone', - icon: 'icon-contacts-dark', - router: { name: 'users' }, - text: t('settings', 'Everyone'), - } - // users count - if (this.userCount > 0) { - Vue.set(everyoneGroup, 'utils', { - counter: this.userCount, - }) - } - groups.unshift(everyoneGroup) - - const addGroup = { - id: 'addgroup', - key: 'addgroup', - icon: 'icon-add', - text: t('settings', 'Add group'), - classes: this.loadingAddGroup ? 'icon-loading-small' : '', - } - if (this.showAddGroupEntry) { - Vue.set(addGroup, 'edit', { - text: t('settings', 'Add group'), - action: this.createGroup, - reset: function() { - self.showAddGroupEntry = false - }, - }) - addGroup.classes = 'editing' - } else { - Vue.set(addGroup, 'action', function() { - self.showAddGroupEntry = true - // focus input - Vue.nextTick(() => { - window.addgroup.querySelector('form > input[type="text"]').focus() - }) - }) - } - groups.unshift(addGroup) + groupList() { + const groups = Array.isArray(this.groups) ? this.groups : [] return groups + // filter out disabled and admin + .filter(group => group.id !== 'disabled' && group.id !== 'admin') + .map(group => this.formatGroupMenu(group)) + }, + + adminGroupMenu() { + return this.formatGroupMenu(this.groups.find(group => group.id === 'admin')) + }, + disabledGroupMenu() { + return this.formatGroupMenu(this.groups.find(group => group.id === 'disabled')) }, }, beforeMount() { @@ -446,26 +402,81 @@ export default { /** * Create a new group * - * @param {Object} event The form submit event + * @param {string} gid The group id */ - createGroup(event) { - const gid = event.target[0].value - this.loadingAddGroup = true - this.$store.dispatch('addGroup', gid) - .then(() => { - this.showAddGroupEntry = false - this.loadingAddGroup = false - this.$router.push({ - name: 'group', - params: { - selectedGroup: gid, - }, - }) + async createGroup(gid) { + // group is not valid + if (gid.trim() === '') { + Vue.nextTick(() => { + this.toggleAddGroupEntry(true) }) - .catch(() => { - this.loadingAddGroup = false + return + } + + try { + this.loadingAddGroup = true + await this.$store.dispatch('addGroup', gid.trim()) + + this.toggleAddGroupEntry(false) + this.$router.push({ + name: 'group', + params: { + selectedGroup: gid.trim(), + }, }) + } catch { + this.toggleAddGroupEntry(true) + } finally { + this.loadingAddGroup = false + } + }, + + /** + * Toggle the add group entry editing state + * @param {boolean} [state] set state instead of toggling + */ + toggleAddGroupEntry(state) { + if (state === undefined) { + state = !this.$refs.addGroup.editing + } + this.$refs.addGroup.editing = state + + // focus input + Vue.nextTick(() => { + if (this.$refs.addGroup.$el) { + const input = this.$refs.addGroup.$el.querySelector('form > input[type="text"]') + if (input) { + input.focus() + } + } + }) + }, + + /** + * Format a group to a menu entry + * @param {Object} group the group + * @returns {Object} + */ + formatGroupMenu(group) { + const item = {} + item.id = group.id.replace(' ', '_') + item.title = group.name + item.usercount = group.usercount + + // users count for all groups + if (group.usercount - group.disabled > 0) { + item.count = group.usercount - group.disabled + } + + return item }, }, } </script> + +<style lang="scss" scoped> +// force hiding the editing action for the add group entry +#usergrouplist #addgroup::v-deep .app-navigation-entry__utils { + display: none; +} +</style> |