Upload files Table

backend/api/constants.py

@@ -30,7 +30,7 @@ class BackendConf:
     cookie_expiration_days = int(os.getenv("COOKIE_EXPIRATION_DAYS", "30"))
     api_version_prefix = "/v1"
     project_expire_after = datetime.timedelta(days=7)
-    project_quota = humanfriendly.parse_size(os.getenv("PROJECT_QUOTA", "100MiB"))
+    project_quota = humanfriendly.parse_size(os.getenv("PROJECT_QUOTA", "100MB"))
 
     chunk_size = humanfriendly.parse_size(os.getenv("CHUNK_SIZE", "2MiB"))
 

dev/docker-compose.yml

@@ -36,8 +36,8 @@ services:
       - 8081:80
     environment:
       - NAUTILUS_WEB_API=http://localhost:8080/v1
-      - NAUTILUS_FILE_QUOTA=104857600
-      - NAUTILUS_PROJECT_QUOTA=104857600
+      - NAUTILUS_FILE_QUOTA=100MB
+      - NAUTILUS_PROJECT_QUOTA=100MB
     depends_on:
       - database
   backend-tools:

frontend/package.json

@@ -29,6 +29,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
     "@tsconfig/node18": "^2.0.1",
+    "@types/bootstrap": "^5.2.6",
     "@types/node": "^18.16.8",
     "@types/uuid": "^9.0.2",
     "@vitejs/plugin-vue": "^4.2.3",
@@ -37,6 +38,9 @@
     "@vue/tsconfig": "^0.4.0",
     "eslint": "^8.39.0",
     "eslint-plugin-vue": "^9.11.0",
+    "filesize": "^10.0.9",
+    "human-filetypes": "^0.2.1",
+    "moment": "^2.29.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "typescript": "~5.0.4",

frontend/public/environ.json

@@ -1,5 +1,5 @@
 {
   "NAUTILUS_WEB_API": "http://localhost:8080/v1",
-  "NAUTILUS_FILE_QUOTA": 104857600,
-  "NAUTILUS_PROJECT_QUOTA": 104857600
+  "NAUTILUS_FILE_QUOTA": 100000000,
+  "NAUTILUS_PROJECT_QUOTA": 100000000
 }

frontend/src/components/AlertsComponent.vue

@@ -1,16 +1,20 @@
 <template>
-  <div class="position-absolute top-0 end-0 mt-1 me-1">
-    <div v-for="[key, item] in storeApp.alertMessages" :key="key">
-      <div class="alert px-1" :class="'alert-' + item.type" role="alert">
-        <div class="container">
-          <div class="row justify-content-between">
-            <div class="col-md-auto">
-              {{ item.message }}
-            </div>
-            <div class="col-md-auto">
-              <button type="button" class="btn p-0" @click="storeApp.clearError(key)">
-                <font-awesome-icon :icon="['fas', 'xmark']" />
-              </button>
+  <!-- The alert component should have the same z-index as modal-backdrop. -->
+  <!-- See: https://getbootstrap.com/docs/5.3/layout/z-index/ -->
+  <div class="position-fixed top-0 end-0 mt-1 me-1" style="z-index: 1050">
+    <div class="position-sticky">
+      <div v-for="[key, item] in storeApp.alertMessages" :key="key">
+        <div class="alert px-1" :class="'alert-' + item.type" role="alert">
+          <div class="container">
+            <div class="row justify-content-between">
+              <div class="col-md-auto">
+                {{ item.message }}
+              </div>
+              <div class="col-md-auto">
+                <button type="button" class="btn p-0" @click="storeApp.clearError(key)">
+                  <font-awesome-icon :icon="['fas', 'xmark']" />
+                </button>
+              </div>
             </div>
           </div>
         </div>

frontend/src/components/DragToStartField.vue

@@ -1,62 +1,33 @@
 <template>
   <div class="d-flex justify-content-md-center">
-    <div
-      class="card border-3 border-3 rounded-3 drop"
-      :data-active="isActive"
-      @dragenter.prevent="setActive"
-      @dragover.prevent="setActive"
-      @dragleave.prevent="setInactive"
-      @drop.prevent="dropFiles"
-      :class="{ 'bg-light': isActive }"
-    >
-      <div class="card-body d-flex justify-content-center align-items-center">
-        <h3 class="card-title">Drop File to Start!</h3>
+    <UploadFilesComponent @drop-files-handler="dropFiles" @update-is-active="updateIsActive">
+      <div
+        class="card border-3 rounded-3 drop"
+        :data-active="isActive"
+        :class="{ 'bg-light': isActive }"
+      >
+        <div class="card-body d-flex justify-content-center align-items-center">
+          <h3 class="card-title">Drop File to Start!</h3>
+        </div>
       </div>
-    </div>
+    </UploadFilesComponent>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from '@/stores/stores'
 import { ref } from 'vue'
+import UploadFilesComponent from './UploadFilesComponent.vue'
 const isActive = ref(false)
-const storeApp = useAppStore()
 
+function updateIsActive(newValue: boolean) {
+  isActive.value = newValue
+}
 const emit = defineEmits<{
   dropFilesHandler: [files: FileList, uploadFileSize: number]
 }>()
 
