build assets

Power-Components · Dec 19, 2023 · 15e6832 · 15e6832
2 parents 50d54dc + b2efd73
commit 15e6832
Show file tree

Hide file tree

Showing 17 changed files with 160 additions and 59 deletions.
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -76,6 +76,7 @@ jobs:
           cd tests/cypress &&
           cp stubs/CypressTable.php app/app/Livewire/CypressTable.php &&
           cp stubs/rules-controllers.blade.php app/resources/views/components/header/rules-controllers.blade.php
+          cp stubs/filters-controllers.blade.php app/resources/views/components/header/filters-controllers.blade.php
           cd ./../../
           chmod +x ./tests/cypress/run.sh
           ./tests/cypress/run.sh

diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,4 @@ dist/powergrid.js.LICENSE.txt
 tests/cypress/app/
 .DS_Store
 package-lock.json
+tests/cypress/cypress/screenshots/*
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/powergrid.js": "/powergrid.js?id=67bdc7ee31fc5fb2fefc35ee522d24d1",
+    "/powergrid.js": "/powergrid.js?id=d96096b65479becbf69b80ca0c298e90",
     "/bootstrap5.css": "/bootstrap5.css?id=03aba1df82c23db07c1d1096efcd42ae",
     "/tailwind.css": "/tailwind.css?id=479d85eb8b0b8341542e0b979c84f17d",
     "/tom-select.css": "/tom-select.css?id=7af730d2c4bf937316d4002948b1571d",

diff --git a/dist/powergrid.js b/dist/powergrid.js
diff --git a/resources/js/components/select/tomSelect.js b/resources/js/components/select/tomSelect.js
@@ -11,6 +11,19 @@ export default (params) => ({
             onChange: (value) => {
                 storeMultiSelect(params, value)
             },
+            onInitialize: () => {
+                window.addEventListener(`pg:clear_multi_select::${params.tableName}:${params.dataField}`, () => {
+                    if (element) {
+                        element.tomselect.clear(true)
+                    }
+                })
+
+                window.addEventListener(`pg:clear_all_multi_select::${params.tableName}`, () => {
+                    if (element) {
+                        element.tomselect.clear(true)
+                    }
+                })
+            },
         }
 
         const asyncConfig = {

diff --git a/src/Components/Filters/FilterInputText.php b/src/Components/Filters/FilterInputText.php
@@ -40,12 +40,12 @@ public static function getWireAttributes(string $field, string $title): array
     {
         return collect()
             ->put('selectAttributes', new ComponentAttributeBag([
-                'wire:model'                => 'filters.input_text_options.' . $field,
-                'wire:input.debounce.600ms' => 'filterInputTextOptions(\'' . $field . '\', $event.target.value)',
+                'wire:model'                     => 'filters.input_text_options.' . $field,
+                'wire:input.live.debounce.600ms' => 'filterInputTextOptions(\'' . $field . '\', $event.target.value)',
             ]))
             ->put('inputAttributes', new ComponentAttributeBag([
-                'wire:model'                => 'filters.input_text.' . $field,
-                'wire:input.debounce.600ms' => 'filterInputText(\'' . $field . '\', $event.target.value, \'' . $title . '\')',
+                'wire:model'                     => 'filters.input_text.' . $field,
+                'wire:input.live.debounce.600ms' => 'filterInputText(\'' . $field . '\', $event.target.value, \'' . $title . '\')',
             ]))
             ->toArray();
     }

diff --git a/src/DataSource/Builder.php b/src/DataSource/Builder.php
@@ -42,40 +42,34 @@ public function filter(): EloquentBuilder|QueryBuilder
             return $this->query;
         }
 
-        foreach ($this->powerGridComponent->filters as $filterType => $filter) {
-            if (blank($filter)) {
-                continue;
-            }
-
-            $field = key($filter);
-
-            $value = $filter[key($filter)];
-
-            $this->query->where(function ($query) use ($filterType, $field, $filter, $value, $filters) {
-                $filter = function ($query, $filters, $filterType, $field, $value) {
-                    $filter = $filters->filter(function ($filter) use ($field) {
-                        return data_get($filter, 'field') === $field;
-                    })
-                        ->first();
-
-                    match ($filterType) {
-                        'datetime'     => (new DateTimePicker($this->powerGridComponent, $filter))->builder($query, $field, $value),
-                        'date'         => (new DatePicker($this->powerGridComponent, $filter))->builder($query, $field, $value),
-                        'multi_select' => (new MultiSelect($this->powerGridComponent, $filter))->builder($query, $field, $value),
-                        'select'       => (new Select($this->powerGridComponent, $filter))->builder($query, $field, $value),
-                        'boolean'      => (new Boolean($this->powerGridComponent, $filter))->builder($query, $field, $value),
-                        'number'       => (new Number($this->powerGridComponent, $filter))->builder($query, $field, $value),
-                        'input_text'   => (new InputText($this->powerGridComponent, $filter))->builder($query, $field, [
-                            'selected'     => $this->validateInputTextOptions($this->powerGridComponent->filters, $field),
-                            'value'        => $value,
-                            'searchMorphs' => $this->powerGridComponent->searchMorphs,
-                        ]),
-                        default => null
+        foreach ($this->powerGridComponent->filters as $filterType => $column) {
+            foreach ($column as $field => $value) {
+                $this->query->where(function ($query) use ($filterType, $field, $value, $filters) {
+                    $filter = function ($query, $filters, $filterType, $field, $value) {
+                        $filter = $filters->filter(function ($filter) use ($field) {
+                            return data_get($filter, 'field') === $field;
+                        })
+                            ->first();
+
+                        match ($filterType) {
+                            'datetime'     => (new DateTimePicker($this->powerGridComponent, $filter))->builder($query, $field, $value),
+                            'date'         => (new DatePicker($this->powerGridComponent, $filter))->builder($query, $field, $value),
+                            'multi_select' => (new MultiSelect($this->powerGridComponent, $filter))->builder($query, $field, $value),
+                            'select'       => (new Select($this->powerGridComponent, $filter))->builder($query, $field, $value),
+                            'boolean'      => (new Boolean($this->powerGridComponent, $filter))->builder($query, $field, $value),
+                            'number'       => (new Number($this->powerGridComponent, $filter))->builder($query, $field, $value),
+                            'input_text'   => (new InputText($this->powerGridComponent, $filter))->builder($query, $field, [
+                                'selected'     => $this->validateInputTextOptions($this->powerGridComponent->filters, $field),
+                                'value'        => $value,
+                                'searchMorphs' => $this->powerGridComponent->searchMorphs,
+                            ]),
+                            default => null
+                        };
                     };
-                };
 
-                $filter($query, $filters, $filterType, $field, $value);
-            });
+                    $filter($query, $filters, $filterType, $field, $value);
+                });
+            }
         }
 
         return $this->query;

diff --git a/src/Traits/HasFilter.php b/src/Traits/HasFilter.php
@@ -3,7 +3,7 @@
 namespace PowerComponents\LivewirePowerGrid\Traits;
 
 use DateTimeZone;
-use Illuminate\Support\{Carbon};
+use Illuminate\Support\{Arr, Carbon};
 use Livewire\Attributes\On;
 
 use function Livewire\store;
@@ -24,7 +24,7 @@ public function clearFilter(string $field = '', bool $emit = true): void
             list($table, $column) = explode('.', $field);
 
             if (isset($this->filters['multi_select'][$table][$column])) {
-                $this->dispatch('pg:clear_multi_select::' . $this->tableName);
+                $this->dispatch('pg:clear_multi_select::' . $this->tableName . ':' . $field);
             }
 
             if (isset($this->filters['datetime'][$table][$column]) || isset($this->filters['date'][$table][$column])) {
@@ -88,7 +88,7 @@ public function clearFilter(string $field = '', bool $emit = true): void
             }
         } else {
             if (isset($this->filters['multi_select'][$field])) {
-                $this->dispatch('pg:clear_multi_select::' . $this->tableName);
+                $this->dispatch('pg:clear_multi_select::' . $this->tableName . ':' . $field);
             }
 
             if (isset($this->filters['datetime'][$field]) || isset($this->filters['date'][$field])) {
@@ -123,6 +123,7 @@ public function clearAllFilters(): void
         $this->persistState('filters');
 
         $this->dispatch('pg:clear_all_flatpickr::' . $this->tableName);
+        $this->dispatch('pg:clear_all_multi_select::' . $this->tableName);
     }
 
     private function resolveFilters(): void

diff --git a/tests/cypress/cypress/e2e/action-rules/checkbox.cy.js b/tests/cypress/cypress/e2e/action-rules/checkbox.cy.js
@@ -1,6 +1,6 @@
 describe('Action Rules::checkbox', () => {
     beforeEach(() => {
-        cy.visit('/cypress?rule=3');
+        cy.visit('/cypress?ruleType=checkbox');
     });
 
     it('can visit page', () => {

diff --git a/tests/cypress/cypress/e2e/action-rules/radio.cy.js b/tests/cypress/cypress/e2e/action-rules/radio.cy.js
@@ -1,6 +1,6 @@
 describe('Action Rules::radio', () => {
     beforeEach(() => {
-        cy.visit('/cypress?rule=4');
+        cy.visit('/cypress?ruleType=radio');
     });
 
     it('can visit page', () => {

diff --git a/tests/cypress/cypress/e2e/action-rules/rows.cy.js b/tests/cypress/cypress/e2e/action-rules/rows.cy.js
@@ -1,6 +1,6 @@
 describe('Action Rules::rows', () => {
     beforeEach(() => {
-        cy.visit('/cypress?rule=1');
+        cy.visit('/cypress?ruleType=rows');
     });
 
     it('can visit page', () => {
@@ -60,20 +60,20 @@ describe('Action Rules::rows', () => {
             .should('have.class', '!cursor-pointer');
     })
 
-    it('should be able to add multiple class conditions using Rule::rows -> setAttribute', () => {
+    it.only('should be able to add multiple class conditions using Rule::rows -> setAttribute', () => {
         let $rules = '\\PowerComponents\\LivewirePowerGrid\\Facades\\Rule::rows()' +
             '->when(fn($row) => $row->id == 1)' +
             '->setAttribute(\'class\', \'!bg-red-100\'), ' +
             '\\PowerComponents\\LivewirePowerGrid\\Facades\\Rule::rows()' +
             '->when(fn($row) => $row->id == 2)' +
-            '->setAttribute(\'class\', \'!bg-green-100\')';
+            '->setAttribute(\'class\', \'!bg-blue-100\')';
 
         cy.get('[data-cy=dynamic-rules]').type($rules)
 
         cy.get('[data-cy=apply-rules]').click()
 
         cy.get('.power-grid-table tbody tr').eq(0)
-            .should('not.have.class', '!bg-red-100');
+            .should('have.class', '!bg-red-100');
 
         cy.get('.power-grid-table tbody tr').eq(0)
             .should('not.have.class', '!bg-green-100');

diff --git a/tests/cypress/cypress/e2e/filters/input-text.cy.js b/tests/cypress/cypress/e2e/filters/input-text.cy.js
@@ -0,0 +1,27 @@
+describe('simple', () => {
+    beforeEach(() => {
+        cy.visit('/cypress?testType=filters');
+    });
+
+    it('test', () => {
+        const expectedFilter = '{"input_text":{"name":"d","email":"d"}}' // Daniel, Claudio
+
+        cy.get('[wire\\:model="filters.input_text.name"]')
+            .type('d').should('have.value', 'd');
+
+        cy.get('[wire\\:model="filters.input_text.email"]')
+            .type('d').should('have.value', 'd');
+
+        cy.get('[data-cy="filters-log"]').should('contain.text', expectedFilter);
+
+        cy.get('.power-grid-table tbody tr').then(($el) => {
+            $el.each((index, row) => {
+
+                const name = Cypress.$(row).find('td').eq(1).text();
+
+                expect(name).not.to.include('Luan');
+                expect(name).not.to.include('Tio Jobs');
+            });
+        })
+    });
+})
diff --git a/tests/cypress/cypress/e2e/filters/number.cy.js b/tests/cypress/cypress/e2e/filters/number.cy.js
@@ -0,0 +1,27 @@
+describe('simple', () => {
+    beforeEach(() => {
+        cy.visit('/cypress?testType=filters');
+    });
+
+    it('test', () => {
+        const expectedFilter = '{"number":{"id":{"start":"2","end":"4"}}}'
+
+        cy.get('[wire\\:model="filters.number.id.start"]')
+            .type('2').should('have.value', '2');
+
+        cy.get('[wire\\:model="filters.number.id.end"]')
+            .type('4').should('have.value', '4');
+
+        cy.get('[data-cy="filters-log"]').should('contain.text', expectedFilter);
+
+        cy.get('.power-grid-table tbody tr').then(($el) => {
+            $el.each((index, row) => {
+
+                const firstTdText = Cypress.$(row).find('td').eq(0).text();
+                expect(firstTdText).not.to.include('1');
+                expect(firstTdText).not.to.include('5');
+                expect(firstTdText).not.to.include('6');
+            });
+        })
+    });
+})
diff --git a/tests/cypress/run.sh b/tests/cypress/run.sh
diff --git a/tests/cypress/stubs/CypressTable.php b/tests/cypress/stubs/CypressTable.php
@@ -6,6 +6,7 @@
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Support\Carbon;
 use Livewire\Attributes\Url;
+use PowerComponents\LivewirePowerGrid\Facades\Filter;
 use PowerComponents\LivewirePowerGrid\Traits\WithExport;
 use PowerComponents\LivewirePowerGrid\{Button, Column, Exportable, Footer, Header, PowerGrid, PowerGridColumns, PowerGridComponent};
 
@@ -18,25 +19,39 @@ final class CypressTable extends PowerGridComponent
     public bool $applyRules = false;
 
     #[Url]
-    public int $rule = 1;
+    public string $ruleType = 'rows'; // rows, checkbox, radio,
+
+    #[Url]
+    public string $testType = 'rules'; // rules, filters
 
     public function setUp(): array
     {
-        if ($this->rule === 4) {
+        if ($this->ruleType === 'radio') {
             $this->showRadioButton();
         }
 
-        if ($this->rule === 3) {
+        if ($this->ruleType === 'checkbox') {
             $this->showCheckBox();
         }
 
+        $headerTest = match ($this->testType) {
+            'filters' => [
+                Header::make()
+                    ->includeViewOnTop('components.header.filters-controllers')
+                    ->showSearchInput(),
+            ],
+            default => [
+                Header::make()
+                    ->includeViewOnTop('components.header.rules-controllers')
+                    ->showSearchInput(),
+            ],
+        };
+
         return [
             Exportable::make('export')
                 ->striped()
                 ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV),
-            Header::make()
-                ->includeViewOnTop('components.header.rules-controllers')
-                ->showSearchInput(),
+            ...$headerTest,
             Footer::make()
                 ->showPerPage()
                 ->showRecordCount(),
@@ -96,6 +111,23 @@ public function applyRules(): void
         $this->applyRules = true;
     }
 
+    public function filters(): array
+    {
+        if ($this->testType == 'rules') {
+            return [];
+        }
+
+        return [
+            Filter::inputText('name'),
+            Filter::inputText('email'),
+            Filter::number('id'),
+            Filter::datetimepicker('created_at_formatted', 'created_at')
+                ->params([
+                    'timezone' => 'America/Sao_Paulo',
+                ]),
+        ];
+    }
+
     public function actionRules($row): array
     {
         $apply = null;

diff --git a/tests/cypress/stubs/filters-controllers.blade.php b/tests/cypress/stubs/filters-controllers.blade.php
@@ -0,0 +1,5 @@
+<div>
+    <div data-cy="filters-log">
+        @json($filters)
+    </div>
+</div>
diff --git a/tests/cypress/stubs/rules-controllers.blade.php b/tests/cypress/stubs/rules-controllers.blade.php
@@ -3,14 +3,14 @@
             class="w-[180px]"
             label="Select Rule"
             :options="[
-        ['name' => 'Rows',  'id' => 1],
-        ['name' => 'Buttons', 'id' => 2],
-        ['name' => 'Checkbox', 'id' => 3],
-        ['name' => 'Radio', 'id' => 4],
+        ['name' => 'Rows',  'value' => 'rows'],
+        ['name' => 'Buttons', 'value' => 'buttons'],
+        ['name' => 'Checkbox', 'value' => 'checkbox'],
+        ['name' => 'Radio', 'value' => 'radio'],
     ]"
             option-label="name"
-            option-value="id"
-            wire:model="rule"
+            option-value="value"
+            wire:model="ruleType"
     />
 
     <x-textarea data-cy="dynamic-rules" wire:model="dynamicRules"/>