refactor: WIP changes to EditAlbum modal from a while ago

backend/logic/db/schemas/album.js

@@ -18,8 +18,8 @@ export default {
 	// 		comment: { type: String },
 	// 	}
 	// ],
-	// musicBrainzIdentifier: { type: String, required: true },
-	// musicBrainzData: { type: Object, required: true },
+	musicBrainzIdentifier: { type: String, required: true },
+	musicBrainzData: { type: Object, required: true },
 	comment: { type: String },
 	createdBy: { type: String, required: true },
 	createdAt: { type: Number, default: Date.now, required: true },

frontend/src/components/ModalManager.vue

@@ -15,6 +15,7 @@ const modalComponents = shallowRef(
 		createStation: "CreateStation.vue",
 		editNews: "EditNews.vue",
 		editArtist: "EditArtist.vue",
+		editAlbum: "EditAlbum.vue",
 		manageStation: "ManageStation/index.vue",
 		importArtistMB: "ImportArtistMB.vue",
 		editPlaylist: "EditPlaylist/index.vue",

frontend/src/components/modals/EditAlbum.vue

@@ -2,6 +2,7 @@
 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";
@@ -13,8 +14,8 @@ const SaveButton = defineAsyncComponent(
 
 const props = defineProps({
 	modalUuid: { type: String, required: true },
-	createArtist: { type: Boolean, default: false },
-	artistId: { type: String, default: null },
+	createAlbum: { type: Boolean, default: false },
+	albumId: { type: String, default: null },
 	sector: { type: String, default: "admin" }
 });
 
@@ -24,6 +25,7 @@ const { closeCurrentModal } = useModalsStore();
 
 const createdBy = ref();
 const createdAt = ref(0);
+const hideMusicbrainzData = ref(true);
 
 const { inputs, save, setOriginalValue } = useForm(
 	{
@@ -32,21 +34,25 @@ const { inputs, save, setOriginalValue } = useForm(
 		},
 		musicbrainzIdentifier: {
 			value: ""
+		},
+		musicbrainzData: {
+			value: {}
 		}
 	},
 	({ status, messages, values }, resolve, reject) => {
 		if (status === "success") {
 			const data = {
 				name: values.name,
-				musicbrainzIdentifier: values.musicbrainzIdentifier
+				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.createArtist) socket.dispatch("artists.create", data, cb);
-			else socket.dispatch("artists.update", props.artistId, data, cb);
+			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")
@@ -62,20 +68,23 @@ const { inputs, save, setOriginalValue } = useForm(
 );
 
 onMounted(() => {
+	console.log(111);
 	socket.onConnect(() => {
-		if (props.artistId && !props.createArtist) {
-			socket.dispatch(`artists.getArtistFromId`, props.artistId, res => {
-				// res: GetArtistResponse
+		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.artist.name,
+						name: res.data.album.name,
 						musicbrainzIdentifier:
-							res.data.artist.musicbrainzIdentifier
+							res.data.album.musicbrainzIdentifier,
+						musicbrainzData: res.data.album.musicbrainzData ?? {}
 					});
-					createdBy.value = res.data.artist.createdBy;
-					createdAt.value = res.data.artist.createdAt;
+					createdBy.value = res.data.album.createdBy;
+					createdAt.value = res.data.album.createdAt;
 				} else {
-					new Toast("Artist with that ID not found.");
+					new Toast("Album with that ID not found.");
 					closeCurrentModal();
 				}
 			});
@@ -83,66 +92,122 @@ onMounted(() => {
 	});
 });
 
-const saveArtist = (close?: boolean) => {
+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-artist-modal"
-		:title="createArtist ? 'Create Artist' : 'Edit Artist'"
+		class="edit-album-modal"
+		:title="createAlbum ? 'Create Album' : 'Edit Album'"
 		:size="'wide'"
 		:split="true"
 	>
 		<template #body>
-			<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 artist name..."
-						/>
-					</p>
+			<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>
-			<div class="control is-grouped">
-				<div class="musicbrainz-identifier-container">
-					<label class="label">MusicBrainz identifier</label>
-					<p class="control has-addons">
-						<input
-							class="input"
-							type="text"
-							:ref="
-								el => (inputs['musicbrainzIdentifier'].ref = el)
-							"
-							v-model="inputs['musicbrainzIdentifier'].value"
-							placeholder="Enter MusicBrainz identifier..."
-						/>
-					</p>
-				</div>
-			</div>
-			<div>
-				<p>MusicBrainz data</p>
+				<div class="flex flex-column w-1/3"></div>
 			</div>
 		</template>
 		<template #footer>
 			<div>
 				<save-button
-					:default-message="`${createArtist ? 'Create' : 'Update'} Artist`"
-					@clicked="saveArtist()"
+					:default-message="`${createAlbum ? 'Create' : 'Update'} Album`"
+					@clicked="saveAlbum()"
 				/>
 				<save-button
-					:default-message="`${createArtist ? 'Create' : 'Update'} and close`"
-					@clicked="saveArtist(true)"
+					:default-message="`${createAlbum ? 'Create' : 'Update'} and close`"
+					@clicked="saveAlbum(true)"
 				/>
 			</div>
 		</template>