feat(ui): les utilisateurs peuvent glisser/déposer les documents pour les uploader (#643)

packages/ui/src/components/_common/section-element-file-edit.vue

@@ -8,13 +8,13 @@
     </div>
   </div>
   <div v-else>
-    <InputFile class="btn-border small p-s full-x rnd-xs mb-s" accept="application/pdf" @change="fileChange" />
+    <InputFile class="btn-border small p-s full-x rnd-xs mb-s" :accept="documents" :uploadFile="fileChange" />
     <p class="h5 italic">30 Mo max.</p>
   </div>
 </template>
 
 <script>
-import InputFile from '../_ui/input-file.vue'
+import { InputFile } from '../_ui/dsfr-input-file'
 import { ButtonIcon } from '@/components/_ui/button-icon'
 
 export default {
@@ -24,6 +24,11 @@ export default {
     contenu: { type: [Object], required: true },
     elementId: { type: String, required: true },
   },
+  data: function () {
+    return {
+      documents: ['pdf'],
+    }
+  },
 
   computed: {
     contenuElement() {
@@ -32,13 +37,8 @@ export default {
   },
 
   methods: {
-    fileChange({
-      target: {
-        validity,
-        files: [file],
-      },
-    }) {
-      if (file && validity.valid) {
+    fileChange(file) {
+      if (file) {
         this.contenu[this.elementId] = file
       }
     },

packages/ui/src/components/_ui/input-file.vue

-<template>
-  <label v-bind="$attrs">
-    Choisir un fichier…
-    <input type="file" class="p-xs mb-0" :accept="accept" @change="$emit('change', $event)" />
-  </label>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  props: {
-    accept: {
-      type: String,
-      default: '',
-    },
-  },
-
-  emits: ['change'],
-})
-</script>

packages/ui/src/components/document/sections-edit.vue

@@ -46,7 +46,7 @@
           </div>
         </div>
         <div v-else>
-          <InputFile class="btn-border small p-s full-x rnd-xs mb-s" @change="fileChange" />
+          <InputFile class="btn-border small p-s full-x rnd-xs mb-s" :accept="fichiersTypesIds" :uploadFile="fileChange" />
           <p class="h5 italic">30 Mo max.</p>
         </div>
       </div>
@@ -141,7 +141,7 @@
 
 <script>
 import { InputDate } from '../_ui/input-date'
-import InputFile from '../_ui/input-file.vue'
+import { InputFile } from '../_ui/dsfr-input-file'
 import { Messages } from '../_ui/messages'
 import { ButtonIcon } from '@/components/_ui/button-icon'
 import { isAdministrationAdmin, isAdministrationEditeur, isBureauDEtudes, isEntreprise, isSuper } from 'camino-common/src/roles'
@@ -209,20 +209,11 @@ export default {
     dateChanged(date) {
       this.document.date = date
     },
-    fileChange({
-      target: {
-        validity,
-        files: [file],
-      },
-    }) {
-      if (file && validity.valid && file.type === 'application/pdf') {
-        this.warnings = []
-        this.document.fichierNouveau = file
-        this.document.fichier = true
-        this.document.fichierTypeId = 'pdf'
-      } else {
-        this.warnings = [{ type: 'warning', value: 'seuls les fichiers pdf sont acceptés' }]
-      }
+    fileChange(file) {
+      this.warnings = []
+      this.document.fichierNouveau = file
+      this.document.fichier = true
+      this.document.fichierTypeId = 'pdf'
     },
 
     fileRemove() {

packages/ui/src/components/etape/entreprises-documents-edit.tsx

@@ -2,9 +2,8 @@ import { caminoDefineComponent, isEventWithTarget } from '@/utils/vue-tsx-utils'
 import { HelpTooltip } from '../_ui/help-tooltip'
 import { dateFormat } from '@/utils'
 import { Tag } from '../_ui/tag'
-import { Icon } from '@/components/_ui/icon'
 import { computed, onMounted, ref, watch } from 'vue'
-import { EntrepriseDocumentId, EntrepriseId, EtapeEntrepriseDocument, entrepriseDocumentIdValidator, isEntrepriseId } from 'camino-common/src/entreprise'
+import { EntrepriseDocumentId, EntrepriseId, entrepriseDocumentIdValidator, isEntrepriseId } from 'camino-common/src/entreprise'
 import { DocumentsTypes, EntrepriseDocumentType, EntrepriseDocumentTypeId } from 'camino-common/src/static/documentsTypes'
 import { getEntries, getKeys } from 'camino-common/src/typescript-tools'
 import { AddEntrepriseDocumentPopup } from '../entreprise/add-entreprise-document-popup'

packages/ui/src/components/etape/points-import-popup.vue

@@ -16,8 +16,7 @@
     </div>
 
     <div v-if="geoSystemeId">
-      <InputFile class="btn-border small bg-alt p-s full-x rnd-xs mb-s" accept=".shp,.geojson" @change="fileChange" />
-      <p class="h6 italic mt-0">Seul les fichiers Shape (.shp) et GeoJson (.geojson) sont acceptés.</p>
+      <InputFile class="btn-border small bg-alt p-s full-x rnd-xs mb-s" :accept="documents" :uploadFile="fileChange" />
     </div>
     <template #footer>
       <div v-if="!loading" class="tablet-blobs">
@@ -31,7 +30,7 @@
 </template>
 
 <script>
-import InputFile from '../_ui/input-file.vue'
+import { InputFile } from '../_ui/dsfr-input-file'
 import Popup from '../_ui/popup.vue'
 import { sortedGeoSystemes } from 'camino-common/src/static/geoSystemes'
 
@@ -44,6 +43,7 @@ export default {
   data: function () {
     return {
       geoSystemeId: null,
+      documents: ['geojson', 'shp'],
     }
   },
 
@@ -70,11 +70,7 @@ export default {
   },
 
   methods: {
-    async fileChange({
-      target: {
-        files: [file],
-      },
-    }) {
+    async fileChange(file) {
       await this.$store.dispatch('titreEtapeEdition/pointsImport', {
         file,
         geoSystemeId: this.geoSystemeId,