Filament•16mo ago

Help to create a custom fields (comments)

Hi ! Is there someone here who could help me to create a custom fields list and add comments ? I followed the docs but can't make it work 😦

7 Replies

BenjaminOP•16mo ago

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;
use Modules\Comments\Comment;

class Comments extends Field
{
    protected string $view = 'filament.forms.components.comments';

    public $message;

    public function addComment()
    {
        $comment = Comment::create([
            'user_id' => auth()->user()->id,
            'channel_id' => 1,
            'message' => $this->message
        ])->save();

        $this->message = '';
    }
}

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;
use Modules\Comments\Comment;

class Comments extends Field
{
    protected string $view = 'filament.forms.components.comments';

    public $message;

    public function addComment()
    {
        $comment = Comment::create([
            'user_id' => auth()->user()->id,
            'channel_id' => 1,
            'message' => $this->message
        ])->save();

        $this->message = '';
    }
}

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :id="$getId()"
    :label="$getLabel()"
    :label-sr-only="$isLabelHidden()"
    :helper-text="$getHelperText()"
    :hint="$getHint()"
    :hint-action="$getHintAction()"
    :hint-color="$getHintColor()"
    :hint-icon="$getHintIcon()"
    :required="$isRequired()"
    :state-path="$getStatePath()"
>
    <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer }">
        <!-- Interact with the `state` property in Alpine.js -->

        <div class="flex">
            <input id="message"  type="text" name="message"
                wire:model="message" wire:keydown.enter="addComment()"/>
            <button wire:click="addComment()">Add</button>
        </div>

    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :id="$getId()"
    :label="$getLabel()"
    :label-sr-only="$isLabelHidden()"
    :helper-text="$getHelperText()"
    :hint="$getHint()"
    :hint-action="$getHintAction()"
    :hint-color="$getHintColor()"
    :hint-icon="$getHintIcon()"
    :required="$isRequired()"
    :state-path="$getStatePath()"
>
    <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer }">
        <!-- Interact with the `state` property in Alpine.js -->

        <div class="flex">
            <input id="message"  type="text" name="message"
                wire:model="message" wire:keydown.enter="addComment()"/>
            <button wire:click="addComment()">Add</button>
        </div>

    </div>
</x-dynamic-component>

toeknee•16mo ago

Does your model allow saving? i.e. is message in fillable? I would dd($comment) inside your addComment function.

BenjaminOP•16mo ago

Yep fields are fillable. The wire:model seems not to work, and if I click "Add", I have an error "Unable to call component method. Public method [addComment] not found on component: [app.filament.resources.missions-resource.pages.edit-missions]"

BenjaminOP•16mo ago

It seems to call page method and not field method 🤔

toeknee•16mo ago

I have a feeling it is because you are entangling it into the parent's statePath. But you don't want to do that as you want to add it based on an action Why are you using a customfield? Why not just use a relationship to render the comments?

BenjaminOP•16mo ago

I just want to make a custom layout to display them (like the date + image on the side + comment) I don't know if it's a good idea. Maybe it's more simple to use a Repeater or a RelationManager and customize it, I don't know 😦

toeknee•16mo ago

I would use a relationship and have the comments below the edit page in the relationship doing exactly as you want them a column for the Date, Image and message

Gaming

Programming

Help to create a custom fields (comments)