refactor: WIP changes to EditArtist

frontend/src/components/modals/EditArtist.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Toast from "toasters";
-import { defineAsyncComponent, ref, onMounted } from "vue";
+import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 import { GenericResponse } from "@musare_types/actions/GenericActions";
 import VueJsonPretty from "vue-json-pretty";
 import { useForm } from "@/composables/useForm";
@@ -23,13 +23,28 @@ const props = defineProps({
 
 const { socket } = useWebsocketsStore();
 
-const { closeCurrentModal } = useModalsStore();
+const { closeCurrentModal, openModal } = useModalsStore();
 const { setJob } = useLongJobsStore();
 
 const createdBy = ref();
 const createdAt = ref(0);
 const hideMusicbrainzData = ref(true);
 
+const importMode = ref(false);
+
+const modalTitle = computed(() => {
+	// createArtist ? 'Create Artist' : 'Edit Artist'
+	if (props.createArtist) return "Create Artist";
+	if (importMode.value) return "Edit Artist - Import Mode";
+	return "Edit Artist";
+});
+
+// const releaseGroupsResponse = ref({});
+// const releaseGroupResponse = ref({});
+// const releaseResponse = ref({});
+
+// const buttonStatus = ref({});
+
 // const relatedSongs = ref([]);
 
 const refreshRelatedSongs = () => {};
@@ -147,27 +162,27 @@ const removeYoutubeChannel = index => {
 	inputs.value.youtubeChannels.value.splice(index, 1);
 };
 
-const addSpotifyArtist = () => {
-	inputs.value.spotifyArtists.value.push({
-		spotifyArtistId: "",
-		comment: ""
-	});
-};
+// const addSpotifyArtist = () => {
+// 	inputs.value.spotifyArtists.value.push({
+// 		spotifyArtistId: "",
+// 		comment: ""
+// 	});
+// };
 
-const removeSpotifyArtist = index => {
-	inputs.value.spotifyArtists.value.splice(index, 1);
-};
+// const removeSpotifyArtist = index => {
+// 	inputs.value.spotifyArtists.value.splice(index, 1);
+// };
 
-const addSoundcloudArtist = () => {
-	inputs.value.soundcloudArtists.value.push({
-		soundcloudArtistId: "",
-		comment: ""
-	});
-};
+// const addSoundcloudArtist = () => {
+// 	inputs.value.soundcloudArtists.value.push({
+// 		soundcloudArtistId: "",
+// 		comment: ""
+// 	});
+// };
 
-const removeSoundcloudArtist = index => {
-	inputs.value.soundcloudArtists.value.splice(index, 1);
-};
+// const removeSoundcloudArtist = index => {
+// 	inputs.value.soundcloudArtists.value.splice(index, 1);
+// };
 
 const importYoutubeChannel = youtubeChannelId => {
 	let id;
@@ -262,264 +277,412 @@ const fillMissingUrls = musicbrainzIdentifier => {
 <template>
 	<modal
 		class="edit-artist-modal"
-		:title="createArtist ? 'Create Artist' : 'Edit Artist'"
+		:title="modalTitle"
 		: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">
+			<div class="flex flex-column w-full">
+				<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 artist name..."
+											:disabled="importMode"
+										/>
+									</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['name'].ref = el)"
-										v-model="inputs['name'].value"
-										placeholder="Enter artist name..."
+										:ref="
+											el =>
+												(inputs[
+													'musicbrainzIdentifier'
+												].ref = el)
+										"
+										v-model="
+											inputs['musicbrainzIdentifier']
+												.value
+										"
+										placeholder="Enter MusicBrainz identifier..."
+										:disabled="importMode"
 									/>
-								</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
+								</div>
+								<button
+									class="button is-primary button-bottom"
+									@click="
+										getMusicbrainzArtistData(
+											inputs['musicbrainzIdentifier']
+												.value
+										)
 									"
-									placeholder="Enter MusicBrainz identifier..."
-								/>
-							</div>
-							<button
-								class="button is-primary button-bottom"
-								@click="
-									getMusicbrainzArtistData(
-										inputs['musicbrainzIdentifier'].value
-									)
-								"
-							>
-								Get MusicBrainz artist data
-							</button>
-							<button
-								class="button is-primary button-bottom"
-								@click="
-									fillMissingUrls(
-										inputs['musicbrainzIdentifier'].value
-									)
-								"
-							>
-								Fill artists/channels from MusicBrainz
-							</button>
-						</div>
-						<div>
-							<div class="flex flex-row gap-4">
-								<p class="text-vcenter">MusicBrainz data</p>
+									v-if="!importMode"
+								>
+									Get MusicBrainz artist data
+								</button>
 								<button
-									class="button is-primary"
+									class="button is-primary button-bottom"
 									@click="
-										hideMusicbrainzData =
-											!hideMusicbrainzData
+										fillMissingUrls(
+											inputs['musicbrainzIdentifier']
+												.value
+										)
 									"
+									v-if="!importMode"
 								>
-									<span v-show="hideMusicbrainzData"
-										>Show MusicBrainz data</span
-									>
-									<span v-show="!hideMusicbrainzData"
-										>Hide MusicBrainz data</span
-									>
+									Fill artists/channels from MusicBrainz
 								</button>
 							</div>
-							<vue-json-pretty
-								:data="inputs['musicbrainzData'].value"
-								:show-length="true"
-								v-if="!hideMusicbrainzData"
-							></vue-json-pretty>
-						</div>
-					</div>
-					<div>
-						<p>YouTube channels</p>
-						<div class="flex flex-column gap-4">
-							<template
-								v-for="(youtubeChannel, index) in inputs[
-									'youtubeChannels'
-								].value"
-								:key="`${index}`"
-							>
-								<div class="control is-grouped gap-4">
-									<div class="name-container">
-										<label class="label"
-											>YouTube channel ID</label
-										>
-										<input
-											class="input"
-											type="text"
-											v-model="
-												youtubeChannel.youtubeChannelId
-											"
-											placeholder="Enter YouTube channel ID..."
-										/>
-									</div>
-									<div class="name-container">
-										<label class="label">Comment</label>
-										<input
-											class="input"
-											type="text"
-											v-model="youtubeChannel.comment"
-											placeholder="Enter comment..."
-										/>
-									</div>
-									<button
-										class="button is-primary button-bottom"
-										@click="removeYoutubeChannel(index)"
-									>
-										Remove
-									</button>
+							<div>
+								<div class="flex flex-row gap-4">
+									<p class="text-vcenter">MusicBrainz data</p>
 									<button
-										class="button is-primary button-bottom"
+										class="button is-primary"
 										@click="
-											importYoutubeChannel(
-												youtubeChannel.youtubeChannelId
-											)
+											hideMusicbrainzData =
+												!hideMusicbrainzData
 										"
 									>
-										Import
+										<span v-show="hideMusicbrainzData"
+											>Show MusicBrainz data</span
+										>
+										<span v-show="!hideMusicbrainzData"
+											>Hide MusicBrainz data</span
+										>
 									</button>
 								</div>
-							</template>
+								<vue-json-pretty
+									:data="inputs['musicbrainzData'].value"
+									:show-length="true"
+									v-if="!hideMusicbrainzData"
+								></vue-json-pretty>
+							</div>
 						</div>
-						<button
-							class="button is-primary"
-							@click="addYoutubeChannel()"
-						>
-							Add YouTube channel
-						</button>
-					</div>
-					<div>
-						<p>Spotify artists</p>
-						<div class="flex flex-column gap-4">
-							<template
-								v-for="(spotifyArtist, index) in inputs[
-									'spotifyArtists'
-								].value"
-								:key="`${index}`"
-							>
-								<div class="control is-grouped gap-4">
-									<div class="name-container">
-										<label class="label"
-											>Spotify artist ID</label
+						<div>
+							<p>YouTube channels</p>
+							<div class="flex flex-column gap-4">
+								<template
+									v-for="(youtubeChannel, index) in inputs[
+										'youtubeChannels'
+									].value"
+									:key="`${index}`"
+								>
+									<div class="control is-grouped gap-4">
+										<div class="name-container">
+											<label class="label"
+												>YouTube channel ID (or
+												playlist?)</label
+											>
+											<input
+												class="input"
+												type="text"
+												v-model="
+													youtubeChannel.youtubeChannelId
+												"
+												placeholder="Enter YouTube channel ID..."
+												:disabled="importMode"
+											/>
+										</div>
+										<div class="name-container">
+											<label class="label">Comment</label>
+											<input
+												class="input"
+												type="text"
+												v-model="youtubeChannel.comment"
+												placeholder="Enter comment..."
+												:disabled="importMode"
+											/>
+										</div>
+										<button
+											class="button is-primary button-bottom"
+											@click="removeYoutubeChannel(index)"
+											v-if="!importMode"
 										>
