space settings

2026-01-02 12:49:02 -05:00 · 2024-09-02 17:48:59 +02:00
parent 6087668e26
commit 5f184693ca
6 changed files with 102 additions and 24 deletions
--- a/vue3/src/components/settings/SpaceMemberSettings.vue
+++ b/vue3/src/components/settings/SpaceMemberSettings.vue
@@ -3,16 +3,14 @@
        <p class="text-h6">{{ $t('SpaceMembers') }}</p>
        <v-divider class="mb-3"></v-divider>

-        <v-data-table :items="spaceUserSpaces" :headers="userTableHeaders"  density="compact" :hide-default-footer="spaceUserSpaces.length < 10">
-
+        <v-data-table :items="spaceUserSpaces" :headers="userTableHeaders" density="compact" :hide-default-footer="spaceUserSpaces.length < 10">
            <template #item.groups="{item}">
-                <span v-for="g in item.groups">{{ g.name }}</span>
+                <span v-for="g in item.groups">{{ g.name }}&nbsp;</span>
            </template>

            <template #item.edit="{item}">
                <v-btn icon="$edit" color="edit" size="small" variant="tonal" @click="spaceUserEditDialogUserSpace = Object.assign({}, item); spaceUserEditDialogState = true"></v-btn>
            </template>
-
        </v-data-table>

        <v-dialog v-model="spaceUserEditDialogState" max-width="400px">
@@ -21,25 +19,28 @@
                <v-card-subtitle>{{ $t('Created') }} {{ DateTime.fromJSDate(spaceUserEditDialogUserSpace.createdAt).toLocaleString(DateTime.DATETIME_MED) }}</v-card-subtitle>
                <v-card-text>
                    <v-form>
-                        <v-select :items="groups" item-value="id" item-title="name" v-model="spaceUserEditDialogUserSpace.groups"></v-select>
+                        <v-select :items="groups" item-value="id" item-title="name" v-model="spaceUserEditDialogUserSpace.groups" multiple return-object></v-select>
                    </v-form>
                    <div v-if="spaceUserEditDialogUserSpace.internalNote">
-                        <p>{{$t('Note')}}</p>
-                        <span>{{spaceUserEditDialogUserSpace.internalNote}}</span>
+                        <p>{{ $t('Note') }}</p>
+                        <span>{{ spaceUserEditDialogUserSpace.internalNote }}</span>
                    </div>
                </v-card-text>
                <v-card-actions>
-                    <v-btn color="cancel"  @click="spaceUserEditDialogState = false">{{ $t('Cancel') }}</v-btn>
+                    <v-btn color="cancel" @click="spaceUserEditDialogState = false">{{ $t('Cancel') }}</v-btn>
                    <v-btn color="save" prepend-icon="$save" @click="updateUserSpace(spaceUserEditDialogUserSpace)">{{ $t('Save') }}</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

-        <p class="text-h6 mt-3">{{ $t('Invites') }} <v-btn size="small" class="float-right" prepend-icon="$create" color="create" @click="inviteLinkDialogObject = {} as InviteLink;inviteLinkDialogState = true">{{$t('New')}}</v-btn></p>
+        <p class="text-h6 mt-3">{{ $t('Invites') }}
+            <v-btn size="small" class="float-right" prepend-icon="$create" color="create" @click="inviteLinkDialogObject = {} as InviteLink;inviteLinkDialogState = true">{{ $t('New') }}</v-btn>
+        </p>
        <v-divider class="mb-3"></v-divider>

        <v-data-table :items="spaceInviteLinks" :headers="inviteTableHeaders" density="compact" :hide-default-footer="spaceInviteLinks.length < 10">
            <template #item.edit="{item}">
+                <v-btn icon="$copy" color="success" size="small" variant="tonal" @click="copyInviteLink(item)"></v-btn>
                <v-btn icon="$edit" color="edit" size="small" variant="tonal" @click="inviteLinkDialogObject = Object.assign({}, item); inviteLinkDialogState = true"></v-btn>
            </template>

@@ -47,7 +48,7 @@

        <v-dialog v-model="inviteLinkDialogState" max-width="400px">
            <v-card>
