From 1f7515cf92adcb8352185f2739f1593e16367d19 Mon Sep 17 00:00:00 2001
From: Nicolas CARON <nicolas.caron@coopgo.fr>
Date: Mon, 10 Feb 2025 16:17:00 +0100
Subject: [PATCH] Add documents & delete JSON_Scheme and JSON_UI on diags

---
 config.yaml                                   |   1 +
 web/layouts/beneficiaries/create-diag.html    |  10 +-
 web/layouts/diags/_partials/diags-files.html  | 132 ++++++++++++++++++
 web/layouts/diags/display-diag.html           |  16 ++-
 web/layouts/vehicles/create-booking-diag.html |  10 +-
 .../create-vehicle-diag.html                  |  10 +-
 6 files changed, 153 insertions(+), 26 deletions(-)
 create mode 100644 web/layouts/diags/_partials/diags-files.html

diff --git a/config.yaml b/config.yaml
index e0e307d..9897eb3 100644
--- a/config.yaml
+++ b/config.yaml
@@ -191,6 +191,7 @@ views:
     display_diag:
       files:
         - web/layouts/diags/display-diag.html
+        - web/layouts/diags/_partials/diags-files.html
     delete:
       files:
         - web/layouts/diags/delete-diag.html
diff --git a/web/layouts/beneficiaries/create-diag.html b/web/layouts/beneficiaries/create-diag.html
index 6ebbf34..d91e96e 100644
--- a/web/layouts/beneficiaries/create-diag.html
+++ b/web/layouts/beneficiaries/create-diag.html
@@ -9,21 +9,15 @@
         fields: {
             name: null,
             namespace: 'parcoursmob_beneficiaries',
-            json_schema: null,
-            ui_schema: null,
         },
         rules: {
             name: ['required'],
             namespace: ['required'],
-            json_schema: ['required'],
-            ui_schema: ['required']
         },
         formValidation: {
             valid: false,
             fields: {
                 name: {valid: null},
-                json_schema: {valid: null},
-                ui_schema: {valid: null},
             }
         },
         isFormValid: true,
@@ -64,7 +58,7 @@
             </div>
         </div>
         <input type="hidden" name="namespace" value="parcoursmob_beneficiaries" />
-        <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6 mt-6">
+        <!-- <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6 mt-6">
             <div class="md:grid md:grid-cols-3 md:gap-6">
                 <div class="md:col-span-1">
                     <h3 class="text-lg font-medium leading-6 text-gray-900">Schéma JSON</h3>
@@ -101,7 +95,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </div> -->
         <div class="flex justify-end">
             <p x-show="! isFormValid" class="px-4 py-2 text-sm text-co-red">Certains champs de sont pas valides.</p>
             <a href="/app/beneficiaries/{{.ViewState.beneficiary}}">
