refactor(EditSong): Display and allow autofill of existing discogs data when discogs is disabled

backend/logic/ws.js

@@ -601,6 +601,7 @@ class _WSModule extends CoreClass {
 					shortcutOverrides: config.get("shortcutOverrides"),
 					registrationDisabled: config.get("registrationDisabled"),
 					mailEnabled: config.get("mail.enabled"),
+					discogsEnabled: config.get("apis.discogs.enabled"),
 					experimental: {
 						changable_listen_mode: config.get("experimental.changable_listen_mode"),
 						media_session: config.get("experimental.media_session"),

frontend/src/components/modals/EditSong/Tabs/Discogs.vue

@@ -3,10 +3,9 @@ import { ref, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import Toast from "toasters";
 import keyboardShortcuts from "@/keyboardShortcuts";
-
 import { useEditSongStore } from "@/stores/editSong";
-
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useUserAuthStore } from "@/stores/userAuth";
 
 const props = defineProps({
 	modalUuid: { type: String, required: true },
@@ -25,6 +24,8 @@ const { form } = storeToRefs(editSongStore);
 
 const { selectDiscogsInfo } = editSongStore;
 
+const { hasPermission } = useUserAuthStore();
+
 const discogs = ref({
 	apiResults: [],
 	page: 1,
@@ -203,104 +204,113 @@ onMounted(() => {
 			<p class="selected-discogs-info-none">None</p>
 		</div>
 
-		<label class="label"> Search for a song from Discogs </label>
-		<div class="control is-grouped input-with-button">
-			<p class="control is-expanded">
-				<input
-					class="input"
-					type="text"
-					placeholder="Enter your Discogs query here..."
-					ref="discogsInput"
-					v-model="discogsQuery"
-					@keyup.enter="searchDiscogsForPage(1)"
-					@change="onDiscogsQueryChange"
-					v-focus
-				/>
-			</p>
-			<p class="control">
-				<button class="button is-info" @click="searchDiscogsForPage(1)">
-					<i class="material-icons icon-with-button">search</i>Search
-				</button>
-			</p>
-		</div>
+		<template v-if="hasPermission('apis.searchDiscogs')">
+			<label class="label"> Search for a song from Discogs </label>
+			<div class="control is-grouped input-with-button">
+				<p class="control is-expanded">
+					<input
+						class="input"
+						type="text"
+						placeholder="Enter your Discogs query here..."
+						ref="discogsInput"
+						v-model="discogsQuery"
+						@keyup.enter="searchDiscogsForPage(1)"
+						@change="onDiscogsQueryChange"
+						v-focus
+					/>
+				</p>
+				<p class="control">
+					<button
+						class="button is-info"
+						@click="searchDiscogsForPage(1)"
+					>
+						<i class="material-icons icon-with-button">search</i
+						>Search
+					</button>
+				</p>
+			</div>
 
-		<label class="label" v-if="discogs.apiResults.length > 0"
-			>API results</label
-		>
-		<div class="api-results-container" v-if="discogs.apiResults.length > 0">
+			<label class="label" v-if="discogs.apiResults.length > 0"
+				>API results</label
+			>
 			<div
-				class="api-result"
-				v-for="(result, index) in discogs.apiResults"
-				:key="result.album.id"
-				tabindex="0"
-				@keydown.space.prevent
-				@keyup.enter="toggleAPIResult(index)"
+				class="api-results-container"
+				v-if="discogs.apiResults.length > 0"
 			>
-				<div class="top-container">
-					<img :src="result.album.albumArt" />
-					<div class="right-container">
-						<p class="album-title">
-							{{ result.album.title }}
-						</p>
-						<div class="bottom-row">
-							<img
-								src="/assets/arrow_up.svg"
-								v-if="result.expanded"
-								@click="toggleAPIResult(index)"
-							/>
-							<img
-								src="/assets/arrow_down.svg"
-								v-if="!result.expanded"
-								@click="toggleAPIResult(index)"
-							/>
-							<p class="type-year">
-								<span>{{ result.album.type }}</span>
-								•
-								<span>{{ result.album.year }}</span>
+				<div
+					class="api-result"
+					v-for="(result, index) in discogs.apiResults"
+					:key="result.album.id"
+					tabindex="0"
+					@keydown.space.prevent
+					@keyup.enter="toggleAPIResult(index)"
+				>
+					<div class="top-container">
+						<img :src="result.album.albumArt" />
+						<div class="right-container">
+							<p class="album-title">
+								{{ result.album.title }}
 							</p>
+							<div class="bottom-row">
+								<img
+									src="/assets/arrow_up.svg"
+									v-if="result.expanded"
+									@click="toggleAPIResult(index)"
+								/>
+								<img
+									src="/assets/arrow_down.svg"
+									v-if="!result.expanded"
+									@click="toggleAPIResult(index)"
+								/>
+								<p class="type-year">
+									<span>{{ result.album.type }}</span>
+									•
+									<span>{{ result.album.year }}</span>
+								</p>
+							</div>
 						</div>
 					</div>
-				</div>
-				<div class="bottom-container" v-if="result.expanded">
-					<p class="bottom-container-field">
-						Artists:
-						<span>{{ result.album.artists.join(", ") }}</span>
-					</p>
-					<p class="bottom-container-field">
-						Genres:
-						<span>{{ result.album.genres.join(", ") }}</span>
-					</p>
-					<p class="bottom-container-field">
-						Data quality:
-						<span>{{ result.dataQuality }}</span>
-					</p>
-					<div class="tracks">
-						<div
-							class="track"
-							tabindex="0"
-							v-for="(track, trackIndex) in result.tracks"
-							:key="`${track.position}-${track.title}`"
-							@click="selectTrack(index, trackIndex)"
-							@keyup.enter="selectTrack(index, trackIndex)"
-						>
-							<span>{{ track.position }}.</span>
-							<p>{{ track.title }}</p>
+					<div class="bottom-container" v-if="result.expanded">
+						<p class="bottom-container-field">
+							Artists:
+							<span>{{ result.album.artists.join(", ") }}</span>
+						</p>
+						<p class="bottom-container-field">
+							Genres:
+							<span>{{ result.album.genres.join(", ") }}</span>
+						</p>
+						<p class="bottom-container-field">
+							Data quality:
+							<span>{{ result.dataQuality }}</span>
+						</p>
+						<div class="tracks">
+							<div
+								class="track"
+								tabindex="0"
+								v-for="(track, trackIndex) in result.tracks"
+								:key="`${track.position}-${track.title}`"
+								@click="selectTrack(index, trackIndex)"
+								@keyup.enter="selectTrack(index, trackIndex)"
+							>
+								<span>{{ track.position }}.</span>
+								<p>{{ track.title }}</p>
+							</div>
 						</div>
 					</div>
 				</div>
+				<button
+					v-if="
+						discogs.apiResults.length > 0 &&
+						!discogs.disableLoadMore &&
+						discogs.page < discogs.pages
+					"
+					class="button is-fullwidth is-info discogs-load-more"
+					@click="loadNextDiscogsPage()"
+				>
+					Load more...
+				</button>
 			</div>
-			<button
-				v-if="
-					discogs.apiResults.length > 0 &&
-					!discogs.disableLoadMore &&
-					discogs.page < discogs.pages
-				"
-				class="button is-fullwidth is-info discogs-load-more"
-				@click="loadNextDiscogsPage()"
-			>
-				Load more...
-			</button>
-		</div>
+		</template>
 	</div>
 </template>
 

frontend/src/components/modals/EditSong/index.vue

@@ -196,6 +196,7 @@ const currentSongFlagged = computed(
 // EditSongs end
 
 const configStore = useConfigStore();
+const { discogsEnabled } = storeToRefs(configStore);
 
 const {
 	editSong,
@@ -1208,7 +1209,7 @@ watch(
 	}
 );
 watch(
-	() => hasPermission("apis.searchDiscogs"),
+	() => discogsEnabled.value || inputs.value.discogs.value,
 	value => {
 		if (!value && tab.value === "discogs") showTab("musare-songs");
 	}
@@ -1217,7 +1218,8 @@ watch(
 onMounted(async () => {
 	editSongStore.init({ song: props.song, songs: props.songs });
 
-	if (!hasPermission("apis.searchDiscogs")) showTab("musare-songs");
+	if (!(discogsEnabled.value || inputs.value.discogs.value))
+		showTab("musare-songs");
 
 	editSongStore.form = {
 		inputs,
@@ -2668,7 +2670,7 @@ onBeforeUnmount(() => {
 					<div id="tabs-container">
 						<div id="tab-selection">
 							<button
-								v-if="hasPermission('apis.searchDiscogs')"
+								v-if="discogsEnabled || inputs.discogs.value"
 								class="button is-default"
 								:class="{ selected: tab === 'discogs' }"
 								:ref="el => (tabs['discogs-tab'] = el)"
@@ -2703,7 +2705,7 @@ onBeforeUnmount(() => {
 							</button>
 						</div>
 						<discogs
-							v-if="hasPermission('apis.searchDiscogs')"
+							v-if="discogsEnabled || inputs.discogs.value"
 							class="tab"
 							v-show="tab === 'discogs'"
 							:bulk="bulk"

frontend/src/stores/config.ts

@@ -15,6 +15,7 @@ export const useConfigStore = defineStore("config", {
 		shortcutOverrides: Record<string, any>;
 		registrationDisabled: boolean;
 		mailEnabled: boolean;
+		discogsEnabled: boolean;
 		experimental: {
 			changable_listen_mode: string[] | boolean;
 			media_session: boolean;
@@ -40,6 +41,7 @@ export const useConfigStore = defineStore("config", {
 		shortcutOverrides: {},
 		registrationDisabled: false,
 		mailEnabled: true,
+		discogsEnabled: true,
 		experimental: {
 			changable_listen_mode: [],
 			media_session: false,