feat: update profile page layout and filters

- Refactored the layout of the profile page for better readability
- Updated the filters in the payment section to include 'currentPubkey' and 'content' fields
- Made minor changes to the styling and text content
- Improved the handling of payment-related information
- Fixed some indentation issues for better code readability.
This commit is contained in:
fsociety
2024-09-30 15:59:48 +02:00
parent 5eb8307691
commit 7c6ce0eb7d

View File

@@ -105,7 +105,14 @@ $searchPaymentEvent = function () {
'tags' => $event->event->tags, 'tags' => $event->event->tags,
'created_at' => $event->event->created_at, 'created_at' => $event->event->created_at,
]) ])
->filter(fn($payment) => collect($payment['tags'])->firstWhere('0', 'e')[1] === $this->currentPleb->paymentEvents->first()->event_id) ->filter(fn($payment)
=> collect($payment['tags'])->firstWhere('0', 'p')[1] === $this->currentPubkey
&& json_decode(
collect($payment['tags'])->firstWhere('0', 'description')[1],
true,
512,
JSON_THROW_ON_ERROR,
)['content'] == date('Y'))
->values() ->values()
->toArray(); ->toArray();
@@ -244,7 +251,7 @@ $loadEvents = function () {
<!-- Sidebar --> <!-- Sidebar -->
<div <div
class="flex flex-nowrap overflow-x-scroll no-scrollbar md:block md:overflow-auto px-3 py-6 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700/60 min-w-60 md:space-y-3"> class="flex flex-nowrap overflow-x-scroll no-scrollbar md:block md:overflow-auto px-3 py-6 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700/60 min-w-60 md:space-y-3">
<!-- Group 1 --> <!-- Group 1 -->
<div> <div>
<div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase mb-3"> <div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase mb-3">
@@ -256,7 +263,7 @@ $loadEvents = function () {
href="#0"> href="#0">
<i class="fa-sharp-duotone fa-solid fa-id-card-clip shrink-0 fill-current text-orange-400 mr-2"></i> <i class="fa-sharp-duotone fa-solid fa-id-card-clip shrink-0 fill-current text-orange-400 mr-2"></i>
<span <span
class="text-sm font-medium text-orange-500 dark:text-orange-400">Status</span> class="text-sm font-medium text-orange-500 dark:text-orange-400">Status</span>
</a> </a>
</li> </li>
{{--<li class="mr-0.5 md:mr-0 md:mb-0.5"> {{--<li class="mr-0.5 md:mr-0 md:mb-0.5">
@@ -315,20 +322,20 @@ $loadEvents = function () {
<h3 class="w-48 sm:w-full truncate text-lg leading-snug text-[#1B1B1B] dark:text-gray-100 font-bold" <h3 class="w-48 sm:w-full truncate text-lg leading-snug text-[#1B1B1B] dark:text-gray-100 font-bold"
x-text="$store.nostr.user.nip05"></h3> x-text="$store.nostr.user.nip05"></h3>
<div <div
class="tw-48 sm:w-full truncate text-sm text-gray-500 dark:text-gray-400" class="tw-48 sm:w-full truncate text-sm text-gray-500 dark:text-gray-400"
x-text="$store.nostr.user.nip05"></div> x-text="$store.nostr.user.nip05"></div>
</div> </div>
</div> </div>
</template> </template>
@if($currentPubkey) @if($currentPubkey)
<div <div
class="inline-flex min-w-80 px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-100"> class="inline-flex min-w-80 px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-100">
<div class="flex w-full justify-between items-start"> <div class="flex w-full justify-between items-start">
<div class="flex"> <div class="flex">
<svg class="shrink-0 fill-current text-green-500 mt-[3px] mr-3" <svg class="shrink-0 fill-current text-green-500 mt-[3px] mr-3"
width="16" height="16" viewBox="0 0 16 16"> width="16" height="16" viewBox="0 0 16 16">
<path <path
d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z"></path> d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z"></path>
</svg> </svg>
<div>Profil in der Datenbank vorhanden. Bewerbung kann erfolgen.</div> <div>Profil in der Datenbank vorhanden. Bewerbung kann erfolgen.</div>
</div> </div>
@@ -346,9 +353,9 @@ $loadEvents = function () {
</h3> </h3>
<div class="text-sm"> <div class="text-sm">
<x-textarea <x-textarea
corner="Beschreibe deine Motivation, passives Mitglied zu werden." corner="Beschreibe deine Motivation, passives Mitglied zu werden."
label="Warum möchtest du passives Mitglied werden?" label="Warum möchtest du passives Mitglied werden?"
wire:model="form.reason"/> wire:model="form.reason"/>
</div> </div>
<div class="sm:flex sm:items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-5"> <div class="sm:flex sm:items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-5">
<div class="sm:w-1/3 flex flex-col space-y-2"> <div class="sm:w-1/3 flex flex-col space-y-2">
@@ -369,10 +376,10 @@ $loadEvents = function () {
</h3> </h3>
<div class="text-sm"> <div class="text-sm">
<x-textarea <x-textarea
corner="Woher kennen wir dich? Was möchtest du einbringen?" corner="Woher kennen wir dich? Was möchtest du einbringen?"
description="Wir bitten dich mindestens von 3 aktiven Mitgliedern auf Nostr gefolgt zu werden." description="Wir bitten dich mindestens von 3 aktiven Mitgliedern auf Nostr gefolgt zu werden."
label="Warum möchtest du aktives Mitglied werden?" label="Warum möchtest du aktives Mitglied werden?"
wire:model="form.reason"/> wire:model="form.reason"/>
</div> </div>
<div class="sm:flex sm:items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-5"> <div class="sm:flex sm:items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-5">
<div class="sm:w-1/3 flex flex-col space-y-2"> <div class="sm:w-1/3 flex flex-col space-y-2">
@@ -388,13 +395,13 @@ $loadEvents = function () {
<section> <section>
@if($currentPubkey && $currentPleb->application_for) @if($currentPubkey && $currentPleb->application_for)
<div <div
class="inline-flex flex-col w-full max-w-lg px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400"> class="inline-flex flex-col w-full max-w-lg px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400">
<div class="flex w-full justify-between items-start"> <div class="flex w-full justify-between items-start">
<div class="flex"> <div class="flex">
<svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16" <svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16"
height="16" viewBox="0 0 16 16"> height="16" viewBox="0 0 16 16">
<path <path
d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path> d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path>
</svg> </svg>
<div> <div>
<div class="font-medium text-gray-800 dark:text-gray-100 mb-1"> <div class="font-medium text-gray-800 dark:text-gray-100 mb-1">
@@ -411,13 +418,13 @@ $loadEvents = function () {
<section> <section>
@if($currentPleb && $currentPleb->association_status->value > 1) @if($currentPleb && $currentPleb->association_status->value > 1)
<div <div
class="inline-flex flex-col w-full max-w-lg px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400"> class="inline-flex flex-col w-full max-w-lg px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400">
<div class="flex w-full justify-between items-start"> <div class="flex w-full justify-between items-start">
<div class="flex"> <div class="flex">
<svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16" <svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16"
height="16" viewBox="0 0 16 16"> height="16" viewBox="0 0 16 16">
<path <path
d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path> d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path>
</svg> </svg>
<div> <div>
<div class="font-medium text-gray-800 dark:text-gray-100 mb-1"> <div class="font-medium text-gray-800 dark:text-gray-100 mb-1">
@@ -434,17 +441,17 @@ $loadEvents = function () {
<section> <section>
@if($currentPleb && $currentPleb->association_status->value > 1) @if($currentPleb && $currentPleb->association_status->value > 1)
<div <div
class="inline-flex flex-col w-full px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400"> class="inline-flex flex-col w-full px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400">
<div class="flex w-full justify-between items-start"> <div class="flex w-full justify-between items-start">
<div class="flex"> <div class="flex">
<svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16" <svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16"
height="16" viewBox="0 0 16 16"> height="16" viewBox="0 0 16 16">
<path <path
d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path> d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path>
</svg> </svg>
<div> <div>
<div <div
class="font-medium text-gray-800 dark:text-gray-100 mb-1 space-y-2"> class="font-medium text-gray-800 dark:text-gray-100 mb-1 space-y-2">
<p>Nostr Event für die Zahlung des <p>Nostr Event für die Zahlung des
Mitgliedsbeitrags: {{ $currentPleb->paymentEvents->first()->event_id }}</p> Mitgliedsbeitrags: {{ $currentPleb->paymentEvents->first()->event_id }}</p>
<div> <div>
@@ -454,8 +461,8 @@ $loadEvents = function () {
@if(!$invoice && !$currentYearIsPaid) @if(!$invoice && !$currentYearIsPaid)
<div class="flex justify-center"> <div class="flex justify-center">
<button <button
@click="zap('{{ date('Y') }}', '{{ $currentPubkey }}', {{ $amountToPay }})" @click="zap('{{ date('Y') }}', '{{ $currentPubkey }}', {{ $amountToPay }})"
class="btn text-2xl dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-green-500" class="btn text-2xl dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-green-500"
> >
<i class="fa-sharp-duotone fa-solid fa-bolt-lightning mr-2"></i> <i class="fa-sharp-duotone fa-solid fa-bolt-lightning mr-2"></i>
Zap Zap
@@ -468,16 +475,16 @@ $loadEvents = function () {
wire:poll="listenForPayment"> wire:poll="listenForPayment">
<a href="lightning:{{ $invoice }}"> <a href="lightning:{{ $invoice }}">
<img <img
class="p-12 bg-white" class="p-12 bg-white"
src="{{ 'data:image/png;base64, '. $qrCode }}" src="{{ 'data:image/png;base64, '. $qrCode }}"
alt="qrcode"> alt="qrcode">
</a> </a>
</div> </div>
@else @else
@if($currentYearIsPaid) @if($currentYearIsPaid)
<div class="flex justify-center"> <div class="flex justify-center">
<button <button
class="btn text-2xl dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-green-500" class="btn text-2xl dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-green-500"
> >
<i class="fa-sharp-duotone fa-solid fa-check-circle mr-2"></i> <i class="fa-sharp-duotone fa-solid fa-check-circle mr-2"></i>
aktuelles Jahr bezahlt aktuelles Jahr bezahlt
@@ -496,7 +503,7 @@ $loadEvents = function () {
<table class="table-auto w-full dark:text-gray-400"> <table class="table-auto w-full dark:text-gray-400">
<!-- Table header --> <!-- Table header -->
<thead <thead
class="text-xs uppercase text-gray-400 dark:text-gray-500"> class="text-xs uppercase text-gray-400 dark:text-gray-500">
<tr class="flex flex-wrap md:table-row md:flex-no-wrap"> <tr class="flex flex-wrap md:table-row md:flex-no-wrap">
<th class="w-full block md:w-auto md:table-cell py-2"> <th class="w-full block md:w-auto md:table-cell py-2">
<div class="font-semibold text-left">Satoshis</div> <div class="font-semibold text-left">Satoshis</div>
@@ -515,15 +522,15 @@ $loadEvents = function () {
<tr class="flex flex-wrap md:table-row md:flex-no-wrap border-b border-gray-200 dark:border-gray-700/60 py-2 md:py-0"> <tr class="flex flex-wrap md:table-row md:flex-no-wrap border-b border-gray-200 dark:border-gray-700/60 py-2 md:py-0">
<td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2"> <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
<div <div
class="text-left font-medium text-gray-800 dark:text-gray-100">{{ collect(json_decode(collect($payment['tags'])->firstWhere('0', 'description')[1], true, 512, JSON_THROW_ON_ERROR)['tags'])->firstWhere('0', 'amount')[1] / 1000 }}</div> class="text-left font-medium text-gray-800 dark:text-gray-100">{{ collect(json_decode(collect($payment['tags'])->firstWhere('0', 'description')[1], true, 512, JSON_THROW_ON_ERROR)['tags'])->firstWhere('0', 'amount')[1] / 1000 }}</div>
</td> </td>
<td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2"> <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
<div <div
class="text-left">{{ $payment['content'] }}</div> class="text-left">{{ $payment['content'] }}</div>
</td> </td>
<td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2"> <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
<div <div
class="text-left font-medium">{{ $payment['id'] }}</div> class="text-left font-medium">{{ $payment['id'] }}</div>
</td> </td>
</tr> </tr>
@endforeach @endforeach