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..c273d07bee5 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,60 +94,46 @@ 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', (() => { + 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 = {} - this.$wire.getSelectFieldOptionSearchResults(this.name, this.search).then((options) => { - this.options = options - this.focusedOptionIndex = 0 - this.loading = false - }) - })) + let search = this.search.trim().toLowerCase() - 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 + for (let key in config.initialOptions) { + if (config.initialOptions[key].trim().toLowerCase().includes(search)) { + this.options[key] = config.initialOptions[key] } + } + this.focusedOptionIndex = 0 + } 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.clearValue() + } + }) }, openListbox: function () { @@ -210,12 +194,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/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..86cef938ef7 100644 --- a/packages/forms/src/HasForm.php +++ b/packages/forms/src/HasForm.php @@ -56,16 +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 []; - - return $field->getDisplayValue($value); - } - public function getUploadedFileUrl($name, $disk) { $path = $this->getPropertyValue($name); 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()}();