dynamic panel editor enhancements

Author: Ryan Coulson

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 {

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