-function setActive() {
-  isActive.value = true
-}
-function setInactive() {
-  isActive.value = false
-}
-async function dropFiles(event: DragEvent) {
-  isActive.value = false
-  let files = event.dataTransfer?.files
-
-  if (files == undefined) {
-    return
-  }
-
-  let totalSize = 0
-
-  for (const file of files) {
-    if (file.size > storeApp.constants.env.NAUTILUS_FILE_QUOTA) {
-      storeApp.alertsWarning(`${file.name}'s exceeds the quota`)
-      return
-    }
-
-    if (file.size + totalSize > storeApp.constants.env.NAUTILUS_PROJECT_QUOTA) {
-      storeApp.alertsWarning('Uploading files exceed the quota')
-      return
-    }
-
-    totalSize += file.size
-  }
-
-  emit('dropFilesHandler', files, totalSize)
+async function dropFiles(files: FileList, uploadFileSize: number) {
+  emit('dropFilesHandler', files, uploadFileSize)
 }
 </script>
 
@@ -68,9 +39,4 @@ async function dropFiles(event: DragEvent) {
   border-color: var(--main-color);
   color: var(--main-color);
 }
-
-.isActive {
-  background-color: var(--main-color);
-  opacity: 0.6;
-}
 </style>

frontend/src/components/FileTableHeaderComponent.vue

@@ -0,0 +1,135 @@
+<template>
+  <tr>
+    <th scope="col">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        value=""
+        :indeterminate="isIndeterminate"
+        :checked="isCheckedAll"
+        @change.prevent="toggleSelectAllFiles"
+      />
+    </th>
+    <th scope="col">
+      <SortButton
+        title="Name"
+        :increase-function="sortByName"
+        :decrease-function="sortByNameReversed"
+        @update-compare-function="updateCompareFunction"
+      />
+    </th>
+    <th scope=" col">
+      <SortButton
+        title="File Size"
+        :increase-function="sortBySizeDescending"
+        :decrease-function="sortBySizeAscending"
+        @update-compare-function="updateCompareFunction"
+      />
+    </th>
+    <th scope="col">
+      <SortButton
+        title="Kind"
+        :increase-function="sortByKindNameReversed"
+        :decrease-function="sortByKindName"
+        @update-compare-function="updateCompareFunction"
+      />
+    </th>
+    <th scope="col">
+      <SortButton
+        title="Date Uploaded"
+        :increase-function="sortByUploadedDateDescending"
+        :decrease-function="sortByUploadedDateAscending"
+        @update-compare-function="updateCompareFunction"
+      />
+    </th>
+    <th scope="col">
+      <SortButton
+        title="Status"
+        :increase-function="sortByStatusNameReversed"
+        :decrease-function="sortByStatusName"
+        @update-compare-function="updateCompareFunction"
+      />
+    </th>
+    <th scope="align-middle">Metadata</th>
+    <th scope="col">
+      <button
+        type="button"
+        class="btn border-0"
+        :disabled="isDisableDeleteButton"
+        @click.prevent="emit('deleteSelectedFiles')"
+      >
+        <font-awesome-icon :icon="['fas', 'trash']" />
+      </button>
+    </th>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import type { ClientVisibleFile } from '@/constants'
+import SortButton from './SortButton.vue'
+import type { CompareFunctionType } from '@/constants'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  selectedFiles: Map<string, boolean>
+  files: Map<string, ClientVisibleFile>
+}>()
+
+const emit = defineEmits<{
+  updateSelectFiles: [newValue: Map<string, boolean>]
+  deleteSelectedFiles: []
+  updateCompareFunction: [
+    newFunction: (a: [string, ClientVisibleFile], b: [string, ClientVisibleFile]) => number
+  ]
+}>()
+
+const isIndeterminate = computed(
+  () => props.selectedFiles.size != 0 && props.selectedFiles.size < props.files.size
+)
+const isCheckedAll = computed(
+  () => props.selectedFiles.size != 0 && props.selectedFiles.size == props.files.size
+)
+const isDisableDeleteButton = computed(() => props.selectedFiles.size == 0)
+
+/** Start to define compare functions **/
+const sortByName: CompareFunctionType = (a, b) => (a[1].file.title > b[1].file.title ? 1 : -1)
+const sortByNameReversed: CompareFunctionType = (a, b) =>
+  a[1].file.title < b[1].file.title ? 1 : -1
+
+const sortBySizeAscending: CompareFunctionType = (a, b) =>
+  a[1].file.filesize > b[1].file.filesize ? 1 : -1
+const sortBySizeDescending: CompareFunctionType = (a, b) =>
+  a[1].file.filesize < b[1].file.filesize ? 1 : -1
+
+const sortByKindName: CompareFunctionType = (a, b) => (a[1].file.type > b[1].file.type ? 1 : -1)
+const sortByKindNameReversed: CompareFunctionType = (a, b) =>
+  a[1].file.type < b[1].file.type ? 1 : -1
+
+const sortByUploadedDateAscending: CompareFunctionType = (a, b) =>
+  a[1].file.uploaded_on > b[1].file.uploaded_on ? 1 : -1
+const sortByUploadedDateDescending: CompareFunctionType = (a, b) =>
+  a[1].file.uploaded_on < b[1].file.uploaded_on ? 1 : -1
+
+const sortByStatusName: CompareFunctionType = (a, b) =>
+  a[1].file.status > b[1].file.status ? 1 : -1
+const sortByStatusNameReversed: CompareFunctionType = (a, b) =>
+  a[1].file.status < b[1].file.status ? 1 : -1
+
+/** End of definition**/
+
+async function toggleSelectAllFiles() {
+  let newSelectedFiles: Map<string, boolean> = new Map()
+  if (props.selectedFiles.size < props.files.size) {
+    props.files.forEach((_, key) => {
+      newSelectedFiles.set(key, true)
+    })
+  } else {
+    newSelectedFiles.clear()
+  }
+  emit('updateSelectFiles', newSelectedFiles)
+}
+
+function updateCompareFunction(newValue: CompareFunctionType) {
+  emit('updateCompareFunction', newValue)
+}
+</script>