[Done] Added new font-gis icons in the dropzone.

This commit is contained in:
guillaume91 2024-06-20 10:30:14 +02:00
parent 8fe00b55d7
commit aa477268ec
6 changed files with 26 additions and 89 deletions

View file

@ -0,0 +1,10 @@
<?php
namespace App\Livewire\Components;
use Dasundev\LivewireDropzone\Http\Livewire\Dropzone;
class CustomDropzone extends Dropzone
{
public $type = '';
}

View file

@ -1,81 +0,0 @@
@props([
'formData',
/** @var \App\Livewire\Projects\ProjectManager */
'projectManager'
])
<x-modal wire:model.live="showProjectModal" {{ $attributes }}>
<x-form-modal submit="saveProject">
<x-slot name="title">
{{ __('Project') }}
</x-slot>
<x-slot name="description">
{{ __('Report generator for generating reports') }}
</x-slot>
<x-slot name="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>
@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>
</x-slot>
<x-slot name="actions">
<x-action-message class="mr-3" on="saved">
{{ __('Saved.') }}
</x-action-message>
<x-secondary-button class="mr-3"
type="button"
x-on:click="$wire.showProjectModal = false"
>
{{ __('Cancel') }}
</x-secondary-button>
<x-button>
{{ __('Save') }}
</x-button>
</x-slot>
</x-form-modal>
</x-modal>

View file

@ -1,6 +1,6 @@
<div> <div>
<x-project-manager-mail-settings-modal :projectManager="$this"/> <x-project-manager-mail-settings-modal :projectManager="$this"/>
<x-project-manager-properties-modal :projectManager="$this"/> {{-- <x-project-manager-properties-modal :projectManager="$this"/>--}}
<x-project-manager-grid :projectManager="$this"/> <x-project-manager-grid :projectManager="$this"/>
<x-project-manager-delete-confirmation-modal/> <x-project-manager-delete-confirmation-modal/>
</div> </div>

View file

@ -3,5 +3,5 @@
<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-6 text-gray-400 fg-mosaic fg-lg"></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 == '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-6 text-gray-400 fg-mosaic fg-lg"></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-6 text-gray-400 fg-map-stat fg-lg"></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 == '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-6 text-gray-400 fg-map-stat fg-lg"></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-6 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 == '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-6 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-6 text-gray-400 fa-regular fg-earth-gear fg-lg"></i>Settings</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-6 text-gray-400 fa-solid fa-gear"></i>Settings</a>
</div> </div>

View file

@ -114,9 +114,10 @@
<div class="flex flex-col mb-2 gap-2"> <div class="flex flex-col mb-2 gap-2">
<p>{{__('Pivot GeoJSON file.')}}</p> <p>{{__('Pivot GeoJSON file.')}}</p>
<div id="pivot_file"> <div id="pivot_file">
<livewire:dropzone <livewire:components.custom-dropzone
wire:model="pivotFiles" wire:model="pivotFiles"
wire:key="'pivotFiles'" wire:key="'pivotFiles'"
:type="'pivot'"
/> />
</div> </div>
@error('pivotFiles') @error('pivotFiles')
@ -136,9 +137,10 @@
<div class="flex flex-col mb-2 gap-2"> <div class="flex flex-col mb-2 gap-2">
<p>{{__('Span GeoJSON file.')}}</p> <p>{{__('Span GeoJSON file.')}}</p>
<div id="span_file"> <div id="span_file">
<livewire:dropzone <livewire:components.custom-dropzone
wire:model="spanFiles" wire:model="spanFiles"
wire:key="'spanFiles'" wire:key="'spanFiles'"
:type="'span'"
/> />
</div> </div>
@error('spanFiles') @error('spanFiles')
@ -158,11 +160,11 @@
<div class="flex flex-col mb-2 gap-2"> <div class="flex flex-col mb-2 gap-2">
<p>{{__('Harvested Data file.')}}</p> <p>{{__('Harvested Data file.')}}</p>
<div id="harvest_file"> <div id="harvest_file">
<livewire:dropzone <livewire:components.custom-dropzone
wire:model="harvestDataFiles" wire:model="harvestDataFiles"
:rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']" :rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
:key="'harvest_file'"
wire:key="'harvest_file'" wire:key="'harvest_file'"
:type="'harvest'"
/> />
</div> </div>
@error('harvest_file') @error('harvest_file')

View file

@ -37,7 +37,13 @@ class="w-full antialiased"
<div x-show="!isDragging" class="flex flex-col items-center justify-center gap-2 py-8 h-full "> <div x-show="!isDragging" class="flex flex-col items-center justify-center gap-2 py-8 h-full ">
<div class="flex items-center justify-center gap-2"> <div class="flex items-center justify-center gap-2">
{{-- TODO change depending on the file type props etc--}} {{-- TODO change depending on the file type props etc--}}
<i class="fg-geojson-file fg-3x"></i> <i class="@php
echo match ($type){
'pivot','span' => 'fg-geojson-file fg-3x',
'harvest' => 'fg-map-stat fg-3x',
default => 'fa-solid fa-file-arrow-down'
}
@endphp fill-red-100"></i>
<p class="text-md ">Drop here or <span class="font-semibold text-black dark:text-white">Browse file </span> <p class="text-md ">Drop here or <span class="font-semibold text-black dark:text-white">Browse file </span>
</p> </p>
</div> </div>