Merge pull request #1549 from ProcessMaker/bugfix/FOUR-14230

Fix design of page creation
ProcessMaker · Feb 28, 2024 · df297ef · df297ef
2 parents 150deb8 + f8d33a8
commit df297ef
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
@@ -388,28 +388,30 @@
     <b-modal
       id="addPageModal"
       ref="addPageModal"
-      :ok-title="$t('Save')"
-      :cancel-title="$t('Cancel')"
+      header-class="pb-2"
+      size="lg"
+      :ok-title="$t('SAVE')"
+      :cancel-title="$t('CANCEL')"
       cancel-variant="btn btn-outline-secondary"
       ok-variant="btn btn-secondary ml-2"
-      :title="$t('Add New Page')"
       header-close-content="&times;"
       data-cy="add-page-modal"
       :ok-disabled="!addPageName || !!checkPageName(addPageName)"
       @ok="addPage"
-      @hide="addPageName = ''"
+      @show="addPageName = ''; showAddPageValidations=false;"
     >
-      <required />
+      <template #modal-title>
+        <h5 class="modal-title">{{ $t('Create New Page') }}</h5>
+        <small class="modal-subtitle mb-n2">{{ $t('Create a new page in your screen') }}</small>
+      </template>
       <form-input
         ref="addPageInput"
         v-model="addPageName"
         :name="$t('Page Name')"
         :label="$t('Page Name') + ' *'"
         :helper="$t('The name of the new page to add')"
-        validation="required"
         :error="checkPageName(addPageName)"
         data-cy="add-page-name"
-        required
         aria-required="true"
       />
     </b-modal>
@@ -588,6 +590,7 @@ export default {
     }
 
     return {
+      showAddPageValidations: false,
       openedPages: [0],
       currentPage: 0,
       selected: null,
@@ -763,7 +766,13 @@ export default {
     onClick(page) {
       this.$refs.tabsBar.openPageByIndex(page);
     },
-    checkPageName(value) {
+    checkPageName(value, force = false) {
+      if (!force && !this.showAddPageValidations) {
+        return null;
+      }
+      if (!value.trim()) {
+        return this.$t("The Page Name field is required.");
+      }
       const pageNames = this.config
         .map((config) => config.name)
         .filter((name) => name !== this.originalPageName);
@@ -1136,7 +1145,9 @@ export default {
       this.updateState();
     },
     addPage(e) {
-      if (this.$refs.addPageInput.validator.errorCount) {
+      this.showAddPageValidations = true;
+      const error = this.checkPageName(this.addPageName, true);
+      if (error) {
         e.preventDefault();
         return;
       }
@@ -1151,6 +1162,7 @@ export default {
         items: []
       });
       this.addPageName = "";
+      this.currentPage = this.config.length - 1;
       this.updateState();
 
       // open new page

diff --git a/tests/e2e/specs/pagesDropdown.spec.js b/tests/e2e/specs/pagesDropdown.spec.js
@@ -9,6 +9,7 @@ describe("Page Dropdown", () => {
     // Define Page 2
     cy.get("[data-cy=add-page-name]").clear().type("Page_2");
     cy.get("[data-cy=add-page-modal] button.btn").eq(1).click();
+    cy.wait(300);
     cy.get('[data-cy=controls-FormButton]:contains("Page")').drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }