Merge pull request #2619 from brkcvn/code-clean

HTML structures development

resources/views/components/transactions/show/attachment.blade.php

@@ -1,30 +1,16 @@
 @if ($attachment)
-    <div class="border-b border-gray-200 pb-4"
-        x-data="{ attachment : null }"
-    >
-        <div class="relative w-full ltr:text-left rtl:text-right cursor-pointer group"
-            x-on:click="attachment !== 1 ? attachment = 1 : attachment = null"
-        >
-            <span class="font-medium">
-                <x-button.hover group-hover>
-                    {{ trans_choice('general.attachments', 2) }}
-                </x-button.hover>
-            </span>
+    <x-show.accordion type="attachment">
+        <x-slot name="head">
+            <x-show.accordion.head
+                title="{{ trans_choice('general.attachments', 2) }}"
+                description="{{ trans('transactions.slider.attachments') }}"
+            />
+        </x-slot>
 
-            <div class="text-black-400 text-sm flex gap-x-1 mt-1">
-                {{ trans('transactions.slider.attachments') }}
-            </div>
-
-            <span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform" x-bind:class="attachment === 1 ? 'rotate-180' : ''">expand_more</span>
-        </div>
-
-        <div class="overflow-hidden transition-transform origin-top-left ease-linear duration-100"
-            x-ref="container1"
-            x-bind:class="attachment == 1 ? 'h-auto ' : 'scale-y-0 h-0'"
-        >
+        <x-slot name="body">
             @foreach ($attachment as $file)
                 <x-media.file :file="$file" />
             @endforeach
-        </div>
-    </div>
+        </x-slot>
+    </x-show.accordion>
 @endif

resources/views/components/transactions/show/children.blade.php

@@ -1,29 +1,15 @@
-<div class="border-b pb-4" x-data="{ children : null }">
-    <button class="relative w-full ltr:text-left rtl:text-right cursor-pointer group"
-        x-on:click="children !== 1 ? children = 1 : children = null"
-    >
-        <span class="font-medium">
-            <x-button.hover group-hover>
-                {{ trans_choice('general.transactions', 2) }}
-            </x-button.hover>
-        </span>
+<x-show.accordion type="children">
+    <x-slot name="head">
+        <x-show.accordion.head
+            title="{{ trans_choice('general.transactions', 2) }}"
+            description="{!! trans('transactions.slider.children', ['count' => $transaction->children()->count()]) !!}"
+        />
+    </x-slot>
 
-        <div class="text-black-400 text-sm flex gap-x-1 mt-1">
-            {!! trans('transactions.slider.children', ['count' => $transaction->children()->count()]) !!}
-        </div>
-
-        <span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform"
-            x-bind:class="children === 1 ? 'rotate-180' : ''"
-        >expand_more</span>
-    </button>
-
-    <div class="overflow-hidden transition-transform origin-top-left ease-linear duration-100"
-        x-ref="container1"
-        x-bind:class="children == 1 ? 'h-auto ' : 'scale-y-0 h-0'"
-    >
+    <x-slot name="body">
         @if ($transaction->children()->count())
             @foreach ($transaction->children()->get() as $child)
-                @php $url = '<a href="' . route('transactions.show', $child->id) . '" class="text-purple">' . $child->number . '</a>' @endphp
+                @php $url = '<a href="' . route('transactions.show', $child->id) . '" class="text-purple" override="class">' . $child->number . '</a>' @endphp
 
                 <div class="my-2">
                     {!! trans('recurring.child', ['url' => $url, 'date' => company_date($child->paid_at)]) !!}
@@ -32,5 +18,5 @@
         @else
             {{ trans('general.none') }}
         @endif
-    </div>
-</div>
+    </x-slot>
+</x-show.accordion>

resources/views/components/transactions/show/content.blade.php

