From e850648b48ab64db34c4d9def39578b29fe25bdd Mon Sep 17 00:00:00 2001 From: William Correa Date: Thu, 28 Mar 2019 18:48:01 -0300 Subject: [PATCH] [revamp] Redistribute methods of components --- .../Buttons/PrototypeButtonDropdown.js | 35 +++++ .../Buttons/PrototypeButtonParse.js | 50 ++++++ .../Buttons/PrototypeButtonSingle.js | 17 ++ .../Components/Form/PrototypeComponents.js | 144 ++--------------- .../Form/PrototypeFieldComponent.js | 88 +++++++++++ .../Components/Form/PrototypeFieldError.js | 51 ++++++ .../Components/Form/PrototypeFieldLabel.js | 25 +++ .../Prototype/Components/PrototypeButtons.js | 87 ++--------- src/app/Prototype/Components/PrototypeForm.js | 6 +- .../Prototype/Components/PrototypeTable.js | 145 ++---------------- .../Components/Table/PrototypeSlotTop.js | 54 +++++++ .../Components/Table/PrototypeSlots.js | 106 +++++++++++++ src/app/Prototype/Prototype.js | 12 ++ src/i18n/en-us/prototype/index.js | 3 + src/view/Dashboard/Index.vue | 1 + 15 files changed, 479 insertions(+), 345 deletions(-) create mode 100644 src/app/Prototype/Components/Buttons/PrototypeButtonDropdown.js create mode 100644 src/app/Prototype/Components/Buttons/PrototypeButtonParse.js create mode 100644 src/app/Prototype/Components/Buttons/PrototypeButtonSingle.js create mode 100644 src/app/Prototype/Components/Form/PrototypeFieldComponent.js create mode 100644 src/app/Prototype/Components/Form/PrototypeFieldError.js create mode 100644 src/app/Prototype/Components/Form/PrototypeFieldLabel.js create mode 100644 src/app/Prototype/Components/Table/PrototypeSlotTop.js create mode 100644 src/app/Prototype/Components/Table/PrototypeSlots.js diff --git a/src/app/Prototype/Components/Buttons/PrototypeButtonDropdown.js b/src/app/Prototype/Components/Buttons/PrototypeButtonDropdown.js new file mode 100644 index 0000000..28d7206 --- /dev/null +++ b/src/app/Prototype/Components/Buttons/PrototypeButtonDropdown.js @@ -0,0 +1,35 @@ +/** + * @typedef {PrototypeButtonDropdown} + */ +export default { + /** + */ + methods: { + /** + * @param {Function} h + * @param {Object} data + * @returns {*} + */ + renderButtonDropdown (h, data) { + // TODO: implement dropdown items + /* + + + + {{ action.label }} + + + + */ + data.attrs.split = true + + return h('q-btn-dropdown', data) + } + } +} diff --git a/src/app/Prototype/Components/Buttons/PrototypeButtonParse.js b/src/app/Prototype/Components/Buttons/PrototypeButtonParse.js new file mode 100644 index 0000000..d2c47d5 --- /dev/null +++ b/src/app/Prototype/Components/Buttons/PrototypeButtonParse.js @@ -0,0 +1,50 @@ +/** + * @typedef {PrototypeButtonParse} + */ +export default { + /** + */ + methods: { + /** + * @param {Object} button + * @returns {Object} + */ + parseAttrs (button) { + return { ...button.attrs, ...this.override } + }, + /** + * @param {Object} button + * @returns {Object} + */ + parseListeners (button) { + if (typeof button.listeners !== 'object') { + return button.listeners + } + let context = {} + if (this.context) { + context = this.$util.clone(this.context) + } + const reduce = (listeners, key) => { + listeners[key] = ($event) => button.listeners[key]($event, { context }) + return listeners + } + return Object.keys(button.listeners).reduce(reduce, {}) + }, + /** + * @param {Object} button + */ + parseButton (button) { + let action = button + if (button.configure && typeof button.configure === 'function') { + const clone = this.$util.clone(button) + const parameters = { context: this.context, position: this.position, scope: this.scope } + action = button.configure.call(this, clone, parameters) + } + return { + ...action, + attrs: this.parseAttrs(action), + listeners: this.parseListeners(action) + } + } + } +} diff --git a/src/app/Prototype/Components/Buttons/PrototypeButtonSingle.js b/src/app/Prototype/Components/Buttons/PrototypeButtonSingle.js new file mode 100644 index 0000000..904286a --- /dev/null +++ b/src/app/Prototype/Components/Buttons/PrototypeButtonSingle.js @@ -0,0 +1,17 @@ +/** + * @typedef {PrototypeButtonSingle} + */ +export default { + /** + */ + methods: { + /** + * @param {Function} h + * @param {Object} data + * @returns {*} + */ + renderButtonSingle (h, data) { + return h('q-btn', data) + } + } +} diff --git a/src/app/Prototype/Components/Form/PrototypeComponents.js b/src/app/Prototype/Components/Form/PrototypeComponents.js index d8312cf..08a27b0 100644 --- a/src/app/Prototype/Components/Form/PrototypeComponents.js +++ b/src/app/Prototype/Components/Form/PrototypeComponents.js @@ -1,10 +1,18 @@ -import PrototypeError from 'src/app/Prototype/Components/Form/PrototypeError' +import PrototypeError from './PrototypeError' +import PrototypeFieldComponent from './PrototypeFieldComponent' +import PrototypeFieldLabel from './PrototypeFieldLabel' +import PrototypeFieldError from './PrototypeFieldError' /** * @typedef {PrototypeFormComponents} */ export default { name: 'PrototypeFormComponents', + /** + */ + mixins: [ + PrototypeFieldLabel, PrototypeFieldComponent, PrototypeFieldError + ], /** */ components: { @@ -16,25 +24,8 @@ export default { fields: { type: Object, default: () => ({}) - }, - value: { - type: Object, - default: () => ({}) - }, - errors: { - type: Object, - default: () => ({}) - }, - validations: { - type: Object, - default: () => ({}) } }, - /** - */ - data: () => ({ - record: {} - }), /** */ methods: { @@ -45,7 +36,7 @@ export default { renderField (h, field) { const key = field.$key - const error = this.hasError(key) + const error = this.fieldHasError(key) const style = { display: field.$layout.formHidden ? 'none' : '' } @@ -63,39 +54,6 @@ export default { return h('div', data, children) }, - /** - * @param {Function} h - * @param {Object} field - * @returns {*} - */ - renderFieldLabel (h, field) { - return h('label', { domProps: { innerHTML: this.labelContent(field) } }) - }, - /** - * @param {Function} h - * @param {Object} field - * @returns {*} - */ - renderFieldComponent (h, field) { - const key = field.$key - - return h(field.is, { - ref: this.componentRef(field), - domProps: { tabIndex: this.componentTabIndex(), value: this.record[key] }, - props: { value: this.record[key] }, - attrs: { ...field.attrs }, - on: { ...field.listeners, input: ($event) => this.componentInput($event, field) } - }) - }, - /** - * @param {Function} h - * @param {string} key - * @param {boolean} error - * @returns {*} - */ - renderFieldError (h, key, error) { - return h('prototype-error', { attrs: { show: error, message: this.errorContent(key) } }) - }, /** * @param {string|number} width * @param {string|number} height @@ -109,45 +67,10 @@ export default { } return classNames }, - /** - * @param {Object} field - * @returns {string} - */ - labelContent (field) { - // Se o field não possuir label, ele não exibe (*) - return (!field.label) ? '' : `${field.label} ${field.$required ? '*' : ''}` - }, - /** - * @param {Object} field - */ - componentRef (field) { - return `form:component-${field.$layout.formOrder}` - }, - /** - * @returns {number} - */ - componentTabIndex () { - if (!this.counter) { - this.counter = 0 - } - this.counter++ - return this.counter - }, - /** - * @param {Object} $event - * @param {Object} component - */ - componentInput ($event, component) { - this.record[component.$key] = component.parseInput($event) - this.$emit('input', component.$key, component.parseInput($event)) - if (component.listeners.input) { - component.listeners.input($event) - } - }, /** * @param {string} key */ - hasError (key) { + fieldHasError (key) { if (this.errors[key]) { return true } @@ -156,52 +79,8 @@ export default { return false } return record[key].$error - }, - /** - * @param {string} key - * @returns {string} - */ - errorContent (key) { - const errorMessages = [] - const forEach = (validation) => { - if (!validations[validation]) { - let translation = `domains.${this.domain}.validations.${validation}`.replace(/\//g, '.') - if (!this.$te(translation)) { - translation = `validation.${validation}` - } - errorMessages.push(this.$t(translation, validations.$params[validation])) - } - } - - const validations = this.$util.prop(this.validations, `record.${key}`) - if (validations) { - Object.keys(validations.$params).forEach(forEach) - } - if (this.errors[key]) { - errorMessages.push(this.errors[key]) - } - return errorMessages.join(' / ') - } - }, - /** - */ - watch: { - /** - * @param value - */ - value: { - deep: true, - handler (value) { - this.record = this.$util.clone(value) - } } }, - /** - */ - created () { - this.counter = 1 - this.record = this.$util.clone(this.value) - }, /** * @param {Function} h * @returns {*} @@ -210,6 +89,7 @@ export default { // console.log('~> render', this.$options.name, JSON.stringify(this.record)) const data = { class: 'form form-grid' } const children = Object.values(this.fields).map((field) => this.renderField(h, field)) + return h('div', data, children) } } diff --git a/src/app/Prototype/Components/Form/PrototypeFieldComponent.js b/src/app/Prototype/Components/Form/PrototypeFieldComponent.js new file mode 100644 index 0000000..3bd93f3 --- /dev/null +++ b/src/app/Prototype/Components/Form/PrototypeFieldComponent.js @@ -0,0 +1,88 @@ +/** + * @typedef {PrototypeFieldComponent} + */ +export default { + /** + */ + props: { + value: { + type: Object, + default: () => ({}) + }, + validations: { + type: Object, + default: () => ({}) + } + }, + /** + */ + data: () => ({ + record: {} + }), + /** + */ + methods: { + /** + * @param {Object} field + */ + componentRef (field) { + return `form:component-${field.$layout.formOrder}` + }, + /** + * @returns {number} + */ + componentTabIndex () { + if (!this.counter) { + this.counter = 0 + } + this.counter++ + return this.counter + }, + /** + * @param {Object} $event + * @param {Object} component + */ + componentInput ($event, component) { + this.record[component.$key] = component.parseInput($event) + this.$emit('input', component.$key, component.parseInput($event)) + if (component.listeners.input) { + component.listeners.input($event) + } + }, + /** + * @param {Function} h + * @param {Object} field + * @returns {*} + */ + renderFieldComponent (h, field) { + const key = field.$key + + return h(field.is, { + ref: this.componentRef(field), + domProps: { tabIndex: this.componentTabIndex(), value: this.record[key] }, + props: { value: this.record[key] }, + attrs: { ...field.attrs }, + on: { ...field.listeners, input: ($event) => this.componentInput($event, field) } + }) + } + }, + /** + */ + watch: { + /** + * @param value + */ + value: { + deep: true, + handler (value) { + this.record = this.$util.clone(value) + } + } + }, + /** + */ + created () { + this.counter = 1 + this.record = this.$util.clone(this.value) + } +} diff --git a/src/app/Prototype/Components/Form/PrototypeFieldError.js b/src/app/Prototype/Components/Form/PrototypeFieldError.js new file mode 100644 index 0000000..745c9f3 --- /dev/null +++ b/src/app/Prototype/Components/Form/PrototypeFieldError.js @@ -0,0 +1,51 @@ +/** + * @typedef {PrototypeFieldError} + */ +export default { + /** + */ + props: { + errors: { + type: Object, + default: () => ({}) + } + }, + /** + */ + methods: { + /** + * @param {string} key + * @returns {string} + */ + errorContent (key) { + const errorMessages = [] + const forEach = (validation) => { + if (!validations[validation]) { + let translation = `domains.${this.domain}.validations.${validation}`.replace(/\//g, '.') + if (!this.$te(translation)) { + translation = `validation.${validation}` + } + errorMessages.push(this.$t(translation, validations.$params[validation])) + } + } + + const validations = this.$util.prop(this.validations, `record.${key}`) + if (validations) { + Object.keys(validations.$params).forEach(forEach) + } + if (this.errors[key]) { + errorMessages.push(this.errors[key]) + } + return errorMessages.join(' / ') + }, + /** + * @param {Function} h + * @param {string} key + * @param {boolean} error + * @returns {*} + */ + renderFieldError (h, key, error) { + return h('prototype-error', { attrs: { show: error, message: this.errorContent(key) } }) + } + } +} diff --git a/src/app/Prototype/Components/Form/PrototypeFieldLabel.js b/src/app/Prototype/Components/Form/PrototypeFieldLabel.js new file mode 100644 index 0000000..71fe31c --- /dev/null +++ b/src/app/Prototype/Components/Form/PrototypeFieldLabel.js @@ -0,0 +1,25 @@ +/** + * @typedef {PrototypeFieldLabel} + */ +export default { + /** + */ + methods: { + /** + * @param {Function} h + * @param {Object} field + * @returns {*} + */ + renderFieldLabel (h, field) { + return h('label', { domProps: { innerHTML: this.labelContent(field) } }) + }, + /** + * @param {Object} field + * @returns {string} + */ + labelContent (field) { + // Se o field não possuir label, ele não exibe (*) + return (!field.label) ? '' : `${field.label} ${field.$required ? '*' : ''}` + } + } +} diff --git a/src/app/Prototype/Components/PrototypeButtons.js b/src/app/Prototype/Components/PrototypeButtons.js index b1cec97..68bf170 100644 --- a/src/app/Prototype/Components/PrototypeButtons.js +++ b/src/app/Prototype/Components/PrototypeButtons.js @@ -1,5 +1,17 @@ +import PrototypeButtonParse from './Buttons/PrototypeButtonParse' +import PrototypeButtonDropdown from './Buttons/PrototypeButtonDropdown' +import PrototypeButtonSingle from './Buttons/PrototypeButtonSingle' + +/** + * @typedef {PrototypeButtons} + */ export default { name: 'PrototypeButtons', + /** + */ + mixins: [ + PrototypeButtonParse, PrototypeButtonDropdown, PrototypeButtonSingle + ], /** */ props: { @@ -60,85 +72,11 @@ export default { } return this.renderButtonSingle(h, data) }, - /** - * @param {Function} h - * @param {Object} data - * @returns {*} - */ - renderButtonDropdown (h, data) { - // TODO: implement dropdown items - /* - - - - {{ action.label }} - - - - */ - data.attrs.split = true - return h('q-btn-dropdown', data) - }, - /** - * @param {Function} h - * @param {Object} data - * @returns {*} - */ - renderButtonSingle (h, data) { - return h('q-btn', data) - }, /** * @param {string} key */ buttonRef (key) { return `form:button-${key}` - }, - /** - * @param {Object} button - * @returns {Object} - */ - parseAttrs (button) { - return { ...button.attrs, ...this.override } - }, - /** - * @param {Object} button - * @returns {Object} - */ - parseListeners (button) { - if (typeof button.listeners !== 'object') { - return button.listeners - } - let context = {} - if (this.context) { - context = this.$util.clone(this.context) - } - const reduce = (listeners, key) => { - listeners[key] = ($event) => button.listeners[key]($event, { context }) - return listeners - } - return Object.keys(button.listeners).reduce(reduce, {}) - }, - /** - * @param {Object} button - */ - parseButton (button) { - let action = button - if (button.configure && typeof button.configure === 'function') { - const clone = this.$util.clone(button) - const parameters = { context: this.context, position: this.position, scope: this.scope } - action = button.configure.call(this, clone, parameters) - } - return { - ...action, - attrs: this.parseAttrs(action), - listeners: this.parseListeners(action) - } } }, /** @@ -149,6 +87,7 @@ export default { class: 'app-form-buttons' } const children = Object.values(this.actions).map((button) => this.renderButton(h, button)) + return h('div', data, children) } } diff --git a/src/app/Prototype/Components/PrototypeForm.js b/src/app/Prototype/Components/PrototypeForm.js index 6ceb509..5c6ccc5 100644 --- a/src/app/Prototype/Components/PrototypeForm.js +++ b/src/app/Prototype/Components/PrototypeForm.js @@ -27,12 +27,13 @@ export default { /** * @param {Function} h */ - renderFormWrapper (h) { + renderForm (h) { const data = { class: 'app-form-wrapper' } const children = [ this.renderFormBody(h), this.renderPrototypeButtons(h, 'form-footer', { record: this.record }) ] + return h('div', data, children) }, /** @@ -46,7 +47,6 @@ export default { const children = [ this.renderFormBodyComponents(h, this.getComponents()) ] - if (this.hasGroups) { Object.keys(this.groups).forEach((key) => { const data = { @@ -129,7 +129,7 @@ export default { } } const children = [ - this.renderFormWrapper(h), + this.renderForm(h), this.renderFormDebuggers(h) ] diff --git a/src/app/Prototype/Components/PrototypeTable.js b/src/app/Prototype/Components/PrototypeTable.js index 99d96b2..8d3463c 100644 --- a/src/app/Prototype/Components/PrototypeTable.js +++ b/src/app/Prototype/Components/PrototypeTable.js @@ -1,6 +1,8 @@ import Dynamic from '../Contracts/Dynamic' import Table from '../Contracts/Table' -import PrototypeButtons from 'src/app/Prototype/Components/PrototypeButtons' +import PrototypeSlots from 'src/app/Prototype/Components/Table/PrototypeSlots' + +import PrototypeButtons from './PrototypeButtons' /** * @typedef {PrototypeTable} @@ -15,14 +17,16 @@ export default { /** */ mixins: [ - Dynamic, Table + Dynamic, Table, PrototypeSlots ], + /** + */ methods: { /** * @param {Function} h * @returns {*} */ - renderTableWrapper (h) { + renderTable (h) { const attrs = { ...this.bind, data: this.data, @@ -41,141 +45,10 @@ export default { 'update:selected': (selected) => { this.selected = selected } } - const scopedSlots = { - 'top': (props) => { - return this.renderTableTop(h, props) - }, - 'body-cell-id': (props) => { - return this.renderTableCellButtons(h, props) - }, - 'pagination': (props) => { - return this.renderTablePagination(h, props) - } - } + const scopedSlots = this.renderTableSlots(h) return h('q-table', { class: 'PrototypeTable', props, attrs, on, scopedSlots }) }, - /** - * @param {Function} h - * @param {Object} props - * @returns {*} - */ - renderTableTop (h, props) { - return [ - this.renderTableColumnsSelector(h), - h('q-space'), - this.renderPrototypeButtonsCompact(h, 'table-top', { records: this.selected }), - h('q-space'), - this.renderTableSearch(h) - ] - }, - /** - * @param {Function} h - * @returns {*} - */ - renderTableColumnsSelector (h) { - const attrs = { - 'display-value': this.$q.lang.table.columns, - 'multiple': true, - 'borderless': true, - 'dense': true, - 'options-dense': true, - 'emit-value': true, - 'map-options': true, - 'options': this.columns, - 'option-value': 'name' - } - const props = { - value: this.visibleColumns - } - const style = { - 'min-width': '150px' - } - const on = { - input: (visibleColumns) => { this.visibleColumns = visibleColumns } - } - - return h('q-select', { attrs, props, on, style }) - }, - /** - * @param {Function} h - * @returns {*} - */ - renderTableSearch (h) { - const attrs = { - dense: true, - debounce: 300, - placeholder: this.$t('prototype.table.search') - } - const props = { - value: this.filter - } - const on = { - input: (filter) => { - this.filter = filter - this.search() - } - } - const scopedSlots = { - append: () => h('q-icon', { attrs: { name: 'search' } }) - } - - return h('q-input', { attrs, props, on, scopedSlots }) - }, - /** - * @param {Function} h - * @param {Object} props - * @returns {*} - */ - renderTableCellButtons (h, props) { - const data = { - style: { position: 'relative' } - } - const children = [ - props.row[this.primaryKey], - this.renderPrototypeButtonsCompact(h, 'table-cell', { record: props.row }) - ] - - return h('q-td', data, children) - }, - /** - * @param {Function} h - * @param {Object} props - * @returns {*} - */ - renderTablePagination (h, props) { - const texts = [ - props.pagination.rowsPerPage * (props.pagination.page - 1) + 1, '-' - ] - let fragment = props.pagination.rowsPerPage * (props.pagination.page) - if (props.isLastPage) { - fragment = props.pagination.rowsNumber - } - texts.push(fragment) - texts.push('/') - texts.push(props.pagination.rowsNumber) - - const button = { - round: true, dense: true, flat: true, textColor: 'grey-8' - } - - const previous = { - attrs: { ...button, disable: props.isFirstPage, icon: 'chevron_left' }, - on: { click: this.previousPage } - } - - const next = { - attrs: { ...button, disable: props.isLastPage, icon: 'chevron_right' }, - on: { click: this.nextPage } - } - - return [ - h('span', { class: 'q-table__bottom-item' }, texts.join(' ')), - h('q-btn', previous), - h('span', { class: 'text-center' }, `${props.pagination.page} / ${props.pagination.pagesNumber}`), - h('q-btn', next) - ] - }, /** * @param {Function} h */ @@ -199,7 +72,7 @@ export default { attrs: { padding: true } } const children = [ - this.renderTableWrapper(h), + this.renderTable(h), this.renderTableDebuggers(h) ] diff --git a/src/app/Prototype/Components/Table/PrototypeSlotTop.js b/src/app/Prototype/Components/Table/PrototypeSlotTop.js new file mode 100644 index 0000000..39d8078 --- /dev/null +++ b/src/app/Prototype/Components/Table/PrototypeSlotTop.js @@ -0,0 +1,54 @@ +/** + * @param {Function} h + * @returns {*} + */ +export const renderTableColumnsSelector = function (h) { + const attrs = { + 'display-value': this.$q.lang.table.columns, + 'multiple': true, + 'borderless': true, + 'dense': true, + 'options-dense': true, + 'emit-value': true, + 'map-options': true, + 'options': this.columns, + 'option-value': 'name' + } + const props = { + value: this.visibleColumns + } + const style = { + 'min-width': '150px' + } + const on = { + input: (visibleColumns) => { this.visibleColumns = visibleColumns } + } + + return h('q-select', { attrs, props, on, style }) +} + +/** + * @param {Function} h + * @returns {*} + */ +export const renderTableSearch = function (h) { + const attrs = { + dense: true, + debounce: 300, + placeholder: this.$t('prototype.table.search') + } + const props = { + value: this.filter + } + const on = { + input: (filter) => { + this.filter = filter + this.search() + } + } + const scopedSlots = { + append: () => h('q-icon', { attrs: { name: 'search' } }) + } + + return h('q-input', { attrs, props, on, scopedSlots }) +} diff --git a/src/app/Prototype/Components/Table/PrototypeSlots.js b/src/app/Prototype/Components/Table/PrototypeSlots.js new file mode 100644 index 0000000..c42767b --- /dev/null +++ b/src/app/Prototype/Components/Table/PrototypeSlots.js @@ -0,0 +1,106 @@ +import { renderTableColumnsSelector, renderTableSearch } from './PrototypeSlotTop' + +/** + * @typedef {PrototypeTop} + */ +export default { + /** + */ + methods: { + /** + * @param h + * @returns {*} + */ + renderTableSlots (h) { + return { + 'top': (props) => { + return this.renderTableTop(h, props) + }, + 'body-cell-id': (props) => { + return this.renderTableCellButtons(h, props) + }, + 'pagination': (props) => { + return this.renderTablePagination(h, props) + } + } + }, + /** + * @param {Function} h + * @param {Object} props + * @returns {*} + */ + renderTableTop (h, props) { + return [ + this.renderTableColumnsSelector(h), + h('q-space'), + this.renderPrototypeButtonsCompact(h, 'table-top', { records: this.selected }), + h('q-space'), + this.renderTableSearch(h) + ] + }, + /** + * @param {Function} h + * @returns {*} + */ + renderTableColumnsSelector: renderTableColumnsSelector, + /** + * @param {Function} h + * @returns {*} + */ + renderTableSearch: renderTableSearch, + /** + * @param {Function} h + * @param {Object} props + * @returns {*} + */ + renderTableCellButtons (h, props) { + const data = { + style: { position: 'relative' } + } + const children = [ + props.row[this.primaryKey], + this.renderPrototypeButtonsCompact(h, 'table-cell', { record: props.row }) + ] + + return h('q-td', data, children) + }, + /** + * @param {Function} h + * @param {Object} props + * @returns {*} + */ + renderTablePagination (h, props) { + const texts = [ + props.pagination.rowsPerPage * (props.pagination.page - 1) + 1, '-' + ] + let fragment = props.pagination.rowsPerPage * (props.pagination.page) + if (props.isLastPage) { + fragment = props.pagination.rowsNumber + } + texts.push(fragment) + texts.push('/') + texts.push(props.pagination.rowsNumber) + + const button = { + round: true, dense: true, flat: true, textColor: 'grey-8' + } + + const previous = { + attrs: { ...button, disable: props.isFirstPage, icon: 'chevron_left' }, + on: { click: this.previousPage } + } + + const next = { + attrs: { ...button, disable: props.isLastPage, icon: 'chevron_right' }, + on: { click: this.nextPage } + } + + return [ + h('span', { class: 'q-table__bottom-item' }, texts.join(' ')), + h('q-btn', previous), + h('span', { class: 'text-center' }, `${props.pagination.page} / ${props.pagination.pagesNumber}`), + h('q-btn', next) + ] + } + } +} diff --git a/src/app/Prototype/Prototype.js b/src/app/Prototype/Prototype.js index a3b4fa0..fd59b6e 100644 --- a/src/app/Prototype/Prototype.js +++ b/src/app/Prototype/Prototype.js @@ -83,6 +83,12 @@ export default class Prototype extends Skeleton { this.$browse(`${this.path}/add`, true) } + /** + */ + back () { + this.$browse(-1) + } + /** * @param {Object} record * @param {Array} records @@ -201,6 +207,12 @@ export default class Prototype extends Skeleton { .actionIcon('add') .actionColor('primary') + this.action('back') + .actionScopes(['index', 'create', 'read', 'update']) + .actionPositions(['form-footer']) + .actionLabel(lang('prototype.action.back.label')) + .actionIcon('reply') + this.action('cancel') .actionFloatRight() .actionScopes(['index', 'create', 'read', 'update']) diff --git a/src/i18n/en-us/prototype/index.js b/src/i18n/en-us/prototype/index.js index fd97a9d..32b588d 100644 --- a/src/i18n/en-us/prototype/index.js +++ b/src/i18n/en-us/prototype/index.js @@ -43,6 +43,9 @@ export default { }, cancel: { label: 'Cancel' + }, + back: { + label: 'Back' } } } diff --git a/src/view/Dashboard/Index.vue b/src/view/Dashboard/Index.vue index 2a490a1..351bf4e 100644 --- a/src/view/Dashboard/Index.vue +++ b/src/view/Dashboard/Index.vue @@ -73,4 +73,5 @@ export default { > img width 100% + max-width 960px