yourpart3/frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue

<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") }}</label>
                <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>
            </div>
            <div v-if="requiresSelectedUsers" class="form-group">
                <label for="selectedUsers">{{ $t("socialnetwork.gallery.visibility.selected-users") }}</label>
                <input
                    id="selectedUsers"
                    type="text"
                    v-model="selectedUsernamesText"
                    placeholder="anna, bert, clara"
                />
            </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';
import { EventBus } from '@/utils/eventBus.js';
import { showError } from '@/utils/feedback.js';

export default {
    name: 'CreateFolderDialog',
    components: {
        DialogWidget,
        Multiselect
    },
    data() {
        return {
            folderTitle: '',
            visibilityOptions: [],
            allVisibilityOptions: [],
            selectedVisibility: [],
            selectedUsernamesText: '',
            parentFolder: {id: null, name: ''},
            folderId: 0,
            eroticMode: false
        };
    },
    computed: {
        ...mapGetters(['isLoggedIn']),
        buttons() {
            return [{ text: this.$t("socialnetwork.gallery.create_folder"), action: this.createFolder }];
        },
        requiresSelectedUsers() {
            return this.selectedVisibility.some(option => option?.description === 'selected-users');
        }
    },
    async mounted() {
        await this.loadVisibilityOptions();
    },
    methods: {
        open(folder = null) {
            this.visibilityOptions = this.eroticMode
                ? this.allVisibilityOptions.filter(option => option.description !== 'everyone')
                : [...this.allVisibilityOptions];
            if (folder) {
                this.folderTitle = folder.name;
                this.selectedVisibility = this.visibilityOptions.filter(option =>
                    folder.visibilityTypeIds.includes(option.id)
                );
                this.selectedUsernamesText = (folder.selectedUsers || []).join(', ');
            } else {
                this.folderTitle = '';
                this.selectedVisibility = [];
                this.selectedUsernamesText = '';
            }
            this.$refs.dialog.open();
        },
        async loadVisibilityOptions() {
            try {
                const response = await apiClient.get('/api/socialnetwork/imagevisibilities');
                this.allVisibilityOptions = response.data;
                this.visibilityOptions = this.eroticMode
                    ? response.data.filter(option => option.description !== 'everyone')
                    : [...response.data];
                if (this.selectedVisibility.length) {
                    this.selectedVisibility = this.visibilityOptions.filter(option =>
                        this.selectedVisibility.map(v => v.id).includes(option.id)
                    );
                }
            } catch (error) {
            }
        },
        async createFolder() {
            if (!this.folderTitle || !this.selectedVisibility.length) {
                showError(this, this.$t('socialnetwork.gallery.errors.missing_fields'));
                return;
            }
            const payload = {
                name: this.folderTitle,
                parentId: this.parentFolder.id,
                visibilities: this.selectedVisibility.map(item => item.id),
                selectedUsers: this.selectedUsernamesText
                    .split(',')
                    .map(value => value.trim())
                    .filter(Boolean),
            };
            try {
                const basePath = this.eroticMode ? '/api/socialnetwork/erotic/folders' : '/api/socialnetwork/folders';
                if (this.parentFolder.id) {
                    await apiClient.post(`${basePath}/${this.parentFolder.id}`, payload);
                } else {
                    await apiClient.post(`${basePath}/${this.folderId}`, payload);
                }
                EventBus.emit('folderCreated');
                this.closeDialog();
            } catch (error) {
                console.error('Fehler beim Erstellen/Bearbeiten des Ordners:', error);
            }
        },
        closeDialog() {
            this.$refs.dialog.close();
        },
    }
};

</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>