refactor

Bored-Programmers · Dec 18, 2023 · 0fb2895 · 0fb2895
1 parent 5046529
commit 0fb2895
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -35,36 +35,16 @@ To install LaraGrid, you need to run the following command:
 composer require bored-programmers/laragrid
 ```
 
-LaraGrid depends on `flatpickr` for date and datetime fields. You can install it by following the instructions on
-the [official website](https://flatpickr.js.org/getting-started/). If you encounter issues with loading the CSS file,
-you can manually add it to your JS file:
+## Publishable
 
-```javascript
-import 'flatpickr/dist/flatpickr.css';
-```
-
-**_Don't forget to make flatpickr globally accessible_**
-
-```javascript
-window.flatpickr = flatpickr;
-```
-
-You also need to install `momentjs` for date formatting:
+You can publish the package's configuration, language files, and views using the following commands:
 
+**_required_**
 ```bash
-npm install moment --save
+php artisan vendor:publish --tag=laragrid-assets
 ```
 
-**_Don't forget to make moment globally accessible_**
-
-```javascript
-window.flatpickr = flatpickr;
-```
-
-## Publishable Assets
-
-You can publish the package's configuration, language files, and views using the following commands:
-
+**_optional_**
 ```bash
 php artisan vendor:publish --tag=laragrid-config
 php artisan vendor:publish --tag=laragrid-lang
@@ -74,9 +54,6 @@ php artisan vendor:publish --tag=laragrid-views
 ## TODO List
 
 1. [ ] Write tests for all functionality
-2. [ ] Make flatpickr as internal dependency and not as project dependency (probably with cdn?)
-3. [ ] Unify the code style, create a code style guide
-4. [ ] Make classes more modular
 
 ## Base Usage
 
@@ -149,7 +126,6 @@ class MyTheme extends BaseLaraGridTheme
         $theme = new static();
 
         $theme->setTableClass('');
-        $theme->setFilterResetButtonClass('');
         $theme->setTheadClass('');
         $theme->setTrClass('');
         $theme->setFilterTrClass('');
@@ -161,8 +137,6 @@ class MyTheme extends BaseLaraGridTheme
         $theme->setFilterTextClass('');
         $theme->setFilterSelectClass('');
         $theme->setFilterDateClass('');
-
-        $theme->setFilterResetButtonRenderer(fn() => view('test')); // you can also set renderer for filter reset button. Pass a closure that returns a whatever you want -> string, view, etc.
 
         $theme->setRecordTrClass(fn(Model $model) => $model->role === 'admin' ? 'bg-red-500' : 'bg-white'); // you can also set a closure for record tr class. Pass a closure that returns a string class.
         $theme->setRecordTrClass('bg-gray-100'); // If you don't want to set a closure, you can just pass a string class.

diff --git a/resources/assets/css/flatpickr.min.css b/resources/assets/css/flatpickr.min.css
diff --git a/resources/assets/js/date-picker.js b/resources/assets/js/date-picker.js
@@ -0,0 +1,42 @@
+function LGDatePicker(dataField, jsDateFormat, dateFormat, locale, dateFrom, dateTo) {
+  return {
+    dataField: dataField,
+    dateFrom: dateFrom,
+    dateTo: dateTo,
+    element: null,
+
+    init() {
+      window.addEventListener(`LGdatePickerClear`, () => {
+        if (this.$refs.datePicker && this.element) {
+          this.element.clear()
+        }
+      })
+
+      if (this.$refs && this.$refs.datePicker) {
+        this.element = flatpickr(this.$refs.datePicker, this.getOptions());
+      }
+    },
+
+    getOptions() {
+      return {
+        mode: 'range',
+        defaultHour: 0,
+        defaultDate: [this.dateFrom, this.dateTo],
+        dateFormat: dateFormat,
+        locale: locale,
+        onClose: function (selectedDates) {
+          if (selectedDates.length === 2) {
+            let elementFrom = document.querySelector(`input[name="filter.${dataField}.from"]`);
+            let elementTo = document.querySelector(`input[name="filter.${dataField}.to"]`);
+
+            elementFrom.value = dayjs(selectedDates[0], 'Y-MM-DD').format(jsDateFormat);
+            elementTo.value = dayjs(selectedDates[1], 'Y-MM-DD').format(jsDateFormat);
+
+            elementFrom.dispatchEvent(new Event('input'));
+            elementTo.dispatchEvent(new Event('input'));
+          }
+        }
+      };
+    }
+  }
+}
diff --git a/resources/assets/js/dayjs.min.js b/resources/assets/js/dayjs.min.js
diff --git a/resources/assets/js/flatpickr.min.js b/resources/assets/js/flatpickr.min.js
diff --git a/resources/views/components/filters/date.blade.php b/resources/views/components/filters/date.blade.php
@@ -8,7 +8,18 @@
     'theme',
 ])
 
-<div wire:ignore x-data="LGDatePicker()" x-init="init()">
+<div
+        wire:ignore
+        x-data="LGDatePicker(
+            @js($column->getModelField()),
+            @js(config('laragrid.flatpickr.js_date_format')),
+            @js(config('laragrid.flatpickr.date_format')),
+            @js(config('laragrid.flatpickr.locale')),
+            @js($this->filter[$column->getModelField()]['from'] ?? null),
+            @js($this->filter[$column->getModelField()]['to'] ?? null)
+        )"
+        x-init="init()"
+>
     <input
             type="hidden"
             x-ref="filter.{{ $column->getModelField() }}.from"
@@ -23,54 +34,3 @@
     >
     <input x-ref="datePicker" type="text" class="{{ $theme->getFilterDateClass() }}">
 </div>
