362 lines
18 KiB
PHP
362 lines
18 KiB
PHP
<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>
|