-                <v-card-title>{{$t('Invites')}}</v-card-title>
+                <v-card-title>{{ $t('Invites') }}</v-card-title>
                <v-card-text>
                    <v-form>
                        <v-text-field :label="$t('Email')" v-model="inviteLinkDialogObject.email"></v-text-field>
@@ -59,8 +60,12 @@

                </v-card-text>
                <v-card-actions>
-                    <v-btn color="cancel"  @click="inviteLinkDialogState = false">{{ $t('Cancel') }}</v-btn>
-                    <v-btn color="save" prepend-icon="$save" @click="createInviteLink(inviteLinkDialogObject)">{{ $t('Create') }}</v-btn>
+                    <v-btn color="cancel" @click="inviteLinkDialogState = false">{{ $t('Cancel') }}</v-btn>
+                    <v-btn color="save" prepend-icon="$save" @click="saveInviteLink(inviteLinkDialogObject)" :loading="inviteLinkDialogLoading">
+                        <span v-if="inviteLinkDialogObject.id == undefined">{{ $t('Create') }}</span>
+                        <span v-if="inviteLinkDialogObject.id != undefined">{{ $t('Update') }}</span>
+                    </v-btn>
+                    <v-btn color="delete" prepend-icon="$delete" @click="deleteInviteLink(inviteLinkDialogObject)" v-if="inviteLinkDialogObject.id != undefined">{{ $t('Delete') }}</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
@@ -77,7 +82,8 @@ import {ApiApi, Group, InviteLink, UserSpace} from "@/openapi";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 import {useI18n} from "vue-i18n";
 import {DateTime} from "luxon";
-import {VDateInput} from 'vuetify/labs/VDateInput' //TODO remove once component is out of labs
+import {VDateInput} from 'vuetify/labs/VDateInput'
+import {useClipboard} from "@vueuse/core"; //TODO remove once component is out of labs

 const {t} = useI18n()

@@ -90,6 +96,7 @@ const spaceUserEditDialogUserSpace = ref({} as UserSpace)

 const inviteLinkDialogState = ref(false)
 const inviteLinkDialogObject = ref({} as InviteLink)
+const inviteLinkDialogLoading = ref(false)

 const userTableHeaders = [
    {title: t('Username'), key: 'user.username'},
@@ -126,28 +133,78 @@ onMounted(() => {
    })
 })

+/**
+ * update user space in DB and list on client
+ * @param userSpace UserSpace object to update
+ */
 function updateUserSpace(userSpace: UserSpace) {
    const api = new ApiApi()

    api.apiUserSpacePartialUpdate({id: userSpace.id!, patchedUserSpace: userSpace}).then(r => {
-
+        spaceUserSpaces.value.splice(spaceUserSpaces.value.indexOf(userSpace), 1, r)
+        useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
    }).catch(err => {
        useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
    })
 }

