Modifying bootstrap v5 theme and behaviour, dropdowns and multiselects

Grocery CRUD Enterprise
1

Hello all, I’ve been working in a project with GroceryCrud V3 enterprise with the bootstrap v5 theme and CodeIgniter 4, I’ve been given some apparently simple (but necessary for our particular project) tasks that are turning out to be very challenging in GC. The first task is creating a date range selector in a dropdown style for the quick search field in the data grids. I worked around adding date ranges doing this:

$crud->fieldTypeSearchColumn($field, 'dropdown', [
    date('Y-m-d') => 'Today',
    date('Y-m-d', strtotime('+1 day')) => 'Tomorrow',
    date('Y-m-d', strtotime('-1 day')) => 'Yesterday',
    // Week
    GCUtils::CUSTOM_DATE_RANGE_INDICATOR . date('Y-m-d', strtotime('monday this week')) . ',' . date('Y-m-d', strtotime('sunday this week')) => 'This week',
    GCUtils::CUSTOM_DATE_RANGE_INDICATOR . date('Y-m-d', strtotime('monday last week')) . ',' . date('Y-m-d', strtotime('sunday last week')) => 'Last week',
    // Month
    GCUtils::CUSTOM_DATE_RANGE_INDICATOR . date('Y-m-01') . ',' . date('Y-m-t') => 'This month',
    GCUtils::CUSTOM_DATE_RANGE_INDICATOR . date('Y-m-01', strtotime('first day of last month')) . ',' . date('Y-m-t', strtotime('last day of last month')) => 'Last month',
    GCUtils::CUSTOM_DATE_RANGE_INDICATOR . date('Y-m-01') . ',' . date('Y-m-d') => 'This month up to date',
    // Year
    GCUtils::CUSTOM_DATE_RANGE_INDICATOR . date('Y-01-01') . ',' . date('Y-12-31') => 'This year',
    GCUtils::CUSTOM_DATE_RANGE_INDICATOR . date('Y-01-01', strtotime('first day of last year')) . ',' . date('Y-12-31', strtotime('last day of last year')) => 'Last year',
    GCUtils::CUSTOM_DATE_RANGE_INDICATOR . date('Y-01-01') . ',' . date('Y-m-d') => 'This year up to date'
]);

class GCUtils {
    const CUSTOM_DATE_RANGE_INDICATOR = '$$__date_range__$$';
...
}

And modifying GC DatagridState.php source code by adding this:

// Check for custom date ranges
if(
    is_string($searchValue) && 
    strstr($searchValue, GCUtils::CUSTOM_DATE_RANGE_INDICATOR)
) {
    $searchValue = str_replace(GCUtils::CUSTOM_DATE_RANGE_INDICATOR, '', $searchValue);
    $isDateRange = DateUtils::isDateRangeStr($searchValue);
    if($isDateRange) {
        $dateRange = explode(',', $searchValue);
        $finalSearchData[$columnName] = [
            '>=' . $dateRange[0],
            '<=' . $dateRange[1]
        ];
    }
}

But I also need a ‘custom date range’ modal in the quick search dropdown, that, when selected, allows the user to select two dates then perform the search. I’m wondering if this is possible, I found that we don’t even have the react code for the bootstrap v5 theme in order add an edge case and modify that behaviour.

The second task is creating a simple “Yes/No/All” dropdown (Boolean) again in the quicksearch field. The problem is that our “false” values are defined by NULL, not 0, we can’t modify that since our data is exported from another system, so fieldtype(‘boolean’) doesn’t work, a dropdown like this doesn’t work either.

$crud->fieldTypeSearchColumn($field, 'dropdown', [
    '1' => 'Checked',
    null => 'Unchecked' // Returns both checked and unchecked
    // '0' => 'Unchecked' // Does not work, our false values are null
]);

And finally, having a multi-select in the quicksearch field, it straight up does not work, having this:

$crud->fieldType($field, 'multiselect_searchable', $values);

results in a searchable select that does not allow multiple selection (and doesn’t have enough space for the contents, needing a horizontal scrollbar), and doing the native option:

$crud->fieldType($field, 'multiselect_native', $values);

Results in a simple select (not multiple) with the arrow spaced weirdly inside the container (which also happens with normal ‘dropdown’ fields)

image

Thanks!
Edgar