- add versioning to frontend

- hode staistic badge

src/components/datacite/DataMetricsBadge.vue

@@ -2,7 +2,7 @@
     <div v-bind:title="'Metrics for DOI: ' + doi">
         <div v-if="doi">
             <!-- <div v-if="display == 'small'"> -->
-            <SmallWidget v-bind:doi="doi" v-bind:display="display" :data-input="dataObject" />
+            <SmallWidget v-bind:doi="doi" v-bind:display="display" v-bind:data-input="dataObject" />
             <!-- </div> -->
         </div>
         <a v-else>There is no DOI</a>

src/router/route1.ts

@@ -17,10 +17,16 @@ const route1: Router = createRouter({
     routes: [
         {
             path: "/10.24341/tethys.:datasetId",
-            name: "dataset2",
+            name: "dataset3",
             component: DatasetDetailComponent,
             props: true,
         },
+        // {
+        //     path: "/10.24341/:identifier",
+        //     name: "dataset2",
+        //     component: DatasetDetailComponent,
+        //     props: true,
+        // },
     ],
     // scrollBehavior(to, from, savedPosition) {
     scrollBehavior() {

src/services/dataset.service.ts

@@ -204,6 +204,18 @@ class DatasetService {
         return dataset;
     }
 
+    public getDatasetByDoi(doi: string): Observable<DbDataset> {
+        // const host = "https:" + VUE_APP_PORTAL;
+        const host = VUE_APP_PORTAL;
+        const path = "/api/dataset/10.24341/tethys." + doi;
+        const apiUrl = host + path;
+        const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res)));
+        // const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
+
+        // this.messageService.add('HeroService: fetched heroes');
+        return dataset;
+    }
+
     // public getOaiDatasets(): Observable<OaiDataset[]> {
     //     const apiUrl = "https://data.tethys.at/oai?verb=ListRecords&metadataPrefix=oai_datacite";
     //     const oaiDatasets = api.get<string>(apiUrl).pipe(

src/views/dataset-detail.component/dataset-detail.component.ts

@@ -23,6 +23,9 @@ export default class DatasetDetailComponent extends Vue {
     @Prop()
     datasetId!: number;
 
+    // @Prop()
+    // identifier!: string;
+
     searchTerm: string | Suggestion = "";
 
     private subscriptions: Array<Subscription> = [];
@@ -40,7 +43,11 @@ export default class DatasetDetailComponent extends Vue {
 
     created(): void {
         dayjs.extend(advancedFormat);
-        this.getDataset(this.datasetId);
+        if (typeof this.datasetId === "number") {
+            this.getDataset(this.datasetId);
+        } else {
+            this.getDatasetByIdentifier(this.datasetId);
+        }
     }
 
     beforeUnmount(): void {
@@ -87,6 +94,19 @@ export default class DatasetDetailComponent extends Vue {
             },
             error: (error: string) => this.errorHandler(error),
         });
+
+        this.subscriptions.push(newSub);
+    }
+
+    private getDatasetByIdentifier(id: string): void {
+        const newSub = DatasetService.getDatasetByDoi(id).subscribe({
+            next: (res: DbDataset) => {
+                this.dataset = res;
+                this.loaded = true;
+            },
+            error: (error: string) => this.errorHandler(error),
+        });
+
         this.subscriptions.push(newSub);
     }
 

src/views/dataset-detail.component/dataset-detail.component.vue

@@ -158,7 +158,7 @@
                             <h2 class="label uppercase">Details</h2>
                             <!-- <data-metrics-badge doi="10.7272/q6g15xs4" display="regular"></data-metrics-badge> -->
                             <!-- <data-metrics-badge doi="10.24341/tethys.209" display="small" v-bind:data-input="post"></data-metrics-badge> -->
-                            <data-metrics-badge v-bind:doi="dataset.identifier.value" display="small"></data-metrics-badge>
+                            <!-- <data-metrics-badge v-bind:doi="dataset.identifier.value" display="small"></data-metrics-badge> -->
                         </div>
                     </div>
                     <div class="card">