From 20a3bc302548b05e3476c28910e7d9ebafdf0a38 Mon Sep 17 00:00:00 2001 From: Edwin Betancourt Date: Sat, 18 Apr 2020 16:43:07 -0400 Subject: [PATCH] feat: Add load dynamic form with fileName. (#450) * feat: Add load dynamic form with fileName. * Load Form metadata from server. --- package.json | 2 +- src/api/ADempiere/dictionary.js | 12 ++ .../ADempiere/Form/PriceInquiry/index.vue | 137 ++++++++++++++++ src/components/ADempiere/Form/formMixin.js | 59 +++++++ src/components/ADempiere/Form/index.vue | 37 +++++ src/store/modules/ADempiere/form.js | 100 ++++++++++++ src/styles/ADempiere/view.scss | 17 ++ src/utils/ADempiere/dictionaryUtils.js | 1 + src/utils/ADempiere/lookupFactory.js | 34 +++- src/views/ADempiere/Form/index.vue | 149 ++++++++++++++++++ 10 files changed, 539 insertions(+), 9 deletions(-) create mode 100644 src/components/ADempiere/Form/PriceInquiry/index.vue create mode 100644 src/components/ADempiere/Form/formMixin.js create mode 100644 src/components/ADempiere/Form/index.vue create mode 100644 src/store/modules/ADempiere/form.js create mode 100644 src/styles/ADempiere/view.scss create mode 100644 src/views/ADempiere/Form/index.vue diff --git a/package.json b/package.json index d74b2bac..1101f084 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "@adempiere/grpc-access-client": "^1.1.8", "@adempiere/grpc-data-client": "^2.2.1", "@adempiere/grpc-pos-client": "^1.0.3", - "@adempiere/grpc-dictionary-client": "^1.3.8", + "@adempiere/grpc-dictionary-client": "^1.3.9", "@adempiere/grpc-enrollment-client": "^1.0.7", "autoprefixer": "^9.5.1", "axios": "0.18.0", diff --git a/src/api/ADempiere/dictionary.js b/src/api/ADempiere/dictionary.js index 87a0d353..715348bc 100644 --- a/src/api/ADempiere/dictionary.js +++ b/src/api/ADempiere/dictionary.js @@ -65,6 +65,18 @@ export function getField({ }) } +/** + * Request Form + * @param {string} uuid + * @param {number} id, integer identifier + */ +export function requestForm({ uuid, id }) { + return Instance.call(this).requestForm({ + uuid, + id + }) +} + export function requestReference({ referenceUuid, columnName }) { return Instance.call(this).requestReference({ referenceUuid, diff --git a/src/components/ADempiere/Form/PriceInquiry/index.vue b/src/components/ADempiere/Form/PriceInquiry/index.vue new file mode 100644 index 00000000..091523f3 --- /dev/null +++ b/src/components/ADempiere/Form/PriceInquiry/index.vue @@ -0,0 +1,137 @@ + + + diff --git a/src/components/ADempiere/Form/formMixin.js b/src/components/ADempiere/Form/formMixin.js new file mode 100644 index 00000000..b90e2368 --- /dev/null +++ b/src/components/ADempiere/Form/formMixin.js @@ -0,0 +1,59 @@ +import Field from '@/components/ADempiere/Field' +import { createField, createFieldDictionary } from '@/utils/ADempiere/lookupFactory' + +export default { + name: 'FormMixn', + components: { + Field + }, + props: { + metadata: { + type: Object, + required: true + } + }, + data() { + return { + metadataList: [], + panelMetadata: {}, + isLoaded: false, + panelType: 'custom' + } + }, + computed: { + getterPanel() { + return this.$store.getters.getPanel(this.metadata.containerUuid) + } + }, + methods: { + createField, + createFieldDictionary, + getPanel() { + const panel = this.getterPanel + if (panel) { + this.metadataList = panel.fieldList + this.isLoaded = true + } else { + this.setFieldsList() + this.$store.dispatch('addPanel', { + ...this.metadata, + uuid: this.metadata.containerUuid, + panelType: this.panelType, + fieldList: this.metadataList + }) + .then(responsePanel => { + this.metadataList = responsePanel.fieldList + + this.$store.dispatch('changeFormAttribute', { + containerUuid: this.metadata.containerUuid, + attributeName: 'fieldList', + attributeValue: this.metadataList + }) + }) + .finally(() => { + this.isLoaded = true + }) + } + } + } +} diff --git a/src/components/ADempiere/Form/index.vue b/src/components/ADempiere/Form/index.vue new file mode 100644 index 00000000..cf062bb4 --- /dev/null +++ b/src/components/ADempiere/Form/index.vue @@ -0,0 +1,37 @@ + + + diff --git a/src/store/modules/ADempiere/form.js b/src/store/modules/ADempiere/form.js new file mode 100644 index 00000000..cc93e554 --- /dev/null +++ b/src/store/modules/ADempiere/form.js @@ -0,0 +1,100 @@ +import { requestForm } from '@/api/ADempiere/dictionary' +import { showMessage } from '@/utils/ADempiere/notification' +import { isEmptyValue } from '@/utils/ADempiere/valueUtils' +import router from '@/router' +import language from '@/lang' + +const form = { + state: { + form: [] + }, + mutations: { + addForm(state, payload) { + state.form.push(payload) + }, + dictionaryResetCacheForm(state) { + state.form = [] + }, + changeFormAttribute(state, payload) { + let value = payload.attributeValue + if (payload.attributeNameControl) { + value = payload.form[payload.attributeNameControl] + } + payload.form[payload.attributeName] = value + } + }, + actions: { + getFormFromServer({ commit, dispatch }, { + id, + containerUuid, + routeToDelete + }) { + return new Promise(resolve => { + requestForm({ + uuid: containerUuid, + id + }) + .then(formResponse => { + const panelType = 'form' + + // Panel for save on store + const newForm = { + ...formResponse, + containerUuid, + fieldList: [], + panelType + } + + commit('addForm', newForm) + // dispatch('addPanel', newForm) + + resolve(newForm) + + // Convert from gRPC process list + const actions = [] + + // Add process menu + dispatch('setContextMenu', { + containerUuid, + actions + }) + }) + .catch(error => { + router.push({ path: '/dashboard' }) + dispatch('tagsView/delView', routeToDelete) + showMessage({ + message: language.t('login.unexpectedError'), + type: 'error' + }) + console.warn(`Dictionary form - Error ${error.code}: ${error.message}.`) + }) + }) + }, + changeFormAttribute({ commit, getters }, { + containerUuid, + form, + attributeName, + attributeNameControl, + attributeValue + }) { + if (isEmptyValue(form)) { + form = getters.getForm(containerUuid) + } + commit('changeFormAttribute', { + form, + attributeName, + attributeValue, + attributeNameControl + }) + } + }, + getters: { + getForm: (state) => (formUuid) => { + return state.form.find( + item => item.uuid === formUuid + ) + } + } +} + +export default form diff --git a/src/styles/ADempiere/view.scss b/src/styles/ADempiere/view.scss new file mode 100644 index 00000000..7fb2175a --- /dev/null +++ b/src/styles/ADempiere/view.scss @@ -0,0 +1,17 @@ + +.view-base { + height: 100%; + min-height: calc(100vh - 84px); +} + +.view-loading { + padding: 100px 100px; + height: 100%; +} + +.custom-title { + color: #000000; + text-size-adjust: 20px; + font-size: 100%; + font-weight: 605!important; +} diff --git a/src/utils/ADempiere/dictionaryUtils.js b/src/utils/ADempiere/dictionaryUtils.js index 748293f5..e2f9dd32 100644 --- a/src/utils/ADempiere/dictionaryUtils.js +++ b/src/utils/ADempiere/dictionaryUtils.js @@ -553,6 +553,7 @@ export function convertAction(action) { case 'X': actionAttributes.name = 'form' actionAttributes.icon = 'form' + actionAttributes.component = () => import('@/views/ADempiere/Form') break default: actionAttributes.name = 'summary' diff --git a/src/utils/ADempiere/lookupFactory.js b/src/utils/ADempiere/lookupFactory.js index 5f0648c4..ab1c5904 100644 --- a/src/utils/ADempiere/lookupFactory.js +++ b/src/utils/ADempiere/lookupFactory.js @@ -93,7 +93,7 @@ export function createFieldDictionary({ }) .then(response => { resolve(getFactoryFromField({ - containerUuid: containerUuid, + containerUuid, field: response })) }).catch(error => { @@ -242,14 +242,32 @@ export function getFieldTemplate(attributesOverwrite) { const componentReference = evalutateTypeField(displayType) const referenceType = componentReference.alias[0] - let sizeFieldFromType = FIELDS_DISPLAY_SIZES.find(item => { - return item.type === componentReference.type - }) - if (isEmptyValue(sizeFieldFromType)) { - sizeFieldFromType = { - type: referenceType, - size: DEFAULT_SIZE.size + // set size from displayed, max 24 + let size = DEFAULT_SIZE.size + if (!isEmptyValue(attributesOverwrite.size)) { + size = attributesOverwrite.size + delete attributesOverwrite.size + if (typeof size === 'number') { + size = { + xs: size, + sm: size, + md: size, + lg: size, + xl: size + } } + } else { + const sizeComponent = FIELDS_DISPLAY_SIZES.find(item => { + return item.type === componentReference.type + }) + if (!isEmptyValue(sizeComponent)) { + size = sizeComponent.size + } + } + + const sizeFieldFromType = { + type: referenceType, + size } const fieldTemplateMetadata = { diff --git a/src/views/ADempiere/Form/index.vue b/src/views/ADempiere/Form/index.vue new file mode 100644 index 00000000..1572ca9d --- /dev/null +++ b/src/views/ADempiere/Form/index.vue @@ -0,0 +1,149 @@ + + + + +