add export product button

Author: Ryan Coulson

src/components/editor.vue

@@ -177,6 +177,50 @@
                     >
                         <span class="bottom-0 question-mark-button"> ? </span>
                     </button>
+
+                    <!-- Export button -->
+                    <button
+                        @click="exportProduct"
+                        class="bg-white border border-black rounded-full w-9 h-9 flex items-center justify-center hover:bg-gray-100"
+                        v-tippy="{
+                            delay: '200',
+                            placement: 'top',
+                            content: $t('editor.export'),
+                            animateFill: true
+                        }"
+                        :aria-label="$t('editor.export')"
+                    >
+                        <span class="bottom-0 question-mark-button">
+                            <svg
+                                width="20px"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                stroke="#000000"
+                                stroke-width="0.336"
+                            >
+                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                <g
+                                    id="SVGRepo_tracerCarrier"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke="#CCCCCC"
+                                    stroke-width="0.288"
+                                ></g>
+                                <g id="SVGRepo_iconCarrier">
+                                    <path
+                                        d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z"
+                                        fill="#000"
+                                    ></path>
+                                    <path
+                                        d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z"
+                                        fill="#000"
+                                    ></path>
+                                </g>
+                            </svg>
+                        </span>
+                    </button>
                 </div>
             </div>
         </div>
@@ -543,6 +587,14 @@ export default class EditorV extends Vue {
         });
     }
 
+    exportProduct(): void {
+        if (this.$refs.slide != null && this.currentSlide !== '') {
+            (this.$refs.slide as SlideEditorV).saveChanges();
+        }
+
+        this.$emit('export-product');
+    }
+
     /**
      * Open current editor config as a new Storylines product in new tab.
      * @param language The config language to preview (either 'en' or 'fr')
@@ -687,8 +739,9 @@ window.addEventListener('resize', () => {
 }
 
 .question-mark-button {
-    font-size: 24px;
-    line-height: 1.8rem;
+    font-size: 20px;
+    line-height: 1.4rem;
+    font-weight: 500;
 }
 
 .toc-popup-button {

src/components/metadata-editor.vue

@@ -514,6 +514,7 @@
                 @save-changes="onSave"
                 @save-status="updateSaveStatus"
                 @refresh-config="refreshConfig"
+                @export-product="exportProduct"
                 ref="mainEditor"
             >
                 <!-- Metadata editing modal inside the editor -->
@@ -591,6 +592,7 @@ import { useUserStore } from '../stores/userStore';
 import JSZip from 'jszip';
 import axios from 'axios';
 import { v4 as uuidv4 } from 'uuid';
+import { saveAs } from 'file-saver';
 
 import Message from 'vue-m-message';
 import SlideEditorV from './slide-editor.vue';
@@ -1334,6 +1336,20 @@ export default class MetadataEditorV extends Vue {
         this.temporaryMetadataCopy = JSON.parse(JSON.stringify(this.metadata));
     }
 
+    exportProduct(): void {
+        this.generateConfig(false);
+
+        this.configFileStructure?.zip.generateAsync({ type: 'blob' }).then(
+            (blob) => {
+                saveAs(blob, `${this.configFileStructure?.uuid}.zip`);
+                Message.success(this.$t('editor.export.success'));
+            },
+            (err) => {
+                Message.error(this.$t('editor.export.error'));
+            }
+        );
+    }
+
     /**
      * Conducts various checks before saving.
      */
