Skip to content

Commit

Permalink
Add Button to show pending orders only
Browse files Browse the repository at this point in the history
  • Loading branch information
@PaperTurtle
PaperTurtle committed Dec 20, 2023
1 parent 6b178b0 commit 33745a3
Showing 1 changed file with 99 additions and 84 deletions.
183 changes: 99 additions & 84 deletions resources/views/profile/show.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class="absolute bottom-0 right-0 w-20 rounded-md bg-primary px-2.5 py-1.5 text-s
<h3 class="text-3xl font-bold font-heading inline-block">Your Products</h3>
<div class="flex justify-end">
<button
class="rounded-md bg-primary px-2.5 py-1.5 text-base font-semibold text-white shadow-sm hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-all delay-[10ms]">
class="rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-all delay-[10ms]">
<a href="{{ route('products.create') }}">Create
a new Product</a>
</button>
Expand Down Expand Up @@ -110,94 +110,109 @@ class="rounded-md bg-blue-600 hover:bg-blue-500 px-2.5 py-1.5 text-sm font-semib
</section>
@endif

@if ($user->id === auth()->id())
<!-- Your Orders -->
<section class="max-w-3xl py-16 sm:pb-24 sm:pt-12">
<div class="max-w-xl">
<h1 class="text-3xl font-bold tracking-tight text-gray-900 font-heading">Your Order History</h1>
<p class="mt-2 text-sm text-gray-500">Check the status of your orders</p>
</div>

