From 3ec800073f232435ab9bfa47e43eaa739ac37c09 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Wed, 21 Feb 2024 17:58:26 -0400 Subject: [PATCH 01/10] Reindex page index when deleted --- src/components/TabsBar.vue | 15 +++++- src/components/vue-form-builder.vue | 76 ++++++++++++++++++++++++++--- src/main.js | 7 ++- 3 files changed, 86 insertions(+), 12 deletions(-) diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue index 1245a9f39..ff6e56d6e 100644 --- a/src/components/TabsBar.vue +++ b/src/components/TabsBar.vue @@ -38,7 +38,7 @@ {{ pageNumber(index) }} - {{ pages[index].name }} + {{ pages[index]?.name }} { + return page > pageDelete ? page - 1 : page; + }); + }, async openPageByIndex(index) { - const n = this.localOpenedPages.indexOf(index); + const n = this.localOpenedPages.indexOf(index * 1); if (n === -1) { this.localOpenedPages.push(index); await this.waitUpdates(this.updates + 2, 1000); @@ -177,6 +182,12 @@ export default { this.activeTab = n; } }, + closePageByIndex(index) { + const n = this.localOpenedPages.indexOf(index); + if (n !== -1) { + this.localOpenedPages.splice(n, 1); + } + }, checkTabsOverflow() { const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs"); this.tabsListOverflow = tablist.scrollWidth > tablist.clientWidth; diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue index 01ae0ddeb..9acd55fa4 100644 --- a/src/components/vue-form-builder.vue +++ b/src/components/vue-form-builder.vue @@ -799,7 +799,6 @@ export default { }, methods: { onClick(page) { - this.currentPage = page; this.$refs.tabsBar.openPageByIndex(page); }, checkPageName(value) { @@ -1086,8 +1085,10 @@ export default { this.config = JSON.parse( this.$store.getters["undoRedoModule/currentState"].config ); - this.currentPage = JSON.parse( - this.$store.getters["undoRedoModule/currentState"].currentPage + this.$refs.tabsBar.openPageByIndex( + this.config.indexOf( + this.$store.getters["undoRedoModule/currentState"].currentPage + ) ); }, redo() { @@ -1096,8 +1097,10 @@ export default { this.config = JSON.parse( this.$store.getters["undoRedoModule/currentState"].config ); - this.currentPage = JSON.parse( - this.$store.getters["undoRedoModule/currentState"].currentPage + this.$refs.tabsBar.openPageByIndex( + this.config.indexOf( + this.$store.getters["undoRedoModule/currentState"].currentPage + ) ); }, updateConfig(items) { @@ -1109,7 +1112,7 @@ export default { }, focusInspector(validation) { this.showConfiguration = true; - this.currentPage = this.config.indexOf(validation.page); + this.$refs.tabsBar.openPageByIndex(this.config.indexOf(validation.page)); this.$nextTick(() => { this.inspect(validation.item); this.$nextTick(() => { @@ -1190,8 +1193,65 @@ export default { this.addPageName = ""; this.updateState(); }, - deletePage() { - this.config.splice(this.pageDelete, 1); + // This function is used to calculate the new index of the references + calcNewIndexFor(index, referencedBy) { + if (index > this.pageDelete) { + return index - 1; + } + if (index === this.pageDelete) { + throw new Error( + `${this.$t( + "Can not delete this page, it is referenced by" + )}: ${referencedBy}` + ); + } + return index; + }, + // Update Record list references + updateRecordListReferences() { + this.config.forEach((page) => { + page.items.forEach((item) => { + if (item.component === "FormRecordList") { + // eslint-disable-next-line no-param-reassign + item.config.form = this.calcNewIndexFor( + item.config.form * 1, + item.config.label + ); + } + }); + }); + }, + // Update navigation buttons references + updateNavigationButtonsReferences() { + this.config.forEach((page) => { + page.items.forEach((item) => { + if ( + item.component === "FormButton" && + item.config.event === "pageNavigate" + ) { + // eslint-disable-next-line no-param-reassign + item.config.eventData = this.calcNewIndexFor( + item.config.eventData * 1, + item.config.label + ); + } + }); + }); + }, + async deletePage() { + const back = _.cloneDeep(this.config); + try { + this.updateRecordListReferences(); + this.updateNavigationButtonsReferences(); + this.$refs.tabsBar.closePageByIndex(this.pageDelete); + this.$refs.tabsBar.updateTabsReferences(this.pageDelete); + await this.$nextTick(); + this.config.splice(this.pageDelete, 1); + } catch (error) { + this.config = back; + globalObject.ProcessMaker.alert(error.message, "danger"); + return; + } this.$store.dispatch("undoRedoModule/pushState", { config: JSON.stringify(this.config), currentPage: this.currentPage, diff --git a/src/main.js b/src/main.js index 054840fe0..f613ee87c 100644 --- a/src/main.js +++ b/src/main.js @@ -225,8 +225,11 @@ window.ProcessMaker = { } }, alert(message, variant) { - variant; - message; + new Vue().$root.$bvModal.msgBoxOk(message, { + title: "Alert", + okVariant: variant || "info", + solid: true + }); }, screen: { cacheEnabled: cacheEnabled ? cacheEnabled.content === "true" : false, From e211b471a42807840b6442c45f7de1c1ef96a645 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Thu, 22 Feb 2024 11:30:41 -0400 Subject: [PATCH 02/10] Remove alert, covering screen causing some tests to fail --- src/main.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/main.js b/src/main.js index f613ee87c..f63e8f8a8 100644 --- a/src/main.js +++ b/src/main.js @@ -225,11 +225,7 @@ window.ProcessMaker = { } }, alert(message, variant) { - new Vue().$root.$bvModal.msgBoxOk(message, { - title: "Alert", - okVariant: variant || "info", - solid: true - }); + console.log(`${variant}: ${message}`); }, screen: { cacheEnabled: cacheEnabled ? cacheEnabled.content === "true" : false, From ab73667176f5e79ac7dea846593a067eff50b0d0 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Thu, 22 Feb 2024 11:32:43 -0400 Subject: [PATCH 03/10] Fix some style details --- src/App.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.vue b/src/App.vue index ccfeeaccf..25912e399 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,10 +2,10 @@ - + - - + + Date: Thu, 22 Feb 2024 12:13:28 -0400 Subject: [PATCH 04/10] Remove default old toolbar --- src/components/vue-form-builder.vue | 50 ----------------------------- 1 file changed, 50 deletions(-) diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue index 9acd55fa4..0799983fa 100644 --- a/src/components/vue-form-builder.vue +++ b/src/components/vue-form-builder.vue @@ -101,56 +101,6 @@ ref="screen-container" class="overflow-auto mh-100 p-0 d-flex flex-column position-relative" > - - - - - -
- - - - - - - - - - - -
- - Date: Thu, 22 Feb 2024 13:12:59 -0400 Subject: [PATCH 05/10] Update src/components/TabsBar.vue Co-authored-by: Miguel Angel --- src/components/TabsBar.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue index ff6e56d6e..59cdc5b67 100644 --- a/src/components/TabsBar.vue +++ b/src/components/TabsBar.vue @@ -168,9 +168,7 @@ export default { this.$emit("tab-closed", this.pages[pageId], this.localOpenedPages); }, updateTabsReferences(pageDelete) { - this.localOpenedPages = this.localOpenedPages.map((page) => { - return page > pageDelete ? page - 1 : page; - }); + this.localOpenedPages = this.localOpenedPages.map((page) => page > pageDelete ? page - 1 : page); }, async openPageByIndex(index) { const n = this.localOpenedPages.indexOf(index * 1); From 86114c832e93e6a0614981d2fec8459447298ea4 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Thu, 22 Feb 2024 13:13:18 -0400 Subject: [PATCH 06/10] Simplify code Co-authored-by: Miguel Angel --- src/components/vue-form-builder.vue | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue index 0799983fa..73eddfa2f 100644 --- a/src/components/vue-form-builder.vue +++ b/src/components/vue-form-builder.vue @@ -1145,9 +1145,6 @@ export default { }, // This function is used to calculate the new index of the references calcNewIndexFor(index, referencedBy) { - if (index > this.pageDelete) { - return index - 1; - } if (index === this.pageDelete) { throw new Error( `${this.$t( @@ -1155,7 +1152,7 @@ export default { )}: ${referencedBy}` ); } - return index; + return index > this.pageDelete ? index - 1 : index; }, // Update Record list references updateRecordListReferences() { From 805292505abb7e354ec0b74392a9b6c974329fc9 Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Thu, 22 Feb 2024 13:55:39 -0400 Subject: [PATCH 07/10] Fix home page --- src/stories/Configure.mdx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx index 33a1559ba..6bf5f3a41 100644 --- a/src/stories/Configure.mdx +++ b/src/stories/Configure.mdx @@ -25,9 +25,8 @@ export const RightArrow = () => ## Introduction -

- Welcome to the ProcessMaker ScreenBuilder Storybook! This interactive library is designed to showcase the components used to render screens within ProcessMaker processes. Built with Vue2, our components provide a versatile and intuitive way to build dynamic forms and interfaces for your business processes. -

+ + Welcome to the ProcessMaker ScreenBuilder Storybook! This interactive library is designed to showcase the components used to render screens within ProcessMaker processes. Built with Vue2, our components provide a versatile and intuitive way to build dynamic forms and interfaces for your business processes.
## Key Features @@ -42,11 +41,9 @@ export const RightArrow = () => ## Getting Started
-

- To start using the ScreenBuilder components in your ProcessMaker processes, follow these steps: -

-

+ To start using the ScreenBuilder components in your ProcessMaker processes, follow these steps: + Clone the repository and `cd` into the `screen-builder` directory: ```bash @@ -60,13 +57,10 @@ cd screen-builder npm i npm run serve ``` -

## Explore Components
-

- Start exploring the components by selecting them from the sidebar. Each entry provides detailed information about the component, including usage examples and customization options. -

+ Start exploring the components by selecting them from the sidebar. Each entry provides detailed information about the component, including usage examples and customization options.