Refresh custom column after update to model
I've got a relationship table with a custom column. It works perfectly upon initialization, but upon editing the color profile, it doesn't refresh. I'm quite new to alpinejs, what am I missing in this view? Let me know if you need to see more, thank you!
the table:
<div x-data="{
drawCanvas(){
let shape{{$getRecord()->id}} = {{$getRecord()->id}}
const canvas{{$getRecord()->id}} = document.getElementById('colorProfilePreview{{$getRecord()->id}}')
const ctx{{$getRecord()->id}} = canvas{{$getRecord()->id}}.getContext('2d')
let size{{$getRecord()->id}} = 100
{{-- border --}}
ctx{{$getRecord()->id}}.globalAlpha = 1
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.roundRect(3, 3,size{{$getRecord()->id}}-6 , size{{$getRecord()->id}}-6, [12])
ctx{{$getRecord()->id}}.fillStyle = '#fff'
ctx{{$getRecord()->id}}.fill()
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.roundRect(4, 4,size{{$getRecord()->id}}-8 , size{{$getRecord()->id}}-8, [11])
ctx{{$getRecord()->id}}.fillStyle = '#000'
ctx{{$getRecord()->id}}.fill()
{{-- base --}}
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.roundRect(5, 5,size{{$getRecord()->id}}-10 , size{{$getRecord()->id}}-10, [10])
ctx{{$getRecord()->id}}.fillStyle = '{{$getRecord()->baseColor->hex}}'
ctx{{$getRecord()->id}}.fill()
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.roundRect(10, 10,size{{$getRecord()->id}}-20 , size{{$getRecord()->id}}-20 , [5])
ctx{{$getRecord()->id}}.strokeStyle = '#000'
ctx{{$getRecord()->id}}.globalAlpha = .3
ctx{{$getRecord()->id}}.stroke()
ctx{{$getRecord()->id}}.globalAlpha = 1
{{-- sticker --}}
ctx{{$getRecord()->id}}.fillStyle = '{{$getRecord()->stickerColor->hex}}'
ctx{{$getRecord()->id}}.fill()
ctx{{$getRecord()->id}}.fillStyle = '{{$getRecord()->defaultColor->hex}}'
ctx{{$getRecord()->id}}.font = '20px sans-serif'
ctx{{$getRecord()->id}}.textBaseline = 'top'
ctx{{$getRecord()->id}}.textAlign = 'center'
ctx{{$getRecord()->id}}.fillText('text', 50, 20, 80)
{{-- arrow --}}
ctx{{$getRecord()->id}}.fillStyle = '{{$getRecord()->imageColor->hex}}'
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.moveTo(25, 65)
ctx{{$getRecord()->id}}.lineTo(40, 80)
ctx{{$getRecord()->id}}.lineTo(40, 50)
ctx{{$getRecord()->id}}.fill()
ctx{{$getRecord()->id}}.fillRect(40, 60 ,30 , 10)
}
}" x-init="drawCanvas">
<canvas width="100" height="100" id='colorProfilePreview{{$getRecord()->id}}'></canvas>
</div><div x-data="{
drawCanvas(){
let shape{{$getRecord()->id}} = {{$getRecord()->id}}
const canvas{{$getRecord()->id}} = document.getElementById('colorProfilePreview{{$getRecord()->id}}')
const ctx{{$getRecord()->id}} = canvas{{$getRecord()->id}}.getContext('2d')
let size{{$getRecord()->id}} = 100
{{-- border --}}
ctx{{$getRecord()->id}}.globalAlpha = 1
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.roundRect(3, 3,size{{$getRecord()->id}}-6 , size{{$getRecord()->id}}-6, [12])
ctx{{$getRecord()->id}}.fillStyle = '#fff'
ctx{{$getRecord()->id}}.fill()
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.roundRect(4, 4,size{{$getRecord()->id}}-8 , size{{$getRecord()->id}}-8, [11])
ctx{{$getRecord()->id}}.fillStyle = '#000'
ctx{{$getRecord()->id}}.fill()
{{-- base --}}
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.roundRect(5, 5,size{{$getRecord()->id}}-10 , size{{$getRecord()->id}}-10, [10])
ctx{{$getRecord()->id}}.fillStyle = '{{$getRecord()->baseColor->hex}}'
ctx{{$getRecord()->id}}.fill()
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.roundRect(10, 10,size{{$getRecord()->id}}-20 , size{{$getRecord()->id}}-20 , [5])
ctx{{$getRecord()->id}}.strokeStyle = '#000'
ctx{{$getRecord()->id}}.globalAlpha = .3
ctx{{$getRecord()->id}}.stroke()
ctx{{$getRecord()->id}}.globalAlpha = 1
{{-- sticker --}}
ctx{{$getRecord()->id}}.fillStyle = '{{$getRecord()->stickerColor->hex}}'
ctx{{$getRecord()->id}}.fill()
ctx{{$getRecord()->id}}.fillStyle = '{{$getRecord()->defaultColor->hex}}'
ctx{{$getRecord()->id}}.font = '20px sans-serif'
ctx{{$getRecord()->id}}.textBaseline = 'top'
ctx{{$getRecord()->id}}.textAlign = 'center'
ctx{{$getRecord()->id}}.fillText('text', 50, 20, 80)
{{-- arrow --}}
ctx{{$getRecord()->id}}.fillStyle = '{{$getRecord()->imageColor->hex}}'
ctx{{$getRecord()->id}}.beginPath()
ctx{{$getRecord()->id}}.moveTo(25, 65)
ctx{{$getRecord()->id}}.lineTo(40, 80)
ctx{{$getRecord()->id}}.lineTo(40, 50)
ctx{{$getRecord()->id}}.fill()
ctx{{$getRecord()->id}}.fillRect(40, 60 ,30 , 10)
}
}" x-init="drawCanvas">
<canvas width="100" height="100" id='colorProfilePreview{{$getRecord()->id}}'></canvas>
</div>the table:
public function table(Table $table): Table
{
return $table
->columns([
ColorProfilePreview::make('')->label(___('signeditor.color_profile_previews', 1)),
])
->filters([
//
])
->headerActions([
Tables\Actions\CreateAction::make(),
])
->actions([
Tables\Actions\EditAction::make(),
Tables\Actions\DeleteAction::make(),
])
->bulkActions([
Tables\Actions\DeleteBulkAction::make(),
]);
} public function table(Table $table): Table
{
return $table
->columns([
ColorProfilePreview::make('')->label(___('signeditor.color_profile_previews', 1)),
])
->filters([
//
])
->headerActions([
Tables\Actions\CreateAction::make(),
])
->actions([
Tables\Actions\EditAction::make(),
Tables\Actions\DeleteAction::make(),
])
->bulkActions([
Tables\Actions\DeleteBulkAction::make(),
]);
}
