From 29520d8586669d0a53e78837e83f125f0588c725 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Wed, 16 Aug 2023 12:18:06 -0400
Subject: [PATCH 01/34] Add Sidebar Template.

---
 frontend/src/App.vue                         | 12 ++----
 frontend/src/components/SideBarComponent.vue | 20 ++++++++++
 frontend/src/router/index.ts                 |  6 +++
 frontend/src/views/CollectionView.vue        | 41 ++++++++++++++++++++
 frontend/src/views/StartView.vue             | 12 +++++-
 5 files changed, 80 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/SideBarComponent.vue
 create mode 100644 frontend/src/views/CollectionView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cea4a3a3..cf616d33 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,18 +1,12 @@
 <template>
-  <div class="d-flex flex-column vh-100" v-if="isReady">
-    <div class="flex-shrink-1">
-      <Suspense>
-        <RouterView />
-      </Suspense>
-    </div>
-    <FooterComponent />
-  </div>
+  <Suspense v-if="isReady">
+    <RouterView />
+  </Suspense>
   <AlertsComponentVue />
 </template>
 
 <script setup lang="ts">
 import AlertsComponentVue from './components/AlertsComponent.vue'
-import FooterComponent from './components/FooterComponent.vue'
 import { onMounted, ref } from 'vue'
 import { useAppStore } from './stores/stores'
 
diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
new file mode 100644
index 00000000..6582a66f
--- /dev/null
+++ b/frontend/src/components/SideBarComponent.vue
@@ -0,0 +1,20 @@
+<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="fw-bold fs-4 text-light">Collection:</div>
+      <button type="button" class="btn fw-bold fs-5 text-light p-1">
+        <font-awesome-icon :icon="['fas', 'plus']" />
+      </button>
+    </div>
+    <div class="flex-grow-1 py-2">
+      Holder
+    </div>
+    <div class="border-top border-2 border-white py-2">
+      <p class="text-light">FAQ</p>
+      <p class="text-light">Contact</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index f3327893..aac4af88 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,6 +1,7 @@
 import PrivacyAndCookieStatement from '@/views/PrivacyAndCookieStatement.vue'
 import StartView from '@/views/StartView.vue'
 import TermsOfService from '@/views/TermsOfService.vue'
+import CollectionView from '@/views/CollectionView.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,6 +11,11 @@ const router = createRouter({
       name: 'start',
       component: StartView
     },
+    {
+      path: '/test',
+      name: 'test',
+      component: CollectionView
+    },
     {
       path: '/privacy-and-cookie-statement',
       name: 'PrivacyCookieStatement',
diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionView.vue
new file mode 100644
index 00000000..046c5c2a
--- /dev/null
+++ b/frontend/src/views/CollectionView.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="container-fluid vh-100">
+    <div class="row">
+      <div class="col sticky-top test">
+        <SideBarComponent />
+      </div>
+      <div class="col col-10 content d-flex flex-column justify-content-between">
+        <div>
+          <ProjectView />
+        </div>
+        <FooterComponent />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SideBarComponent from '@/components/SideBarComponent.vue'
+import FooterComponent from '@/components/FooterComponent.vue'
+import ProjectView from './ProjectView.vue';
+</script>
+
+<style scoped>
+.collection-container {
+  height: 100vh;
+}
+
+.test {
+  background-color: orange;
+  height: 100vh;
+}
+
+.test2 {
+  min-height: 100vh;
+}
+
+.content {
+
+  min-height: 100vh;
+}
+</style>
diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index cbf3331a..8ea851b5 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -1,9 +1,17 @@
 <template>
-  <ProjectView v-if="isVaildProjectID" />
-  <HomeView v-else />
+  <div class="d-flex flex-column vh-100">
+    <div class="flex-shrink-1">
+      <Suspense>
+        <ProjectView v-if="isVaildProjectID" />
+        <HomeView v-else />
+      </Suspense>
+    </div>
+    <FooterComponent />
+  </div>
 </template>
 
 <script setup lang="ts">
+import FooterComponent from '@/components/FooterComponent.vue'
 import ProjectView from '@/views/ProjectView.vue'
 import HomeView from '@/views/HomeView.vue'
 import { type Project } from '@/constants'

From f5a9d988453dfb4d6ba35f29c2197a7541cd6460 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Wed, 16 Aug 2023 15:02:14 -0400
Subject: [PATCH 02/34] Add the Basic Sidebar.

---
 .../DragToStartProjectComponent.vue           | 15 ++--------
 .../src/components/ProjectColumnComponent.vue | 29 ++++++++++++++++++
 frontend/src/components/SideBarComponent.vue  | 30 +++++++++++++++++--
 frontend/src/constants.ts                     |  1 +
 frontend/src/main.ts                          |  5 ++--
 frontend/src/utils.ts                         | 18 +++++++++++
 frontend/src/views/CollectionView.vue         |  4 +--
 7 files changed, 82 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/ProjectColumnComponent.vue

diff --git a/frontend/src/components/DragToStartProjectComponent.vue b/frontend/src/components/DragToStartProjectComponent.vue
index 36cf1dd4..71617caf 100644
--- a/frontend/src/components/DragToStartProjectComponent.vue
+++ b/frontend/src/components/DragToStartProjectComponent.vue
@@ -9,15 +9,13 @@ 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';
 
 const storeProjectId = useProjectIdStore()
 const storeApp = useAppStore()
 const storeInitialFiles = useInitialFilesStore()
 
 async function createUserAndProject(): Promise<[User | null, Project | null]> {
-  const projectRequestData = {
-    name: 'First Project'
-  }
   var user: User | null = null
   var project: Project | null = null
 
@@ -30,16 +28,7 @@ async function createUserAndProject(): Promise<[User | null, Project | null]> {
     return [user, project]
   }
 
-  try {
-    const createProjectResponse = await storeApp.axiosInstance.post<Project>(
-      '/projects',
-      projectRequestData
-    )
-    project = createProjectResponse.data
-  } catch (error: any) {
-    console.log('Unable to create a new project.', error)
-    storeApp.alertsError('Unable to create a new project.')
-  }
+  project = await createNewProject("First Project")
 
   return [user, project]
 }
diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
new file mode 100644
index 00000000..f1a11b16
--- /dev/null
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center border">
+    <div class="d-flex align-items-center ">
+      <div class="text-light fs-4 pe-1 me-1">
+        <font-awesome-icon :icon="['fa', 'file']" />
+      </div>
+      <div class="fw-semibold text-light">
+        {{ props.project.name }}
+      </div>
+    </div>
+    <div class="expire text-white-50">
+      {{ leftDays }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '@/constants';
+import moment from 'moment';
+import { computed } from 'vue';
+const props = defineProps<{ project: Project }>()
+const leftDays = computed(() => props.project.expire_on ? `Expire ${moment.utc(props.project.expire_on).fromNow()}` : '') 
+</script>
+
+<style scoped>
+.expire {
+  font-size: 0.8em;
+}
+</style>
diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
index 6582a66f..f739e73d 100644
--- a/frontend/src/components/SideBarComponent.vue
+++ b/frontend/src/components/SideBarComponent.vue
@@ -2,12 +2,12 @@
   <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">
+      <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">
-      Holder
+    <div class="flex-grow-1 py-2 overflow-x-auto">
+      <ProjectColumnComponent v-for="project in projects" :key="project.id" :project="project" />
     </div>
     <div class="border-top border-2 border-white py-2">
       <p class="text-light">FAQ</p>
@@ -17,4 +17,28 @@
 </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';
+const storeApp = useAppStore()
+const projects: Ref<Project[]> = ref([])
+
+await updateProjects()
+
+async function updateProjects() {
+  try {
+    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")
+  }
+}
+
+async function createAndUpdateProject() {
+  await createNewProject("New Project")
+  await updateProjects()
+}
 </script>
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 8ed92106..00f40eeb 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -87,3 +87,4 @@ export type CompareFunctionType = (
   a: [string, ClientVisibleFile],
   b: [string, ClientVisibleFile]
 ) => number
+
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 51d33ebf..9fd579ec 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -15,11 +15,12 @@ import {
   faFilePen,
   faAngleDown,
   faCheck,
-  faSort
+  faSort,
+  faFile,
 } from '@fortawesome/free-solid-svg-icons'
 
 /* add icons to the library */
-library.add(faPlus, faMinus, faXmark, faTrash, faFilePen, faAngleDown, faCheck, faSort)
+library.add(faPlus, faMinus, faXmark, faTrash, faFilePen, faAngleDown, faCheck, faSort, faFile)
 
 import App from './App.vue'
 import router from './router'
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index 9a42b041..f30f150d 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -29,3 +29,21 @@ export async function validateUser() {
   }
   return result
 }
+
+export async function createNewProject(name: string): Promise<Project | null> {
+  const storeApp = useAppStore()
+  const projectRequestData = {
+    name: name
+  }
+  try {
+    const createProjectResponse = await storeApp.axiosInstance.post<Project>(
+      '/projects',
+      projectRequestData
+    )
+    return createProjectResponse.data
+  } catch (error: any) {
+    console.log('Unable to create a new project.', error)
+    storeApp.alertsError('Unable to create a new project.')
+    return null
+  }
+}
diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionView.vue
index 046c5c2a..33780903 100644
--- a/frontend/src/views/CollectionView.vue
+++ b/frontend/src/views/CollectionView.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="container-fluid vh-100">
     <div class="row">
-      <div class="col sticky-top test">
+      <div class="col col-3 sticky-top test">
         <SideBarComponent />
       </div>
-      <div class="col col-10 content d-flex flex-column justify-content-between">
+      <div class="col content d-flex flex-column justify-content-between">
         <div>
           <ProjectView />
         </div>

From a842249b09f4d832d4b650a9804ffb5498c6d756 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Thu, 17 Aug 2023 09:47:14 -0400
Subject: [PATCH 03/34] Add Project Selection Function.

---
 .../src/components/ProjectColumnComponent.vue | 16 +++-
 frontend/src/views/CollectionView.vue         |  2 +-
 frontend/src/views/ProjectView.vue            | 87 ++++++-------------
 3 files changed, 41 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index f1a11b16..30b1a8e1 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center border">
+  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center border" :class="{ 'active': isActive }"
+    @click.prevent="setupProject()">
     <div class="d-flex align-items-center ">
       <div class="text-light fs-4 pe-1 me-1">
         <font-awesome-icon :icon="['fa', 'file']" />
@@ -16,14 +17,25 @@
 
 <script setup lang="ts">
 import type { Project } from '@/constants';
+import { useProjectIdStore } from '@/stores/stores';
 import moment from 'moment';
 import { computed } from 'vue';
 const props = defineProps<{ project: 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)
+
+function setupProject() {
+  storeProjectId.setProjectId(props.project.id)
+}
 </script>
 
 <style scoped>
 .expire {
   font-size: 0.8em;
 }
+
+.active {
+  background-color: orange;
+}
 </style>
diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionView.vue
index 33780903..c67f168a 100644
--- a/frontend/src/views/CollectionView.vue
+++ b/frontend/src/views/CollectionView.vue
@@ -26,7 +26,7 @@ import ProjectView from './ProjectView.vue';
 }
 
 .test {
-  background-color: orange;
+  background-color: var(--main-color);
   height: 100vh;
 }
 
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 810d1840..058f43ba 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -1,13 +1,7 @@
 <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']" />
@@ -21,77 +15,39 @@
           {{ 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 }}
@@ -114,13 +70,15 @@ import {
 } from '@/constants'
 import { useAppStore, useProjectIdStore, useInitialFilesStore } from '@/stores/stores'
 import axios from 'axios'
