@processmaker/screen-builder 2.83.11 → 2.84.1

package/src/components/TabsBar.vue

@@ -0,0 +1,233 @@
+<template>
+  <b-tabs
+    ref="tabs"
+    v-model="activeTab"
+    class="h-100 w-100 flat-tabs"
+    content-class="h-tab"
+    lazy
+    @changed="tabsUpdated"
+    @input="tabOpened"
+  >
+    <template #tabs-start>
+      <div class="tabs-sticky d-flex flex-row tabs-start">
+        <div
+          v-show="tabsListOverflow"
+          class="position-relative overflow-visible"
+        >
+          <div
+            role="link"
+            class="nav-scroll nav-scroll-left"
+            data-test="scroll-left"
+            @click="scrollTabsLeft"
+          >
+            <i class="fas fa-chevron-left" />
+          </div>
+        </div>
+      </div>
+
+      <div :class="{'dd-ml': tabsListOverflow}">
+        <slot name="tabs-start" />
+      </div>
+    </template>
+    <b-tab
+      v-for="(index, n) in validLocalOpenedPages"
+      :key="`tab-${n}`"
+      class="h-100 w-100"
+    >
+      <template #title>
+        <b-badge variant="primary" class="mr-1">
+          {{ pageNumber(index) }}
+        </b-badge>
+        <span :data-test="`tab-${n}`">
+          {{ pages[index]?.name }}
+        </span>
+        <span
+          :data-test="`close-tab-${n}`"
+          class="close-tab"
+          role="link"
+          @click.stop="closeTab(n)"
+        >
+          <i class="fas fa-times" />
+        </span>
+      </template>
+      <template #default>
+        <div class="h-100 w-100" data-test="tab-content">
+          <slot :current-page="index" />
+        </div>
+      </template>
+    </b-tab>
+    <template #tabs-end>
+      <div
+        v-if="tabsListOverflow"
+        class="tabs-sticky overflow-visible"
+      >
+        <div
+          role="link"
+          class="nav-scroll nav-scroll-right"
+          data-test="scroll-right"
+          @click="scrollTabsRight"
+        >
+          <i class="fas fa-chevron-right" />
+        </div>
+      </div>
+    </template>
+    <template #empty>
+      <p class="text-center m-5 text-secondary" data-test="tab-content">
+        {{ $t("There are no open pages.") }}<br />
+        {{ $t("Open a new page above using the button") }}
+        <i :class="buttonIcon" />
+      </p>
+    </template>
+  </b-tabs>
+</template>
+
+<script>
+const SCROLL_STEP = 200;
+
+export default {
+  props: {
+    /**
+     * The configuration of all the pages
+     */
+    pages: {
+      type: Array,
+      required: true
+    },
+    /**
+     * The array of initial opened pages indexes
+     */
+    initialOpenedPages: {
+      type: Array,
+      default: () => [0]
+    },
+    /**
+     * Icon to open a new tab, displayed when there are no pages opened.
+     */
+    buttonIcon: {
+      type: String,
+      default: () => "fa fa-file"
+    }
+  },
+  data() {
+    return {
+      tabsListOverflow: false,
+      showLeftScroll: true,
+      showRightScroll: true,
+      updates: 0,
+      activeTab: 0,
+      localOpenedPages: this.initialOpenedPages
+    };
+  },
+  computed: {
+    validLocalOpenedPages() {
+      return this.localOpenedPages.filter((page) => this.pages[page]);
+    }
+  },
+  watch: {
+    openedPages: {
+      handler(newVal) {
+        this.localOpenedPages = newVal;
+      },
+      deep: true
+    },
+    pages: {
+      handler() {
+        this.localOpenedPages = this.localOpenedPages.filter(
+          (page) => this.pages[page]
+        );
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // check resize of tabs list
+      window.addEventListener("resize", this.checkTabsOverflow);
+      // listen to scroll event
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      tablist.addEventListener("scroll", this.checkScrollPosition);
+
+      Promise.resolve().then(() => {
+        this.checkTabsOverflow();
+        this.checkScrollPosition();
+      });
+    });
+
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.checkTabsOverflow);
+  },
+  updated() {
+    this.checkTabsOverflow();
+  },
+  methods: {
+    tabOpened() {
+      const pageIndex = this.localOpenedPages[this.activeTab];
+      this.$emit("tab-opened", pageIndex);
+    },
+    pageNumber(index) {
+      return index + 1;
+    },
+    checkScrollPosition() {
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      this.showLeftScroll = tablist.scrollLeft > 0;
+      this.showRightScroll =
+        tablist.scrollWidth - tablist.clientWidth > tablist.scrollLeft;
+    },
+    scrollTabsLeft() {
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      tablist.scrollLeft -= SCROLL_STEP;
+    },
+    scrollTabsRight() {
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      tablist.scrollLeft += SCROLL_STEP;
+    },
+    tabsUpdated() {
+      this.updates++;
+    },
+    waitUpdates(n, timeout, visualThreshold = 80) {
+      return new Promise((resolve) => {
+        const start = Date.now();
+        const interval = setInterval(() => {
+          if (this.updates >= n || Date.now() - start > timeout) {
+            clearInterval(interval);
+            resolve();
+          }
+        }, visualThreshold);
+      });
+    },
+    closeTab(pageId) {
+      this.localOpenedPages.splice(this.localOpenedPages.indexOf(pageId), 1);
+      this.$emit("tab-closed", this.pages[pageId], this.localOpenedPages);
+    },
+    updateTabsReferences(pageDelete) {
+      this.localOpenedPages = this.localOpenedPages.map((page) =>
+        page > pageDelete ? page - 1 : page
+      );
+    },
+    async openPageByIndex(index) {
+      if (index === -1) {
+        return;
+      }
+      const n = this.localOpenedPages.indexOf(index * 1);
+      if (n === -1) {
+        this.localOpenedPages.push(index);
+        await this.waitUpdates(this.updates + 2, 1000);
+        this.activeTab = this.localOpenedPages.length - 1;
+      } else {
+        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;
+    }
+  }
+};
+</script>

