UI/UX fixes linting

DigitalSlideArchive · Sep 23, 2024 · 30f415c · 30f415c
1 parent 5eb984a
commit 30f415c
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 79 deletions.
diff --git a/client/src/HomePage.vue b/client/src/HomePage.vue
@@ -39,12 +39,15 @@ ws.onmessage = (event) => {
 
 setInterval(() => {
   if (ws.readyState === ws.OPEN) {
-  ws.send("ping");
-}
+    ws.send("ping");
+  }
 }, 5000);
 
 const redact_images = async () => {
-  if (!selectedDirectories.value.inputDirectory || !selectedDirectories.value.outputDirectory) {
+  if (
+    !selectedDirectories.value.inputDirectory ||
+    !selectedDirectories.value.outputDirectory
+  ) {
     return;
   }
   redactionStateFlags.value.redactionSnackbar = false;
@@ -55,19 +58,20 @@ const redact_images = async () => {
   const response = await redactImages(
     selectedDirectories.value.inputDirectory,
     selectedDirectories.value.outputDirectory,
-    selectedDirectories.value.rulesetDirectory
+    selectedDirectories.value.rulesetDirectory,
   );
   if (response.status === 200) {
     useRedactionPlan.updateImageData({
-      directory:`${selectedDirectories.value.outputDirectory}/${progress.value.redact_dir}`,
-      rules:selectedDirectories.value.rulesetDirectory,
+      directory: `${selectedDirectories.value.outputDirectory}/${progress.value.redact_dir}`,
+      rules: selectedDirectories.value.rulesetDirectory,
       limit: 50,
       offset: 0,
-      update: false,}
-    );
+      update: false,
+    });
     redactionStateFlags.value.redacting = false;
     redactionModal.value.close();
-    redactionStateFlags.value.redactionComplete = !!useRedactionPlan.imageRedactionPlan.total;
+    redactionStateFlags.value.redactionComplete =
+      !!useRedactionPlan.imageRedactionPlan.total;
     redactionStateFlags.value.redactionSnackbar = true;
   }
 };
