Please CI complain.

frontend/src/components/DragToStartProjectComponent.vue

@@ -9,7 +9,7 @@ import DragToStartField from '@/components/DragToStartField.vue'
 import { type Project } from '@/constants'
 import type { User } from '@/constants'
 import { useAppStore, useProjectIdStore, useInitialFilesStore } from '@/stores/stores'
-import { createNewProject } from '@/utils';
+import { createNewProject } from '@/utils'
 
 const storeProjectId = useProjectIdStore()
 const storeApp = useAppStore()
@@ -28,7 +28,7 @@ async function createUserAndProject(): Promise<[User | null, Project | null]> {
     return [user, project]
   }
 
-  project = await createNewProject("First Project")
+  project = await createNewProject('First Project')
 
   return [user, project]
 }

frontend/src/components/ProjectColumnComponent.vue

@@ -1,12 +1,24 @@
 <template>
-  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center" :class="{ 'active': isActive }"
-    @click.prevent="setupProject" @dblclick.prevent="enableEditMode" @mouseover.native="isHover = true"
-    @mouseleave.native="isHover = false">
-    <div class="d-flex align-items-center ">
+  <div
+    class="px-2 py-2 my-2 d-flex justify-content-between align-items-center"
+    :class="{ active: isActive }"
+    @click.prevent="setupProject"
+    @dblclick.prevent="enableEditMode"
+    @mouseover="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <div class="d-flex align-items-center">
       <div v-if="!isEditMode" class="text-light fs-4 pe-1 me-1">
         <font-awesome-icon :icon="['fa', 'file']" />
       </div>
-      <input ref="inputElement" v-else type="text" class="form-control" v-model="projectName" @blur="disableEditMode">
+      <input
+        ref="inputElement"
+        v-else
+        type="text"
+        class="form-control"
+        v-model="projectName"
+        @blur="disableEditMode"
+      />
       <div v-if="!isEditMode" class="fw-semibold text-light">
         {{ projectName }}
       </div>
@@ -21,15 +33,17 @@
 </template>
 
 <script setup lang="ts">
-import type { Project } from '@/constants';
-import { useAppStore, useProjectIdStore } from '@/stores/stores';
-import moment from 'moment';
-import { computed, ref, watch, type Ref } from 'vue';
+import type { Project } from '@/constants'
+import { useAppStore, useProjectIdStore } from '@/stores/stores'
+import moment from 'moment'
+import { computed, ref, watch, type Ref } from 'vue'
 
 const props = defineProps<{ project: Project }>()
 const emit = defineEmits<{ deleteProject: [Project] }>()
 
-const leftDays = computed(() => props.project.expire_on ? `Expire ${moment.utc(props.project.expire_on).fromNow()}` : '')
+const leftDays = computed(() =>
+  props.project.expire_on ? `Expire ${moment.utc(props.project.expire_on).fromNow()}` : ''
+)
 const storeProjectId = useProjectIdStore()
 const isActive = computed(() => storeProjectId.projectId == props.project.id)
 const isEditMode = ref(false)
