Sharkey/packages/client/src/pages/gallery/edit.vue

165 lines
4 KiB
Vue
Raw Normal View History

<template>
2022-01-04 15:42:04 +02:00
<div>
<FormSuspense :p="init">
2021-09-29 18:50:45 +03:00
<FormInput v-model="title">
2022-01-04 15:42:04 +02:00
<template #label>{{ $ts.title }}</template>
</FormInput>
2021-09-29 18:50:45 +03:00
<FormTextarea v-model="description" :max="500">
2022-01-04 15:42:04 +02:00
<template #label>{{ $ts.description }}</template>
</FormTextarea>
<FormGroup>
2022-01-04 20:09:20 +02:00
<div v-for="file in files" :key="file.id" class="_formGroup wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
<div class="name">{{ file.name }}</div>
2021-11-19 12:36:12 +02:00
<button v-tooltip="$ts.remove" class="remove _button" @click="remove(file)"><i class="fas fa-times"></i></button>
</div>
2021-11-19 12:36:12 +02:00
<FormButton primary @click="selectFile"><i class="fas fa-plus"></i> {{ $ts.attachFile }}</FormButton>
</FormGroup>
2021-09-29 18:50:45 +03:00
<FormSwitch v-model="isSensitive">{{ $ts.markAsSensitive }}</FormSwitch>
2021-11-19 12:36:12 +02:00
<FormButton v-if="postId" primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
<FormButton v-else primary @click="save"><i class="fas fa-save"></i> {{ $ts.publish }}</FormButton>
2021-11-19 12:36:12 +02:00
<FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</FormButton>
</FormSuspense>
2022-01-04 15:42:04 +02:00
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
2022-01-04 15:42:04 +02:00
import FormButton from '@/components/ui/button.vue';
import FormInput from '@/components/form/input.vue';
import FormTextarea from '@/components/form/textarea.vue';
import FormSwitch from '@/components/form/switch.vue';
import FormGroup from '@/components/form/group.vue';
import FormSuspense from '@/components/form/suspense.vue';
2021-12-09 18:22:22 +02:00
import { selectFiles } from '@/scripts/select-file';
2021-11-11 19:02:25 +02:00
import * as os from '@/os';
import * as symbols from '@/symbols';
export default defineComponent({
components: {
FormButton,
FormInput,
FormTextarea,
FormSwitch,
FormGroup,
FormSuspense,
},
props: {
postId: {
type: String,
required: false,
default: null,
}
},
data() {
return {
[symbols.PAGE_INFO]: computed(() => this.postId ? {
title: this.$ts.edit,
icon: 'fas fa-pencil-alt'
} : {
title: this.$ts.postToGallery,
icon: 'fas fa-pencil-alt'
}),
init: null,
files: [],
description: null,
title: null,
isSensitive: false,
}
},
watch: {
postId: {
handler() {
this.init = () => this.postId ? os.api('gallery/posts/show', {
postId: this.postId
}).then(post => {
this.files = post.files;
this.title = post.title;
this.description = post.description;
this.isSensitive = post.isSensitive;
}) : Promise.resolve(null);
},
immediate: true,
}
},
methods: {
selectFile(evt) {
selectFiles(evt.currentTarget ?? evt.target, null).then(files => {
this.files = this.files.concat(files);
});
},
remove(file) {
this.files = this.files.filter(f => f.id !== file.id);
},
async save() {
if (this.postId) {
await os.apiWithDialog('gallery/posts/update', {
postId: this.postId,
title: this.title,
description: this.description,
fileIds: this.files.map(file => file.id),
isSensitive: this.isSensitive,
});
this.$router.push(`/gallery/${this.postId}`);
} else {
const post = await os.apiWithDialog('gallery/posts/create', {
title: this.title,
description: this.description,
fileIds: this.files.map(file => file.id),
isSensitive: this.isSensitive,
});
this.$router.push(`/gallery/${post.id}`);
}
},
async del() {
const { canceled } = await os.confirm({
type: 'warning',
text: this.$ts.deleteConfirm,
});
if (canceled) return;
await os.apiWithDialog('gallery/posts/delete', {
postId: this.postId,
});
this.$router.push(`/gallery`);
}
}
});
</script>
<style lang="scss" scoped>
.wqugxsfx {
height: 200px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
> .name {
position: absolute;
top: 8px;
left: 9px;
padding: 8px;
background: var(--panel);
}
> .remove {
position: absolute;
top: 8px;
right: 9px;
padding: 8px;
background: var(--panel);
}
}
</style>