@@ -77,7 +81,9 @@ const redact_images = async () => {
   <div class="flex">
     <input id="side-drawer" type="checkbox" class="drawer-toggle" />
     <div class="flex max-w-md">
-      <div :class="`pl-4 py-4 ${redactionStateFlags.redacting ? 'opacity-50' : ''}`">
+      <div
+        :class="`pl-4 py-4 ${redactionStateFlags.redacting ? 'opacity-50' : ''}`"
+      >
         <div class="bg-base-100 drop-shadow-xl rounded flex flex-col">
           <div class="flex justify-between content-center p-4 border-b">
             <div class="max-h6 w-auto self-center">
@@ -111,7 +117,10 @@ const redact_images = async () => {
             ref="inputModal"
             :modal-id="'inputDirectory'"
             :title="'Input Directory'"
-            @update-image-list="redactionStateFlags.showImageTable = true, redactionStateFlags.redactionComplete = false"
+            @update-image-list="
+              (redactionStateFlags.showImageTable = true),
+                (redactionStateFlags.redactionComplete = false)
+            "
           />
           <FileBrowser
             ref="outputModal"
@@ -122,7 +131,7 @@ const redact_images = async () => {
             ref="rulesetModal"
             :modal-id="'rulesetDirectory'"
             :title="'Ruleset Directory'"
-            />
+          />
           <div class="p-4 w-full">
             <button
               type="submit"
@@ -158,7 +167,10 @@ const redact_images = async () => {
       </div>
     </dialog>
     <ImageDataDisplay
-      v-if="useRedactionPlan.imageRedactionPlan.total && redactionStateFlags.showImageTable"
+      v-if="
+        useRedactionPlan.imageRedactionPlan.total &&
+        redactionStateFlags.showImageTable
+      "
     />
     <div v-if="redactionStateFlags.redactionComplete">
       <ImageDataDisplay />

diff --git a/client/src/api/rest.ts b/client/src/api/rest.ts
@@ -18,10 +18,7 @@ export async function getDirectoryInfo(path?: string) {
   });
 }
 
-
-export async function getRedactionPlan(
-  params: ImagePlanParams,
-) {
+export async function getRedactionPlan(params: ImagePlanParams) {
   const response = await fetch(
     `${basePath}/redaction_plan?input_directory=${params.directory}&rules_path=${params.rules}&limit=${params.limit}&offset=${params.offset}&update=${params.update}`,
     {

diff --git a/client/src/components/FileBrowser.vue b/client/src/components/FileBrowser.vue
@@ -47,16 +47,17 @@ const closeModal = () => {
 const updateSelectedDirectories = (path: string) => {
   selectedDirectories.value[props.modalId] = path;
 };
+
 const updateTableData = () => {
   redactionStateFlags.value.redactionSnackbar = false;
- useRedactionPlan.updateImageData({
-  directory: selectedDirectories.value.inputDirectory,
-  rules: selectedDirectories.value.rulesetDirectory,
-  limit: 50,
-  offset: 0,
-  update: false});
+  useRedactionPlan.updateImageData({
+    directory: selectedDirectories.value.inputDirectory,
+    rules: selectedDirectories.value.rulesetDirectory,
+    limit: 50,
+    offset: 0,
+    update: false,
+  });
 };
-
 </script>
 
 <template>
@@ -74,9 +75,7 @@ const updateTableData = () => {
               @click="
                 $emit('update-image-list'),
                   closeModal(),
-                  title !== 'Output Directory'
-                    ? updateTableData()
-                    : ''
+                  title !== 'Output Directory' ? updateTableData() : ''
               "
             >
               Select
@@ -133,34 +132,30 @@ const updateTableData = () => {
           </li>
         </ul>
         <ul class="pl-2">
-          <template
-            v-if="modalId !== 'rulesetDirectory'"
-          >
-          <li
-            v-for="child_image in directoryData.childrenImages.slice(0, 10)"
-            :key="child_image.path"
-            class="py-0.5"
-          >
-            <i class="ri-image-fill text-sky-800"></i>
-            {{ child_image.name }}
-          </li>
-          <li v-if="directoryData.childrenImages.length > 10" class="italic">
-            {{ directoryData.childrenImages.length - 10 }} More Images
-          </li>
-        </template>
-          <template
-            v-if="modalId === 'rulesetDirectory'"
-          >
-          <li
-            v-for="ruleset in directoryData.childrenYaml"
-            :key="ruleset.path"
-            class="hover:bg-base-300 cursor-default py-0.5"
-            @click="updateSelectedDirectories(ruleset.path)"
-          >
-            <i class="ri-file-text-line text-neutral"></i>
-            {{ ruleset.name }}
-          </li>
-        </template>
+          <template v-if="modalId !== 'rulesetDirectory'">
+            <li
+              v-for="child_image in directoryData.childrenImages.slice(0, 10)"
+              :key="child_image.path"
+              class="py-0.5"
+            >
+              <i class="ri-image-fill text-sky-800"></i>
+              {{ child_image.name }}
+            </li>
+            <li v-if="directoryData.childrenImages.length > 10" class="italic">
+              {{ directoryData.childrenImages.length - 10 }} More Images
+            </li>
+          </template>
+          <template v-if="modalId === 'rulesetDirectory'">
+            <li
+              v-for="ruleset in directoryData.childrenYaml"
+              :key="ruleset.path"
+              class="hover:bg-base-300 cursor-default py-0.5"
+              @click="updateSelectedDirectories(ruleset.path)"
+            >
+              <i class="ri-file-text-line text-neutral"></i>
+              {{ ruleset.name }}
+            </li>
+          </template>
         </ul>
       </div>
     </div>

diff --git a/client/src/components/ImageDataDisplay.vue b/client/src/components/ImageDataDisplay.vue
@@ -6,7 +6,6 @@ import ImageDataTable from "./ImageDataTable.vue";
 import InfiniteScroller from "./InfiniteScroller.vue";
 import { selectedDirectories } from "../store/directoryStore";
 
-
 const limit = ref(50);
 const offset = ref(1);
 
@@ -22,8 +21,8 @@ const loadImagePlan = async () => {
     rules: selectedDirectories.value.rulesetDirectory,
     limit: limit.value,
     offset: offset.value,
-    update: true,}
-  );
+    update: true,
+  });
   useRedactionPlan.imageRedactionPlan.data = {
     ...useRedactionPlan.imageRedactionPlan.data,
     ...newPlan.data,
@@ -32,7 +31,6 @@ const loadImagePlan = async () => {
   ++offset.value;
 };
 const usedColumns = computed(() => useRedactionPlan.imageRedactionPlan.tags);
-
 </script>
 
 <template>

diff --git a/client/src/components/MenuSteps.vue b/client/src/components/MenuSteps.vue
@@ -33,8 +33,8 @@ const openModal = () => {
   props.stepTitle.includes("Input")
     ? props.inputModal.modal.showModal()
     : props.stepTitle.includes("Output")
-    ? props.outputModal.modal.showModal()
-    : props.rulesetModal.modal.showModal();
+      ? props.outputModal.modal.showModal()
+      : props.rulesetModal.modal.showModal();
 };
 
 const clearRuleset = () => {
@@ -47,7 +47,6 @@ const clearRuleset = () => {
     update: false,
   });
 };
-
 </script>
 
 <template>
@@ -120,8 +119,8 @@ const clearRuleset = () => {
         v-else
         class="text-left text-gray-500 text-[14px] font-bold break-all pl-8"
       >
-        {{ rulesetModal ?  'No file selected' : 'No directory selected' }}
-             </div>
+        {{ rulesetModal ? "No file selected" : "No directory selected" }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/client/src/store/imageStore.ts b/client/src/store/imageStore.ts
@@ -6,16 +6,12 @@ import { selectedDirectories } from "./directoryStore";
 export const useRedactionPlan = reactive({
   imageRedactionPlan: {} as imagePlanResponse,
   currentDirectory: selectedDirectories.value.inputDirectory,
-  async updateImageData(
-   params: ImagePlanParams,
-  ) {
+  async updateImageData(params: ImagePlanParams) {
     this.currentDirectory = params.directory;
-    this.imageRedactionPlan = await getRedactionPlan(
-      params
-    );
+    this.imageRedactionPlan = await getRedactionPlan(params);
     this.getThumbnail(this.imageRedactionPlan.data);
   },
-  async getThumbnail(imagedict: Record<string, Record<string, string>>){
+  async getThumbnail(imagedict: Record<string, Record<string, string>>) {
     Object.keys(imagedict).forEach(async (image) => {
       const response = await getImages(
         this.currentDirectory + "/" + image,
@@ -39,7 +35,6 @@ export const useRedactionPlan = reactive({
         const url = URL.createObjectURL(blob);
         this.imageRedactionPlan.data[image].thumbnail = url;
       }
-
     });
   },
 

diff --git a/client/src/store/redactionStore.ts b/client/src/store/redactionStore.ts
@@ -1,8 +1,8 @@
-import {ref, Ref} from "vue";
+import { ref, Ref } from "vue";
 
 export const redactionStateFlags: Ref<Record<string, boolean>> = ref({
-   redacting: false,
-   redactionComplete: false,
-   showImageTable: false,
-   redactionSnackbar: false,
-})
+  redacting: false,
+  redactionComplete: false,
+  showImageTable: false,
+  redactionSnackbar: false,
+});
diff --git a/client/src/store/types.ts b/client/src/store/types.ts
@@ -6,7 +6,6 @@ export type DirectoryData = {
   childrenYaml: Path[];
 };
 
-
 export interface ImagePlanParams {
   directory: string;
   rules?: string;