#156: [WIP] Started the transition from vue-cli to vite. Still need t…

…o update build tooling to replace SSR

anms-ui/docker-entrypoint.sh

@@ -30,13 +30,13 @@ ORIGFILE="/opt/node_app/config_ui_env.js"
 OUTFILE="/opt/node_app/release/assets/scripts/config_env.js"
 
 TMPFILE=$(mktemp)
-VUE_APP_UI_VERSION=$ENV_UI_VERSION
-sed "s/VUE_APP_UI_VERSION_TEMPLATE/$VUE_APP_UI_VERSION/" "${ORIGFILE}" > $OUTFILE
+VITE_UI_VERSION=$ENV_UI_VERSION
+sed "s/VITE_UI_VERSION_TEMPLATE/$VITE_UI_VERSION/" "${ORIGFILE}" > $OUTFILE
 
 # update for hostnames and ports
 sed -i "s/CORE_HOSTNAME_PLACEHOLDER/${ANMS_CORE_NAME:-anms-core}/" "/opt/node_app/config.yaml"
 sed -i "s/CORE_PORT_PLACEHOLDER/${ANMS_CORE_HTTP_PORT:-5555}/" "/opt/node_app/config.yaml"
 sed -i "s/REDIS_HOSTNAME_PLACEHOLDER/${REDIS_NAME:-redis}/" "/opt/node_app/config.yaml"
 sed -i "s/REDIS_PORT_PLACEHOLDER/${REDIS_PORT:-6379}/" "/opt/node_app/config.yaml"
 
-exec "$@"
+exec "$@"

anms-ui/public/.eslintrc.js

@@ -24,7 +24,7 @@ module.exports = {
   env: {
     es6: true,
     node: true,
-    browser: true
+    browser: true,
   },
   globals: {
     'Constants': 'readonly'
@@ -35,8 +35,8 @@ module.exports = {
     '@vue/standard'
   ],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-console': import.meta.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': import.meta.env.NODE_ENV === 'production' ? 'error' : 'off',
     'indent': ['error', 2, {'SwitchCase': 1}],
     'linebreak-style': 0,
     'eol-last': 2,
@@ -67,7 +67,4 @@ module.exports = {
       }
     }
   ],
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
 };

anms-ui/public/app/components/adm/Adm.vue

@@ -73,8 +73,7 @@
 import { mapGetters, mapActions } from "vuex";
 import toastr from 'toastr';
 import api_adm from '@app/shared/api_adm';
-
-const _ = require('lodash');
+import { _ } from "lodash";
 
 export default {
   name: "Adms",
@@ -118,7 +117,7 @@ export default {
     }),
     download(adm){
       let json  = {};
-      api_adm.apiGetAdm(adm.adm_enum).then(res => {  
+      api_adm.apiGetAdm(adm.adm_enum).then(res => {
         json= res.data;
         const jsonData = json;
         const blob = new Blob([jsonData], { type: 'application/json' });
@@ -145,7 +144,7 @@ export default {
         toastr.success(this.uploadStatus);
         await this.getAdms();
       }
-      
+
       return;
     }
   }

anms-ui/public/app/components/management/builder/ExprParameter.vue

@@ -41,12 +41,14 @@
 </template>
 
 <script>
-import ParameterView from "./ParameterView.vue";
 import vSelect from "vue-select";
 
 export default {
   name: "ExpressionParameter",
-  components: { ParameterView, vSelect, },
+  components: {
+    ParameterView: () => import("./ParameterView.vue"),
+    vSelect,
+  },
   props: ["listComponents", "name", "parms", "type", "index"],
   data() {
     return {

anms-ui/public/app/components/management/builder/buildAri.vue

@@ -42,7 +42,8 @@
             :ACs="ARIs"
             @updateResult="updateResults($event)"></ParameterView>
 
-          <div v-if="ariKey" class="text-center my-3">
+          <div v-if="ariKey"
+            class="text-center my-3">
             <h5>ARI String</h5>
             <p>{{ finResultStr }}</p>
             <b-button class="my-3"
@@ -69,6 +70,7 @@ import { mapGetters, mapActions } from "vuex";
 import api from "../../../shared/api.js";
 import Transcoder from "./transcoder.vue";
 import { ToggleButton } from 'vue-js-toggle-button'
+import { _ } from "lodash";
 
 Vue.component('ToggleButton', ToggleButton)
 

anms-ui/public/app/components/user/User.vue

@@ -1,45 +1,46 @@
 <template>
   <div class="user d-flex flex-column flex-fill-100">
-    <b-nav id="tour-user-profilenav" class="user-tabs" tabs>
+    <b-nav id="tour-user-profilenav"
+      class="user-tabs"
+      tabs>
       <b-nav-item :to="{ name: 'userProfile' }">Profile</b-nav-item>
-      <b-nav-item v-if="isAdmin" :to="{ name: 'userAdministration' }">Administration</b-nav-item>
+      <b-nav-item v-if="isAdmin"
+        :to="{ name: 'userAdministration' }">Administration</b-nav-item>
     </b-nav>
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <script>
 
-  import _ from 'lodash';
-  import Constants from '@app/shared/constants';
+import _ from 'lodash';
+import Constants from '@app/shared/constants';
 
-  export default {
-    name: 'User',
-    data() {
-      return {
-      };
-    },
-    computed: {
-      isAdmin: function(){
-        const userRoles = Constants.USER_DETAILS.roles;
-        const userPermissions = Constants.USER_DETAILS.permissions;
-        let isAdmin = true;// _.intersection(userRoles, ['ROLE_SUPER_ADMIN', 'ROLE_ADMIN']).length >= 1;
-        let hasPermissions = _.intersection(userPermissions, ['PERMISSION_ALL', 'PERMISSION_ADD_USER', 'PERMISSION_EDIT_USER']).length >= 1;
-        return isAdmin || hasPermissions;
-      }
+export default {
+  name: 'User',
+  data() {
+    return {
+    };
+  },
+  computed: {
+    isAdmin: function () {
+      const userRoles = Constants.USER_DETAILS.roles;
+      const userPermissions = Constants.USER_DETAILS.permissions;
+      let isAdmin = true;// _.intersection(userRoles, ['ROLE_SUPER_ADMIN', 'ROLE_ADMIN']).length >= 1;
+      let hasPermissions = _.intersection(userPermissions, ['PERMISSION_ALL', 'PERMISSION_ADD_USER', 'PERMISSION_EDIT_USER']).length >= 1;
+      return isAdmin || hasPermissions;
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/_variables.scss';
 
-  @import '~@assets/styles/variables';
-
-  .user-tabs {
-    // No gutters from the main container since we're don't want a row/column grid gutters
-    // For Grids with gutters, re-initialize a new container on the sub-element
-    margin-right: -$grid-gutter-width / 2;
-    margin-left:  -$grid-gutter-width / 2;
-  }
-
+.user-tabs {
+  // No gutters from the main container since we're don't want a row/column grid gutters
+  // For Grids with gutters, re-initialize a new container on the sub-element
+  margin-right: -$grid-gutter-width / 2;
+  margin-left: -$grid-gutter-width / 2;
+}
 </style>