-import { ref, type Ref, computed } from 'vue'
+import { ref, type Ref, computed, watch } from 'vue'
+import { storeToRefs } from 'pinia'
 
 const isActive = ref(false)
 const isEditMode = ref(false)
 const isShowed = ref(true)
 const storeApp = useAppStore()
 const storeProjectId = useProjectIdStore()
+const { projectId } = storeToRefs(storeProjectId)
 const storeInitialFileStore = useInitialFilesStore()
 const files: Ref<Map<string, ClientVisibleFile>> = ref(new Map())
 const selectedFiles: Ref<Map<string, boolean>> = ref(new Map())
@@ -136,6 +94,13 @@ const sortedFiles: Ref<Map<string, ClientVisibleFile>> = computed(() =>
   sortFiles(files.value, compareFunction.value)
 )
 
+watch(projectId, async () => {
+  files.value.clear()
+  const apiFiles = await getAllFiles(storeProjectId.projectId)
+  apiFiles.forEach((item) => files.value.set(item.id, { file: item, uploadedSize: item.filesize }))
+  console.log("HHHHH")
+})
+
 if (storeInitialFileStore.initialFiles.length == 0) {
   const apiFiles = await getAllFiles(storeProjectId.projectId)
   apiFiles.forEach((item) => files.value.set(item.id, { file: item, uploadedSize: item.filesize }))

From 66aca5818dd0b80e1d9087217ec080be1bce3be3 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Thu, 17 Aug 2023 10:28:31 -0400
Subject: [PATCH 04/34] Add changing project name function.

---
 .../src/components/ProjectColumnComponent.vue | 45 ++++++++++++++++---
 frontend/src/views/ProjectView.vue            |  1 -
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 30b1a8e1..babe9bf3 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center border" :class="{ 'active': isActive }"
-    @click.prevent="setupProject()">
+    @click.prevent="setupProject" @dblclick.prevent="enableEditMode">
     <div class="d-flex align-items-center ">
-      <div class="text-light fs-4 pe-1 me-1">
+      <div v-if="!isEditMode" class="text-light fs-4 pe-1 me-1">
         <font-awesome-icon :icon="['fa', 'file']" />
       </div>
-      <div class="fw-semibold text-light">
-        {{ props.project.name }}
+      <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>
     </div>
     <div class="expire text-white-50">
@@ -17,17 +18,49 @@
 
 <script setup lang="ts">
 import type { Project } from '@/constants';
-import { useProjectIdStore } from '@/stores/stores';
+import { useAppStore, useProjectIdStore } from '@/stores/stores';
 import moment from 'moment';
-import { computed } from 'vue';
+import { computed, ref, watch, type Ref } from 'vue';
 const props = defineProps<{ project: Project }>()
 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)
+const projectName = ref(props.project.name)
+const inputElement: Ref<HTMLInputElement | null> = ref(null)
+const storeApp = useAppStore()
+
+watch(inputElement, (newElement) => {
+  newElement?.focus()
+})
 
 function setupProject() {
   storeProjectId.setProjectId(props.project.id)
 }
+
+function enableEditMode() {
+  isEditMode.value = true
+}
+
+async function disableEditMode() {
+  isEditMode.value = false
+  await updateProjectName(props.project.id, projectName.value)
+}
+
+async function updateProjectName(projectId: string, newName: string) {
+  const projectRequestData = {
+    name: newName
+  }
+  try {
+    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}`)
+  }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 058f43ba..1dc653b5 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -98,7 +98,6 @@ watch(projectId, async () => {
   files.value.clear()
   const apiFiles = await getAllFiles(storeProjectId.projectId)
   apiFiles.forEach((item) => files.value.set(item.id, { file: item, uploadedSize: item.filesize }))
-  console.log("HHHHH")
 })
 
 if (storeInitialFileStore.initialFiles.length == 0) {

From 8b256a34badc9607e459fe58a6129bd281ba8b38 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Thu, 17 Aug 2023 10:57:42 -0400
Subject: [PATCH 05/34] Add deleting project function.

---
 .../src/components/ProjectColumnComponent.vue | 23 +++++++++++++++++--
 frontend/src/components/SideBarComponent.vue  |  7 +++++-
 frontend/src/views/CollectionView.vue         |  6 ++++-
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index babe9bf3..89d14dd2 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center border" :class="{ 'active': isActive }"
-    @click.prevent="setupProject" @dblclick.prevent="enableEditMode">
+    @click.prevent="setupProject" @dblclick.prevent="enableEditMode" @mouseover.native="isHover = true"
+    @mouseleave.native="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']" />
@@ -10,9 +11,12 @@
         {{ projectName }}
       </div>
     </div>
-    <div class="expire text-white-50">
+    <div v-if="!isHover" class="expire text-white-50">
       {{ leftDays }}
     </div>
+    <button v-else type="button" class="btn text-light" @click.stop="deleteProject">
+      <font-awesome-icon :icon="['fas', 'trash']" />
+    </button>
   </div>
 </template>
 
@@ -21,11 +25,15 @@ 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 storeProjectId = useProjectIdStore()
 const isActive = computed(() => storeProjectId.projectId == props.project.id)
 const isEditMode = ref(false)
+const isHover = ref(false)
 const projectName = ref(props.project.name)
 const inputElement: Ref<HTMLInputElement | null> = ref(null)
 const storeApp = useAppStore()
@@ -61,6 +69,17 @@ async function updateProjectName(projectId: string, newName: string) {
     storeApp.alertsError(`Unable to update project name, project id: ${projectId}`)
   }
 }
+
+async function deleteProject() {
+  try {
+    await storeApp.axiosInstance.delete(`/projects/${props.project.id}`)
+    storeProjectId.clearProjectId()
+    emit('deleteProject', props.project)
+  } catch (error: any) {
+    console.log('Unable to delete project.', error, props.project.id)
+    storeApp.alertsError(`Unable to delete project, project id: ${props.project.id}`)
+  }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
index f739e73d..c1136706 100644
--- a/frontend/src/components/SideBarComponent.vue
+++ b/frontend/src/components/SideBarComponent.vue
@@ -7,7 +7,8 @@
       </button>
     </div>
     <div class="flex-grow-1 py-2 overflow-x-auto">
-      <ProjectColumnComponent v-for="project in projects" :key="project.id" :project="project" />
+      <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>
@@ -41,4 +42,8 @@ async function createAndUpdateProject() {
   await createNewProject("New Project")
   await updateProjects()
 }
+
+function deleteProject(project: Project) {
+  projects.value = projects.value.filter(element => element.id != project.id)
+}
 </script>
diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionView.vue
index c67f168a..67a6a9e1 100644
--- a/frontend/src/views/CollectionView.vue
+++ b/frontend/src/views/CollectionView.vue
@@ -6,7 +6,7 @@
       </div>
       <div class="col content d-flex flex-column justify-content-between">
         <div>
-          <ProjectView />
+          <ProjectView v-if="hasActivatedProject" />
         </div>
         <FooterComponent />
       </div>
@@ -18,6 +18,10 @@
 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';
+const storeProjectId = useProjectIdStore()
+const hasActivatedProject = computed(() => storeProjectId.projectId != null)
 </script>
 
 <style scoped>

From cbc8819f554b34b125f9af9b04fc1a7917ff2051 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Thu, 17 Aug 2023 11:04:42 -0400
Subject: [PATCH 06/34] Add Redirect.

---
 frontend/src/router/index.ts     | 4 ++--
 frontend/src/views/StartView.vue | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index aac4af88..02d604b9 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -12,8 +12,8 @@ const router = createRouter({
       component: StartView
     },
     {
-      path: '/test',
-      name: 'test',
+      path: '/collection',
+      name: 'collection',
       component: CollectionView
     },
     {
diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index 8ea851b5..a5aa4ec1 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -20,6 +20,7 @@ import { useAppStore, useProjectIdStore } from '@/stores/stores'
 import { validProjectID } from '@/utils'
 import { validateUser } from '@/utils'
 import { storeToRefs } from 'pinia'
+import router from '@/router'
 
 const storeProjectId = useProjectIdStore()
 const { projectId } = storeToRefs(storeProjectId)
@@ -48,5 +49,8 @@ if (
   (await validateUser())
 ) {
   setupProjectId()
+  if (await validateUser()) {
+    router.push("/collection")
+  }
 }
 </script>

From 14423a9b15d2d5a75732f382c96583d9af815cd7 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Thu, 17 Aug 2023 11:07:47 -0400
Subject: [PATCH 07/34] Remove border.

---
 frontend/src/components/ProjectColumnComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 89d14dd2..cfd58bbb 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center border" :class="{ 'active': isActive }"
+  <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 ">
@@ -73,7 +73,7 @@ async function updateProjectName(projectId: string, newName: string) {
 async function deleteProject() {
   try {
     await storeApp.axiosInstance.delete(`/projects/${props.project.id}`)
-    storeProjectId.clearProjectId()
+    storeProjectId.clearProjectId()``
     emit('deleteProject', props.project)
   } catch (error: any) {
     console.log('Unable to delete project.', error, props.project.id)

From f0add15645314e099b426f373d5a57af2f77b311 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Thu, 17 Aug 2023 11:12:47 -0400
Subject: [PATCH 08/34] Fix the double deletion bug.

---
 frontend/src/components/ProjectColumnComponent.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index cfd58bbb..eb8dbb40 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -71,10 +71,13 @@ async function updateProjectName(projectId: string, newName: string) {
 }
 
 async function deleteProject() {
+  const toBeDeletedProject = props.project
+  if (isActive.value) {
+    storeProjectId.clearProjectId()
+  }
+  emit('deleteProject', toBeDeletedProject)
   try {
-    await storeApp.axiosInstance.delete(`/projects/${props.project.id}`)
-    storeProjectId.clearProjectId()``
-    emit('deleteProject', props.project)
+    await storeApp.axiosInstance.delete(`/projects/${toBeDeletedProject.id}`)
   } catch (error: any) {
     console.log('Unable to delete project.', error, props.project.id)
     storeApp.alertsError(`Unable to delete project, project id: ${props.project.id}`)

From 95f5ec0ab3ef8119a8136b248e9e5cbb43c85f83 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Thu, 17 Aug 2023 11:22:59 -0400
Subject: [PATCH 09/34] Please CI complain.

---
 .../DragToStartProjectComponent.vue           |  4 +-
 .../src/components/ProjectColumnComponent.vue | 39 ++++++----
 frontend/src/components/SideBarComponent.vue  | 38 ++++++----
 frontend/src/constants.ts                     |  1 -
 frontend/src/main.ts                          |  2 +-
 frontend/src/utils.ts                         |  2 +-
 frontend/src/views/CollectionView.vue         |  7 +-
 frontend/src/views/ProjectView.vue            | 76 +++++++++++++++----
 frontend/src/views/StartView.vue              |  2 +-
 9 files changed, 116 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/DragToStartProjectComponent.vue b/frontend/src/components/DragToStartProjectComponent.vue
index 71617caf..6a00a801 100644
--- a/frontend/src/components/DragToStartProjectComponent.vue
+++ b/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]
 }
diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index eb8dbb40..0e73484f 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/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}`)
diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
index c1136706..b7e6367e 100644
--- a/frontend/src/components/SideBarComponent.vue
+++ b/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,11 +26,11 @@
 </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([])
 
@@ -30,20 +38,20 @@ 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>
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 00f40eeb..8ed92106 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -87,4 +87,3 @@ export type CompareFunctionType = (
   a: [string, ClientVisibleFile],
   b: [string, ClientVisibleFile]
 ) => number