-										<input
-											class="input"
-											type="text"
-											v-model="
-												spotifyArtist.spotifyArtistId
+											Remove
+										</button>
+										<button
+											class="button is-primary button-bottom"
+											@click="
+												importYoutubeChannel(
+													youtubeChannel.youtubeChannelId
+												)
 											"
-											placeholder="Enter Spotify artist ID..."
-										/>
+										>
+											Import
+										</button>
+										<p
+											style="
+												align-self: center;
+												padding-top: 27px;
+											"
+										>
+											Last import: ???
+										</p>
 									</div>
-									<div class="name-container">
-										<label class="label">Comment</label>
-										<input
-											class="input"
-											type="text"
-											v-model="spotifyArtist.comment"
-											placeholder="Enter comment..."
-										/>
+								</template>
+							</div>
+							<button
+								class="button is-primary"
+								@click="addYoutubeChannel()"
+								v-if="!importMode"
+							>
+								Add YouTube channel
+							</button>
+						</div>
+						<!-- <div>
+							<p>Spotify artists</p>
+							<div class="flex flex-column gap-4">
+								<template
+									v-for="(spotifyArtist, index) in inputs[
+										'spotifyArtists'
+									].value"
+									:key="`${index}`"
+								>
+									<div class="control is-grouped gap-4">
+										<div class="name-container">
+											<label class="label"
+												>Spotify artist ID</label
+											>
+											<input
+												class="input"
+												type="text"
+												v-model="
+													spotifyArtist.spotifyArtistId
+												"
+												placeholder="Enter Spotify artist ID..."
+											/>
+										</div>
+										<div class="name-container">
+											<label class="label">Comment</label>
+											<input
+												class="input"
+												type="text"
+												v-model="spotifyArtist.comment"
+												placeholder="Enter comment..."
+											/>
+										</div>
+										<button
+											class="button is-primary button-bottom"
+											@click="removeSpotifyArtist(index)"
+										>
+											Remove
+										</button>
 									</div>
