Add new models and page for motions
This commit is contained in:
361
resources/views/livewire/motion/search.blade.php
Normal file
361
resources/views/livewire/motion/search.blade.php
Normal file
@@ -0,0 +1,361 @@
|
||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
<div class="container mx-auto py-12 px-4">
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="mb-8" aria-label="Breadcrumb">
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-sm border border-gray-200 px-4 py-3"
|
||||
>
|
||||
<ol class="flex items-center space-x-2 text-sm text-gray-600">
|
||||
<li>
|
||||
<a
|
||||
wire:navigate
|
||||
href="{{ route('home') }}"
|
||||
class="text-blue-600 hover:text-blue-700 flex items-center"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 mr-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
||||
></path>
|
||||
</svg>
|
||||
Hem
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg
|
||||
class="w-4 h-4 text-gray-400"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="font-medium text-gray-900">Sök Motioner</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4">Sök Motioner</h1>
|
||||
<p class="text-lg text-gray-600">
|
||||
Sök bland alla motioner som lämnats till riksdagen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Search Form -->
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md border border-gray-200 p-6 mb-8"
|
||||
>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<!-- Query Search -->
|
||||
<div>
|
||||
<label
|
||||
for="query"
|
||||
class="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Sökfras
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="query"
|
||||
wire:model.live.debounce.500ms="query"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-black"
|
||||
placeholder="Sök efter nyckelord..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Party Select -->
|
||||
<div>
|
||||
<label
|
||||
for="party"
|
||||
class="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Parti
|
||||
</label>
|
||||
<select
|
||||
id="party"
|
||||
wire:model.live="party"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-black"
|
||||
>
|
||||
<option value="">Alla partier</option>
|
||||
@foreach ($this->parties as $code => $name)
|
||||
<option value="{{ $code }}">{{ $name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Date Interval -->
|
||||
<div>
|
||||
<label
|
||||
for="dateInterval"
|
||||
class="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Riksdagsår
|
||||
</label>
|
||||
<select
|
||||
id="dateInterval"
|
||||
wire:model.live="dateInterval"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-black"
|
||||
>
|
||||
<option value="">Alla år</option>
|
||||
@foreach ($this->dateIntervals as $interval => $label)
|
||||
<option value="{{ $interval }}">
|
||||
{{ $label }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clear Filters Button -->
|
||||
<div class="mt-4 flex justify-end">
|
||||
<button
|
||||
wire:click="clearFilters"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
|
||||
>
|
||||
Rensa filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div class="hidden" wire:loading.block>
|
||||
<div class="flex justify-center items-center py-16">
|
||||
<div
|
||||
class="w-12 h-12 border-4 border-t-blue-600 border-blue-200 rounded-full animate-spin"
|
||||
></div>
|
||||
<span class="ml-4 text-gray-600 font-medium">
|
||||
Söker motioner...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
@if (! $loading)
|
||||
@if ($this->motions->isNotEmpty())
|
||||
<!-- Results Header -->
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md border border-gray-200 p-4 mb-6"
|
||||
>
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="text-lg font-medium text-gray-900">
|
||||
Hittade {{ number_format($this->totalResults) }}
|
||||
motioner
|
||||
</h2>
|
||||
<div class="text-sm text-gray-500">
|
||||
Sida {{ $this->getPage() }} av
|
||||
{{ $paginatedMotions->lastPage() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Motion Cards -->
|
||||
<div class="space-y-4 mb-8">
|
||||
@foreach ($paginatedMotions as $motion)
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md border border-gray-200 p-6 hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col lg:flex-row lg:items-start gap-4"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div
|
||||
class="flex items-start justify-between mb-3"
|
||||
>
|
||||
<div>
|
||||
<h3
|
||||
class="text-lg font-semibold text-gray-900 mb-1"
|
||||
>
|
||||
<a
|
||||
wire:navigate
|
||||
href="{{ route('motion.show', $motion->dok_id) }}"
|
||||
class="hover:text-blue-600 transition-colors"
|
||||
>
|
||||
{{ $motion->titel }}
|
||||
</a>
|
||||
</h3>
|
||||
@if (! empty($motion->undertitel))
|
||||
<p
|
||||
class="text-sm text-gray-600 mb-2"
|
||||
>
|
||||
{{ $motion->undertitel }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<span
|
||||
class="inline-flex px-3 py-1 text-xs font-semibold rounded-full {{ $motion->subtyp == 'Partimotion' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800' }}"
|
||||
>
|
||||
{{ $motion->subtyp }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-4"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-medium text-gray-500 uppercase"
|
||||
>
|
||||
Beteckning
|
||||
</span>
|
||||
<p
|
||||
class="text-sm font-medium text-gray-900"
|
||||
>
|
||||
{{ $motion->rm }}:{{ $motion->beteckning }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-medium text-gray-500 uppercase"
|
||||
>
|
||||
Datum
|
||||
</span>
|
||||
<p class="text-sm text-gray-900">
|
||||
{{ \Carbon\Carbon::parse($motion->datum)->format('Y-m-d') }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-medium text-gray-500 uppercase"
|
||||
>
|
||||
Status
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{
|
||||
$motion->status == 'Hänvisad'
|
||||
? 'bg-yellow-100 text-yellow-800'
|
||||
: ($motion->status == 'Avslutad'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800')
|
||||
}}"
|
||||
>
|
||||
{{ $motion->status }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-medium text-gray-500 uppercase"
|
||||
>
|
||||
Utskott
|
||||
</span>
|
||||
<p class="text-sm text-gray-900">
|
||||
{{ $motion->organ ?: '-' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (! empty($motion->summary))
|
||||
<p
|
||||
class="text-sm text-gray-700 line-clamp-3 mb-4"
|
||||
>
|
||||
{!! strip_tags($motion->summary, '<mark>') !!}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
class="flex-shrink-0 flex flex-row lg:flex-col gap-2"
|
||||
>
|
||||
<a
|
||||
wire:navigate
|
||||
href="{{ route('motion.show', $motion->dok_id) }}"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-center"
|
||||
>
|
||||
Visa detaljer
|
||||
</a>
|
||||
@if (! empty($motion->dokument_url_html))
|
||||
<a
|
||||
href="https:{{ $motion->dokument_url_html }}"
|
||||
target="_blank"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 text-center"
|
||||
>
|
||||
Läs motion
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md border border-gray-200 p-4"
|
||||
>
|
||||
@if ($paginatedMotions)
|
||||
{{ $paginatedMotions->links() }}
|
||||
@endif
|
||||
</div>
|
||||
@elseif (! empty($query) || ! empty($party) || ! empty($dateInterval))
|
||||
<!-- No Results -->
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md border border-gray-200 p-8 text-center"
|
||||
>
|
||||
<svg
|
||||
class="w-16 h-16 text-gray-400 mx-auto mb-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
></path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
||||
Inga motioner hittades
|
||||
</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Försök ändra dina sökkriterier.
|
||||
</p>
|
||||
<button
|
||||
wire:click="clearFilters"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Rensa filter
|
||||
</button>
|
||||
</div>
|
||||
@else
|
||||
<!-- Initial State -->
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md border border-gray-200 p-8 text-center"
|
||||
>
|
||||
<svg
|
||||
class="w-16 h-16 text-gray-400 mx-auto mb-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
||||
Börja din sökning
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
Använd sökfälten ovan för att hitta motioner.
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user