refactor
This commit is contained in:
syuilo
parent
4a0e968662
commit
3566bc207f
|
|
@ -0,0 +1,145 @@
|
||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
|
||||||
|
<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
|
||||||
|
<MkInput v-model="title">
|
||||||
|
<template #label>{{ i18n.ts.title }}</template>
|
||||||
|
</MkInput>
|
||||||
|
|
||||||
|
<MkTextarea v-model="description" :max="500">
|
||||||
|
<template #label>{{ i18n.ts.description }}</template>
|
||||||
|
</MkTextarea>
|
||||||
|
|
||||||
|
<div class="_gaps_s">
|
||||||
|
<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : '' }">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<MkButton primary @click="chooseFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</MkButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<MkSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</MkSwitch>
|
||||||
|
|
||||||
|
<div class="_buttons">
|
||||||
|
<MkButton v-if="props.post != null" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
|
||||||
|
<MkButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</MkButton>
|
||||||
|
|
||||||
|
<MkButton v-if="props.post != null" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PageWithHeader>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, watch, ref } from 'vue';
|
||||||
|
import * as Misskey from 'misskey-js';
|
||||||
|
import MkButton from '@/components/MkButton.vue';
|
||||||
|
import MkInput from '@/components/MkInput.vue';
|
||||||
|
import MkTextarea from '@/components/MkTextarea.vue';
|
||||||
|
import MkSwitch from '@/components/MkSwitch.vue';
|
||||||
|
import { selectFile } from '@/utility/drive.js';
|
||||||
|
import * as os from '@/os.js';
|
||||||
|
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||||
|
import { i18n } from '@/i18n.js';
|
||||||
|
import { useRouter } from '@/router.js';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
post: Misskey.entities.GalleryPost | null;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const files = ref(props.post?.files ?? []);
|
||||||
|
const description = ref(props.post?.description ?? null);
|
||||||
|
const title = ref(props.post?.title ?? '');
|
||||||
|
const isSensitive = ref(props.post?.isSensitive ?? false);
|
||||||
|
|
||||||
|
function chooseFile(evt) {
|
||||||
|
selectFile({
|
||||||
|
anchorElement: evt.currentTarget ?? evt.target,
|
||||||
|
multiple: true,
|
||||||
|
}).then(selected => {
|
||||||
|
files.value = files.value.concat(selected);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove(file) {
|
||||||
|
files.value = files.value.filter(f => f.id !== file.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save() {
|
||||||
|
if (props.post != null) {
|
||||||
|
await os.apiWithDialog('gallery/posts/update', {
|
||||||
|
postId: props.post.id,
|
||||||
|
title: title.value,
|
||||||
|
description: description.value,
|
||||||
|
fileIds: files.value.map(file => file.id),
|
||||||
|
isSensitive: isSensitive.value,
|
||||||
|
});
|
||||||
|
router.push('/gallery/:postId', {
|
||||||
|
params: {
|
||||||
|
postId: props.post.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const created = await os.apiWithDialog('gallery/posts/create', {
|
||||||
|
title: title.value,
|
||||||
|
description: description.value,
|
||||||
|
fileIds: files.value.map(file => file.id),
|
||||||
|
isSensitive: isSensitive.value,
|
||||||
|
});
|
||||||
|
router.push('/gallery/:postId', {
|
||||||
|
params: {
|
||||||
|
postId: created.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function del() {
|
||||||
|
if (props.post == null) return;
|
||||||
|
const { canceled } = await os.confirm({
|
||||||
|
type: 'warning',
|
||||||
|
text: i18n.ts.deleteConfirm,
|
||||||
|
});
|
||||||
|
if (canceled) return;
|
||||||
|
await os.apiWithDialog('gallery/posts/delete', {
|
||||||
|
postId: props.post.id,
|
||||||
|
});
|
||||||
|
router.push('/gallery');
|
||||||
|
}
|
||||||
|
|
||||||
|
const headerActions = computed(() => []);
|
||||||
|
|
||||||
|
const headerTabs = computed(() => []);
|
||||||
|
</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(--MI_THEME-panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .remove {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 9px;
|
||||||
|
padding: 8px;
|
||||||
|
background: var(--MI_THEME-panel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -4,161 +4,35 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
|
<MkSuspense v-slot="{ result }" :p="_fetch_">
|
||||||
<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
|
<XRoot :post="result"/>
|
||||||
<MkSuspense :p="init" class="_gaps">
|
</MkSuspense>
|
||||||
<MkInput v-model="title">
|
|
||||||
<template #label>{{ i18n.ts.title }}</template>
|
|
||||||
</MkInput>
|
|
||||||
|
|
||||||
<MkTextarea v-model="description" :max="500">
|
|
||||||
<template #label>{{ i18n.ts.description }}</template>
|
|
||||||
</MkTextarea>
|
|
||||||
|
|
||||||
<div class="_gaps_s">
|
|
||||||
<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : '' }">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<MkButton primary @click="chooseFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</MkButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MkSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</MkSwitch>
|
|
||||||
|
|
||||||
<div class="_buttons">
|
|
||||||
<MkButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
|
|
||||||
<MkButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</MkButton>
|
|
||||||
|
|
||||||
<MkButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
|
|
||||||
</div>
|
|
||||||
</MkSuspense>
|
|
||||||
</div>
|
|
||||||
</PageWithHeader>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, watch, ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
import XRoot from './edit.root.vue';
|
||||||
import MkInput from '@/components/MkInput.vue';
|
|
||||||
import MkTextarea from '@/components/MkTextarea.vue';
|
|
||||||
import MkSwitch from '@/components/MkSwitch.vue';
|
|
||||||
import { selectFile } from '@/utility/drive.js';
|
|
||||||
import * as os from '@/os.js';
|
|
||||||
import { misskeyApi } from '@/utility/misskey-api.js';
|
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||||
import { definePage } from '@/page.js';
|
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
import { useRouter } from '@/router.js';
|
import { definePage } from '@/page.js';
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
postId?: string;
|
postId?: string,
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const init = ref<(() => Promise<any>) | null>(null);
|
function _fetch_() {
|
||||||
const files = ref<Misskey.entities.DriveFile[]>([]);
|
if (props.postId == null) {
|
||||||
const description = ref<string | null>(null);
|
return Promise.resolve(null);
|
||||||
const title = ref<string | null>(null);
|
|
||||||
const isSensitive = ref(false);
|
|
||||||
|
|
||||||
function chooseFile(evt) {
|
|
||||||
selectFile({
|
|
||||||
anchorElement: evt.currentTarget ?? evt.target,
|
|
||||||
multiple: true,
|
|
||||||
}).then(selected => {
|
|
||||||
files.value = files.value.concat(selected);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function remove(file) {
|
|
||||||
files.value = files.value.filter(f => f.id !== file.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function save() {
|
|
||||||
if (props.postId) {
|
|
||||||
await os.apiWithDialog('gallery/posts/update', {
|
|
||||||
postId: props.postId,
|
|
||||||
title: title.value,
|
|
||||||
description: description.value,
|
|
||||||
fileIds: files.value.map(file => file.id),
|
|
||||||
isSensitive: isSensitive.value,
|
|
||||||
});
|
|
||||||
router.push('/gallery/:postId', {
|
|
||||||
params: {
|
|
||||||
postId: props.postId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
const created = await os.apiWithDialog('gallery/posts/create', {
|
return misskeyApi('gallery/posts/show', {
|
||||||
title: title.value,
|
postId: props.postId,
|
||||||
description: description.value,
|
|
||||||
fileIds: files.value.map(file => file.id),
|
|
||||||
isSensitive: isSensitive.value,
|
|
||||||
});
|
|
||||||
router.push('/gallery/:postId', {
|
|
||||||
params: {
|
|
||||||
postId: 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,
|
|
||||||
});
|
|
||||||
router.push('/gallery');
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(() => props.postId, () => {
|
|
||||||
init.value = () => props.postId ? misskeyApi('gallery/posts/show', {
|
|
||||||
postId: props.postId,
|
|
||||||
}).then(post => {
|
|
||||||
files.value = post.files ?? [];
|
|
||||||
title.value = post.title;
|
|
||||||
description.value = post.description;
|
|
||||||
isSensitive.value = post.isSensitive;
|
|
||||||
}) : Promise.resolve(null);
|
|
||||||
}, { immediate: true });
|
|
||||||
|
|
||||||
const headerActions = computed(() => []);
|
|
||||||
|
|
||||||
const headerTabs = computed(() => []);
|
|
||||||
|
|
||||||
definePage(() => ({
|
definePage(() => ({
|
||||||
title: props.postId ? i18n.ts.edit : i18n.ts.postToGallery,
|
title: props.postId ? i18n.ts.edit : i18n.ts.postToGallery,
|
||||||
icon: 'ti ti-pencil',
|
icon: 'ti ti-pencil',
|
||||||
}));
|
}));
|
||||||
</script>
|
</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(--MI_THEME-panel);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .remove {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
right: 9px;
|
|
||||||
padding: 8px;
|
|
||||||
background: var(--MI_THEME-panel);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue