- added CTS Logo

- updated npm packages like vue-facing-decorator and some prettier and eslint dev dependecies
- remove node-polyfill-webpack-plugin

package.json

@@ -19,7 +19,7 @@
     "qs": "^6.10.1",
     "rxjs": "^7.5.5",
     "vue": "^3.2.47",
-    "vue-facing-decorator": "^2.1.13",
+    "vue-facing-decorator": "^3.0.4",
     "vue-matomo": "^4.1.0",
     "vue-router": "^4.0.12",
     "xslt3": "^2.4.0"
@@ -30,26 +30,25 @@
     "@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/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^5.40.1",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vue/cli-plugin-eslint": "~5.0.4",
     "@vue/cli-plugin-typescript": "~5.0.4",
     "@vue/cli-service": "~5.0.4",
     "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/eslint-config-typescript": "^13.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-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.9.0",
-    "node-polyfill-webpack-plugin": "^2.0.0",
+    "prettier": "^3.2.5",
-    "prettier": "^2.7.1",
     "pug-plain-loader": "^1.1.0",
     "sass": "^1.26.5",
-    "sass-loader": "^13.0.0",
+    "sass-loader": "^14.1.1",
     "typescript": "^5.1.3",
-    "webpack": "^5.72.1",
+    "vue-loader": "^17.0.1",
-    "vue-loader": "^17.0.1"
+    "webpack": "^5.72.1"
   }
 }

src/App.vue

@@ -1,17 +1,11 @@
 <template>
     <!-- <HelloWorld msg="Welcome to Your Vue.js plus TypeScript App" /> -->
-
-    <!-- <link
-        rel="stylesheet"
-        href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
-        integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
-        crossorigin="anonymous"
-    /> -->
     <nav class="navbar navbar-light border-bottom" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
             <a class="navbar-item" href="/">
                 <!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> -->
                 <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
+                <img src="./assets/images/cts-logo.png" width="80" height="80" />
             </a>
             <a
                 id="menu-icon"

src/App2.vue

@@ -6,6 +6,7 @@
             <a class="navbar-item" v-bind:href="app_url">
                 <!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> -->
                 <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
+                <img src="./assets/images/cts-logo.png" width="80" height="80" />
             </a>
             <a
                 id="menu-icon"

src/api/api.ts

@@ -8,6 +8,7 @@ import { AxiosResponse } from "axios";
 
 const axiosInstance = initializeAxios(axiosRequestConfiguration);
 
+// eslint-disable-next-line
 const get = <T>(url: string, queryParams?: any): Observable<T> => {
     return defer(() => axiosInstance.get<T>(url, { params: queryParams })).pipe(map((result: AxiosResponse) => result.data));
 };

src/app.ts

@@ -66,7 +66,7 @@ export default class App extends Vue {
         // }
     }
 
