static accordions convert to view component
This commit is contained in:
Burak Civan
parent
bb2c6372a0
commit
b2644776ad
@ -28,6 +28,7 @@ return [
|
|||||||
'create' => ':user created this transfer on :date',
|
'create' => ':user created this transfer on :date',
|
||||||
'transactions' => 'List of transactions related to this transfer',
|
'transactions' => 'List of transactions related to this transfer',
|
||||||
'transactions_desc' => ':number transaction for :account',
|
'transactions_desc' => ':number transaction for :account',
|
||||||
|
'attachments' => 'Download the files attached to this transfer',
|
||||||
],
|
],
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|||||||
@ -1,30 +1,16 @@
|
|||||||
@if ($attachment)
|
@if ($attachment)
|
||||||
<div class="border-b border-gray-200 pb-4"
|
<x-show.accordion type="attachment">
|
||||||
x-data="{ attachment : null }"
|
<x-slot name="head">
|
||||||
>
|
<x-show.accordion.head
|
||||||
<div class="relative w-full ltr:text-left rtl:text-right cursor-pointer group"
|
title="{{ trans_choice('general.attachments', 2) }}"
|
||||||
x-on:click="attachment !== 1 ? attachment = 1 : attachment = null"
|
description="{{ trans('transactions.slider.attachments') }}"
|
||||||
>
|
/>
|
||||||
<span class="font-medium">
|
</x-slot>
|
||||||
<x-button.hover group-hover>
|
|
||||||
{{ trans_choice('general.attachments', 2) }}
|
|
||||||
</x-button.hover>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="text-black-400 text-sm flex gap-x-1 mt-1">
|
<x-slot name="body">
|
||||||
{{ 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'"
|
|
||||||
>
|
|
||||||
@foreach ($attachment as $file)
|
@foreach ($attachment as $file)
|
||||||
<x-media.file :file="$file" />
|
<x-media.file :file="$file" />
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</x-slot>
|
||||||
</div>
|
</x-show.accordion>
|
||||||
@endif
|
@endif
|
||||||
|
|||||||
@ -1,26 +1,12 @@
|
|||||||
<div class="border-b pb-4" x-data="{ children : null }">
|
<x-show.accordion type="children">
|
||||||
<button class="relative w-full ltr:text-left rtl:text-right cursor-pointer group"
|
<x-slot name="head">
|
||||||
x-on:click="children !== 1 ? children = 1 : children = null"
|
<x-show.accordion.head
|
||||||
>
|
title="{{ trans_choice('general.transactions', 2) }}"
|
||||||
<span class="font-medium">
|
description="{!! trans('transactions.slider.children', ['count' => $transaction->children()->count()]) !!}"
|
||||||
<x-button.hover group-hover>
|
/>
|
||||||
{{ trans_choice('general.transactions', 2) }}
|
</x-slot>
|
||||||
</x-button.hover>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="text-black-400 text-sm flex gap-x-1 mt-1">
|
<x-slot name="body">
|
||||||
{!! 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'"
|
|
||||||
>
|
|
||||||
@if ($transaction->children()->count())
|
@if ($transaction->children()->count())
|
||||||
@foreach ($transaction->children()->get() as $child)
|
@foreach ($transaction->children()->get() as $child)
|
||||||
@php $url = '<x-link href="' . route('transactions.show', $child->id) . '" class="text-purple" override="class">' . $child->number . '</x-link>' @endphp
|
@php $url = '<x-link href="' . route('transactions.show', $child->id) . '" class="text-purple" override="class">' . $child->number . '</x-link>' @endphp
|
||||||
@ -32,5 +18,5 @@
|
|||||||
@else
|
@else
|
||||||
{{ trans('general.none') }}
|
{{ trans('general.none') }}
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</x-slot>
|
||||||
</div>
|
</x-show.accordion>
|
||||||
|
|||||||
@ -1,14 +1,10 @@
|
|||||||
@php $created_date = '<span class="font-medium">' . company_date($transaction->created_at) . '</span>' @endphp
|
@php $created_date = '<span class="font-medium">' . company_date($transaction->created_at) . '</span>' @endphp
|
||||||
|
|
||||||
<div class="border-b pb-4" x-data="{ create : null }">
|
<x-show.accordion type="create">
|
||||||
<button class="relative w-full ltr:text-left rtl:text-right group"
|
<x-slot name="head">
|
||||||
x-on:click="create !== 1 ? create = 1 : create = null"
|
<x-show.accordion.head
|
||||||
>
|
title="{{ trans('general.create') }}"
|
||||||
<span class="font-medium">
|
/>
|
||||||
<x-button.hover>
|
|
||||||
{{ trans('general.create') }}
|
|
||||||
</x-button.hover>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="text-black-400 text-sm flex gap-x-1 mt-1">
|
<div class="text-black-400 text-sm flex gap-x-1 mt-1">
|
||||||
@if ($transaction->isRecurringTransaction())
|
@if ($transaction->isRecurringTransaction())
|
||||||
@ -17,14 +13,9 @@
|
|||||||
{!! trans('transactions.slider.create', ['user' => $transaction->owner->name, 'date' => $created_date]) !!}
|
{!! trans('transactions.slider.create', ['user' => $transaction->owner->name, 'date' => $created_date]) !!}
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</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>
|
<x-slot name="body">
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="overflow-hidden transition-transform origin-top-left ease-linear duration-100"
|
|
||||||
x-ref="container1"
|
|
||||||
x-bind:class="create == 1 ? 'h-auto ' : 'scale-y-0 h-0'"
|
|
||||||
>
|
|
||||||
@if ($transaction->isNotTransferTransaction())
|
@if ($transaction->isNotTransferTransaction())
|
||||||
<div class="flex my-3 space-x-2 rtl:space-x-reverse">
|
<div class="flex my-3 space-x-2 rtl:space-x-reverse">
|
||||||
<x-link
|
<x-link
|
||||||
@ -36,5 +27,5 @@
|
|||||||
</x-link>
|
</x-link>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</x-slot>
|
||||||
</div>
|
</x-show.accordion>
|
||||||
@ -3,27 +3,15 @@
|
|||||||
$frequency = Str::lower(trans('recurring.' . str_replace('ly', 's', $transaction->recurring->frequency)));
|
$frequency = Str::lower(trans('recurring.' . str_replace('ly', 's', $transaction->recurring->frequency)));
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<div class="border-b pb-4" x-data="{ schedule : null }">
|
<x-show.accordion type="schedule">
|
||||||
<button class="relative w-full ltr:text-left rtl:text-right cursor-pointer group"
|
<x-slot name="head">
|
||||||
x-on:click="schedule !== 1 ? schedule = 1 : schedule = null"
|
<x-show.accordion.head
|
||||||
>
|
title="{{ trans_choice('general.schedules', 1) }}"
|
||||||
<span class="font-medium">
|
description="{!! trans('transactions.slider.schedule', ['frequency' => $frequency, 'interval' => $transaction->recurring->interval, 'date' => $started_date]) !!}"
|
||||||
<x-button.hover group-hover>
|
/>
|
||||||
{{ trans_choice('general.schedules', 1) }}
|
</x-slot>
|
||||||
</x-button.hover>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="text-black-400 text-sm flex gap-x-1 mt-1">
|
<x-slot name="body">
|
||||||
{!! 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'"
|
|
||||||
>
|
|
||||||
<div class="flex my-3 space-x-2 rtl:space-x-reverse">
|
<div class="flex my-3 space-x-2 rtl:space-x-reverse">
|
||||||
@if ($next = $transaction->recurring->getNextRecurring())
|
@if ($next = $transaction->recurring->getNextRecurring())
|
||||||
{{ trans('recurring.next_date', ['date' => $next->format(company_date_format())]) }}
|
{{ trans('recurring.next_date', ['date' => $next->format(company_date_format())]) }}
|
||||||
@ -41,5 +29,5 @@
|
|||||||
{{ trans('documents.statuses.ended') }}
|
{{ trans('documents.statuses.ended') }}
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</x-slot>
|
||||||
</div>
|
</x-show.accordion>
|
||||||
|
|||||||
@ -9,42 +9,33 @@
|
|||||||
@endphp
|
@endphp
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<div class="border-b pb-4" x-data="{ transfer : 1 }">
|
<x-show.accordion type="transfer" open>
|
||||||
<button class="relative w-full ltr:text-left rtl:text-right cursor-pointer group"
|
<x-slot name="head">
|
||||||
x-on:click="transfer !== 1 ? transfer = 1 : transfer = null"
|
<x-show.accordion.head
|
||||||
>
|
title="{{ trans_choice('general.transfers', 1) }}"
|
||||||
<span class="font-medium border-b border-transparent transition-all group-hover:border-black">
|
/>
|
||||||
{{ trans_choice('general.transfers', 1) }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
@if ($transfer)
|
@if ($transfer)
|
||||||
<div class="text-black-400 text-sm flex gap-x-1 mt-1">
|
<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]) !!}
|
{!! trans('transactions.slider.transfer_headline', ['from_account' => $from_account, 'to_account' => $to_account]) !!}
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
</x-slot>
|
||||||
|
|
||||||
<span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform"
|
<x-slot name="body">
|
||||||
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'"
|
|
||||||
>
|
|
||||||
@if ($transfer)
|
@if ($transfer)
|
||||||
<div class="my-2">
|
<div class="my-2">
|
||||||
{!! trans('transactions.slider.transfer_desc', ['date' => $date]) !!}
|
{!! trans('transactions.slider.transfer_desc', ['date' => $date]) !!}
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
<div class="alert alert-notify p-4 font-bold rounded-lg bg-orange-100 text-orange-600">
|
<div class="alert alert-notify p-4 font-bold rounded-lg bg-orange-100 text-orange-600">
|
||||||
<span class="alert-text">
|
<span class="alert-text">
|
||||||
<span>{{ trans('messages.warning.missing_transfer') }}</span>
|
<span>{{ trans('messages.warning.missing_transfer') }}</span>
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</x-slot>
|
||||||
</div>
|
</x-show.accordion>
|
||||||
@endif
|
@endif
|
||||||
|
|||||||
@ -1,26 +1,16 @@
|
|||||||
@if ($transfer->attachment)
|
@if ($transfer->attachment)
|
||||||
<div class="border-b border-gray-200 pb-4" x-data="{ attachment : null }">
|
<x-show.accordion type="attachment">
|
||||||
<div class="relative w-full text-left cursor-pointer group" x-on:click="attachment !== 1 ? attachment = 1 : attachment = null">
|
<x-slot name="head">
|
||||||
<span class="font-medium">
|
<x-show.accordion.head
|
||||||
<x-button.hover group-hover>
|
title="{{ trans_choice('general.attachments', 2) }}"
|
||||||
{{ trans_choice('general.attachments', 2) }}
|
description="{{ trans('transfers.slider.attachments') }}"
|
||||||
</x-button.hover>
|
/>
|
||||||
</span>
|
</x-slot>
|
||||||
|
|
||||||
<div class="text-black-400 text-sm">
|
<x-slot name="body">
|
||||||
{{ trans('transers.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'"
|
|
||||||
>
|
|
||||||
@foreach ($transfer->attachment as $file)
|
@foreach ($transfer->attachment as $file)
|
||||||
<x-media.file :file="$file" />
|
<x-media.file :file="$file" />
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</x-slot>
|
||||||
</div>
|
</x-show.accordion>
|
||||||
@endif
|
@endif
|
||||||
|
|||||||
@ -1,25 +1,14 @@
|
|||||||
@php $created_date = '<span class="font-medium">' . company_date($transfer->created_at) . '</span>' @endphp
|
@php $created_date = '<span class="font-medium">' . company_date($transfer->created_at) . '</span>' @endphp
|
||||||
|
|
||||||
<div class="border-b pb-4" x-data="{ create : null }">
|
<x-show.accordion type="create">
|
||||||
<button class="relative w-full text-left group" x-on:click="create !== 1 ? create = 1 : create = null">
|
<x-slot name="head">
|
||||||
<span class="font-medium">
|
<x-show.accordion.head
|
||||||
<x-button.hover group-hover>
|
title="{{ trans('general.create') }}"
|
||||||
{{ trans('general.create') }}
|
description="{!! trans('transactions.slider.create', ['user' => $transfer->owner->name, 'date' => $created_date]) !!}"
|
||||||
</x-button.hover>
|
/>
|
||||||
</span>
|
</x-slot>
|
||||||
|
|
||||||
<div class="text-black-400 text-sm">
|
<x-slot name="body">
|
||||||
{!! trans('transactions.slider.create', ['user' => $transfer->owner->name, 'date' => $created_date]) !!}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="overflow-hidden transition-transform origin-top-left ease-linear duration-100"
|
|
||||||
x-ref="container1"
|
|
||||||
x-bind:class="create == 1 ? 'h-auto ' : 'scale-y-0 h-0'"
|
|
||||||
>
|
|
||||||
<div class="flex my-3 space-x-2 rtl:space-x-reverse">
|
<div class="flex my-3 space-x-2 rtl:space-x-reverse">
|
||||||
<x-link
|
<x-link
|
||||||
href="{{ route('transfers.edit', $transfer->id) }}"
|
href="{{ route('transfers.edit', $transfer->id) }}"
|
||||||
@ -29,5 +18,5 @@
|
|||||||
{{ trans('general.edit') }}
|
{{ trans('general.edit') }}
|
||||||
</x-link>
|
</x-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</x-slot>
|
||||||
</div>
|
</x-show.accordion>
|
||||||
|
|||||||
@ -1,27 +1,18 @@
|
|||||||
@php
|
@php
|
||||||
$link_class = 'to-black-400 hover:bg-full-2 bg-no-repeat bg-0-2 bg-0-full bg-gradient-to-b from-transparent transition-backgroundSize';
|
$link_class = 'to-black-400 hover:bg-full-2 bg-no-repeat bg-0-2 bg-0-full bg-gradient-to-b from-transparent transition-backgroundSize';
|
||||||
$expense_number = '<x-link href="' . route('transactions.show', $transfer->expense_transaction->id) . '" class="' . $link_class . '" override="class">' . $transfer->expense_transaction->number . '</x-link>';
|
$expense_number = '<a href="' . route('transactions.show', $transfer->expense_transaction->id) . '" class="' . $link_class . '" override="class">' . $transfer->expense_transaction->number . '</a>';
|
||||||
$income_number = '<x-link href="' . route('transactions.show', $transfer->income_transaction->id) . '" class="' . $link_class . '" override="class">' . $transfer->income_transaction->number . '</x-link>';
|
$income_number = '<a href="' . route('transactions.show', $transfer->income_transaction->id) . '" class="' . $link_class . '" override="class">' . $transfer->income_transaction->number . '</a>';
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<div class="border-b pb-4" x-data="{ transactions : null }">
|
<x-show.accordion type="transactions">
|
||||||
<button class="relative w-full text-left group" x-on:click="transactions !== 1 ? transactions = 1 : transactions = null">
|
<x-slot name="head">
|
||||||
<span class="font-medium border-b border-transparent transition-all group-hover:border-black">
|
<x-show.accordion.head
|
||||||
{{ trans_choice('general.transactions', 2) }}
|
title="{{ trans_choice('general.transactions', 2) }}"
|
||||||
</span>
|
description="{!! trans('transfers.slider.transactions', ['user' => $transfer->owner->name]) !!}"
|
||||||
|
/>
|
||||||
|
</x-slot>
|
||||||
|
|
||||||
<div class="text-black-400 text-sm">
|
<x-slot name="body">
|
||||||
{!! trans('transfers.slider.transactions', ['user' => $transfer->owner->name]) !!}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform" x-bind:class="transactions === 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="transactions === 1 ? 'h-auto' : 'scale-y-0 h-0'"
|
|
||||||
>
|
|
||||||
<div class="my-2">
|
<div class="my-2">
|
||||||
{!! trans('transfers.slider.transactions_desc', ['number' => $expense_number, 'account' => $transfer->expense_account->title]) !!}
|
{!! trans('transfers.slider.transactions_desc', ['number' => $expense_number, 'account' => $transfer->expense_account->title]) !!}
|
||||||
</div>
|
</div>
|
||||||
@ -29,5 +20,5 @@
|
|||||||
<div class="my-2">
|
<div class="my-2">
|
||||||
{!! trans('transfers.slider.transactions_desc', ['number' => $income_number, 'account' => $transfer->income_account->title]) !!}
|
{!! trans('transfers.slider.transactions_desc', ['number' => $income_number, 'account' => $transfer->income_account->title]) !!}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</x-slot>
|
||||||
</div>
|
</x-show.accordion>
|
||||||
Loading…
x
Reference in New Issue
Block a user