From d9c51f26fad5720a807589f21b7defd7aac63413 Mon Sep 17 00:00:00 2001
From: IshavSohal <ishav.sohal@mail.utoronto.ca>
Date: Wed, 20 Nov 2024 16:34:40 -0500
Subject: [PATCH] create caption input for maps and charts

---
 StorylinesSchema.json                    |  4 ++++
 public/StorylinesSlideSchema.json        |  8 ++++++++
 src/components/chart-editor.vue          |  2 ++
 src/components/helpers/chart-preview.vue | 13 +++++++++++++
 src/components/map-editor.vue            |  9 ++++++++-
 src/components/metadata-editor.vue       |  2 +-
 src/definitions.ts                       |  3 +++
 src/lang/lang.csv                        |  1 +
 8 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/StorylinesSchema.json b/StorylinesSchema.json
index b1b4a37b..3e397bef 100644
--- a/StorylinesSchema.json
+++ b/StorylinesSchema.json
@@ -185,6 +185,10 @@
                 "title": {
                     "type": "string",
                     "description": "A title that is displayed centered above this map."
+                }, 
+                "caption": {
+                    "type": "string",
+                    "description": "Supporting text content for the map."
                 }
             },
             "required": ["config", "type"]
diff --git a/public/StorylinesSlideSchema.json b/public/StorylinesSlideSchema.json
index fa41ece8..384caad4 100644
--- a/public/StorylinesSlideSchema.json
+++ b/public/StorylinesSlideSchema.json
@@ -192,6 +192,10 @@
                     "type": "string",
                     "description": "A title that is displayed centered above this map."
                 },
+                "caption": {
+                    "type": "string",
+                    "description": "Supporting text content for the map."
+                },
                 "timeSlider": {
                     "type": "object",
                     "description": "Configuration for a time slider on the map.",
@@ -256,6 +260,10 @@
                 "customStyles": {
                     "type": "string",
                     "description": "Additional CSS styles to apply to the panel."
+                }, 
+                "caption": {
+                    "type": "string",
+                    "description": "Supporting text content for the chart."
                 }
             },
             "additionalProperties": false,
diff --git a/src/components/chart-editor.vue b/src/components/chart-editor.vue
index b748ae75..92b6f224 100644
--- a/src/components/chart-editor.vue
+++ b/src/components/chart-editor.vue
@@ -47,8 +47,10 @@
                         :configFileStructure="configFileStructure"
                         :sourceCounts="sourceCounts"
                         :lang="lang"
+                        :index="index"
                         @edit="editChart"
                         @delete="$vfm.open(`${element.name}-${index}`)"
+                        @captionEdit="onChartsEdited"
                     ></ChartPreview>
                 </template>
             </draggable>
diff --git a/src/components/helpers/chart-preview.vue b/src/components/helpers/chart-preview.vue
index 77f87d3e..05b83b1a 100644
--- a/src/components/helpers/chart-preview.vue
+++ b/src/components/helpers/chart-preview.vue
@@ -63,6 +63,18 @@
                 </div>
             </button>
         </div>
+        <div class="flex mt-4">
+            <label :for="'chartPreviewCaption' + index" class="font-bold"
+                >{{ $t('editor.image.label.caption') }}:
+            </label>
+            <input
+                :id="'chartPreviewCaption' + index"
+                class="editor-input w-2/5 ml-2"
+                type="text"
+                v-model="chart.caption"
+                @input="$emit('captionEdit')"
+            />
+        </div>
     </li>
 </template>
 
@@ -92,6 +104,7 @@ export default class ChartPreviewV extends Vue {
     @Prop() configFileStructure!: ConfigFileStructure;
     @Prop() sourceCounts!: SourceCounts;
     @Prop() lang!: string;
+    @Prop() index!: number;
 
     loading = true;
     chartIdx = 0;
diff --git a/src/components/map-editor.vue b/src/components/map-editor.vue
index 8b73826c..62cd34ef 100644
--- a/src/components/map-editor.vue
+++ b/src/components/map-editor.vue
@@ -24,6 +24,13 @@
 
             <div class="mb-4" v-if="usingTimeSlider"></div>
 
+            <div class="flex items-center w-full text-left mt-2">
+                <label class="editor-label text-label" for="rampMapCaption">
+                    {{ $t('editor.image.label.caption') }}:</label
+                >
+                <input id="rampMapCaption" class="editor-input w-2/5" type="text" v-model="panel.caption" />
+            </div>
+
             <div class="ramp-editor mt-5" ref="editor" style="width: 70vw; height: 80vh"></div>
         </div>
         <vue-final-modal
@@ -44,7 +51,7 @@
                     :disabled="timeSliderError"
                     @click="saveTimeSlider"
                 >
-                    Done
+                    {{ $t('editor.modal.done') }}
                 </button>
             </div>
         </vue-final-modal>
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 873d1d42..93889042 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -289,7 +289,7 @@
                                 class="editor-button bg-black text-white hover:bg-gray-800"
                                 @click="saveMetadata(false)"
                             >
-                                Done
+                                {{ $t('editor.modal.done') }}
                             </button>
                         </div>
                     </vue-final-modal>
diff --git a/src/definitions.ts b/src/definitions.ts
index abc784dc..60b746f3 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -178,6 +178,7 @@ export interface MapPanel extends BasePanel {
     title: string;
     scrollguard: boolean;
     customStyles?: string;
+    caption?: string;
 }
 export interface TimeSliderConfig {
     range: number[];
@@ -247,6 +248,7 @@ export interface ChartPanel extends BasePanel {
     name?: string;
     options?: DQVOptions;
     customStyles?: string;
+    caption?: string;
 }
 
 export interface ChartConfig {
@@ -255,6 +257,7 @@ export interface ChartConfig {
     config?: any;
     name?: string;
     options?: DQVOptions;
+    caption?: string;
 }
 
 export interface ImageFile {
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 7848585a..ec2a0baf 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -163,6 +163,7 @@ editor.tocOrientation.vertical,Vertical,1,Vertical,0
 editor.tocOrientation.horizontal,Horizontal,1,Horizontal,0
 editor.returnTop,Include return to top navigation,1,Inclure le retour en haut de la navigation,0
 editor.landing.greeting,Hello,1,Bonjour,1
+editor.modal.done,Done,1,Fait,0
 help.title,Help,1,Aide,1
 help.search,Search Help,1,Aide à la recherche,1
 help.section.expand,Expand section,1,Développer une section,1