Expose merging of genres

src/api/genres.js

@@ -98,3 +98,20 @@ export function destroyEmpty(auth) {
         : request.json().then((result) => Promise.reject(result));
     });
 }
+
+export function merge(auth, newID, oldID) {
+  return fetch(`${baseURL}/genres/${newID}/merge?other_genre_id=${oldID}`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+      "x-secret": auth.secret,
+      "x-device-id": auth.device_id,
+    },
+  })
+    .catch((reason) => Promise.reject({ error: [reason] }))
+    .then((request) => {
+      return request.ok
+        ? Promise.resolve()
+        : request.json().then((result) => Promise.reject(result));
+    });
+}

src/components/GenreActions.vue

@@ -15,8 +15,9 @@
     >
       <VIcon>mdi-pencil</VIcon>
     </VBtn>
+    <GenreMergeDialog :genre="genre" />
     <VBtn
-      @click.stop.prevent="deleteLabel"
+      @click.stop.prevent="deleteGenre"
       v-if="isModerator"
       color="danger"
       class="ma-2"
@@ -32,9 +33,13 @@
 
 <script>
 import { mapActions, mapGetters } from "vuex";
+import GenreMergeDialog from "./GenreMergeDialog";
 
 export default {
-  name: "LabelActions",
+  name: "GenreActions",
+  components: {
+    GenreMergeDialog,
+  },
   props: {
     genre: {
       type: Object,
@@ -45,8 +50,8 @@ export default {
     ...mapGetters("auth", ["isModerator"]),
   },
   methods: {
-    ...mapActions("genres", ["destroy"]),
-    deleteLabel: function () {
+    ...mapActions("genres", ["destroy", "merge"]),
+    deleteGenre: function () {
       if (confirm(this.$t("common.are-you-sure"))) {
         this.destroy(this.genre.id);
       }

src/components/GenreMergeDialog.vue

@@ -0,0 +1,92 @@
+<template>
+  <VDialog
+    ref="dialogMerge"
+    v-model="mergeModal"
+    v-if="isModerator"
+    width="600px"
+  >
+    <template v-slot:activator="{ on }">
+      <VBtn
+        v-on="on"
+        @click.stop.prevent
+        class="ma-2"
+        color="edit"
+        text
+        icon
+        small
+      >
+        <VIcon>mdi-merge</VIcon>
+      </VBtn>
+    </template>
+    <VCard>
+      <VCardTitle>
+        <span class="headline">{{
+          $t("music.genre.merge-into", { obj: genre.name })
+        }}</span>
+      </VCardTitle>
+      <VCardText>
+        <VContainer>
+          <VRow>
+            <VCol cols="12">
+              <VCombobox
+                :items="sortedGenres"
+                cache-items
+                item-text="name"
+                item-value="id"
+                :label="$tc('music.genres', 1)"
+                return-object
+                v-model="mergeGenre"
+              />
+            </VCol>
+          </VRow>
+        </VContainer>
+      </VCardText>
+      <VDivider></VDivider>
+      <VCardActions>
+        <VSpacer></VSpacer>
+        <VBtn color="primary" class="ma-2" type="submit" @click="mergeGenres">
+          {{ $t("music.genre.merge") }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+  name: "GenreMergeDialog",
+  props: {
+    genre: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      mergeGenre: null,
+      mergeModal: false,
+    };
+  },
+  computed: {
+    ...mapGetters("auth", ["isModerator"]),
+    sortedGenres() {
+      const getter = this.$store.getters["genres/genresByName"];
+      return getter.filter((g) => {
+        return g.id !== this.genre.id;
+      });
+    },
+  },
+  methods: {
+    ...mapActions("genres", ["merge"]),
+    mergeGenres() {
+      this.merge({ newID: this.mergeGenre.id, oldID: this.genre.id }).finally(
+        () => {
+          this.mergeModal = false;
+        }
+      );
+    },
+  },
+};
+</script>

src/locales/en.json

@@ -238,6 +238,8 @@
 		"genre": {
 			"add": "Add genre",
 			"create": "Create genre",
+			"merge": "Merge genres",
+			"merge-into": "Merge {obj} into",
 			"new": "New genre",
 			"update": "Update genre"
 		},

src/store/genres.js

@@ -1,5 +1,12 @@
 import Vue from "vue";
-import { create, destroy, index, update, destroyEmpty } from "../api/genres";
+import {
+  create,
+  destroy,
+  index,
+  update,
+  destroyEmpty,
+  merge,
+} from "../api/genres";
 import { compareStrings } from "../comparators";
 
 export default {
@@ -79,6 +86,21 @@ export default {
           return Promise.resolve(false);
         });
     },
+    merge({ commit, rootState }, { newID, oldID }) {
+      return merge(rootState.auth, newID, oldID)
+        .then(() => {
+          commit(
+            "tracks/updateGenreOccurence",
+            { newID, oldID },
+            { root: true }
+          );
+          commit("removeGenre", oldID);
+        })
+        .catch((error) => {
+          this.commit("addError", error);
+          return Promise.resolve(false);
+        });
+    },
   },
   getters: {
     genres: (state) => Object.values(state.genres),

src/store/tracks.js

@@ -23,6 +23,23 @@ export default {
     removeTrack(state, id) {
       Vue.delete(state.tracks, id);
     },
+    updateGenreOccurence(state, { newID, oldID }) {
+      for (const t in state.tracks) {
+        const i = state.tracks[t].genre_ids.findIndex(
+          (gId) => `${gId}` === `${oldID}`
+        );
+        if (i >= 0) {
+          state.tracks[t].genre_ids.splice(i, 1);
+          if (
+            state.tracks[t].genre_ids.findIndex(
+              (gId) => `${gId}` === `${newID}`
+            ) === -1
+          ) {
+            state.tracks[t].genre_ids.push(newID);
+          }
+        }
+      }
+    },
   },
   actions: {
     index({ commit, rootState }) {