Skip to content

Commit

Permalink
collections search chip progress and hx hooking up with collection list
Browse files Browse the repository at this point in the history
  • Loading branch information
@MuchQuak
MuchQuak committed Oct 17, 2024
1 parent 89e8f08 commit 4919fa4
Show file tree
Hide file tree
Showing 7 changed files with 193 additions and 43 deletions.
10 changes: 6 additions & 4 deletions resources/views/core/accordion.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
@props(['id', 'label', 'name', 'open' => false, 'variant' => false])
<div id="{{$id ?? uniqid()}}" data-blade-accordion x-data="{ open: {{ $open? 'true': 'false'}}}" {{ $attributes->twMerge('w-full')}}>
<!-- Accordion Title --->
<x-button x-on:click="open = !open" :variant="$variant" class="w-full rounded-sm px-0 text-xl mb-1 hover:ease-in duration-150">
<x-button type="button" x-on:click="open = !open" :variant="$variant"
{{ $attributes->twMergeFor('button', 'w-full rounded-sm px-0 text-xl mb-1 hover:ease-in duration-150') }}
>
<div class="flex w-full py-1 ">
<div class="w-12"></div>
<div class="m-auto">{{ $label }}</div>
Expand All @@ -13,12 +15,12 @@
</x-button>

<!-- Accordion Body ---->
<div class="border-base-300 bg-base-100 border-b border-x p-4"
x-cloak
<div x-cloak x-show="open"
x-transition:enter="transition ease-out duration-300 delay-50"
x-transition:enter-start="opacity-0 h-10 "
x-transition:enter-end="opacity-100 h-100"
x-show="open">
{{ $attributes->twMergeFor('body', 'border-base-300 bg-base-100 border-b border-x p-4') }}
>
{{$slot}}
</div>
</div>
1 change: 1 addition & 0 deletions resources/views/core/autocomplete-input.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ function getLastValue(str_val) {
hx-indicator="#menu-loader-{{$id}}"
hx-target="#search-results-{{$id}}"
hx-replace-url="false"
hx-push-url="false"
x-on:htmx:before-send.stop="results = false"
x-on:blur="open = false"
x-on:keyup.enter="open = false"
Expand Down
14 changes: 13 additions & 1 deletion resources/views/core/input.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@props(['id'=> uniqid(), 'label' => false, 'error_text', 'assistive_text'])
@props(['id'=> uniqid(), 'label' => false, 'error_text', 'assistive_text', 'area' => false])
<!-- resources/views/core/input.blade.php -->
<div class="group w-full text-base-content">
@if($label)
Expand All @@ -10,9 +10,21 @@
</label>
<span data-label="{{ $label }}" />
@endif

@if($area)
<textarea
name="{{ $id }}" id="{{ $id }}"
{{ $attributes->twMerge('px-3 py-2 bg-opacity-50 border-base-300 border rounded-md focus:ring-accent focus:ring-2 focus:outline-none w-full') }}
>
{{ $attributes->value ?? '' }}
</textarea>

@else
<input
{{ $attributes->twMerge('px-3 py-2 bg-opacity-50 border-base-300 border rounded-md focus:ring-accent focus:ring-2 focus:outline-none w-full
') }} name="{{ $id }}" id="{{ $id }}" />
@endif

@if(isset($error_text))
<p class="text-red-500 text-xs italic">{{ $error_text }}</p>
@elseif(!empty($assistive_text))
Expand Down
178 changes: 147 additions & 31 deletions resources/views/core/pages/collections.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,96 @@
<script type="text/javascript" defer>
function toggle_all_accordions() {
const node_list = document.querySelectorAll('[data-blade-accordion]');
for(let accordion of node_list) {
for (let accordion of node_list) {
accordion._x_dataStack[0].open = !accordion._x_dataStack[0].open;
}
}
function openWindow(link = "", title = "", options = "resizable=0,width=900,height=630,left=20,top=20") {
let mapWindow = open(link,
title,
options,
);
if (mapWindow.opener == null) mapWindow.opener = self;
mapWindow.focus();
}
function onFormChange(e) {
;
}
</script>
@endPushOnce
@php
function getCoordAidLink($mode) {
return url( config('portal.name') . '/collections/tools/mapcoordaid.php?mapmode=' . $mode .
'&map_mode_strict=true&geoJson&wkt_input_id=footprintwkt');
}
$northSouth = [
['title' => 'N', 'value' => 'N', 'disabled' => false],
['title' => 'S', 'value' => 'S', 'disabled' => false]
];
$eastWest= [
['title' => 'W', 'value' => 'W', 'disabled' => false],
['title' => 'E', 'value' => 'E', 'disabled' => false]
];
@endphp
<x-layout class="p-10">
<h1 class="text-5xl font-bold text-primary mb-8">Record Search</h1>
<div class="grid grid-cols-4" x-data="{ show_all: false, toggle: () => show_all = true }">
<form
hx-get="/collections/list"
hx-target="body"
hx-push-url="true"
x-on:change="addChip(values, event)"
hx-boost
class="grid grid-cols-4"
x-data="{
show_all: false,
toggle: () => show_all = true,
values: [],
removeChip: (values, id) => {
const el = document.getElementById(id);
const idx = values.map(v => v.id).indexOf(id);
if(idx >= 0) {
values = values.splice(idx, 1);
}
if(el) {
if(el.type = 'checkbox') {
el.checked = false;
} else {
el.value = ''
}
}
},
addChip: (values, e) => {
const checkbox = e.target.checked;
const text = e.target.type !== 'checkbox' && e.target.value;
if(text || checkbox) {
const value = {
id: e.target.id,
title: e.target.name,
value: e.target.value
};
const idx = values.map(v => v.id).indexOf(value.id);
if(idx >= 0) {
values = values.splice(idx, 1, value);
} else {
values.push(value);
}
} else {
$data.removeChip(values, e.target.id);
}
}
}"
>
<div class="col-span-3 flex flex-col gap-4">
<x-button class="w-full justify-center uppercase" onclick="toggle_all_accordions()" >
<x-button type="button" class="w-full justify-center uppercase" onclick="toggle_all_accordions()">
Expand All Sections
</x-button>
<x-accordion label='TAXONOMY' variant="clear-primary">
<x-taxa-search/>
<x-taxa-search />
</x-accordion>
<x-accordion label='LOCALITY' variant="clear-primary">
<div class="grid grid-cols-2 gap-4">
Expand All @@ -31,36 +106,62 @@ function toggle_all_accordions() {
<x-input label="County" id="county" />
</div>
</x-accordion>
<x-accordion id="lat-long-accordion" label='LATITUDE & LONGITUDE' variant="clear-primary">
<div class="grid grid-cols-3 gap-4">
<x-accordion id="lat-long-accordion" class:body="p-0" label='LATITUDE & LONGITUDE' variant="clear-primary">
<x-tabs :tabs="['Bounding Box', 'Polygon', 'Point Radius']" class:body="border-x-0 border-b-0">
<div>
<h3 class="text-xl text-primary font-bold">Bounding Box</h3>
<x-button class="text-base w-full">Map Bounding Box</x-button>
<x-input id="upperlat" label="Minimum Elevation"/>
select N/S
<x-input id="bottomlat" label="Southern Latitude"/>
select N/S
<x-input id="leftlong" label="Western Longitude"/>
select W/E
<x-input id="rightlong" label="Eastern Longitude"/>
select W/E
<x-button type="button" class="text-base w-full"
onclick="openWindow('{{ getCoordAidLink('rectangle') }}', 'Rectangle')">
Map Bounding Box
</x-button>
<div class="flex items-end gap-1 pt-1">
<x-input id="upperlat" label="Minimum Elevation" />
<x-select :items="$northSouth" />
</div>

<div class="flex items-end gap-1">
<x-input id="bottomlat" label="Southern Latitude" />
<x-select :items="$northSouth" />
</div>
<div class="flex items-end gap-1">
<x-input id="leftlong" label="Western Longitude" />
<x-select :items="$eastWest" />
</div>

<div class="flex items-end gap-1">
<x-input id="rightlong" label="Eastern Longitude" />
<x-select :items="$eastWest" />
</div>
</div>
<div>
<h3 class="text-xl text-primary font-bold">Polygon</h3>
<x-button class="text-base w-full">Map Polygon</x-button>
<x-input id="polygonwkt" label="Polygon"/>
<x-button type="button" class="text-base w-full"
onclick="openWindow('{{ getCoordAidLink('polygon') }}', 'Polygon')">
Map Polygon
</x-button>
{{-- id="polygonwkt" (May need to change with geojson changes)--}}
<x-input id="footprintwkt" label="Polygon" :area="true" rows="4" />
</div>
<div>
<h3 class="text-xl text-primary font-bold">Point-Radius</h3>
<x-button class="text-base w-full">Map Point Radius</x-button>
<x-input id="pointlat" label="Longitude"/>
select N/S
<x-input id="pointlong" label="Latitude"/>
select W/E
<x-input id="radius" label="Radius"/>
select Units
<x-button type="button" class="text-base w-full"
onclick="openWindow('{{ getCoordAidLink('circle') }}', 'Circle')">
Map Point Radius
</x-button>
<div class="flex items-end gap-1">
<x-input id="pointlat" label="Longitude" />
<x-select :items="$northSouth" />
</div>
<div class="flex items-end gap-1">
<x-input id="pointlong" label="Latitude" />
<x-select :items="$eastWest" />
</div>
<div class="flex items-end gap-1">
<x-input id="radius" label="Radius" />
<x-select :items="[
['title' => 'Kilometers', 'value' => 'km', 'disabled' => false],
['title' => 'Miles', 'value' => 'mi', 'disabled' => false]
]" />
</div>
</div>
</div>
</x-tabs>
</x-accordion>
<x-accordion label='COLLECTION EVENT' variant="clear-primary">
<div class="grid grid-cols-2 gap-4">
Expand Down Expand Up @@ -97,9 +198,24 @@ function toggle_all_accordions() {
['label' => 'List', 'value' => 'list'],
['label' => 'Table', 'value' => 'Table']
]" />
<x-button class="w-full justify-center text-base">Search</x-button>
<x-button class="w-full justify-center text-base" variant="neutral">Reset</x-button>
<x-button type="submit" class="w-full justify-center text-base">Search</x-button>
<x-button type="button" class="w-full justify-center text-base" variant="neutral">Reset</x-button>
<h3 class="text-3xl font-bold text-primary">Criteria</h3>
<div id="chips" class="grid grid-cols-1 gap-4">
<template x-for="value in values">
<div class="bg-base-100 rounded-md border border-base-300">
<div class="bg-base-300 px-2 py-1 rounded-t-md border-b border-base-300 rounded-b-0 font-bold flex items-center">
<div x-text="value.title"></div>
<div class="grow">
<x-button @click="removeChip(values, value.id)" type="button" class="ml-auto rounded-full h-6 w-6 p-0" variant="neutral">
<i class="mx-auto cursor-pointer fa-solid fa-xmark"></i>
</x-button>
</div>
</div>
<div class="px-2 py-1" x-text="value.value"></div>
</div>
</template>
</div>
</div>
</div>
</form>
</x-layout>
8 changes: 4 additions & 4 deletions resources/views/core/select.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
'items' => [],
'name' => 'select',
'label' => null,
'default' => null,
'default' => 0,
'id' => uniqid(),
'labeledBy' => null
])

<div>
<div {{ $attributes->withoutTwMergeClasses()->twMerge("w-fit h-fit")}}>
@if($label ?? false)
<label class="text-lg" id="{{ $id }}-label" for="{{ $id }}-toggle">{{ $label }}</label>
@endif
Expand Down Expand Up @@ -113,9 +113,9 @@
@keydown.up="if(selectOpen){ selectableItemActivePrevious(); } else { selectOpen=true; } event.preventDefault();"
@keydown.enter="selectedItem=selectableItemActive; selectOpen=false;"
@keydown="selectKeydown($event);"
{{ $attributes->withoutTwMergeClasses()->twMerge("relative w-64")}}
{{ $attributes->twMergeFor('select', 'relative')}}
>
<button id="{{ $id }}-toggle" aria-labeledBy={{ $labeledBy? $labeledBy: $id . '-label'}} x-ref="selectButton" @click="selectOpen=!selectOpen"
<button type="button" id="{{ $id }}-toggle" aria-labeledBy={{ $labeledBy? $labeledBy: $id . '-label'}} x-ref="selectButton" @click="selectOpen=!selectOpen"
:class="{ 'focus:ring-2 focus:ring-offset-2 focus:ring-accent hover:bg-base-200' : !selectOpen }"
{{ $attributes->twMergeFor('button', 'relative min-h-[38px] flex items-center justify-between w-full py-2 pl-3 pr-10 text-left bg-base-100 border rounded-md shadow-sm cursor-default border-base-300 focus:outline-none cursor-pointer' )}}
>
Expand Down
4 changes: 2 additions & 2 deletions resources/views/core/tabs.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function wireTabs(tab_group, tab_count) {
@endPushOnce
<div {{$attributes->twMerge('w-full')}} x-data="{el: $el, active: {{ $active }}}" x-init="wireTabs(el, {{ count($tabs) }})">
{{-- Tab Menu --}}
<div class="flex gap-1">
<div {{$attributes->twMergeFor('head', 'flex gap-1')}}>
@for ($i = 0; $i < count($tabs); $i++)
<div :class="active === {{ $i }}? 'bg-base-100': 'bg-opacity-50 bg-base-200'" class="relative bg-base-100 border-x border-t">
<input class="appearance-none outline-none focus:ring ring-accent absolute cursor-pointer w-full h-full"
Expand All @@ -32,7 +32,7 @@ function wireTabs(tab_group, tab_count) {
</div>

{{-- Tab Body --}}
<div id="tab-body" class="p-4 border">
<div id="tab-body" {{$attributes->twMergeFor('body', 'p-4 border')}}>
{{ $slot }}
</div>
</div>
21 changes: 20 additions & 1 deletion resources/views/tw-components.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,26 @@
</x-autocomplete-input>
<x-taxa-search />

<x-collections.list.item />
@php
class OccurrenceStub {
public $sciname = "Pinus albicaulis";
public $scientificNameAuthorship= "Engelm.";
public $catalogNumber= "9973";
public $family= "Pinaceae";
public $recordedBy= "Lupin Praug";
public $recordNumber= "1";
public $eventDate = "1999/10/24";
public $locality= "United States, California";
public $decimalLatitude= 90;
public $decimalLongititude = 90;
public $minimumElevationInMeters = "3322m";
public $maximumElevationInMeters = "3383m";
public $occid = 1;
public $image_cnt = 1;
public $audio_cnt = 1;
}
@endphp
<x-collections.list.item :occurrence="new OccurrenceStub"/>

<div class="w-fit">
<x-popover>
Expand Down

0 comments on commit 4919fa4

Please sign in to comment.