fix: dataset new workflow

src/stores/dataset.ts

@@ -12,7 +12,7 @@ export const useDatasetStore = defineStore("dataset", () => {
     title: "",
     created_at: 0,
     description: "",
-    updated_at: 0,
+    updated_on: 0,
   });
 
   const fetchAllDatasets = async (_studyId: string) => {
@@ -28,7 +28,7 @@ export const useDatasetStore = defineStore("dataset", () => {
           title: "Dataset 1",
           created_at: 0,
           description: "Dataset 1 description",
-          updated_at: 0,
+          updated_on: 0,
         },
       ];
     }

src/types/Dataset.d.ts

@@ -1,9 +1,12 @@
+import { Version } from "@/types/Version";
+
 export interface Dataset {
   id: string;
   title: string;
   created_at: number;
   description: string;
-  updated_at: number;
+  latest_version?: Version[] | null;
+  updated_on: number;
 }
 
 export interface DatasetTitle {

src/views/study/dataset/overview/DatasetOverview.vue

@@ -14,7 +14,7 @@ const dataset = ref<Dataset>({
   title: "",
   created_at: 0,
   description: "",
-  updated_at: 0,
+  updated_on: 0,
 });
 
 const routeParams = {

src/views/study/dataset/publish/versions/PublishAllVersions.vue

@@ -205,7 +205,7 @@ const deleteVersion = async (id: string) => {
                         <f-icon icon="ph:eye-fill" />
                       </template>
 
-                      View dataset on data.fairhub.io
+                      View dataset on fairhub.io
                     </n-button>
                   </a>
                 </template>

src/views/study/datasets/AllDatasets.vue

@@ -21,11 +21,9 @@ const routeParams = {
 };
 
 onBeforeMount(async () => {
-  const studyId = routeParams.studyId as string;
-
   sidebarStore.setAppSidebarCollapsed(false);
 
-  const response = await fetch(`${baseURL}/study/${studyId}/dataset`, {
+  const response = await fetch(`${baseURL}/study/${routeParams.studyId}/dataset`, {
     method: "GET",
   });
 
@@ -38,17 +36,42 @@ onBeforeMount(async () => {
   }
 
   const data = await response.json();
-
-  console.log(data);
-
   datasets.value = data;
+  // loop datasets to fetch versions for each
+  console.log(data);
 });
 
 const navigateToDataset = (datasetId: string) => {
   sidebarStore.setAppSidebarCollapsed(true);
 
   router.push({ name: "dataset:overview", params: { datasetId } });
 };
+
+const navigateToNewVersion = (datasetId: string) => {
+  router.push({
+    name: "dataset:publish:versions:new",
+    params: {
+      datasetId,
+      studyId: routeParams.studyId,
+    },
+  });
+};
+
+const navigateToDatasetVersion = (datasetId: string) => {
+  router.push({
+    name: "dataset:publish:versions",
+    params: {
+      datasetId,
+      studyId: routeParams.studyId,
+    },
+  });
+};
+
+const draftAndNonExistingVersions = computed(() =>
+  datasets.value.filter((d) => d.latest_version === null)
+);
+
+const publishedVersions = computed(() => datasets.value.filter((d) => d.latest_version !== null));
 </script>
 
 <template>
@@ -72,7 +95,7 @@ const navigateToDataset = (datasetId: string) => {
             <f-icon icon="ion:add-circle-outline" />
           </template>
 
-          Create a new dataset
+          Publish a new dataset
         </n-button>
       </RouterLink>
     </n-space>
@@ -104,62 +127,112 @@ const navigateToDataset = (datasetId: string) => {
 
           <div v-else>
             <div
-              v-for="(dataset, index) in datasets"
-              :key="index"
+              v-for="d in draftAndNonExistingVersions"
+              :key="d.id"
               class="mb-5 flex w-full flex-col rounded-md border border-slate-200 px-6 py-4 shadow-sm transition-all hover:cursor-pointer hover:border-slate-300 hover:bg-slate-100"
-              @click="navigateToDataset(dataset.id)"
+              @click="navigateToDataset(d.id)"
             >
               <div class="flex justify-between pt-2">
-                <h3>{{ dataset.title || "Untitled Dataset" }}</h3>
+                <h3>{{ d.title || "Untitled Dataset" }}</h3>
               </div>
 
               <n-divider />
 
               <div class="flex flex-col space-y-4">
                 <p>
-                  <span class="font-bold"> Description: </span>
+                  <span class="font-bold">Description:</span>
 
-                  <span>{{ dataset.description || "No description provided" }}</span>
+                  <span>{{ d.description || "No description provided" }}</span>
                 </p>
 
-                <!-- <n-divider v-if="dataset.latest_version" /> -->
+                <p>
+                  <span class="font-bold">Created date:</span>
 
-                <!-- <p v-if="dataset.latest_version">
-                  <span class="font-bold"> Latest version: </span>
-                  <span>
-                    {{ dataset.latest_version }}
-                  </span>
-                </p> -->
+                  <span>{{ displayHumanFriendlyDateAndTime(d.created_at) }}</span>
+                </p>
 
                 <p>
-                  <span class="font-bold"> Created date: </span>
+                  <span class="font-bold">Last updated date:</span>
 
-                  <span>
-                    {{ displayHumanFriendlyDateAndTime(dataset.created_at) }}
-                  </span>
+                  <span>{{ displayHumanFriendlyDateAndTime(d.updated_on) }}</span>
                 </p>
 
                 <p>
-                  <span class="font-bold"> Last updated date: </span>
+                  <span class="font-bold">Status:</span>
 
                   <span>
-                    {{ displayHumanFriendlyDateAndTime(dataset.created_at) }}
+                    {{
+                      d.latest_version?.some((v) => v.published) ? "Published" : " In preparation"
+                    }}
                   </span>
                 </p>
+              </div>
+
+              <div class="flex justify-end gap-4 pb-8">
+                <n-button type="primary" @click.stop="navigateToDataset(d.id)">
+                  View dataset workflow
+                </n-button>
+
+                <n-button type="primary" @click.stop="navigateToNewVersion(d.id)">
+                  Publish a new version
+                </n-button>
+              </div>
+            </div>
+
+            <!-- 2. published section -->
+            <h3 v-if="publishedVersions.length" class="mb-2 text-lg font-bold">
+              Published Datasets
+            </h3>
+
+            <div
+              v-for="d in publishedVersions"
+              :key="d.id"
+              class="mb-5 flex w-full flex-col rounded-md border border-slate-200 px-6 py-4 shadow-sm transition-all hover:cursor-pointer hover:border-slate-300 hover:bg-slate-100"
+              @click="navigateToDataset(d.id)"
+            >
+              <div class="flex justify-between pt-2">
+                <h3>{{ d.title || "Untitled Dataset" }}</h3>
+              </div>
+
+              <n-divider />
+
+              <div class="flex flex-col space-y-4">
+                <p>
+                  <span class="font-bold">Description:</span>
+
+                  <span>{{ d.description || "No description provided" }}</span>
+                </p>
 
                 <p>
-                  <span class="font-bold"> Number of participants: </span>
-                  <!--                  <span>{{ dataset.published_versions || 0 }}</span>-->
+                  <span class="font-bold">Created date:</span>
 
-                  <span>0</span>
+                  <span>{{ displayHumanFriendlyDateAndTime(d.created_at) }}</span>
                 </p>
 
                 <p>
-                  <span class="font-bold"> Status: </span>
-                  <!--                  <span>{{ dataset.version.published? "Published || "In preparation }}</span>-->
+                  <span class="font-bold">Last updated date:</span>
 
-                  <span>In preparation</span>
+                  <span>{{ displayHumanFriendlyDateAndTime(d.updated_on) }}</span>
                 </p>
+
+                <p>
+                  <span class="font-bold">Status:</span>
+
+                  <span> Published</span>
+                </p>
+              </div>
+
+              <div class="flex justify-end gap-4 pb-8">
+                <n-button type="primary" @click.stop="navigateToDatasetVersion(d.id)">
+                  View all versions
+                </n-button>
+
+                <a href="https://fairhub.io" target="_blank" class="text-sky-600">
+                  <n-button secondary type="info" size="medium">
+                    <template #icon><f-icon icon="el:share" /></template>
+                    View on FAIRhub.io
+                  </n-button>
+                </a>
               </div>
             </div>
           </div>