Merge pull request #154 from AI-READI/staging

Staging

components/files/FolderViewer.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { TreeOption } from "naive-ui";
-import { NButton } from "naive-ui";
+import { NButton, NDivider } from "naive-ui";
+import prettyBytes from "pretty-bytes";
 import identifierType from "../../dev/related_identifier.json";
 import { Icon } from "#components";
+
 const drawerActive = ref(false);
 
 const props = defineProps({
@@ -12,10 +14,22 @@ const props = defineProps({
   },
 });
 
-const drawerTitle = ref("");
-const drawerDescription = ref<string | undefined>("");
-const drawerIcon = ref("");
-const drawerText = ref("");
+const drawerDetails = ref<{
+  title: string;
+  description: string | undefined;
+  icon: string;
+  numberOfFiles: number;
+  size: number | undefined;
+  text: string;
+}>({
+  title: "",
+  description: "",
+  icon: "",
+  numberOfFiles: 0,
+  size: 0,
+  text: "",
+});
+
 const relationType = ref<RelatedIdentifier[] | undefined>(undefined);
 
 function convertMetadataFile(
@@ -67,15 +81,27 @@ function convertDirectory(
       }),
     suffix: () =>
       h(
-        NButton,
+        "div",
         {
-          class: "",
-          onClick: () => {
-            openMetadataDrawer([...previousPath, directory.directoryName]);
-          },
-          size: "tiny",
+          class: "flex",
         },
-        { default: () => "Learn More" },
+        [
+          directory.size
+            ? h("span", { class: "text-sm" }, prettyBytes(directory.size) || "")
+            : null,
+          directory.size ? h(NDivider, { vertical: true }) : null,
+          h(
+            NButton,
+            {
+              class: "",
+              onClick: () => {
+                openMetadataDrawer([...previousPath, directory.directoryName]);
+              },
+              size: "tiny",
+            },
+            { default: () => "Learn More" },
+          ),
+        ],
       ),
   };
 }
@@ -140,29 +166,44 @@ const openMetadataDrawer = (currentPath: Array<string>) => {
   }
 
   if (filetype) {
-    drawerTitle.value = filetype.metadataFileName;
-    drawerIcon.value = "iconamoon:file-fill";
-    drawerText.value = "This file";
-    drawerDescription.value = filetype.metadataFileDescription;
+    drawerDetails.value = {
+      title: filetype.metadataFileName,
+      description: filetype.metadataFileDescription,
+      icon: "iconamoon:file-fill",
+      numberOfFiles: 0,
+      size: 0,
+      text: "This file",
+    };
     relationType.value = filetype.relatedIdentifier?.map((r) => {
       return {
         ...r,
         relationType: getRelationName(r.relationType),
       };
     });
   } else if (foldertype) {
-    drawerTitle.value = foldertype.directoryName;
-    drawerIcon.value = "ic:baseline-folder";
-    drawerText.value = "This directory";
-    drawerDescription.value = foldertype.directoryDescription;
+    drawerDetails.value = {
+      title: foldertype.directoryName,
+      description: foldertype.directoryDescription,
+      icon: "ic:baseline-folder",
+      numberOfFiles: foldertype.numberOfFiles || 0,
+      size: foldertype.size || 0,
+      text: "This directory",
+    };
     relationType.value = foldertype.relatedIdentifier?.map((r) => {
       return {
         ...r,
         relationType: getRelationName(r.relationType),
       };
     });
   } else {
-    drawerDescription.value = "No metadata found for this file";
+    drawerDetails.value = {
+      title: "No metadata found for this file",
+      description: "",
+      icon: "iconamoon:file-fill",
+      numberOfFiles: 0,
+      size: 0,
+      text: "This file",
+    };
   }
 
   drawerActive.value = true;