diff --git a/web/layouts/diags/_partials/diags-files.html b/web/layouts/diags/_partials/diags-files.html
new file mode 100644
index 0000000..f3f2e5e
--- /dev/null
+++ b/web/layouts/diags/_partials/diags-files.html
@@ -0,0 +1,132 @@
+{{define "diags_files"}}
+<div class="px-4 py-6 sm:px-6"
+x-data="{
+    fields: {
+        name: null,
+        type: diagnostic,
+        file: null,
+    },
+    rules: {
+        name: ['required'],
+        type: ['required'],
+        file: ['required'],
+    },
+    formValidation: {
+        valid: false,
+        fields: {
+            name: {valid: null},
+            type: {valid: null},
+            file: {valid: null},
+        }
+    },
+    isFormValid: true,
+    validate() {
+        this.formValidation = Iodine.assert(this.fields, this.rules)
+    },
+    validateField(field) {
+        this.formValidation.fields[field] = Iodine.assert(this.fields[field], this.rules[field])
+    },
+    submit(event) {
+        this.validate()
+        if(!this.formValidation.valid) {
+            this.isFormValid = false
+            event.preventDefault()
+        }
+        return this.formValidation.valid
+    }
+}">
+    {{if eq (len .ViewState.documents) 0}}
+    <p class="p-12 text-gray-500 text-center text-md">Aucun document</p>
+    {{end}}
+    
+    {{if gt (len .ViewState.documents) 0}}
+    
+    <div class="-mx-4 mb-10 ring-1 ring-gray-300 sm:-mx-6 md:mx-0 md:rounded-lg">
+        <table class="min-w-full divide-y divide-gray-300">
+          <thead>
+            <tr>
+              <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Type</th>
+              <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Nom du document</th>
+              <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Ajouté le</th>
+              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                <span class="sr-only">Actions</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {{range .ViewState.documents}}
+            <tr>
+              <td class="relative py-4 pl-4 sm:pl-6 pr-3 text-sm">
+                <div class="font-medium text-gray-900">
+                    <span class="bg-co-blue text-xs text-white rounded-xl p-1 mr-2">{{index $.ViewState.file_types_map .Metadata.Type}}</span>
+                </div>
+              </td>
+              <td class="px-3 py-3.5 text-sm text-gray-900 lg:table-cell">{{.Metadata.Name}}</td>
+              <td class="px-3 py-3.5 text-sm text-gray-500 lg:table-cell">{{.LastModified.Format "02/01/2006"}}</td>
+              <td class="relative py-3.5 pl-3 pr-4 sm:pr-6 text-right text-sm font-medium">
+                <a href="/app/diags/{{$.ViewState.diag.ID}}/documents/{{.FileName}}" target="_blank">
+                <button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30">Voir<span class="sr-only"> le document</span></button>
+                </a>
+              </td>
+            </tr>
+            {{end}}
+    
+    
+            <!-- More plans... -->
+          </tbody>
+        </table>
+      </div>
+    
+    {{end}}
+    <h3 class="text-lg">Ajouter un document</h3>
+    <form method="POST" action="/app/diags/{{.ViewState.diag.ID}}/documents"  @submit="submit"  enctype="multipart/form-data">
+        <div class="md:grid md:grid-cols-6 p-2">
+          <div class="sm:col-span-2">
+            <label for="type" class="block text-sm font-medium text-gray-700">Type</label>
+            <select id="type" name="type" class="mt-1 block w-full rounded-l-2xl border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                x-model="fields.type" @blur="validateField('type')"
+                :class="formValidation.fields.type.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
+                <option value="" selected>Sélectionner un type</option>
+                {{range .ViewState.events_file_types}}
+                <option value="{{.}}">{{index $.ViewState.file_types_map .}}</option>
+                {{end}}
+            </select>
+          </div>
+              <div class="sm:col-span-4">
+                <label for="name" class="block text-sm font-medium text-gray-700">Nom</label>
+                      <input type="text" name="name" id="name"
+                          placeholder="Nom du fichier"
+                          class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm  rounded-r-2xl"
+                          x-model="fields.name" @blur="validateField('name')"
+                          :class="formValidation.fields.name.valid == false ? 'border-co-red border-2' : 'border-gray-300'" />
+              </div>
+              <div class="sm:col-span-6 mt-4">
+                <label for="cover-photo" class="block text-sm font-medium text-gray-700">Téléchargement</label>
+                <div class="mt-1 flex justify-center rounded-md border-2 border-dashed px-6 pt-5 pb-6"
+                x-on:drop="console.log('toto')"
+                :class="formValidation.fields.file.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
+                  <div class="space-y-1 text-center">
+                    {{.IconSet.Icon "hero:outline/folder-plus" "mx-auto h-12 w-12 text-gray-400"}}
+                    <div class="flex text-sm text-gray-600">
+                      <label for="file-upload" class="relative cursor-pointer rounded-md bg-white font-medium text-co-blue focus-within:outline-none focus-within:ring-2 focus-within:ring-co-blue focus-within:ring-offset-2 hover:text-co-blue">
+                        <span>Sélectionnez un fichier </span>
+                        <input id="file-upload" name="file-upload" type="file" class="sr-only"
+                        x-model="fields.file" @blur="validateField('file')">
+                      </label>
+                      <!-- <p class="pl-1">ou glissez-déposez</p>  -->
+
+                        
+                    </div>
+                    <p class="text-xs text-gray-500">Jusqu'à 10MB</p>
+                    <p class="text-co-blue p-2" x-text="fields.file" x-if="fields.file"></p>
+                  </div>
+                </div>
+              </div>
+        </div>
+        <button type="submit"
+            class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
+            Ajouter le document
+        </button>
+    </form>
+</div>
+{{end}}
diff --git a/web/layouts/diags/display-diag.html b/web/layouts/diags/display-diag.html
index 4f081eb..cfc5718 100644
--- a/web/layouts/diags/display-diag.html
+++ b/web/layouts/diags/display-diag.html
@@ -49,7 +49,7 @@
                                 <dd class="mt-1 text-sm text-gray-900">Diagnostic véhicule réservé</dd>
                             </div>
                             {{end}}
