Skip to content

Commit

Permalink
Merge pull request #97 from laravel-filament/fix/reduce-select-livewi…
Browse files Browse the repository at this point in the history 
…re-dependence

Reduce select component dependence on Livewire
  • Loading branch information
@danharrin
danharrin authored Mar 6, 2021
2 parents 688df55 + 2a0ec56 commit 1e4e71f
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 80 deletions.
28 changes: 14 additions & 14 deletions packages/forms/resources/views/components/date-time-picker.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -186,39 +186,39 @@ 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()
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()
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()
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
Expand All @@ -231,7 +231,7 @@ function dateTimePicker(config) {
if (this.required && ! this.getSelectedDate()) this.setValue(date)
this.setDisplayValue()
}))
})
},
openPicker: function () {
Expand Down
4 changes: 2 additions & 2 deletions packages/forms/resources/views/components/file-upload.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [{
Expand All @@ -136,7 +136,7 @@
pond.files = []
}
})
}))
})
"
wire:ignore
{!! Filament\format_attributes($formComponent->extraAttributes) !!}
Expand Down
8 changes: 4 additions & 4 deletions packages/forms/resources/views/components/multi-select.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -113,13 +113,13 @@ function multiSelect(config) {
}
this.focusedOptionIndex = 0
}))
})
this.$watch('value', (() => {
this.$watch('value', () => {
if (this.value) return
this.value = []
}))
})
},
openListbox: function () {
Expand Down
73 changes: 29 additions & 44 deletions packages/forms/resources/views/components/select.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -20,7 +18,7 @@ function select(config) {
open: false,
options: {},
options: config.initialOptions,
required: config.required,
Expand Down Expand Up @@ -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 () {
Expand Down Expand Up @@ -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()"
Expand Down
8 changes: 4 additions & 4 deletions packages/forms/resources/views/components/tags-input.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 !== '')
Expand All @@ -52,7 +52,7 @@ function tagsInput(config) {
} catch (error) {
this.tags = []
}
}))
})
},
}
}
Expand Down
10 changes: 0 additions & 10 deletions packages/forms/src/HasForm.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions src/Resources/RelationManager/AttachRecord.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()}();

Expand Down

0 comments on commit 1e4e71f

Please sign in to comment.