Merge pull request #484 from gordlin/metadata-editor-issues

Fix various metadata editor issues
ramp4-pcar4 · Dec 17, 2024 · bc2f3c0 · bc2f3c0
2 parents aaef709 + 6a01513
commit bc2f3c0
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 28 deletions.
diff --git a/src/components/editor.vue b/src/components/editor.vue
@@ -189,7 +189,7 @@
                 <div class="flex items-center justify-center border-b p-2">
                     <!-- Edit metadata button -->
                     <!-- Opens the edit metadata modal -->
-                    <button class="toc-popup-button" @click.stop="$vfm.open('metadata-edit-modal')">
+                    <button class="toc-popup-button border-gray-400" @click.stop="$vfm.open('metadata-edit-modal')">
                         <span class="align-middle inline-block pr-1"
                             ><svg
                                 clip-rule="evenodd"
@@ -637,7 +637,6 @@ window.addEventListener('resize', () => {
 
 .editor-button {
     padding: 5px 12px;
-    margin: 0px 10px;
     font-weight: 600;
     transition-duration: 0.2s;
 }

diff --git a/src/components/helpers/toc-options.vue b/src/components/helpers/toc-options.vue
@@ -34,21 +34,21 @@
             </template>
             <a
                 href="javascript:;"
-                class="flex items-center space-x-2 leading-snug text-left w-auto"
+                class="flex items-center leading-tight text-left w-auto"
                 :class="{
                     'disabled click-events-none cursor-not-allowed opacity-60': !copyAllowed
                 }"
                 @click="copyAllowed && copySlide()"
                 role="button"
                 aria-label="copy-contents"
             >
-                <span class="flex items-center gap-1">
+                <span class="flex items-center gap-0.5">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         height="17"
                         width="17"
                         viewBox="0 0 24 24"
-                        class="flex-shrink-0 mx-2 my-1"
+                        class="flex-shrink-0 mr-2"
                     >
                         <path
                             d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6h2v14h11v2Zm4-4q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm0 0V4v12Z"
@@ -59,21 +59,21 @@
             </a>
             <a
                 href="javascript:;"
-                class="flex leading-snug items-center text-left w-auto"
+                class="flex leading-tight items-center text-left w-auto"
                 :class="{
                     'disabled click-events-none cursor-not-allowed opacity-60': !deleteAllowed
                 }"
                 @click="deleteAllowed && clearSlide()"
                 role="button"
                 aria-label="DELETE"
             >
-                <span class="flex items-center gap-1.5">
+                <span class="flex items-center gap-1">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 110.61 122.88"
                         width="15"
                         height="15"
-                        class="mx-2 my-1"
+                        class="mr-2"
                     >
                         <path
                             d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"

diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
@@ -100,7 +100,7 @@
                                 />
                                 <button
                                     @click="renameProduct"
-                                    class="editor-button editor-forms-button bg-black text-white mr-0"
+                                    class="editor-button editor-forms-button bg-black text-white mr-0 ml-2"
                                     :class="{ 'input-error': error }"
                                     :disabled="changeUuid.length === 0 || checkingUuid || warning === 'rename'"
                                 >
@@ -185,7 +185,7 @@
                                                 generateRemoteConfig().then(fetchHistory);
                                             }
                                         "
-                                        class="editor-button editor-forms-button bg-black text-white mr-0"
+                                        class="editor-button editor-forms-button bg-black text-white mr-0 ml-2"
                                         :class="{ 'input-error': error }"
                                         :disabled="loadStatus === 'loading'"
                                         v-if="editExisting"
@@ -526,7 +526,17 @@
                         class="flex justify-center items-center"
                     >
                         <div @click.stop class="flex flex-col space-y-2">
-                            <h2 slot="header" class="text-2xl font-bold mb-3">{{ $t('editor.editMetadata') }}</h2>
+                            <h2 slot="header" class="text-2xl font-bold">{{ $t('editor.editMetadata') }}</h2>
+                            <!-- ENG/FR config toggle -->
+                            <div class="mb-3">
+                                <button
+                                    class="editor-button editor-forms-button border border-gray-300"
+                                    @click="swapLang()"
+                                    tabindex="0"
+                                >
+                                    {{ configLang === 'en' ? $t('editor.frenchConfig') : $t('editor.englishConfig') }}
+                                </button>
+                            </div>
                             <metadata-content
                                 :metadata="metadata"
                                 @metadata-changed="updateMetadata"
