added running scan loader to drawer btn

rommapp · Jul 3, 2024 · 69ed831 · 69ed831
1 parent 59c2a51
commit 69ed831
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 112 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,94 +1,18 @@
 <script setup lang="ts">
 import Notification from "@/components/common/Notification.vue";
 import api from "@/services/api/index";
-import socket from "@/services/socket";
 import storeConfig from "@/stores/config";
-import storeGalleryFilter from "@/stores/galleryFilter";
 import storeHeartbeat from "@/stores/heartbeat";
 import storeNotifications from "@/stores/notifications";
-import storeRoms, { type SimpleRom } from "@/stores/roms";
-import storeScanning from "@/stores/scanning";
-import type { Events } from "@/types/emitter";
-import { normalizeString } from "@/utils";
-import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { inject, onBeforeUnmount, onMounted } from "vue";
+import { onMounted } from "vue";
 
 // Props
-const scanningStore = storeScanning();
 const notificationStore = storeNotifications();
 const { notifications } = storeToRefs(notificationStore);
-const { scanningPlatforms } = storeToRefs(scanningStore);
-const romsStore = storeRoms();
-const galleryFilter = storeGalleryFilter();
-const isFiltered = normalizeString(galleryFilter.filterSearch).trim() != "";
-const emitter = inject<Emitter<Events>>("emitter");
 const heartbeat = storeHeartbeat();
 const configStore = storeConfig();
 