@@ -18,7 +18,7 @@
                 @php
                     $recurring_message = trans('recurring.message_parent', [
                         'type' => mb_strtolower(trans_choice($textRecurringType, 1)),
-                        'link' => '<a href="' . route(config('type.transaction.' . $transaction->parent->type . '.route.prefix') . '.show', $parent->id) . '"><u>' . $parent->number . '</u></a>'
+                        'link' => '<a href="' . route(config('type.transaction.' . $transaction->parent->type . '.route.prefix') . '.show', $parent->id) . '" override="class"><u>' . $parent->number . '</u></a>'
                     ]);
                 @endphp
 

resources/views/components/transactions/show/create.blade.php

@@ -1,14 +1,10 @@
 @php $created_date = '<span class="font-medium">' . company_date($transaction->created_at) . '</span>' @endphp
 
-<div class="border-b pb-4" x-data="{ create : null }">
-    <button class="relative w-full ltr:text-left rtl:text-right group"
-        x-on:click="create !== 1 ? create = 1 : create = null"
-    >
-        <span class="font-medium">
-            <x-button.hover>
-                {{ trans('general.create') }}
-            </x-button.hover>
-        </span>
+<x-show.accordion type="create">
+    <x-slot name="head">
+        <x-show.accordion.head
+            title="{{ trans('general.create') }}"
+        />
 
         <div class="text-black-400 text-sm flex gap-x-1 mt-1">
             @if ($transaction->isRecurringTransaction())
@@ -17,6 +13,7 @@
                 {!! trans('transactions.slider.create', ['user' => $transaction->owner->name, 'date' => $created_date]) !!}
             @endif
         </div>
+    </x-slot>
 
         <span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform" x-bind:class="create === 1 ? 'rotate-180' : ''">expand_more</span>
     </button>
@@ -27,10 +24,10 @@
     >
         @if ($transaction->isNotTransferTransaction())
             <div class="flex my-3 space-x-2 rtl:space-x-reverse">
-                <a href="{{ route($routeButtonEdit, [$transaction->id, 'type' => $transaction->type]) }}" id="show-slider-actions-edit-{{ $transaction->type }}" class="px-3 py-1.5 mb-3 sm:mb-0 bg-gray-100 hover:bg-gray-200 rounded-xl text-purple text-xs font-bold leading-6">
+                <x-link href="{{ route($routeButtonEdit, [$transaction->id, 'type' => $transaction->type]) }}" id="show-slider-actions-edit-{{ $transaction->type }}" class="px-3 py-1.5 mb-3 sm:mb-0 bg-gray-100 hover:bg-gray-200 rounded-xl text-purple text-xs font-bold leading-6">
                     {{ trans('general.edit') }}
-                </a>
+                </x-link>
             </div>
         @endif
-    </div>
-</div>
+    </x-slot>
+</x-show.accordion>

resources/views/components/transactions/show/schedule.blade.php

@@ -3,27 +3,15 @@
     $frequency = Str::lower(trans('recurring.' . str_replace('ly', 's', $transaction->recurring->frequency)));
 @endphp
 
-<div class="border-b pb-4" x-data="{ schedule : null }">
-    <button class="relative w-full ltr:text-left rtl:text-right cursor-pointer group"
-        x-on:click="schedule !== 1 ? schedule = 1 : schedule = null"
-    >
-        <span class="font-medium">
-            <x-button.hover group-hover>
-                {{ trans_choice('general.schedules', 1) }}
-            </x-button.hover>
-        </span>
+<x-show.accordion type="schedule">
+    <x-slot name="head">
+        <x-show.accordion.head
+            title="{{ trans_choice('general.schedules', 1) }}"
+            description="{!! trans('transactions.slider.schedule', ['frequency' => $frequency, 'interval' => $transaction->recurring->interval, 'date' => $started_date]) !!}"
+        />
+    </x-slot>
 