@@ -60,10 +74,7 @@ async function updateProjectName(projectId: string, newName: string) {
     name: newName
   }
   try {
-    await storeApp.axiosInstance.patch<Project>(
-      `/projects/${projectId}`,
-      projectRequestData
-    )
+    await storeApp.axiosInstance.patch<Project>(`/projects/${projectId}`, projectRequestData)
   } catch (error: any) {
     console.log('Unable to update project name.', error, projectId)
     storeApp.alertsError(`Unable to update project name, project id: ${projectId}`)

frontend/src/components/SideBarComponent.vue

@@ -1,14 +1,22 @@
 <template>
-  <div class="d-flex flex-column" style="height: 100%;">
-    <div class="d-flex justify-content-between mt-2 border-bottom border-2 border-white ">
+  <div class="d-flex flex-column" style="height: 100%">
+    <div class="d-flex justify-content-between mt-2 border-bottom border-2 border-white">
       <div class="fw-bold fs-4 text-light">Collection:</div>
-      <button type="button" class="btn fw-bold fs-5 text-light p-1" @click.prevent="createAndUpdateProject">
+      <button
+        type="button"
+        class="btn fw-bold fs-5 text-light p-1"
+        @click.prevent="createAndUpdateProject"
+      >
         <font-awesome-icon :icon="['fas', 'plus']" />
       </button>
     </div>
     <div class="flex-grow-1 py-2 overflow-x-auto">
-      <ProjectColumnComponent v-for="project in projects" :key="project.id" :project="project"
-        @delete-project="deleteProject" />
+      <ProjectColumnComponent
+        v-for="project in projects"
+        :key="project.id"
+        :project="project"
+        @delete-project="deleteProject"
+      />
     </div>
     <div class="border-top border-2 border-white py-2">
       <p class="text-light">FAQ</p>
@@ -18,32 +26,32 @@
 </template>
 
 <script setup lang="ts">
-import ProjectColumnComponent from './ProjectColumnComponent.vue';
-import type { Project } from '@/constants';
-import { useAppStore } from '@/stores/stores';
-import { createNewProject } from '@/utils';
-import { ref, type Ref } from 'vue';
+import ProjectColumnComponent from './ProjectColumnComponent.vue'
+import type { Project } from '@/constants'
+import { useAppStore } from '@/stores/stores'
+import { createNewProject } from '@/utils'
+import { ref, type Ref } from 'vue'
 const storeApp = useAppStore()
 const projects: Ref<Project[]> = ref([])
 
 await updateProjects()
 
 async function updateProjects() {
   try {
-    const response = await storeApp.axiosInstance.get<Project[]>("/projects")
+    const response = await storeApp.axiosInstance.get<Project[]>('/projects')
     projects.value = response.data
   } catch (error: any) {
-    console.log("Unable to retrieve projects info", error)
-    storeApp.alertsError("Unable to retrieve projects info")
+    console.log('Unable to retrieve projects info', error)
+    storeApp.alertsError('Unable to retrieve projects info')
   }
 }
 
 async function createAndUpdateProject() {
-  await createNewProject("New Project")
+  await createNewProject('New Project')
   await updateProjects()
 }
 
 function deleteProject(project: Project) {
-  projects.value = projects.value.filter(element => element.id != project.id)
+  projects.value = projects.value.filter((element) => element.id != project.id)
 }
 </script>

frontend/src/constants.ts

@@ -87,4 +87,3 @@ export type CompareFunctionType = (
   a: [string, ClientVisibleFile],
   b: [string, ClientVisibleFile]
 ) => number
-

frontend/src/main.ts

@@ -16,7 +16,7 @@ import {
   faAngleDown,
   faCheck,
   faSort,
-  faFile,
+  faFile
 } from '@fortawesome/free-solid-svg-icons'
 
 /* add icons to the library */

frontend/src/utils.ts

@@ -41,7 +41,7 @@ export async function createNewProject(name: string): Promise<Project | null> {
       projectRequestData
     )
     return createProjectResponse.data
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.log('Unable to create a new project.', error)
     storeApp.alertsError('Unable to create a new project.')
     return null

frontend/src/views/CollectionView.vue

@@ -17,9 +17,9 @@
 <script setup lang="ts">
 import SideBarComponent from '@/components/SideBarComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
-import ProjectView from './ProjectView.vue';
-import { useProjectIdStore } from '@/stores/stores';
-import { computed } from 'vue';
+import ProjectView from './ProjectView.vue'
+import { useProjectIdStore } from '@/stores/stores'
+import { computed } from 'vue'
 const storeProjectId = useProjectIdStore()
 const hasActivatedProject = computed(() => storeProjectId.projectId != null)
 </script>
@@ -39,7 +39,6 @@ const hasActivatedProject = computed(() => storeProjectId.projectId != null)
 }
 
 .content {
-
   min-height: 100vh;
 }
 </style>

frontend/src/views/ProjectView.vue

@@ -1,7 +1,13 @@
 <template>
-  <div class="card m-5" :class="{ border: isActive, 'border-3': isActive, 'drag-active': isActive }">
+  <div
+    class="card m-5"
+    :class="{ border: isActive, 'border-3': isActive, 'drag-active': isActive }"
+  >
     <div class="card-body">
-      <div class="card-title d-flex justify-content-between align-items-baseline" :class="{ 'border-bottom': isShowed }">
+      <div
+        class="card-title d-flex justify-content-between align-items-baseline"
+        :class="{ 'border-bottom': isShowed }"
+      >
         <h4>
           <button type="button" class="btn text-secondary" @click.prevent="isShowed = !isShowed">
             <font-awesome-icon v-if="isShowed" :icon="['fas', 'minus']" />
