codevdesign 1.0.35 → 1.0.36

package/composants/csqcEditeurTexteRiche.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="editor">
+    <Editor
+      v-if="editorReady"
+      v-bind="$attrs"
+      v-model="editorValue"
+      :init="initOptions"
+      :disabled="desactiver"
+      license-key="gpl"
+      @blur="onBlur"
+      @keydown="onUserActivity"
+      @change="onUserActivity"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+
+  import { computed, ref, watch, nextTick } from 'vue'
+  import Editor from '@tinymce/tinymce-vue'
+  import type { Editor as TinyMCEEditor } from 'tinymce'
+
+  // Core / skins / thème
+  import 'tinymce/tinymce.js'
+  import 'tinymce/icons/default/icons.min.js'
+  import 'tinymce/themes/silver/theme.min.js'
+  import 'tinymce/models/dom/model.min.js'
+  import 'tinymce/skins/ui/oxide/skin.js'
+  import 'tinymce/skins/ui/oxide/content.js'
+  import 'tinymce/skins/content/default/content.js'
+
+  // Langue
+  import 'tinymce-i18n/langs7/fr_FR'
+
+  // Plugins
+  import 'tinymce/plugins/autoresize/plugin.min.js'
+  import 'tinymce/plugins/advlist/plugin.min.js'
+  import 'tinymce/plugins/lists/plugin.min.js'
+  import 'tinymce/plugins/link/plugin.min.js'
+  import 'tinymce/plugins/autolink/plugin.min.js'
+  import 'tinymce/plugins/fullscreen/plugin.min.js'
+  import 'tinymce/plugins/table/plugin.min.js'
+  import 'tinymce/plugins/image/plugin.min.js'
+  import 'tinymce/plugins/code/plugin.min.js'
+
+  const openLink = (url?: string | null, target?: string | null) => {
+    if (!url) return
+    if (import.meta.env.MODE !== 'development') {
+      if (target && target !== '_blank') {
+        document.location.href = url
+        return
+      }
+      window.open(url, target || '_blank', 'noopener,noreferrer')
+    }
+  }
+
+  type PluginsProp = string | string[]
+  type ToolbarProp = string | string[]
+
+  interface Props {
+    modelValue?: string
+    langue?: string
+    interdireRedimension?: boolean
+    desactiver?: boolean
+    plugins?: PluginsProp // optionnel
+    autoriserImage?: boolean
+    imageTailleMaximale?: number
+    cacherBarreMenu?: boolean
+    cacherBarreOutils?: boolean
+    toolbar?: ToolbarProp // optionnel
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: '',
+    langue: 'fr_FR',
+    interdireRedimension: false,
+    desactiver: false,
+    plugins: 'autoresize table image link fullscreen advlist lists autolink code',
+    autoriserImage: false,
+    imageTailleMaximale: 5,
+    cacherBarreMenu: false,
+    cacherBarreOutils: false,
+    toolbar:
+      'print | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | ' +
+      'alignleft aligncenter alignright alignjustify | bullist numlist | ' +
+      'image | link | outdent indent blockquote | undo redo | fullscreen | removeformat | table | code',
+  })
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+    (e: 'blur'): void
+  }>()
+
+  const editorReady = ref(true)
+  const editorValue = ref<string>(props.modelValue)
+  const _editor = ref<TinyMCEEditor | null>(null)
+  const _reinitPending = ref(false)
+  const _reinitLock = ref(false)
+
+  const imageTailleMaxMo = computed<number>(() => {
+    const n = Number(props.imageTailleMaximale)
+    if (!Number.isFinite(n)) return 5
+    return Math.min(100, Math.max(0, n))
+  })
+
+  const normalizeToolbar = (tb: string): string => {
+    const trimmed = (tb || '').trim()
+    return trimmed && trimmed !== '|' ? trimmed : 'undo redo'
+  }
+
+  const toolbarEffective = computed<string | false>(() => {
+    if (props.cacherBarreOutils) return false
+
+    const raw = Array.isArray(props.toolbar) ? props.toolbar.join(' | ') : props.toolbar
+    if (props.autoriserImage) return normalizeToolbar(raw)
+
+    const sansImage = raw
+      .replace(/\bimage\b/g, '')
+      .replace(/\s*\|\s*/g, ' | ')
+      .replace(/(\s*\|\s*){2,}/g, ' | ')
+      .replace(/^\s*\|\s*|\s*\|\s*$/g, '')
+      .replace(/\s{2,}/g, ' ')
+      .trim()
+
+    return normalizeToolbar(sansImage)
+  })
+
+  const pluginsEffective = computed<string>(() => {
+    const list = (Array.isArray(props.plugins) ? props.plugins : props.plugins.split(/\s+/))
+      .map(p => p.trim())
+      .filter(Boolean)
+
+    const filtered = !props.autoriserImage ? list.filter(p => p !== 'image') : list
+    return filtered.join(' ')
+  })
+
+  const initOptions = computed<any>(() => {
+    const opts: any = {
+      autolink: !props.desactiver,
+      autoresize: true,
+      automatic_uploads: props.autoriserImage,
+      branding: false,
+      browser_spellcheck: true,
+      content_css: 'default',
+      deprecation_warnings: false,
+      highlight_on_focus: false,
+      image_dimensions: true,
+      language: props.langue === 'en' ? 'en_US' : 'fr_FR',
+      license_key: 'gpl',
+      menubar: !props.cacherBarreMenu,
+      object_resizing: true,
+      paste_data_images: props.autoriserImage,
+      plugins: pluginsEffective.value,
+      promotion: false,
+      readonly: props.desactiver,
+      resize: !props.interdireRedimension,
+      resize_img_proportional: props.autoriserImage,
+      skin_url: 'default',
+      statusbar: props.cacherBarreOutils === false,
+      theme_advanced_resizing: true,
+      theme_advanced_resizing_use_cookie: false,
+      toolbar: toolbarEffective.value,
+      ...(props.autoriserImage ? { file_picker_types: 'image' } : {}),
+
+      setup: (editor: TinyMCEEditor) => {
+        _editor.value = editor
+
+        editor.on('init', () => {
+          // init ok
+        })
+
+        // liens cliquables
+        editor.on('click', (e: any) => {
+          const a = e.target?.closest?.('a')
+          if (!a) return
+          const href = a.getAttribute('href')
+          const target = a.getAttribute('target')
+          if (href) {
+            e.preventDefault()
+            openLink(href, target)
+          }
+        })
+
+        editor.on('keydown', (e: KeyboardEvent) => {
+          if (e.key !== 'Enter') return
+          const node = editor.selection?.getNode?.()
+          const a = (node as any)?.closest?.('a')
+          if (a) {
+            e.preventDefault()
+            openLink(a.getAttribute('href'), a.getAttribute('target'))
+          }
+        })
+
+        // Si images interdites
+        if (!props.autoriserImage) {
+          const removeImagesFromDom = () => {
+            const body = editor.getBody()
+            if (!body) return
+            body.querySelectorAll('img').forEach(img => img.remove())
+          }
+
+          // collage
+          editor.on('paste', (e: any) => {
+            const dt: DataTransfer | null = e.clipboardData || e.originalEvent?.clipboardData || null
+            if (!dt) return
+
+            const items = Array.from(dt.items || [])
+            const hasImage = items.some(item => item.kind === 'file' && item.type && item.type.startsWith('image/'))
+
+            if (hasImage) {
+              const text = dt.getData('text/plain')
+              if (!text) {
+                e.preventDefault()
+                return
+              }
+
+              e.preventDefault()
+              editor.insertContent(editor.dom.encode(text))
+            }
+
+            setTimeout(removeImagesFromDom, 0)
+          })
+
+          // drag & drop
+          editor.on('drop', (e: DragEvent) => {
+            const dt = e.dataTransfer
+            if (!dt) return
+            const hasImageFile = Array.from(dt.items || []).some(
+              i => i.kind === 'file' && i.type && i.type.startsWith('image/'),
+            )
+            if (hasImageFile) {
+              e.preventDefault()
+              return
+            }
+            setTimeout(removeImagesFromDom, 0)
+          })
+
+          editor.on('input', removeImagesFromDom)
+          editor.on('SetContent', removeImagesFromDom)
+        }
+      },
+    }
+
+    if (!props.autoriserImage) {
+      opts.paste_data_images = false
+      opts.invalid_elements = 'img'
+      opts.images_upload_handler = (_blobInfo: any, _success: any, failure: (msg: string) => void) => {
+        failure('Les images sont désactivées dans cet éditeur.')
+      }
+    }
+
+    if (props.autoriserImage) {
+      opts.file_picker_callback = (cb: (url: string, meta?: any) => void) => {
+        const input = document.createElement('input')
+        input.type = 'file'
+        input.accept = 'image/*'
+        input.onchange = () => {
+          const file = input.files?.[0]
+          if (!file) return
+
+          const reader = new FileReader()
+          reader.onload = () => {
+            const base64 = String(reader.result).split(',')[1]
+            const editor = _editor.value as any
+            const blobCache = editor?.editorUpload?.blobCache
+            if (!blobCache) return
+
+            const id = 'blobid' + Date.now()
+            const blobInfo = blobCache.create(id, file, base64)
+            const imageSize = blobInfo.blob().size / 1_000_000
+            if (imageSize > imageTailleMaxMo.value) {
+              alert('Fichier trop volumineux > ' + imageTailleMaxMo.value + ' Mo')
+              return
+            }
+            blobCache.add(blobInfo)
+            cb(blobInfo.blobUri(), { title: file.name })
+          }
+          reader.readAsDataURL(file)
+        }
+        input.click()
+      }
+    }
+
+    return opts
+  })
+
+  // --- v-model sync ---
+  watch(
+    () => props.modelValue,
+    v => {
+      if (v !== editorValue.value) {
+        editorValue.value = v
+      }
+    },
+  )
+
+  watch(
+    () => editorValue.value,
+    v => {
+      if (v !== props.modelValue) {
+        emit('update:modelValue', v)
+      }
+    },
+  )
+
+  // --- Re-montage TinyMCE si props importantes changent ---
+  const scheduleReinit = () => {
+    if (_reinitPending.value) return
+    _reinitPending.value = true
+    queueMicrotask(async () => {
+      _reinitPending.value = false
+      await reinitEditor()
+    })
+  }
+
+  const reinitEditor = async () => {
+    if (_reinitLock.value) return
+    _reinitLock.value = true
+    try {
+      const ed = _editor.value as any
+      if (ed && typeof ed.remove === 'function') {
+        try {
+          ed.remove()
+        } catch (e) {
+          console.warn('[Editeur] editor.remove erreur', e)
+        }
+      }
+      _editor.value = null
+      editorReady.value = false
+      await nextTick()
+      editorReady.value = true
+      await nextTick()
+    } finally {
+      _reinitLock.value = false
+    }
+  }
+
+  watch(
+    () => [
+      props.autoriserImage,
+      props.interdireRedimension,
+      props.toolbar,
+      props.imageTailleMaximale,
+      props.plugins,
+      props.cacherBarreOutils,
+      props.cacherBarreMenu,
+    ],
+    () => {
+      scheduleReinit()
+    },
+    { deep: true },
+  )
+
+  const onBlur = () => {
+    if (!props.desactiver) emit('blur')
+  }
+
+  const onUserActivity = () => {
+    // hook pour autosave / "user is typing" si besoin
+  }
+
+  const insererAuCurseur = (texte: string) => {
+    const ed = _editor.value
+    if (!ed) return
+    ed.focus()
+    ;(ed as any).insertContent(texte)
+  }
+
+  // (optionnel) expose si tu veux appeler `insererAuCurseur` depuis le parent
+  defineExpose({
+    insererAuCurseur,
+  })
+</script>
+
+<style scoped>
+  .editor a {
+    cursor: pointer !important;
+  }
+</style>

