MusareFork/frontend/src/components/modals/EditAlbum.vue

<script setup lang="ts">
import Toast from "toasters";
import { defineAsyncComponent, ref, onMounted } from "vue";
import { GenericResponse } from "@musare_types/actions/GenericActions";
import VueJsonPretty from "vue-json-pretty";
import { useForm } from "@/composables/useForm";
import { useWebsocketsStore } from "@/stores/websockets";
import { useModalsStore } from "@/stores/modals";

const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
const SaveButton = defineAsyncComponent(
	() => import("@/components/SaveButton.vue")
);

const props = defineProps({
	modalUuid: { type: String, required: true },
	createAlbum: { type: Boolean, default: false },
	albumId: { type: String, default: null },
	sector: { type: String, default: "admin" }
});

const { socket } = useWebsocketsStore();

const { closeCurrentModal } = useModalsStore();

const createdBy = ref();
const createdAt = ref(0);
const hideMusicbrainzData = ref(true);

const { inputs, save, setOriginalValue } = useForm(
	{
		name: {
			value: ""
		},
		musicbrainzIdentifier: {
			value: ""
		},
		musicbrainzData: {
			value: {}
		}
	},
	({ status, messages, values }, resolve, reject) => {
		if (status === "success") {
			const data = {
				name: values.name,
				musicbrainzIdentifier: values.musicbrainzIdentifier,
				musicbrainzData: values.musicbrainzData
			};
			const cb = (res: GenericResponse) => {
				new Toast(res.message);
				if (res.status === "success") resolve();
				else reject(new Error(res.message));
			};
			if (props.createAlbum) socket.dispatch("albums.create", data, cb);
			else socket.dispatch("albums.update", props.albumId, data, cb);
		} else {
			if (status === "unchanged") new Toast(messages.unchanged);
			else if (status === "error")
				Object.values(messages).forEach(message => {
					new Toast({ content: message, timeout: 8000 });
				});
			resolve();
		}
	},
	{
		modalUuid: props.modalUuid
	}
);

onMounted(() => {
	console.log(111);
	socket.onConnect(() => {
		console.log(222);
		if (props.albumId && !props.createAlbum) {
			socket.dispatch(`albums.getAlbumFromId`, props.albumId, res => {
				// res: GetAlbumResponse
				if (res.status === "success") {
					setOriginalValue({
						name: res.data.album.name,
						musicbrainzIdentifier:
							res.data.album.musicbrainzIdentifier,
						musicbrainzData: res.data.album.musicbrainzData ?? {}
					});
					createdBy.value = res.data.album.createdBy;
					createdAt.value = res.data.album.createdAt;
				} else {
					new Toast("Album with that ID not found.");
					closeCurrentModal();
				}
			});
		}
	});
});

const saveAlbum = (close?: boolean) => {
	save(() => {
		if (close) {
			closeCurrentModal();
		}
	});
};

const getMusicbrainzAlbumData = musicbrainzIdentifier => {
	socket.dispatch(
		"albums.getMusicbrainzAlbum",
		musicbrainzIdentifier,
		res => {
			new Toast("Successfully got data");
			inputs.value.musicbrainzData.value = res.data;
		}
	);
};
</script>

<template>
	<modal
		class="edit-album-modal"
		:title="createAlbum ? 'Create Album' : 'Edit Album'"
		:size="'wide'"
		:split="true"
	>
		<template #body>
			<div class="flex flex-row w-full">
				<div class="flex flex-column gap-4 w-2/3">
					<div>
						<div class="control is-grouped">
							<div class="name-container">
								<label class="label">Name</label>
								<p class="control has-addons">
									<input
										class="input"
										type="text"
										:ref="el => (inputs['name'].ref = el)"
										v-model="inputs['name'].value"
										placeholder="Enter album name..."
									/>
								</p>
							</div>
						</div>
					</div>
					<div>
						<div class="control is-grouped gap-4">
							<div class="musicbrainz-identifier-container">
								<label class="label"
									>MusicBrainz identifier</label
								>
								<input
									class="input"
									type="text"
									:ref="
										el =>
											(inputs[
												'musicbrainzIdentifier'
											].ref = el)
									"
									v-model="
										inputs['musicbrainzIdentifier'].value
									"
									placeholder="Enter MusicBrainz identifier..."
								/>
							</div>
							<button
								class="button is-primary button-bottom"
								@click="
									getMusicbrainzAlbumData(
										inputs['musicbrainzIdentifier'].value
									)
								"
							>
								Get MusicBrainz album data
							</button>
						</div>
						<div>
							<div class="flex flex-row gap-4">
								<p class="text-vcenter">MusicBrainz data</p>
								<button
									class="button is-primary"
									@click="
										hideMusicbrainzData =
											!hideMusicbrainzData
									"
								>
									<span v-show="hideMusicbrainzData"
										>Show MusicBrainz data</span
									>
									<span v-show="!hideMusicbrainzData"
										>Hide MusicBrainz data</span
									>
								</button>
							</div>
							<vue-json-pretty
								:data="inputs['musicbrainzData'].value"
								:show-length="true"
								v-if="!hideMusicbrainzData"
							></vue-json-pretty>
						</div>
					</div>
				</div>
				<div class="flex flex-column w-1/3"></div>
			</div>
		</template>
		<template #footer>
			<div>
				<save-button
					:default-message="`${createAlbum ? 'Create' : 'Update'} Album`"
					@clicked="saveAlbum()"
				/>
				<save-button
					:default-message="`${createAlbum ? 'Create' : 'Update'} and close`"
					@clicked="saveAlbum(true)"
				/>
			</div>
		</template>
	</modal>
</template>

<style lang="less"></style>

<style lang="less" scoped></style>