-									<button
-										class="button is-primary button-bottom"
-										@click="removeSpotifyArtist(index)"
-									>
-										Remove
-									</button>
-								</div>
-							</template>
+								</template>
+							</div>
+							<button
+								class="button is-primary"
+								@click="addSpotifyArtist()"
+							>
+								Add Spotify artist
+							</button>
 						</div>
+						<div>
+							<p>SoundCloud artists</p>
+							<div class="flex flex-column gap-4">
+								<template
+									v-for="(soundcloudArtist, index) in inputs[
+										'soundcloudArtists'
+									].value"
+									:key="`${index}`"
+								>
+									<div class="control is-grouped gap-4">
+										<div class="name-container">
+											<label class="label"
+												>SoundCloud artist ID</label
+											>
+											<input
+												class="input"
+												type="text"
+												v-model="
+													soundcloudArtist.soundcloudArtistId
+												"
+												placeholder="Enter Soundcloud artist ID..."
+											/>
+										</div>
+										<div class="name-container">
+											<label class="label">Comment</label>
+											<input
+												class="input"
+												type="text"
+												v-model="soundcloudArtist.comment"
+												placeholder="Enter comment..."
+											/>
+										</div>
+										<button
+											class="button is-primary button-bottom"
+											@click="removeSoundcloudArtist(index)"
+										>
+											Remove
+										</button>
+									</div>
+								</template>
+							</div>
+							<button
+								class="button is-primary"
+								@click="addSoundcloudArtist()"
+							>
+								Add Soundcloud artist
+							</button>
+						</div> -->
+					</div>
+				</div>
+				<!-- <hr /> -->
+				<!-- <div class="flex flex-column w-full">
+					<p>List of channels/playlists with data?</p>
+					<p>List of release groups</p>
+					<div class="flex flex-column w-full">
+						<p>Release groups</p>
 						<button
 							class="button is-primary"
