diff --git a/src/app/Components/Button/AppButton.js b/src/app/Components/Button/AppButton.js new file mode 100644 index 0000000..dadf322 --- /dev/null +++ b/src/app/Components/Button/AppButton.js @@ -0,0 +1,74 @@ +import PrototypeButton from 'src/app/Prototype/Components/Buttons/PrototypeButton' +/** + * @type {AppButton} + */ +export default { + /** + */ + name: 'AppButton', + /** + */ + mixins: [ + PrototypeButton + ], + /** + */ + props: { + name: { + type: String, + default: '' + }, + hidden: { + type: Boolean, + required: false + }, + dropdown: { + type: Boolean, + required: false + }, + primary: { + type: Boolean, + required: false + }, + submit: { + type: Boolean, + required: false + }, + position: { + type: String, + default: '' + }, + color: { + type: String, + default: 'white' + }, + textColor: { + type: String, + default: 'grey-10' + } + }, + /** + * @param {Function} h + */ + render (h) { + const color = this.$props.primary ? 'primary' : this.color + const type = this.$props.submit ? 'submit' : 'button' + + const classNames = [] + if (this.$attrs.class) { + classNames.push(this.$attrs.class) + } + if (this.position) { + classNames.push(`button-position-${this.position}`) + } + + const button = { + key: this.name || this.$util.uniqueKey(), + class: classNames, + attrs: { ...this.$attrs, ...this.$props, color, type }, + listeners: { ...this.$listeners } + } + + return this.renderButton(h, button) + } +} diff --git a/src/app/Components/Field/AppField.js b/src/app/Components/Field/AppField.js index 5f2d47b..1c2da5f 100644 --- a/src/app/Components/Field/AppField.js +++ b/src/app/Components/Field/AppField.js @@ -8,6 +8,8 @@ import FormComponent from 'src/app/Prototype/Contracts/Form/FormComponent' * @type {AppField} */ export default { + /** + */ name: 'AppField', /** */ @@ -27,8 +29,15 @@ export default { }, value: { required: true + }, + hidden: { + type: Boolean, + required: false } }, + data: () => ({ + field: {} + }), /** */ methods: { @@ -90,6 +99,9 @@ export default { const options = { label: this.$attrs.label, width: this.$attrs.width } const field = create(this.name, options, attrs, on) field.is = component.is + if (this.hidden) { + field.$layout.formHidden = this.hidden + } return this.renderField(h, this.parseField(field)) } diff --git a/src/app/Components/Form/AppForm.js b/src/app/Components/Form/AppForm.js index a82175f..89ae4a7 100644 --- a/src/app/Components/Form/AppForm.js +++ b/src/app/Components/Form/AppForm.js @@ -1,3 +1,6 @@ +/** + * @type {AppForm} + */ export default { /** */ @@ -10,6 +13,15 @@ export default { default: () => ({}) } }, + /** + */ + computed: { + /** + */ + debuggers () { + return this.$store.getters['app/getDebuggers'] + } + }, /** */ methods: { @@ -24,24 +36,65 @@ export default { }, {}) }, /** + * @param {Function} h * @param {Object} schema * @returns {*} */ - renderAppFormBody (schema) { + renderAppForm (h, schema) { + const data = { + class: 'app-form-wrapper', + on: { + submit: ($event) => { + $event.preventDefault() + $event.stopPropagation() + this.$emit('submit', $event) + } + } + } + const children = [ + h('div', { class: 'app-form-body' }, [ + h('div', { class: 'form form-grid' }, this.renderAppFormBody(h, schema)) + ]), + h('div', { class: 'app-form-buttons' }, this.renderAppFormButtons(h, schema)) + ] + + return h('form', data, children) + }, + /** + * @param {Function} h + * @param {Object} schema + * @returns {*} + */ + renderAppFormBody (h, schema) { if (!this.$scopedSlots.body) { return } return this.$scopedSlots.body(schema) }, /** + * @param {Function} h * @param {Object} schema * @returns {*} */ - renderAppFormButtons (schema) { + renderAppFormButtons (h, schema) { if (!this.$scopedSlots.buttons) { return } return this.$scopedSlots.buttons(schema) + }, + /** + * @param {Function} h + * @param {Object} schema + * @returns {*} + */ + renderAppFormDebuggers (h, schema) { + if (!this.debuggers) { + return + } + if (this.$scopedSlots.debuggers) { + return h('div', {}, this.$scopedSlots.debuggers(schema)) + } + return h('div', {}, [h('app-debugger', { attrs: { label: 'Schema', inspect: schema } })]) } }, /** @@ -62,21 +115,10 @@ export default { const data = { class: 'PrototypeForm', attrs: { padding: true } } const children = [ - h('div', { class: 'app-form-wrapper' }, [ - h('div', { class: 'app-form-body' }, [ - h('div', { class: 'form form-grid' }, this.renderAppFormBody(this.$schema)) - ]), - h('div', { class: 'app-form-buttons' }, this.renderAppFormButtons(this.$schema)) - ]) + this.renderAppForm(h, this.$schema), + this.renderAppFormDebuggers(h, this.$schema) ] return h('q-page', data, children) - /* - -
- - -
- */ } } diff --git a/src/app/Components/index.js b/src/app/Components/index.js index d4c5774..eb744e8 100644 --- a/src/app/Components/index.js +++ b/src/app/Components/index.js @@ -2,6 +2,7 @@ import { register } from 'src/app/Util' import PrototypeForm from 'src/app/Prototype/Components/PrototypeForm' import PrototypeTable from 'src/app/Prototype/Components/PrototypeTable' +import AppButton from 'src/app/Components/Button/AppButton' import AppDebugger from 'src/app/Components/Debugger/AppDebugger' import AppField from 'src/app/Components/Field/AppField' import AppForm from 'src/app/Components/Form/AppForm' @@ -9,6 +10,7 @@ import AppForm from 'src/app/Components/Form/AppForm' register('PrototypeTable', PrototypeTable) register('PrototypeForm', PrototypeForm) +register('AppButton', AppButton) register('AppDebugger', AppDebugger) register('AppField', AppField) register('AppForm', AppForm) diff --git a/src/app/Prototype/Components/Buttons/PrototypeButton.js b/src/app/Prototype/Components/Buttons/PrototypeButton.js new file mode 100644 index 0000000..a906c09 --- /dev/null +++ b/src/app/Prototype/Components/Buttons/PrototypeButton.js @@ -0,0 +1,46 @@ +import PrototypeButtonDropdown from './PrototypeButtonDropdown' +import PrototypeButtonSingle from './PrototypeButtonSingle' + +/** + * @type {PrototypeButton} + */ +export default { + /** + */ + mixins: [ + PrototypeButtonDropdown, PrototypeButtonSingle + ], + /** + */ + methods: { + /** + * @param {string} key + */ + buttonRef (key) { + return `form:button-${key}` + }, + /** + * @param {Function} h + * @param {Object} button + * @returns {*} + */ + renderButton (h, button) { + if (button.hidden) { + return + } + + const data = { + key: button.$key, + ref: button.reference ? this.buttonRef(button.reference) : undefined, + class: button.class, + attrs: { ...button.attrs }, + on: { ...button.listeners }, + style: button.style + } + if (button.dropdown) { + return this.renderButtonDropdown(h, data) + } + return this.renderButtonSingle(h, data) + } + } +} diff --git a/src/app/Prototype/Components/PrototypeButtons.js b/src/app/Prototype/Components/PrototypeButtons.js index 68bf170..655227c 100644 --- a/src/app/Prototype/Components/PrototypeButtons.js +++ b/src/app/Prototype/Components/PrototypeButtons.js @@ -1,6 +1,5 @@ +import PrototypeButton from './Buttons/PrototypeButton' import PrototypeButtonParse from './Buttons/PrototypeButtonParse' -import PrototypeButtonDropdown from './Buttons/PrototypeButtonDropdown' -import PrototypeButtonSingle from './Buttons/PrototypeButtonSingle' /** * @typedef {PrototypeButtons} @@ -10,7 +9,7 @@ export default { /** */ mixins: [ - PrototypeButtonParse, PrototypeButtonDropdown, PrototypeButtonSingle + PrototypeButtonParse, PrototypeButton ], /** */ @@ -47,38 +46,6 @@ export default { .map((button) => this.parseButton(button)) } }, - /** - */ - methods: { - /** - * @param {Function} h - * @param {Object} button - * @returns {*} - */ - renderButton (h, button) { - if (button.hidden) { - return - } - - const data = { - key: button.$key, - ref: this.buttonRef(button.$key), - class: button.class, - attrs: { ...button.attrs }, - on: { ...button.listeners } - } - if (button.dropdown) { - return this.renderButtonDropdown(h, data) - } - return this.renderButtonSingle(h, data) - }, - /** - * @param {string} key - */ - buttonRef (key) { - return `form:button-${key}` - } - }, /** * @param {Function} h */ diff --git a/src/app/Prototype/Prototype/Action.js b/src/app/Prototype/Prototype/Action.js index 515d70b..897196e 100644 --- a/src/app/Prototype/Prototype/Action.js +++ b/src/app/Prototype/Prototype/Action.js @@ -137,7 +137,7 @@ export default { * @returns {Prototype} */ actionNoMinWidth () { - return this.actionAddClassName('q-btn-no-min-width') + return this.actionAddClassName('button-no-min-width') }, /** diff --git a/src/app/Prototype/Prototype/FieldIs.js b/src/app/Prototype/Prototype/FieldIs.js index 7ee9c28..5939398 100644 --- a/src/app/Prototype/Prototype/FieldIs.js +++ b/src/app/Prototype/Prototype/FieldIs.js @@ -18,7 +18,7 @@ export default { hiddenForm: false, ...options } - return this.field(options.key, options.label, Number) + return this.addField(options.key, options.label, Number) .fieldTableWidth(options.tableWith) .fieldFormWidth(options.formWidth) .fieldTableShow(options.tableShow) diff --git a/src/app/Prototype/Skeleton.js b/src/app/Prototype/Skeleton.js index 622f65f..1767764 100644 --- a/src/app/Prototype/Skeleton.js +++ b/src/app/Prototype/Skeleton.js @@ -16,10 +16,10 @@ export default class Skeleton extends Base { * @param {*} type * @returns {Prototype} */ - field ($key, label = '', type = undefined) { + addField ($key, label = '', type = undefined) { this.__currentField = $key if (this.__fields[$key]) { - return this + throw new Error(`Field ${$key} already exists`) } let is = this.is @@ -52,6 +52,18 @@ export default class Skeleton extends Base { return this } + /** + * @param {string} $key + * @returns {Prototype} + */ + getField ($key) { + if (!this.__fields[$key]) { + throw new Error(`Field ${$key} not exists`) + } + this.__currentField = $key + return this + } + /** * @param {string} id * @param {string} label diff --git a/src/app/Prototype/Style/form.styl b/src/app/Prototype/Style/form.styl index fde03fe..fba8dae 100644 --- a/src/app/Prototype/Style/form.styl +++ b/src/app/Prototype/Style/form.styl @@ -62,7 +62,7 @@ margin-right 10px height 36px - &:not(.q-btn-no-min-width) + &:not(.button-no-min-width) min-width 120px &.button-position-right diff --git a/src/domains/Auth/Service/AuthService.js b/src/domains/Auth/Service/AuthService.js index 274bae9..f284b75 100644 --- a/src/domains/Auth/Service/AuthService.js +++ b/src/domains/Auth/Service/AuthService.js @@ -46,7 +46,13 @@ export default class AuthService extends API { label: 'Test Template Form', sublabel: 'Using form control with template', icon: 'code', - path: '/dashboard/test-with-template' + path: '/dashboard/test-with-template/form' + }, + { + label: 'Test Template Table', + sublabel: 'Using table control with template', + icon: 'code', + path: '/dashboard/test-with-template/table' } ] }) diff --git a/src/domains/Example/Test/Prototype/Test.js b/src/domains/Example/Test/Prototype/Test.js index e1c9416..18d8038 100644 --- a/src/domains/Example/Test/Prototype/Test.js +++ b/src/domains/Example/Test/Prototype/Test.js @@ -37,7 +37,7 @@ export default class Test extends Prototype { construct () { this.fieldAsPrimaryKey() - this.field('name') + this.addField('name') .fieldTableShow() .fieldFormWidth(50) .fieldFormAutofocus() @@ -45,12 +45,12 @@ export default class Test extends Prototype { // console.log('~> arguments', arguments) }) - this.field('age') + this.addField('age') .fieldIsNumber() .fieldRequired() .fieldFormWidth(50) - this.field('description') + this.addField('description') .fieldIsText() this.action('edit') diff --git a/src/domains/Example/Test/Prototype/TestWithHooks.js b/src/domains/Example/Test/Prototype/TestWithHooks.js index 5ecbdda..07e5661 100644 --- a/src/domains/Example/Test/Prototype/TestWithHooks.js +++ b/src/domains/Example/Test/Prototype/TestWithHooks.js @@ -33,7 +33,10 @@ export default class TestWithHooks extends Test { /** */ setupFields () { - this.field('active') + this.getField('name') + .fieldFormDefaultValue('William') + + this.addField('active') .fieldIsCheckbox({ label: 'active.label' }) .fieldFormWidth(45) .fieldFormOrder(3, true) @@ -41,7 +44,7 @@ export default class TestWithHooks extends Test { this.setFieldLayout('description', 'formHidden', $event) }) - this.field('gender') + this.addField('gender') .fieldIsRadio(gender) .fieldFormOrder(4, true) .fieldFormWidth(55) @@ -49,7 +52,7 @@ export default class TestWithHooks extends Test { this.setFieldLayout('active', 'formHidden', $event === 'male') }) - this.field('description') + this.getField('description') .fieldOn('input', this.configureChangeDescription) } diff --git a/src/domains/Example/Test/Routes/index.js b/src/domains/Example/Test/Routes/index.js index c0c7adf..66707a7 100644 --- a/src/domains/Example/Test/Routes/index.js +++ b/src/domains/Example/Test/Routes/index.js @@ -1,5 +1,12 @@ import { crud, route } from 'src/app/Router' -import { testForm, testTable, testWithHooksForm, testWithHooksTable, testWithTemplateForm } from './components' +import { + testForm, + testTable, + testWithHooksForm, + testWithHooksTable, + testWithTemplateForm, + testWithTemplateTable +} from './components' /** * @type {string} @@ -14,6 +21,7 @@ export default (router) => { return [ ...crud(path, testTable, testForm), ...crud('/dashboard/test-with-hooks', testWithHooksTable, testWithHooksForm), - route('/dashboard/test-with-template', testWithTemplateForm) + route('/dashboard/test-with-template/form', testWithTemplateForm), + route('/dashboard/test-with-template/table', testWithTemplateTable) ] } diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js index 2275245..3990d8a 100644 --- a/src/i18n/en-us/index.js +++ b/src/i18n/en-us/index.js @@ -2,8 +2,13 @@ import validation from './validation' import auth from './auth' import prototype from './prototype' +import textWithTemplateForm from 'src/view/Dashboard/Example/TestWithTemplate/en-us.js' + export default { validation, auth, - prototype + prototype, + example: { + textWithTemplateForm + } } diff --git a/src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateForm.vue b/src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateForm.vue index 00a3c77..293828b 100644 --- a/src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateForm.vue +++ b/src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateForm.vue @@ -1,50 +1,86 @@ @@ -78,8 +114,62 @@ export default { description: {} }, data: () => ({ - record: {} - }) + record: {}, + activeHidden: false, + descriptionLabel: '', + descriptionHidden: false + }), + /** + */ + methods: { + /** + * @param {Object} $event + */ + actionSubmit ($event) { + window.alert(JSON.stringify(this.record)) + }, + /** + */ + actionBack () { + this.$browse(-1) + }, + /** + */ + actionCancel () { + this.$browse('/dashboard/test-with-template/table') + }, + /** + * @param {string} description + */ + configureChangeDescription (description) { + if (!this.originalLabel) { + this.originalLabel = this.descriptionLabel + } + let descriptionLabel = description + if (!descriptionLabel) { + descriptionLabel = this.originalLabel + this.originalLabel = undefined + } + this.descriptionLabel = descriptionLabel + }, + /** + * @param {boolean} active + */ + configureChangeActive (active) { + this.descriptionHidden = active + }, + /** + * @param {string} gender + */ + configureChangeGender (gender) { + this.activeHidden = gender === 'male' + } + }, + /** + */ + created () { + this.descriptionLabel = this.$t('example.textWithTemplateForm.fields.description') + } } diff --git a/src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateTable.vue b/src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateTable.vue index c9c89b3..5028f00 100644 --- a/src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateTable.vue +++ b/src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateTable.vue @@ -1,24 +1,15 @@ diff --git a/src/view/Dashboard/Example/TestWithTemplate/en-us.js b/src/view/Dashboard/Example/TestWithTemplate/en-us.js new file mode 100644 index 0000000..c38ea19 --- /dev/null +++ b/src/view/Dashboard/Example/TestWithTemplate/en-us.js @@ -0,0 +1,22 @@ +/** + */ +export default { + fields: { + id: 'Id', + name: 'Name', + age: 'Age', + active: 'Active', + gender: 'Gender', + description: 'Description' + }, + active: { + label: 'if checked will hide "Description"' + }, + actions: { + goToTest: 'Go to Test' + }, + messages: { + record: 'We fetch the record with service', + records: 'We fetch the records with service' + } +}