-function createInviteLink(inviteLink: InviteLink){
+/**
+ * create or update the invite link, refresh invite link list on client
+ * @param inviteLink InviteLink object to update
+ */
+function saveInviteLink(inviteLink: InviteLink) {
    const api = new ApiApi()

-    api.apiInviteLinkCreate({inviteLink: inviteLink}).then(r => {
+    inviteLinkDialogLoading.value = true
+
+    if (inviteLink.id == undefined) {
+        api.apiInviteLinkCreate({inviteLink: inviteLink}).then(r => {
+            inviteLinkDialogState.value = false
+            spaceInviteLinks.value.push(r)
+            useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+        }).finally(() => {
+            inviteLinkDialogLoading.value = false
+        })
+    } else {
+        api.apiInviteLinkUpdate({inviteLink: inviteLink, id: inviteLink.id}).then(r => {
+            inviteLinkDialogState.value = false
+            spaceInviteLinks.value.splice(spaceInviteLinks.value.indexOf(inviteLink), 1, r)
+            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        }).finally(() => {
+            inviteLinkDialogLoading.value = false
+        })
+    }
+
+}
+
+/**
+ * delete invite link from database and client
+ * @param inviteLink InviteLink object to delete
+ */
+function deleteInviteLink(inviteLink: InviteLink) {
+    const api = new ApiApi()
+    api.apiInviteLinkDestroy({id: inviteLink.id}).then(r => {
        inviteLinkDialogState.value = false
-        spaceInviteLinks.value.push(r)
-        useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
+        spaceInviteLinks.value.splice(spaceInviteLinks.value.indexOf(inviteLink) - 1, 1)
+        useMessageStore().addPreparedMessage(PreparedMessage.DELETE_SUCCESS)
    }).catch(err => {
-        useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+        useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
    })
 }

+/**
+ * copy invite link with url to clipboard
+ * @param inviteLink InviteLink object to copy
+ */
+function copyInviteLink(inviteLink: InviteLink) {
+    const {copy} = useClipboard()
+    copy(`${location.protocol}//${location.host}/invite/${inviteLink.uuid}`)
+}
+
 </script>

 <style scoped>
--- a/vue3/src/components/settings/UserSpaceSettings.vue
+++ b/vue3/src/components/settings/UserSpaceSettings.vue
@@ -7,8 +7,8 @@

    <v-row>
        <v-col cols="6" v-for="s in spaces">
-            <v-card>
-                <v-img height="200px" :src="recipeDefaultImage" :alt="$t('Image')"> </v-img>
+            <v-card @click="useUserPreferenceStore().switchSpace(s)">
+                <v-img height="200px" cover :src="(s.image !== undefined) ? s.image?.preview  : recipeDefaultImage" :alt="$t('Image')"> </v-img>
                <v-card-title>{{ s.name }} <v-chip variant="tonal" density="compact" color="error" v-if="s.id == useUserPreferenceStore().activeSpace.id">{{$t('active')}}</v-chip></v-card-title>
                <v-card-subtitle>{{ $t('created_by') }} {{ s.createdBy.displayName }} </v-card-subtitle>
            </v-card>
--- a/vue3/src/stores/MessageStore.ts
+++ b/vue3/src/stores/MessageStore.ts
@@ -23,6 +23,7 @@ export enum ErrorMessageType {
 export enum PreparedMessage {
    UPDATE_SUCCESS = 'UPDATE_SUCCESS',
    CREATE_SUCCESS = 'CREATE_SUCCESS',
+    DELETE_SUCCESS = 'DELETE_SUCCESS',
 }

 /**
@@ -93,6 +94,7 @@ export const useMessageStore = defineStore('message_store', () => {
        if (preparedMessage == PreparedMessage.UPDATE_SUCCESS) {
            addMessage(MessageType.SUCCESS, 'Updated Successfully', 7000, {}) // TODO localize and make more useful ?
            addMessage(MessageType.SUCCESS, 'Created Successfully', 7000, {})
+            addMessage(MessageType.SUCCESS, 'Deleted Successfully', 7000, {})
        }
    }

--- a/vue3/src/stores/UserPreferenceStore.ts
+++ b/vue3/src/stores/UserPreferenceStore.ts
@@ -64,10 +64,28 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
        })
    }

+    /**
+     * load data for currently active space
+     */
    function loadActiveSpace(){
        let api = new ApiApi()
        api.apiSpaceCurrentRetrieve().then(r => {
            activeSpace.value = r
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+        })
+    }
+
+    /**
+     * switch to the given space
+     */
+    function switchSpace(space: Space){
+        let api = new ApiApi()
+
+        api.apiSwitchActiveSpaceRetrieve({spaceId: space.id}).then(r => {
+            loadActiveSpace()
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
        })
    }

@@ -76,7 +94,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
    // always load active space on first initialization of store
    loadActiveSpace()

-    return {deviceSettings, userSettings, activeSpace, loadUserSettings, updateUserSettings}
+    return {deviceSettings, userSettings, activeSpace, loadUserSettings, updateUserSettings, switchSpace}
 })

 // enable hot reload for store
--- a/vue3/src/vuetify.ts
+++ b/vue3/src/vuetify.ts
@@ -62,6 +62,7 @@ export default createVuetify({
            edit: 'fa-solid fa-pencil',
            create: 'fa-solid fa-circle-plus',
            search: 'fa-solid fa-magnifying-glass',
+            copy: 'fa-solid fa-copy',
            settings: 'fa-solid fa-sliders',
            spaces: 'fa-solid fa-database',
            shopping: 'fa-solid fa-cart-shopping',