@@ -15,39 +21,77 @@
           {{ humanifyFileSize(storeApp.constants.env.NAUTILUS_PROJECT_QUOTA) }}
         </div>
       </div>
-      <UploadFilesComponent @drop-files-handler="dropFilesHandler" @update-is-active="updateIsActive" v-show="isShowed">
+      <UploadFilesComponent
+        @drop-files-handler="dropFilesHandler"
+        @update-is-active="updateIsActive"
+        v-show="isShowed"
+      >
         <div>
           <div class="d-flex flex-row-reverse">
             <div class="btn-group btn-group-sm custom-btn-outline-primary" role="group">
-              <input type="radio" class="btn-check" name="btnradio" id="edit" autocomplete="off"
-                @change="isEditMode = true" :checked="isEditMode" />
+              <input
+                type="radio"
+                class="btn-check"
+                name="btnradio"
+                id="edit"
+                autocomplete="off"
+                @change="isEditMode = true"
+                :checked="isEditMode"
+              />
               <label class="btn btn-outline-primary" for="edit">Edit</label>
 
-              <input type="radio" class="btn-check" name="btnradio" id="upload" autocomplete="off"
-                @change="isEditMode = false" :checked="!isEditMode" />
+              <input
+                type="radio"
+                class="btn-check"
+                name="btnradio"
+                id="upload"
+                autocomplete="off"
+                @change="isEditMode = false"
+                :checked="!isEditMode"
+              />
               <label class="btn btn-outline-primary" for="upload">Upload</label>
             </div>
           </div>
           <table class="table">
             <thead>
-              <FileTableHeaderComponent :selected-files="selectedFiles" :files="files"
-                @update-select-files="updateSelectFiles" @delete-selected-files="deleteSelectedFiles"
-                @update-compare-function="updateCompareFunction" />
+              <FileTableHeaderComponent
+                :selected-files="selectedFiles"
+                :files="files"
+                @update-select-files="updateSelectFiles"
+                @delete-selected-files="deleteSelectedFiles"
+                @update-compare-function="updateCompareFunction"
+              />
             </thead>
             <tbody>
-              <FileTableRowComponent v-for="[key, file] in sortedFiles" :key="key" :render-key="key"
-                :client-visible-file="file" :is-selected="selectedFiles.has(key)" :show-edit-button="isEditMode"
-                @toggle-select-file="toggleSelectFile" @delete-file="deleteSingleFile" />
+              <FileTableRowComponent
+                v-for="[key, file] in sortedFiles"
+                :key="key"
+                :render-key="key"
+                :client-visible-file="file"
+                :is-selected="selectedFiles.has(key)"
+                :show-edit-button="isEditMode"
+                @toggle-select-file="toggleSelectFile"
+                @delete-file="deleteSingleFile"
+              />
             </tbody>
           </table>
-          <div class="drag-field d-flex justify-content-center align-items-center" v-if="files.size <= 10">
+          <div
+            class="drag-field d-flex justify-content-center align-items-center"
+            v-if="files.size <= 10"
+          >
             <h4 style="color: var(--main-color); opacity: 0.6">Drag Files to here</h4>
           </div>
         </div>
       </UploadFilesComponent>
     </div>
-    <ModalComponent title="Are you sure you want to delete:" primary-button-title="Delete" secondary-button-title="Close"
-      @click-primary-button="deleteFiles" @click-secondary-button="toBeDeletedFiles.clear()" ref="deletionModal">
+    <ModalComponent
+      title="Are you sure you want to delete:"
+      primary-button-title="Delete"
+      secondary-button-title="Close"
+      @click-primary-button="deleteFiles"
+      @click-secondary-button="toBeDeletedFiles.clear()"
+      ref="deletionModal"
+    >
       <ul>
         <li v-for="[key, file] in toBeDeletedFiles" :key="key">
           {{ file.filename }}

frontend/src/views/StartView.vue

@@ -50,7 +50,7 @@ if (
 ) {
   setupProjectId()
   if (await validateUser()) {
-    router.push("/collection")
+    router.push('/collection')
   }
 }
 </script>