first initialization gallery

2024-09-22 01:26:59 +02:00
parent f1b6dd74f7
commit 7ab6939863
23 changed files with 792 additions and 34 deletions
--- a/frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue
@@ -0,0 +1,137 @@
+<template>
+    <DialogWidget ref="dialog" title="socialnetwork.gallery.create_folder_dialog.title" icon="folder16.png"
+        :show-close="true" :buttons="buttons" :modal="true" :isTitleTranslated="true" @close="closeDialog"
+        name="CreateFolderDialog">
+        <div>
+            <div class="form-group">
+                <label>{{ $t("socialnetwork.gallery.create_folder_dialog.parent_folder") }}</label>
+                <input type="text" :value="parentFolder.name" disabled />
+            </div>
+            <div class="form-group">
+                <label for="folderTitle">{{ $t("socialnetwork.gallery.create_folder_dialog.folder_title") }}</label>
+                <input type="text" v-model="folderTitle"
+                    :placeholder="$t('socialnetwork.gallery.create_folder_dialog.folder_title')" required />
+            </div>
+            <div class="form-group">
+                <label for="visibility">{{ $t("socialnetwork.gallery.create_folder_dialog.visibility") }}
+                    <multiselect v-model="selectedVisibility" :options="visibilityOptions" :multiple="true"
+                        label="description" :track-by="'id'" :close-on-select="false"
+                        :placeholder="$t('socialnetwork.gallery.create_folder_dialog.select_visibility')">
+                        <template #option="{ option }">
+                            <span v-if="option && option.description">{{
+                                $t(`socialnetwork.gallery.visibility.${option.description}`) }}
+                            </span>
+                        </template>
+                        <template #tag="{ option, remove }">
+                            <span v-if="option && option.description" class="multiselect__tag">
+                                {{ $t(`socialnetwork.gallery.visibility.${option.description}`) }}
+                                <span @click="remove(option)">×</span>
+                            </span>
+                        </template>
+                    </multiselect>
+                </label>
+            </div>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect';
+import DialogWidget from '@/components/DialogWidget.vue';
+import { mapGetters } from 'vuex';
+import apiClient from '@/utils/axios.js';
+
+export default {
+    name: 'CreateFolderDialog',
+    components: {
+        DialogWidget,
+        Multiselect
+    },
+    props: {
+        parentFolder: {
+            type: [Object, null],
+            required: true,
+            default() {
+                return { id: null, name: '' };
+            }
+        }
+    },
+    data() {
+        return {
+            folderTitle: '',
+            visibilityOptions: [],
+            selectedVisibility: [],
+        };
+    },
+    computed: {
+        ...mapGetters(['isLoggedIn']),
+        buttons() {
+            return [{ text: this.$t("socialnetwork.gallery.create_folder"), action: this.createFolder }];
+        },
+    },
+    async mounted() {
+        await this.loadVisibilityOptions();
+    },
+    methods: {
+        async open() {
+            if (!this.parentFolder || !this.parentFolder.id) {
+                console.error('No parent folder selected');
+                return;
+            }
+            this.$refs.dialog.open();
+        },
+        closeDialog() {
+            this.$refs.dialog.close();
+        },
+        async loadVisibilityOptions() {
+            try {
+                const response = await apiClient.get('/api/socialnetwork/imagevisibilities');
+                this.visibilityOptions = response.data;
+            } catch (error) {
+                console.error('Error loading visibility options:', error);
+            }
+        },
+        async createFolder() {
+            if (!this.folderTitle || !this.selectedVisibility) {
+                alert(this.$t('socialnetwork.gallery.errors.missing_fields'));
+                return;
+            }
+
+            try {
+                const payload = {
+                    name: this.folderTitle,
+                    parentId: this.parentFolder.id,
+                    visibilities: this.selectedVisibility.map(item => item.id),
+                };
+
+                await apiClient.post('/api/socialnetwork/folders', payload);
+                this.$emit('created', payload);
+                this.closeDialog();
+            } catch (error) {
+                console.error('Error creating folder:', error);
+            }
+        }
+    }
+};
+
+</script>
+
+<style scoped>
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input[disabled] {
+    background-color: #f0f0f0;
+}
+
+.multiselect {
+    display: inline-block;
+    width: auto;
+}
+</style>