@@ -187,17 +228,31 @@ const openMetadataDrawer = (currentPath: Array<string>) => {
     >
       <n-drawer-content>
         <n-flex vertical>
-          <div class="mb-1 text-lg font-bold">
-            <Icon :name="drawerIcon" size="22" color="#0284c7" />
-            {{ drawerTitle }}
-          </div>
+          <n-flex justify="space-between">
+            <div class="mb-1 text-lg font-bold">
+              <Icon :name="drawerDetails.icon" size="22" color="#0284c7" />
+              {{ drawerDetails.title }}
+            </div>
+
+            <div class="flex items-center">
+              <p v-if="drawerDetails.numberOfFiles">
+                {{ drawerDetails.numberOfFiles }} files
+              </p>
+
+              <n-divider v-if="drawerDetails.numberOfFiles" vertical />
+
+              <p v-if="drawerDetails.size">
+                {{ prettyBytes(drawerDetails.size) }}
+              </p>
+            </div>
+          </n-flex>
 
           <p class="text-md my-1 w-full border-b pb-2 font-semibold">
             Description
           </p>
 
-          <p v-if="drawerDescription">
-            {{ drawerDescription }}
+          <p v-if="drawerDetails.description">
+            {{ drawerDetails.description }}
           </p>
 
           <p v-else>
@@ -215,7 +270,7 @@ const openMetadataDrawer = (currentPath: Array<string>) => {
               class="mt-4 flex"
             >
               <li>
-                {{ drawerText }}
+                {{ drawerDetails.text }}
                 <span class="mr-2 lowercase">{{ type.relationType }}</span>
 
                 <a

components/side/CitationViewer.vue

@@ -111,7 +111,8 @@ onMounted(() => {
 
         <div v-else class="py-2">
           <n-alert v-if="citationError" type="error">
-            Something went wrong with creating the citation
+            Something went wrong with generating the citation. Please try again
+            later.
           </n-alert>
 
           <p v-else class="text-sm">{{ citation?.formattedText }}</p>

components/side/VersionSelector.vue

@@ -1,66 +1,52 @@
 <script setup lang="ts">
-const props = defineProps({
+defineProps({
   id: {
     required: true,
     type: String,
   },
-});
-
-const { data: versions, pending } = await useFetch(
-  `/api/versions/${props.id}`,
-  {
-    lazy: true,
-    server: false,
+  versions: {
+    required: true,
+    type: Array as PropType<VersionArray>,
   },
-);
-
-// todo: add a watchEffect for the error responses
+});
 </script>
 
 <template>
   <n-flex vertical class="rounded-xl border border-sky-200 bg-white pb-5 pt-3">
     <n-flex vertical :size="[0, 0]">
       <h3 class="mb-3 px-4">Versions</h3>
 
-      <TransitionFade>
-        <div v-if="pending" class="flex justify-center p-2">
-          <Icon name="svg-spinners:3-dots-scale" size="30" />
-        </div>
-
-        <div v-else>
-          <n-flex
-            v-for="version in versions"
-            :key="version.id"
-            justify="space-between"
-            align="start"
-            class="px-4 py-2 transition-all hover:bg-blue-50"
-            :class="{
-              '!bg-sky-100': version.id === id,
-            }"
+      <n-flex
+        v-for="version in versions"
+        :key="version.id"
+        justify="space-between"
+        align="start"
+        class="px-4 py-2 transition-all hover:bg-blue-50"
+        :class="{
+          '!bg-sky-100': version.id === id,
+        }"
+      >
+        <div class="flex flex-col space-y-1">
+          <NuxtLink
+            :to="`/datasets/${version.id}`"
+            class="text-sm font-medium transition-all hover:text-slate-600 hover:underline"
           >
-            <div class="flex flex-col space-y-1">
-              <NuxtLink
-                :to="`/datasets/${version.id}`"
-                class="text-sm font-medium transition-all hover:text-slate-600 hover:underline"
-              >
-                Version {{ version.title }}
-              </NuxtLink>
-
-              <NuxtLink
-                :to="`https://doi.org/${version.doi}`"
-                target="_blank"
-                class="text-sm transition-all hover:text-slate-600 hover:underline"
-              >
-                {{ version.doi }}
-              </NuxtLink>
-            </div>
+            Version {{ version.title }}
+          </NuxtLink>
 
-            <p class="text-right text-xs text-gray-500">
-              {{ $dayjs.unix(version.createdAt).format("MMM D, YYYY") }}
-            </p>
-          </n-flex>
+          <NuxtLink
+            :to="`https://doi.org/${version.doi}`"
+            target="_blank"
+            class="text-sm transition-all hover:text-slate-600 hover:underline"
+          >
+            {{ version.doi }}
+          </NuxtLink>
         </div>
-      </TransitionFade>
+
+        <p class="text-right text-xs text-gray-500">
+          {{ $dayjs.unix(version.createdAt).format("MMM D, YYYY") }}
+        </p>
+      </n-flex>
     </n-flex>
   </n-flex>
 </template>