[fix] Responsive menu

This commit is contained in:
guillaume91 2024-05-27 11:59:09 +02:00
parent 8901441401
commit 70cd51379a
6 changed files with 193 additions and 175 deletions

View file

@ -27,7 +27,7 @@ class BuildReports extends Command
public function handle()
{
// TODO schedule all the project if mail
Project::find(1)->schedule();
}
}

View file

@ -1,5 +1,5 @@
@props(['value'])
@props(['value','disabled' => false])
<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700']) }}>
<label {{ $disabled ? 'disabled' : '' }} {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700 disabled:bg-red-100']) }}>
{{ $value ?? $slot }}
</label>

View file

@ -1,8 +1,8 @@
<div class="flex flex-col w-fit bg-white p-6 rounded-lg shadow divide-y divide-solid">
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'downloads') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'downloads'])}}">Downloads</a>
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'mosaics') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'mosaics'])}}">Mosaics</a>
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'reports') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'reports'])}}">Reports</a>
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'mailings') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'mailings'])}}">Mailings</a>
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'settings') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'settings'])}}">Settings</a>
<div class="flex flex-col bg-white p-6 gap-2 md:w-1/4">
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'downloads') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'downloads'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-calendar-check"></i> Downloads</a>
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mosaics') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mosaics'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-object-ungroup"></i>Mosaics</a>
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'reports') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'reports'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-flag"></i>Reports</a>
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mailings') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mailings'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-envelope"></i>Mailings</a>
<a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'settings') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'settings'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-compass"></i>Settings</a>
</div>
{{--TODO change to responsive menu--}}

View file

@ -5,8 +5,8 @@
{{-- TODO Put Back the poll but to the list of downloads only--}}
>
<div class="px-4 sm:px-6 lg:px-8">
<div class="sm:flex sm:flex-col sm:items-center">
<div class="flex justify-between w-full my-4">
<div class="sm:flex sm:flex-col">
<div class="flex flex-col md:flex-row md:justify-between items-center w-full my-4">
<h1 class="text-base font-semibold leading-6 text-gray-900">Downloads</h1>
@if ($project->hasPendingDownload())
<p class="text-base text-gray-700 animate-pulse">
@ -14,10 +14,10 @@
</p>
@endif
</div>
<div class="mt-4 sm:mt-0 sm:flex sm:justify-between w-full">
<x-search></x-search>
<div class="mt-4 sm:mt-0 flex flex-col sm:flex-row sm:justify-between gap-2">
<x-search class="flex-1 w-full"></x-search>
<x-button wire:click="openDownloadModal"
class="rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
class="rounded-md bg-indigo-600 px-3 py-2 justify-center text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
{{ __('Create Download') }}
</x-button>
</div>
@ -43,7 +43,7 @@ class="px-3 py-3.5 text-right pr-4 sm:pr-8 lg:pr-8 text-sm font-semibold text-gr
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tbody class="divide-y divide-gray-200 bg-white">
@foreach($downloads as $download)
<tr>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{ $download->name }}</td>

View file

