feat!: replaced vue2 event broker

danielroe · Jul 28, 2022 · 85d18a2 · 85d18a2
1 parent 021b6e5
commit 85d18a2
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 185 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,9 @@
   },
   "dependencies": {
     "@manydesigns/portofino": "^1.9.0",
+    "defu": "^6.0.0",
     "lodash": "^4.17",
+    "mitt": "^3.0.0",
     "v-calendar": "next"
   },
   "devDependencies": {

diff --git a/src/ZettoVuePrototype.ts b/src/ZettoVuePrototype.ts
diff --git a/src/components/CrudRead.js b/src/components/CrudRead.js
@@ -1,13 +1,12 @@
 import { h } from 'vue';
 import { mergeComponentFields } from '../lib/fields';
-import listenOnRoot from '../mixins/listenOnRoot';
 import translatorMixin from '../mixins/translatorMixin';
 import modelMixin, { modelMixinProps } from '../mixins/modelMixin';
-import { EVENT_NAME_REFRESH_DATA } from '../constants/events';
+import GuidamiBroker from '../dataBrokers/GuidamiBroker';
 
 export default {
   name: 'CrudRead',
-  mixins: [listenOnRoot, translatorMixin, modelMixin],
+  mixins: [translatorMixin, modelMixin],
   props: {
     id: { type: String },
     action: { type: [Object, String], required: true },
@@ -18,11 +17,16 @@ export default {
   data: () => ({
     loading: false,
     loadedItem: null,
+    dataBroker: null,
   }),
-  mounted() {
-    this.listenOnRoot(EVENT_NAME_REFRESH_DATA, this.refreshDataHandler);
+  created() {
+    this.$zettoEventEmitter.on('refreshData', this.refreshDataHandler);
+    this.dataBroker = new GuidamiBroker({ ...this.$attrs });
     this.fetchData();
   },
+  beforeDestroy() {
+    this.$zettoEventEmitter.off('refreshData', this.refreshDataHandler);
+  },
   computed: {
     tableFields() {
       if (!this.action) return [];
@@ -41,7 +45,7 @@ export default {
       if (this.entity._isPortofinoEntity) return;
       this.loading = true;
       this.loadedItem = await this.action.get(this.entity);
-      this.$emit('loaded', entity);
+      this.$emit('loaded', this.entity);
       this.loading = false;
     },
   },

diff --git a/src/components/CrudSearch.js b/src/components/CrudSearch.js
@@ -1,6 +1,4 @@
 import { h } from 'vue';
-import { EVENT_NAME_REFRESH_DATA } from '../constants/events';
-import listenOnRoot from '../mixins/listenOnRoot';
 import translatorMixin from '../mixins/translatorMixin';
 import modelMixin, { modelMixinProps } from '../mixins/modelMixin';
 import SearchFilter from './search/SearchFilter';
@@ -9,7 +7,7 @@ import { lazyPromise } from '../lib/utils';
 
 export default {
   name: 'CrudSearch',
-  mixins: [listenOnRoot, translatorMixin, modelMixin],
+  mixins: [translatorMixin, modelMixin],
   props: {
     id: { type: String },
     action: { type: Object, required: true },
@@ -22,6 +20,7 @@ export default {
     // createLabel: { type: String },
     // sort: { type: Object },
     // filters: { type: Object },
+    showFilters: { type: Boolean, default: false },
     buttons: { type: Array, default: () => [] },
     headEnabled: { type: Boolean, default: true },
     ...modelMixinProps,
@@ -33,14 +32,15 @@ export default {
     formFilters: null,
     sort: null,
     error: '',
-    expanded: false,
   }),
-
   mounted() {
-    this.listenOnRoot(EVENT_NAME_REFRESH_DATA, this.refreshDataHandler);
+    this.$zettoEventEmitter.on('refreshData', this.refreshDataHandler);
+    this.dataBroker = new GuidamiBroker(this.$props);
     this.fetchData();
   },
-
+  beforeDestroy() {
+    this.$zettoEventEmitter.off('refreshData', this.refreshDataHandler);
+  },
   watch: {
     currentPage() {
       this.fetchData();
@@ -51,15 +51,15 @@ export default {
   },
   computed: {
     compPageSize() {
-      if (!this.action) return 0;
+      if (!this.dataBroker) return 0;
       if (this.pageSize === false) return 0;
       return this.pageSize || this.action.config.rowsPerPage || 10;
     },
     tableFields() {
-      if (!this.action) return [];
+      if (!this.dataBroker) return [];
 
       return mergeComponentFields(
-        this.action.getSummaryProperties(),
+        this.dataBroker.getSearchFields(),
         this.fields
       );
     },
@@ -76,23 +76,15 @@ export default {
     async fetchData() {
       this.loading = true;
 
-      const searchParams = {
-        pagination: true,
-        page: this.currentPage,
-        filters: this.formFilters,
-        sort: this.sort,
-      };
-
-      // Pagination settings
-      if (this.pageSize === false) searchParams.pagination = false;
-      else searchParams.pageSize = this.compPageSize;
-
-      // Prop filters
-      // const filters = this.filters ? cloneDeep(this.filters) : {};
-      // if (this.searchField) filters[this.searchField] = this.search;
-
       try {
-        this.items = await lazyPromise(this.action.search(searchParams));
+        this.items = await lazyPromise(
+          this.dataBroker.search(
+            this.formFilters,
+            this.sort,
+            this.currentPage,
+            this.compPageSize
+          )
+        );
         this.$emit('loaded', this.items);
       } catch (e) {
         this.error = 'Errore, impossibile caricaricare i dati!';
@@ -102,26 +94,13 @@ export default {
     },
   },
   render() {
-    // this.search && h(
-    //   'button',
-    //   {
-    //     class: 'btn btn-link',
-    //     on: {
-    //       click: () => {
-    //         this.expanded = !this.expanded;
-    //       },
-    //     },
-    //   },
-    //   [this.$trans('zetto.search.filter')]
-    // ),
-
     return h('div', [
       this.search &&
         h(SearchFilter, {
           props: {
             action: this.action,
             fields: this.searchFields,
-            expanded: this.expanded,
+            expanded: this.showFilters,
             model: this.model,
           },
           on: { search: this.doSearch },

diff --git a/src/constants/events.ts b/src/constants/events.ts
diff --git a/src/index.ts b/src/index.ts
@@ -1,15 +1,34 @@
+import mitt from 'mitt';
+import { defu } from 'defu';
 import * as components from './components';
-import ZettoProto from './ZettoVuePrototype';
+import { Config } from './types/configType';
+import defaultConfig from './defaultConfig';
+
+type Events = {
+  refreshData: string;
+  // bar?: number;
+};
 
 declare module '@vue/runtime-core' {
   interface Vue {
-    $zetto: ZettoProto;
+    $zetto: {
+      refresh: (id: string) => void;
+      options: Config;
+    };
   }
 }
 
 export default {
-  install: (app, options) => {
-    app.config.globalProperties.$zetto = new ZettoProto(app, options);
+  install: (app, options: Config) => {
+    const emitter = mitt<Events>();
+
+    app.config.globalProperties.$zettoEventEmitter = emitter;
+    app.config.globalProperties.$zetto = {
+      options: defu(options, defaultConfig),
+      refresh(id: string) {
+        emitter.emit('refreshData', id);
+      },
+    };
 
     Object.entries(components).forEach(([componentName, component]) => {
       app.component(componentName, component);
@@ -18,5 +37,6 @@ export default {
 };
 
 export type { Config } from './types/configType';
+export type { default as DataBroker } from './dataBrokers/DataBroker';
 export { default as Bootstrap4 } from './models/bootstrap4';
 export { default as Bootstrap5 } from './models/bootstrap5';