yumechi-no-kuni/src/client/pages/channel-editor.vue

<template>
<div>
	<div class="_section">
		<div class="_content">
			<MkInput v-model:value="name">{{ $ts.name }}</MkInput>

			<MkTextarea v-model:value="description">{{ $ts.description }}</MkTextarea>

			<div class="banner">
				<MkButton v-if="bannerId == null" @click="setBannerImage"><Fa :icon="faPlus"/> {{ $ts._channel.setBanner }}</MkButton>
				<div v-else-if="bannerUrl">
					<img :src="bannerUrl" style="width: 100%;"/>
					<MkButton @click="removeBannerImage()"><Fa :icon="faTrashAlt"/> {{ $ts._channel.removeBanner }}</MkButton>
				</div>
			</div>
		</div>
		<div class="_footer">
			<MkButton @click="save()" primary><Fa :icon="faSave"/> {{ channelId ? $ts.save : $ts.create }}</MkButton>
		</div>
	</div>
</div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { faPlus, faSatelliteDish } from '@fortawesome/free-solid-svg-icons';
import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
import MkTextarea from '@client/components/ui/textarea.vue';
import MkButton from '@client/components/ui/button.vue';
import MkInput from '@client/components/ui/input.vue';
import { selectFile } from '@client/scripts/select-file';
import * as os from '@client/os';
import * as symbols from '@client/symbols';

export default defineComponent({
	components: {
		MkTextarea, MkButton, MkInput,
	},

	props: {
		channelId: {
			type: String,
			required: false
		},
	},

	data() {
		return {
			[symbols.PAGE_INFO]: computed(() => this.channelId ? {
				title: this.$ts._channel.edit,
				icon: faSatelliteDish,
			} : {
				title: this.$ts._channel.create,
				icon: faSatelliteDish,
			}),
			channel: null,
			name: null,
			description: null,
			bannerUrl: null,
			bannerId: null,
			faSave, faTrashAlt, faPlus,faSatelliteDish,
		};
	},

	watch: {
		async bannerId() {
			if (this.bannerId == null) {
				this.bannerUrl = null;
			} else {
				this.bannerUrl = (await os.api('drive/files/show', {
					fileId: this.bannerId,
				})).url;
			}
		},
	},

	async created() {
		if (this.channelId) {
			this.channel = await os.api('channels/show', {
				channelId: this.channelId,
			});

			this.name = this.channel.name;
			this.description = this.channel.description;
			this.bannerId = this.channel.bannerId;
			this.bannerUrl = this.channel.bannerUrl;
		}
	},

	methods: {
		save() {
			const params = {
				name: this.name,
				description: this.description,
				bannerId: this.bannerId,
			};

			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}`);
				});
			}
		},

		setBannerImage(e) {
			selectFile(e.currentTarget || e.target, null, false).then(file => {
				this.bannerId = file.id;
			});
		},

		removeBannerImage() {
			this.bannerId = null;
		}
	}
});
</script>

<style lang="scss" scoped>

</style>