From 5da311241c6e755cdb8aa56792ec871fe69e9045 Mon Sep 17 00:00:00 2001 From: Dan Harrin Date: Sat, 6 Mar 2021 09:01:43 +0000 Subject: [PATCH 1/3] Remove extra $watch brackets --- .../components/date-time-picker.blade.php | 28 +++++++++---------- .../views/components/file-upload.blade.php | 4 +-- .../views/components/multi-select.blade.php | 8 +++--- .../views/components/select.blade.php | 8 +++--- .../views/components/tags-input.blade.php | 8 +++--- packages/forms/src/HasForm.php | 2 -- 6 files changed, 28 insertions(+), 30 deletions(-) diff --git a/packages/forms/resources/views/components/date-time-picker.blade.php b/packages/forms/resources/views/components/date-time-picker.blade.php index e476a3e8dc1..48e3cc02014 100644 --- a/packages/forms/resources/views/components/date-time-picker.blade.php +++ b/packages/forms/resources/views/components/date-time-picker.blade.php @@ -161,23 +161,23 @@ function dateTimePicker(config) { if (this.autofocus) this.openPicker() - this.$watch('focusedMonth', (() => { + this.$watch('focusedMonth', () => { this.focusedMonth = +this.focusedMonth if (this.focusedDate.month() === this.focusedMonth) return this.focusedDate = this.focusedDate.set('month', this.focusedMonth) - })) + }) - this.$watch('focusedYear', (() => { + this.$watch('focusedYear', () => { this.focusedYear = Number.isInteger(+this.focusedYear) ? +this.focusedYear : dayjs().year() if (this.focusedDate.year() === this.focusedYear) return this.focusedDate = this.focusedDate.set('year', this.focusedYear) - })) + }) - this.$watch('focusedDate', (() => { + this.$watch('focusedDate', () => { this.focusedMonth = this.focusedDate.month() this.focusedYear = this.focusedDate.year() @@ -186,9 +186,9 @@ function dateTimePicker(config) { this.$nextTick(() => { this.evaluatePosition() }) - })) + }) - this.$watch('hour', (() => { + this.$watch('hour', () => { this.hour = Number.isInteger(+this.hour) && this.hour >= 0 && this.hour < 24 ? +this.hour : dayjs().hour() let date = this.getSelectedDate() @@ -196,9 +196,9 @@ function dateTimePicker(config) { if (date === null) return this.setValue(date.set('hour', this.hour)) - })) + }) - this.$watch('minute', (() => { + this.$watch('minute', () => { this.minute = Number.isInteger(+this.minute) && this.minute >= 0 && this.minute < 60 ? +this.minute : dayjs().minute() let date = this.getSelectedDate() @@ -206,9 +206,9 @@ function dateTimePicker(config) { if (date === null) return this.setValue(date.set('minute', this.minute)) - })) + }) - this.$watch('second', (() => { + this.$watch('second', () => { this.second = Number.isInteger(+this.second) && this.second >= 0 && this.second < 60 ? +this.second : dayjs().second() let date = this.getSelectedDate() @@ -216,9 +216,9 @@ function dateTimePicker(config) { if (date === null) return this.setValue(date.set('second', this.second)) - })) + }) - this.$watch('value', (() => { + this.$watch('value', () => { let date = this.getSelectedDate() ?? dayjs() if (this.maxDate !== null && date.isAfter(this.maxDate)) date = this.required ? this.maxDate : null @@ -231,7 +231,7 @@ function dateTimePicker(config) { if (this.required && ! this.getSelectedDate()) this.setValue(date) this.setDisplayValue() - })) + }) }, openPicker: function () { diff --git a/packages/forms/resources/views/components/file-upload.blade.php b/packages/forms/resources/views/components/file-upload.blade.php index ac0c36e34e4..7639cd74f7f 100644 --- a/packages/forms/resources/views/components/file-upload.blade.php +++ b/packages/forms/resources/views/components/file-upload.blade.php @@ -123,7 +123,7 @@ pond = FilePond.create($refs.input, config) }) - $watch('value', (() => { + $watch('value', () => { $wire.getUploadedFileUrl('{{ $formComponent->name }}', '{{ $formComponent->disk }}').then((uploadedFileUrl) => { if (uploadedFileUrl) { pond.files = [{ @@ -136,7 +136,7 @@ pond.files = [] } }) - })) + }) " wire:ignore {!! Filament\format_attributes($formComponent->extraAttributes) !!} diff --git a/packages/forms/resources/views/components/multi-select.blade.php b/packages/forms/resources/views/components/multi-select.blade.php index 898d7e6195b..883ccf0436d 100644 --- a/packages/forms/resources/views/components/multi-select.blade.php +++ b/packages/forms/resources/views/components/multi-select.blade.php @@ -93,7 +93,7 @@ function multiSelect(config) { if (this.autofocus) this.openListbox() - this.$watch('search', (() => { + this.$watch('search', () => { if (! this.open || this.search === '' || this.search === null) { this.setOptions() this.focusedOptionIndex = 0 @@ -113,13 +113,13 @@ function multiSelect(config) { } this.focusedOptionIndex = 0 - })) + }) - this.$watch('value', (() => { + this.$watch('value', () => { if (this.value) return this.value = [] - })) + }) }, openListbox: function () { diff --git a/packages/forms/resources/views/components/select.blade.php b/packages/forms/resources/views/components/select.blade.php index d0937599d13..b508dfc5442 100644 --- a/packages/forms/resources/views/components/select.blade.php +++ b/packages/forms/resources/views/components/select.blade.php @@ -116,7 +116,7 @@ function select(config) { if (this.autofocus) this.openListbox() - this.$watch('search', (() => { + this.$watch('search', () => { if (! this.open || this.search === '' || this.search === null) { this.options = this.initialOptions this.focusedOptionIndex = 0 @@ -131,9 +131,9 @@ function select(config) { this.focusedOptionIndex = 0 this.loading = false }) - })) + }) - this.$watch('value', (() => { + this.$watch('value', () => { if (this.value in this.options) { this.displayValue = this.options[this.value] } else { @@ -149,7 +149,7 @@ function select(config) { this.loading = false }) } - })) + }) }, openListbox: function () { diff --git a/packages/forms/resources/views/components/tags-input.blade.php b/packages/forms/resources/views/components/tags-input.blade.php index 94f1b0e4459..8f42eef86c6 100644 --- a/packages/forms/resources/views/components/tags-input.blade.php +++ b/packages/forms/resources/views/components/tags-input.blade.php @@ -35,11 +35,11 @@ function tagsInput(config) { this.$watch('newTag', () => this.hasError = false) - this.$watch('tags', (() => { + this.$watch('tags', () => { this.value = this.tags.join(this.separator) - })) + }) - this.$watch('value', (() => { + this.$watch('value', () => { try { let expectedTags = this.value.trim().split(this.separator).filter(tag => tag !== '') @@ -52,7 +52,7 @@ function tagsInput(config) { } catch (error) { this.tags = [] } - })) + }) }, } } diff --git a/packages/forms/src/HasForm.php b/packages/forms/src/HasForm.php index 30704951d4f..5862219aa25 100644 --- a/packages/forms/src/HasForm.php +++ b/packages/forms/src/HasForm.php @@ -62,8 +62,6 @@ public function getSelectFieldDisplayValue($fieldName, $value) ->first(fn ($field) => $field instanceof Select && $field->name === $fieldName); if (! $field) return []; - - return $field->getDisplayValue($value); } public function getUploadedFileUrl($name, $disk) From 8ce4429209ecccaf381adf6983b2b7894f107619 Mon Sep 17 00:00:00 2001 From: Dan Harrin Date: Sat, 6 Mar 2021 09:43:42 +0000 Subject: [PATCH 2/3] Reduce unnessecary calls --- .../views/components/select.blade.php | 63 +++++++------------ packages/forms/src/HasForm.php | 8 --- 2 files changed, 23 insertions(+), 48 deletions(-) diff --git a/packages/forms/resources/views/components/select.blade.php b/packages/forms/resources/views/components/select.blade.php index b508dfc5442..d92ea720d13 100644 --- a/packages/forms/resources/views/components/select.blade.php +++ b/packages/forms/resources/views/components/select.blade.php @@ -4,14 +4,12 @@ function select(config) { return { autofocus: config.autofocus, - displayValue: null, + displayValue: config.initialDisplayValue, emptyOptionsMessage: config.emptyOptionsMessage, focusedOptionIndex: null, - initialOptions: config.initialOptions, - loading: false, name: config.name, @@ -20,7 +18,7 @@ function select(config) { open: false, - options: {}, + options: config.initialOptions, required: config.required, @@ -96,58 +94,42 @@ function select(config) { }, init: function () { - this.options = this.initialOptions - - if (this.value in this.options) { - this.displayValue = this.options[this.value] - } else { - this.loading = true; - - this.$wire.getSelectFieldDisplayValue(this.name, this.value).then((displayValue) => { - this.displayValue = displayValue - - if (this.displayValue === null) { - this.value = null - } - - this.loading = false - }) - } - if (this.autofocus) this.openListbox() this.$watch('search', () => { if (! this.open || this.search === '' || this.search === null) { - this.options = this.initialOptions + this.options = config.initialOptions this.focusedOptionIndex = 0 return } - this.loading = true + if (Object.keys(config.initialOptions).length) { + this.options = {} + + for (let key in config.initialOptions) { + if (config.initialOptions[key].trim().toLowerCase().includes(this.search.trim().toLowerCase())) { + this.options[key] = config.initialOptions[key] + } + } - this.$wire.getSelectFieldOptionSearchResults(this.name, this.search).then((options) => { - this.options = options this.focusedOptionIndex = 0 - this.loading = false - }) + } else { + this.loading = true + + this.$wire.getSelectFieldOptionSearchResults(this.name, this.search).then((options) => { + this.options = options + this.focusedOptionIndex = 0 + this.loading = false + }) + } }) this.$watch('value', () => { if (this.value in this.options) { this.displayValue = this.options[this.value] } else { - this.loading = true; - - this.$wire.getSelectFieldDisplayValue(this.name, this.value).then((displayValue) => { - this.displayValue = displayValue - - if (this.displayValue === null) { - this.value = null - } - - this.loading = false - }) + this.clearValue() } }) }, @@ -210,12 +192,13 @@ function select(config) { x-data="select({ autofocus: {{ $formComponent->autofocus ? 'true' : 'false' }}, emptyOptionsMessage: '{{ __($formComponent->emptyOptionsMessage) }}', + initialDisplayValue: {{ data_get($this, $formComponent->name) !== null ? '\'' . $formComponent->getDisplayValue(data_get($this, $formComponent->name)) . '\'' : 'null' }}, initialOptions: {{ json_encode($formComponent->options) }}, name: '{{ $formComponent->name }}', noSearchResultsMessage: '{{ __($formComponent->noSearchResultsMessage) }}', required: {{ $formComponent->required ? 'true' : 'false' }}, @if (Str::of($formComponent->nameAttribute)->startsWith('wire:model')) - value: @entangle($formComponent->name){{ Str::of($formComponent->nameAttribute)->after('wire:model') }}, + value: @entangle($formComponent->name){{ Str::of($formComponent->nameAttribute)->after('wire:model') }}, @endif })" x-init="init()" diff --git a/packages/forms/src/HasForm.php b/packages/forms/src/HasForm.php index 5862219aa25..86cef938ef7 100644 --- a/packages/forms/src/HasForm.php +++ b/packages/forms/src/HasForm.php @@ -56,14 +56,6 @@ public function getTemporaryUploadedFile($name) ); } - public function getSelectFieldDisplayValue($fieldName, $value) - { - $field = collect($this->getForm()->getFlatSchema()) - ->first(fn ($field) => $field instanceof Select && $field->name === $fieldName); - - if (! $field) return []; - } - public function getUploadedFileUrl($name, $disk) { $path = $this->getPropertyValue($name); From 2a0ec56b00805fdbfb1bd1ed03962901d276a0f8 Mon Sep 17 00:00:00 2001 From: Dan Harrin Date: Sat, 6 Mar 2021 09:54:16 +0000 Subject: [PATCH 3/3] Clean up --- packages/forms/resources/views/components/select.blade.php | 4 +++- src/Resources/RelationManager/AttachRecord.php | 3 +-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/forms/resources/views/components/select.blade.php b/packages/forms/resources/views/components/select.blade.php index d92ea720d13..c273d07bee5 100644 --- a/packages/forms/resources/views/components/select.blade.php +++ b/packages/forms/resources/views/components/select.blade.php @@ -107,8 +107,10 @@ function select(config) { if (Object.keys(config.initialOptions).length) { this.options = {} + let search = this.search.trim().toLowerCase() + for (let key in config.initialOptions) { - if (config.initialOptions[key].trim().toLowerCase().includes(this.search.trim().toLowerCase())) { + if (config.initialOptions[key].trim().toLowerCase().includes(search)) { this.options[key] = config.initialOptions[key] } } diff --git a/src/Resources/RelationManager/AttachRecord.php b/src/Resources/RelationManager/AttachRecord.php index afbbfcfafb1..19641d13ea4 100644 --- a/src/Resources/RelationManager/AttachRecord.php +++ b/src/Resources/RelationManager/AttachRecord.php @@ -80,8 +80,7 @@ public function getForm() ->schema([ Select::make('related') ->label((string) Str::of($this->getRelationship())->singular()->ucfirst()) - ->placeholder(__('forms::fields.select.emptyOptionsMessage')) - ->getDisplayValueUsing(fn ($value) => $value) + ->placeholder('filament::resources/relation-manager.modals.attach.form.related.placeholder') ->getOptionSearchResultsUsing(function ($search) { $relationship = $this->owner->{$this->getRelationship()}();