Merge branch 'develop' into feature/dashboard

# Conflicts:
#	raw-cms-app/src/modules/core/components/top-bar/top-bar.tpl.html

Author: marcuson

raw-cms-app/src/app/app.js

@@ -20,7 +20,7 @@ const _App = Vue.component('rawcms-app', (resolve, reject) => {
           return vuexStore.state.core.isLoggedIn;
         },
       },
-      data: () => {
+      data: function() {
         return {
           showSnackbar: false,
           snackbarConfig: {},

raw-cms-app/src/index.html

@@ -58,7 +58,7 @@
     <div id="app"></div>
 
     <!-- Vue + other deps -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
     <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

raw-cms-app/src/modules/core/assets/i18n/i18n.en.json

@@ -52,6 +52,7 @@
       "apiCallsText": "API calls (last week):",
       "entitiesNumText": "Entities number",
       "recordsQuotaText": "Records quota",
+      "title": "Home",
       "totalRecordsText": "Total records",
       "welcomeText": "Welcome back! Here you can find some insights about your app."
     },

raw-cms-app/src/modules/core/components/config-edit-dialog/config-edit-dialog.js

@@ -7,9 +7,9 @@ const _ConfigEditDialog = async (res, rej) => {
     props: {
       activeEntity: Object,
     },
-    data: () => {
+    data: function() {
       return {
-        data: { Code: 'ddd' },
+        data: { code: '' },
       };
     },
     methods: {

raw-cms-app/src/modules/core/components/left-menu/left-menu.js

@@ -19,7 +19,7 @@ const _LeftMenu = async (resolve, reject) => {
         return vuexStore.state.core.userInfo || {};
       },
     },
-    data: () => {
+    data: function() {
       return {
         isVisible: false,
         isUserMenuVisible: false,

raw-cms-app/src/modules/core/components/left-menu/left-menu.tpl.html

@@ -9,7 +9,7 @@
     <v-list dark tile>
       <v-list-item>
         <v-list-item-avatar>
-          <user-avatar size="48" color="blue lighten-3" dark></user-avatar>
+          <user-avatar :size="48" color="blue lighten-3" dark></user-avatar>
         </v-list-item-avatar>
       </v-list-item>
 

raw-cms-app/src/modules/core/components/top-bar/top-bar.tpl.html

@@ -1,14 +1,10 @@
 <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app dark color="primary">
   <v-toolbar-title class="ml-0 pl-4">
     <v-app-bar-nav-icon @click.stop="toggleDrawer()"></v-app-bar-nav-icon>
-    <span class="hidden-sm-and-down">Raw CMS</span>
+    <span class="hidden-sm-and-down">{{ Title }}</span>
   </v-toolbar-title>
 
   <v-spacer></v-spacer>
-  <v-toolbar-title>
-    <h1>{{Title}}</h1>
-  </v-toolbar-title>
-
   <div class="flex-grow-1"></div>
   <v-avatar tile>
     <img src="/modules/core/assets/rawlogo_small.png" alt="RawCMS Logo" />

raw-cms-app/src/modules/core/views/collection-table-view/collection-table-view.js

@@ -1,4 +1,5 @@
 import vuexStore from '../../../../config/vuex.js';
+import { sleep } from '../../../../utils/time.utils.js';
 import { CollectionTableDef } from '../../components/collection-table/collection-table.js';
 
 const _CollectionTableView = async (res, rej) => {
@@ -34,10 +35,21 @@ const _CollectionTableView = async (res, rej) => {
     },
     methods: {
       amdRequire: require,
-      resizeMonaco: function() {
-        const monacoEditor = this.$refs.monaco.getMonaco();
-        const oldLayout = monacoEditor.getLayoutInfo();
-        monacoEditor.layout({ width: oldLayout.width, height: 80 });
+      resizeMonaco: async function() {
+        await sleep(0);
+
+        const monacoRef = this.$refs.monaco;
+        const monacoEditor = monacoRef.getMonaco();
+        const expPanelContentEl = this.$refs.filterContent.$el.getElementsByClassName(
+          'v-expansion-panel-content__wrap'
+        )[0];
+        const style = window.getComputedStyle(expPanelContentEl, null);
+        const h = monacoRef.$el.offsetHeight;
+        const w =
+          parseFloat(style.getPropertyValue('width')) -
+          parseFloat(style.getPropertyValue('padding-left')) -
+          parseFloat(style.getPropertyValue('padding-right'));
+        monacoEditor.layout({ width: w, height: h });
       },
       goToCreateView: function() {
         this.$router.push({

raw-cms-app/src/modules/core/views/collection-table-view/collection-table-view.tpl.html

@@ -1,16 +1,17 @@
 <v-layout class="flex-column">
   <v-expansion-panels>
     <v-expansion-panel>
-      <v-expansion-panel-header
-        >{{ $t('core.collections.detail.filter') }}</v-expansion-panel-header
-      >
-      <v-expansion-panel-content>
+      <v-expansion-panel-header>
+        {{ $t('core.collections.detail.filter') }}
+      </v-expansion-panel-header>
+      <v-expansion-panel-content ref="filterContent">
         <monaco-editor
           ref="monaco"
           @editorDidMount="resizeMonaco()"
           v-model="txtQuery"
           :options="monacoOptions"
           :amdRequire="amdRequire"
+          style="height:100px;"
         >
         </monaco-editor>
         <v-row justify="center">

raw-cms-app/src/modules/core/views/collections-list-view/collections-list-view.js

@@ -1,5 +1,5 @@
-import { CollectionsListDef } from '../../components/collections-list/collections-list.js';
 import vuexStore from '../../../../config/vuex.js';
+import { CollectionsListDef } from '../../components/collections-list/collections-list.js';
 
 const _CollectionsListView = async (res, rej) => {
   const tpl = await RawCMS.loadComponentTpl(
@@ -14,9 +14,6 @@ const _CollectionsListView = async (res, rej) => {
     mounted() {
       vuexStore.dispatch('core/updateTopBarTitle', this.$t('core.collections.title'));
     },
-    data: function() {
-      return {};
-    },
     methods: {},
     template: tpl,
   });

raw-cms-app/src/modules/core/views/configuration-details-view/configuration-details-view.js

@@ -21,7 +21,6 @@ const _ConfigurationDetailsView = async (res, rej) => {
         });
       });
     },
-    data: function() {},
     methods: {
       updateTitle: function({ isNew, name }) {
         let title = isNew

raw-cms-app/src/modules/core/views/configuration-list-view/configuration-list-view.js

@@ -1,5 +1,5 @@
-import { ConfigurationListDef } from '../../components/configuration-list/configuration-list.js';
 import vuexStore from '../../../../config/vuex.js';
+import { ConfigurationListDef } from '../../components/configuration-list/configuration-list.js';
 
 const _ConfigurationListView = async (res, rej) => {
   const tpl = await RawCMS.loadComponentTpl(
@@ -14,9 +14,6 @@ const _ConfigurationListView = async (res, rej) => {
     mounted() {
       vuexStore.dispatch('core/updateTopBarTitle', this.$t('core.configuration.title'));
     },
-    data: function() {
-      return {};
-    },
     methods: {
       goToCreateView: function() {
         this.$router.push({ name: 'configuration-details', params: { id: 'new' } });

raw-cms-app/src/modules/core/views/entities-list-view/entities-list-view.js

@@ -1,5 +1,5 @@
-import { EntitiesListDef } from '../../components/entities-list/entities-list.js';
 import vuexStore from '../../../../config/vuex.js';
+import { EntitiesListDef } from '../../components/entities-list/entities-list.js';
 
 const _EntitiesListView = async (res, rej) => {
   const tpl = await RawCMS.loadComponentTpl(
@@ -14,9 +14,6 @@ const _EntitiesListView = async (res, rej) => {
     mounted() {
       vuexStore.dispatch('core/updateTopBarTitle', this.$t('core.entities.title'));
     },
-    data: function() {
-      return {};
-    },
     methods: {
       goToCreateView: function() {
         this.$router.push({ name: 'entity-details', params: { id: 'new' } });

raw-cms-app/src/modules/core/views/entity-details-view/entity-details-view.js

@@ -14,14 +14,13 @@ const _EntityDetailsView = async (res, rej) => {
       EntityDetails: entityDetails,
     },
     created: function() {
-      RawCMS.eventBus.$on(rawCmsDetailEditEvents.loaded, ev => {
+      RawCMS.eventBus.$once(rawCmsDetailEditEvents.loaded, ev => {
         this.updateTitle({
           isNew: ev.isNew,
           name: optionalChain(() => ev.value.CollectionName, { fallbackValue: '<NONE>' }),
         });
       });
     },
-    data: function() {},
     methods: {
       updateTitle: function({ isNew, name }) {
         let title = isNew

raw-cms-app/src/modules/core/views/home-view/home-view.js

@@ -1,3 +1,4 @@
+import { vuexStore } from '../../../../config/vuex.js';
 import { DashboardDef } from '../../components/dashboard/dashboard.js';
 
 const _HomeView = async (res, rej) => {
@@ -8,6 +9,9 @@ const _HomeView = async (res, rej) => {
     components: {
       Dashboard: dashboardDef,
     },
+    mounted() {
+      vuexStore.dispatch('core/updateTopBarTitle', this.$t('core.home.title'));
+    },
     template: tpl,
   });
 };

raw-cms-app/src/modules/core/views/lambda-details-view/lambda-details-view.js

@@ -14,14 +14,13 @@ const _LambdaDetailsView = async (res, rej) => {
       LambdaDetails: editor,
     },
     created: function() {
-      RawCMS.eventBus.$on(rawCmsDetailEditEvents.loaded, ev => {
+      RawCMS.eventBus.$once(rawCmsDetailEditEvents.loaded, ev => {
         this.updateTitle({
           isNew: ev.isNew,
           name: optionalChain(() => ev.value.Name, { fallbackValue: '<NONE>' }),
         });
       });
     },
-    data: function() {},
     methods: {
       updateTitle: function({ isNew, name }) {
         let title = isNew

raw-cms-app/src/modules/core/views/lambdas-list-view/lambdas-list-view.js

@@ -1,5 +1,5 @@
-import { LambdasListDef } from '../../components/lambdas-list/lambdas-list.js';
 import vuexStore from '../../../../config/vuex.js';
+import { LambdasListDef } from '../../components/lambdas-list/lambdas-list.js';
 
 const _LambdasListView = async (res, rej) => {
   const tpl = await RawCMS.loadComponentTpl(
@@ -14,9 +14,6 @@ const _LambdasListView = async (res, rej) => {
     mounted() {
       vuexStore.dispatch('core/updateTopBarTitle', this.$t('core.lambdas.title'));
     },
-    data: function() {
-      return {};
-    },
     methods: {
       goToCreateView: function() {
         this.$router.push({ name: 'lambda-details', params: { id: 'new' } });

raw-cms-app/src/modules/core/views/login-view/login-view.js

@@ -23,7 +23,7 @@ const _LoginView = async (res, rej) => {
         return errors;
       },
     },
-    data: () => {
+    data: function() {
       return {
         username: '',
         password: '',

raw-cms-app/src/modules/core/views/login-view/login-view.tpl.html

@@ -2,7 +2,7 @@
   <v-col cols="12" sm="8" md="4">
     <v-card class="elevation-12">
       <v-form ref="loginForm" @submit="login($event)">
-        <v-toolbar color="primary" flat dark color="primary">
+        <v-toolbar color="primary" flat dark>
           <v-toolbar-title>{{ $t('core.login.title') }}</v-toolbar-title>
           <div class="flex-grow-1"></div>
         </v-toolbar>

raw-cms-app/src/modules/core/views/user-details-view/user-details-view.js

@@ -14,17 +14,16 @@ const _UserDetailsView = async (res, rej) => {
       UserDetails: details,
     },
     created: function() {
-      RawCMS.eventBus.$on(rawCmsDetailEditEvents.loaded, ev => {
+      RawCMS.eventBus.$once(rawCmsDetailEditEvents.loaded, ev => {
         this.updateTitle({
           isNew: ev.isNew,
           name: optionalChain(() => ev.value.UserName, { fallbackValue: '<NONE>' }),
         });
       });
     },
-    data: function() {},
     methods: {
       updateTitle: function({ isNew, name }) {
-        let title = isNew
+        const title = isNew
           ? this.$t('core.users.detail.newTitle')
           : this.$t('core.users.detail.updateTitle', { name: name });
 

raw-cms-app/src/modules/core/views/users-list-view/users-list-view.js

@@ -1,5 +1,5 @@
-import { UsersListDef } from '../../components/users-list/users-list.js';
 import vuexStore from '../../../../config/vuex.js';
+import { UsersListDef } from '../../components/users-list/users-list.js';
 
 const _UsersListView = async (res, rej) => {
   const tpl = await RawCMS.loadComponentTpl(
@@ -14,9 +14,6 @@ const _UsersListView = async (res, rej) => {
     mounted() {
       vuexStore.dispatch('core/updateTopBarTitle', this.$t('core.users.title'));
     },
-    data: function() {
-      return {};
-    },
     methods: {
       goToCreateView: function() {
         this.$router.push({ name: 'user-details', params: { id: 'new' } });

raw-cms-app/src/modules/formly-material/components/date-field/date-field.js

@@ -6,9 +6,11 @@ const _DateFieldDef = async () => {
   );
 
   return {
-    data: vm => ({
-      isMenuVisible: false,
-    }),
+    data: function() {
+      return {
+        isMenuVisible: false,
+      };
+    },
     computed: {
       dateFormatted: function() {
         return this.toTextValue(this.modelValue);

raw-cms-app/src/modules/shared/components/data-table/data-table.tpl.html

@@ -32,14 +32,12 @@
     :server-items-length="totalItemsCount"
     @click:row="goTo($event)"
   >
-    <template
-      v-for="(header, index) in dataHeaders"
-      :key="index"
-      v-slot:[getTemplateName(header)]="slotProps"
-    >
-      <slot :name="getTemplateName(header)" v-bind="slotProps">
-        {{ slotProps.item[header.value] }}
-      </slot>
+    <template v-for="(header, index) in dataHeaders" v-slot:[getTemplateName(header)]="slotProps">
+      <div :key="index">
+        <slot :name="getTemplateName(header)" v-bind="slotProps">
+          {{ slotProps.item[header.value] }}
+        </slot>
+      </div>
     </template>
 
     <template v-slot:item.action="{ item }">

raw-cms-app/src/modules/shared/components/detail-edit/detail-edit.tpl.html

@@ -10,11 +10,11 @@
     dark
     background-color="tabHeader"
     class="rawcms-detail-edit elevation-2"
-    centered="true"
-    grow="true"
+    :centered="true"
+    :grow="true"
     prev-icon="mdi-arrow-left-bold-box-outline"
     next-icon="mdi-arrow-right-bold-box-outline"
-    icons-and-text="true"
+    :icons-and-text="true"
     v-model="activeTabId"
     v-if="!isLoading"
     ref="tabs"