package/src/components/editor/pagesDropdown.vue

@@ -0,0 +1,125 @@
+<template>
+  <!--
+    Dropdown component to display options related to pages.
+    Provides options to add a new page, see all pages, and select individual pages.
+  -->
+  <b-dropdown
+    ref="pageDropdown"
+    data-test="page-dropdown"
+    variant="platform"
+    :boundary="boundary"
+    menu-class="page-dropdown-menu"
+  >
+    <!-- Dropdown button content -->
+    <template #button-content>
+      <!-- Icon representing a file -->
+      <i class="fa fa-file"></i>
+    </template>
+
+    <!-- Option to add a new page -->
+    <b-dropdown-item data-test="add-page" @click="onAddPage">
+      <!-- Icon for adding a new page -->
+      <i class="fa fa-plus platform-dropdown-item-icon"></i>
+      <!-- Text for adding a new page -->
+      {{ $t("Create Page") }}
+    </b-dropdown-item>
+
+    <!-- Option to see all pages -->
+    <b-dropdown-item data-test="see-all-pages" @click="onSeeAllPages">
+      <!-- Icon for seeing all pages -->
+      <i class="fa fa-eye platform-dropdown-item-icon"></i>
+      <!-- Text for seeing all pages -->
+      {{ $t("See all pages") }}
+    </b-dropdown-item>
+
+    <!-- Divider between adding and viewing options -->
+    <b-dropdown-divider></b-dropdown-divider>
+
+    <!-- Dropdown items for selecting individual pages -->
+    <b-dropdown-item
+      v-for="(item, page) in data"
+      :key="page"
+      :data-test="'page-' + item.name"
+      :data-cy="'page-' + page"
+      @click="onClickPage(page)"
+    >
+      <!-- Display the name of the page -->
+      {{ item.name }}
+    </b-dropdown-item>
+  </b-dropdown>
+</template>
+
+<script>
+/**
+ * Vue component for managing pages through a dropdown menu.
+ * @component
+ * @prop {Props} props - The component's props object.
+ */
+
+export default {
+  /**
+   * The name of the component.
+   * @type {string}
+   */
+  name: "PagesDropdown",
+
+  /**
+   * The props that the component accepts.
+   * @type {Object}
+   * @property {PageItem[]} data - The array of page items to be displayed in the dropdown.
+   *                               Defaults to null.
+   */
+  props: {
+    data: {
+      type: Array,
+      default: null
+    },
+    boundary: {
+      type: String,
+      default: "viewport"
+    }
+  },
+
+  /**
+   * The methods available within the component.
+   */
+  methods: {
+    /**
+     * Handler for when the "Add Page" option is clicked.
+     * Emits the "addPage" event.
+     */
+    onAddPage() {
+      this.$emit("addPage");
+    },
+
+    /**
+     * Handler for when the "See All Pages" option is clicked.
+     * Emits the "seeAllPages" event.
+     */
+    onSeeAllPages() {
+      this.$emit("seeAllPages");
+    },
+
+    /**
+     * Handler for when a specific page is clicked.
+     * Emits the "clickPage" event with the selected page.
+     * @param {PageItem} page - The selected page item.
+     */
+    onClickPage(page) {
+      this.$emit("clickPage", this.data[page]);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// Platform btn style
+.btn-platform {
+  background-color: #ffff;
+  color: #6a7888;
+}
+.platform-dropdown-item-icon {
+  // Style for the icons in dropdown items.
+  color: #1572c2;
+}
+</style>

package/src/components/index.js

@@ -47,6 +47,7 @@ import FormListTable from "./renderer/form-list-table.vue";
 import FormAnalyticsChart from "./renderer/form-analytics-chart.vue";
 import accordions from "@/components/accordions";
 import VariableNameGenerator from "@/components/VariableNameGenerator";
+import "../assets/css/tabs.css";
 
 const rendererComponents = {
   ...renderer,

package/src/components/inspector/color-select.vue

@@ -36,7 +36,24 @@
 <script>
 export default {
   components: {},
-  props: ["label", "value", "helper", "options"],
+  props: {
+    /**
+     * The label for the color select
+     */
+    label: {},
+    /**
+     * The value of the color select. eg. `alert alert-success`
+     */
+    value: {},
+    /**
+     * The helper text for the color select (not visible yet)
+     */
+     helper: {},
+    /**
+     * The options for the color select
+     */
+    options: {},
+  },
   data() {
     return {
       newColor: ""

package/src/components/sortable/Sortable.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="container sortable-box">
+    <div class="row">
+      <div class="col-sm border rounded-lg p-0 mr-3 sortable-search-box">
+        <i class="fa fa-search sortable-search-icon"></i>
+        <input
+          id="search"
+          v-model="search"
+          class="form-control border-0 shadow-none px-0"
+          :placeholder="$t('Search here')"
+          data-test="search"
+        />
+      </div>
+      <div>
+        <button
+          type="button"
+          class="btn sortable-btn-new"
+          @click="$emit('add-page', $event)"
+        >
+          <i class="fa fa-plus"></i>
+        </button>
+      </div>
+    </div>
+
+    <SortableList
+      :items="items"
+      :filtered-items="filteredItems"
+      @ordered="$emit('ordered', $event)"
+      @item-edit="$emit('item-edit', $event)"
+      @item-delete="$emit('item-delete', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import SortableList from './sortableList/SortableList.vue'
+
+export default {
+  name: 'Sortable',
+  components: {
+    SortableList
+  },
+  props: {
+    items: { type: Array, required: true },
+    filterKey: { type: String, required: true },
+  },
+  data() {
+    return {
+      search: "",
+      filteredItems: [...this.items],
+    };
+  },
+  watch: {
+    search(value) {
+      this.filteredItems = this.filterItems(value, this.items);
+    },
+    items: {
+      handler(newItems) {
+        this.filteredItems = [...newItems];
+
+        if (this.search.length > 0) {
+          this.filteredItems = this.filterItems(this.search, newItems);
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    clearSearch(value) {
+      return value.trim().toLowerCase();
+    },
+    filterItems(searchValue, items) {
+      const cleanSearch = this.clearSearch(searchValue);
+      return items.filter((item) => item[this.filterKey].toLowerCase().includes(cleanSearch));
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped src="./sortable.scss"></style>

package/src/components/sortable/sortable.scss

@@ -0,0 +1,25 @@
+.sortable {
+  &-box {
+    font-family: "Open Sans", sans-serif !important;
+  }
+
+  &-search-box {
+    display: flex;
+    align-items: center;
+    border-color: #cdddee !important;
+  }
+
+  &-search-icon {
+    margin: {
+      left: 16px;
+      right: 8px;
+    }
+    color: #6A7888;
+  }
+
+  &-btn-new {
+    background: #1572C2;
+    color: #ffffff;
+  }
+}
+

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

@@ -0,0 +1,141 @@
+<template>
+  <div class="row mt-3">
+    <div class="col p-0 border rounded-lg sortable-list">
+      <div class="sortable-list-header">
+        <div class="sortable-item-icon"></div>
+        <div class="sortable-list-title">PAGE NAME</div>
+      </div>
+      <div class="sortable-container" @dragover="dragOver">
+        <div
+          v-for="(item, index) in sortedItems"
+          :key="index"
+          :data-order="item.order"
+          :data-test="`item-${item.order}`"
+          :title="item.name"
+          draggable="true"
+          @dragstart="(event) => dragStart(event, item.order)"
+          @dragenter="(event) => dragEnter(event, item.order)"
+          @dragend="dragEnd"
+          class="sortable-item sortable-draggable"
+        >
+          <div class="sortable-item-icon">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="rounded sortable-item-name">
+            <b-form-input
+              v-if="editRowIndex === index"
+              v-model="item.name"
+              type="text"
+              autofocus
+              @blur.stop="onBlur()"
+            />
+            <span v-else>{{ item.name }}</span>
+          </div>
+          <div class="border rounded-lg sortable-item-action">
+            <button class="btn" @click.stop="onClick(item, index)">
+              <i class="fas fa-edit"></i>
+            </button>
+            <div class="sortable-item-vr"></div>
+            <button class="btn" @click="$emit('item-delete', item)">
+              <i class="fas fa-trash-alt"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SortableList',
+  props: {
+    items: { type: Array, required: true },
+    filteredItems: { type: Array, required: true },
+  },
+  data() {
+    return {
+      draggedItem: 0,
+      draggedOverItem: 0,
+      editRowIndex: null,
+    };
+  },
+  computed: {
+    sortedItems() {
+      const sortedItems = [...this.filteredItems].sort(
+        (a, b) => a.order - b.order
+      );
+      return sortedItems;
+    }
+  },
+  methods: {
+    onBlur() {
+      this.editRowIndex = -1;
+    },
+    onClick(item, index) {
+      if (this.editRowIndex === -1 || this.editRowIndex === index) {
+        this.editRowIndex = null;
+        return;
+      }
+      this.editRowIndex = index;
+      this.$emit("item-edit", item);
+    },
+    dragStart(event, order) {
+      // disable edit mode
+      this.editRowIndex = null;
+      this.draggedItem = order;
+      // add dragging class to the element
+      event.target.classList.add('dragging');
+    },
+    dragEnter(event, order) {
+      this.draggedOverItem = order;
+    },
+    dragEnd(event) {
+      // remove dragging class from the element
+      event.target.classList.remove('dragging');
+
+      // get the index of the dragged item and the dragged over item
+      const itemsSortedClone = [...this.items].sort(
+        (a, b) => a.order - b.order
+      );
+      const draggedItemIndex = itemsSortedClone.findIndex(
+        (item) => item.order === this.draggedItem
+      );
+      const draggedOverItemIndex = itemsSortedClone.findIndex(
+        (item) => item.order === this.draggedOverItem
+      );
+
+      if (draggedItemIndex !== draggedOverItemIndex) {
+        // get the order of the dragged over item
+        const tempOrder = itemsSortedClone[draggedOverItemIndex].order;
+        // set the increment
+        const increment = this.draggedItem > this.draggedOverItem ? 1 : -1;
+
+        // update the order of the items between the dragged item and the dragged over item
+        if (draggedItemIndex < draggedOverItemIndex) {
+          for (let i = draggedItemIndex + 1; i <= draggedOverItemIndex; i++) {
+            const orderAux = itemsSortedClone[i].order;
+            itemsSortedClone[i].order = orderAux + increment;
+          }
+
+          itemsSortedClone[draggedItemIndex].order = tempOrder;
+        } else if (draggedItemIndex > draggedOverItemIndex) {
+          for (let i = draggedOverItemIndex; i <= draggedItemIndex - 1; i++) {
+            const orderAux = itemsSortedClone[i].order;
+            itemsSortedClone[i].order = orderAux + increment;
+          }
+
+          itemsSortedClone[draggedItemIndex].order = tempOrder;
+        }
+      }
+
+      this.$emit('ordered', itemsSortedClone);
+    },
+    dragOver(event) {
+      event.preventDefault();
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped src="./sortableList.scss"></style>