F
Filament•16mo ago
TimeglitchD

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! 
<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(),
            ]);
    }
No description
1 Reply
TimeglitchD
TimeglitchDOP•16mo ago
Solved it 🙂 
<div x-data="{
    shape: null,
    canvas: null,
    ctx: null,
    size: 100,
    init(){
        this.shape = {{$getRecord()->id}}
        this.canvas = $refs.colorProfilePreview
        this.ctx  = this.canvas.getContext('2d')
        this.drawCanvas()
    },
    drawCanvas(){

        this.ctx.clearRect(0,0,this.canvas.width, this.canvas.height)

        {{-- border --}}
        this.ctx.globalAlpha = 1

        this.ctx.beginPath()
        this.ctx.roundRect(3, 3,this.size-6 , this.size-6, [12])
        this.ctx.fillStyle = '#fff'
        this.ctx.fill()

        this.ctx.beginPath()
        this.ctx.roundRect(4, 4,this.size-8 , this.size-8, [11])
        this.ctx.fillStyle = '#000'
        this.ctx.fill()

        {{-- base --}}

        this.ctx.beginPath()
        this.ctx.roundRect(5, 5,this.size-10 , this.size-10, [10])
        this.ctx.fillStyle = '{{$getRecord()->baseColor->hex}}'
        this.ctx.fill()

        this.ctx.beginPath()
        this.ctx.roundRect(10, 10,this.size-20 , this.size-20 , [5])

        this.ctx.strokeStyle = '#000'
        this.ctx.globalAlpha = .3
        this.ctx.stroke()
        this.ctx.globalAlpha = 1

        {{-- sticker --}}

        this.ctx.fillStyle = '{{$getRecord()->stickerColor->hex}}'
        this.ctx.fill()

        this.ctx.fillStyle = '{{$getRecord()->defaultColor->hex}}'
        this.ctx.font = '20px sans-serif'
        this.ctx.textBaseline = 'top'
        this.ctx.textAlign = 'center'
        this.ctx.fillText('text', 50, 20, 80)

        {{-- arrow --}}

        this.ctx.fillStyle = '{{$getRecord()->imageColor->hex}}'

        this.ctx.beginPath()
        this.ctx.moveTo(25, 65)
        this.ctx.lineTo(40, 80)
        this.ctx.lineTo(40, 50)
        this.ctx.fill()
        this.ctx.fillRect(40, 60 ,30 , 10)


    }
}" x-init="drawCanvas">
    <canvas x-ref="colorProfilePreview" width="100" height="100"></canvas>
</div>
<div x-data="{
    shape: null,
    canvas: null,
    ctx: null,
    size: 100,
    init(){
        this.shape = {{$getRecord()->id}}
        this.canvas = $refs.colorProfilePreview
        this.ctx  = this.canvas.getContext('2d')
        this.drawCanvas()
    },
    drawCanvas(){

        this.ctx.clearRect(0,0,this.canvas.width, this.canvas.height)

        {{-- border --}}
        this.ctx.globalAlpha = 1

        this.ctx.beginPath()
        this.ctx.roundRect(3, 3,this.size-6 , this.size-6, [12])
        this.ctx.fillStyle = '#fff'
        this.ctx.fill()

        this.ctx.beginPath()
        this.ctx.roundRect(4, 4,this.size-8 , this.size-8, [11])
        this.ctx.fillStyle = '#000'
        this.ctx.fill()

        {{-- base --}}

        this.ctx.beginPath()
        this.ctx.roundRect(5, 5,this.size-10 , this.size-10, [10])
        this.ctx.fillStyle = '{{$getRecord()->baseColor->hex}}'
        this.ctx.fill()

        this.ctx.beginPath()
        this.ctx.roundRect(10, 10,this.size-20 , this.size-20 , [5])

        this.ctx.strokeStyle = '#000'
        this.ctx.globalAlpha = .3
        this.ctx.stroke()
        this.ctx.globalAlpha = 1

        {{-- sticker --}}

        this.ctx.fillStyle = '{{$getRecord()->stickerColor->hex}}'
        this.ctx.fill()

        this.ctx.fillStyle = '{{$getRecord()->defaultColor->hex}}'
        this.ctx.font = '20px sans-serif'
        this.ctx.textBaseline = 'top'
        this.ctx.textAlign = 'center'
        this.ctx.fillText('text', 50, 20, 80)

        {{-- arrow --}}

        this.ctx.fillStyle = '{{$getRecord()->imageColor->hex}}'

        this.ctx.beginPath()
        this.ctx.moveTo(25, 65)
        this.ctx.lineTo(40, 80)
        this.ctx.lineTo(40, 50)
        this.ctx.fill()
        this.ctx.fillRect(40, 60 ,30 , 10)


    }
}" x-init="drawCanvas">
    <canvas x-ref="colorProfilePreview" width="100" height="100"></canvas>
</div>

Did you find this page helpful?