-
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9fd579ec..3afd3ff7 100644
--- a/frontend/src/main.ts
+++ b/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 */
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index f30f150d..94692df4 100644
--- a/frontend/src/utils.ts
+++ b/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
diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionView.vue
index 67a6a9e1..573c241f 100644
--- a/frontend/src/views/CollectionView.vue
+++ b/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>
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 1dc653b5..89cb55e4 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/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 }}
diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index a5aa4ec1..c26329fd 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -50,7 +50,7 @@ if (
 ) {
   setupProjectId()
   if (await validateUser()) {
-    router.push("/collection")
+    router.push('/collection')
   }
 }
 </script>

From f5fd50efd5d58f68abd0775af9948aa499cb50c2 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Thu, 17 Aug 2023 11:42:21 -0400
Subject: [PATCH 10/34] Rname css class name.

---
 frontend/src/views/CollectionView.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionView.vue
index 573c241f..43c20b57 100644
--- a/frontend/src/views/CollectionView.vue
+++ b/frontend/src/views/CollectionView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container-fluid vh-100">
     <div class="row">
-      <div class="col col-3 sticky-top test">
+      <div class="col col-3 sticky-top sidebar">
         <SideBarComponent />
       </div>
       <div class="col content d-flex flex-column justify-content-between">
@@ -29,15 +29,11 @@ const hasActivatedProject = computed(() => storeProjectId.projectId != null)
   height: 100vh;
 }
 