-        <div class="text-black-400 text-sm flex gap-x-1 mt-1">
-            {!! trans('transactions.slider.schedule', ['frequency' => $frequency, 'interval' => $transaction->recurring->interval, 'date' => $started_date]) !!}
-        </div>
-
-        <span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform" x-bind:class="schedule === 1 ? 'rotate-180' : ''">expand_more</span>
-    </button>
-
-    <div class="overflow-hidden transition-transform origin-top-left ease-linear duration-100"
-        x-ref="container1"
-        x-bind:class="schedule == 1 ? 'h-auto ' : 'scale-y-0 h-0'"
-    >
+    <x-slot name="body">
         <div class="flex my-3 space-x-2 rtl:space-x-reverse">
             @if ($next = $transaction->recurring->getNextRecurring())
                 {{ trans('recurring.next_date', ['date' => $next->format(company_date_format())]) }}
@@ -41,5 +29,5 @@
                 {{ trans('documents.statuses.ended') }}
             @endif
         </div>
-    </div>
-</div>
+    </x-slot>
+</x-show.accordion>

resources/views/components/transactions/show/transfer.blade.php

@@ -5,46 +5,37 @@
         @php
             $from_account = '<span class="font-medium">' . $transfer->expense_account->title . '</span>';
             $to_account = '<span class="font-medium">' . $transfer->income_account->title . '</span>';
-            $date = '<a href="' . route('transfers.show', $transfer->id) . '" class="text-purple">' . company_date($transaction->paid_at) . '</a>';
+            $date = '<a href="' . route('transfers.show', $transfer->id) . '" class="text-purple" override="class">' . company_date($transaction->paid_at) . '</a>';
         @endphp
     @endif
 
-    <div class="border-b pb-4" x-data="{ transfer : 1 }">
-        <button class="relative w-full ltr:text-left rtl:text-right cursor-pointer group"
-            x-on:click="transfer !== 1 ? transfer = 1 : transfer = null"
-        >
-            <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-                {{ trans_choice('general.transfers', 1) }}
-            </span>
-
+    <x-show.accordion type="transfer" open>
+        <x-slot name="head">
+            <x-show.accordion.head
+                title="{{ trans_choice('general.transfers', 1) }}"
+            />
+            
             @if ($transfer)
                 <div class="text-black-400 text-sm flex gap-x-1 mt-1">
                     {!! trans('transactions.slider.transfer_headline', ['from_account' => $from_account, 'to_account' => $to_account]) !!}
                 </div>
             @endif
+        </x-slot>
 
-            <span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform"
-                x-bind:class="transfer === 1 ? 'rotate-180' : ''"
-            >expand_more</span>
-        </button>
-
-        <div class="overflow-hidden transition-transform origin-top-left ease-linear duration-100"
-            x-ref="container1"
-            x-bind:class="transfer === 1 ? 'h-auto' : 'scale-y-0 h-0'"
-        >
+        <x-slot name="body">
             @if ($transfer)
-                <div class="my-2">
-                    {!! trans('transactions.slider.transfer_desc', ['date' => $date]) !!}
-                </div>
-            @else
-                <div class="mt-2">
-                    <div class="alert alert-notify p-4 font-bold rounded-lg bg-orange-100 text-orange-600">
-                        <span class="alert-text">
-                            <span>{{ trans('messages.warning.missing_transfer') }}</span>
-                        </span>
+                    <div class="my-2">
+                        {!! trans('transactions.slider.transfer_desc', ['date' => $date]) !!}
+                    </div>
+                @else
+                    <div class="mt-2">
+                        <div class="alert alert-notify p-4 font-bold rounded-lg bg-orange-100 text-orange-600">
+                            <span class="alert-text">
+                                <span>{{ trans('messages.warning.missing_transfer') }}</span>
+                            </span>
+                        </div>
                     </div>
-                </div>
             @endif
-        </div>
-    </div>
+        </x-slot>
+    </x-show.accordion>
 @endif