torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Finished guestbook and gallery. started diary

Browse Source
This commit is contained in:
Torsten Schulz
2024-09-27 07:40:06 +02:00
parent a2ee66c9de
commit c31be3f879
34 changed files with 2298 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue
View File

@@ -5,36 +5,38 @@
<div>
<div class="form-group">
<label>{{ $t("socialnetwork.gallery.create_folder_dialog.parent_folder") }}</label>
<!-- Hier wird der übergeordnete Ordner angezeigt, aber nicht bearbeitbar -->
<input type="text" :value="parentFolder.name" disabled />
</div>
<div class="form-group">
<label for="folderTitle">{{ $t("socialnetwork.gallery.create_folder_dialog.folder_title") }}</label>
<!-- Setze den Titel des Ordners für Bearbeiten -->
<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>
<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';
@@ -47,20 +49,13 @@ export default {
DialogWidget,
Multiselect
},
props: {
parentFolder: {
type: [Object, null],
required: true,
default() {
return { id: null, name: '' };
}
}
},
data() {
return {
folderTitle: '',
visibilityOptions: [],
selectedVisibility: [],
parentFolder: {id: null, name: ''},
folderId: 0
};
},
computed: {
@@ -73,44 +68,56 @@ export default {
await this.loadVisibilityOptions();
},
methods: {
async open() {
if (!this.parentFolder || !this.parentFolder.id) {
console.error('No parent folder selected');
return;
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();
},
closeDialog() {
this.$refs.dialog.close();
},
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) {
console.error('Error loading visibility options:', error);
}
},
async createFolder() {
if (!this.folderTitle || !this.selectedVisibility) {
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 {
const payload = {
name: this.folderTitle,
parentId: this.parentFolder.id,
visibilities: this.selectedVisibility.map(item => item.id),
};
await apiClient.post('/api/socialnetwork/folders', payload);
if (this.parentFolder.id) {
await apiClient.put(`/api/socialnetwork/folders/${this.parentFolder.id}`, payload);
} else {
await apiClient.post(`/api/socialnetwork/folders/${this.folderId}`, payload);
}
this.$emit('created', payload);
this.closeDialog();
} catch (error) {
console.error('Error creating folder:', error);
console.error('Fehler beim Erstellen/Bearbeiten des Ordners:', error);
}
}
},
closeDialog() {
this.$refs.dialog.close();
},
}
};