-socket.on(
-  "scan:scanning_platform",
-  ({ name, slug, id }: { name: string; slug: string; id: number }) => {
-    scanningStore.set(true);
-    scanningPlatforms.value = scanningPlatforms.value.filter(
-      (platform) => platform.name !== name
-    );
-    scanningPlatforms.value.push({ name, slug, id, roms: [] });
-  }
-);
-
-socket.on("scan:scanning_rom", (rom: SimpleRom) => {
-  scanningStore.set(true);
-  if (romsStore.currentPlatform?.id === rom.platform_id) {
-    romsStore.add([rom]);
-    romsStore.setFiltered(
-      isFiltered ? romsStore.filteredRoms : romsStore.allRoms,
-      galleryFilter
-    );
-  }
-
-  let scannedPlatform = scanningPlatforms.value.find(
-    (p) => p.slug === rom.platform_slug
-  );
-
-  // Add the platform if the socket dropped and it's missing
-  if (!scannedPlatform) {
-    scanningPlatforms.value.push({
-      name: rom.platform_name,
-      slug: rom.platform_slug,
-      id: rom.platform_id,
-      roms: [],
-    });
-    scannedPlatform = scanningPlatforms.value[0];
-  }
-
-  scannedPlatform?.roms.push(rom);
-});
-
-socket.on("scan:done", () => {
-  scanningStore.set(false);
-  socket.disconnect();
-
-  emitter?.emit("refreshDrawer", null);
-  emitter?.emit("snackbarShow", {
-    msg: "Scan completed successfully!",
-    icon: "mdi-check-bold",
-    color: "green",
-    timeout: 4000,
-  });
-});
-
-socket.on("scan:done_ko", (msg) => {
-  scanningStore.set(false);
-
-  emitter?.emit("snackbarShow", {
-    msg: `Scan failed: ${msg}`,
-    icon: "mdi-close-circle",
-    color: "red",
-  });
-  socket.disconnect();
-});
-
 onMounted(async () => {
   await api.get("/heartbeat").then(({ data: data }) => {
     heartbeat.set(data);
@@ -98,13 +22,6 @@ onMounted(async () => {
     configStore.set(data);
   });
 });
-
-onBeforeUnmount(() => {
-  socket.off("scan:scanning_platform");
-  socket.off("scan:scanning_rom");
-  socket.off("scan:done");
-  socket.off("scan:done_ko");
-});
 </script>
 
 <template>

diff --git a/frontend/src/components/Administration/Users/Dialog/CreateUser.vue b/frontend/src/components/Administration/Users/Dialog/CreateUser.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import RDialog from "@/components/common/RDialog.vue";
 import userApi from "@/services/api/user";
 import storeUsers from "@/stores/users";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
 import { useDisplay } from "vuetify";
-import RDialog from "@/components/common/RDialog.vue";
 
 // Props
 const user = ref({

diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -103,7 +103,7 @@ function closeDialog() {
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
-        <v-col cols="12" md="8" lg="8" xl="9">
+        <v-col cols="12" lg="7" xl="9">
           <v-row class="pa-2" no-gutters>
             <v-col>
               <v-text-field

diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -12,7 +12,7 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { lgAndUp } = useDisplay();
+const { mdAndUp } = useDisplay();
 const show = ref(false);
 const collection = ref<UpdatedCollection>({} as UpdatedCollection);
 const imagePreviewUrl = ref<string | undefined>("");
@@ -97,11 +97,11 @@ function closeDialog() {
     @close="closeDialog"
     v-model="show"
     icon="mdi-pencil-box"
-    :width="lgAndUp ? '55vw' : '95vw'"
+    :width="mdAndUp ? '55vw' : '95vw'"
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
-        <v-col cols="12" md="8" lg="8" xl="9">
+        <v-col cols="12" lg="7" xl="9">
           <v-row class="pa-2" no-gutters>
             <v-col>
               <v-text-field

diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
+import socket from "@/services/socket";
 import storeAuth from "@/stores/auth";
+import storeGalleryFilter from "@/stores/galleryFilter";
 import storeNavigation from "@/stores/navigation";
+import storeRoms, { type SimpleRom } from "@/stores/roms";
+import storeScanning from "@/stores/scanning";
+import type { Events } from "@/types/emitter";
+import { normalizeString } from "@/utils";
+import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
+import { inject, onBeforeUnmount } from "vue";
 
 // Props
 withDefaults(
@@ -13,6 +22,85 @@ withDefaults(
 );
 const navigationStore = storeNavigation();
 const auth = storeAuth();
+const galleryFilter = storeGalleryFilter();
+const isFiltered = normalizeString(galleryFilter.filterSearch).trim() != "";
+const emitter = inject<Emitter<Events>>("emitter");
+const scanningStore = storeScanning();
+const { scanningPlatforms } = storeToRefs(scanningStore);
+const romsStore = storeRoms();
+const { scanning } = storeToRefs(scanningStore);
+// Connect to socket on load to catch running scans
+if (!socket.connected) socket.connect();
+
+socket.on(
+  "scan:scanning_platform",
+  ({ name, slug, id }: { name: string; slug: string; id: number }) => {
+    scanningStore.set(true);
+    scanningPlatforms.value = scanningPlatforms.value.filter(
+      (platform) => platform.name !== name
+    );
+    scanningPlatforms.value.push({ name, slug, id, roms: [] });
+  }
+);
+
+socket.on("scan:scanning_rom", (rom: SimpleRom) => {
+  scanningStore.set(true);
+  if (romsStore.currentPlatform?.id === rom.platform_id) {
+    romsStore.add([rom]);
+    romsStore.setFiltered(
+      isFiltered ? romsStore.filteredRoms : romsStore.allRoms,
+      galleryFilter
+    );
+  }
+
+  let scannedPlatform = scanningPlatforms.value.find(
+    (p) => p.slug === rom.platform_slug
+  );
+
+  // Add the platform if the socket dropped and it's missing
+  if (!scannedPlatform) {
+    scanningPlatforms.value.push({
+      name: rom.platform_name,
+      slug: rom.platform_slug,
+      id: rom.platform_id,
+      roms: [],
+    });
+    scannedPlatform = scanningPlatforms.value[0];
+  }
+
+  scannedPlatform?.roms.push(rom);
+});
+
+socket.on("scan:done", () => {
+  scanningStore.set(false);
+  socket.disconnect();
+
+  emitter?.emit("refreshDrawer", null);
+  emitter?.emit("snackbarShow", {
+    msg: "Scan completed successfully!",
+    icon: "mdi-check-bold",
+    color: "green",
+    timeout: 4000,
+  });
+});
+
+socket.on("scan:done_ko", (msg) => {
+  scanningStore.set(false);
+
+  emitter?.emit("snackbarShow", {
+    msg: `Scan failed: ${msg}`,
+    icon: "mdi-close-circle",
+    color: "red",
+  });
+  socket.disconnect();
+});
+
+onBeforeUnmount(() => {
+  socket.off("scan:scanning_platform");
+  socket.off("scan:scanning_rom");
+  socket.off("scan:done");
+  socket.off("scan:done_ko");
+});
 </script>
 <template>
   <v-btn
@@ -23,8 +111,16 @@ const auth = storeAuth();
     color="primary"
     icon
     @click="navigationStore.goScan"
-    ><v-icon :color="$route.name == 'scan' ? 'romm-accent-1' : ''"
-      >mdi-magnify-scan</v-icon
-    ></v-btn
   >
+    <v-progress-circular
+      v-if="scanning"
+      color="romm-accent-1"
+      :width="2"
+      :size="20"
+      indeterminate
+    />
+    <v-icon v-else :color="$route.name == 'scan' ? 'romm-accent-1' : ''"
+      >mdi-magnify-scan</v-icon
+    >
+  </v-btn>
 </template>
diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
@@ -74,6 +74,7 @@ const router = createRouter({
 router.afterEach(() => {
   // Scroll to top to avoid annoying behaviour in mobile
   window.scrollTo({ top: 0, left: 0 });
+  // TODO: check permission for views. Ex: view user can access to /scan view
 });
 
 export default router;
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
@@ -7,17 +7,16 @@ import CreatePlatformBindingDialog from "@/components/Management/Dialog/CreatePl
 import CreatePlatformVersionDialog from "@/components/Management/Dialog/CreatePlatformVersion.vue";
 import DeletePlatformBindingDialog from "@/components/Management/Dialog/DeletePlatformBinding.vue";
 import DeletePlatformVersionDialog from "@/components/Management/Dialog/DeletePlatformVersion.vue";
+import AddRomsToCollectionDialog from "@/components/common/Collection/Dialog/AddRoms.vue";
 import CreateCollectionDialog from "@/components/common/Collection/Dialog/CreateCollection.vue";
+import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
 import EditCollectionDialog from "@/components/common/Collection/Dialog/EditCollection.vue";
-import AddRomsToCollectionDialog from "@/components/common/Collection/Dialog/AddRoms.vue";
 import RemoveRomsFromCollectionDialog from "@/components/common/Collection/Dialog/RemoveRoms.vue";
-import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
 import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
 import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownloadLink.vue";
 import DeleteRomDialog from "@/components/common/Game/Dialog/DeleteRom.vue";
 import EditRomDialog from "@/components/common/Game/Dialog/EditRom.vue";
 import MatchRomDialog from "@/components/common/Game/Dialog/MatchRom.vue";
-import SearchCoverDialog from "@/components/common/SearchCover.vue";
 import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
 import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
 import LoadingView from "@/components/common/LoadingView.vue";
@@ -28,22 +27,19 @@ import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue"
 import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
 import NewVersion from "@/components/common/NewVersion.vue";
 import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
+import SearchCoverDialog from "@/components/common/SearchCover.vue";
 import platformApi from "@/services/api/platform";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 import storePlatforms from "@/stores/platforms";
-import storeScanning from "@/stores/scanning";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
-import { storeToRefs } from "pinia";
 import { inject, onMounted } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
 const { smAndDown } = useDisplay();
-const scanningStore = storeScanning();
-const { scanning } = storeToRefs(scanningStore);
 const navigationStore = storeNavigation();
 const platformsStore = storePlatforms();
 const auth = storeAuth();
@@ -77,14 +73,6 @@ onMounted(async () => {
 </script>
 
 <template>
-  <v-progress-linear
-    color="romm-accent-1"
-    :active="scanning"
-    :indeterminate="true"
-    absolute
-  />
-
-  <!-- TODO: refactor and extract components -->
   <main-drawer v-if="!smAndDown" />
 
   <main-app-bar v-if="smAndDown" />

diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
@@ -7,7 +7,7 @@ import storePlatforms, { type Platform } from "@/stores/platforms";
 import storeScanning from "@/stores/scanning";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
-import { useDisplay, useTheme } from "vuetify";
+import { useDisplay } from "vuetify";
 
 // Props
 const { xs, smAndDown } = useDisplay();
@@ -16,7 +16,6 @@ const { scanning, scanningPlatforms, scanStats } = storeToRefs(scanningStore);
 const platforms = storePlatforms();
 const heartbeat = storeHeartbeat();
 const platformsToScan = ref<Platform[]>([]);
-const theme = useTheme();
 const panels = ref([0]);
 const panelIndex = ref(0);
 // Use a computed property to reactively update metadataOptions based on heartbeat
@@ -71,9 +70,6 @@ const scanOptions = [
 ];
 const scanType = ref("quick");
 
-// Connect to socket on load to catch running scans
-if (!socket.connected) socket.connect();
-
 async function scan() {
   scanningStore.set(true);
   scanningPlatforms.value = [];