-							@click="addSpotifyArtist()"
+							@click="
+								loadReleaseGroups(
+									inputs['musicbrainzIdentifier'].value
+								)
+							"
 						>
-							Add Spotify artist
+							Load release groups
 						</button>
-					</div>
-					<div>
-						<p>SoundCloud artists</p>
-						<div class="flex flex-column gap-4">
-							<template
-								v-for="(soundcloudArtist, index) in inputs[
-									'soundcloudArtists'
-								].value"
-								:key="`${index}`"
+						<div
+							class="flex flex-column w-full release-groups"
+							v-if="
+								releaseGroupsResponse[
+									inputs['musicbrainzIdentifier'].value
+								]
+							"
+						>
+							<div
+								v-for="releaseGroup in releaseGroupsResponse[
+									inputs['musicbrainzIdentifier'].value
+								]['release-groups']"
+								:key="releaseGroup.id"
+								class="flex flex-column"
 							>
-								<div class="control is-grouped gap-4">
-									<div class="name-container">
-										<label class="label"
-											>SoundCloud artist ID</label
-										>
-										<input
-											class="input"
-											type="text"
-											v-model="
-												soundcloudArtist.soundcloudArtistId
-											"
-											placeholder="Enter Soundcloud artist ID..."
-										/>
-									</div>
-									<div class="name-container">
-										<label class="label">Comment</label>
-										<input
-											class="input"
-											type="text"
-											v-model="soundcloudArtist.comment"
-											placeholder="Enter comment..."
-										/>
+								<div class="flex flex-row mrow">
+									<div class="four-buttons">
+										<button class="button u" @click="toggleButtonStatus(releaseGroup.id, 'U')" :class="!buttonStatus[releaseGroup.id] ? 'active' : ''">U</button>
+										<button class="button y" @click="toggleButtonStatus(releaseGroup.id, 'Y')" :class="buttonStatus[releaseGroup.id] === 'Y' ? 'active' : ''">Y</button>
+										<button class="button m" @click="toggleButtonStatus(releaseGroup.id, 'M')" :class="buttonStatus[releaseGroup.id] === 'M' ? 'active' : ''">M</button>
+										<button class="button n" @click="toggleButtonStatus(releaseGroup.id, 'N')" :class="buttonStatus[releaseGroup.id] === 'N' ? 'active' : ''">N</button>
 									</div>
-									<button
-										class="button is-primary button-bottom"
-										@click="removeSoundcloudArtist(index)"
+									<button class="button is-primary" @click="loadReleaseGroup(releaseGroup.id)">Show</button>
+									<p>
+										{{ releaseGroup.title }} -
+										{{ releaseGroup["first-release-date"] }} -
+										{{ releaseGroup["primary-type"] }}
+									</p>
+								</div>
+								<div
+									class="flex flex-column w-full release-group"
+									v-if="
+										releaseGroupResponse[
+											releaseGroup.id
+										]
+									"
+								>
+									<div
+										v-for="release in releaseGroupResponse[
+											releaseGroup.id
+										]['releases']"
+										:key="release.id"
+										class="flex flex-column"
 									>