package/composants/csqcEntete.vue

@@ -0,0 +1,163 @@
+<template>
+  <v-app-bar
+    :color="barreCouleur"
+    class="px-0 mx-0"
+    :style="{
+      position: 'sticky',
+      // variables CSS pour les couleurs dynamiques
+      '--entete-texte': texteCouleur,
+      '--entete-icone': iconeCouleur,
+    }"
+    height="82px"
+  >
+    <v-row
+      class="pt-2"
+      @resize="controlAffichage"
+    >
+      <v-col
+        :cols="titreCol"
+        class="pr-0 mr-0 pl-5"
+      >
+        <v-toolbar-title class="titre">
+          <!-- Barre de retour -->
+          <slot name="retour">
+            <v-icon
+              v-if="retour"
+              size="large"
+              start
+              :color="iconeCouleur"
+              icon="mdi-arrow-left-thin"
+              @click="retournerMenu"
+            />
+          </slot>
+
+          <div class="titre-bloc">
+            <!-- Titre -->
+            <slot name="titre">
+              <span class="pl-3 titre-texte">{{ props.titre }}</span>
+            </slot>
+
+            <!-- État -->
+            <slot name="etat">
+              <span
+                v-if="monEtat?.afficher"
+                class="pl-10"
+              >
+                <v-btn
+                  size="small"
+                  :color="monEtat.couleur"
+                  variant="tonal"
+                >
+                  {{ monEtat.texte }}
+                </v-btn>
+              </span>
+            </slot>
+
+            <!-- État secondaire -->
+            <slot name="etatSecondaire">
+              <span
+                v-if="monEtatSecondaire?.afficher"
+                class="pl-3"
+              >
+                <v-btn
+                  size="small"
+                  :color="monEtatSecondaire.couleur"
+                  variant="tonal"
+                >
+                  {{ monEtatSecondaire.texte }}
+                </v-btn>
+              </span>
+            </slot>
+
+            <!-- Sous-titre -->
+            <slot name="soustitre">
+              <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
+            </slot>
+          </div>
+        </v-toolbar-title>
+      </v-col>
+    </v-row>
+
+    <!-- Barre en bas -->
+    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from 'vue-router'
+  import { ref, computed } from 'vue'
+
+  interface EnteteEtat {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  interface EnteteEtatSecondaire {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  const router = useRouter()
+
+  const props = defineProps<{
+    titre: string
+    soustitre?: string
+    retour?: string
+    etat?: EnteteEtat
+    couleur?: string // couleur de la barre (Vuetify color/hex)
+    couleurTexte?: string
+    couleurIcone?: string
+    etatSecondaire?: EnteteEtatSecondaire
+  }>()
+
+  const titreCol = ref(12)
+
+  // Fallbacks (tes valeurs actuelles)
+  const barreCouleur = computed(() => props.couleur ?? 'white')
+  const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
+  const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
+
+  const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
+  const monEtatSecondaire = computed<EnteteEtatSecondaire>(
+    () => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
+  )
+
+  function retournerMenu() {
+    if (props.retour) router.push({ name: props.retour })
+  }
+  function controlAffichage() {
+    /* logique resize */
+  }
+</script>
+
+<style scoped>
+  .titre {
+    font-size: 1.85rem;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .titre-texte {
+    color: var(--entete-texte, #223654);
+  }
+  .soustitre-texte {
+    display: block;
+    font-size: 1rem;
+    font-weight: normal;
+    color: var(--entete-texte, #223654);
+  }
+  .titre-bloc {
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 12px;
+  }
+  /* Couleur de l’icône (retour) + hover */
+  .v-icon {
+    color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
+  }
+  .v-icon:hover {
+    /* tu peux garder une couleur fixe ou calculer une teinte plus foncée si besoin */
+    filter: brightness(0.85);
+  }
+</style>

package/composants/csqcImportCSV.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <v-btn
+      color="success"
+      variant="outlined"
+      :loading="chargement"
+      class="elevation-0"
+      @click="importCsv"
+    >
+      {{ boutonTexte }}
+      <template #append>
+        <v-icon icon="mdi-microsoft-excel"></v-icon>
+      </template>
+    </v-btn>
+
+    <input
+      ref="fileInput"
+      type="file"
+      accept=".csv"
+      style="display: none"
+      @change="handleFileUpload"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  // Props
+  const props = withDefaults(
+    defineProps<{
+      boutonTexte?: string
+      erreurTexte?: string
+      chargement?: boolean
+    }>(),
+    {
+      chargement: false, //  défaut
+    },
+  )
+  const emit = defineEmits(['import', 'import-erreur'])
+
+  const { t } = useI18n()
+
+  const boutonTexte = computed(() => props.boutonTexte ?? t('csqc.bouton.importer'))
+  const erreurTexte = computed(() => props.erreurTexte ?? t('csqc.csqcImportCSV.erreur.lectureFichier'))
+
+  // Références
+  const fileInput = ref<HTMLInputElement | null>(null)
+  const csvFile = ref<File | null>(null)
+
+  // Méthodes
+  function importCsv() {
+    fileInput.value?.click()
+  }
+
+  function handleFileUpload(event: Event) {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+
+    if (file?.name.toLowerCase().endsWith('.csv')) {
+      csvFile.value = file
+
+      const reader = new FileReader()
+
+      reader.onload = () => {
+        try {
+          let text = reader.result as string
+
+          // Supprime BOM UTF-8 si présent
+          if (text.charCodeAt(0) === 0xfeff) {
+            text = text.slice(1)
+          }
+
+          const lignes = text
+            .trim()
+            .split(/\r?\n/)
+            .filter(row => row.trim() !== '') // ignore lignes vides
+
+          if (lignes.length === 0) {
+            emit('import-erreur', 'Le fichier CSV est vide.')
+            return
+          }
+
+          //  Détection automatique du séparateur
+          const separateur = detecterSeparateur(lignes[0]!)
+
+          //  Découpage des lignes
+          const data: string[][] = lignes.map(row => row.split(separateur).map(cell => cell.trim()))
+
+          emit('import', data)
+        } catch (error) {
+          emit('import-erreur', erreurTexte || t('csqc.csqcImportCSV.erreur.lectureFichier'))
+        }
+      }
+
+      reader.onerror = () => {
+        emit('import-erreur', t('csqc.csqcImportCSV.erreur.lectureFichier'))
+      }
+
+      reader.readAsText(file)
+    } else {
+      const message = erreurTexte || t('csqc.csqcImportCSV.erreur.erreur')
+      emit('import-erreur', message)
+      csvFile.value = null
+    }
+  }
+
+  //  Fonction pour détecter le séparateur le plus probable
+  function detecterSeparateur(ligne: string): string {
+    const separateursTestés = [',', ';', '\t', '|']
+    let meilleurSeparateur = ','
+    let maxColonnes = 0
+
+    for (const sep of separateursTestés) {
+      const nb = ligne.split(sep).length
+      if (nb > maxColonnes) {
+        maxColonnes = nb
+        meilleurSeparateur = sep
+      }
+    }
+
+    return meilleurSeparateur
+  }
+</script>