@@ -1345,9 +1361,9 @@ export default class MetadataEditorV extends Vue {
 
     /**
      * Called when `Save Changes` is pressed. Re-generates the Storylines configuration file
-     * with the new changes, then generates and submits the product file to the server.
+     * with the new changes, and if `publish` is set to true, generates and submits the product file to the server.
      */
-    generateConfig(): ConfigFileStructure {
+    generateConfig(publish = true): ConfigFileStructure {
         this.saving = true;
 
         // Update the configuration files, for both languages.
@@ -1370,97 +1386,107 @@ export default class MetadataEditorV extends Vue {
         this.configFileStructure?.zip.file(frFileName, frFormattedConfigFile);
 
         // Upload the ZIP file.
-        this.configFileStructure?.zip.generateAsync({ type: 'blob' }).then((content: Blob) => {
-            const formData = new FormData();
-            formData.append('data', content, `${this.uuid}.zip`);
-            const userStore = useUserStore();
-            const headers = { 'Content-Type': 'multipart/form-data', user: userStore.userProfile.userName || 'Guest' };
-            Message.warning(this.$t('editor.editMetadata.message.wait'));
+        if (publish) {
+            this.configFileStructure?.zip.generateAsync({ type: 'blob' }).then((content: Blob) => {
+                const formData = new FormData();
+                formData.append('data', content, `${this.uuid}.zip`);
+                const userStore = useUserStore();
+                const headers = {
+                    'Content-Type': 'multipart/form-data',
+                    user: userStore.userProfile.userName || 'Guest'
+                };
+                Message.warning(this.$t('editor.editMetadata.message.wait'));
+
+                axios
+                    .post(this.apiUrl + '/upload', formData, { headers })
+                    .then((res: AxiosResponse) => {
+                        const responseData = res.data;
+                        responseData.files; // binary representation of the file
+                        responseData.status; // HTTP status
+                        const commitHash = responseData.commitHash; // commit hash of the git commit
+                        this.unsavedChanges = false;
+                        this.loadExisting = true; // if editExisting was false, we can now set it to true
+
+                        if (import.meta.env.VITE_APP_CURR_ENV) {
+                            if (responseData.new) {
+                                axios
+                                    .post(import.meta.env.VITE_APP_NET_API_URL + '/api/user/register', {
+                                        uuid: this.uuid,
+                                        titleEn: this.configs['en']?.title ?? '',
+                                        titleFr: this.configs['fr']?.title ?? ''
+                                    })
+                                    .then((response: any) => {
+                                        const userStore = useUserStore();
+                                        userStore.fetchUserProfile();
+                                        formData.append('uuid', this.uuid);
+                                        formData.append('titleEn', this.configs['en']?.title ?? '');
+                                        formData.append('titleFr', this.configs['fr']?.title ?? '');
+                                        formData.append('commitHash', commitHash);
+                                        formData.delete('data'); // Remove the data from the form so that we don't pass it into the .NET API
+                                        axios
+                                            .post(
+                                                import.meta.env.VITE_APP_NET_API_URL + '/api/version/commit',
+                                                formData
+                                            )
+                                            .then((response: any) => {
+                                                Message.success(this.$t('editor.editMetadata.message.successfulSave'));
+                                            })
+                                            .catch((error: any) => console.log(error.response || error))
+                                            .finally(() => {
+                                                // padding to prevent save button from being clicked rapidly
+                                                setTimeout(() => {
+                                                    this.saving = false;
+                                                }, 500);
+                                            });
+                                    })
+                                    .catch((error: any) => console.log(error.response || error));
+                            } else {
+                                formData.append('uuid', this.uuid);
+                                formData.append('titleEn', this.configs['en']?.title ?? '');
+                                formData.append('titleFr', this.configs['fr']?.title ?? '');
+                                formData.append('commitHash', commitHash);
+                                formData.delete('data'); // Remove the data from the form so that we don't pass it into the .NET API
+                                axios
+                                    .post(import.meta.env.VITE_APP_NET_API_URL + '/api/version/commit', formData)
+                                    .then((response: any) => {
+                                        Message.success(this.$t('editor.editMetadata.message.successfulSave'));
+                                    })
+                                    .catch((error: any) => console.log(error.response || error))
+                                    .finally(() => {
+                                        // padding to prevent save button from being clicked rapidly
+                                        setTimeout(() => {
+                                            this.saving = false;
+                                        }, 500);
+                                    });
+                            }
 
-            axios
-                .post(this.apiUrl + '/upload', formData, { headers })
-                .then((res: AxiosResponse) => {
-                    const responseData = res.data;
-                    responseData.files; // binary representation of the file
-                    responseData.status; // HTTP status
-                    const commitHash = responseData.commitHash; // commit hash of the git commit
-                    this.unsavedChanges = false;
-                    this.loadExisting = true; // if editExisting was false, we can now set it to true
-
-                    if (import.meta.env.VITE_APP_CURR_ENV) {
-                        if (responseData.new) {
-                            axios
-                                .post(import.meta.env.VITE_APP_NET_API_URL + '/api/user/register', {
-                                    uuid: this.uuid,
-                                    titleEn: this.configs['en']?.title ?? '',
-                                    titleFr: this.configs['fr']?.title ?? ''
+                            fetch(this.apiUrl + `/retrieveMessages`)
+                                .then((res: any) => {
+                                    if (res.ok) return res.json();
                                 })
-                                .then((response: any) => {
-                                    const userStore = useUserStore();
-                                    userStore.fetchUserProfile();
-                                    formData.append('uuid', this.uuid);
-                                    formData.append('titleEn', this.configs['en']?.title ?? '');
-                                    formData.append('titleFr', this.configs['fr']?.title ?? '');
-                                    formData.append('commitHash', commitHash);
-                                    formData.delete('data'); // Remove the data from the form so that we don't pass it into the .NET API
+                                .then((data) => {
                                     axios
-                                        .post(import.meta.env.VITE_APP_NET_API_URL + '/api/version/commit', formData)
-                                        .then((response: any) => {
-                                            Message.success(this.$t('editor.editMetadata.message.successfulSave'));
+                                        .post(import.meta.env.VITE_APP_NET_API_URL + '/api/log/create', {
+                                            messages: data.messages
                                         })
-                                        .catch((error: any) => console.log(error.response || error))
-                                        .finally(() => {
-                                            // padding to prevent save button from being clicked rapidly
-                                            setTimeout(() => {
-                                                this.saving = false;
-                                            }, 500);
-                                        });
+                                        .catch((error: any) => console.log(error.response || error));
                                 })
                                 .catch((error: any) => console.log(error.response || error));
                         } else {
-                            formData.append('uuid', this.uuid);
-                            formData.append('titleEn', this.configs['en']?.title ?? '');
-                            formData.append('titleFr', this.configs['fr']?.title ?? '');
-                            formData.append('commitHash', commitHash);
-                            formData.delete('data'); // Remove the data from the form so that we don't pass it into the .NET API
-                            axios
-                                .post(import.meta.env.VITE_APP_NET_API_URL + '/api/version/commit', formData)
-                                .then((response: any) => {
-                                    Message.success(this.$t('editor.editMetadata.message.successfulSave'));
-                                })
-                                .catch((error: any) => console.log(error.response || error))
-                                .finally(() => {
-                                    // padding to prevent save button from being clicked rapidly
-                                    setTimeout(() => {
-                                        this.saving = false;
-                                    }, 500);
-                                });
+                            Message.success(this.$t('editor.editMetadata.message.successfulSave'));
+                            // padding to prevent save button from being clicked rapidly
+                            setTimeout(() => {
+                                this.saving = false;
+                            }, 500);
                         }
-
-                        fetch(this.apiUrl + `/retrieveMessages`)
-                            .then((res: any) => {
-                                if (res.ok) return res.json();
-                            })
-                            .then((data) => {
-                                axios
-                                    .post(import.meta.env.VITE_APP_NET_API_URL + '/api/log/create', {
-                                        messages: data.messages
-                                    })
-                                    .catch((error: any) => console.log(error.response || error));
-                            })
-                            .catch((error: any) => console.log(error.response || error));
-                    } else {
-                        Message.success(this.$t('editor.editMetadata.message.successfulSave'));
-                        // padding to prevent save button from being clicked rapidly
-                        setTimeout(() => {
-                            this.saving = false;
-                        }, 500);
-                    }
-                })
-                .catch(() => {
-                    Message.error(this.$t('editor.editMetadata.message.error.failedSave'));
-                });
-        });
+                    })
+                    .catch(() => {
+                        Message.error(this.$t('editor.editMetadata.message.error.failedSave'));
+                    });
+            });
+        } else {
+            this.saving = false;
+        }
 
         return this.configFileStructure as ConfigFileStructure;
     }

src/lang/lang.csv

@@ -110,6 +110,9 @@ 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.load,Load,1,Charger,1
+editor.export,Export,1,Exporter,0
+editor.export.success,Export successful,1,Exportation réussie,0
+editor.export.error,Export failed,1,Échec de l’exportation,0
 editor.rename,Rename,1,Rename,0
 editor.loadPrevious,Load Previous,1,Charger le précédent,0
 editor.viewHistory,View Previous,1,Voir précédent,0