-										Remove
-									</button>
+										<div class="flex flex-row mrow">
+											<div class="four-buttons">
+												<button class="button u" @click="toggleButtonStatus(release.id, 'U')" :class="!buttonStatus[release.id] ? 'active' : ''">U</button>
+												<button class="button y" @click="toggleButtonStatus(release.id, 'Y')" :class="buttonStatus[release.id] === 'Y' ? 'active' : ''">Y</button>
+												<button class="button m" @click="toggleButtonStatus(release.id, 'M')" :class="buttonStatus[release.id] === 'M' ? 'active' : ''">M</button>
+												<button class="button n" @click="toggleButtonStatus(release.id, 'N')" :class="buttonStatus[release.id] === 'N' ? 'active' : ''">N</button>
+											</div>
+											<button class="button is-primary" @click="loadRelease(release.id)">Show</button>
+											<p>
+												{{ release.title }} -
+												{{ release.date }} -
+												{{ release.country }} -
+												{{ release.packaging }} -
+												{{ release.status }}
+											</p>
+										</div>
+										<div
+											class="flex flex-column w-full release"
+											v-if="
+												releaseResponse[
+													release.id
+												]
+											"
+										>
+											<div
+												v-for="track in releaseResponse[
+													release.id
+												]['media'][0].tracks"
+												:key="track.id"
+												class="flex flex-column"
+											>
+												<div class="flex flex-row mrow">
+													<div class="four-buttons">
+														<button class="button u" @click="toggleButtonStatus(track.id, 'U')" :class="!buttonStatus[track.id] ? 'active' : ''">U</button>
+														<button class="button y" @click="toggleButtonStatus(track.id, 'Y')" :class="buttonStatus[track.id] === 'Y' ? 'active' : ''">Y</button>
+														<button class="button m" @click="toggleButtonStatus(track.id, 'M')" :class="buttonStatus[track.id] === 'M' ? 'active' : ''">M</button>
+														<button class="button n" @click="toggleButtonStatus(track.id, 'N')" :class="buttonStatus[track.id] === 'N' ? 'active' : ''">N</button>
+													</div>
+													<!- <button class="button is-primary" @click="loadRelease(track.id)">Show</button> ->
+													<p>
+														{{ track.title }} -
+														{{ track.position }}
+													</p>
+												</div>
+											</div>
+										</div>
+									</div>
 								</div>
-							</template>
+							</div>
 						</div>
-						<button
-							class="button is-primary"
-							@click="addSoundcloudArtist()"
-						>
-							Add Soundcloud artist
-						</button>
 					</div>
-				</div>
-				<div class="flex flex-column w-1/3"></div>
+				</div> -->
 			</div>
 		</template>
 		<template #footer>
 			<div>
 				<save-button
+					v-if="!importMode"
 					:default-message="`${createArtist ? 'Create' : 'Update'} Artist`"
 					@clicked="saveArtist()"
 				/>
 				<save-button
+					v-if="!importMode"
 					:default-message="`${createArtist ? 'Create' : 'Update'} and close`"
 					@clicked="saveArtist(true)"
 				/>
+				<button
+					class="button is-primary"
+					@click="
+						openModal({
+							modal: 'importArtistMB',
+							props: { artistId }
+						})
+					"
+				>
+					<span>Import MB</span>
+				</button>
 			</div>
 		</template>
 	</modal>
@@ -582,4 +745,60 @@ const fillMissingUrls = musicbrainzIdentifier => {
 .w-full {
 	width: 100%;
 }
+
+.release-groups {
+	gap: 8px;
+}
+
+.four-buttons {
+	.u.active {
+		background-color: gray;
+	}
+
+	.n.active {
+		background-color: red;
+	}
+
+	.m.active {
+		background-color: orange;
+	}
+
+	.y.active {
+		background-color: green;
+	}
+
+	button {
+		border: 0;
+		padding: 4px 8px;
+		border-radius: 0;
+
+		&:first-child {
+			border-radius: 8px 0 0 8px;
+		}
+
+		&:last-child {
+			border-radius: 0 8px 8px 0;
+		}
+
+		&.active {
+			outline: 1px solid blue;
+		}
+	}
+}
+
+.release-group,
+.release {
+	margin-left: 16px;
+}
+
+.release-groups,
+.release-group,
+.release {
+	gap: 8px;
+	margin-top: 8px;
+}
+
+.mrow {
+	gap: 8px;
+}
 </style>