-                            {{if .ViewState.diag.Json_schema}}
+                            <!-- {{if .ViewState.diag.Json_schema}}
                             <div class="sm:col-span-2">
                                 <dt class="text-sm font-medium text-gray-500">JSON_schema</dt>
                                 <dd class="mt-1 text-sm text-gray-900">{{.ViewState.diag.Json_schema}}</dd>
@@ -60,9 +60,21 @@
                                 <dt class="text-sm font-medium text-gray-500">UI_schema</dt>
                                 <dd class="mt-1 text-sm text-gray-900">{{.ViewState.diag.Ui_schema}}</dd>
                             </div>
-                            {{end}}
+                            {{end}} -->
                         </dl>
                     </div>
                 </div>
             </section>
+            <div class="mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 sm:px-6 lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3">
+                <div class="space-y-6 lg:col-start-1 lg:col-span-2">
+                    <section aria-labelledby="event-documents">
+                        <div class="bg-white mt-4 px-4 py-5 shadow sm:rounded-lg sm:px-6">
+                            <h2 id="documents-title" class="text-lg font-medium text-gray-900">Documents</h2>
+                            <div class="flex justify-between items-center">
+                                <div>{{template "diags_files" .}}</div>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
 {{ end }}
\ No newline at end of file
diff --git a/web/layouts/vehicles/create-booking-diag.html b/web/layouts/vehicles/create-booking-diag.html
index 15382f7..8fd6d26 100644
--- a/web/layouts/vehicles/create-booking-diag.html
+++ b/web/layouts/vehicles/create-booking-diag.html
@@ -9,21 +9,15 @@
         fields: {
             name: null,
             namespace: 'parcoursmob_bookings',
-            json_schema: null,
-            ui_schema: null,
         },
         rules: {
             name: ['required'],
             namespace: ['required'],
-            json_schema: ['required'],
-            ui_schema: ['required']
         },
         formValidation: {
             valid: false,
             fields: {
                 name: {valid: null},
-                json_schema: {valid: null},
-                ui_schema: {valid: null},
             }
         },
         isFormValid: true,
@@ -64,7 +58,7 @@
             </div>
         </div>
         <input type="hidden" name="namespace" value="parcoursmob_bookings" />
-        <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6 mt-6">
+        <!-- <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6 mt-6">
             <div class="md:grid md:grid-cols-3 md:gap-6">
                 <div class="md:col-span-1">
                     <h3 class="text-lg font-medium leading-6 text-gray-900">Schéma JSON</h3>
@@ -101,7 +95,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </div> -->
         <div class="flex justify-end">
             <p x-show="! isFormValid" class="px-4 py-2 text-sm text-co-red">Certains champs de sont pas valides.</p>
             <a href="/app/vehicles/bookings/{{.ViewState.booking}}">
diff --git a/web/layouts/vehicles_management/create-vehicle-diag.html b/web/layouts/vehicles_management/create-vehicle-diag.html
index a11cca3..dc234af 100644
--- a/web/layouts/vehicles_management/create-vehicle-diag.html
+++ b/web/layouts/vehicles_management/create-vehicle-diag.html
@@ -9,21 +9,15 @@
         fields: {
             name: null,
             namespace: 'parcoursmob_vehicles',
-            json_schema: null,
-            ui_schema: null,
         },
         rules: {
             name: ['required'],
             namespace: ['required'],
-            json_schema: ['required'],
-            ui_schema: ['required']
         },
         formValidation: {
             valid: false,
             fields: {
                 name: {valid: null},
-                json_schema: {valid: null},
-                ui_schema: {valid: null},
             }
         },
         isFormValid: true,
@@ -64,7 +58,7 @@
             </div>
         </div>
         <input type="hidden" name="namespace" value="parcoursmob_vehicles" />
-        <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6 mt-6">
+        <!-- <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6 mt-6">
             <div class="md:grid md:grid-cols-3 md:gap-6">
                 <div class="md:col-span-1">
                     <h3 class="text-lg font-medium leading-6 text-gray-900">Schéma JSON</h3>
@@ -101,7 +95,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </div> -->
         <div class="flex justify-end">
             <p x-show="! isFormValid" class="px-4 py-2 text-sm text-co-red">Certains champs de sont pas valides.</p>
             <a href="/app/vehicles-management/fleet/{{.ViewState.vehicle}}">