@processmaker/screen-builder 2.84.1 → 2.84.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.84.1",
+  "version": "2.84.3",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",

package/src/assets/css/custom.css

@@ -8,4 +8,7 @@
 }
 .page-dropdown-menu {
   min-width: 333px;
+  max-height: 26rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
 }

package/src/assets/css/tabs.css

@@ -10,10 +10,12 @@
   /* Override Bootstrap default tab styles */
   .nav-tabs {
     border-bottom: 1px solid var(--tabs-border) !important;
+  }
+  .nav-tabs-nowrap {
     flex-wrap: nowrap !important;
     overflow: hidden !important;
   }
-  
+
   .nav-tabs .nav-item .nav-link {
     display: flex;
     align-items: center;

package/src/components/TabsBar.vue

@@ -4,6 +4,7 @@
     v-model="activeTab"
     class="h-100 w-100 flat-tabs"
     content-class="h-tab"
+    nav-class="nav-tabs-nowrap"
     lazy
     @changed="tabsUpdated"
     @input="tabOpened"
@@ -196,9 +197,10 @@ export default {
         }, visualThreshold);
       });
     },
-    closeTab(pageId) {
-      this.localOpenedPages.splice(this.localOpenedPages.indexOf(pageId), 1);
-      this.$emit("tab-closed", this.pages[pageId], this.localOpenedPages);
+    closeTab(tabIndex) {
+      const pageIndex = this.localOpenedPages[tabIndex];
+      this.localOpenedPages.splice(tabIndex, 1);
+      this.$emit("tab-closed", this.pages[pageIndex], this.localOpenedPages);
     },
     updateTabsReferences(pageDelete) {
       this.localOpenedPages = this.localOpenedPages.map((page) =>

package/src/components/sortable/sortableList/SortableList.vue

@@ -24,15 +24,24 @@
           <div class="rounded sortable-item-name">
             <b-form-input
               v-if="editRowIndex === index"
-              v-model="item.name"
+              v-model="newName"
               type="text"
               autofocus
-              @blur.stop="onBlur()"
+              required
+              :state="validateState(newName, item)"
+              :error="validateError(newName, item)"
+              @blur.stop="onBlur(newName, item)"
+              @keydown.enter.stop="onBlur(newName, item)"
+              @keydown.esc.stop="onCancel(item)"
+              @focus="onFocus(item)"
             />
             <span v-else>{{ item.name }}</span>
           </div>
           <div class="border rounded-lg sortable-item-action">
-            <button class="btn" @click.stop="onClick(item, index)">
+            <button v-if="editRowIndex === index" class="btn">
+              <i class="fas fa-check"></i>
+            </button>
+            <button v-else class="btn" @click.stop="onClick(item, index)">
               <i class="fas fa-edit"></i>
             </button>
             <div class="sortable-item-vr"></div>
@@ -55,6 +64,7 @@ export default {
   },
   data() {
     return {
+      newName: '',
       draggedItem: 0,
       draggedOverItem: 0,
       editRowIndex: null,
@@ -69,14 +79,46 @@ export default {
     }
   },
   methods: {
-    onBlur() {
-      this.editRowIndex = -1;
+    validateState(name, item) {
+      const isEmpty = !name?.trim();
+      const isDuplicated = this.items
+        .filter((i) => i !== item)
+        .find((i) => i.name === name);
+      return isEmpty || isDuplicated ? false : null;
     },
-    onClick(item, index) {
-      if (this.editRowIndex === -1 || this.editRowIndex === index) {
-        this.editRowIndex = null;
-        return;
+    validateError(name, item) {
+      const isEmpty = !name?.trim();
+      if (!isEmpty) {
+        return this.$t("The Page Name field is required.");
+      }
+      const isDuplicated = this.items
+        .filter((i) => i !== item)
+        .find((i) => i.name === name);
+      if (isDuplicated) {
+        return this.$t('Must be unique.');
+      }
+      return '';
+    },
+    onFocus(item) {
+      this.newName = item.name;
+    },
+    async onBlur(name, item) {
+      if (this.validateState(name, item) === false) {
+        this.newName = item.name;
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        item.name = name;
       }
+      await this.$nextTick();
+      setTimeout(() => {
+        this.editRowIndex = null;
+      }, 250);
+    },
+    async onCancel(item) {
+      this.newName = item.name;
+      this.editRowIndex = null;
+    },
+    onClick(item, index) {
       this.editRowIndex = index;
       this.$emit("item-edit", item);
     },
@@ -127,6 +169,14 @@ export default {
 
           itemsSortedClone[draggedItemIndex].order = tempOrder;
         }
+
+        // Update order of the items
+        const clone = [...itemsSortedClone];
+        clone.sort((a, b) => a.order - b.order);
+        clone.forEach((item, index) => {
+          // eslint-disable-next-line no-param-reassign
+          item.order = index + 1;
+        });
       }
 
       this.$emit('ordered', itemsSortedClone);

package/src/components/vue-form-builder.vue

@@ -881,6 +881,7 @@ export default {
       config.forEach((page) => this.replaceFormText(page.items));
       config.forEach((page) => this.migrateFormSubmit(page.items));
       config.forEach((page) => this.updateFieldNameValidation(page.items));
+      this.updatePageOrder(config);
       config.forEach((page) =>
         this.removeDataVariableFromNestedScreens(page.items)
       );
@@ -889,6 +890,18 @@ export default {
         page.order = page.order || index + 1;
       });
     },
+    updatePageOrder(pages) {
+      const clone = [...pages];
+      clone.sort((a, b) => {
+        const aOrder = a.order || pages.indexOf(a) + 1;
+        const bOrder = b.order || pages.indexOf(b) + 1;
+        return aOrder - bOrder;
+      });
+      clone.forEach((item, index) => {
+        // eslint-disable-next-line no-param-reassign
+        item.order = index + 1;
+      });
+    },
     updateFieldNameValidation(items) {
       items.forEach((item) => {
         if (item.inspector) {
@@ -1148,9 +1161,9 @@ export default {
       this.updateState();
     },
     addPage(e) {
-      this.showAddPageValidations = true;
       const error = this.checkPageName(this.addPageName, true);
       if (error) {
+        this.showAddPageValidations = true;
         e.preventDefault();
         return;
       }
@@ -1227,6 +1240,7 @@ export default {
         globalObject.ProcessMaker.alert(error.message, "danger");
         return;
       }
+      this.updatePageOrder(this.config);
       this.$store.dispatch("undoRedoModule/pushState", {
         config: JSON.stringify(this.config),
         currentPage: this.currentPage,

package/src/stories/DropdownAndPages.stories.js

@@ -80,7 +80,6 @@ export const OpenPageUsingDropdown = {
       "[data-test=page-dropdown] button"
     );
     let selectorAddPage = canvasElement.querySelector("[data-test=page-Page3]");
-    console.log(selectorAddPage);
     await selector.click(selector);
     await selectorAddPage.click(selectorAddPage);
     // Open Page 3 (index=2)
@@ -111,3 +110,37 @@ export const OpenPageUsingDropdown = {
     });
   }
 };
+
+// Open a page using the PageDropdown(index)
+export const ScrollWithMoreThanTenPages = {
+  args: {
+    pages: [
+      { name: "Page1" },
+      { name: "Page2" },
+      { name: "Page3" },
+      { name: "Page4" },
+      { name: "Page5" },
+      { name: "Page6" },
+      { name: "Page7" },
+      { name: "Page8" },
+      { name: "Page9" },
+      { name: "Page10" },
+      { name: "Page11" },
+      { name: "Page12" }
+    ],
+    initialOpenedPages: [0]
+  },
+  play: async ({ canvasElement }) => {
+    const selector = canvasElement.querySelector(
+      "[data-test=page-dropdown] button"
+    );
+    await selector.click(selector);
+    // Test .page-dropdown-menu has scroll (scrollHeight > clientHeight)
+    await waitFor(() => {
+      const dropdownMenu = canvasElement.querySelector(".page-dropdown-menu");
+      expect(dropdownMenu.scrollHeight).toBeGreaterThan(
+        dropdownMenu.clientHeight
+      );
+    });
+  }
+};

package/src/stories/PageTabs.stories.js

@@ -336,3 +336,60 @@ export const WithoutAnyPageOpened = {
     );
   }
 };
+
+// User can close tabs
+export const UserCanCloseTabs = {
+  args: {
+    pages: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" }
+    ],
+    initialOpenedPages: [0, 1, 2, 3, 4]
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    // Close Tab #1 = Page 1 (tab index=0)
+    await step("Close Page 1 (tab index=0)", async () => {
+      canvas.getByTestId("close-tab-0").click();
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 2 (#1)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    // Close Tab #1 = Page 2 (tab index=0)
+    await step("Close Page 2 (tab index=0)", async () => {
+      canvas.getByTestId("close-tab-0").click();
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 3 (#2)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    // Close Tab #2 = Page 4 (tab index=1)
+    await step("Close Page 4 (tab index=1)", async () => {
+      canvas.getByTestId("close-tab-1").click();
+      await waitFor(
+        () => {
+          // keep focus in the tab #1
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 3 (#2)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+  }
+};