From 3397643b49ce8c6f64468f6942686fac2a8cf7be Mon Sep 17 00:00:00 2001 From: Reza Date: Thu, 11 Feb 2021 17:25:17 +0330 Subject: [PATCH 1/5] add single-row fetch --- src/bulma/EnsoTable.vue | 3 + src/bulma/VueTable.vue | 3 + src/renderless/CoreTable.vue | 68 +++++++++++++++++++--- src/renderless/services/NumberFormatter.js | 6 +- 4 files changed, 71 insertions(+), 9 deletions(-) diff --git a/src/bulma/EnsoTable.vue b/src/bulma/EnsoTable.vue index 1d90a67..047e4ff 100644 --- a/src/bulma/EnsoTable.vue +++ b/src/bulma/EnsoTable.vue @@ -61,6 +61,9 @@ export default { fetch() { return this.ready && this.$refs.table.fetch(); }, + fetchRow(dtRowId) { + return this.ready && this.$refs.table.fetchRow(dtRowId); + }, highlight(dtRowId) { return this.ready && this.$refs.table.highlight(dtRowId); }, diff --git a/src/bulma/VueTable.vue b/src/bulma/VueTable.vue index 690654d..d1e73b4 100644 --- a/src/bulma/VueTable.vue +++ b/src/bulma/VueTable.vue @@ -52,6 +52,9 @@ export default { fetch() { return this.ready && this.$refs.table.fetch(); }, + fetchRow(dtRowId) { + return this.ready && this.$refs.table.fetchRow(dtRowId); + }, highlight(dtRowId) { return this.ready && this.$refs.table.highlight(dtRowId); }, diff --git a/src/renderless/CoreTable.vue b/src/renderless/CoreTable.vue index 092e404..c2db408 100644 --- a/src/renderless/CoreTable.vue +++ b/src/renderless/CoreTable.vue @@ -132,6 +132,7 @@ export default { doButtonAction: this.doButtonAction, exportData: this.exportData, fetch: this.fetch, + fetchRow: this.fetchRow, hasContent: this.hasContent, hasEntries: this.hasEntries, hasFooter: this.hasFooter, @@ -265,7 +266,7 @@ export default { this.init(); }, - request() { + request(dtRowId = null) { if (this.ongoingRequest) { this.ongoingRequest.cancel(); } @@ -275,13 +276,13 @@ export default { return this.template.method === 'GET' ? axios[this.template.method.toLowerCase()]( this.template.readPath, { - ...this.readRequest(this.template.method), + ...this.readRequest(this.template.method, false, false, dtRowId), cancelToken: this.ongoingRequest.token, }, ) : axios[this.template.method.toLowerCase()]( this.template.readPath, - this.readRequest(this.template.method), + this.readRequest(this.template.method, false, false, dtRowId), { cancelToken: this.ongoingRequest.token }, ); }, @@ -320,14 +321,65 @@ export default { } }); }, - readRequest(method, exportMode = false, selection = false) { + fetchRow(dtRowId) { + const index = this.state.body.data + .findIndex((item) => item[this.template.dtRowId] === dtRowId); + + if (index === -1) { + throw new Error(`${dtRowId} is not exist`); + } + + const selectedRow = { ...this.state.body.data[index] }; + this.meta.loading = true; + this.state.expanded = []; + this.$emit('fetching'); + + return this.request(dtRowId).then(({ data }) => { + const body = data; + this.meta.loading = false; + this.meta.forceInfo = false; + + if (body.data.length === 0) { + return this.fetch(); + } + + const proccessdMoney = this.meta.money + ? this.processMoney(body) + : body; + + this.state.body.data[index] = proccessdMoney.data[0]; + + if (this.meta.number) { + this.processNumber(); + } + + const changedTotal = Object.keys(this.state.body.total) + .filter((key) => selectedRow[key] !== this.state.body.data[index][key]) + .length > 0; + + if (changedTotal) { + return this.fetch(); + } + + this.$emit('fetched'); + this.$nextTick(this.refreshPageSelected); + }).catch(error => { + this.meta.loading = false; + + if (!axios.isCancel(error)) { + this.errorHandler(error); + } + }); + }, + readRequest(method, exportMode = false, selection = false, dtRowId = null) { const params = selection ? { selection: this.state.selected } : { + withMeta: !dtRowId, internalFilters: this.internalFilters, - filters: this.filters, - intervals: this.intervals, - params: this.params, + filters: dtRowId ? { [`${this.template.table}`]: { [`${this.template.dtRowId}`]: dtRowId } } : this.filters, + intervals: dtRowId ? {} : this.intervals, + params: dtRowId ? this.params : {}, columns: this.requestColumns(exportMode), meta: { start: this.meta.start, @@ -367,7 +419,7 @@ export default { .filter(column => !!column.money) .forEach(column => { const total = this.meta.total - && Object.keys(body.total).includes(column.name); + && Object.keys(body?.total ?? []).includes(column.name); let money = body.data.map(row => Number.parseFloat(row[column.name]) || 0); diff --git a/src/renderless/services/NumberFormatter.js b/src/renderless/services/NumberFormatter.js index 60bd18a..49001c9 100644 --- a/src/renderless/services/NumberFormatter.js +++ b/src/renderless/services/NumberFormatter.js @@ -21,9 +21,13 @@ class NumberFormatter { } format(number) { + const { template, symbol } = this.column.number; + const cleanUp = (value) => value.replace(symbol, '').trim(); const max = (max, value) => Math.max(value.length, max); + + number = number.map(cleanUp); + const length = number.reduce(max, 0); - const { template, symbol } = this.column.number; const pad = value => value.padStart(length, ' '); const formatter = value => template.replace('%s', symbol) .replace('%v', pad(value)); From c11e0db4a1284cd9804a27912965eaa8f24963e1 Mon Sep 17 00:00:00 2001 From: Reza Date: Fri, 12 Feb 2021 12:15:06 +0330 Subject: [PATCH 2/5] removes money --- src/bulma/parts/TableBody.vue | 2 +- src/bulma/parts/TableFooter.vue | 8 +- src/bulma/parts/top/Filters.vue | 7 +- src/bulma/parts/top/filters/FilterLabel.vue | 1 - src/bulma/parts/top/filters/Labels.vue | 3 +- src/bulma/parts/top/filters/Money.vue | 102 -------------------- src/bulma/parts/top/filters/Number.vue | 2 +- src/renderless/CoreTable.vue | 36 +------ 8 files changed, 10 insertions(+), 151 deletions(-) delete mode 100644 src/bulma/parts/top/filters/Money.vue diff --git a/src/bulma/parts/TableBody.vue b/src/bulma/parts/TableBody.vue index 779fd39..80fd831 100644 --- a/src/bulma/parts/TableBody.vue +++ b/src/bulma/parts/TableBody.vue @@ -68,7 +68,7 @@