-.test {
+.sidebar {
   background-color: var(--main-color);
   height: 100vh;
 }
 
-.test2 {
-  min-height: 100vh;
-}
-
 .content {
   min-height: 100vh;
 }

From f8bc64a5dc079cf10d18cba56518c74c8a29d306 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 09:01:37 -0400
Subject: [PATCH 11/34] Fix typos and name issues.

---
 frontend/src/components/SideBarComponent.vue              | 4 ++--
 frontend/src/router/index.ts                              | 8 ++++----
 .../src/views/{CollectionView.vue => CollectionsView.vue} | 4 ++--
 frontend/src/views/StartView.vue                          | 6 +++---
 4 files changed, 11 insertions(+), 11 deletions(-)
 rename frontend/src/views/{CollectionView.vue => CollectionsView.vue} (86%)

diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
index b7e6367e..902bc327 100644
--- a/frontend/src/components/SideBarComponent.vue
+++ b/frontend/src/components/SideBarComponent.vue
@@ -15,7 +15,7 @@
         v-for="project in projects"
         :key="project.id"
         :project="project"
-        @delete-project="deleteProject"
+        @delete-project="removeProjectFromList"
       />
     </div>
     <div class="border-top border-2 border-white py-2">
@@ -51,7 +51,7 @@ async function createAndUpdateProject() {
   await updateProjects()
 }
 
-function deleteProject(project: Project) {
+function removeProjectFromList(project: Project) {
   projects.value = projects.value.filter((element) => element.id != project.id)
 }
 </script>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 02d604b9..63d97bd1 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,7 +1,7 @@
 import PrivacyAndCookieStatement from '@/views/PrivacyAndCookieStatement.vue'
 import StartView from '@/views/StartView.vue'
 import TermsOfService from '@/views/TermsOfService.vue'
-import CollectionView from '@/views/CollectionView.vue'
+import CollectionsView from '@/views/CollectionsView.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,9 +12,9 @@ const router = createRouter({
       component: StartView
     },
     {
-      path: '/collection',
-      name: 'collection',
-      component: CollectionView
+      path: '/collections',
+      name: 'collections',
+      component: CollectionsView
     },
     {
       path: '/privacy-and-cookie-statement',
diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionsView.vue
similarity index 86%
rename from frontend/src/views/CollectionView.vue
rename to frontend/src/views/CollectionsView.vue
index 43c20b57..695dfe9a 100644
--- a/frontend/src/views/CollectionView.vue
+++ b/frontend/src/views/CollectionsView.vue
@@ -6,7 +6,7 @@
       </div>
       <div class="col content d-flex flex-column justify-content-between">
         <div>
-          <ProjectView v-if="hasActivatedProject" />
+          <ProjectView v-if="hasValidProjectId" />
         </div>
         <FooterComponent />
       </div>
@@ -21,7 +21,7 @@ import ProjectView from './ProjectView.vue'
 import { useProjectIdStore } from '@/stores/stores'
 import { computed } from 'vue'
 const storeProjectId = useProjectIdStore()
-const hasActivatedProject = computed(() => storeProjectId.projectId != null)
+const hasValidProjectId = computed(() => storeProjectId.projectId != null)
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index c26329fd..a25055bf 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -2,7 +2,7 @@
   <div class="d-flex flex-column vh-100">
     <div class="flex-shrink-1">
       <Suspense>
-        <ProjectView v-if="isVaildProjectID" />
+        <ProjectView v-if="isValidProjectId" />
         <HomeView v-else />
       </Suspense>
     </div>
@@ -25,10 +25,10 @@ import router from '@/router'
 const storeProjectId = useProjectIdStore()
 const { projectId } = storeToRefs(storeProjectId)
 const storeApp = useAppStore()
-const isVaildProjectID = ref(await validProjectID(storeProjectId.projectId))
+const isValidProjectId = ref(await validProjectID(storeProjectId.projectId))
 
 watch(projectId, async (newId) => {
-  isVaildProjectID.value = await validProjectID(newId)
+  isValidProjectId.value = await validProjectID(newId)
 })
 
 async function setupProjectId() {

From fccc407c35a9e18bec900012b1cefdfc10be24e7 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 11:05:38 -0400
Subject: [PATCH 12/34] Refactor modal component.

---
 frontend/src/App.vue                       |  2 +
 frontend/src/components/ModalComponent.vue | 63 +++++++-------
 frontend/src/stores/stores.ts              | 27 ++++++
 frontend/src/views/ProjectView.vue         | 96 ++++++----------------
 4 files changed, 85 insertions(+), 103 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cf616d33..42de543c 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,10 +3,12 @@
     <RouterView />
   </Suspense>
   <AlertsComponentVue />
+  <ModalComponent />
 </template>
 
 <script setup lang="ts">
 import AlertsComponentVue from './components/AlertsComponent.vue'
+import ModalComponent from './components/ModalComponent.vue';
 import { onMounted, ref } from 'vue'
 import { useAppStore } from './stores/stores'
 
diff --git a/frontend/src/components/ModalComponent.vue b/frontend/src/components/ModalComponent.vue
index 74a5e0b7..905a50fc 100644
--- a/frontend/src/components/ModalComponent.vue
+++ b/frontend/src/components/ModalComponent.vue
@@ -1,35 +1,27 @@
 <template>
-  <div class="modal fade show" tabindex="-1" ref="modal">
+  <div class="modal fade" tabindex="-1" ref="modal">
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <div class="modal-header">
-          <h1 class="modal-title fs-5">{{ props.title }}</h1>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
+          <h1 class="modal-title fs-5">{{ storeModal.title }}</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
+            @click.prevent="storeModal.dismissModal"></button>
         </div>
         <div class="modal-body">
-          <slot />
+          <ul>
+            <li v-for="(element, key) in storeModal.content" :key="key">
+              {{ element }}
+            </li>
+          </ul>
         </div>
         <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            data-bs-dismiss="modal"
-            @click.prevent="emit('clickSecondaryButton')"
-          >
-            {{ props.secondaryButtonTitle }}
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
+            @click.prevent="clickButton(storeModal.clickSecondaryButton)">
+            {{ storeModal.secondaryButtonTitle }}
           </button>
-          <button
-            type="button"
-            class="btn btn-primary"
-            data-bs-dismiss="modal"
-            @click.prevent="emit('clickPrimaryButton')"
-          >
-            {{ props.primaryButtonTitle }}
+          <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
+            @click.prevent="clickButton(storeModal.clickPrimaryButton)">
+            {{ storeModal.primaryButtonTitle }}
           </button>
         </div>
       </div>
@@ -38,25 +30,30 @@
 </template>
 
 <script setup lang="ts">
+import { useModalStore } from '@/stores/stores';
 import * as bootstrap from 'bootstrap'
-import { ref, type Ref } from 'vue'
+import { ref, watch, type Ref } from 'vue'
+
+const storeModal = useModalStore()
 
-const props = defineProps<{
-  title: string
-  primaryButtonTitle: string
-  secondaryButtonTitle: string
-}>()
-const emit = defineEmits<{
-  clickPrimaryButton: []
-  clickSecondaryButton: []
-}>()
 const modal: Ref<Element | null> = ref(null)
 defineExpose({ showModal })
 
+watch(() => storeModal.isShow, (newValue) => {
+  if (newValue) {
+    showModal()
+  }
+})
+
 function showModal() {
   if (modal.value != null) {
     const confirmModal = new bootstrap.Modal(modal.value)
     confirmModal.show()
   }
 }
+
+function clickButton(action: () => Promise<void>) {
+  storeModal.dismissModal()
+  action()
+}
 </script>
diff --git a/frontend/src/stores/stores.ts b/frontend/src/stores/stores.ts
index ec5808d9..750bbe1d 100644
--- a/frontend/src/stores/stores.ts
+++ b/frontend/src/stores/stores.ts
@@ -84,3 +84,30 @@ export const useInitialFilesStore = defineStore('initialFiles', () => {
   }
   return { initialFiles, setInitialFiles }
 })
+
+export const useModalStore = defineStore('modal', () => {
+  const isShow = ref(false)
+  const title = ref('')
+  const primaryButtonTitle = ref('')
+  const secondaryButtonTitle = ref('')
+  const clickPrimaryButton = ref(async () => { })
+  const clickSecondaryButton = ref(async () => { })
+  const content: Ref<string[]> = ref([])
+
+  function showModal(newTitle: string, newPrimaryButtonTitle: string, newSecondaryButtonTitle: string, newClickPrimaryButton: () => Promise<void>, newClickSecondaryButton: () => Promise<void>, newContent: string[]) {
+    title.value = newTitle
+    primaryButtonTitle.value = newPrimaryButtonTitle
+    secondaryButtonTitle.value = newSecondaryButtonTitle
+    clickPrimaryButton.value = newClickPrimaryButton
+    clickSecondaryButton.value = newClickSecondaryButton
+    content.value = newContent
+    isShow.value = true
+  }
+
+  function dismissModal() {
+    isShow.value = false
+  }
+  return {
+    title, primaryButtonTitle, secondaryButtonTitle, clickPrimaryButton, clickSecondaryButton, content, isShow, showModal, dismissModal
+  }
+})
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 89cb55e4..6aa1742f 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -1,13 +1,7 @@
 <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']" />
@@ -21,83 +15,37 @@
           {{ 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"
-    >
-      <ul>
-        <li v-for="[key, file] in toBeDeletedFiles" :key="key">
-          {{ file.filename }}
-        </li>
-      </ul>
-    </ModalComponent>
   </div>
 </template>
 <script setup lang="ts">
@@ -112,7 +60,7 @@ import {
   humanifyFileSize,
   type CompareFunctionType
 } from '@/constants'
-import { useAppStore, useProjectIdStore, useInitialFilesStore } from '@/stores/stores'
+import { useAppStore, useProjectIdStore, useInitialFilesStore, useModalStore } from '@/stores/stores'
 import axios from 'axios'
 import { ref, type Ref, computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
@@ -122,6 +70,7 @@ const isEditMode = ref(false)
 const isShowed = ref(true)
 const storeApp = useAppStore()
 const storeProjectId = useProjectIdStore()
+const storeModal = useModalStore()
 const { projectId } = storeToRefs(storeProjectId)
 const storeInitialFileStore = useInitialFilesStore()
 const files: Ref<Map<string, ClientVisibleFile>> = ref(new Map())
@@ -129,7 +78,6 @@ const selectedFiles: Ref<Map<string, boolean>> = ref(new Map())
 const totalSize = computed(() =>
   Array.from(files.value.values()).reduce((pre, element) => pre + element.file.filesize, 0)
 )
-const deletionModal: Ref<InstanceType<typeof ModalComponent> | null> = ref(null)
 const toBeDeletedFiles: Ref<Map<string, File>> = ref(new Map())
 const compareFunction: Ref<CompareFunctionType> = ref((a, b) =>
   a[1].file.uploaded_on > b[1].file.uploaded_on ? 1 : -1
@@ -276,7 +224,9 @@ async function deleteFiles() {
 async function deleteSingleFile(key: string, file: File) {
   toBeDeletedFiles.value.clear()
   toBeDeletedFiles.value.set(key, file)
-  deletionModal.value?.showModal()
+  storeModal.showModal("Are you sure you want to delete:", "Delete", "Close",
+    deleteFiles, async () => { toBeDeletedFiles.value.clear() }, [file.title]
+  )
 }
 
 async function deleteSelectedFiles() {
@@ -287,7 +237,13 @@ async function deleteSelectedFiles() {
       toBeDeletedFiles.value.set(key, clientVisibleFile.file)
     }
   })
-  deletionModal.value?.showModal()
+  let toBeDeletedFilesName = []
+  for (let file of toBeDeletedFiles.value.values()) {
+    toBeDeletedFilesName.push(file.title)
+  }
+  storeModal.showModal("Are you sure you want to delete:", "Delete", "Close",
+    deleteFiles, async () => { toBeDeletedFiles.value.clear() }, toBeDeletedFilesName
+  )
 }
 
 async function toggleSelectFile(key: string) {

From 3bd100181e65375720e71940bd4bd604a96f22ed Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 11:10:46 -0400
Subject: [PATCH 13/34] Add deletion confirm to project sidebar.

---
 .../src/components/ProjectColumnComponent.vue | 31 +++++++------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 0e73484f..dde89217 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,24 +1,12 @@
 <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="isHover = true"
-    @mouseleave="isHover = false"
-  >
+  <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>
@@ -26,7 +14,7 @@
     <div v-if="!isHover" class="expire text-white-50">
       {{ leftDays }}
     </div>
-    <button v-else type="button" class="btn text-light" @click.stop="deleteProject">
+    <button v-else type="button" class="btn text-light" @click.stop="clickDeleteProjectButton">
       <font-awesome-icon :icon="['fas', 'trash']" />
     </button>
   </div>
@@ -34,7 +22,7 @@
 
 <script setup lang="ts">
 import type { Project } from '@/constants'
-import { useAppStore, useProjectIdStore } from '@/stores/stores'
+import { useAppStore, useModalStore, useProjectIdStore } from '@/stores/stores'
 import moment from 'moment'
 import { computed, ref, watch, type Ref } from 'vue'
 
@@ -45,6 +33,7 @@ const leftDays = computed(() =>
   props.project.expire_on ? `Expire ${moment.utc(props.project.expire_on).fromNow()}` : ''
 )
 const storeProjectId = useProjectIdStore()
+const storeModal = useModalStore()
 const isActive = computed(() => storeProjectId.projectId == props.project.id)
 const isEditMode = ref(false)
 const isHover = ref(false)
@@ -86,13 +75,17 @@ async function deleteProject() {
   if (isActive.value) {
     storeProjectId.clearProjectId()
   }
-  emit('deleteProject', toBeDeletedProject)
   try {
     await storeApp.axiosInstance.delete(`/projects/${toBeDeletedProject.id}`)
   } catch (error: any) {
     console.log('Unable to delete project.', error, props.project.id)
     storeApp.alertsError(`Unable to delete project, project id: ${props.project.id}`)
   }
+  emit('deleteProject', toBeDeletedProject)
+}
+
+async function clickDeleteProjectButton() {
+  storeModal.showModal("Are you sure you want to delete:", "Delete", "Close", deleteProject, async () => { }, [props.project.name])
 }
 </script>
 

From fb5251d285ef02f1e4adcecae3fb68381365da73 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 11:20:40 -0400
Subject: [PATCH 14/34] Add Contact and FAQ pages.

---
 frontend/src/components/ContactPage.vue      |  8 ++++++++
 frontend/src/components/SideBarComponent.vue | 18 +++++-------------
 frontend/src/router/index.ts                 | 12 ++++++++++++
 3 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/ContactPage.vue

diff --git a/frontend/src/components/ContactPage.vue b/frontend/src/components/ContactPage.vue
new file mode 100644
index 00000000..347d1c15
--- /dev/null
+++ b/frontend/src/components/ContactPage.vue
@@ -0,0 +1,8 @@
+<template>
+  Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur
+  mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
+  aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit
+  esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa
+  proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
+  excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+</template>
diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
index 902bc327..a1dfb136 100644
--- a/frontend/src/components/SideBarComponent.vue
+++ b/frontend/src/components/SideBarComponent.vue
@@ -2,25 +2,17 @@
   <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="removeProjectFromList"
-      />
+      <ProjectColumnComponent v-for="project in projects" :key="project.id" :project="project"
+        @delete-project="removeProjectFromList" />
     </div>
     <div class="border-top border-2 border-white py-2">
-      <p class="text-light">FAQ</p>
-      <p class="text-light">Contact</p>
+      <p class="text-light"><router-link to="/faq" class="link-light">FAQ</router-link></p>
+      <p class="text-light"><router-link to="/contact" class="link-light">Contact</router-link></p>
     </div>
   </div>
 </template>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 63d97bd1..f556e8c1 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -3,6 +3,8 @@ import StartView from '@/views/StartView.vue'
 import TermsOfService from '@/views/TermsOfService.vue'
 import CollectionsView from '@/views/CollectionsView.vue'
 import { createRouter, createWebHistory } from 'vue-router'
+import FrequentlyAskedQuestions from '@/components/FrequentlyAskedQuestions.vue'
+import ContactPage from '@/components/ContactPage.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -25,6 +27,16 @@ const router = createRouter({
       path: '/terms-of-service',
       name: 'TermsOfService',
       component: TermsOfService
+    },
+    {
+      path: '/faq',
+      name: 'faq',
+      component: FrequentlyAskedQuestions
+    },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: ContactPage
     }
   ]
 })

From 10cb2b0815f48e469566dcab0e1ad4e2e0e0050f Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 11:21:40 -0400
Subject: [PATCH 15/34] Fix text vertical glitch.

---
 frontend/src/components/ProjectColumnComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index dde89217..4285e56c 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -14,7 +14,7 @@
     <div v-if="!isHover" class="expire text-white-50">
       {{ leftDays }}
     </div>
-    <button v-else type="button" class="btn text-light" @click.stop="clickDeleteProjectButton">
+    <button v-else type="button" class="btn text-light py-0" @click.stop="clickDeleteProjectButton">
       <font-awesome-icon :icon="['fas', 'trash']" />
     </button>
   </div>

From 1e5e6c3f325a9590ec3155d73f39e1a07188216d Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 11:22:26 -0400
Subject: [PATCH 16/34] Fix existed user view.

---
 frontend/src/views/StartView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index a25055bf..4a31762e 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -50,7 +50,7 @@ if (
 ) {
   setupProjectId()
   if (await validateUser()) {
-    router.push('/collection')
+    router.push('/collections')
   }
 }
 </script>

From a73f39cc651e8e664297cb43adba0e5329e278f0 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 11:29:42 -0400
Subject: [PATCH 17/34] Change cursor type

---
 frontend/src/components/ProjectColumnComponent.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 4285e56c..e79c9ccc 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,7 +1,7 @@
 <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="isHover = true"
-    @mouseleave="isHover = false">
+  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
+    :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']" />
@@ -14,7 +14,7 @@
     <div v-if="!isHover" class="expire text-white-50">
       {{ leftDays }}
     </div>
-    <button v-else type="button" class="btn text-light py-0" @click.stop="clickDeleteProjectButton">
+    <button v-else type="button" class="btn text-light py-9" @click.stop="clickDeleteProjectButton">
       <font-awesome-icon :icon="['fas', 'trash']" />
     </button>
   </div>
@@ -97,4 +97,9 @@ async function clickDeleteProjectButton() {
 .active {
   background-color: orange;
 }
+
+.project-column {
+  cursor: pointer;
+  height: 3em;
+}
 </style>

From 5d2b9a15872421f6bd63a9f2c4d1c7dd0ec27475 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 11:32:40 -0400
Subject: [PATCH 18/34] Adjust sidebar width.

---
 frontend/src/views/CollectionsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/CollectionsView.vue b/frontend/src/views/CollectionsView.vue
index 695dfe9a..f310f200 100644
--- a/frontend/src/views/CollectionsView.vue
+++ b/frontend/src/views/CollectionsView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container-fluid vh-100">
     <div class="row">
-      <div class="col col-3 sticky-top sidebar">
+      <div class="col col-2 sticky-top sidebar">
         <SideBarComponent />
       </div>
       <div class="col content d-flex flex-column justify-content-between">

From 7a164d0ae63d9a326c376aaf530f12e7758c8251 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 11:40:26 -0400
Subject: [PATCH 19/34] Add Enter and Esc action.

---
 frontend/src/components/ProjectColumnComponent.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index e79c9ccc..1d0481dd 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -6,7 +6,8 @@
       <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="exitEditModeWithChange" @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" />
       <div v-if="!isEditMode" class="fw-semibold text-light">
         {{ projectName }}
       </div>
@@ -53,11 +54,16 @@ function enableEditMode() {
   isEditMode.value = true
 }
 
-async function disableEditMode() {
+async function exitEditModeWithChange() {
   isEditMode.value = false
   await updateProjectName(props.project.id, projectName.value)
 }
 
+async function exitEditModeWithoutChange() {
+  isEditMode.value = false
+  projectName.value = props.project.name
+}
+
 async function updateProjectName(projectId: string, newName: string) {
   const projectRequestData = {
     name: newName

From f08b005f8ce35c67ac93b8cf3f55b790919b91bf Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 12:25:59 -0400
Subject: [PATCH 20/34] Dragging files arrive to sidebar collection view.

---
 .../DragToStartProjectComponent.vue           |  7 +++--
 .../src/components/ProjectColumnComponent.vue | 16 ++++------
 frontend/src/components/SideBarComponent.vue  | 16 ++++++----
 frontend/src/router/index.ts                  | 12 ++++----
 frontend/src/stores/stores.ts                 | 30 +++++++++++++------
 frontend/src/views/CollectionsView.vue        |  6 ++--
 frontend/src/views/HomeView.vue               | 30 +++++++++++--------
 frontend/src/views/ProjectView.vue            | 25 ++++++++--------
 frontend/src/views/StartView.vue              | 21 +++++++------
 9 files changed, 90 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/DragToStartProjectComponent.vue b/frontend/src/components/DragToStartProjectComponent.vue
index 6a00a801..f4062bd1 100644
--- a/frontend/src/components/DragToStartProjectComponent.vue
+++ b/frontend/src/components/DragToStartProjectComponent.vue
@@ -8,10 +8,10 @@
 import DragToStartField from '@/components/DragToStartField.vue'
 import { type Project } from '@/constants'
 import type { User } from '@/constants'
-import { useAppStore, useProjectIdStore, useInitialFilesStore } from '@/stores/stores'
+import { useAppStore, useProjectStore, useInitialFilesStore } from '@/stores/stores'
 import { createNewProject } from '@/utils'
 
-const storeProjectId = useProjectIdStore()
+const storeProject = useProjectStore()
 const storeApp = useAppStore()
 const storeInitialFiles = useInitialFilesStore()
 
@@ -43,6 +43,7 @@ function setProjectId(project: Project | null) {
   if (project == null) {
     return
   }
-  storeProjectId.setProjectId(project.id)
+  storeProject.setProjects([project])
+  storeProject.setLastProjectId(project.id)
 }
 </script>
diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 1d0481dd..028e28a9 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import type { Project } from '@/constants'
-import { useAppStore, useModalStore, useProjectIdStore } from '@/stores/stores'
+import { useAppStore, useModalStore, useProjectStore } from '@/stores/stores'
 import moment from 'moment'
 import { computed, ref, watch, type Ref } from 'vue'
 
@@ -33,9 +33,9 @@ const emit = defineEmits<{ deleteProject: [Project] }>()
 const leftDays = computed(() =>
   props.project.expire_on ? `Expire ${moment.utc(props.project.expire_on).fromNow()}` : ''
 )
-const storeProjectId = useProjectIdStore()
+const storeProject = useProjectStore()
 const storeModal = useModalStore()
-const isActive = computed(() => storeProjectId.projectId == props.project.id)
+const isActive = computed(() => storeProject.lastProjectId == props.project.id)
 const isEditMode = ref(false)
 const isHover = ref(false)
 const projectName = ref(props.project.name)
@@ -47,7 +47,7 @@ watch(inputElement, (newElement) => {
 })
 
 function setupProject() {
-  storeProjectId.setProjectId(props.project.id)
+  storeProject.setLastProjectId(props.project.id)
 }
 
 function enableEditMode() {
@@ -77,17 +77,13 @@ async function updateProjectName(projectId: string, newName: string) {
 }
 
 async function deleteProject() {
-  const toBeDeletedProject = props.project
-  if (isActive.value) {
-    storeProjectId.clearProjectId()
-  }
   try {
-    await storeApp.axiosInstance.delete(`/projects/${toBeDeletedProject.id}`)
+    await storeApp.axiosInstance.delete(`/projects/${props.project.id}`)
   } catch (error: any) {
     console.log('Unable to delete project.', error, props.project.id)
     storeApp.alertsError(`Unable to delete project, project id: ${props.project.id}`)
   }
-  emit('deleteProject', toBeDeletedProject)
+  emit('deleteProject', props.project)
 }
 
 async function clickDeleteProjectButton() {
diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
index a1dfb136..2ad2f76b 100644
--- a/frontend/src/components/SideBarComponent.vue
+++ b/frontend/src/components/SideBarComponent.vue
@@ -7,7 +7,7 @@
       </button>
     </div>
     <div class="flex-grow-1 py-2 overflow-x-auto">
-      <ProjectColumnComponent v-for="project in projects" :key="project.id" :project="project"
+      <ProjectColumnComponent v-for="project in storeProject.projects" :key="project.id" :project="project"
         @delete-project="removeProjectFromList" />
     </div>
     <div class="border-top border-2 border-white py-2">
@@ -20,18 +20,17 @@
 <script setup lang="ts">
 import ProjectColumnComponent from './ProjectColumnComponent.vue'
 import type { Project } from '@/constants'
-import { useAppStore } from '@/stores/stores'
+import { useAppStore, useProjectStore } from '@/stores/stores'
 import { createNewProject } from '@/utils'
-import { ref, type Ref } from 'vue'
 const storeApp = useAppStore()
-const projects: Ref<Project[]> = ref([])
+const storeProject = useProjectStore()
 
 await updateProjects()
 
 async function updateProjects() {
   try {
     const response = await storeApp.axiosInstance.get<Project[]>('/projects')
-    projects.value = response.data
+    storeProject.setProjects(response.data)
   } catch (error: any) {
     console.log('Unable to retrieve projects info', error)
     storeApp.alertsError('Unable to retrieve projects info')
@@ -44,6 +43,11 @@ async function createAndUpdateProject() {
 }
 
 function removeProjectFromList(project: Project) {
-  projects.value = projects.value.filter((element) => element.id != project.id)
+  storeProject.setProjects(storeProject.projects.filter((element) => element.id != project.id))
+  if (storeProject.projects.length != 0) {
+    storeProject.setLastProjectId(storeProject.projects[0].id)
+  } else {
+    storeProject.clearLastProjectId()
+  }
 }
 </script>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index f556e8c1..42a02de2 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -8,11 +8,6 @@ import ContactPage from '@/components/ContactPage.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      path: '/',
-      name: 'start',
-      component: StartView
-    },
     {
       path: '/collections',
       name: 'collections',
@@ -37,7 +32,12 @@ const router = createRouter({
       path: '/contact',
       name: 'contact',
       component: ContactPage
-    }
+    },
+    {
+      path: '/',
+      name: 'start',
+      component: StartView
+    },
   ]
 })
 
diff --git a/frontend/src/stores/stores.ts b/frontend/src/stores/stores.ts
index 750bbe1d..40750f9e 100644
--- a/frontend/src/stores/stores.ts
+++ b/frontend/src/stores/stores.ts
@@ -1,23 +1,28 @@
 import { ref, type Ref } from 'vue'
 import { defineStore } from 'pinia'
-import { Constants, EmptyConstants, type AlertMessage, type Environ, AlertType } from '@/constants'
+import { Constants, EmptyConstants, type AlertMessage, type Environ, AlertType, type Project } from '@/constants'
 import { v4 as uuid } from 'uuid'
 import axios from 'axios'
 
-export const useProjectIdStore = defineStore(
+export const useProjectStore = defineStore(
   'projectId',
   () => {
-    const projectId: Ref<string | null> = ref(null)
+    const lastProjectId: Ref<string | null> = ref(null)
+    const projects: Ref<Project[]> = ref([])
 
-    function setProjectId(newId: string) {
-      projectId.value = newId
+    function setProjects(newIds: Project[]) {
+      projects.value = newIds
     }
 
-    function clearProjectId() {
-      projectId.value = null
+    function setLastProjectId(newId: string) {
+      lastProjectId.value = newId
     }
 
-    return { projectId, setProjectId, clearProjectId }
+    function clearLastProjectId() {
+      lastProjectId.value = null
+    }
+
+    return { projects, lastProjectId, setLastProjectId, clearLastProjectId, setProjects }
   },
   {
     persist: true
@@ -94,7 +99,14 @@ export const useModalStore = defineStore('modal', () => {
   const clickSecondaryButton = ref(async () => { })
   const content: Ref<string[]> = ref([])
 
-  function showModal(newTitle: string, newPrimaryButtonTitle: string, newSecondaryButtonTitle: string, newClickPrimaryButton: () => Promise<void>, newClickSecondaryButton: () => Promise<void>, newContent: string[]) {
+  function showModal(
+    newTitle: string,
+    newPrimaryButtonTitle: string,
+    newSecondaryButtonTitle: string,
+    newClickPrimaryButton: () => Promise<void>,
+    newClickSecondaryButton: () => Promise<void>,
+    newContent: string[]
+  ) {
     title.value = newTitle
     primaryButtonTitle.value = newPrimaryButtonTitle
     secondaryButtonTitle.value = newSecondaryButtonTitle
diff --git a/frontend/src/views/CollectionsView.vue b/frontend/src/views/CollectionsView.vue
index f310f200..5214cadc 100644
--- a/frontend/src/views/CollectionsView.vue
+++ b/frontend/src/views/CollectionsView.vue
@@ -18,10 +18,10 @@
 import SideBarComponent from '@/components/SideBarComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
 import ProjectView from './ProjectView.vue'
-import { useProjectIdStore } from '@/stores/stores'
+import { useProjectStore } from '@/stores/stores'
 import { computed } from 'vue'
-const storeProjectId = useProjectIdStore()
-const hasValidProjectId = computed(() => storeProjectId.projectId != null)
+const storeProject = useProjectStore()
+const hasValidProjectId = computed(() => storeProject.lastProjectId != null)
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 5b8277c8..4e9e71e8 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,21 +1,27 @@
 <template>
-  <div class="mt-5">
-    <SloganComponent />
-  </div>
-  <div class="mt-5">
-    <Suspense>
-      <div class="container">
-        <DragToStartProjectComponent />
-        <StatementsComponent />
+  <div class="d-flex flex-column vh-100">
+    <div class="flex-shrink-1">
+      <div class="mt-5">
+        <SloganComponent />
       </div>
-    </Suspense>
-  </div>
-  <div class="mt-5">
-    <FrequentlyAskedQuestions />
+      <div class="mt-5">
+        <Suspense>
+          <div class="container">
+            <DragToStartProjectComponent />
+            <StatementsComponent />
+          </div>
+        </Suspense>
+      </div>
+      <div class="mt-5">
+        <FrequentlyAskedQuestions />
+      </div>
+    </div>
+    <FooterComponent />
   </div>
 </template>
 
 <script setup lang="ts">
+import FooterComponent from '@/components/FooterComponent.vue'
 import SloganComponent from '@/components/SloganComponent.vue'
 import FrequentlyAskedQuestions from '@/components/FrequentlyAskedQuestions.vue'
 import DragToStartProjectComponent from '@/components/DragToStartProjectComponent.vue'
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 6aa1742f..da8e5070 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -52,7 +52,6 @@
 import UploadFilesComponent from '@/components/UploadFilesComponent.vue'
 import FileTableRowComponent from '@/components/FileTableRowComponent.vue'
 import FileTableHeaderComponent from '@/components/FileTableHeaderComponent.vue'
-import ModalComponent from '@/components/ModalComponent.vue'
 import {
   FileStatus,
   type File,
@@ -60,7 +59,7 @@ import {
   humanifyFileSize,
   type CompareFunctionType
 } from '@/constants'
-import { useAppStore, useProjectIdStore, useInitialFilesStore, useModalStore } from '@/stores/stores'
+import { useAppStore, useProjectStore, useInitialFilesStore, useModalStore } from '@/stores/stores'
 import axios from 'axios'
 import { ref, type Ref, computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
@@ -69,9 +68,9 @@ const isActive = ref(false)
 const isEditMode = ref(false)
 const isShowed = ref(true)
 const storeApp = useAppStore()
-const storeProjectId = useProjectIdStore()
+const storeProject = useProjectStore()
 const storeModal = useModalStore()
-const { projectId } = storeToRefs(storeProjectId)
+const { lastProjectId } = storeToRefs(storeProject)
 const storeInitialFileStore = useInitialFilesStore()
 const files: Ref<Map<string, ClientVisibleFile>> = ref(new Map())
 const selectedFiles: Ref<Map<string, boolean>> = ref(new Map())
@@ -86,14 +85,14 @@ const sortedFiles: Ref<Map<string, ClientVisibleFile>> = computed(() =>
   sortFiles(files.value, compareFunction.value)
 )
 
-watch(projectId, async () => {
+watch(lastProjectId, async () => {
   files.value.clear()
-  const apiFiles = await getAllFiles(storeProjectId.projectId)
+  const apiFiles = await getAllFiles(storeProject.lastProjectId)
   apiFiles.forEach((item) => files.value.set(item.id, { file: item, uploadedSize: item.filesize }))
 })
 
 if (storeInitialFileStore.initialFiles.length == 0) {
-  const apiFiles = await getAllFiles(storeProjectId.projectId)
+  const apiFiles = await getAllFiles(storeProject.lastProjectId)
   apiFiles.forEach((item) => files.value.set(item.id, { file: item, uploadedSize: item.filesize }))
 } else {
   await uploadFiles(storeInitialFileStore.initialFiles)
@@ -126,14 +125,14 @@ async function getAllFiles(projectId: string | null) {
 }
 
 async function uploadFiles(uploadFiles: FileList) {
-  if (storeProjectId.projectId == null) {
+  if (storeProject.lastProjectId == null) {
     return
   }
   const uploadFileRequestsList = []
   for (const uploadFile of uploadFiles) {
     const newFile: File = {
       id: storeApp.constants.genFakeId,
-      project_id: storeProjectId.projectId,
+      project_id: storeProject.lastProjectId,
       filename: uploadFile.name,
       filesize: uploadFile.size,
       title: uploadFile.name,
@@ -145,7 +144,7 @@ async function uploadFiles(uploadFiles: FileList) {
     files.value.set(newFile.id, { file: newFile, uploadedSize: 0 })
 
     const requestData = new FormData()
-    requestData.append('project_id', storeProjectId.projectId)
+    requestData.append('project_id', storeProject.lastProjectId)
     requestData.append('uploaded_file', uploadFile)
 
     const config = {
@@ -159,7 +158,7 @@ async function uploadFiles(uploadFiles: FileList) {
 
     uploadFileRequestsList.push(
       storeApp.axiosInstance
-        .post<File>(`/projects/${storeProjectId.projectId}/files`, requestData, config)
+        .post<File>(`/projects/${storeProject.lastProjectId}/files`, requestData, config)
         .then((response) => {
           if (files.value.has(newFile.id)) {
             files.value.get(newFile.id)!.file = response.data
@@ -201,7 +200,7 @@ async function deleteFiles() {
 
   for (const [key, file] of toBeDeletedFiles.value) {
     try {
-      await storeApp.axiosInstance.delete(`/projects/${storeProjectId.projectId}/files/${file.id}`)
+      await storeApp.axiosInstance.delete(`/projects/${storeProject.lastProjectId}/files/${file.id}`)
       if (selectedFiles.value.has(key)) {
         selectedFiles.value.delete(key)
       }
@@ -209,7 +208,7 @@ async function deleteFiles() {
 
       deletedFiles.push(file)
     } catch (error: any) {
-      console.log('Unable to delete the file', storeProjectId.projectId, error)
+      console.log('Unable to delete the file', storeProject.lastProjectId, error)
       storeApp.alertsWarning(`Unable to delete the file: ${file.filename}`)
     }
   }
diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index 4a31762e..bb7d4ad5 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -2,7 +2,7 @@
   <div class="d-flex flex-column vh-100">
     <div class="flex-shrink-1">
       <Suspense>
-        <ProjectView v-if="isValidProjectId" />
+        <CollectionsView v-if="isValidProjectId" />
         <HomeView v-else />
       </Suspense>
     </div>
@@ -11,23 +11,22 @@
 </template>
 
 <script setup lang="ts">
-import FooterComponent from '@/components/FooterComponent.vue'
-import ProjectView from '@/views/ProjectView.vue'
+import CollectionsView from './CollectionsView.vue'
 import HomeView from '@/views/HomeView.vue'
 import { type Project } from '@/constants'
 import { ref, watch } from 'vue'
-import { useAppStore, useProjectIdStore } from '@/stores/stores'
+import { useAppStore, useProjectStore } from '@/stores/stores'
 import { validProjectID } from '@/utils'
 import { validateUser } from '@/utils'
 import { storeToRefs } from 'pinia'
 import router from '@/router'
 
-const storeProjectId = useProjectIdStore()
-const { projectId } = storeToRefs(storeProjectId)
+const storeProject = useProjectStore()
+const { lastProjectId } = storeToRefs(storeProject)
 const storeApp = useAppStore()
-const isValidProjectId = ref(await validProjectID(storeProjectId.projectId))
+const isValidProjectId = ref(await validProjectID(storeProject.lastProjectId))
 
-watch(projectId, async (newId) => {
+watch(lastProjectId, async (newId) => {
   isValidProjectId.value = await validProjectID(newId)
 })
 
@@ -35,17 +34,17 @@ async function setupProjectId() {
   try {
     const lastProject = (await storeApp.axiosInstance.get<Project[]>('/projects')).data.pop()
     if (lastProject && (await validProjectID(lastProject?.id))) {
-      storeProjectId.setProjectId(lastProject.id)
+      storeProject.setLastProjectId(lastProject.id)
     }
   } catch (error: any) {
     console.log('Unable to retrieve the last project id', error)
     storeApp.alertsWarning('Unable to the retrieve last project id.')
-    storeProjectId.clearProjectId()
+    storeProject.clearLastProjectId()
   }
 }
 
 if (
-  (storeProjectId.projectId != undefined && !(await validProjectID(storeProjectId.projectId))) ||
+  (storeProject.lastProjectId != undefined && !(await validProjectID(storeProject.lastProjectId))) ||
   (await validateUser())
 ) {
   setupProjectId()

From e6be842b285ee42e9a7bdd4c72161746564d6033 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 12:34:45 -0400
Subject: [PATCH 21/34] Check project expire date when files are uploaded.

---
 frontend/src/components/SideBarComponent.vue | 15 ++-------------
 frontend/src/utils.ts                        | 14 +++++++++++++-
 frontend/src/views/ProjectView.vue           |  7 +++++--
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
index 2ad2f76b..d78be370 100644
--- a/frontend/src/components/SideBarComponent.vue
+++ b/frontend/src/components/SideBarComponent.vue
@@ -20,23 +20,12 @@
 <script setup lang="ts">
 import ProjectColumnComponent from './ProjectColumnComponent.vue'
 import type { Project } from '@/constants'
-import { useAppStore, useProjectStore } from '@/stores/stores'
-import { createNewProject } from '@/utils'
-const storeApp = useAppStore()
+import { useProjectStore } from '@/stores/stores'
+import { createNewProject, updateProjects } from '@/utils'
 const storeProject = useProjectStore()
 
 await updateProjects()
 
-async function updateProjects() {
-  try {
-    const response = await storeApp.axiosInstance.get<Project[]>('/projects')
-    storeProject.setProjects(response.data)
-  } catch (error: any) {
-    console.log('Unable to retrieve projects info', error)
-    storeApp.alertsError('Unable to retrieve projects info')
-  }
-}
-
 async function createAndUpdateProject() {
   await createNewProject('New Project')
   await updateProjects()
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index 94692df4..df64dd56 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -1,4 +1,4 @@
-import { useAppStore } from './stores/stores'
+import { useAppStore, useProjectStore } from './stores/stores'
 import type { Project } from '@/constants'
 
 /** Checks if a given project ID is valid */
@@ -47,3 +47,15 @@ export async function createNewProject(name: string): Promise<Project | null> {
     return null
   }
 }
+
+export async function updateProjects() {
+  const storeProject = useProjectStore()
+  const storeApp = useAppStore()
+  try {
+    const response = await storeApp.axiosInstance.get<Project[]>('/projects')
+    storeProject.setProjects(response.data)
+  } catch (error: any) {
+    console.log('Unable to retrieve projects info', error)
+    storeApp.alertsError('Unable to retrieve projects info')
+  }
+}
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index da8e5070..85825036 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -63,6 +63,7 @@ import { useAppStore, useProjectStore, useInitialFilesStore, useModalStore } fro
 import axios from 'axios'
 import { ref, type Ref, computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
+import { updateProjects } from '@/utils'
 
 const isActive = ref(false)
 const isEditMode = ref(false)
@@ -152,7 +153,6 @@ async function uploadFiles(uploadFiles: FileList) {
         if (files.value.has(newFile.id)) {
           files.value.get(newFile.id)!.uploadedSize = progressEvent.loaded
         }
-        console.log(progressEvent.loaded)
       }
     }
 
@@ -176,7 +176,10 @@ async function uploadFiles(uploadFiles: FileList) {
         })
     )
 
-    axios.all(uploadFileRequestsList)
+    // After files are uploaded, check the project expiration date.
+    axios.all(uploadFileRequestsList).finally(() => {
+      updateProjects()
+    })
   }
 }
 

From 4bbcbf6450cade4be56570c6df3effd08ba0448d Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Fri, 18 Aug 2023 12:38:43 -0400
Subject: [PATCH 22/34] Please CI.

---
 frontend/src/App.vue                          |  2 +-
 frontend/src/components/ContactPage.vue       | 14 +--
 frontend/src/components/ModalComponent.vue    | 38 +++++---
 .../src/components/ProjectColumnComponent.vue | 32 +++++--
 frontend/src/components/SideBarComponent.vue  | 14 ++-
 frontend/src/router/index.ts                  |  2 +-
 frontend/src/stores/stores.ts                 | 23 ++++-
 frontend/src/utils.ts                         |  2 +-
 frontend/src/views/ProjectView.vue            | 92 +++++++++++++++----
 frontend/src/views/StartView.vue              |  3 +-
 10 files changed, 169 insertions(+), 53 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 42de543c..a1ecc46f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 import AlertsComponentVue from './components/AlertsComponent.vue'
-import ModalComponent from './components/ModalComponent.vue';
+import ModalComponent from './components/ModalComponent.vue'
 import { onMounted, ref } from 'vue'
 import { useAppStore } from './stores/stores'
 
diff --git a/frontend/src/components/ContactPage.vue b/frontend/src/components/ContactPage.vue
index 347d1c15..6d0b34cf 100644
--- a/frontend/src/components/ContactPage.vue
+++ b/frontend/src/components/ContactPage.vue
@@ -1,8 +1,10 @@
 <template>
-  Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur
-  mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
-  aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit
-  esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa
-  proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
-  excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+  Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad
+  nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia.
+  Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla
+  est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat
+  reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident
+  adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit
+  commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea
+  consectetur et est culpa et culpa duis.
 </template>
diff --git a/frontend/src/components/ModalComponent.vue b/frontend/src/components/ModalComponent.vue
index 905a50fc..00b9e9a2 100644
--- a/frontend/src/components/ModalComponent.vue
+++ b/frontend/src/components/ModalComponent.vue
@@ -4,8 +4,13 @@
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5">{{ storeModal.title }}</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
-            @click.prevent="storeModal.dismissModal"></button>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+            @click.prevent="storeModal.dismissModal"
+          ></button>
         </div>
         <div class="modal-body">
           <ul>
@@ -15,12 +20,20 @@
           </ul>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
-            @click.prevent="clickButton(storeModal.clickSecondaryButton)">
+          <button
+            type="button"
+            class="btn btn-secondary"
+            data-bs-dismiss="modal"
+            @click.prevent="clickButton(storeModal.clickSecondaryButton)"
+          >
             {{ storeModal.secondaryButtonTitle }}
           </button>
-          <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
-            @click.prevent="clickButton(storeModal.clickPrimaryButton)">
+          <button
+            type="button"
+            class="btn btn-primary"
+            data-bs-dismiss="modal"
+            @click.prevent="clickButton(storeModal.clickPrimaryButton)"
+          >
             {{ storeModal.primaryButtonTitle }}
           </button>
         </div>
@@ -30,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { useModalStore } from '@/stores/stores';
+import { useModalStore } from '@/stores/stores'
 import * as bootstrap from 'bootstrap'
 import { ref, watch, type Ref } from 'vue'
 
@@ -39,11 +52,14 @@ const storeModal = useModalStore()
 const modal: Ref<Element | null> = ref(null)
 defineExpose({ showModal })
 
-watch(() => storeModal.isShow, (newValue) => {
-  if (newValue) {
-    showModal()
+watch(
+  () => storeModal.isShow,
+  (newValue) => {
+    if (newValue) {
+      showModal()
+    }
   }
-})
+)
 
 function showModal() {
   if (modal.value != null) {
diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 028e28a9..a8bb1dda 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,13 +1,26 @@
 <template>
-  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
-    :class="{ active: isActive }" @click.prevent="setupProject" @dblclick.prevent="enableEditMode"
-    @mouseover="isHover = true" @mouseleave="isHover = false">
+  <div
+    class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
+    :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="exitEditModeWithChange" @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" />
+      <input
+        ref="inputElement"
+        v-else
+        type="text"
+        class="form-control"
+        v-model="projectName"
+        @blur="exitEditModeWithChange"
+        @keyup.esc="exitEditModeWithoutChange"
+        @keyup.enter="exitEditModeWithChange"
+      />
       <div v-if="!isEditMode" class="fw-semibold text-light">
         {{ projectName }}
       </div>
@@ -87,7 +100,14 @@ async function deleteProject() {
 }
 
 async function clickDeleteProjectButton() {
-  storeModal.showModal("Are you sure you want to delete:", "Delete", "Close", deleteProject, async () => { }, [props.project.name])
+  storeModal.showModal(
+    'Are you sure you want to delete:',
+    'Delete',
+    'Close',
+    deleteProject,
+    async () => {},
+    [props.project.name]
+  )
 }
 </script>
 
diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
index d78be370..5921b056 100644
--- a/frontend/src/components/SideBarComponent.vue
+++ b/frontend/src/components/SideBarComponent.vue
@@ -2,13 +2,21 @@
   <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 storeProject.projects" :key="project.id" :project="project"
-        @delete-project="removeProjectFromList" />
+      <ProjectColumnComponent
+        v-for="project in storeProject.projects"
+        :key="project.id"
+        :project="project"
+        @delete-project="removeProjectFromList"
+      />
     </div>
     <div class="border-top border-2 border-white py-2">
       <p class="text-light"><router-link to="/faq" class="link-light">FAQ</router-link></p>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 42a02de2..01a6f55b 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -37,7 +37,7 @@ const router = createRouter({
       path: '/',
       name: 'start',
       component: StartView
-    },
+    }
   ]
 })
 
diff --git a/frontend/src/stores/stores.ts b/frontend/src/stores/stores.ts
index 40750f9e..44be89e9 100644
--- a/frontend/src/stores/stores.ts
+++ b/frontend/src/stores/stores.ts
@@ -1,6 +1,13 @@
 import { ref, type Ref } from 'vue'
 import { defineStore } from 'pinia'
-import { Constants, EmptyConstants, type AlertMessage, type Environ, AlertType, type Project } from '@/constants'
+import {
+  Constants,
+  EmptyConstants,
+  type AlertMessage,
+  type Environ,
+  AlertType,
+  type Project
+} from '@/constants'
 import { v4 as uuid } from 'uuid'
 import axios from 'axios'
 
@@ -95,8 +102,8 @@ export const useModalStore = defineStore('modal', () => {
   const title = ref('')
   const primaryButtonTitle = ref('')
   const secondaryButtonTitle = ref('')
-  const clickPrimaryButton = ref(async () => { })
-  const clickSecondaryButton = ref(async () => { })
+  const clickPrimaryButton = ref(async () => {})
+  const clickSecondaryButton = ref(async () => {})
   const content: Ref<string[]> = ref([])
 
   function showModal(
@@ -120,6 +127,14 @@ export const useModalStore = defineStore('modal', () => {
     isShow.value = false
   }
   return {
-    title, primaryButtonTitle, secondaryButtonTitle, clickPrimaryButton, clickSecondaryButton, content, isShow, showModal, dismissModal
+    title,
+    primaryButtonTitle,
+    secondaryButtonTitle,
+    clickPrimaryButton,
+    clickSecondaryButton,
+    content,
+    isShow,
+    showModal,
+    dismissModal
   }
 })
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index df64dd56..d2a14c34 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -54,7 +54,7 @@ export async function updateProjects() {
   try {
     const response = await storeApp.axiosInstance.get<Project[]>('/projects')
     storeProject.setProjects(response.data)
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.log('Unable to retrieve projects info', error)
     storeApp.alertsError('Unable to retrieve projects info')
   }
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 85825036..f3668dc0 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/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,32 +21,64 @@
           {{ 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>
@@ -203,7 +241,9 @@ async function deleteFiles() {
 
   for (const [key, file] of toBeDeletedFiles.value) {
     try {
-      await storeApp.axiosInstance.delete(`/projects/${storeProject.lastProjectId}/files/${file.id}`)
+      await storeApp.axiosInstance.delete(
+        `/projects/${storeProject.lastProjectId}/files/${file.id}`
+      )
       if (selectedFiles.value.has(key)) {
         selectedFiles.value.delete(key)
       }
@@ -226,8 +266,15 @@ async function deleteFiles() {
 async function deleteSingleFile(key: string, file: File) {
   toBeDeletedFiles.value.clear()
   toBeDeletedFiles.value.set(key, file)
-  storeModal.showModal("Are you sure you want to delete:", "Delete", "Close",
-    deleteFiles, async () => { toBeDeletedFiles.value.clear() }, [file.title]
+  storeModal.showModal(
+    'Are you sure you want to delete:',
+    'Delete',
+    'Close',
+    deleteFiles,
+    async () => {
+      toBeDeletedFiles.value.clear()
+    },
+    [file.title]
   )
 }
 
@@ -243,8 +290,15 @@ async function deleteSelectedFiles() {
   for (let file of toBeDeletedFiles.value.values()) {
     toBeDeletedFilesName.push(file.title)
   }
-  storeModal.showModal("Are you sure you want to delete:", "Delete", "Close",
-    deleteFiles, async () => { toBeDeletedFiles.value.clear() }, toBeDeletedFilesName
+  storeModal.showModal(
+    'Are you sure you want to delete:',
+    'Delete',
+    'Close',
+    deleteFiles,
+    async () => {
+      toBeDeletedFiles.value.clear()
+    },
+    toBeDeletedFilesName
   )
 }
 
diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index bb7d4ad5..a8ba774c 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -44,7 +44,8 @@ async function setupProjectId() {
 }
 
 if (
-  (storeProject.lastProjectId != undefined && !(await validProjectID(storeProject.lastProjectId))) ||
+  (storeProject.lastProjectId != undefined &&
+    !(await validProjectID(storeProject.lastProjectId))) ||
   (await validateUser())
 ) {
   setupProjectId()

From e7b191fc56097dc966aa426e711232b04f331ac7 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 10:13:03 -0400
Subject: [PATCH 23/34] Fix typo.

---
 frontend/src/components/ModalComponent.vue | 2 +-
 frontend/src/stores/stores.ts              | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ModalComponent.vue b/frontend/src/components/ModalComponent.vue
index 00b9e9a2..4fe9d6f9 100644
--- a/frontend/src/components/ModalComponent.vue
+++ b/frontend/src/components/ModalComponent.vue
@@ -53,7 +53,7 @@ const modal: Ref<Element | null> = ref(null)
 defineExpose({ showModal })
 
 watch(
-  () => storeModal.isShow,
+  () => storeModal.isShown,
   (newValue) => {
     if (newValue) {
       showModal()
diff --git a/frontend/src/stores/stores.ts b/frontend/src/stores/stores.ts
index 44be89e9..1a0f1d52 100644
--- a/frontend/src/stores/stores.ts
+++ b/frontend/src/stores/stores.ts
@@ -98,7 +98,7 @@ export const useInitialFilesStore = defineStore('initialFiles', () => {
 })
 
 export const useModalStore = defineStore('modal', () => {
-  const isShow = ref(false)
+  const isShown = ref(false)
   const title = ref('')
   const primaryButtonTitle = ref('')
   const secondaryButtonTitle = ref('')
@@ -120,11 +120,11 @@ export const useModalStore = defineStore('modal', () => {
     clickPrimaryButton.value = newClickPrimaryButton
     clickSecondaryButton.value = newClickSecondaryButton
     content.value = newContent
-    isShow.value = true
+    isShown.value = true
   }
 
   function dismissModal() {
-    isShow.value = false
+    isShown.value = false
   }
   return {
     title,
@@ -133,7 +133,7 @@ export const useModalStore = defineStore('modal', () => {
     clickPrimaryButton,
     clickSecondaryButton,
     content,
-    isShow,
+    isShown,
     showModal,
     dismissModal
   }

From c607e4da0455eb9c64be062ad14b662e2b10cbf4 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 10:18:39 -0400
Subject: [PATCH 24/34] Add a cursor to indicate project is editable.

---
 .../src/components/ProjectColumnComponent.vue | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index a8bb1dda..a1aa1388 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,27 +1,14 @@
 <template>
-  <div
-    class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
-    :class="{ active: isActive }"
-    @click.prevent="setupProject"
-    @dblclick.prevent="enableEditMode"
-    @mouseover="isHover = true"
-    @mouseleave="isHover = false"
-  >
+  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
+    :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="exitEditModeWithChange"
-        @keyup.esc="exitEditModeWithoutChange"
-        @keyup.enter="exitEditModeWithChange"
-      />
-      <div v-if="!isEditMode" class="fw-semibold text-light">
+      <input ref="inputElement" v-else type="text" class="form-control" v-model="projectName"
+        @blur="exitEditModeWithChange" @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" />
+      <div v-if="!isEditMode" class="fw-semibold text-light project-name">
         {{ projectName }}
       </div>
     </div>
@@ -35,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Project } from '@/constants'
+import type { Project } from '@/constants' 
 import { useAppStore, useModalStore, useProjectStore } from '@/stores/stores'
 import moment from 'moment'
 import { computed, ref, watch, type Ref } from 'vue'
@@ -105,7 +92,7 @@ async function clickDeleteProjectButton() {
     'Delete',
     'Close',
     deleteProject,
-    async () => {},
+    async () => { },
     [props.project.name]
   )
 }
@@ -124,4 +111,8 @@ async function clickDeleteProjectButton() {
   cursor: pointer;
   height: 3em;
 }
+
+.project-name {
+  cursor: text;
+}
 </style>

From dac93dec5904afe6f904d4cf7b811554b40e8c85 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 10:29:32 -0400
Subject: [PATCH 25/34] Fix Edit actions.

---
 frontend/src/components/ProjectColumnComponent.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index a1aa1388..19243acf 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -6,8 +6,8 @@
       <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="exitEditModeWithChange" @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" />
+      <input ref="inputElement" v-else type="text" class="form-control" @blur="exitEditModeWithoutChange"
+        @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" :value="projectName" />
       <div v-if="!isEditMode" class="fw-semibold text-light project-name">
         {{ projectName }}
       </div>
@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Project } from '@/constants' 
+import type { Project } from '@/constants'
 import { useAppStore, useModalStore, useProjectStore } from '@/stores/stores'
 import moment from 'moment'
 import { computed, ref, watch, type Ref } from 'vue'
@@ -54,14 +54,14 @@ function enableEditMode() {
   isEditMode.value = true
 }
 
-async function exitEditModeWithChange() {
+async function exitEditModeWithChange(event: Event) {
   isEditMode.value = false
+  projectName.value = event.target != null ? (event.target as HTMLInputElement).value : projectName.value
   await updateProjectName(props.project.id, projectName.value)
 }
 
 async function exitEditModeWithoutChange() {
   isEditMode.value = false
-  projectName.value = props.project.name
 }
 
 async function updateProjectName(projectId: string, newName: string) {

From 88e236de3518e1617acd429e75ffcff79730f699 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 10:34:16 -0400
Subject: [PATCH 26/34] Fix Modal's wrong name.

---
 frontend/src/components/ProjectColumnComponent.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 19243acf..451f9df2 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -7,7 +7,7 @@
         <font-awesome-icon :icon="['fa', 'file']" />
       </div>
       <input ref="inputElement" v-else type="text" class="form-control" @blur="exitEditModeWithoutChange"
-        @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" :value="projectName" />
+        @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" v-model="editingProjectName" />
       <div v-if="!isEditMode" class="fw-semibold text-light project-name">
         {{ projectName }}
       </div>
@@ -39,6 +39,7 @@ const isActive = computed(() => storeProject.lastProjectId == props.project.id)
 const isEditMode = ref(false)
 const isHover = ref(false)
 const projectName = ref(props.project.name)
+const editingProjectName = ref(projectName)
 const inputElement: Ref<HTMLInputElement | null> = ref(null)
 const storeApp = useAppStore()
 
@@ -54,14 +55,15 @@ function enableEditMode() {
   isEditMode.value = true
 }
 
-async function exitEditModeWithChange(event: Event) {
+async function exitEditModeWithChange() {
   isEditMode.value = false
-  projectName.value = event.target != null ? (event.target as HTMLInputElement).value : projectName.value
+  projectName.value = editingProjectName.value
   await updateProjectName(props.project.id, projectName.value)
 }
 
 async function exitEditModeWithoutChange() {
   isEditMode.value = false
+  editingProjectName.value = projectName.value
 }
 
 async function updateProjectName(projectId: string, newName: string) {
@@ -93,7 +95,7 @@ async function clickDeleteProjectButton() {
     'Close',
     deleteProject,
     async () => { },
-    [props.project.name]
+    [projectName.value]
   )
 }
 </script>

From 21640ea6d6a731a7c37a1300873ecf0526e132a9 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 10:38:17 -0400
Subject: [PATCH 27/34] Trimming too long text.

---
 frontend/src/components/ProjectColumnComponent.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 451f9df2..03eafc38 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -8,7 +8,7 @@
       </div>
       <input ref="inputElement" v-else type="text" class="form-control" @blur="exitEditModeWithoutChange"
         @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" v-model="editingProjectName" />
-      <div v-if="!isEditMode" class="fw-semibold text-light project-name">
+      <div v-if="!isEditMode" class="fw-semibold text-light text-truncate project-name">
         {{ projectName }}
       </div>
     </div>
@@ -116,5 +116,6 @@ async function clickDeleteProjectButton() {
 
 .project-name {
   cursor: text;
+  max-width: 8em;
 }
 </style>

From fd90b7d0324892e03e8b0d34ab63a4fa79b4975e Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 10:55:25 -0400
Subject: [PATCH 28/34] Break the reference.

---
 frontend/src/components/ProjectColumnComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 03eafc38..621ba962 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -39,7 +39,7 @@ const isActive = computed(() => storeProject.lastProjectId == props.project.id)
 const isEditMode = ref(false)
 const isHover = ref(false)
 const projectName = ref(props.project.name)
-const editingProjectName = ref(projectName)
+const editingProjectName = ref(projectName.value)
 const inputElement: Ref<HTMLInputElement | null> = ref(null)
 const storeApp = useAppStore()
 

From 1d37fd093d35257b40e6a03e89d326f4c6a27ab4 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 10:56:49 -0400
Subject: [PATCH 29/34] Revert name when updating failed.

---
 frontend/src/components/ProjectColumnComponent.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 621ba962..66025766 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -57,7 +57,6 @@ function enableEditMode() {
 
 async function exitEditModeWithChange() {
   isEditMode.value = false
-  projectName.value = editingProjectName.value
   await updateProjectName(props.project.id, projectName.value)
 }
 
@@ -75,7 +74,9 @@ async function updateProjectName(projectId: string, newName: string) {
   } catch (error: any) {
     console.log('Unable to update project name.', error, projectId)
     storeApp.alertsError(`Unable to update project name, project id: ${projectId}`)
+    editingProjectName.value = projectName.value
   }
+  projectName.value = editingProjectName.value
 }
 
 async function deleteProject() {

From d677a485226d2b706e9e9b7b0d95a5aa8903c89e Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 10:59:47 -0400
Subject: [PATCH 30/34] Stop showing Delete Button when it's in edit mode.

---
 frontend/src/components/ProjectColumnComponent.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 66025766..29d34f6a 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -12,10 +12,11 @@
         {{ projectName }}
       </div>
     </div>
-    <div v-if="!isHover" class="expire text-white-50">
+    <div v-show="!isHover" class="expire text-white-50">
       {{ leftDays }}
     </div>
-    <button v-else type="button" class="btn text-light py-9" @click.stop="clickDeleteProjectButton">
+    <button v-show="isHover && !isEditMode" type="button" class="btn text-light py-9"
+      @click.stop="clickDeleteProjectButton">
       <font-awesome-icon :icon="['fas', 'trash']" />
     </button>
   </div>

From 070a4813f7bb14615793d48e1c0d0d0db9d418b9 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 11:01:56 -0400
Subject: [PATCH 31/34] Fix wrong argument.

---
 frontend/src/components/ProjectColumnComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 29d34f6a..46a2808e 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -58,7 +58,7 @@ function enableEditMode() {
 
 async function exitEditModeWithChange() {
   isEditMode.value = false
-  await updateProjectName(props.project.id, projectName.value)
+  await updateProjectName(props.project.id, editingProjectName.value)
 }
 
 async function exitEditModeWithoutChange() {
@@ -77,7 +77,7 @@ async function updateProjectName(projectId: string, newName: string) {
     storeApp.alertsError(`Unable to update project name, project id: ${projectId}`)
     editingProjectName.value = projectName.value
   }
-  projectName.value = editingProjectName.value
+  projectName.value = newName
 }
 
 async function deleteProject() {

From 918f2d86a0d9b9d7c406c50c51f56a7814b5e887 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 11:11:58 -0400
Subject: [PATCH 32/34] Format code.

---
 .../src/components/ProjectColumnComponent.vue | 37 +++++++++++++++----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 46a2808e..73842554 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,13 +1,26 @@
 <template>
-  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
-    :class="{ active: isActive }" @click.prevent="setupProject" @dblclick.prevent="enableEditMode"
-    @mouseover="isHover = true" @mouseleave="isHover = false">
+  <div
+    class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
+    :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" @blur="exitEditModeWithoutChange"
-        @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" v-model="editingProjectName" />
+      <input
+        ref="inputElement"
+        v-else
+        type="text"
+        class="form-control"
+        @blur="exitEditModeWithoutChange"
+        @keyup.esc="exitEditModeWithoutChange"
+        @keyup.enter="exitEditModeWithChange"
+        v-model="editingProjectName"
+      />
       <div v-if="!isEditMode" class="fw-semibold text-light text-truncate project-name">
         {{ projectName }}
       </div>
@@ -15,8 +28,12 @@
     <div v-show="!isHover" class="expire text-white-50">
       {{ leftDays }}
     </div>
-    <button v-show="isHover && !isEditMode" type="button" class="btn text-light py-9"
-      @click.stop="clickDeleteProjectButton">
+    <button
+      v-show="isHover && !isEditMode"
+      type="button"
+      class="btn text-light py-9"
+      @click.stop="clickDeleteProjectButton"
+    >
       <font-awesome-icon :icon="['fas', 'trash']" />
     </button>
   </div>
@@ -48,6 +65,10 @@ watch(inputElement, (newElement) => {
   newElement?.focus()
 })
 
+watch(projectName, (newValue) => {
+  editingProjectName.value = newValue
+})
+
 function setupProject() {
   storeProject.setLastProjectId(props.project.id)
 }
@@ -96,7 +117,7 @@ async function clickDeleteProjectButton() {
     'Delete',
     'Close',
     deleteProject,
-    async () => { },
+    async () => {},
     [projectName.value]
   )
 }

From 01cc6dc68f03c9183e6eae65b691262a95a7ffc2 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 11:13:03 -0400
Subject: [PATCH 33/34] Format code.

---
 .../src/components/ProjectColumnComponent.vue | 33 +++++--------------
 1 file changed, 8 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index 73842554..bf30fec7 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,26 +1,13 @@
 <template>
-  <div
-    class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
-    :class="{ active: isActive }"
-    @click.prevent="setupProject"
-    @dblclick.prevent="enableEditMode"
-    @mouseover="isHover = true"
-    @mouseleave="isHover = false"
-  >
+  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
+    :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"
-        @blur="exitEditModeWithoutChange"
-        @keyup.esc="exitEditModeWithoutChange"
-        @keyup.enter="exitEditModeWithChange"
-        v-model="editingProjectName"
-      />
+      <input ref="inputElement" v-else type="text" class="form-control" @blur="exitEditModeWithoutChange"
+        @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" v-model="editingProjectName" />
       <div v-if="!isEditMode" class="fw-semibold text-light text-truncate project-name">
         {{ projectName }}
       </div>
@@ -28,12 +15,8 @@
     <div v-show="!isHover" class="expire text-white-50">
       {{ leftDays }}
     </div>
-    <button
-      v-show="isHover && !isEditMode"
-      type="button"
-      class="btn text-light py-9"
-      @click.stop="clickDeleteProjectButton"
-    >
+    <button v-show="isHover && !isEditMode" type="button" class="btn text-light py-9"
+      @click.stop="clickDeleteProjectButton">
       <font-awesome-icon :icon="['fas', 'trash']" />
     </button>
   </div>
@@ -117,7 +100,7 @@ async function clickDeleteProjectButton() {
     'Delete',
     'Close',
     deleteProject,
-    async () => {},
+    async () => { },
     [projectName.value]
   )
 }

From be6381ef0539d5d329d3037e4ae291ec4aba6312 Mon Sep 17 00:00:00 2001
From: Fledge Shiu <xzk0701@gmail.com>
Date: Mon, 21 Aug 2023 11:15:44 -0400
Subject: [PATCH 34/34] Fix format conflict.

---
 .../src/components/ProjectColumnComponent.vue | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
index bf30fec7..73842554 100644
--- a/frontend/src/components/ProjectColumnComponent.vue
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -1,13 +1,26 @@
 <template>
-  <div class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
-    :class="{ active: isActive }" @click.prevent="setupProject" @dblclick.prevent="enableEditMode"
-    @mouseover="isHover = true" @mouseleave="isHover = false">
+  <div
+    class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
+    :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" @blur="exitEditModeWithoutChange"
-        @keyup.esc="exitEditModeWithoutChange" @keyup.enter="exitEditModeWithChange" v-model="editingProjectName" />
+      <input
+        ref="inputElement"
+        v-else
+        type="text"
+        class="form-control"
+        @blur="exitEditModeWithoutChange"
+        @keyup.esc="exitEditModeWithoutChange"
+        @keyup.enter="exitEditModeWithChange"
+        v-model="editingProjectName"
+      />
       <div v-if="!isEditMode" class="fw-semibold text-light text-truncate project-name">
         {{ projectName }}
       </div>
@@ -15,8 +28,12 @@
     <div v-show="!isHover" class="expire text-white-50">
       {{ leftDays }}
     </div>
-    <button v-show="isHover && !isEditMode" type="button" class="btn text-light py-9"
-      @click.stop="clickDeleteProjectButton">
+    <button
+      v-show="isHover && !isEditMode"
+      type="button"
+      class="btn text-light py-9"
+      @click.stop="clickDeleteProjectButton"
+    >
       <font-awesome-icon :icon="['fas', 'trash']" />
     </button>
   </div>
@@ -100,7 +117,7 @@ async function clickDeleteProjectButton() {
     'Delete',
     'Close',
     deleteProject,
-    async () => { },
+    async () => {},
     [projectName.value]
   )
 }