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

150 lines
4 KiB
Vue
Raw Normal View History

<template>
2022-06-30 15:38:34 +03:00
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
<FormSuspense :p="init">
<FormInput v-model="title">
2022-07-20 16:24:26 +03:00
<template #label>{{ i18n.ts.title }}</template>
2022-06-30 15:38:34 +03:00
</FormInput>
<FormTextarea v-model="description" :max="500">
2022-07-20 16:24:26 +03:00
<template #label>{{ i18n.ts.description }}</template>
2022-06-30 15:38:34 +03:00
</FormTextarea>
<div class="">
<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
<div class="name">{{ file.name }}</div>
<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button>
2022-06-30 15:38:34 +03:00
</div>
<FormButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
</div>
2022-07-20 16:24:26 +03:00
<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
<FormButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
<FormButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</FormButton>
<FormButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</FormButton>
2022-06-30 15:38:34 +03:00
</FormSuspense>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { computed, inject, watch } from 'vue';
import FormButton from '@/components/MkButton.vue';
2022-01-04 15:42:04 +02:00
import FormInput from '@/components/form/input.vue';
import FormTextarea from '@/components/form/textarea.vue';
import FormSwitch from '@/components/form/switch.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 { useRouter } from '@/router';
import { definePageMetadata } from '@/scripts/page-metadata';
import { i18n } from '@/i18n';
const router = useRouter();
const props = defineProps<{
postId?: string;
}>();
let init = $ref(null);
let files = $ref([]);
let description = $ref(null);
let title = $ref(null);
let isSensitive = $ref(false);
function selectFile(evt) {
selectFiles(evt.currentTarget ?? evt.target, null).then(selected => {
files = files.concat(selected);
});
}
function remove(file) {
files = files.filter(f => f.id !== file.id);
}
async function save() {
if (props.postId) {
await os.apiWithDialog('gallery/posts/update', {
postId: props.postId,
title: title,
description: description,
fileIds: files.map(file => file.id),
isSensitive: isSensitive,
});
2022-06-30 15:38:34 +03:00
router.push(`/gallery/${props.postId}`);
} else {
const created = await os.apiWithDialog('gallery/posts/create', {
title: title,
description: description,
fileIds: files.map(file => file.id),
isSensitive: isSensitive,
});
router.push(`/gallery/${created.id}`);
}
}
async function del() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.ts.deleteConfirm,
});
if (canceled) return;
await os.apiWithDialog('gallery/posts/delete', {
postId: props.postId,
});
2022-06-30 15:38:34 +03:00
router.push('/gallery');
}
watch(() => props.postId, () => {
init = () => props.postId ? os.api('gallery/posts/show', {
postId: props.postId,
}).then(post => {
files = post.files;
title = post.title;
description = post.description;
isSensitive = post.isSensitive;
}) : Promise.resolve(null);
}, { immediate: true });
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
definePageMetadata(computed(() => props.postId ? {
title: i18n.ts.edit,
icon: 'ti ti-pencil',
} : {
title: i18n.ts.postToGallery,
icon: 'ti ti-pencil',
}));
</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>