diff options
Diffstat (limited to 'packages/client/src/pages/channel-editor.vue')
| -rw-r--r-- | packages/client/src/pages/channel-editor.vue | 197 |
1 files changed, 96 insertions, 101 deletions
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue index ea3a5dab76..2065bd6689 100644 --- a/packages/client/src/pages/channel-editor.vue +++ b/packages/client/src/pages/channel-editor.vue @@ -1,127 +1,122 @@ <template> -<MkSpacer :content-max="700"> - <div class="_formRoot"> - <MkInput v-model="name" class="_formBlock"> - <template #label>{{ $ts.name }}</template> - </MkInput> +<MkStickyContainer> + <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> + <MkSpacer :content-max="700"> + <div class="_formRoot"> + <MkInput v-model="name" class="_formBlock"> + <template #label>{{ $ts.name }}</template> + </MkInput> - <MkTextarea v-model="description" class="_formBlock"> - <template #label>{{ $ts.description }}</template> - </MkTextarea> + <MkTextarea v-model="description" class="_formBlock"> + <template #label>{{ $ts.description }}</template> + </MkTextarea> - <div class="banner"> - <MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton> - <div v-else-if="bannerUrl"> - <img :src="bannerUrl" style="width: 100%;"/> - <MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton> + <div class="banner"> + <MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton> + <div v-else-if="bannerUrl"> + <img :src="bannerUrl" style="width: 100%;"/> + <MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton> + </div> + </div> + <div class="_formBlock"> + <MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton> </div> </div> - <div class="_formBlock"> - <MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton> - </div> - </div> -</MkSpacer> + </MkSpacer> +</MkStickyContainer> </template> -<script lang="ts"> -import { computed, defineComponent } from 'vue'; +<script lang="ts" setup> +import { computed, inject, watch } from 'vue'; import MkTextarea from '@/components/form/textarea.vue'; import MkButton from '@/components/ui/button.vue'; import MkInput from '@/components/form/input.vue'; import { selectFile } from '@/scripts/select-file'; import * as os from '@/os'; -import * as symbols from '@/symbols'; +import { useRouter } from '@/router'; +import { definePageMetadata } from '@/scripts/page-metadata'; +import { i18n } from '@/i18n'; -export default defineComponent({ - components: { - MkTextarea, MkButton, MkInput, - }, +const router = useRouter(); - props: { - channelId: { - type: String, - required: false - }, - }, +const props = defineProps<{ + channelId?: string; +}>(); - data() { - return { - [symbols.PAGE_INFO]: computed(() => this.channelId ? { - title: this.$ts._channel.edit, - icon: 'fas fa-satellite-dish', - bg: 'var(--bg)', - } : { - title: this.$ts._channel.create, - icon: 'fas fa-satellite-dish', - bg: 'var(--bg)', - }), - channel: null, - name: null, - description: null, - bannerUrl: null, - bannerId: null, - }; - }, +let channel = $ref(null); +let name = $ref(null); +let description = $ref(null); +let bannerUrl = $ref<string | null>(null); +let bannerId = $ref<string | null>(null); - watch: { - async bannerId() { - if (this.bannerId == null) { - this.bannerUrl = null; - } else { - this.bannerUrl = (await os.api('drive/files/show', { - fileId: this.bannerId, - })).url; - } - }, - }, +watch(() => bannerId, async () => { + if (bannerId == null) { + bannerUrl = null; + } else { + bannerUrl = (await os.api('drive/files/show', { + fileId: bannerId, + })).url; + } +}); - async created() { - if (this.channelId) { - this.channel = await os.api('channels/show', { - channelId: this.channelId, - }); +async function fetchChannel() { + if (props.channelId == null) return; - this.name = this.channel.name; - this.description = this.channel.description; - this.bannerId = this.channel.bannerId; - this.bannerUrl = this.channel.bannerUrl; - } - }, + channel = await os.api('channels/show', { + channelId: props.channelId, + }); - methods: { - save() { - const params = { - name: this.name, - description: this.description, - bannerId: this.bannerId, - }; + name = channel.name; + description = channel.description; + bannerId = channel.bannerId; + bannerUrl = channel.bannerUrl; +} - if (this.channelId) { - params.channelId = this.channelId; - os.api('channels/update', params) - .then(channel => { - os.success(); - }); - } else { - os.api('channels/create', params) - .then(channel => { - os.success(); - this.$router.push(`/channels/${channel.id}`); - }); - } - }, +fetchChannel(); - setBannerImage(evt) { - selectFile(evt.currentTarget ?? evt.target, null).then(file => { - this.bannerId = file.id; - }); - }, +function save() { + const params = { + name: name, + description: description, + bannerId: bannerId, + }; - removeBannerImage() { - this.bannerId = null; - } + if (props.channelId) { + params.channelId = props.channelId; + os.api('channels/update', params).then(() => { + os.success(); + }); + } else { + os.api('channels/create', params).then(created => { + os.success(); + router.push(`/channels/${created.id}`); + }); } -}); +} + +function setBannerImage(evt) { + selectFile(evt.currentTarget ?? evt.target, null).then(file => { + bannerId = file.id; + }); +} + +function removeBannerImage() { + bannerId = null; +} + +const headerActions = $computed(() => []); + +const headerTabs = $computed(() => []); + +definePageMetadata(computed(() => props.channelId ? { + title: i18n.ts._channel.edit, + icon: 'fas fa-satellite-dish', + bg: 'var(--bg)', +} : { + title: i18n.ts._channel.create, + icon: 'fas fa-satellite-dish', + bg: 'var(--bg)', +})); </script> <style lang="scss" scoped> |