display updates
This commit is contained in:
Arnaud Delcasse
@@ -209,46 +209,103 @@
|
||||
|
||||
<div class="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<div class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
|
||||
<div>
|
||||
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-co bg-co-blue">
|
||||
{{$.IconSet.Icon "hero:outline/folder-plus" "h-6 w-6 text-white"}}
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-5">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Documents demandés</h3>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">Ajoutez des documents pour finaliser</p>
|
||||
<div class="relative transform overflow-hidden rounded-2xl bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<!-- Header -->
|
||||
<div class="bg-co-blue px-6 py-5">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-xl bg-white/20 backdrop-blur">
|
||||
{{$.IconSet.Icon "hero:outline/document-text" "h-6 w-6 text-white"}}
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-lg font-semibold text-white" id="modal-title">Documents demandés</h3>
|
||||
<p class="text-sm text-white/70">{{len $.ViewState.search.mandatory_documents}} document(s) requis pour cette réservation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form enctype="multipart/form-data" method="POST" action="/app/vehicles/v/{{.ID}}/b/{{$.ViewState.search.beneficiary.ID}}?startdate={{(timeFrom $.ViewState.search.startdate).Format "2006-01-02"}}&enddate={{(timeFrom $.ViewState.search.enddate).Format "2006-01-02"}}&starttime={{(timeFrom $.ViewState.search.startdate).Format "15:04"}}&endtime={{(timeFrom $.ViewState.search.enddate).Format "15:04"}}">
|
||||
{{range $.ViewState.search.mandatory_documents}}
|
||||
{{$type := .}}
|
||||
<div class="p-2"
|
||||
x-data="{
|
||||
select: '{{index $.ViewState.search.documents_defaults $type}}'
|
||||
}">
|
||||
<label for="type" class="block text-sm font-medium text-gray-700">{{index $.ViewState.search.file_types_map $type}}</label>
|
||||
<select x-model="select" id="type-{{$type}}" name="type-{{$type}}" class="mt-1 block w-full rounded-2xl border-gray-300 py-2 pl-3 pr-10 text-base focus:border-co-blue focus:outline-none focus:ring-co-blue sm:text-sm">
|
||||
{{range $.ViewState.search.beneficiary_documents}}
|
||||
{{if eq $type .Metadata.Type}}
|
||||
<option value="{{.Key}}">Fichier bénéficiaire : {{.Metadata.Name}}</option>
|
||||
{{end}}
|
||||
{{end}}
|
||||
<option value="">Ajouter un fichier</option>
|
||||
</select>
|
||||
<div x-show="select == ''" class="p-2">
|
||||
<input type="file" name="doc-{{$type}}" />
|
||||
<div class="px-6 py-5 space-y-4 max-h-96 overflow-y-auto">
|
||||
{{range $type := $.ViewState.search.mandatory_documents}}
|
||||
<div class="bg-gray-50 rounded-2xl p-4 border border-gray-200"
|
||||
x-data="{
|
||||
select: '{{index $.ViewState.search.documents_defaults $type}}',
|
||||
dragover: false
|
||||
}">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center">
|
||||
<span class="flex-shrink-0 inline-flex items-center justify-center h-8 w-8 rounded-xl bg-co-blue text-white">
|
||||
{{$.IconSet.Icon "hero:outline/document" "h-4 w-4"}}
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<label for="type-{{$type}}" class="block text-sm font-semibold text-gray-900">{{index $.ViewState.search.file_types_map $type}}</label>
|
||||
<p class="text-xs text-gray-500">Document obligatoire</p>
|
||||
</div>
|
||||
</div>
|
||||
<span x-show="select !== ''" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-co-green/20 text-co-green">
|
||||
{{$.IconSet.Icon "hero:solid/check-circle" "h-3.5 w-3.5 mr-1"}}
|
||||
Sélectionné
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<select x-model="select" id="type-{{$type}}" name="type-{{$type}}"
|
||||
class="block w-full rounded-2xl border-gray-300 py-2.5 pl-3 pr-10 text-sm focus:border-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue/20 transition-shadow">
|
||||
{{range $.ViewState.search.beneficiary_documents}}
|
||||
{{if eq $type .Metadata.Type}}
|
||||
<option value="{{.Key}}">{{.Metadata.Name}}</option>
|
||||
{{end}}
|
||||
{{end}}
|
||||
<option value="">Téléverser un nouveau fichier</option>
|
||||
</select>
|
||||
|
||||
<!-- File upload area -->
|
||||
<div x-show="select == ''" x-transition class="mt-3"
|
||||
x-data="{ fileName: '' }">
|
||||
<input type="file" name="doc-{{$type}}" x-ref="fileInput"
|
||||
@change="fileName = $event.target.files[0]?.name || ''"
|
||||
class="hidden" />
|
||||
<!-- Empty state: drop zone -->
|
||||
<div x-show="!fileName"
|
||||
class="relative border-2 border-dashed rounded-2xl p-4 text-center transition-colors cursor-pointer"
|
||||
:class="dragover ? 'border-co-blue bg-co-blue/5' : 'border-gray-300 hover:border-gray-400'"
|
||||
@click="$refs.fileInput.click()"
|
||||
@dragover.prevent="dragover = true"
|
||||
@dragleave.prevent="dragover = false"
|
||||
@drop.prevent="dragover = false; $refs.fileInput.files = $event.dataTransfer.files; fileName = $event.dataTransfer.files[0]?.name || ''">
|
||||
<div class="space-y-1">
|
||||
{{$.IconSet.Icon "hero:outline/cloud-arrow-up" "mx-auto h-8 w-8 text-gray-400"}}
|
||||
<p class="text-sm text-gray-600">Glissez un fichier ou <span class="text-co-blue font-medium">parcourir</span></p>
|
||||
<p class="text-xs text-gray-400">PDF, JPG, PNG jusqu'à 10Mo</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- File selected state -->
|
||||
<div x-show="fileName" class="flex items-center justify-between p-3 bg-co-green/10 border border-co-green/30 rounded-2xl">
|
||||
<div class="flex items-center min-w-0 cursor-pointer flex-1" @click="$refs.fileInput.click()">
|
||||
{{$.IconSet.Icon "hero:solid/document-check" "h-5 w-5 text-co-green flex-shrink-0"}}
|
||||
<span class="ml-2 text-sm text-gray-800 truncate" x-text="fileName"></span>
|
||||
<span class="ml-2 text-xs text-co-green hover:text-co-green/80">(modifier)</span>
|
||||
</div>
|
||||
<button type="button" @click="fileName = ''; $refs.fileInput.value = ''" class="ml-2 flex-shrink-0 text-co-red hover:text-co-red/80">
|
||||
{{$.IconSet.Icon "hero:outline/x-mark" "h-5 w-5"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="mt-5 sm:mt-6">
|
||||
<button type="submit" class="inline-flex w-full justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:text-sm">Réserver</button>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="bg-gray-50 px-6 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-3 border-t border-gray-200">
|
||||
<button @click="documentsdialog=false" type="button"
|
||||
class="w-full sm:w-auto inline-flex justify-center items-center px-4 py-2.5 border border-gray-300 rounded-2xl text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue transition-colors">
|
||||
Annuler
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="w-full sm:w-auto inline-flex justify-center items-center px-6 py-2.5 border border-transparent rounded-2xl text-sm font-medium text-white bg-co-blue hover:bg-co-blue/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue shadow-sm transition-colors">
|
||||
{{$.IconSet.Icon "hero:outline/check" "h-4 w-4 mr-2"}}
|
||||
Confirmer la réservation
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-5 sm:mt-6">
|
||||
<button @click="documentsdialog=false" type="button" class="inline-flex w-full justify-center max-w-xs bg-white hover:bg-gray-50 border-gray-300 border px-4 py-2 text-gray-700 items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Annuler</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -266,4 +323,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user