Delta-1619 Platforms > Quasar Upgrade > Upgrade Freedom Components (#55)

* fix: fixed issues that prevent the application from building/running

* chore: added newline to EOF

* refactor: remove credentials from dependency import

* chore: updated to latest freedom components commit

* fix: fix broken ftable layout in demo pages

* fix: update import to use latest commit in freedom-components update

.eslintignore

@@ -78,4 +78,4 @@ dist/
 docs/
 
 /src-pwa/pwa-flag.d.ts
-/src/store/store-flag.d.ts
+/src/stores/store-flag.d.ts

.gitignore

@@ -77,4 +77,4 @@ dist/
 docs/
 
 /src-pwa/pwa-flag.d.ts
-/src/store/store-flag.d.ts
+/src/stores/store-flag.d.ts

babel.config.js

@@ -10,7 +10,8 @@ module.exports = {
             {
                 'modules': false,
                 'loose': false,
-                'useBuiltIns': 'usage'
+                'useBuiltIns': 'usage',
+                'corejs': '^3.6.5'
             }
         ],
     ],

package.json

@@ -18,6 +18,7 @@
         "postinstall": "quasar-app-extension-freedom-components"
     },
     "dependencies": {
+        "@gtm-support/vue-gtm": "^2.1.0",
         "@quasar/extras": "^1.0.0",
         "@vuelidate/core": "^2.0.0",
         "@vuelidate/validators": "^2.0.0",
@@ -31,9 +32,10 @@
         "moment": "^2.29.4",
         "node-polyfill-webpack-plugin": "^2.0.1",
         "pinia": "^2.0.32",
+        "pinia-plugin-persistedstate": "^3.2.0",
         "qs": "^6.11.0",
         "quasar": "^2.6.0",
-        "quasar-app-extension-freedom-components": "git+https://freedom-components-readonly:9jawmhdE8Pxuzy6a5yQQ@gitlab.com/anyTV/incubator/freedom-components.git#v1.11.11",
+        "quasar-app-extension-freedom-components": "git+https://gitlab.com/anyTV/incubator/freedom-components.git#cc6ba22d",
         "vue": "^3.2.33",
         "vue-analytics": "^5.22.1",
         "vue-i18n": "^9.2.2",

quasar.config.js

@@ -18,7 +18,7 @@ const pkg = require('./package');
 module.exports = configure(function (ctx) {
     return {
         // https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
-        supportTS: false,
+        supportTS: true,
 
         // https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
         // preFetch: true,

src/boot/admin-api.js

@@ -10,7 +10,7 @@ import qs from 'qs';
  * // In a component you can use it like:
  * this.$adminAPI.post(...);
  */
-export default ({ Vue }) => {
+export default ({ app }) => {
 
     const apiConfig = {
         baseURL: config.API.BASE_URL,
@@ -23,7 +23,7 @@ export default ({ Vue }) => {
 
         try {
             const api = axios.create(_.defaults({
-                headers: { 'Access-Token': Vue.jwt.getToken() }
+                headers: { 'Access-Token': app.jwt.getToken() }
             }, apiConfig));
 
             let response = await api[_.toLower(method)](endpoint, payload);
@@ -89,11 +89,5 @@ export default ({ Vue }) => {
         }
     };
 
-    Object.defineProperties(Vue.prototype, {
-        $adminAPI: {
-            get() {
-                return adminAPI;
-            }
-        },
-    });
+    app.config.globalProperties.$adminAPI = adminAPI;
 };

src/boot/vue-gtm.js

@@ -1,5 +1,5 @@
-import VueGtm from 'vue-gtm';
+import { createGtm } from '@gtm-support/vue-gtm';
 
 import config from 'src/config';
 
-export default ({ Vue }) => Vue.use(VueGtm, config.GTM_CONFIG);
+export default ({ app }) => app.use(createGtm(config.GTM_CONFIG));

src/boot/vuelidate.js

@@ -1,5 +1,6 @@
-import Vuelidate from 'vuelidate';
+import { useVuelidate } from '@vuelidate/core';
 
-export default ({ Vue }) => {
-    Vue.use(Vuelidate);
+export default ({ app }) => {
+
+    app.use(useVuelidate);
 };

src/index.template.html

@@ -6,7 +6,7 @@
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport"
-          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
     <title><%= htmlWebpackPlugin.options.productName %></title>
 
     <link rel="icon" href="statics/app-logo.png" type="image/x-icon">

src/pages/FFilterDemo.vue

@@ -110,7 +110,7 @@
     import tableData from 'src/sample/tableData/tableWithFFilter';
     import tableColumns from 'src/sample/tableColumns/tableWithFFilter';
     import UtilMixin from 'src/mixins/utils';
-    import { integer } from 'vuelidate/lib/validators';
+    import { integer } from '@vuelidate/validators';
     import {
         isValidStrictDateFormat,
     } from 'src/helpers/custom-validators';
@@ -145,7 +145,7 @@
                     name: {},
                     user_id: {
                         key: 'id',
-                        rule: integer,
+                        rule: integer.$validator,
                         caption: 'with_integer_rule',
                     },
                     user_type: {

src/pages/TableWithTabs.vue

@@ -82,7 +82,7 @@
                         :hide-bottom="hideBottom"
                         :loading="loading"
                         :pagination.sync="tablePagination"
-                        class="f-table"
+                        class="stick-header-table"
                         binary-state-sort
                         row-key="id"
                         @request="getTableData"
@@ -225,3 +225,8 @@
         }
     };
 </script>
+
+<style lang="stylus" scoped>
+    .stick-header-table
+          height calc(100% - 100px)
+</style>

src/pages/TableWithTabs2.vue

@@ -53,7 +53,7 @@
                             :pagination.sync="tablePagination"
                             binary-state-sort
                             row-key="id"
-                            class="f-table"
+                            class="stick-header-table"
                             @request="getTableData"
                         />
                     </q-tab-panel>
@@ -187,4 +187,9 @@
             },
         }
     };
-</script>
+</script>
+
+<style lang="stylus" scoped>
+    .stick-header-table
+          height calc(100% - 100px)
+</style>

src/pages/TableWithoutTab.vue

@@ -74,7 +74,7 @@
                 :pagination.sync="tablePagination"
                 binary-state-sort
                 row-key="id"
-                class="f-table"
+                class="stick-header-table"
                 @request="getTableData"
             />
         </template>
@@ -205,3 +205,8 @@
         }
     };
 </script>
+
+<style lang="stylus" scoped>
+    .stick-header-table
+          height calc(100% - 100px)
+</style>

src/router/index.js

@@ -1,36 +1,48 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { route } from 'quasar/wrappers';
+import { createApp } from 'vue';
+import { createGtm } from '@gtm-support/vue-gtm';
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
+import routes from 'src/router/routes';
+import ga from 'src/router/analytics';
 
-import routes from './routes';
-import ga from './analytics';
+import config from 'src/config/index';
 
-Vue.use(VueRouter);
+const app = createApp({});
 
-const Router = new VueRouter({
-    /*
-     * NOTE! Change Vue Router mode from quasar.config.js -> build -> vueRouterMode
-     *
-     * When going with "history" mode, please also make sure "build.publicPath"
-     * is set to something other than an empty string.
-     * Example: '/' instead of ''
-     */
+export default route(function() {
+    const createHistory = process.env.SERVER
+        ? createMemoryHistory
+        : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
 
-    // Leave as is and change from quasar.config.js instead!
-    mode: process.env.VUE_ROUTER_MODE,
-    base: process.env.VUE_ROUTER_BASE,
-    scrollBehavior: () => ({ y: 0 }),
-    routes
-});
+    const Router = createRouter({
+        scrollBehavior: () => ({ y: 0 }),
+        routes,
+        // Leave this as is and make changes in quasar.conf.js instead!
+        // quasar.conf.js -> build -> vueRouterMode
+        // quasar.conf.js -> build -> publicPath
+        history: createHistory(process.env.VUE_ROUTER_BASE)
+    });
 
-Router.afterEach(to => {
-    Vue.gtm.trackView(
-        to.path,
-        to.name,
-        {
-            cid: ga.createSessionId(),
-            path: to.path
-        }
-    );
-});
+    if (config.GTM_CONFIG) {
+        app.use(
+            createGtm({
+                ...config.GTM_CONFIG,
+                loadScript: true,
+                vueRouter: Router,
+            })
+        );
+    }
 
-export default Router;
+    Router.afterEach(to => {
+        app.config.globalProperties.$gtm.trackView(
+            to.path,
+            to.name,
+            {
+                cid: ga.createSessionId(),
+                path: to.path
+            }
+        );
+    });
+
+    return Router;
+});

src/stores/index.ts

@@ -0,0 +1,39 @@
+import { store } from 'quasar/wrappers';
+import { createPinia } from 'pinia';
+import { Router } from 'vue-router';
+import { useQuasar, QVueGlobals } from 'quasar';
+import piniaPluginPersistedState from 'pinia-plugin-persistedstate';
+
+/*
+ * When adding new properties to stores, you should also
+ * extend the `PiniaCustomProperties` interface.
+ * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
+ */
+declare module 'pinia' {
+    export interface PiniaCustomProperties {
+        readonly router: Router;
+        $q: QVueGlobals;
+    }
+}
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+    const pinia = createPinia();
+
+    // You can add Pinia plugins here
+    pinia.use(({ store }) => {
+        store.$q = useQuasar();
+    });
+
+    pinia.use(piniaPluginPersistedState);
+
+    return pinia;
+});

tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "extends": "@quasar/app-webpack/tsconfig-preset",
+    "compilerOptions": {
+      "baseUrl": "."
+    }
+}