🛠️ Refactor delete confirmation logic with projectToDelete property, enhance project voting features in Livewire, and update Blade templates for consistency and improved UX.

resources/views/livewire/association/project-support/show.blade.php

@@ -1,90 +1,186 @@
 <?php
 
-use App\Models\ProjectProposal;
+use App\Livewire\Forms\VoteForm;
+use App\Models\Vote;
 use App\Support\NostrAuth;
 use Livewire\Component;
-use Livewire\Attributes\Layout;
-use Livewire\Attributes\Title;
 
-new
-#[Layout('layouts.app')]
-#[Title('Projektförderung ')]
-class extends Component {
-    public ProjectProposal $project;
+new class extends Component {
+    public $projectProposal;
 
     public bool $isAllowed = false;
 
-    public function mount(ProjectProposal $project): void
+    public ?string $currentPubkey = null;
+
+    public ?object $currentPleb = null;
+
+    public bool $ownVoteExists = false;
+
+    public function mount($projectProposal): void
     {
-        $this->project = $project;
+        $this->projectProposal = \App\Models\ProjectProposal::query()->where('slug', $projectProposal)->firstOrFail();
         if (NostrAuth::check()) {
+            $this->currentPubkey = NostrAuth::pubkey();
+            $this->handleNostrLoggedIn($this->currentPubkey);
             $this->isAllowed = true;
         }
     }
-};
+
+    public function getBoardVotesProperty()
+    {
+        return Vote::query()
+            ->where('project_proposal_id', $this->projectProposal->id)
+            ->whereHas('einundzwanzigPleb', fn($q) => $q->whereIn('npub', config('einundzwanzig.config.current_board')))
+            ->get();
+    }
+
+    public function getOtherVotesProperty()
+    {
+        return Vote::query()
+            ->where('project_proposal_id', $this->projectProposal->id)
+            ->whereDoesntHave(
+                'einundzwanzigPleb',
+                fn($q) => $q->whereIn('npub', config('einundzwanzig.config.current_board'))
+            )
+            ->get();
+    }
+
+    public function handleNostrLoggedIn($pubkey): void
+    {
+        $this->currentPubkey = $pubkey;
+        $this->currentPleb = \App\Models\EinundzwanzigPleb::query()->where('pubkey', $pubkey)->first();
+        $this->isAllowed = true;
+        $this->ownVoteExists = Vote::query()
+            ->where('project_proposal_id', $this->projectProposal->id)
+            ->where('einundzwanzig_pleb_id', $this->currentPleb->id)
+            ->exists();
+    }
+
+    public function handleApprove(): void
+    {
+        Vote::query()->updateOrCreate([
+            'project_proposal_id' => $this->projectProposal->id,
+            'einundzwanzig_pleb_id' => $this->currentPleb->id,
+        ], [
+            'value' => true,
+        ]);
+    }
+
+    public function handleNotApprove(): void
+    {
+        Vote::query()->updateOrCreate([
+            'project_proposal_id' => $this->projectProposal->id,
+            'einundzwanzig_pleb_id' => $this->currentPleb->id,
+        ], [
+            'value' => false,
+        ]);
+    }
+}
 ?>
 
 <div>
-    @if($isAllowed)
-        <div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-            <div
-                class="flex flex-col md:flex-row items-center mb-6 space-y-4 md:space-y-0 md:space-x-4">
-                <div class="flex items-center justify-between w-full">
-                    <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">
-                        {{ $project->name }}
-                    </h1>
-                    <div>
-                        @if($project->status === 'pending')
-                            <x-badge info label="Pending"/>
-                        @elseif($project->status === 'active')
-                            <x-badge success label="Active"/>
-                        @else
-                            <x-badge neutral label="Archiviert"/>
-                        @endif
+    @if($projectProposal->accepted || $isAllowed)
+        <div class="px-4 sm:px-6 lg:px-8 py-8 w-full">
+            <div class="max-w-5xl mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
+                <div>
+                    <div class="mb-6">
+                        <a class="text-sm px-3 py-1 border border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-300"
+                           href="{{ route('association.projectSupport') }}">
+                            <svg class="fill-current text-gray-400 dark:text-gray-500 mr-2" width="7" height="12"
+                                 viewBox="0 0 7 12">
+                                <path d="M5.4.6 6.8 2l-4 4 4 4-1.4 1.4L0 6z"></path>
+                            </svg>
+                            <span>Zurück zur Übersicht</span>
+                        </a>
                     </div>
-                </div>
-            </div>
+                    <div class="text-sm font-semibold text-violet-500 uppercase mb-2">
+                        {{ $projectProposal->created_at->translatedFormat('d.m.Y') }}
+                    </div>
+                    <header class="mb-4">
+                        <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold mb-2">
+                            {{ $projectProposal->name }}
+                        </h1>
+                        {!! $projectProposal->description !!}
+                    </header>
 
