mirror of
https://github.com/nextcloud/server.git
synced 2026-06-09 08:44:07 -04:00
Add new component for the group list items.
Signed-off-by: Martin Jänel <spammemore@posteo.de> Signed-off-by: Louis Chemineau <louis@chmn.me>
This commit is contained in:
ArcticFall
Louis Chemineau
parent
849d3697d3
commit
398297b449
3 changed files with 152 additions and 62 deletions
143
apps/settings/src/components/GroupListItem.vue
Normal file
143
apps/settings/src/components/GroupListItem.vue
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2021 Martin Jänel <spammemore@posteo.de>
|
||||
-
|
||||
- @author Martin Jänel <spammemore@posteo.de>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<AppNavigationItem
|
||||
:key="id"
|
||||
:exact="true"
|
||||
:title="title"
|
||||
:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }"
|
||||
icon="icon-group"
|
||||
:loading="loadingRenameGroup"
|
||||
:menuOpen="openGroupMenu"
|
||||
@update:menuOpen="handleGroupMenuOpen">
|
||||
<template #counter>
|
||||
<CounterBubble v-if="count">
|
||||
{{ count }}
|
||||
</CounterBubble>
|
||||
</template>
|
||||
<template #actions>
|
||||
<ActionInput
|
||||
v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
|
||||
ref="displayNameInput"
|
||||
icon="icon-edit"
|
||||
type="text"
|
||||
:value="title"
|
||||
@submit="renameGroup(id)">
|
||||
{{ t('settings', 'Rename group') }}
|
||||
</ActionInput>
|
||||
<ActionButton
|
||||
v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
|
||||
icon="icon-delete"
|
||||
@click="removeGroup(id)">
|
||||
{{ t('settings', 'Remove group') }}
|
||||
</ActionButton>
|
||||
</template>
|
||||
</AppNavigationItem>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
|
||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
|
||||
import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
|
||||
|
||||
export default {
|
||||
name: 'GroupListItem',
|
||||
components: {
|
||||
ActionInput,
|
||||
ActionButton,
|
||||
CounterBubble,
|
||||
AppNavigationItem,
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingRenameGroup: false,
|
||||
openGroupMenu: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
settings() {
|
||||
return this.$store.getters.getServerData
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleGroupMenuOpen() {
|
||||
this.openGroupMenu = true
|
||||
},
|
||||
async renameGroup(gid) {
|
||||
// check if group id is valid
|
||||
if (gid.trim() === '') {
|
||||
return
|
||||
}
|
||||
|
||||
const displayName = this.$refs.displayNameInput.$el.querySelector('input[type="text"]').value
|
||||
|
||||
// check if group name is valid
|
||||
if (displayName.trim() === '') {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
this.openGroupMenu = false
|
||||
this.loadingRenameGroup = true
|
||||
await this.$store.dispatch('renameGroup', {
|
||||
groupid: gid.trim(),
|
||||
displayName: displayName.trim()
|
||||
})
|
||||
|
||||
this.loadingRenameGroup = false
|
||||
} catch {
|
||||
this.openGroupMenu = true
|
||||
this.loadingRenameGroup = false
|
||||
}
|
||||
},
|
||||
removeGroup(groupid) {
|
||||
const self = this
|
||||
// TODO migrate to a vue js confirm dialog component
|
||||
OC.dialogs.confirm(
|
||||
t('settings', 'You are about to remove the group {group}. The users will NOT be deleted.', { group: groupid }),
|
||||
t('settings', 'Please confirm the group removal '),
|
||||
function(success) {
|
||||
if (success) {
|
||||
self.$store.dispatch('removeGroup', groupid)
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -96,12 +96,12 @@ const mutations = {
|
|||
console.error('Can\'t create group', e)
|
||||
}
|
||||
},
|
||||
renameGroup(state, { gid, displayname }) {
|
||||
renameGroup(state, { gid, displayName }) {
|
||||
const groupIndex = state.groups.findIndex(groupSearch => groupSearch.id === gid)
|
||||
if (groupIndex >= 0) {
|
||||
const updatedGroup = state.groups[groupIndex]
|
||||
updatedGroup.name = displayname
|
||||
state.groups[groupIndex] = updatedGroup
|
||||
updatedGroup.name = displayName
|
||||
state.groups.splice(groupIndex, 1, updatedGroup)
|
||||
state.groups = orderGroups(state.groups, state.orderBy)
|
||||
}
|
||||
},
|
||||
|
|
@ -362,7 +362,7 @@ const actions = {
|
|||
return api.requireAdmin().then((response) => {
|
||||
return api.put(generateOcsUrl('cloud/groups/{groupId}', { groupId: encodeURIComponent(groupid) }), { key: 'displayname', value: displayName })
|
||||
.then((response) => {
|
||||
context.commit('renameGroup', { gid: groupid, displayname: displayName })
|
||||
context.commit('renameGroup', { gid: groupid, displayName })
|
||||
return { groupid, displayName }
|
||||
})
|
||||
.catch((error) => { throw error })
|
||||
|
|
|
|||
|
|
@ -72,31 +72,11 @@
|
|||
</AppNavigationItem>
|
||||
|
||||
<AppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
|
||||
<AppNavigationItem v-for="group in groupList"
|
||||
<GroupListItem v-for="group in groupList"
|
||||
:id="group.id"
|
||||
:key="group.id"
|
||||
:exact="true"
|
||||
:title="group.title"
|
||||
:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(group.id) } }"
|
||||
icon="icon-group">
|
||||
<AppNavigationCounter v-if="group.count" slot="counter">
|
||||
{{ group.count }}
|
||||
</AppNavigationCounter>
|
||||
<template #actions>
|
||||
<ActionInput v-if="group.id !== 'admin' && group.id !== 'disabled' && settings.isAdmin"
|
||||
ref="displayNameInput"
|
||||
icon="icon-edit"
|
||||
type="text"
|
||||
:value="group.title"
|
||||
@submit="renameGroup(group.id)">
|
||||
{{ t('settings', 'Rename group') }}
|
||||
</ActionInput>
|
||||
<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>
|
||||
:count="group.count" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<AppNavigationSettings>
|
||||
|
|
@ -162,8 +142,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
|
||||
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'
|
||||
|
|
@ -178,6 +156,7 @@ import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
|
|||
import Vue from 'vue'
|
||||
import VueLocalStorage from 'vue-localstorage'
|
||||
|
||||
import GroupListItem from '../components/GroupListItem'
|
||||
import UserList from '../components/UserList'
|
||||
|
||||
Vue.use(VueLocalStorage)
|
||||
|
|
@ -185,8 +164,6 @@ Vue.use(VueLocalStorage)
|
|||
export default {
|
||||
name: 'Users',
|
||||
components: {
|
||||
ActionInput,
|
||||
ActionButton,
|
||||
AppContent,
|
||||
AppNavigation,
|
||||
AppNavigationCaption,
|
||||
|
|
@ -195,6 +172,7 @@ export default {
|
|||
AppNavigationNew,
|
||||
AppNavigationSettings,
|
||||
Content,
|
||||
GroupListItem,
|
||||
Multiselect,
|
||||
UserList,
|
||||
},
|
||||
|
|
@ -376,37 +354,6 @@ export default {
|
|||
this.$localStorage.set(key, status)
|
||||
return status
|
||||
},
|
||||
async renameGroup(gid) {
|
||||
// check if group id is valid
|
||||
if (gid.trim() === '') {
|
||||
return
|
||||
}
|
||||
|
||||
const displayName = this.$refs.displayNameInput[0].$el.querySelector('input[type="text"]').value
|
||||
|
||||
// check if group name is valid
|
||||
if (displayName.trim() === '') {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('renameGroup', { groupid: gid.trim(), displayName: displayName.trim() })
|
||||
} catch {
|
||||
}
|
||||
},
|
||||
removeGroup(groupid) {
|
||||
const self = this
|
||||
// TODO migrate to a vue js confirm dialog component
|
||||
OC.dialogs.confirm(
|
||||
t('settings', 'You are about to remove the group {group}. The users will NOT be deleted.', { group: groupid }),
|
||||
t('settings', 'Please confirm the group removal '),
|
||||
function(success) {
|
||||
if (success) {
|
||||
self.$store.dispatch('removeGroup', groupid)
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* Dispatch default quota set request
|
||||
|
|
|
|||
Loading…
Reference in a new issue