Collection View

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'
 

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]
 }

frontend/src/components/ProjectColumnComponent.vue

@@ -0,0 +1,107 @@
+<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="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"
+      />
+      <div v-if="!isEditMode" class="fw-semibold text-light">
+        {{ projectName }}
+      </div>
+    </div>
+    <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>
+
+<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'
+
+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()
+
+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}`)
+  }
+}
+
+async function deleteProject() {
+  const toBeDeletedProject = props.project
+  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}`)
+  }
+}
+</script>
+
+<style scoped>
+.expire {
+  font-size: 0.8em;
+}
+
+.active {
+  background-color: orange;
+}
+</style>

frontend/src/components/SideBarComponent.vue

@@ -0,0 +1,57 @@
+<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"
+        @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"
+      />
+    </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">
+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()
+}
+
+function deleteProject(project: Project) {
+  projects.value = projects.value.filter((element) => element.id != project.id)
+}
+</script>

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'

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: '/collection',
+      name: 'collection',
+      component: CollectionView
+    },
     {
       path: '/privacy-and-cookie-statement',
       name: 'PrivacyCookieStatement',

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: unknown) {
+    console.log('Unable to create a new project.', error)
+    storeApp.alertsError('Unable to create a new project.')
+    return null
+  }
+}

frontend/src/views/CollectionView.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container-fluid vh-100">
+    <div class="row">
+      <div class="col col-3 sticky-top sidebar">
+        <SideBarComponent />
+      </div>
+      <div class="col content d-flex flex-column justify-content-between">
+        <div>
+          <ProjectView v-if="hasActivatedProject" />
+        </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'
+import { useProjectIdStore } from '@/stores/stores'
+import { computed } from 'vue'
+const storeProjectId = useProjectIdStore()
+const hasActivatedProject = computed(() => storeProjectId.projectId != null)
+</script>
+
+<style scoped>
+.collection-container {
+  height: 100vh;
+}
+
+.sidebar {
+  background-color: var(--main-color);
+  height: 100vh;
+}
+
+.content {
+  min-height: 100vh;
+}
+</style>

frontend/src/views/ProjectView.vue

@@ -114,13 +114,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 +138,12 @@ 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 }))
+})
+
 if (storeInitialFileStore.initialFiles.length == 0) {
   const apiFiles = await getAllFiles(storeProjectId.projectId)
   apiFiles.forEach((item) => files.value.set(item.id, { file: item, uploadedSize: item.filesize }))

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'
@@ -12,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)
@@ -40,5 +49,8 @@ if (
   (await validateUser())
 ) {
   setupProjectId()
+  if (await validateUser()) {
+    router.push('/collection')
+  }
 }
 </script>