@ -1,170 +1,187 @@
<div class="flex flex-col divide-y space-y-4">
<div id="edit">
<div class="flex flex-col my-2 py-2">
<div class="flex flex-col divide-y space-y-4 m-2">
<div id="edit" class="flex flex-col md:flex-row gap-2">
<div class="flex flex-col md:w-1/3">
<div class="text-xl font-bold ">
{{ __('Reports') }}
{{ __('General') }}
</div>
<div class="text-gray-500 text-md">
{{__('Report generator for generating reports')}}
{{__('Manage the general settings of this project and the reports.')}}
</div>
</div>
<form>
<!-- Token Name -->
<div class="mb-2">
<x-label for="name" value="{{ __('Name') }}"/>
<x-input id="name" type="text" class="mt-1 block w-full" wire:model="formData.name" autofocus/>
<x-input-error for="name" class="mt-2"/>
</div>
<div class="flex flex-col mb-2 gap-2">
<p>{{__('Pivot GeoJSON file.')}}</p>
<div id="pivot_file">
<livewire:dropzone
wire:model="pivotFiles"
:rules="['extensions:json,geojson','mimes:json,geojson']"
:key="'pivotFiles'"
/>
<div class="md:w-2/3">
<form>
<!-- Token Name -->
<div class="mb-2">
<x-label for="name" value="{{ __('Name') }}"/>
<x-input id="name" type="text" class="mt-1 block w-full" wire:model="formData.name" autofocus/>
<x-input-error for="name" class="mt-2"/>
</div>
@error('pivotFiles')
<span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
@enderror
</div>
<div class="flex flex-col mb-2 gap-2">
<p>{{__('Span GeoJSON file.')}}</p>
<div id="span_file">
<livewire:dropzone
wire:model="spanFiles"
:rules="['extensions:json,geojson','mimes:json,geojson']"
:key="'spanFiles'"
/>
</div>
@error('spanFiles')
<span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
@enderror
</div>
<div class="flex flex-col mb-2 gap-2">
<p>{{__('Harvested Data file.')}}</p>
<div id="harvest_file">
<livewire:dropzone
wire:model="harvestDataFiles"
:rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
:key="'harvest_file'"
/>
</div>
@error('harvest_file')
<span class="bg-red-100 text-red-400 p-1 rounded">{{ $message }}</span>
@enderror
</div>
</form>
</div>
<div id-="mail"
x-data="{showMail: null}"
x-init="showMail = !($wire.formData['mail_subject'] === null || $wire.formData['mail_subject'] === undefined || $wire.formData['mail_subject'] === '')"
class="flex flex-col">
<div class="flex justify-between my-4">
<div>
<span class="text-xl font-bold dark:text-gray-300">{{__('Mail')}}</span>
<div class="text-gray-500 text-md">
{{ __('Schedule a mail for this Project') }}
</div>
</div>
<label class="inline-flex items-center cursor-pointer gap-4">
<input x-ref="subject" type="checkbox" class="sr-only peer" @click="showMail = $el.checked" x-init="$el.checked = showMail">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
</label>
</div>
<form submit="saveMailSettings" >
<div class="col-span-6 sm:col-span-4">
<x-label for="email_subject" value="{{ __('Subject') }}"/>
<x-input id="email_subject" type="text"
class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
wire:model="formData.mail_subject"
x-bind:disabled="!showMail"
autofocus/>
<x-input-error for="mail_subject" class="mt-2"/>
</div>
<div class="col-span-6 sm:col-span-4">
<x-label for="email_template" value="{{ __('Template') }}"/>
<textarea id="email_template" type="text"
class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:bg-gray-50 disabled:text-gray-500"
wire:model="formData.mail_template"
x-bind:disabled="!showMail"
>
</textarea>
<x-input-error for="mail_template" class="mt-2"/>
</div>
<div class="col-span-6 sm:col-span-4">
<x-label for="email_frequency" value="{{ __('Frequency') }}"/>
<select id="email_frequency" class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500"
wire:model="formData.mail_frequency"
x-bind:disabled="!showMail"
>
@foreach(App\Helper::getMailFrequencies() as $frequency)
<option value="{{ $frequency }}">{{ $frequency }}</option>
@endforeach
</select>
<x-input-error for="mail_frequency" class="mt-2"/>
</div>
<div class="col-span-6 sm:col-span-4">
<x-label for="mail_day" value="{{ __('Day') }}"/>
<select id="mail_day"
wire:model="formData.mail_day"
x-bind:disabled="!showMail"
class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500">
@foreach(App\Helper::getDays() as $day)
<option value="{{ $day }}">{{ $day }}</option>
@endforeach
</select>
<x-input-error for="mail_day" class="mt-2"/>
</div>
<div class="col-span-6 sm:col-span-4 text-lg my-2 font-semibold">
{{ __('Recipients') }}
</div>
<div class="divide-y divide-indigo-200 divide-dashed">
@foreach($formData['mail_recipients'] as $key => $email_recipient)
<div class="col-span-6 sm:colspan-4 grid-cols-6 gap-1 my-1 py-2 flex justify-between">
<div class="">
<x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/>
<x-input id="mail_recipient_{{ $key }}_name" type="text"
class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
x-bind:disabled="!showMail"
wire:model="formData.mail_recipients.{{ $key }}.name" autofocus/>
<x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/>
</div>
<div class="flex-1">
<x-label for="bounding_box_{{ $key }}_top_left_latitude"
value="{{ __('Email') }}"/>
<x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
x-bind:disabled="!showMail"
wire:model="formData.mail_recipients.{{ $key }}.email"
autofocus/>
<x-input-error for="mail_recipients.{{ $key }}.email" class="mt-2"/>
</div>
<div class="flex">
@if( count($formData['mail_recipients']) > 1)
<button
class="cursor-pointer text-sm text-red-500 py-3 mx-2 self-end"
type="button"
wire:click="deleteEmailRecipient({{ $key }})"
wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}"
>
Delete
</button>
@endif
</div>
<div class="flex flex-col mb-2 gap-2">
<p>{{__('Pivot GeoJSON file.')}}</p>
<div id="pivot_file">
<livewire:dropzone
wire:model="pivotFiles"
:rules="['extensions:json,geojson','mimes:json,geojson']"
:key="'pivotFiles'"
/>
</div>
@endforeach
@error('pivotFiles')
<span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
@enderror
</div>
<div class="flex flex-col mb-2 gap-2">
<p>{{__('Span GeoJSON file.')}}</p>
<div id="span_file">
<livewire:dropzone
wire:model="spanFiles"
:rules="['extensions:json,geojson','mimes:json,geojson']"
:key="'spanFiles'"
/>
</div>
@error('spanFiles')
<span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
@enderror
</div>
<div class="flex flex-col mb-2 gap-2">
<p>{{__('Harvested Data file.')}}</p>
<div id="harvest_file">
<livewire:dropzone
wire:model="harvestDataFiles"
:rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
:key="'harvest_file'"
/>
</div>
@error('harvest_file')
<span class="bg-red-100 text-red-400 p-1 rounded">{{ $message }}</span>
@enderror
</div>
</form>
</div>
</div>
{{-- TODO change mail to something else and check schedule--}}
<div id="scheduling"
class="flex flex-col md:flex-row">
<div class="flex flex-col my-4 md:w-1/3">
<span class="text-xl font-bold dark:text-gray-300">{{__('Schedule')}}</span>
<div class="text-gray-500 text-md">
{{ __('Schedule an action for this project') }}
</div>
<div x-show="showMail" class="flex">
<x-secondary-button class="mr-3"
type="button"
wire:click="addEmailRecipient"
>
{{ __('Add recipient') }}
</x-secondary-button>
</div>
<div id="mail"
class="flex flex-col md:w-2/3"
x-data="{showMail: null}"
x-init="showMail = !($wire.formData['mail_subject'] === null || $wire.formData['mail_subject'] === undefined || $wire.formData['mail_subject'] === '')"
> {{-- flex col--}}
<div class="flex justify-between my-4">
<div class="inline-flex items-center gap-2">
{{-- <span class="text-lg font-semibold dark:text-gray-300">{{__('Mail')}}</span>---}}
<div class=" text-md font-bold">
{{ __('Send a mail to recipients periodically') }}
</div>
</div>
<label class="inline-flex items-center cursor-pointer gap-4">
<input x-ref="subject" type="checkbox" class="sr-only peer" @click="showMail = $el.checked" x-init="$el.checked = showMail">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
</label>
</div>
</form>
<div class="flex w-full ">
<form submit="saveMailSettings">
<div class="col-span-6 sm:col-span-4">
<x-label for="email_subject" value="{{ __('Subject') }}"/>
<x-input id="email_subject" type="text"
class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
wire:model="formData.mail_subject"
x-bind:disabled="!showMail"
autofocus/>
<x-input-error for="mail_subject" class="mt-2"/>
</div>
<div class="col-span-6 sm:col-span-4">
<x-label for="email_template" value="{{ __('Template') }}"/>
<textarea id="email_template" type="text"
class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:bg-gray-50 disabled:text-gray-500"
wire:model="formData.mail_template"
x-bind:disabled="!showMail"
>
</textarea>
<x-input-error for="mail_template" class="mt-2"/>
</div>
<div class="col-span-6 sm:col-span-4">
<x-label for="email_frequency" value="{{ __('Frequency') }}"/>
<select id="email_frequency"
class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500"
wire:model="formData.mail_frequency"
x-bind:disabled="!showMail"
>
@foreach(App\Helper::getMailFrequencies() as $frequency)
<option value="{{ $frequency }}">{{ $frequency }}</option>
@endforeach
</select>
<x-input-error for="mail_frequency" class="mt-2"/>
</div>
<div class="col-span-6 sm:col-span-4">
<x-label for="mail_day" value="{{ __('Day') }}"/>
<select id="mail_day"
wire:model="formData.mail_day"
x-bind:disabled="!showMail"
class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500">
@foreach(App\Helper::getDays() as $day)
<option value="{{ $day }}">{{ $day }}</option>
@endforeach
</select>
<x-input-error for="mail_day" class="mt-2"/>
</div>
<div class="col-span-6 sm:col-span-4 text-lg my-2 font-semibold">
{{ __('Recipients') }}
</div>
<div class="divide-y divide-indigo-200 divide-dashed">
@foreach($formData['mail_recipients'] as $key => $email_recipient)
<div class="gap-1 my-1 py-2 flex flex-col md:flex-row justify-between">
<div class="">
<x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/>
<x-input id="mail_recipient_{{ $key }}_name" type="text"
class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
x-bind:disabled="!showMail"
wire:model="formData.mail_recipients.{{ $key }}.name" autofocus/>
<x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/>
</div>
<div class="">
<x-label for="bounding_box_{{ $key }}_top_left_latitude"
value="{{ __('Email') }}"/>
<x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
x-bind:disabled="!showMail"
wire:model="formData.mail_recipients.{{ $key }}.email"
autofocus/>
<x-input-error for="mail_recipients.{{ $key }}.email" class="mt-2"/>
</div>
<div class="flex">
@if( count($formData['mail_recipients']) > 1)
<button
class="cursor-pointer text-sm text-red-500 disabled:cursor-default disabled:opacity-0 py-3 mx-2 self-end"
type="button"
x-bind:disabled="!showMail"
wire:click="deleteEmailRecipient({{ $key }})"
wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}"
>
Delete
</button>
@endif
</div>
</div>
@endforeach
</div>
<div x-show="showMail" class="flex">
<x-secondary-button class="mr-3"
type="button"
wire:click="addEmailRecipient"
>
{{ __('Add recipient') }}
</x-secondary-button>
</div>
</form>
</div>
</div>
</div>
<div class="flex justify-end items-center py-4">
<span>

View file

@ -4,9 +4,10 @@
{{ __('Project') }} {{ $project->name}}
</h2>
</x-slot>
<div id="main" class="flex">
{{-- TODO search bar blinking --}}
<div id="main" class="flex flex-col md:flex-row w-full min-h-screen shadow rounded-lg overflow-hidden">
<livewire:projects.menu :project-name="$project->name" :project-id="$project->id" :active-tab="$currentTab"></livewire:projects.menu>
<div class="flex-1 p-4 ml-2 rounded-lg bg-white shadow">
<div class="flex-1 p-4 bg-white md:w-3/4">
@switch($currentTab)
@case('downloads')
<livewire:projects.tabs.download :project="$project"></livewire:projects.tabs.download>