@@ -911,6 +921,12 @@ export default class MetadataEditorV extends Vue {
      */
     loadVersion(version: string): Promise<void> {
         return new Promise((resolve, reject) => {
+            if (this.uuid === undefined || this.uuid === '') {
+                Message.error(this.$t('editor.warning.mustEnterUuid'));
+                this.loadStatus = 'waiting';
+                reject();
+                return;
+            }
             // Create a new AbortController for each fetch attempt
             // as they get 'used up' after each successful abort() call
             this.controller = new AbortController();
@@ -925,10 +941,9 @@ export default class MetadataEditorV extends Vue {
                     if (res.status === 404) {
                         // Version not found.
                         if (version === 'latest') {
-                            Message.error(this.$t('editor.warning.uuidNotFound', this.uuid));
+                            Message.error(this.$t('editor.warning.uuidNotFound', { uuid: this.uuid }));
                         } else {
                             Message.error(this.$t('editor.editMetadata.message.error.noRequestedVersion'));
-                            this.loadStatus = 'loaded';
                         }
                         this.error = true;
                         this.loadStatus = 'waiting';
@@ -994,19 +1009,21 @@ export default class MetadataEditorV extends Vue {
         // Note: This part probably doesn't need an manual abort() trigger to kill on load cancel,
         // as the history should be much smaller and quicker to fetch than the config
 
-        if (this.uuid === undefined) Message.error(this.$t('editor.warning.mustEnterUuid'));
+        if (this.uuid === undefined || this.uuid === '') {
+            return;
+        }
         this.loadStatus = 'loading';
         const user = useUserStore().userProfile.userName || 'Guest';
         fetch(this.apiUrl + `/history/${this.uuid}`, { headers: { user } }).then((res: Response) => {
             if (res.status === 404) {
                 // Product not found.
-                Message.error(`The requested UUID '${this.uuid ?? ''}' does not exist.`);
+                this.loadStatus = 'waiting';
             } else {
                 res.json().then((json) => {
                     this.storylineHistory = json;
+                    this.loadStatus = 'loaded';
                 });
             }
-            this.loadStatus = 'loaded';
         });
     }
 
@@ -1807,11 +1824,14 @@ $font-list: 'Segoe UI', system-ui, ui-sans-serif, Tahoma, Geneva, Verdana, sans-
     .vfm__content button {
         border-radius: 3px;
         padding: 5px 12px;
-        margin: 0px 10px;
         font-weight: 600;
         transition-duration: 0.2s;
     }
 
+    .vfm__content button:focus {
+        transition-duration: 0.075s;
+    }
+
     .vfm__content button:hover:enabled {
         background-color: #dbdbdb;
         color: black;

diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
@@ -8,7 +8,7 @@
             <p class="ml-auto"></p>
             <!-- Add new slide button -->
             <!-- New slide will have a blank ENG and FR config, with some exceptions -->
-            <button class="mx-auto toc-popup-button py-0 px-2" @click="addNewSlide">
+            <button class="mx-auto toc-popup-button py-0 px-2 border-gray-300 font-semibold" @click="addNewSlide">
                 <span class="inline-block pr-1"
                     ><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
                         <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />

diff --git a/src/lang/lang.csv b/src/lang/lang.csv
@@ -32,15 +32,13 @@ editor.window.title,RAMP Storylines Editor,1,Éditeur de scénarios de la PCAR,1
 editor.configOverwrite,Are you sure you want to overwrite product '{uuid}'?,1,Êtes-vous sûr de vouloir remplacer le produit « {uuid} » ?,0
 editor.createProduct,Create New Storylines Product,1,Créer un nouveau produit de scénarios,1
 editor.loadProduct,Load Existing Storylines Product,1,Charger un produit Storylines existant,0
-editor.editMetadata,Edit Project Metadata,1,Modifier les métadonnées,1
 editor.chooseOption,What would you like to do?,1,Qu'aimeriez-vous faire?, 0
 editor.dashboard,Dashboard,1,Tableau de bord,0
 editor.previousProducts,Previously Edited Products,1,Produits précédemment édités,0
 editor.previousProducts.productInfo,Project Information,1,Informations sur le projet,0
 editor.previousProducts.productInfo.title,Title,1,Titre,0
 editor.previousProducts.lastModified,Last Modified,1,Dernière modification,0
 editor.previousProducts.actions,Actions,1,Actes,0
-editor.editMetadata,Edit Project Metadata,1,Modifier les métadonnées d’un projet,1
 editor.editMetadata.load.cancel,Cancel load,1,Annuler le chargement,0
 editor.editMetadata.editExistingHeader,Choose Storylines Product,1,Choisissez le produit Storylines,0
 editor.editMetadata.input.tooltip,Press Esc to erase field.,1,Appuyez sur Esc pour effacer le champ.,0
@@ -83,7 +81,7 @@ editor.metadataForm.disabled,Disabled,1,Désactivé,0
 editor.metadataForm.na,N/A,1,N / A,0
 editor.done,Done,1,Fini,0
 editor.editProduct,Edit Existing Storylines Product,1,Modifier un produit de scénarios,1
-editor.editMetadata,Edit Project Metadata,1,Mod. les métadonnées,1
+editor.editMetadata,Edit project metadata,1,Mod. les métadonnées,1
 editor.productDetails,Storylines product details,1,Détails du produit de scénarios,1
 editor.metadata.instructions.new,Fill in metadata details about your new Storylines product.,1,Inscrivez les métadonnées de votre nouveau produit de scénario.,1
 editor.metadata.instructions.existing,View or edit metadata details about your Storylines product. Use the "Preview" button to see what your slides will look like.,1,Affichez ou modifiez les détails des métadonnées de votre produit Storylines. Utilisez le bouton « Aperçu » pour voir à quoi ressembleront vos diapositives.,0
@@ -93,7 +91,7 @@ editor.uuid.new,New UUID,1,New UUID,0
 editor.warning.mustEnterUuid,You must first enter a UUID.,1,Vous devez d'abord saisir un UUID.,0
 editor.warning.retrievalFailed,"Failed to load product, no response from server.",1,"Échec du chargement du produit, aucune réponse du serveur.",0
 editor.warning.uuid,UUID already exists. Saving this will overwrite existing product.,1,L’IDUU existe déjà. Enregistrer ce produit écrasera le produit existant.,1
-editor.warning.uuidNotFound,The requested UUID '{uuid}' does not exist.,1,L'UUID '{uuid}' demandé n'existe pas,0
+editor.warning.uuidNotFound,The requested UUID '{uuid}' does not exist.,1,L'UUID '{uuid}'   demandé n'existe pas,0
 editor.metadata.uuidInstructions,"Please enter the UUID of an existing storylines product, then click the 'Load' button.",1,"Veuillez saisir l'UUID d'un produit de scénario existant, puis cliquez sur le bouton « Charger ».",0
 editor.metadata.newUuidInstructions,"Enter a unique ID for your new storyline. One has been auto-generated for you, but you can also enter your own.",1,"Entrez un identifiant unique pour votre nouveau scénario. Un a été généré automatiquement pour vous, mais vous pouvez également saisir le vôtre.",0
 editor.warning.rename,UUID already in use. Please choose a different ID.,1,UUID déjà utilisé. Veuillez choisir un autre identifiant.,0
@@ -102,15 +100,15 @@ editor.changingUuid,You are changing this product UUID to '{changeUuid}'. Save c
 editor.title,Title,1,Titre,1
 editor.respectTitle,RAMP Storylines Editor & Creation Tool,1,Éditeur et outil de création de scénarios RAMP,0
 editor.logo,Logo,1,Logo,1
-editor.logoPreview,Logo Preview,1,Aperçu du logo,1
+editor.logoPreview,Logo preview,1,Aperçu du logo,1
 editor.logoPreviewAltText,Preview of product logo,1,Aperçu du logo du produit,0
-editor.logoAltText,Logo Alt Text,1,Lien contextuel,1
+editor.logoAltText,Logo alt text,1,Lien contextuel,1
 editor.logoAltText.desc,"For accessibility purposes, provide description text for the logo.",1,"Pour des raisons d'accessibilité, fournissez un texte descriptif pour le logo.",0
-editor.contextLink,Context Link,1,Lien contextuel,1
+editor.contextLink,Context link,1,Lien contextuel,1
 editor.contextLink.info,Context link shows up at the bottom of the page to provide additional resources for interested users.,1,Le lien contextuel apparaît au bas de la page et fournit des ressources supplémentaires aux utilisateurs intéressés.,1
-editor.contextLabel,Context Label,1,Étiquette de contexte,1
+editor.contextLabel,Context label,1,Étiquette de contexte,1
 editor.contextLabel.info,Context label shows up before the context link to explain what the link is for,1,L’étiquette de contexte apparaît avant le lien contextuel et explique à quoi sert le lien.,1
-editor.dateModified,Date Modified,1,Date de modification,1
+editor.dateModified,Date modified,1,Date de modification,1
 editor.load,Load,1,Charger,1
 editor.rename,Rename,1,Rename,0
 editor.loadPrevious,Load Previous,1,Charger le précédent,0
@@ -260,7 +258,7 @@ editor.slides.slideHeader,SLIDES,1,DIAPOSITIVES,0
 editor.slides.includeInToc,Include in table of contents,1,Inclure dans la table des matières,0
 editor.slide.untitled,Untitled slide,1,Diapositive sans titre,0
 editor.slide.copy.success,Slide copied successfully!,1,Diapositive copiée avec succès !,0
-editor.tocOrientation,Table of Contents Orientation,1,Orientation de la table des matières,0
+editor.tocOrientation,Table of contents orientation,1,Orientation de la table des matières,0
 editor.tocOrientation.info,The table of contents orientation will be set to vertical in mobile view.,1,L'orientation de la table des matières sera définie sur verticale en vue mobile.,0
 editor.tocOrientation.vertical,Vertical,1,Verticale,0
 editor.tocOrientation.horizontal,Horizontal,1,Horizontale,0