From d0ab57b1b503019c888c1fe370336ded3934880f Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Thu, 4 Jun 2026 21:01:42 -0400
Subject: [PATCH] =?UTF-8?q?Garde:=20s=C3=A9quence=20de=20rotation=20=C3=A9?=
 =?UTF-8?q?ditable=20=E2=80=94=20doublons=20permis=20+=20remplacer=20un=20?=
 =?UTF-8?q?tech=20par=20position?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le multi-select est remplacé par un constructeur de SUITE ordonnée : « Ajouter un tech à la suite »
(push, doublons autorisés → tours inégaux ex. A,A,B,C) ; chaque position a un select pour REMPLACER
le tech, + ↑/↓ pour réordonner, + ✕ pour retirer. Couvre rotations inégales et substitutions.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/ops/src/pages/PlanificationPage.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/ops/src/pages/PlanificationPage.vue b/apps/ops/src/pages/PlanificationPage.vue
index dc32b68..bf18eb1 100644
--- a/apps/ops/src/pages/PlanificationPage.vue
+++ b/apps/ops/src/pages/PlanificationPage.vue
@@ -290,14 +290,18 @@
             <q-btn flat dense size="sm" no-caps label="Tous les soirs" @click="newGardeRule.weekdays = [1,2,3,4,5,6,0]" />
             <q-btn flat dense size="sm" no-caps label="Week-ends" @click="newGardeRule.weekdays = [5,6,0]" />
           </div>
-          <q-select dense outlined multiple use-chips v-model="newGardeRule.techs" :options="techOptions" emit-value map-options label="Techs en rotation" class="q-mt-sm" hint="Ajoute les techs ; règle l'ordre ci-dessous" />
+          <div class="row items-end q-gutter-sm q-mt-sm">
+            <q-select dense outlined v-model="gardePick" :options="techOptions" emit-value map-options label="Ajouter un tech à la suite" style="min-width:210px" />
+            <q-btn dense unelevated color="grey-7" icon="add" label="Ajouter" :disable="!gardePick" @click="addTechToSeq" />
+          </div>
           <div v-if="newGardeRule.techs.length" class="q-mt-xs">
-            <div class="text-caption text-grey-7">Ordre de rotation :</div>
-            <div v-for="(id, i) in newGardeRule.techs" :key="id" class="row items-center no-wrap">
-              <span class="text-caption" style="min-width:24px">{{ i + 1 }}.</span>
-              <span class="text-caption col">{{ techName(id) }}</span>
-              <q-btn flat dense round size="xs" icon="arrow_upward" :disable="i === 0" @click="moveTech(i, -1)" />
-              <q-btn flat dense round size="xs" icon="arrow_downward" :disable="i === newGardeRule.techs.length - 1" @click="moveTech(i, 1)" />
+            <div class="text-caption text-grey-7">Séquence de rotation ({{ newGardeRule.techs.length }} positions — doublons permis pour des tours inégaux) :</div>
+            <div v-for="(id, i) in newGardeRule.techs" :key="i" class="row items-center no-wrap q-gutter-xs q-mt-xs">
+              <span class="text-caption text-weight-medium" style="min-width:22px">{{ i + 1 }}.</span>
+              <q-select dense outlined options-dense v-model="newGardeRule.techs[i]" :options="techOptions" emit-value map-options style="min-width:175px" />
+              <q-btn flat dense round size="xs" icon="arrow_upward" :disable="i === 0" @click="moveTech(i, -1)"><q-tooltip>Monter</q-tooltip></q-btn>
+              <q-btn flat dense round size="xs" icon="arrow_downward" :disable="i === newGardeRule.techs.length - 1" @click="moveTech(i, 1)"><q-tooltip>Descendre</q-tooltip></q-btn>
+              <q-btn flat dense round size="xs" icon="close" color="grey-6" @click="newGardeRule.techs.splice(i, 1)"><q-tooltip>Retirer</q-tooltip></q-btn>
             </div>
           </div>
           <div class="row items-center q-mt-md">
@@ -603,8 +607,8 @@ function loadLS () { try { demand.value = JSON.parse(localStorage.getItem(LS_DEM
 const GARDE_EPOCH = '2026-01-05' // lundi de référence pour l'index de semaine
 const gardeTemplateOptions = computed(() => templates.value.slice().sort((a, b) => (b.on_call ? 1 : 0) - (a.on_call ? 1 : 0)).map(t => ({ label: t.template_name + (t.on_call ? ' 🛡️' : ''), value: t.name })))
 const groupNames = computed(() => [...new Set(techs.value.map(t => t.group).filter(Boolean))].sort())
-const editingGardeId = ref(null)
-function techName (id) { const t = techs.value.find(x => x.id === id); return t ? t.name : id }
+const editingGardeId = ref(null); const gardePick = ref(null)
+function addTechToSeq () { if (gardePick.value) { newGardeRule.techs.push(gardePick.value); gardePick.value = null } } // doublons permis (tours inégaux)
 function moveTech (i, dir) { const a = newGardeRule.techs; const j = i + dir; if (j < 0 || j >= a.length) return; const x = a[i]; a.splice(i, 1); a.splice(j, 0, x) }
 function editGardeRule (r) { Object.assign(newGardeRule, { dept: r.dept || '', shift: r.shift, weekdays: [...r.weekdays], periodWeeks: r.periodWeeks || 1, techs: [...r.techs] }); editingGardeId.value = r.id }
 function d2ms (iso) { const a = iso.split('-').map(Number); return Date.UTC(a[0], a[1] - 1, a[2]) }