V2.0.0

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>

pages/datasets/[datasetid]/index.vue

@@ -53,6 +53,9 @@ const totalDownloadApprovals = ref(0);
 const totalDownloadApprovalforAllVersions = ref(0);
 const currentTab = ref("allVersions");
 
+const isLatestVersion = ref(false);
+const latestVersionId = ref("");
+
 const totalViewCountSpinner = ref(true);
 const totalDownloadApprovalSpinner = ref(true);
 
@@ -163,6 +166,14 @@ if (dataset.value) {
   if (dataset.value?.metadata.readme) {
     markdownToHtml.value = sanitize(await parse(dataset.value.metadata.readme));
   }
+
+  if (dataset.value?.versions.length > 0) {
+    latestVersionId.value = dataset.value?.versions[0].id;
+
+    if (dataset.value?.versions[0].id === dataset.value?.id) {
+      isLatestVersion.value = true;
+    }
+  }
 }
 
 const navigate = (target: string) => {
@@ -275,7 +286,17 @@ const onTabChange = () => {
 
         <p class="hidden">{{ dataset?.description }}</p>
 
-        <n-flex>
+        <n-alert v-if="!isLatestVersion" type="warning" class="my-3 mr-3">
+          A newer version of this dataset is available. Please refer to the
+          <NuxtLink
+            :to="`/datasets/${latestVersionId}`"
+            class="text-blue-500 hover:underline"
+            >latest version</NuxtLink
+          >
+          of this dataset.
+        </n-alert>
+
+        <n-flex v-else>
           <NuxtLink :to="`/datasets/${dataset?.id}/access`">
             <n-button size="large" type="info" secondary class="my-3">
               <template #icon>
@@ -332,6 +353,7 @@ const onTabChange = () => {
               :key="index"
               v-slot="{ setActive, isActive }"
               as="li"
+              class="flex items-center"
               @click="navigate(item.label)"
             >
               <button
@@ -703,7 +725,10 @@ const onTabChange = () => {
 
             <SideCitationViewer :id="dataset?.id || ''" />
 
-            <SideVersionSelector :id="dataset?.id || ''" />
+            <SideVersionSelector
+              :id="dataset?.id || ''"
+              :versions="dataset?.versions || []"
+            />
           </n-flex>
         </div>
       </div>

server/api/citation/[datasetid].get.ts

@@ -42,7 +42,7 @@ export default defineEventHandler(async (event) => {
     config.templates.add(format, csl);
   }
 
-  const cite = new Cite("10.60775/fairhub.1");
+  const cite = new Cite(`10.60775/fairhub.${datasetid}`);
 
   const requestedCitationFormatText: string = cite.format("bibliography", {
     template: format,

server/api/datasets/[datasetid]/index.get.ts

@@ -43,6 +43,28 @@ export default defineEventHandler(async (event) => {
 
   const datasetAdditionalData = additionalData;
 
+  const fairhubDatasetId = publishedDataset.dataset_id;
+
+  // get all datasets with the same dataset_id
+  // This is the same as all versions of the same dataset in fairhub study management
+  const relatedDatasets = await prisma.published_dataset.findMany({
+    orderBy: {
+      created_at: "desc",
+    },
+    where: {
+      dataset_id: fairhubDatasetId,
+    },
+  });
+
+  const versions: VersionArray = relatedDatasets.map((relatedDataset) => {
+    return {
+      id: Number(relatedDataset.id).toString(),
+      title: relatedDataset.version_title,
+      createdAt: Number(BigInt(relatedDataset.created_at)),
+      doi: relatedDataset.doi,
+    };
+  });
+
   const dataset: Dataset = {
     id: datasetId,
     title: publishedDataset.title,
@@ -64,6 +86,7 @@ export default defineEventHandler(async (event) => {
     study_title: publishedDataset.study_title,
     version_id: publishedDataset.version_id,
     version_title: publishedDataset.version_title,
+    versions,
   };
 
   return dataset;

server/api/dev/dev.http

@@ -0,0 +1 @@
+POST http://localhost:3000/api/dev

server/api/dev/index.post.ts

@@ -3,59 +3,60 @@ import DatasetRecord from "../../../dev/datasetRecord.json";
 export default defineEventHandler(async (_event) => {
   console.log("event", DatasetRecord);
 
-  const firstRecord = await prisma.published_dataset.findUnique({
+  const secondRecord = await prisma.published_dataset.findUnique({
     where: {
-      id: "1",
+      id: "2",
     },
   });
 
-  if (!firstRecord) {
+  if (!secondRecord) {
     console.log("No record found, exiting function");
     throw createError({
       statusCode: 500,
       statusMessage: "No record found",
     });
   }
 
-  throw createError({
-    statusCode: 500,
-    statusMessage: "This function is disabled",
-  });
+  // throw createError({
+  //   statusCode: 500,
+  //   statusMessage: "This function is disabled",
+  // });
 
   /**
    * ! disabling the update operation
    */
 
-  // const updatedRecord = await prisma.published_dataset.update({
-  //   data: {
-  //     title: DatasetRecord.title,
-  //     dataset_id: DatasetRecord.dataset_id,
-  //     description: DatasetRecord.description,
-  //     doi: DatasetRecord.doi,
-  //     files: DatasetRecord.files,
-  //     published_metadata: DatasetRecord.published_metadata,
-  //     study_id: DatasetRecord.study_id,
-  //     study_title: DatasetRecord.study_title,
-  //     version_id: DatasetRecord.version_id,
-  //     version_title: DatasetRecord.version_title,
-  //   },
-  //   where: {
-  //     id: "1",
-  //   },
-  // });
+  const updatedRecord = await prisma.published_dataset.update({
+    data: {
+      title: DatasetRecord.title,
+      data: DatasetRecord.data,
+      dataset_id: DatasetRecord.dataset_id,
+      description: DatasetRecord.description,
+      doi: DatasetRecord.doi,
+      files: DatasetRecord.files,
+      published_metadata: DatasetRecord.published_metadata,
+      study_id: DatasetRecord.study_id,
+      study_title: DatasetRecord.study_title,
+      version_id: DatasetRecord.version_id,
+      version_title: DatasetRecord.version_title,
+    },
+    where: {
+      id: "2",
+    },
+  });
 
-  // if (!updatedRecord) {
-  //   console.log("No record updated, exiting function");
-  //   throw createError({
-  //     statusCode: 500,
-  //     statusMessage: "No record updated",
-  //   });
-  // }
+  if (!updatedRecord) {
+    console.log("No record updated, exiting function");
+    throw createError({
+      statusCode: 500,
+      statusMessage: "No record updated",
+    });
+  }
 
-  // console.log("Updated record", updatedRecord);
+  console.log("Updated record", updatedRecord);
 
-  // return {
-  //   message: "Updated record",
-  //   statusCode: 200,
-  // };
+  return {
+    message: "Updated record",
+    statusCode: 200,
+  };
 });

types/dataset.d.ts

@@ -505,6 +505,7 @@ interface Dataset {
   files: FolderStructure[];
   data: AdditionalData;
   created_at: number;
+  versions: VersionArray;
 }
 
 interface DatasetArray extends Array<Dataset> {}