Merge pull request #587 from ProcessMaker/add_filteringV1

Add filtering v1

Author: DevAlePM

model/filteringModel.js

@@ -0,0 +1,59 @@
+import { FilteringV1 } from "#pages/filteringV1"
+const filter = new FilteringV1()
+
+export class FilteringModel {
+    /**
+     * Configures a simple filter for a specific column with multiple conditions
+     * @param {number} column - The column index to apply the filter to (default: 0)
+     * @param {Object} payload - The filter configuration object containing conditions and action.
+        payload = {
+            conditions:[
+                {
+                    filter: ">",
+                    value: "123",
+                },
+                {
+                    filter: "<",
+                    value: "125",
+                }
+            ],
+            action: "Apply"
+        }
+     * @param {Array} payload.conditions - Array of filter conditions with filter type and value
+     * @param {string} payload.action - The action to perform ("Cancel"|"Apply"|"Clear", default: "Cancel")
+     */
+    configureSimpleFilter(column = 0, payload = {}){
+        filter.openFilter(column)
+        filter.displayDotFilter(column)
+        filter.filterModalIsVisible()
+        payload.conditions.forEach(($filtering, $index) => {
+            filter.fillFilter($filtering.filter, $index)
+            filter.fillValue($filtering.value, $index)
+            filter.addNewFilter()
+        })
+        filter.removeFilter(payload.conditions.length)
+        filter.pressButtonModal(payload.action)
+    }
+
+    /**
+     * Clears any existing filter for a specific column
+     * @param {number} column - The column index to clear the filter from (default: 0)
+     */
+    clearFilterByColumn(column = 0){
+        filter.openFilter(column)
+        filter.displayDotFilter(column)
+        filter.pressButtonModal("Clear")
+    }
+
+    /**
+     * Sorts a column in ascending or descending order
+     * @param {number} column - The column index to sort (default: 0)
+     * @param {string} action - The sort action to perform ("Sort Ascending"|"Sort Descending" default: "Sort Ascending")
+     */
+    pressSortButton(column = 0, action = "Sort Ascending"){
+        filter.openFilter(column)
+        filter.displayDotFilter(column)
+        filter.filterModalIsVisible()
+        filter.pressSortButton(action)
+    }
+}

pages/filteringV1.js

@@ -0,0 +1,79 @@
+import selectors from "#selectors/filtering.js";
+
+export class FilteringV1 {
+
+    /**
+     * Opens the filter dropdown for a specific column by triggering mouseover event
+     * @param {number} column - Column index (default: 0)
+     */
+    openFilter(column = 0){
+        cy.get(selectors.openFilter).eq(column).should('be.visible').trigger('mouseover')
+    }
+
+    /**
+     * Displays the three dots filter menu for a specific column
+     * @param {number} column - Column index (default: 0)
+     */
+    displayDotFilter(column = 0){
+        cy.get(selectors.threeDots).eq(column).click({force:true})
+    }
+
+    /**
+     * Verifies that the filter modal is visible on the page
+     */
+    filterModalIsVisible(){
+        cy.get(selectors.modalFilter).should('be.visible')
+    }
+
+    /**
+     * Clicks a button within the filter modal
+     * @param {string} buttonName - Button name to click ("Cancel"|"Apply"|"Clear", default: "Cancel")
+     */
+    pressButtonModal(buttonName = "Cancel"){
+        cy.get(selectors.filterForm).within(() => {
+            cy.contains('button', buttonName).click()
+        })
+    }
+
+    /**
+     * Clicks the sort button with the specified action
+     * @param {string} action - Sort action ("Sort Ascending"|"Sort Descending", default: "Sort Ascending")
+     */
+    pressSortButton(action = "Sort Ascending"){
+        cy.get(selectors.sortButton).eq(0).contains('button', action).click()
+    }
+
+    /**
+     * Fills the filter option dropdown for a specific row
+     * @param {string} option - Filter option to select (default: "=")
+     * @param {number} row - Row index (default: 0)
+     */
+    fillFilter(option = "=", row = 0){
+        cy.get(selectors.optionFilter.replace('{row}', row)).select(option)
+    }
+
+    /**
+     * Fills the filter value input field for a specific row
+     * @param {string} value - Value to type in the input field (default: "")
+     * @param {number} row - Row index (default: 0)
+     */
+    fillValue(value = "", row = 0){
+        cy.get(selectors.valueFilter.replace('{row}', row)).type(value)
+        
+    }
+
+    /**
+     * Removes a filter for a specific row by clicking the remove button
+     * @param {number} row - Row index (default: 0)
+     */
+    removeFilter(row = 0){
+        cy.get(selectors.removeButtonModal.replace('{row}', row)).click()
+    }
+
+    /**
+     * Adds a new filter row by clicking the add new filter button
+     */
+    addNewFilter(){
+        cy.get(selectors.addNewFilterButton).parent().parent("button").click()
+    }
+}

selectors/filtering.js

@@ -5,4 +5,14 @@ export default {
     filterForm: '[class="pm-filter-form"]',
     filterFooterBtns: '[class="pm-filter-form"] fieldset',
     tableRequest: '[class="pm-table-container"]',
+    //new filteringV1
+    openFilter: '[class="pm-table-ellipsis-column"] [class="pm-table-column-header"]',
+    threeDots: '.pm-table-ellipsis-column button',
+    modalFilter: '[class="pm-filter-form"]',
+    filterForm: '[class="pm-filter-form"]',
+    sortButton: '[class="pm-filter-form"] fieldset',
+    optionFilter: '[data-cy="pmFilterFormArea"] [data-cy="operator{row}"]',
+    valueFilter: '[data-cy="pmFilterFormArea"] [data-cy="value{row}"]',
+    removeButtonModal: '[data-cy="pmFilterFormArea"] [data-cy="buttonRemove{row}"]',
+    addNewFilterButton: '[class="btn pm-filter-form-button btn-light btn-sm"] rect[fill="#D9D9D9"]'
 };