feat: plugins refactor

It is now possible to choose a default order for the
metadata providers plugins.

It is also possible in the UI to specify which plugins
should be used to retrieve the metadata for a given search.

build.gradle.kts

@@ -58,7 +58,7 @@ dependencies {
 
     implementation("org.xerial:sqlite-jdbc")
     implementation("org.liquibase:liquibase-core")
-    val exposedVersion = "0.40.1"
+    val exposedVersion = "0.41.1"
     implementation("org.jetbrains.exposed:exposed-spring-boot-starter:$exposedVersion")
     implementation("org.jetbrains.exposed:exposed-java-time:$exposedVersion")
 // 	implementation("org.nuvito.spring.data:sqlite-dialect:1.0-SNAPSHOT")

src/jelu-ui/package.json

@@ -34,6 +34,7 @@
     "vue-i18n": "9.2.2",
     "vue-router": "4.1.6",
     "vue3-datepicker": "^0.3.4",
+    "vuedraggable": "4.1.0",
     "vuejs-sidebar-menu": "^1.0.0",
     "vuex": "^4.0.2"
   },

src/jelu-ui/src/assets/style.css

@@ -194,6 +194,12 @@
   width: min(900px, 85vw);
 }
 
+.metadata-modal {
+  @apply m-5 sm:p-5;
+  height: min(400px, 75vh);
+  width: min(400px, 85vw);
+}
+
 .review-book-card {
   @apply h-72;
   width: min(300px, 85vw);

src/jelu-ui/src/components/AddBook.vue

@@ -444,15 +444,6 @@ const validateIsbn13 = (isbn: string) => {
   }
 }
 
-let autoImportPopupContent = computed(() => {
-  if (store != null && store.getters.getSettings.metadataFetchEnabled) {
-    return t('labels.auto_fill_doc')
-  }
-  else {
-    return t('labels.auto_import_disabled')
-  }
-})
-
 let displayDatepicker = computed(() => {
   return eventType.value !== null && eventType.value !== "NONE"
 })
@@ -467,17 +458,33 @@ let displayDatepicker = computed(() => {
         <h1 class="text-2xl title has-text-weight-normal typewriter capitalize">
           {{ t('nav.add_book') }}
         </h1>
-        <button
-          v-tooltip="autoImportPopupContent"
-          class="btn btn-success button is-success is-light"
-          :disabled="store != null && !store.getters.getMetadataFetchEnabled"
-          @click="toggleModal"
-        >
-          <span class="icon">
-            <i class="mdi mdi-auto-fix mdi-18px" />
-          </span>
-          <span>{{ t('labels.auto_fill') }}</span>
-        </button>
+        <div class="flex">
+          <button
+            v-tooltip="t('labels.auto_fill_doc')"
+            class="btn btn-success button is-success is-light"
+            :disabled="store != null && !store.getters.getMetadataFetchEnabled"
+            @click="toggleModal"
+          >
+            <span class="icon">
+              <i class="mdi mdi-auto-fix mdi-18px" />
+            </span>
+            <span>{{ t('labels.auto_fill') }}</span>
+          </button>
+          <svg
+            v-if="store != null && !store.getters.getMetadataFetchEnabled"
+            v-tooltip="t('labels.auto_import_disabled')"
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5 text-warning"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
       </div>
       <div class="form-control sm:w-8/12 justify-center justify-items-center justify-self-center column is-two-thirds">
         <div class="field mb-3">

src/jelu-ui/src/components/AutoImportFormModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, Ref, ref } from "vue";
+import { computed, reactive, Ref, ref, ComputedRef } from "vue";
 import { StringUtils } from "../utils/StringUtils";
 import dataService from "../services/DataService";
 import { Metadata } from "../model/Metadata";
@@ -8,12 +8,17 @@ import { useI18n } from 'vue-i18n'
 import { useProgrammatic } from "@oruga-ui/oruga-next";
 import ScanModal from "./ScanModal.vue";
 import { Book } from "../model/Book";
+import { PluginInfo } from "../model/PluginInfo";
+import { key } from '../store'
+import { useStore } from 'vuex'
+import { ServerSettings } from "../model/ServerSettings";
+import MetadataPluginsModal from "./MetadataPluginsModal.vue";
 
 const { t } = useI18n({
       inheritLocale: true,
       useScope: 'global'
     })
-
+const store = useStore(key)
 const { formatDate, formatDateString } = useDates()
 
 const { oruga } = useProgrammatic();
@@ -28,6 +33,10 @@ const form = reactive({
   authors: props.book?.authors?.map(a => a.name).join(','),
 });
 
+const serverSettings: ComputedRef<ServerSettings> = computed(() => {
+  return store != undefined && store.getters.getSettings
+})
+
 const emit = defineEmits(['close', 'metadataReceived']);
 
 const metadata: Ref<Metadata|null> = ref(null)
@@ -38,10 +47,12 @@ const displayForm: Ref<boolean> = ref(true)
 
 const progress: Ref<boolean> = ref(false)
 
+let plugins: Array<PluginInfo> = []
+
 const fetchMetadata = async () => {
     console.log("fetch metadata")
     progress.value = true
-    dataService.fetchMetadata(form.isbn, form.title, form.authors)
+    dataService.fetchMetadataWithPlugins({isbn: form.isbn, title: form.title, authors: form.authors, plugins: plugins})
     .then(res => {
         console.log(res)
         progress.value = false
@@ -86,10 +97,32 @@ function toggleScanModal() {
     });
 }
 
+function togglePluginsModal() {
+    oruga.modal.open({
+      component: MetadataPluginsModal,
+      trapFocus: true,
+      active: true,
+      canCancel: ['x', 'button', 'outside'],
+      scroll: 'keep',
+      props: {
+      },
+      events: {
+        plugins: (received: Array<PluginInfo>) => {
+          console.log("plugins ")
+          console.log(received)
+          plugins = received
+      }
+    },
+      onClose: pluginsModalClosed
+    });
+}
+
 function scanModalClosed() {
   console.log("scan modal closed")
 }
-
+function pluginsModalClosed() {
+  console.log("plugins modal closed")
+}
 
 </script>
 
@@ -183,6 +216,21 @@ function scanModalClosed() {
                 />
               </svg>
             </button>
+            <button
+              v-if="serverSettings.metadataFetchEnabled && serverSettings.metadataPlugins.length > 1"
+              class="btn btn-secondary p-2"
+              :class="{'btn-disabled' : progress}"
+              @click="togglePluginsModal"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                class="w-6 h-6"
+              >
+                <path d="M6 12a.75.75 0 01-.75-.75v-7.5a.75.75 0 111.5 0v7.5A.75.75 0 016 12zM18 12a.75.75 0 01-.75-.75v-7.5a.75.75 0 011.5 0v7.5A.75.75 0 0118 12zM6.75 20.25v-1.5a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0zM18.75 18.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 011.5 0zM12.75 5.25v-1.5a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0zM12 21a.75.75 0 01-.75-.75v-7.5a.75.75 0 011.5 0v7.5A.75.75 0 0112 21zM3.75 15a2.25 2.25 0 104.5 0 2.25 2.25 0 00-4.5 0zM12 11.25a2.25 2.25 0 110-4.5 2.25 2.25 0 010 4.5zM15.75 15a2.25 2.25 0 104.5 0 2.25 2.25 0 00-4.5 0z" />
+              </svg>
+            </button>
           </div>
           <p
             v-if="errorMessage"