Update:Remove scanner settings, add library scanner settings tab, add order of precedence

client/components/modals/libraries/LibraryScannerSettings.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
+    <div class="flex items-center justify-between mb-4">
+      <h2 class="text-lg text-gray-200">Metadata order of precedence</h2>
+      <ui-btn small @click="resetToDefault">Reset to default</ui-btn>
+    </div>
+
+    <draggable v-model="metadataSourceMapped" v-bind="dragOptions" class="list-group" draggable=".item" handle=".drag-handle" tag="ul" @start="drag = true" @end="drag = false" @update="draggableUpdate">
+      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+        <li v-for="(source, index) in metadataSourceMapped" :key="source.id" :class="source.include ? 'item' : 'opacity-50'" class="w-full px-2 flex items-center relative border border-white/10">
+          <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 mr-2 md:mr-4">reorder</span>
+          <div class="text-center py-1 w-8 min-w-8">
+            {{ source.include ? index + 1 : '' }}
+          </div>
+          <div class="flex-grow px-4 py-3">{{ source.name }}</div>
+          <div class="px-2 opacity-100">
+            <ui-toggle-switch v-model="source.include" :off-color="'error'" @input="includeToggled(source)" />
+          </div>
+        </li>
+      </transition-group>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  components: {
+    draggable
+  },
+  props: {
+    library: {
+      type: Object,
+      default: () => null
+    },
+    processing: Boolean
+  },
+  data() {
+    return {
+      drag: false,
+      dragOptions: {
+        animation: 200,
+        group: 'description',
+        ghostClass: 'ghost'
+      },
+      metadataSourceData: {
+        folderStructure: {
+          id: 'folderStructure',
+          name: 'Folder structure',
+          include: true
+        },
+        audioMetatags: {
+          id: 'audioMetatags',
+          name: 'Audio file meta tags',
+          include: true
+        },
+        txtFiles: {
+          id: 'txtFiles',
+          name: 'desc.txt & reader.txt files',
+          include: true
+        },
+        opfFile: {
+          id: 'opfFile',
+          name: 'OPF file',
+          include: true
+        },
+        absMetadata: {
+          id: 'absMetadata',
+          name: 'Audiobookshelf metadata file',
+          include: true
+        }
+      },
+      metadataSourceMapped: []
+    }
+  },
+  computed: {
+    librarySettings() {
+      return this.library.settings || {}
+    },
+    mediaType() {
+      return this.library.mediaType
+    },
+    isBookLibrary() {
+      return this.mediaType === 'book'
+    }
+  },
+  methods: {
+    resetToDefault() {
+      this.metadataSourceMapped = []
+      for (const key in this.metadataSourceData) {
+        this.metadataSourceMapped.push({ ...this.metadataSourceData[key] })
+      }
+      this.$emit('update', this.getLibraryData())
+    },
+    getLibraryData() {
+      return {
+        settings: {
+          metadataPrecedence: this.metadataSourceMapped.map((source) => (source.include ? source.id : null)).filter((s) => s)
+        }
+      }
+    },
+    includeToggled(source) {
+      this.updated()
+    },
+    draggableUpdate() {
+      this.updated()
+    },
+    updated() {
+      this.$emit('update', this.getLibraryData())
+    },
+    init() {
+      const metadataPrecedence = this.librarySettings.metadataPrecedence || []
+
+      this.metadataSourceMapped = metadataPrecedence.map((source) => this.metadataSourceData[source]).filter((s) => s)
+
+      for (const sourceKey in this.metadataSourceData) {
+        if (!metadataPrecedence.includes(sourceKey)) {
+          const unusedSourceData = { ...this.metadataSourceData[sourceKey], include: false }
+          this.metadataSourceMapped.push(unusedSourceData)
+        }
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>