Improve custom reports performance (#1676)

Author: joanagmaia

frontend/src/i18n/en.js

@@ -435,6 +435,7 @@ const en = {
     cubejs: {
       tooltip: {
         Activities: 'Activity',
+        Contacts: 'Contact',
         Members: 'Contact',
         Conversations: 'Conversation',
         Organizations: 'Organization',

frontend/src/modules/report/components/report-create-dialog.vue

@@ -61,8 +61,6 @@ import {
 } from 'vue';
 import { useRouter } from 'vue-router';
 import { ReportService } from '@/modules/report/report-service';
-import { ReportModel } from '@/modules/report/report-model';
-import { FormSchema } from '@/shared/form/form-schema';
 
 const router = useRouter();
 const props = defineProps({
@@ -73,16 +71,6 @@ const props = defineProps({
 });
 const emit = defineEmits('update:modelValue');
 
-const { fields } = ReportModel;
-const formSchema = new FormSchema([
-  fields.name,
-  fields.widgets,
-  fields.settings,
-  fields.public,
-]);
-
-const rules = reactive(formSchema.rules());
-
 const visible = computed({
   get() {
     return props.modelValue;

frontend/src/modules/report/components/report-form.vue

@@ -4,14 +4,13 @@
       v-if="record"
       ref="form"
       :model="model"
-      :rules="rules"
       class="report-form"
     >
       <el-input
         ref="focus"
-        v-model="model[fields.name.name]"
-        :placeholder="fields.name.placeholder"
+        v-model="model.name"
         class="report-form-title"
+        @input="onTitleUpdate"
       />
       <ReportGridLayout
         v-model="model"
@@ -23,11 +22,9 @@
 </template>
 
 <script setup>
-import { defineProps, reactive, watch } from 'vue';
+import { defineProps, reactive } from 'vue';
 import debounce from 'lodash/debounce';
 import { mapActions } from '@/shared/vuex/vuex.helpers';
-import { FormSchema } from '@/shared/form/form-schema';
-import { ReportModel } from '@/modules/report/report-model';
 import ReportGridLayout from './report-grid-layout.vue';
 
 const props = defineProps({
@@ -37,31 +34,21 @@ const props = defineProps({
   },
 });
 
-const { fields } = ReportModel;
-const formSchema = new FormSchema([
-  fields.name,
-  fields.widgets,
-  fields.settings,
-  fields.public,
-]);
+const { doUpdate } = mapActions('report');
 
-const rules = formSchema.rules();
-const model = reactive(
-  JSON.parse(JSON.stringify(props.record)),
-);
+const model = reactive(props.record);
 
-const { doUpdate } = mapActions('report');
+const onTitleUpdate = debounce(async (value) => {
+  model.name = value;
 
-const debouncedChange = debounce(async () => {
   await doUpdate({
-    id: props.record && props.record.id,
-    values: formSchema.cast(model),
+    id: props.record.id,
+    values: {
+      ...model,
+      widgets: model.widgets.map((w) => w.id),
+    },
   });
-}, 1000);
-
-watch(model, () => {
-  debouncedChange();
-});
+}, 500);
 </script>
 
 <script>