-    public showMobilemenu(event: PointerEvent): void {
+    public showMobilemenu(event: MouseEvent): void {
         // Don't follow the link
         event.preventDefault();
         this.active = !this.active;

src/app2.ts

@@ -69,7 +69,7 @@ export default class App2 extends Vue {
         // }
     }
 
-    public showMobilemenu(event: PointerEvent): void {
+    public showMobilemenu(event: MouseEvent): void {
         // Don't follow the link
         event.preventDefault();
         this.active = !this.active;

src/assets/datacite/testLogo.vue

@@ -1,8 +1,8 @@
 <template>
     <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
     <svg
-        version="1.1"
         id="Layer_1"
+        version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0px"

src/components/datacite/BaseWidget.ts

@@ -82,7 +82,7 @@ export default class BaseWidget extends Vue {
         return `${value.toLocaleString("en-us")} ${label}s`;
     }
 
-    public formatNumbers(num: any) {
+    public formatNumbers(num: number) {
         if (num < 1e3) return num;
         if (num >= 1e3 && num < 1e6) return `${+(num / 1e3).toFixed(1)}K`;
         if (num >= 1e6 && num < 1e9) return `${+(num / 1e6).toFixed(1)}M`;

src/models/dataset.ts

@@ -23,7 +23,10 @@ export interface Dataset {
 }
 
 export class Suggestion {
-    constructor(public value: string, public type: SearchType) {}
+    constructor(
+        public value: string,
+        public type: SearchType,
+    ) {}
     // value!: string;
     // type!: SearchType;
 }

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

@@ -10,13 +10,13 @@ import VsInput from "@/components/vs-input/vs-input.vue";
 import { Suggestion } from "@/models/dataset";
 import { VUE_APP_PORTAL } from "@/constants";
 // import DataMetricsBadge from "data-metrics-badge/dist/data-metrics-badge.js";
-import DataMetricsBadge from "@/components/datacite/DataMetricsBadge.vue";
+// import DataMetricsBadge from "@/components/datacite/DataMetricsBadge.vue";
 
 @Component({
     name: "DatasetDetailComponent",
     components: {
         VsInput,
-        DataMetricsBadge,
+        // DataMetricsBadge,
     },
 })
 export default class DatasetDetailComponent extends Vue {

vue.config.js

@@ -1,25 +1,25 @@
 /* eslint @typescript-eslint/no-var-requires: "off" */
 const webpack = require("webpack");
 // const { defineConfig } = require("@vue/cli-service");
-const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+// const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
-const { VueLoaderPlugin } = require('vue-loader');
+const { VueLoaderPlugin } = require("vue-loader");
 
 module.exports = {
-    publicPath: "/",    
+    publicPath: "/",
-    chainWebpack: config => {
+    chainWebpack: (config) => {
         const vueRule = config.module.rule("vue");
         vueRule.uses.clear();
         // const tsRule = config.module.rule("ts");
         // tsRule.uses.clear();
-    //       .plugin('define')
+        //       .plugin('define')
-    //       .tap(args => {
+        //       .tap(args => {
-    //           args[0] = {
+        //           args[0] = {
-    //              ...args[0],
+        //              ...args[0],
-    //              VUE_APP_PORTAL: JSON.stringify(process.env.PORTAL),
+        //              VUE_APP_PORTAL: JSON.stringify(process.env.PORTAL),
-    //              // other stuff
+        //              // other stuff
-    //           }
+        //           }
-    //           return args
+        //           return args
-    //        })
+        //        })
     },
     pages: {
         index: {
@@ -37,14 +37,14 @@ module.exports = {
             rules: [
                 {
                     test: /\.vue$/,
-                    loader: 'vue-loader',
+                    loader: "vue-loader",
                     options: {
                         // loaders: {
                         // 	ts: 'ts-loader',
-                        // },                       
+                        // },
-                        cacheDirectory: 'C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader',
+                        cacheDirectory: "C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader",
-                        cacheIdentifier: '39baf1b4',
+                        cacheIdentifier: "39baf1b4",
-                        babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
+                        babelParserPlugins: ["jsx", "classProperties", "decorators-legacy"],
                     },
                 },
                 // {
@@ -58,7 +58,7 @@ module.exports = {
                 //     use: {
                 //         loader: "babel-loader",
                 //         options: {
-                //             presets: [                               
+                //             presets: [
                 //                 ["@babel/preset-env", {}],
                 //                 "babel-preset-typescript-vue3", //because of new vue setup method
                 //                 // "@babel/preset-typescript"
@@ -76,19 +76,22 @@ module.exports = {
         },
         resolve: {
             alias: {
-                vue$: 'vue/dist/vue.runtime.esm-bundler.js'
+                vue$: "vue/dist/vue.runtime.esm-bundler.js",
             },
-            extensions : ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'],
+            extensions: [".tsx", ".ts", ".mjs", ".js", ".jsx", ".vue", ".json", ".wasm"],
         },
-        plugins: [           
+        plugins: [
-            // new VueLoaderPlugin(),
+            new VueLoaderPlugin(),
             new webpack.DefinePlugin({
+                __VUE_OPTIONS_API__: "true",
+                __VUE_PROD_DEVTOOLS__: "false",
+                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
                 APP_URL: JSON.stringify(process.env.APP_URL),
                 VUE_APP_PORTAL: JSON.stringify(process.env.VUE_APP_PORTAL),
                 SOLR_HOST: JSON.stringify(process.env.SOLR_HOST),
                 SOLR_CORE: JSON.stringify(process.env.SOLR_CORE),
             }),
-            new NodePolyfillPlugin(),
+            // new NodePolyfillPlugin(),
         ],
     },
 };