-
-
Notifications
You must be signed in to change notification settings - Fork 89
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(setRequestList): add new filter and update filters UX (#1574)
- Loading branch information
1 parent
469c07d
commit df6483c
Showing
7 changed files
with
207 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <?php | ||
|
|
||
| declare(strict_types=1); | ||
|
|
||
| namespace App\Community\Enums; | ||
|
|
||
| abstract class RequestStatus | ||
| { | ||
| public const Any = 0; | ||
| public const Claimed = 1; | ||
| public const Unclaimed = 2; | ||
|
|
||
| public static function cases(): array | ||
| { | ||
| return [ | ||
| self::Any, | ||
| self::Claimed, | ||
| self::Unclaimed, | ||
| ]; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
resources/views/community/components/request-list/meta-console-filter.blade.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <label class="text-xs font-bold" for="filter-by-console-select">Console</label> | ||
| <select id="filter-by-console-id" class="w-full sm:max-w-[240px]" @change="handleConsoleChanged"> | ||
| @if ($selectedConsoleId === null) | ||
| <option selected>Only supported systems</option> | ||
| @else | ||
| <option value=''>Only supported systems</option> | ||
| @endif | ||
|
|
||
| @if ($selectedConsoleId == -1) | ||
| <option selected>All systems</option> | ||
| @else | ||
| <option value="-1">All systems</option> | ||
| @endif | ||
|
|
||
| @foreach ($consoles as $console) | ||
| @if ($selectedConsoleId == $console['ID']) | ||
| <option selected>{{ $console->Name }}</option> | ||
| @else | ||
| <option value="{{ $console['ID'] }}">{{ $console->Name }}</option> | ||
| @endif | ||
| @endforeach | ||
| </select> |
69 changes: 69 additions & 0 deletions
69
resources/views/community/components/request-list/meta-panel.blade.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <script> | ||
| /** | ||
| * Updates a query parameter in the current URL and navigates to the new URL. | ||
| * | ||
| * @param {string} paramName - The name of the query parameter to update. | ||
| * @param {string} newQueryParamValue - The new value for the query parameter. | ||
| */ | ||
| function updateUrlParameter(paramName, newQueryParamValue) { | ||
| const url = new URL(window.location.href); | ||
| const params = new URLSearchParams(url.search); | ||
| params.set(paramName, newQueryParamValue); | ||
| url.search = params.toString(); | ||
| window.location.href = url.toString(); | ||
| } | ||
| /** | ||
| * Event handler for 'Filter by console' selection change event. | ||
| * Updates 's' query parameter in the URL based on selected option. | ||
| * | ||
| * @param {Event} event - The select change event. | ||
| */ | ||
| function handleConsoleChanged(event) { | ||
| const newQueryParamValue = event.target.value; | ||
| updateUrlParameter('s', newQueryParamValue); | ||
| } | ||
| /** | ||
| * Event handler for 'Filter by request status' selection change event. | ||
| * Updates 'x' query parameter in the URL based on selected option. | ||
| * | ||
| * @param {Event} event - The select change event. | ||
| */ | ||
| function handleRequestStatusChanged(event) { | ||
| const newQueryParamValue = event.target.value; | ||
| updateUrlParameter('x', newQueryParamValue); | ||
| } | ||
| </script> | ||
|
|
||
| @props([ | ||
| 'consoles' => [], | ||
| 'requestedSetsCount' => 0, | ||
| 'selectedConsoleId' => null, | ||
| 'selectedRequestStatus' => null, | ||
| ]) | ||
|
|
||
| <div x-init="{}"> | ||
| <p class="text-lg mb-2">{{ localized_number($requestedSetsCount) }} Requested Sets</p> | ||
|
|
||
| <div class="embedded p-4 my-4 w-full"> | ||
| <p class="sr-only">Filters</p> | ||
|
|
||
| <div class="grid sm:flex gap-y-4 sm:divide-x-2 divide-embed-highlight"> | ||
| <div class="grid gap-y-1 sm:pr-[40px]"> | ||
| <x-request-list.meta-console-filter | ||
| :consoles="$consoles" | ||
| :selectedConsoleId="$selectedConsoleId" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="grid gap-y-1 sm:px-8"> | ||
| <x-request-list.meta-request-status-filter | ||
| :selectedRequestStatus="$selectedRequestStatus" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
15 changes: 15 additions & 0 deletions
15
resources/views/community/components/request-list/meta-request-status-filter-radio.blade.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <?php | ||
| use App\Community\Enums\RequestStatus; | ||
| $any = RequestStatus::Any; | ||
| ?> | ||
|
|
||
| @props([ | ||
| 'selectedRequestStatus' => $any, | ||
| 'value' => $any, | ||
| ]) | ||
|
|
||
| <label class="transition lg:active:scale-95 cursor-pointer flex items-center gap-x-1 text-xs"> | ||
| <input type="radio" class="cursor-pointer" name="request-status" value="{{ $value }}" {{ $selectedRequestStatus == $value ? 'checked' : '' }} @change="handleRequestStatusChanged"> | ||
| {{ $slot }} | ||
| </label> |
22 changes: 22 additions & 0 deletions
22
resources/views/community/components/request-list/meta-request-status-filter.blade.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <?php | ||
| use App\Community\Enums\RequestStatus; | ||
| $any = RequestStatus::Any; | ||
| $claimed = RequestStatus::Claimed; | ||
| $unclaimed = RequestStatus::Unclaimed; | ||
| ?> | ||
|
|
||
| <label class="text-xs font-bold sm:-mb-6">Request status</label> | ||
| <div class="space-x-4 flex" id="filter-by-request-status"> | ||
| <x-request-list.meta-request-status-filter-radio value="{{ $any }}" :selectedRequestStatus="$selectedRequestStatus"> | ||
| Any | ||
| </x-request-list.meta-request-status-filter-radio> | ||
|
|
||
| <x-request-list.meta-request-status-filter-radio value="{{ $claimed }}" :selectedRequestStatus="$selectedRequestStatus"> | ||
| Claimed | ||
| </x-request-list.meta-request-status-filter-radio> | ||
|
|
||
| <x-request-list.meta-request-status-filter-radio value="{{ $unclaimed }}" :selectedRequestStatus="$selectedRequestStatus"> | ||
| Unclaimed | ||
| </x-request-list.meta-request-status-filter-radio> | ||
| </div> |