From 8cdb2c53c149355c8fcf2fe9de93677a0b890e74 Mon Sep 17 00:00:00 2001
From: Ryan Coulson <ryan.coulson@ec.gc.ca>
Date: Mon, 8 Jul 2024 13:53:10 -0400
Subject: [PATCH] dynamic panel editor enhancements

---
 public/StorylinesSlideSchema.json |  3 +--
 src/components/dynamic-editor.vue | 20 ++++++++++++++++----
 src/lang/lang.csv                 |  4 +++-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/public/StorylinesSlideSchema.json b/public/StorylinesSlideSchema.json
index 24f4249e..0fcd5651 100644
--- a/public/StorylinesSlideSchema.json
+++ b/public/StorylinesSlideSchema.json
@@ -93,8 +93,7 @@
                     "description": "The panels to display dynamically.",
                     "items": {
                         "$ref": "#/$defs/dynamicChildItem"
-                    },
-                    "minItems": 1
+                    }
                 },
                 "type": {
                     "type": "string",
diff --git a/src/components/dynamic-editor.vue b/src/components/dynamic-editor.vue
index 20bf9dc2..9d2e6fd2 100644
--- a/src/components/dynamic-editor.vue
+++ b/src/components/dynamic-editor.vue
@@ -39,8 +39,14 @@
                     <td>{{ determineEditorType(item.panel) }}</td>
                     <td>
                         <span @click="() => switchSlide(idx)">{{ $t('editor.chart.label.edit') }}</span> |
-                        <span @click="() => removeSlide(item, idx)">{{ $t('editor.remove') }}</span>
+                        <span @click="$vfm.open(`delete-item-${idx}`)">{{ $t('editor.remove') }}</span>
                     </td>
+
+                    <confirmation-modal
+                        :name="`delete-item-${idx}`"
+                        :message="$t('dynamic.panel.remove')"
+                        @ok="() => removeSlide(item as any, idx)"
+                    />
                 </tr>
                 <tr class="table-add-row">
                     <th class="flex flex-col items-center">
@@ -54,7 +60,11 @@
                             </option>
                         </select>
                     </th>
-                    <th><button class="editor-button" @click="createNewSlide" :disabled="idUsed">Add New</button></th>
+                    <th>
+                        <button class="editor-button" @click="createNewSlide" :disabled="idUsed || !newSlideName">
+                            {{ $t('dynamic.panel.add') }}
+                        </button>
+                    </th>
                 </tr>
             </table>
 
@@ -105,6 +115,7 @@ import TextEditorV from './text-editor.vue';
 import MapEditorV from './map-editor.vue';
 import VideoEditorV from './video-editor.vue';
 import SlideshowEditorV from './slideshow-editor.vue';
+import ConfirmationModalV from './helpers/confirmation-modal.vue';
 
 @Options({
     components: {
@@ -114,7 +125,8 @@ import SlideshowEditorV from './slideshow-editor.vue';
         'slideshow-editor': SlideshowEditorV,
         'dynamic-editor': DynamicEditorV,
         'map-editor': MapEditorV,
-        'video-editor': VideoEditorV
+        'video-editor': VideoEditorV,
+        'confirmation-modal': ConfirmationModalV
     }
 })
 export default class DynamicEditorV extends Vue {
@@ -252,7 +264,7 @@ export default class DynamicEditorV extends Vue {
             }
         }
 
-        if (index) {
+        if (index !== undefined) {
             // Remove the panel itself.
             this.panel.children = this.panel.children.filter((panel: DynamicChildItem, idx: number) => idx !== index);
 
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 4a8e5667..67d93e5c 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -13,8 +13,10 @@ dynamic.panel.collection,Panel Collection,1,Collection de panneaux,1
 dynamic.panel.id,Panel ID,1,No d’identification du panneau,1
 dynamic.panel.type,Panel Type,1,Type de panneaux,1
 dynamic.panel.actions,Panel Actions,1,Actions du panneau,1
-dynamic.panel.idTaken,Panel ID is already,1,Le nom du panneau est déjà utilisé,1
+dynamic.panel.idTaken,Panel ID is already in use,1,Le nom du panneau est déjà utilisé,1
 dynamic.panel.editor,Panel Editor:,1,Éditeur de panneaux:,1
+dynamic.panel.remove,Are you sure you want to remove this panel?,1,Etes-vous sûr de vouloir supprimer ce panneau?,0
+dynamic.panel.add,Add New,1,Ajouter un nouveau,0
 timeslider.expand,Expand,1,Développer,1
 timeslider.minimize,Minimize,1,Réduire,1
 timeslider.play,Play,1,Lecture,1