Help to create a custom fields (comments)

1benjam1 · 2023-09-04T14:49:58.795Z

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 😦

1

1benjam1OP•9/4/23, 2:51 PM

<?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 = '';
    }
}

<?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 = '';
    }
}

1

1benjam1OP•9/4/23, 2:52 PM

<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>

<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>

T

toeknee•9/4/23, 3:22 PM

Does your model allow saving?

T

toeknee•9/4/23, 3:22 PM

i.e. is message in fillable?

T

toeknee•9/4/23, 3:23 PM

I would dd($comment) inside your addComment function.

Ttoeknee Does your model allow saving?

1

1benjam1OP•9/4/23, 3:30 PM

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]"

1

1benjam1OP•9/4/23, 3:30 PM

It seems to call page method and not field method

T

toeknee•9/4/23, 3:34 PM

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

T

toeknee•9/4/23, 3:35 PM

Why are you using a customfield? Why not just use a relationship to render the comments?

1

1benjam1OP•9/4/23, 3:46 PM

I just want to make a custom layout to display them (like the date + image on the side + comment)

1

1benjam1OP•9/4/23, 3:47 PM

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

T

toeknee•9/4/23, 3:58 PM

I would use a relationship and have the comments below the edit page in the relationship doing exactly as you want them

T

toeknee•9/4/23, 3:58 PM

a column for the Date, Image and message

Help to create a custom fields (comments)

Similar Threads

Similar Threads

Similar Threads