-            <div class="md:flex">
-                <!-- Left column -->
-                <div class="w-full md:w-60 mb-4 md:mb-0">
-                    <flux:card>
-                        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">
-                            Details
-                        </h2>
-                        <dl class="space-y-3">
-                            <div>
-                                <dt class="text-xs font-semibold text-gray-500 uppercase mb-1">Status</dt>
-                                <dd class="text-sm text-gray-800 dark:text-gray-100">
-                                    @if($project->status === 'pending')
-                                        Ausstehend
-                                    @elseif($project->status === 'active')
-                                        Aktiv
-                                    @else
-                                        Archiviert
-                                    @endif
-                                </dd>
+                    <div class="space-y-3 sm:flex sm:items-center sm:justify-between sm:space-y-0 mb-6">
+                        <div class="flex items-center sm:mr-4">
+                            <a class="block mr-2 shrink-0" href="#0">
+                                <img class="rounded-full"
+                                     src="{{ $projectProposal->einundzwanzigPleb->profile?->picture ?? asset('einundzwanzig-alpha.jpg') }}"
+                                     width="32" height="32" alt="User">
+                            </a>
+                            <div class="text-sm whitespace-nowrap">Eingereicht von
+                                <div class="font-semibold text-gray-800 dark:text-gray-100">
+                                    {{ $projectProposal->einundzwanzigPleb?->profile->name ?? str($projectProposal->einundzwanzigPleb->npub)->limit(32) }}
+                                </div>
                             </div>
-                            <div>
-                                <dt class="text-xs font-semibold text-gray-500 uppercase mb-1">Erstellt am</dt>
-                                <dd class="text-sm text-gray-800 dark:text-gray-100">
-                                    {{ $project->created_at->format('d.m.Y') }}
-                                </dd>
+                        </div>
+                        <div class="flex flex-wrap items-center sm:justify-end space-x-2">
+                            <div
+                                class="text-xs inline-flex items-center font-medium border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400 rounded-full text-center px-2.5 py-1">
+                                <a target="_blank" href="{{ $projectProposal->website }}">Webseite</a>
                             </div>
-                        </dl>
-                    </flux:card>
-                </div>
+                            <div
+                                class="text-xs inline-flex font-medium uppercase bg-green-500/20 text-green-700 rounded-full text-center px-2.5 py-1">
+                                {{ number_format($projectProposal->support_in_sats, 0, ',', '.') }} Sats
+                            </div>
+                        </div>
+                    </div>
 
-                <!-- Right column -->
-                <div class="flex-1 md:ml-8">
-                    <flux:card>
-                        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">
-                            Beschreibung
-                        </h2>
-                        <p class="text-sm text-gray-800 dark:text-gray-100">
-                            {{ $project->description ?? 'Keine Beschreibung' }}
-                        </p>
-                    </flux:card>
+                    <figure class="mb-6">
+                        <img class="rounded-sm h-48" src="{{ $projectProposal->getFirstMediaUrl('main') }}"
+                             alt="Picture">
+                    </figure>
+
+                    <hr class="my-6 border-t border-gray-100 dark:border-gray-700/60">
+
+                    @if($isAllowed && !$projectProposal->accepted)
+                        <div class="space-y-4">
+                            <div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80">
+                                @if(!$ownVoteExists)
+                                    <div class="space-y-2">
+                                        <flux:button wire:click="handleApprove" class="w-full">
+                                            <i class="fill-current shrink-0 fa-sharp-duotone fa-solid fa-thumbs-up mr-2"></i>
+                                            Zustimmen
+                                        </flux:button>
+                                        <flux:button wire:click="handleNotApprove" variant="danger" class="w-full">
+                                            <i class="fill-current shrink-0 fa-sharp-duotone fa-solid fa-thumbs-down mr-2"></i>
+                                            Ablehnen
+                                        </flux:button>
+                                    </div>
+                                @else
+                                    <p class="text-sm text-gray-700 dark:text-gray-300">Du hast bereits abgestimmt.</p>
+                                @endif
+                            </div>
+
+                            <div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80">
+                                <div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
+                                    Zustimmungen des Vorstands ({{ count($this->boardVotes->where('value', 1)) }})
+                                </div>
+                            </div>
+
+                            <div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80">
+                                <div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
+                                    Ablehnungen des Vorstands ({{ count($this->boardVotes->where('value', 0)) }})
+                                </div>
+                            </div>
+
+                            <div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80">
+                                <div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
+                                    Zustimmungen der übrigen Mitglieder
+                                    ({{ count($this->otherVotes->where('value', 1)) }})
+                                </div>
+                            </div>
+
+                            <div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80">
+                                <div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
+                                    Ablehnungen der übrigen Mitglieder
+                                    ({{ count($this->otherVotes->where('value', 0)) }})
+                                </div>
+                            </div>
+                        </div>
+                    @endif
                 </div>
             </div>
         </div>