fix: Corrections. Moved conditional code to partials. Updated error messages for attachments

Author: lisa-fehr

resources/css/commentions.css

@@ -10,6 +10,10 @@
     display: none;
 }
 
+.commentions-error {
+    @apply comm:text-red-600 comm:hover:text-red-400 comm:dark:text-red-400 comm:dark:hover:text-red-300;
+}
+
 .tiptap {
     @apply comm:text-sm comm:leading-normal;
 }

resources/dist/commentions.css

@@ -111,6 +111,12 @@ document.addEventListener('alpine:init', () => {
             isEmpty: ! content,
 
             init() {
+                if (this.$refs.element.dataset.tiptapInitialized) {
+                    return;
+                }
+
+                this.$refs.element.dataset.tiptapInitialized = true;
+
                 const _this = this
                 const targetComponent = componentAlias ?? `commentions::${component}`
 

resources/dist/commentions.js

@@ -22,7 +22,7 @@
     'comment' => 'Comentariu',
     'add_reaction' => 'Adaugă reacție',
     'attach_files' => 'Atașează fișiere',
-    'uploading' => 'Se încarcă…',
+    'uploading' => 'Se încarcă fișierele…',
     'show_more' => 'Afișează mai multe',
 
     'rating_input_label' => 'Notă',

resources/js/commentions.js

@@ -1,9 +1,12 @@
 @php
     $toolbarButtons = $this->getToolbarButtons();
-    $hasToolBar = filled($toolbarButtons);
+    $hasToolBar = is_array($toolbarButtons);
 @endphp
 
-<div class="comm:flex comm:items-start comm:gap-x-4 comm:border comm:border-gray-300 comm:dark:border-gray-700 comm:p-4 comm:rounded-lg comm:shadow-sm comm:mb-2" id="filament-comment-{{ $comment->getId() }}">
+<div
+    class="comm:flex comm:items-start comm:gap-x-4 comm:border comm:border-gray-300 comm:dark:border-gray-700 comm:p-4 comm:rounded-lg comm:shadow-sm comm:mb-2"
+    id="filament-comment-{{ $comment->getId() }}"
+>
     @if ($avatar = $comment->getAuthorAvatar())
         <img
             src="{{ $comment->getAuthorAvatar() }}"
@@ -58,7 +61,7 @@ class="comm:mt-2"
                     x-data="editor(@js($commentBody), @js($mentionables), 'comment', null, @js($hasToolBar), @js($this->getTipTapCssClasses()), @js($commentionsComponentPrefix . 'comment'), @js(['prompt' => __('commentions::comments.toolbar.link_prompt'), 'invalid' => __('commentions::comments.toolbar.link_invalid')]))"
                 >
                     @if ($this->ratingsAreEnabled())
-                        @include('commentions::partials.rating-input', ['maxRating' => $this->getMaxRating()])
+                        @include('commentions::partials.ratings.rating-input', ['maxRating' => $this->getMaxRating()])
                     @endif
                     {{-- tiptap editor --}}
                     <div @class([
@@ -90,56 +93,16 @@ class="comm:mt-2"
                 </div>
             </div>
         @else
-            @if ($comment->isComment() && $comment->rating)
-                <div
-                    class="comm:mt-1 comm:flex comm:items-center comm:gap-0.5"
-                    role="img"
-                    title="{{ $comment->rating }}/{{ $this->getMaxRating() }}"
-                    aria-label="{{ __('commentions::comments.rating_display_label', ['rating' => $comment->rating, 'max' => $this->getMaxRating()]) }}"
-                >
-                    @for ($ratingStar = 1; $ratingStar <= $this->getMaxRating(); $ratingStar++)
-                        <x-filament::icon
-                            icon="heroicon-s-star"
-                            @class([
-                                'comm:h-4 comm:w-4',
-                                'comm:text-amber-400' => $ratingStar <= $comment->rating,
-                                'comm:text-gray-300 comm:dark:text-gray-600' => $ratingStar > $comment->rating,
-                            ])
-                        />
-                    @endfor
-                </div>
-            @endif
+            @include('commentions::partials.ratings.show-comment-rating', ['comment' => $comment])
 
             <div @class([
                 'comm:mt-1 comm:space-y-6 comm:text-sm comm:text-gray-800 comm:dark:text-gray-200 commentions-comment-body comm:break-words',
                 'tip-tap-toolbar-enabled' => config('commentions.toolbar.enabled', true),
             ])>{!! $comment->getParsedBody() !!}</div>
 
-            @if ($comment->isComment() && $comment->attachments->isNotEmpty())
-                <div class="comm:mt-2 comm:flex comm:flex-wrap comm:gap-2">
-                    @foreach ($comment->attachments as $attachment)
-                        @if ($attachment->isImage())
-                            <a href="{{ $attachment->getUrl() }}" target="_blank" rel="noopener">
-                                <img
-                                    src="{{ $attachment->getUrl() }}"
-                                    alt="{{ $attachment->filename }}"
-                                    class="comm:h-20 comm:w-20 comm:rounded-lg comm:border comm:border-gray-200 comm:dark:border-gray-700 comm:object-cover"
-                                />
-                            </a>
-                        @else
-                            <a
-                                href="{{ $attachment->getUrl() }}"
-                                target="_blank"
-                                rel="noopener"
-                                class="comm:inline-flex comm:items-center comm:gap-1 comm:rounded-lg comm:border comm:border-gray-200 comm:dark:border-gray-700 comm:px-2 comm:py-1 comm:text-xs comm:text-gray-700 comm:dark:text-gray-200 comm:hover:bg-gray-100 comm:dark:hover:bg-gray-800"
-                            >
-                                <x-filament::icon icon="heroicon-s-paper-clip" class="comm:h-4 comm:w-4" />
-                                <span class="comm:max-w-[12rem] comm:truncate">{{ $attachment->filename }}</span>
-                            </a>
-                        @endif
-                    @endforeach
-                </div>
-            @endif
+            @include('commentions::partials.attachments.show-comment-attachments', [
+                'comment' => $comment,
+            ])
 
             @if ($comment->isComment())
                 <livewire:dynamic-component
@@ -151,5 +114,5 @@ class="comm:inline-flex comm:items-center comm:gap-1 comm:rounded-lg comm:border
         @endif
     </div>
 
-    <x-filament-actions::modals />
+    <x-filament-actions::modals/>
 </div>