-
-<script src="https://npmcdn.com/flatpickr/dist/l10n/{{ config('laragrid.locale') }}.js" defer></script>
-
-<script>
-  function LGDatePicker() {
-    return {
-      dataField: @js($column->getModelField()),
-      element: null,
-
-      init() {
-        window.addEventListener(`LGdatePickerClear`, () => {
-          if (this.$refs.datePicker && this.element) {
-            this.element.clear()
-          }
-        })
-
-        if (this.$refs && this.$refs.datePicker) {
-          this.element = flatpickr(this.$refs.datePicker, this.getOptions());
-        }
-      },
-
-      getOptions() {
-        let defaultFrom = @this.get('filter.{{ $column->getModelField() }}.from');
-        let defaultTo = @this.get('filter.{{ $column->getModelField() }}.to');
-
-        return {
-          mode: 'range',
-          defaultHour: 0,
-          defaultDate: [defaultFrom, defaultTo],
-          dateFormat: @js(config('laragrid.date_format')),
-          locale: @js(config('laragrid.locale')),
-          onClose: function (selectedDates) {
-            if (selectedDates.length === 2) {
-              let from = moment(selectedDates[0]).format('{{ config('laragrid.js_date_format') }}');
-              let to = moment(selectedDates[1]).format('{{ config('laragrid.js_date_format') }}');
-
-              let elementFrom = document.querySelector(`input[name="filter.{{ $column->getModelField() }}.from"]`);
-              let elementTo = document.querySelector(`input[name="filter.{{ $column->getModelField() }}.to"]`);
-
-              elementFrom.value = from;
-              elementTo.value = to;
-
-              elementFrom.dispatchEvent(new Event('input'));
-              elementTo.dispatchEvent(new Event('input'));
-            }
-          }
-        };
-      }
-    }
-  }
-</script>
diff --git a/resources/views/grid.blade.php b/resources/views/grid.blade.php
@@ -14,6 +14,10 @@
     */
 @endphp
 
+@assets
+    <link href="{{ asset('vendor/laragrid/css/flatpickr.min.css') }}" rel="stylesheet"/>
+@endassets
+
 <div>
     <table class="{{ $theme->getTableClass() }}">
         <div wire:ignore.self>
@@ -90,3 +94,8 @@
         {{ $records->links() }}
     </div>
 </div>
+
+<script src="{{ asset('vendor/laragrid/js/flatpickr.min.js') }}"></script>
+<script src="{{ asset('vendor/laragrid/js/dayjs.min.js') }}"></script>
+<script src="https://npmcdn.com/flatpickr/dist/l10n/{{ config('laragrid.flatpickr.locale') }}.js"></script>
+<script src="{{ asset('vendor/laragrid/js/date-picker.js') }}"></script>
diff --git a/src/Config/laragrid.php b/src/Config/laragrid.php
@@ -1,13 +1,33 @@
 <?php
 
+declare(strict_types=1);
+
+/**
+ * Here you can override default config for LaraGrid
+ */
 return [
-    'locale' => 'en',
+    'flatpickr' => [
+        /**
+         * You can override default flatpickr locale here
+         */
+        'locale' => 'en',
 
-    /**
-     * Both options must use same format!!!
-     * JS format is used for wire model input and url params
-     * Date format is used for displaying date in table
-     */
-    'date_format' => 'Y-m-d',
-    'js_date_format' => 'Y-MM-DD',
+        /**
+         * Both options must use same output format!!!
+         * Example: If you want d.m.Y, you must also specify js_date_format DD.MM.YYYY. Otherwise, you will get wrong dates.
+         * I don't know why, but it is like that. If you know why, please let me know, or create PR.
+         *
+         * JS format is used for wire model input and url params.
+         * It must be in format that is supported by daysjs library (https://day.js.org/docs/en/display/format)
+         *
+         * Tested formats:
+         * YYYY-MM-DD, DD-MM-YYYY,
+         * DD.MM.YYYY, YYYY.MM.DD,
+         * DD/MM/YYYY, YYYY/MM/DD,
+         *
+         * Date format is used for displaying date in table
+         */
+        'date_format' => 'Y-m-d',
+        'js_date_format' => 'YYYY-MM-DD',
+    ],
 ];
diff --git a/src/Providers/LaraGridServiceProvider.php b/src/Providers/LaraGridServiceProvider.php
@@ -20,12 +20,16 @@ public function boot(): void
             __DIR__ . '/../Config/laragrid.php' => config_path('laragrid.php'),
         ], 'laragrid-config');
 
+        $this->publishes([
+            __DIR__ . '/../../resources/assets' => public_path('vendor/laragrid'),
+        ], 'laragrid-assets');
+
         $this->publishes([
             __DIR__ . '/../Lang' => $this->app->langPath('vendor/laragrid'),
         ], 'laragrid-lang');
 
         $this->publishes([
-            __DIR__ . '/../../resources/Views' => resource_path('views/vendor/courier'),
+            __DIR__ . '/../../resources/views' => resource_path('views/vendor/laragrid'),
         ], 'laragrid-views');
 
         Builder::macro('whereLike', function ($attributes, $searchTerm) {

diff --git a/src/Traits/HasDateFormatter.php b/src/Traits/HasDateFormatter.php
@@ -9,7 +9,7 @@ trait HasDateFormatter
 
     public function bootHasDateFormatter(): void
     {
-        $this->dateFormat = config('laragrid.date_format', $this->dateFormat);
+        $this->dateFormat = config('laragrid.flatpickr.date_format', $this->dateFormat);
     }
 
     public function getDateFormat(): string