143 lines
5.0 KiB
Vue
143 lines
5.0 KiB
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>
|
||
</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';
|
||
|
||
export default {
|
||
name: 'CreateFolderDialog',
|
||
components: {
|
||
DialogWidget,
|
||
Multiselect
|
||
},
|
||
data() {
|
||
return {
|
||
folderTitle: '',
|
||
visibilityOptions: [],
|
||
selectedVisibility: [],
|
||
parentFolder: {id: null, name: ''},
|
||
folderId: 0
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters(['isLoggedIn']),
|
||
buttons() {
|
||
return [{ text: this.$t("socialnetwork.gallery.create_folder"), action: this.createFolder }];
|
||
},
|
||
},
|
||
async mounted() {
|
||
await this.loadVisibilityOptions();
|
||
},
|
||
methods: {
|
||
open(folder = null) {
|
||
if (folder) {
|
||
this.folderTitle = folder.name;
|
||
this.selectedVisibility = this.visibilityOptions.filter(option =>
|
||
folder.visibilityTypeIds.includes(option.id)
|
||
);
|
||
} else {
|
||
this.folderTitle = '';
|
||
this.selectedVisibility = [];
|
||
}
|
||
this.$refs.dialog.open();
|
||
},
|
||
async loadVisibilityOptions() {
|
||
try {
|
||
const response = await apiClient.get('/api/socialnetwork/imagevisibilities');
|
||
this.visibilityOptions = 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) {
|
||
alert(this.$t('socialnetwork.gallery.errors.missing_fields'));
|
||
return;
|
||
}
|
||
const payload = {
|
||
name: this.folderTitle,
|
||
parentId: this.parentFolder.id,
|
||
visibilities: this.selectedVisibility.map(item => item.id),
|
||
};
|
||
try {
|
||
if (this.parentFolder.id) {
|
||
await apiClient.post(`/api/socialnetwork/folders/${this.parentFolder.id}`, payload);
|
||
} else {
|
||
await apiClient.post(`/api/socialnetwork/folders/${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>
|