Collection View

frontend/src/App.vue

@@ -1,18 +1,14 @@
 <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 />
+  <ModalComponent />
 </template>
 
 <script setup lang="ts">
 import AlertsComponentVue from './components/AlertsComponent.vue'
-import FooterComponent from './components/FooterComponent.vue'
+import ModalComponent from './components/ModalComponent.vue'
 import { onMounted, ref } from 'vue'
 import { useAppStore } from './stores/stores'
 

frontend/src/components/ContactPage.vue

@@ -0,0 +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.
+</template>

frontend/src/components/DragToStartProjectComponent.vue

@@ -8,16 +8,14 @@
 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()
 
 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]
 }
@@ -54,6 +43,7 @@ function setProjectId(project: Project | null) {
   if (project == null) {
     return
   }
-  storeProjectId.setProjectId(project.id)
+  storeProject.setProjects([project])
+  storeProject.setLastProjectId(project.id)
 }
 </script>

frontend/src/components/ModalComponent.vue

@@ -1,35 +1,40 @@
 <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>
+          <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')"
+            @click.prevent="clickButton(storeModal.clickSecondaryButton)"
           >
-            {{ props.secondaryButtonTitle }}
+            {{ storeModal.secondaryButtonTitle }}
           </button>
           <button
             type="button"
             class="btn btn-primary"
             data-bs-dismiss="modal"
-            @click.prevent="emit('clickPrimaryButton')"
+            @click.prevent="clickButton(storeModal.clickPrimaryButton)"
           >
-            {{ props.primaryButtonTitle }}
+            {{ storeModal.primaryButtonTitle }}
           </button>
         </div>
       </div>
@@ -38,25 +43,33 @@
 </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>

frontend/src/components/ProjectColumnComponent.vue

@@ -0,0 +1,127 @@
+<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="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">
+        {{ projectName }}
+      </div>
+    </div>
+    <div v-if="!isHover" class="expire text-white-50">
+      {{ leftDays }}
+    </div>
+    <button v-else type="button" class="btn text-light py-9" @click.stop="clickDeleteProjectButton">
+      <font-awesome-icon :icon="['fas', 'trash']" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '@/constants'
+import { useAppStore, useModalStore, useProjectStore } 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 storeProject = useProjectStore()
+const storeModal = useModalStore()
+const isActive = computed(() => storeProject.lastProjectId == 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() {
+  storeProject.setLastProjectId(props.project.id)
+}
+
+function enableEditMode() {
+  isEditMode.value = true
+}
+
+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
+  }
+  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() {
+  try {
+    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', props.project)
+}
+
+async function clickDeleteProjectButton() {
+  storeModal.showModal(
+    'Are you sure you want to delete:',
+    'Delete',
+    'Close',
+    deleteProject,
+    async () => {},
+    [props.project.name]
+  )
+}
+</script>
+
+<style scoped>
+.expire {
+  font-size: 0.8em;
+}
+
+.active {
+  background-color: orange;
+}
+
+.project-column {
+  cursor: pointer;
+  height: 3em;
+}
+</style>

frontend/src/components/SideBarComponent.vue

@@ -0,0 +1,50 @@
+<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 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>
+      <p class="text-light"><router-link to="/contact" class="link-light">Contact</router-link></p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProjectColumnComponent from './ProjectColumnComponent.vue'
+import type { Project } from '@/constants'
+import { useProjectStore } from '@/stores/stores'
+import { createNewProject, updateProjects } from '@/utils'
+const storeProject = useProjectStore()
+
+await updateProjects()
+
+async function createAndUpdateProject() {
+  await createNewProject('New Project')
+  await updateProjects()
+}
+
+function removeProjectFromList(project: Project) {
+  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>

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'