<div class="mt-12 space-y-16 sm:mt-16">
@php
$groupedTransactions = [];
foreach ($user->transactions as $transaction) {
$date = new \DateTime($transaction->created_at);
$orderNumber = $date->format('YmdHi');
<div x-data="{ showAll: true }">
@if ($user->id === auth()->id())
<!-- Your Orders -->
<section class="py-16 sm:pb-24 sm:pt-12">
<div class="flex justify-end">
<button x-on:click="showAll = !showAll"
class="rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-all delay-[10ms]">
<span x-text="showAll ? 'Show Pending Orders' : 'Show All Orders'"></span>
</button>
</div>
<div class="max-w-xl">
<h1 class="text-3xl font-bold tracking-tight text-gray-900 font-heading">Your Order History</h1>
<p class="mt-2 text-sm text-gray-500">Check the status of your orders</p>
</div>
<div class="mt-12 space-y-16 sm:mt-16">
@php
$groupedTransactions = [];
foreach ($user->transactions as $transaction) {
$date = new \DateTime($transaction->created_at);
$orderNumber = $date->format('YmdHi');
if (!isset($groupedTransactions[$orderNumber])) {
$groupedTransactions[$orderNumber] = [];
if (!isset($groupedTransactions[$orderNumber])) {
$groupedTransactions[$orderNumber] = [];
}
$groupedTransactions[$orderNumber][] = $transaction;
}
$groupedTransactions[$orderNumber][] = $transaction;
}
krsort($groupedTransactions);
@endphp
@foreach ($groupedTransactions as $orderNumber => $transactions)
@php
$isOrderCompleted = collect($transactions)->every(fn($transaction) => $transaction->status === 'sent');
krsort($groupedTransactions);
@endphp
<section class="mb-6" aria-labelledby="{{ $orderNumber }}-heading">
<div class="space-y-1 md:flex md:items-baseline md:space-x-4 md:space-y-0">
<h2 id="{{ $orderNumber }}-heading"
class="text-xl font-medium text-gray-900 md:flex-shrink-0">Order
#{{ $orderNumber }}</h2>
@if ($isOrderCompleted)
<div
class="space-y-5 sm:flex sm:items-baseline sm:justify-end sm:space-y-0 md:min-w-0 md:flex-1">
<h3 class="inline-flex items-center text-green-500 font-medium text-base">
<span>Delivery Successful</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="ml-2 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5" />
</svg>
</h3>
</div>
@endif
</div>
@foreach ($transactions as $transaction)
<div class="-mb-6 mt-6 flow-root divide-y divide-gray-200 border-t border-gray-200">
<div class="py-6 sm:flex">
<div class="flex space-x-4 sm:min-w-0 sm:flex-1 sm:space-x-6 lg:space-x-8">
<img src="{{ Storage::url($transaction->product->images->first()->resized_image_path) }}"
alt="{{ $transaction->product->first()->alt_text }}"
class="h-20 w-20 flex-none rounded-md object-cover object-center sm:h-48 sm:w-48">
<div class="min-w-0 flex-1 pt-1.5 sm:pt-0">
<h3 class="font-medium text-gray-900 text-xl">
<a
href="{{ route('products.show', $transaction->product->id) }}">{{ $transaction->product->name }}</a>
@foreach ($groupedTransactions as $orderNumber => $transactions)
@php
$isOrderCompleted = collect($transactions)->every(fn($transaction) => $transaction->status === 'sent');
@endphp
<div x-data="{ isOrderCompleted: @json($isOrderCompleted) }" x-show="showAll || !isOrderCompleted">
<section class="mb-6" aria-labelledby="{{ $orderNumber }}-heading">
<div class="space-y-1 md:flex md:items-baseline md:space-x-4 md:space-y-0">
<h2 id="{{ $orderNumber }}-heading"
class="text-xl font-medium text-gray-900 md:flex-shrink-0">Order
#{{ $orderNumber }}</h2>
@if ($isOrderCompleted)
<div
class="space-y-5 sm:flex sm:items-baseline sm:justify-end sm:space-y-0 md:min-w-0 md:flex-1">
<h3
class="inline-flex items-center text-green-500 font-medium text-base">
<span>Delivery Successful</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="ml-2 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5" />
</svg>
</h3>
<p class="mt-1 text-base font-medium text-gray-900">
Quantity: {{ $transaction->quantity }}</p>
<p class="mt-1 text-base font-medium text-gray-900">
Price: {{ $transaction->product->price }} €</p>
<p class="mt-24 text-base font-medium text-gray-900 flex gap-2">
@if ($transaction->status == 'sent')
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="ml-2 w-6 h-6 text-green-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5" />
</svg> Delivered on
{{ $transaction->updated_at->format('F j, Y') }}
@else
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
</svg>
Out for delivery
@endif
</p>
</div>
</div>
@endif
</div>
@endforeach
</section>
@endforeach
</div>
</section>
@endif
@foreach ($transactions as $transaction)
<div
class="-mb-6 mt-6 flow-root divide-y divide-gray-200 border-t border-gray-200">
<div class="py-6 sm:flex">
<div
class="flex space-x-4 sm:min-w-0 sm:flex-1 sm:space-x-6 lg:space-x-8">
<img src="{{ Storage::url($transaction->product->images->first()->resized_image_path) }}"
alt="{{ $transaction->product->first()->alt_text }}"
class="h-20 w-20 flex-none rounded-md object-cover object-center sm:h-48 sm:w-48">
<div class="min-w-0 flex-1 pt-1.5 sm:pt-0">
<h3 class="font-medium text-gray-900 text-xl">
<a
href="{{ route('products.show', $transaction->product->id) }}">{{ $transaction->product->name }}</a>
</h3>
<p class="mt-1 text-base font-medium text-gray-900">
Quantity: {{ $transaction->quantity }}</p>
<p class="mt-1 text-base font-medium text-gray-900">
Price: {{ $transaction->product->price }} €</p>
<p class="mt-24 text-base font-medium text-gray-900 flex gap-2">
@if ($transaction->status == 'sent')
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="ml-2 w-6 h-6 text-green-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5" />
</svg> Delivered on
{{ $transaction->updated_at->format('F j, Y') }}
@else
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
</svg>
Out for delivery
@endif
</p>
</div>
</div>
</div>
@endforeach
</section>
</div>
@endforeach
</div>
</section>
@endif
</div>
</div>
</x-app-layout>

0 comments on commit 33745a3

Please sign in to comment.