Table column searchable with datepicker component

[Diogo-Coding]

Overview of the problem

Oruga version: [0.7.0] Vuejs version: [3.2.13] OS/Browser:Chrome

Description

Searching on numeric camps not working as expected, "Peso" column is a string with the weight that was saved on DB, it always a number with 2 decimals. Even introducing exact number of weight it doesnt filter correctly

Steps to reproduce

     <o-table
        v-model:current-page="currentPage"
        :data="history"
        :hoverable="true"
        sort-icon="arrow-up"
        sort-icon-size="small"
        default-sort="created_at"
        defaultSortDirection="desc"
        :paginated="true"
        :per-page="50"
        :pagination-simple="true"
        pagination-position="top"
        aria-next-label="Next page"
        aria-previous-label="Previous page"
        aria-page-label="Page"
        aria-current-label="Current page"
        v-if="history.length > 0"
      >
        <o-table-column field="weight" label="Peso" v-slot:default="props" sortable searchable width="5%">
          {{ props.row.weight }}
        </o-table-column>
     </o-table>

Actual behavior

[Diogo-Coding]

Nvm, i figured why, 2 months ago i did a small change to the escapeRegExpChars function on node_modules/@oruga-ui/oruga-next/dist/esm/helpers.mjs, to make searchable able to filter by dates also, but made number unsearchable.

Now, to fix it, i made this smalls changes:

function isValidDate(value) {
    // Date Formats
    const datePatterns = [
        /^\d{4}-\d{2}-\d{2}$/,
        /^\d{2}\/\d{2}\/\d{4}$/,
        /^\d{2}-\d{2}-\d{4}$/,
        /^\d{4}\/\d{2}\/\d{2}$/,
        /^\w{3} \w{3} \d{2} \d{4} \d{2}:\d{2}:\d{2}/
    ];

    for (const pattern of datePatterns) {
        if (pattern.test(value)) {
            return true;
        }
    }

    return false;
}

function escapeRegExpChars(value) {
    if (!value) {
        return value;
    }

    if (isValidDate(value)) {
        if (!isNaN(new Date(value).getTime())) {
            let date = new Date(value);
            date.setHours(date.getHours() + 1); // Optional and could be removed, this is for me
            return date.toISOString().split('T')[0];
        }
    }

    if (typeof value !== 'string') {
        value = value.toString();
    }

    return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}

This will use the value that receives and check if it is a date by the regex's applied.

Idk if this could be useful or right done, but it seems to work for me.

Only problem i see, its that maybe for each check or time that function is called it makes another loop, but works.

I tested with this values:

'2023-10-27' '30-12-2023' '5' '5.24' 'text' 'text with - or /' 'text-2' 'text:2' 'Thu Oct 26 2023 00:00:00 GMT+0100 (hora de verano de Europa occidental)'

[mlmoravek]

@Diogo-Coding Could you please clarify the value of your changes? What behaviour will change?

[Diogo-Coding]

@mlmoravek

I changed the escapeRegExpChar function to allow dates filtering on searchable column in oruga tables, old one used the regex expresion for all type of values that were strings, that made tables not able to use datetime components or even normal input with values that was dates, to filter. This changes allow it.

At first i thought it was a bug from oruga library but it was from a small change i did in the past trying to reach this.

I just added a new function isValidDate and added an if on escapeRegExpChar function