enable status and last updated timeago

I-GUIDE · May 16, 2024 · cd7853c · cd7853c
1 parent 1e30956
commit cd7853c
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 23 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -34,6 +34,7 @@
     "vue-facing-decorator": "^3.0.4",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.2",
+    "vue-timeago3": "^2.3.2",
     "vuetify": "^3.6.3",
     "vuex": "^4.1.0",
     "vuex-persistedstate": "^4.1.0"
@@ -74,4 +75,4 @@
   "lint-staged": {
     "*": "eslint --fix"
   }
-}
+}
diff --git a/frontend/src/components/dataset/cd.dataset.vue b/frontend/src/components/dataset/cd.dataset.vue
@@ -198,35 +198,39 @@
         class="page-content"
         :class="{ 'is-sm': $vuetify.display.mdAndDown }"
       >
-        <h4 class="text-h5 mb-4">{{ data.name }}</h4>
-        <!-- TODO: disabled until dataset endpoint returns current user permissions -->
-        <!-- <div
+        <h4 class="text-h5 my-4">{{ data.name }}</h4>
+        <div
           class="d-flex justify-space-between mb-2 flex-column flex-sm-row align-normal align-sm-end"
         >
-          <div class="order-2 order-sm-1">
+          <div
+            v-if="data.creativeWorkStatus || data.dateModified"
+            class="order-2 order-sm-1"
+          >
             <v-chip
+              v-if="data.creativeWorkStatus"
               small
               class="mr-2"
-              color="green"
-              text-color="white"
-              title="The resource is in draft state and should not be considered final. Content and metadata may change."
+              :color="getStautsColor(data.creativeWorkStatus.name)"
+              :title="data.creativeWorkStatus.description"
             >
-              Draft
+              {{ data.creativeWorkStatus.name }}
             </v-chip>
+
             <template v-if="data.dateModified">
               <span class="d-block d-sm-inline" v-bind="infoLabelAttr"
                 >Last Updated:
               </span>
               <span v-bind="infoValueAttr">
                 {{ parseDate(data.dateModified) }}
                 <span class="font-weight-light">
-                  (<timeago :datetime="data.dateModified"> </timeago>)
+                  (<timeago :datetime="data.dateModified" />)
                 </span>
               </span>
             </template>
           </div>
 
-          <div class="order-1 order-sm-2">
+          <!-- TODO: disabled until dataset endpoint returns current user permissions -->
+          <!-- <div class="order-1 order-sm-2">
             <v-btn
               v-if="data.submission_type !== 'HYDROSHARE'"
               class="order-1 order-sm-2 mb-sm-0 mb-4 mt-sm-0 mt-2"
@@ -246,13 +250,12 @@
               :href="data.repository_identifier"
               target="_blank"
               color="blue-grey lighten-4"
-              size="small"
               rounded
             >
               <v-icon class="mr-1">mdi-open-in-new</v-icon> View in repository
             </v-btn>
-          </div>
-        </div> -->
+          </div> -->
+        </div>
         <v-divider class="my-4"></v-divider>
 
         <v-row
@@ -845,6 +848,7 @@ import markdownit from "markdown-it";
 import { Component, Vue, toNative } from "vue-facing-decorator";
 import { useGoTo } from "vuetify/lib/framework.mjs";
 import { useRoute, useRouter } from "vue-router";
+import { EnumCreativeWorkStatus } from "@/types";
 
 const options: LoaderOptions = { libraries: ["drawing"] };
 const loader: Loader = new Loader(
@@ -1005,6 +1009,21 @@ class CdDataset extends Vue {
     Notifications.toast({ message: "Copied to clipboard", type: "info" });
   }
 
+  getStautsColor(status: EnumCreativeWorkStatus) {
+    switch (status) {
+      case EnumCreativeWorkStatus.Draft:
+        return "primary";
+      case EnumCreativeWorkStatus.Incomplete:
+        return "red";
+      case EnumCreativeWorkStatus.Obsolete:
+        return "orange";
+      case EnumCreativeWorkStatus.Published:
+        return "green";
+      default:
+        "primary";
+    }
+  }
+
   loadFileExporer() {
     // Load file explorer
     if (this.data.associatedMedia?.length) {

diff --git a/frontend/src/modules/timeago.ts b/frontend/src/modules/timeago.ts
@@ -0,0 +1,6 @@
+import timeago from "vue-timeago3";
+import type { UserModule } from "@/types";
+
+export const install: UserModule = ({ app }) => {
+  app.use(timeago);
+};
diff --git a/frontend/src/modules/vuex.ts b/frontend/src/modules/vuex.ts
@@ -5,8 +5,6 @@ import { orm } from "@/models/orm";
 import { persistedPaths } from "@/models/persistedPaths";
 import type { UserModule } from "@/types";
 
-// Setup Pinia
-// https://pinia.vuejs.org/
 export const install: UserModule = ({ app }) => {
   // Create Vuex Store and register database through Vuex ORM.
 

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -73,3 +73,10 @@ export interface ISearchParams {
 export interface ITypeaheadParams {
   term: string;
 }
+
+export enum EnumCreativeWorkStatus {
+  Draft = "Draft",
+  Incomplete = "Incomplete",
+  Obsolete = "Obsolete",
+  Published = "Published",
+}