- add versioning to frontend

- hode staistic badge

babel.config.js

@@ -1,3 +1,3 @@
-module.exports = {
+// module.exports = {
-    presets: ["@vue/cli-plugin-babel/preset"],
+//     presets: ["@vue/cli-plugin-babel/preset"],
-};
+// };

package.json

@@ -18,13 +18,17 @@
     "leaflet": "^1.7.1",
     "qs": "^6.10.1",
     "rxjs": "^7.5.5",
-    "vue": "^3.0.0",
+    "vue": "^3.2.47",
     "vue-facing-decorator": "^2.1.13",
     "vue-matomo": "^4.1.0",
     "vue-router": "^4.0.12",
     "xslt3": "^2.4.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
     "@types/leaflet": "^1.7.9",
     "@typescript-eslint/eslint-plugin": "^5.48.1",
     "@typescript-eslint/parser": "^5.40.1",
@@ -34,15 +38,18 @@
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
+    "babel-preset-typescript-vue3": "^2.0.17",
     "bulma": "^0.9.3",
     "eslint": "^8.25.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.9.0",
     "node-polyfill-webpack-plugin": "^2.0.0",
     "prettier": "^2.7.1",
+    "pug-plain-loader": "^1.1.0",
     "sass": "^1.26.5",
     "sass-loader": "^13.0.0",
     "typescript": "^5.1.3",
-    "webpack": "^5.72.1"
+    "webpack": "^5.72.1",
+    "vue-loader": "^17.0.1"
   }
 }

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);
+        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">

vue.config.js

@@ -2,11 +2,15 @@
 const webpack = require("webpack");
 // const { defineConfig } = require("@vue/cli-service");
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const { VueLoaderPlugin } = require('vue-loader');
 
 module.exports = {
     publicPath: "/",    
-    // chainWebpack: config => {
+    chainWebpack: config => {
-    //     config
+        const vueRule = config.module.rule("vue");
+        vueRule.uses.clear();
+        // const tsRule = config.module.rule("ts");
+        // tsRule.uses.clear();
     //       .plugin('define')
     //       .tap(args => {
     //           args[0] = {
@@ -16,7 +20,7 @@ module.exports = {
     //           }
     //           return args
     //        })
-    //   },
+    },
     pages: {
         index: {
             // entry for the page
@@ -28,7 +32,56 @@ module.exports = {
     //     disableHostCheck: true,
     // },
     configureWebpack: {
+        devtool: "source-map",
+        module: {
+            rules: [
+                {
+                    test: /\.vue$/,
+                    loader: 'vue-loader',
+                    options: {
+                        // loaders: {
+                        // 	ts: 'ts-loader',
+                        // },                       
+                        cacheDirectory: 'C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader',
+                        cacheIdentifier: '39baf1b4',
+                        babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
+                    },
+                },
+                // {
+                //     test: /\.(js|jsx|ts|tsx)$/,
+                //     // exclude: /(node_modules|bower_components)/,
+                //     exclude: file => (
+                //       /node_modules/.test(file) &&
+                //       !/\.vue\.js/.test(file)
+                //     ),
+                //     exclude: /node_modules/,
+                //     use: {
+                //         loader: "babel-loader",
+                //         options: {
+                //             presets: [                               
+                //                 ["@babel/preset-env", {}],
+                //                 "babel-preset-typescript-vue3", //because of new vue setup method
+                //                 // "@babel/preset-typescript"
+                //             ],
+                //             plugins: [
+                //                 // "@babel/plugin-transform-runtime",
+                //                 ["@babel/plugin-proposal-decorators", { legacy: true }],
+
+                //                 "@babel/proposal-class-properties",
+                //             ],
+                //         },
+                //     },
+                // },
+            ],
+        },
+        resolve: {
+            alias: {
+                vue$: 'vue/dist/vue.runtime.esm-bundler.js'
+            },
+            extensions : ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'],
+        },
         plugins: [           
+            // new VueLoaderPlugin(),
             new webpack.DefinePlugin({
                 APP_URL: JSON.stringify(process.env.APP_URL),
                 VUE_APP_PORTAL: JSON.stringify(process.env.VUE_APP_PORTAL),