planif : extraction #4/1 — dialogue Congés & disponibilités → components/planif/LeaveDialog.vue

Début de la décomposition de PlanificationPage (6725 l.). 1re extraction = le panneau
le plus AUTO-CONTENU (survey de couplage) : congés/disponibilités.

- components/planif/LeaveDialog.vue (NOUVEAU, 78 l.) : état privé (leaveRows/leaveFilter/
  newLeave) + fonctions (loadLeave/approveLeave/createLeave) déplacés tels quels ; v-model
  pour l'ouverture ; techs + techOptions en props LECTURE SEULE ; charge à l'ouverture (watch) ;
  CSS .demand-tbl recopié (le scoped ne traverse pas vers l'enfant)
- PlanificationPage : dialogue + état + 4 fonctions retirés (−39 l.) ; menu Outils → `showLeave = true`
- AUCUNE mutation d'état partagé (pas de loadWeek) → ne peut pas désynchroniser la grille
- Vérifié en aperçu : ouvre via le menu, table + formulaire rendus, chargement OK, CSS 11px appliqué

Prochaines extractions sûres (par couplage croissant) : techSync, types de shift, puis
absence/demande (loadWeek), enfin les couplés (team/tags/garde/publish).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/ops/src/components/planif/LeaveDialog.vue

@@ -0,0 +1,78 @@
+<template>
+  <q-dialog v-model="open">
+    <q-card style="min-width:680px">
+      <q-card-section class="row items-center q-pb-none">
+        <div class="text-subtitle1 text-weight-bold">Congés &amp; disponibilités</div><q-space />
+        <q-select dense outlined v-model="leaveFilter" :options="['Demandé', 'Approuvé', 'Refusé', '']" style="width:130px" @update:model-value="loadLeave" />
+        <q-btn flat round dense icon="close" v-close-popup class="q-ml-sm" />
+      </q-card-section>
+      <q-card-section>
+        <table class="demand-tbl" style="width:100%">
+          <thead><tr><th>Technicien</th><th>Type</th><th>Du</th><th>Au</th><th>Motif</th><th>Statut</th><th></th></tr></thead>
+          <tbody>
+            <tr v-for="l in leaveRows" :key="l.name">
+              <td>{{ l.technician_name || l.technician }}</td><td>{{ l.availability_type }}</td><td>{{ l.from_date }}</td><td>{{ l.to_date }}</td><td>{{ l.reason }}</td>
+              <td><q-badge :color="l.status === 'Approuvé' ? 'green' : l.status === 'Refusé' ? 'red' : 'orange'">{{ l.status }}</q-badge></td>
+              <td><template v-if="l.status === 'Demandé'"><q-btn flat dense round size="sm" icon="check" color="green" @click="approveLeave(l, false)" /><q-btn flat dense round size="sm" icon="close" color="red" @click="approveLeave(l, true)" /></template></td>
+            </tr>
+            <tr v-if="!leaveRows.length"><td colspan="7" class="text-grey-6 q-pa-sm">Aucune demande.</td></tr>
+          </tbody>
+        </table>
+        <q-separator class="q-my-md" />
+        <div class="text-caption text-weight-bold q-mb-xs">Nouvelle demande</div>
+        <div class="row items-center q-gutter-sm">
+          <TechSelect v-model="newLeave.technician" :options="techOptions" label="Technicien" style="width:200px" />
+          <q-select dense outlined v-model="newLeave.availability_type" :options="['Congé', 'Pause', 'Indisponible', 'Maladie']" label="Type" style="width:130px" />
+          <q-input dense outlined type="date" v-model="newLeave.from_date" label="Du" style="width:140px" />
+          <q-input dense outlined type="date" v-model="newLeave.to_date" label="Au" style="width:140px" />
+          <q-input dense outlined v-model="newLeave.reason" label="Motif" style="width:150px" />
+          <q-toggle dense v-model="newLeave.long_term" :true-value="1" :false-value="0" label="Longue durée"><q-tooltip>Maternité, invalidité… → à remplacer (pas juste sauter comme des vacances)</q-tooltip></q-toggle>
+          <q-btn dense unelevated color="primary" icon="add" label="Créer" @click="createLeave" />
+        </div>
+        <div class="text-caption text-grey-7 q-mt-sm">Une demande <b>approuvée</b> rend le tech indisponible pour le solveur sur ces dates.</div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+// Dialogue « Congés & disponibilités » — extrait de PlanificationPage (décomposition #4).
+// Auto-contenu : état PRIVÉ (leaveRows/leaveFilter/newLeave) + API roster ; AUCUNE mutation
+// de l'état partagé de la page (pas de loadWeek → ne peut pas désynchroniser la grille).
+// S'ouvre via v-model (le menu Outils fait `showLeave = true`) et charge à l'ouverture.
+import { ref, reactive, computed, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import * as roster from 'src/api/roster'
+import TechSelect from 'src/components/shared/TechSelect.vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false }, // ouverture (v-model)
+  techs: { type: Array, default: () => [] },       // lecture seule (résolution du nom au création)
+  techOptions: { type: Array, default: () => [] }, // lecture seule (sélecteur)
+})
+const emit = defineEmits(['update:modelValue'])
+const $q = useQuasar()
+const err = (e) => $q.notify({ type: 'negative', message: '' + (e.message || e) })
+
+const open = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) })
+const leaveRows = ref([])
+const leaveFilter = ref('Demandé')
+const newLeave = reactive({ technician: '', availability_type: 'Congé', from_date: '', to_date: '', reason: '', long_term: 0 })
+
+async function loadLeave () { try { leaveRows.value = (await roster.listAvailability(leaveFilter.value)).availability || [] } catch (e) { err(e) } }
+async function approveLeave (l, reject) { try { await roster.approveAvailability(l.name, { reject, approver: 'ops' }); $q.notify({ type: reject ? 'info' : 'positive', message: (l.technician_name || l.technician) + (reject ? ' refusé' : ' approuvé') }); await loadLeave() } catch (e) { err(e) } }
+async function createLeave () {
+  if (!newLeave.technician || !newLeave.from_date || !newLeave.to_date) { $q.notify({ type: 'warning', message: 'Technicien + dates requis' }); return }
+  const t = props.techs.find(x => x.id === newLeave.technician)
+  try { await roster.requestAvailability({ technician: newLeave.technician, technician_name: t ? t.name : '', availability_type: newLeave.availability_type, from_date: newLeave.from_date, to_date: newLeave.to_date, reason: newLeave.reason, long_term: newLeave.long_term }); $q.notify({ type: 'positive', message: 'Demande créée' }); newLeave.from_date = ''; newLeave.to_date = ''; newLeave.reason = ''; newLeave.long_term = 0; await loadLeave() } catch (e) { err(e) }
+}
+// Charger à l'ouverture (remplace l'ancien openLeave de la page).
+watch(() => props.modelValue, (v) => { if (v) loadLeave() })
+</script>
+
+<style scoped>
+/* Copié de PlanificationPage (le CSS scoped ne traverse pas vers l'enfant). */
+.demand-tbl { border-collapse: collapse; width: 100%; }
+.demand-tbl th { font-size: 11px; color: #888; font-weight: 600; padding: 2px 6px; text-align: left; }
+.demand-tbl td { padding: 2px 4px; }
+</style>

apps/ops/src/pages/PlanificationPage.vue

@@ -15,7 +15,7 @@
             <q-item clickable v-close-popup @click="navWeek(1)"><q-item-section avatar><q-icon name="chevron_right" /></q-item-section><q-item-section>Semaine suivante</q-item-section></q-item>
             <q-separator />
             <q-item clickable v-close-popup @click="doGenerate"><q-item-section avatar><q-icon name="auto_awesome" color="primary" /></q-item-section><q-item-section>Générer (auto)</q-item-section></q-item>
-            <q-item clickable v-close-popup @click="openLeave"><q-item-section avatar><q-icon name="beach_access" color="teal" /></q-item-section><q-item-section>Congés / absences</q-item-section></q-item>
+            <q-item clickable v-close-popup @click="showLeave = true"><q-item-section avatar><q-icon name="beach_access" color="teal" /></q-item-section><q-item-section>Congés / absences</q-item-section></q-item>
             <q-separator />
             <q-item tag="label" clickable><q-item-section avatar><q-icon name="sms" /></q-item-section><q-item-section>Notifier par SMS</q-item-section><q-item-section side><q-toggle v-model="notifySms" dense /></q-item-section></q-item>
             <q-item clickable v-close-popup @click="openCreateJob"><q-item-section avatar><q-icon name="add_task" color="teal-7" /></q-item-section><q-item-section>Créer un job</q-item-section></q-item>
@@ -97,7 +97,7 @@
           <q-item-label header class="q-py-xs text-weight-bold text-grey-8">🗓&nbsp; Horaires &amp; personnel</q-item-label>
           <q-item clickable v-close-popup @click="doGenerate"><q-item-section avatar><q-icon name="auto_awesome" color="indigo" /></q-item-section><q-item-section>Générer l'horaire (semaine)<q-item-label caption>solveur de quarts — la semaine affichée</q-item-label></q-item-section><q-item-section side><q-spinner v-if="generating" size="16px" color="indigo" /></q-item-section></q-item>
           <q-item clickable v-close-popup @click="openSchedGenBulk"><q-item-section avatar><q-icon name="event_note" color="primary" /></q-item-section><q-item-section>Générer les horaires (lot)<q-item-label caption>modèle → plusieurs techs, N semaines</q-item-label></q-item-section></q-item>
-          <q-item clickable v-close-popup @click="openLeave"><q-item-section avatar><q-icon name="beach_access" /></q-item-section><q-item-section>Congés / absences</q-item-section></q-item>
+          <q-item clickable v-close-popup @click="showLeave = true"><q-item-section avatar><q-icon name="beach_access" /></q-item-section><q-item-section>Congés / absences</q-item-section></q-item>
           <q-item clickable v-close-popup @click="openTechSync"><q-item-section avatar><q-icon name="group_add" color="green-7" /></q-item-section><q-item-section>Synchroniser les techniciens</q-item-section></q-item>
           <q-separator class="q-my-xs" />
           <!-- 👁 AFFICHAGE : bascules de ce qui s'affiche sur le board -->
@@ -654,40 +654,8 @@
       </q-card>
     </q-dialog>
 
-    <q-dialog v-model="showLeave">
+    <!-- Congés & disponibilités — extrait dans components/planif/LeaveDialog.vue (décomposition #4) -->
-      <q-card style="min-width:680px">
+    <LeaveDialog v-model="showLeave" :techs="techs" :tech-options="techOptions" />
-        <q-card-section class="row items-center q-pb-none">
-          <div class="text-subtitle1 text-weight-bold">Congés &amp; disponibilités</div><q-space />
-          <q-select dense outlined v-model="leaveFilter" :options="['Demandé', 'Approuvé', 'Refusé', '']" style="width:130px" @update:model-value="loadLeave" />
-          <q-btn flat round dense icon="close" v-close-popup class="q-ml-sm" />
-        </q-card-section>
-        <q-card-section>
-          <table class="demand-tbl" style="width:100%">
-            <thead><tr><th>Technicien</th><th>Type</th><th>Du</th><th>Au</th><th>Motif</th><th>Statut</th><th></th></tr></thead>
-            <tbody>
-              <tr v-for="l in leaveRows" :key="l.name">
-                <td>{{ l.technician_name || l.technician }}</td><td>{{ l.availability_type }}</td><td>{{ l.from_date }}</td><td>{{ l.to_date }}</td><td>{{ l.reason }}</td>
-                <td><q-badge :color="l.status === 'Approuvé' ? 'green' : l.status === 'Refusé' ? 'red' : 'orange'">{{ l.status }}</q-badge></td>
-                <td><template v-if="l.status === 'Demandé'"><q-btn flat dense round size="sm" icon="check" color="green" @click="approveLeave(l, false)" /><q-btn flat dense round size="sm" icon="close" color="red" @click="approveLeave(l, true)" /></template></td>
-              </tr>
-              <tr v-if="!leaveRows.length"><td colspan="7" class="text-grey-6 q-pa-sm">Aucune demande.</td></tr>
-            </tbody>
-          </table>
-          <q-separator class="q-my-md" />
-          <div class="text-caption text-weight-bold q-mb-xs">Nouvelle demande</div>
-          <div class="row items-center q-gutter-sm">
-            <TechSelect v-model="newLeave.technician" :options="techOptions" label="Technicien" style="width:200px" />
-            <q-select dense outlined v-model="newLeave.availability_type" :options="['Congé', 'Pause', 'Indisponible', 'Maladie']" label="Type" style="width:130px" />
-            <q-input dense outlined type="date" v-model="newLeave.from_date" label="Du" style="width:140px" />
-            <q-input dense outlined type="date" v-model="newLeave.to_date" label="Au" style="width:140px" />
-            <q-input dense outlined v-model="newLeave.reason" label="Motif" style="width:150px" />
-            <q-toggle dense v-model="newLeave.long_term" :true-value="1" :false-value="0" label="Longue durée"><q-tooltip>Maternité, invalidité… → à remplacer (pas juste sauter comme des vacances)</q-tooltip></q-toggle>
-            <q-btn dense unelevated color="primary" icon="add" label="Créer" @click="createLeave" />
-          </div>
-          <div class="text-caption text-grey-7 q-mt-sm">Une demande <b>approuvée</b> rend le tech indisponible pour le solveur sur ces dates.</div>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
 
     <q-dialog v-model="showTeamEditor">
       <q-card style="min-width:900px">
@@ -2055,6 +2023,7 @@ import { messageIdentity, priorityMeta, PRIORITY_LEVELS } from 'src/composables/
 import { useSla, SLA_BADGE } from 'src/composables/useSla' // SLA existant (politiques éditables) — réutilisé sur les jobs (échéance = création + résolution)
 import { useAuthStore } from 'src/stores/auth' // email de l'agent (X-Authentik-Email) pour l'envoi de réponses client
 import TechSelect from 'src/components/shared/TechSelect.vue'
+import LeaveDialog from 'src/components/planif/LeaveDialog.vue' // Congés & disponibilités (extrait — décomposition #4)
 import TicketStatusControl from 'src/components/shared/TicketStatusControl.vue'
 import TagEditor from 'src/components/shared/TagEditor.vue' // module de tags/compétences PARTAGÉ (chips colorées, création + palette, niveaux) — SOURCE UNIQUE : jobs ET techs
 import RouteMap from 'src/components/shared/RouteMap.vue' // carte de tournées réutilisable (revue dispatch auto + onglet Tournées) : OSRM réel, arrêts numérotés, fitTo
@@ -2227,8 +2196,7 @@ async function saveNotifyContact (m) {
     else $q.notify({ type: 'negative', message: (r && r.error) || 'Échec de l’enregistrement' })
   } catch (e) { err(e) } finally { m.saving = false }
 }
-const showLeave = ref(false); const leaveRows = ref([]); const leaveFilter = ref('Demandé')
+const showLeave = ref(false) // ouverture de <LeaveDialog> (état leaveRows/leaveFilter/newLeave + fonctions déplacés dans le composant)
-const newLeave = reactive({ technician: '', availability_type: 'Congé', from_date: '', to_date: '', reason: '', long_term: 0 })
 const newTpl = reactive({ template_name: '', start: '08:00', end: '16:00', color: '#1976d2', on_call: 0 })
 function numToTime (h) { const hh = Math.floor(h); const mm = Math.round((h - hh) * 60); return String(hh).padStart(2, '0') + ':' + String(mm).padStart(2, '0') }
 // Slider à 2 poignées pour le nouveau modèle (heures custom) ↔ newTpl.start/end
@@ -5798,15 +5766,8 @@ function openTeamEditor () { editTechs.value = techs.value.map(t => ({ id: t.id,
 function onTeamSkills (t, items) { t.skills = normSkillList(items); saveSkills(t) }
 async function saveSkills (t) { const csv = normSkillList(t.skills).join(','); try { await roster.setTechSkills(t.id, csv); const tt = techs.value.find(x => x.id === t.id); if (tt) tt.skills = csv ? csv.split(',') : []; $q.notify({ type: 'positive', message: t.name + ' : compétences enregistrées' }) } catch (e) { err(e) } }
 
-// congés / disponibilités
+// congés / disponibilités → extrait dans components/planif/LeaveDialog.vue (état + fonctions déplacés).
-async function openLeave () { showLeave.value = true; await loadLeave() }
+
-async function loadLeave () { try { leaveRows.value = (await roster.listAvailability(leaveFilter.value)).availability || [] } catch (e) { err(e) } }
-async function approveLeave (l, reject) { try { await roster.approveAvailability(l.name, { reject, approver: 'ops' }); $q.notify({ type: reject ? 'info' : 'positive', message: (l.technician_name || l.technician) + (reject ? ' refusé' : ' approuvé') }); await loadLeave() } catch (e) { err(e) } }
-async function createLeave () {
-  if (!newLeave.technician || !newLeave.from_date || !newLeave.to_date) { $q.notify({ type: 'warning', message: 'Technicien + dates requis' }); return }
-  const t = techs.value.find(x => x.id === newLeave.technician)
-  try { await roster.requestAvailability({ technician: newLeave.technician, technician_name: t ? t.name : '', availability_type: newLeave.availability_type, from_date: newLeave.from_date, to_date: newLeave.to_date, reason: newLeave.reason, long_term: newLeave.long_term }); $q.notify({ type: 'positive', message: 'Demande créée' }); newLeave.from_date = ''; newLeave.to_date = ''; newLeave.reason = ''; newLeave.long_term = 0; await loadLeave() } catch (e) { err(e) }
-}
 async function saveEff (t) { const eff = Number(t.efficiency) || 1; try { await roster.setTechEfficiency(t.id, eff); const tt = techs.value.find(x => x.id === t.id); if (tt) tt.efficiency = eff; $q.notify({ type: 'positive', message: t.name + ' : cadence ' + eff }) } catch (e) { err(e) } }
 function loadedCost (t) { return Math.round(((Number(t.salary) || 0) * (1 + (Number(t.charges) || 0) / 100) + (Number(t.other) || 0)) * 100) / 100 }
 async function saveCost (t) { try { await roster.setTechCost(t.id, { salary: t.salary, charges: t.charges, other: t.other }); const tt = techs.value.find(x => x.id === t.id); if (tt) { tt.cost_salary_h = Number(t.salary) || 0; tt.cost_charges_pct = Number(t.charges) || 0; tt.cost_other_h = Number(t.other) || 0; tt.cost_h = loadedCost(t) } $q.notify({ type: 'positive', message: t.name + ' : ' + loadedCost(t) + ' $/h chargé' }) } catch (e) { err(e) } }