From f22782305930377af1abaa08e4d9687847d2e98e Mon Sep 17 00:00:00 2001 From: Martin Brettschneider Date: Fri, 17 Nov 2023 20:13:30 +0100 Subject: [PATCH] feat: switch to native date inputs --- .docs/assets.md | 4 +- .docs/filters.md | 11 ----- assets/css/datagrid-full.css | 1 - assets/css/datagrid.css | 22 --------- assets/datagrids.ts | 4 +- assets/integrations/index.ts | 1 - assets/integrations/vanilla-datepicker.ts | 14 ------ assets/plugins/index.ts | 1 - assets/plugins/integrations/datepicker.ts | 17 ------- assets/types/integrations.d.ts | 4 -- package.json | 2 - src/Filter/FilterDate.php | 31 ++---------- src/Filter/FilterDateRange.php | 37 ++------------ src/Filter/IFilterDate.php | 10 ---- src/templates/datagrid_filter_date.latte | 28 ----------- src/templates/datagrid_filter_daterange.latte | 48 ------------------- 16 files changed, 9 insertions(+), 226 deletions(-) delete mode 100644 assets/integrations/vanilla-datepicker.ts delete mode 100644 assets/plugins/integrations/datepicker.ts delete mode 100644 src/templates/datagrid_filter_date.latte delete mode 100644 src/templates/datagrid_filter_daterange.latte diff --git a/.docs/assets.md b/.docs/assets.md index d51a304a..8d7edacd 100644 --- a/.docs/assets.md +++ b/.docs/assets.md @@ -38,15 +38,13 @@ Full example of using bundler. "nette-forms": "^3.3.1", "prismjs": "^1.29.0", "sortablejs": "^1.15.0", - "tom-select": "^2.2.2", - "vanillajs-datepicker": "^1.3.1" + "tom-select": "^2.2.2" }, "devDependencies": { "@types/bootstrap-select": "^1.13.4", "@types/jquery": "^3.5.16", "@types/jqueryui": "^1.12.16", "@types/sortablejs": "^1.15.1", - "@types/vanillajs-datepicker": "^1.2.1", "autoprefixer": "^10.4.0", "typescript": "^4.9.5", "vite": "^2.6.10" diff --git a/.docs/filters.md b/.docs/filters.md index c14061ff..cfc4ff12 100644 --- a/.docs/filters.md +++ b/.docs/filters.md @@ -189,17 +189,6 @@ Keep in mind that `FilterMultiSelect` uses `bootstrap-select` JS library. Read m $grid->addFilterDate('created', 'User registerd on'); ``` -This filter also has some special features. First, it shows datepicker. Second, You can set date format. Sadly, JavaScript has different date formatting modifiers, so you have to set them both at once: - -```php -/** - * This is default formatting - * $php_format, $js_format - */ -$grid->addFilterDate('created', 'User registerd on') - ->setFormat('j. n. Y', 'd. m. yyyy'); -``` - ## FilterRange This filter renders two inputs: From and To. If you want to set inputs placeholders, you have to set both in an array. diff --git a/assets/css/datagrid-full.css b/assets/css/datagrid-full.css index d42e516d..f4543bbc 100644 --- a/assets/css/datagrid-full.css +++ b/assets/css/datagrid-full.css @@ -1,4 +1,3 @@ @import "@fortawesome/fontawesome-free/css/all.css"; @import 'bootstrap/dist/css/bootstrap.css'; -@import 'vanillajs-datepicker/css/datepicker-bs5.css'; @import './datagrid.css'; diff --git a/assets/css/datagrid.css b/assets/css/datagrid.css index bb51f73f..21772b30 100644 --- a/assets/css/datagrid.css +++ b/assets/css/datagrid.css @@ -197,28 +197,6 @@ display: none !important } -[data-datagrid-name] .datagrid-col-filter-date-range { - width: auto; - position: relative; - display: flex; - flex-wrap: wrap; - align-items: stretch; -} - -[data-datagrid-name] .datagrid-col-filter-date-range > .input-group { - position: relative; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - width: 1%; - margin-bottom: 0; -} - -[data-datagrid-name] .datagrid-col-filter-datte-range-delimiter { - background-color: inherit; - border: none; - padding: .25rem .5rem -} - [data-datagrid-name] table thead tr th .datagrid-col-filter-range .form-control { -webkit-border-radius: 3px; -moz-border-radius: 3px; diff --git a/assets/datagrids.ts b/assets/datagrids.ts index fef2503f..f442b22e 100644 --- a/assets/datagrids.ts +++ b/assets/datagrids.ts @@ -11,8 +11,7 @@ import { } from "./plugins"; import { Ajax, DatagridsOptions } from "./types"; import { SortableJS } from "./integrations/sortable-js"; -import { DatepickerPlugin } from "./plugins/integrations/datepicker"; -import { BootstrapSelect, Happy, VanillaDatepicker } from "./integrations"; +import { BootstrapSelect, Happy } from "./integrations"; export class Datagrids { private datagrids: Datagrid[] = []; @@ -71,7 +70,6 @@ export const createFullDatagrids = (ajax: Ajax, _options: Partial DatepickerOptions) = {}) { - } - - - initDatepickers(elements: HTMLInputElement[]): void { - elements.forEach((element) => new Datepicker(element, typeof this.opts === "function" ? this.opts(element) : this.opts)); - } - -} diff --git a/assets/plugins/index.ts b/assets/plugins/index.ts index 99b83aed..71216cc8 100644 --- a/assets/plugins/index.ts +++ b/assets/plugins/index.ts @@ -1,4 +1,3 @@ -export * from "./integrations/datepicker"; export * from "./integrations/happy"; export * from "./integrations/nette-forms" export * from "./integrations/selectpicker"; diff --git a/assets/plugins/integrations/datepicker.ts b/assets/plugins/integrations/datepicker.ts deleted file mode 100644 index 5ba14ac3..00000000 --- a/assets/plugins/integrations/datepicker.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Datagrid } from "../.."; -import { DatagridPlugin, Datepicker } from "../../types"; - -export class DatepickerPlugin implements DatagridPlugin { - constructor(private datepicker: Datepicker) { - } - - onDatagridInit(datagrid: Datagrid): boolean { - const elements = datagrid.el.querySelectorAll("input[data-provide='datepicker']"); - - if (elements.length >= 1) { - this.datepicker.initDatepickers(Array.from(elements), datagrid); - } - - return true; - } -} diff --git a/assets/types/integrations.d.ts b/assets/types/integrations.d.ts index 15ddbcc5..879f6ee3 100644 --- a/assets/types/integrations.d.ts +++ b/assets/types/integrations.d.ts @@ -9,7 +9,3 @@ export interface Sortable { export interface Selectpicker { initSelectpickers(elements: HTMLElement[], datagrid: Datagrid): void; } - -export interface Datepicker { - initDatepickers(elements: HTMLInputElement[], datagrid: Datagrid): void; -} diff --git a/package.json b/package.json index a1ecb226..a6420788 100644 --- a/package.json +++ b/package.json @@ -26,12 +26,10 @@ "prismjs": "^1.29.0", "sortablejs": "^1.15.0", "tom-select": "^2.2.2", - "vanillajs-datepicker": "^1.3.1", "@types/bootstrap-select": "^1.13.4", "@types/jquery": "^3.5.16", "@types/jqueryui": "^1.12.16", "@types/sortablejs": "^1.15.1", - "@types/vanillajs-datepicker": "^1.2.1", "autoprefixer": "^10.4.0", "typescript": "^4.9.5", "vite": "^2.6.10" diff --git a/src/Filter/FilterDate.php b/src/Filter/FilterDate.php index ad5cf803..2923cd7e 100644 --- a/src/Filter/FilterDate.php +++ b/src/Filter/FilterDate.php @@ -7,10 +7,7 @@ class FilterDate extends OneColumnFilter implements IFilterDate { - protected ?string $template = 'datagrid_filter_date.latte'; - - /** @var array */ - protected array $format = ['j. n. Y', 'd. m. yyyy']; + protected ?string $template = 'datagrid_filter_text.latte'; protected ?string $type = 'date'; @@ -18,11 +15,7 @@ public function addToFormContainer(Container $container): void { $control = $container->addText($this->key, $this->name); - $control->setHtmlAttribute('data-provide', 'datepicker') - ->setHtmlAttribute('data-date-orientation', 'bottom') - ->setHtmlAttribute('data-date-format', $this->getJsFormat()) - ->setHtmlAttribute('data-date-today-highlight', 'true') - ->setHtmlAttribute('data-date-autoclose', 'true'); + $control->setHtmlType('date'); $this->addAttributes($control); @@ -35,30 +28,12 @@ public function addToFormContainer(Container $container): void } } - /** - * Set format for datepicker etc - */ - public function setFormat(string $phpFormat, string $jsFormat): IFilterDate - { - $this->format = [$phpFormat, $jsFormat]; - - return $this; - } - /** * Get php format for datapicker */ public function getPhpFormat(): string { - return $this->format[0]; - } - - /** - * Get js format for datepicker - */ - public function getJsFormat(): string - { - return $this->format[1]; + return 'Y-m-d'; } } diff --git a/src/Filter/FilterDateRange.php b/src/Filter/FilterDateRange.php index 1e427431..e8e2cc1a 100644 --- a/src/Filter/FilterDateRange.php +++ b/src/Filter/FilterDateRange.php @@ -7,10 +7,7 @@ class FilterDateRange extends FilterRange implements IFilterDate { - protected ?string $template = 'datagrid_filter_daterange.latte'; - - /** @var array */ - protected array $format = ['j. n. Y', 'd. m. yyyy']; + protected ?string $template = 'datagrid_filter_range.latte'; protected ?string $type = 'date-range'; @@ -23,19 +20,11 @@ public function addToFormContainer(Container $container): void $from = $container->addText('from', $this->name); - $from->setHtmlAttribute('data-provide', 'datepicker') - ->setHtmlAttribute('data-date-orientation', 'bottom') - ->setHtmlAttribute('data-date-format', $this->getJsFormat()) - ->setHtmlAttribute('data-date-today-highlight', 'true') - ->setHtmlAttribute('data-date-autoclose', 'true'); + $from->setHtmlType('date'); $to = $container->addText('to', $this->nameSecond); - $to->setHtmlAttribute('data-provide', 'datepicker') - ->setHtmlAttribute('data-date-orientation', 'bottom') - ->setHtmlAttribute('data-date-format', $this->getJsFormat()) - ->setHtmlAttribute('data-date-today-highlight', 'true') - ->setHtmlAttribute('data-date-autoclose', 'true'); + $to->setHtmlType('date'); $this->addAttributes($from); $this->addAttributes($to); @@ -62,30 +51,12 @@ public function addToFormContainer(Container $container): void } } - /** - * Set format for datepicker etc - */ - public function setFormat(string $phpFormat, string $jsFormat): IFilterDate - { - $this->format = [$phpFormat, $jsFormat]; - - return $this; - } - /** * Get php format for datapicker */ public function getPhpFormat(): string { - return $this->format[0]; - } - - /** - * Get js format for datepicker - */ - public function getJsFormat(): string - { - return $this->format[1]; + return 'Y-m-d'; } } diff --git a/src/Filter/IFilterDate.php b/src/Filter/IFilterDate.php index 2e1534af..809ecb17 100644 --- a/src/Filter/IFilterDate.php +++ b/src/Filter/IFilterDate.php @@ -5,19 +5,9 @@ interface IFilterDate { - /** - * Set format for datepicker etc - */ - public function setFormat(string $phpFormat, string $jsFormat): IFilterDate; - /** * Get php format for datapicker */ public function getPhpFormat(): string; - /** - * Get js format for datepicker - */ - public function getJsFormat(): string; - } diff --git a/src/templates/datagrid_filter_date.latte b/src/templates/datagrid_filter_date.latte deleted file mode 100644 index ad21445b..00000000 --- a/src/templates/datagrid_filter_date.latte +++ /dev/null @@ -1,28 +0,0 @@ -{** - * @param Filter $filter - * @param Nette\Forms\Controls\TextInput $input - * @param string $iconPrefix Icon prefix (fa fa-) - *} - -{if $outer} -
- {label $input class => 'col-sm-3 control-label' /} -
-
- {input $input} - -
-
-
-{else} -
-
- {input $input} - -
-
-{/if} diff --git a/src/templates/datagrid_filter_daterange.latte b/src/templates/datagrid_filter_daterange.latte deleted file mode 100644 index b29fae89..00000000 --- a/src/templates/datagrid_filter_daterange.latte +++ /dev/null @@ -1,48 +0,0 @@ -{** - * @param Filter $filter - * @param Nette\Forms\Container $input - * @param string $iconPrefix Icon prefix (fa fa-) - *} - -{var $container = $input} - -{if $outer} -
- {label $container['from'], class => 'col-sm-3 control-label' /} -
-
- {input $container['from']} - -
-
- {label $container['to'], class => 'filter-range-delimiter col-sm-1 control-label' /} -
-
- {input $container['to']} - -
-
-
-{else} -
-
- {input $container['from']} - -
- -
-
- -
- {input $container['to']} - -
-
-{/if}