From c38c822dda141fffbf829ab20543b4acbda8e2d1 Mon Sep 17 00:00:00 2001
From: IshavSohal <ishav.sohal@mail.utoronto.ca>
Date: Tue, 27 Aug 2024 15:12:12 -0400
Subject: [PATCH] dashboard redesign

---
 src/components/home.vue            | 238 ++++++++++++++++++++++++++---
 src/components/landing.vue         |   2 +-
 src/components/metadata-editor.vue |   8 +-
 src/lang/lang.csv                  |  22 ++-
 src/stores/userStore.ts            |   1 +
 tailwind.config.js                 |   2 +-
 6 files changed, 249 insertions(+), 24 deletions(-)

diff --git a/src/components/home.vue b/src/components/home.vue
index 9b37632b..6730e219 100644
--- a/src/components/home.vue
+++ b/src/components/home.vue
@@ -1,38 +1,242 @@
 <template>
-    <div class="relative">
-        <div class="absolute top-0 right-0 bg-white text-black p-2">
-            {{ $t('editor.landing.greeting') }} {{ userName }}!
+    <div>
+        <div class="flex justify-between items-center p-8 border-b border-solid border-black">
+            <h1 class="text-4xl">{{ $t('editor.respectTitle') }}</h1>
+            <router-link
+                :to="{ name: 'home', params: { lang: currLang === 'en' ? 'fr' : 'en' } }"
+                v-if="sourceFile !== 'index-ca-en.html#' && sourceFile !== 'index-ca-fr.html#'"
+            >
+                <div class="underline">{{ `${currLang === 'en' ? 'Français' : 'English'}` }}</div>
+            </router-link>
         </div>
-        <div class="flex justify-center">
-            <div class="home-btn-container border-4 border-gray-400 border-solid m-24">
-                <router-link :to="{ name: 'metadataNew' }" class="flex justify-center h-full w-full" target>
-                    <button class="text-2xl font-bold">+ {{ $t('editor.createProduct') }}</button>
-                </router-link>
+        <div class="relative" style="margin-right: 10%; margin-left: 10%">
+            <h2 class="pt-10 text-4xl font-semibold">{{ $t('editor.dashboard') }}</h2>
+            <div class="text-xl font-semibold text-right pt-2 pb-2">
+                {{ $t('editor.landing.greeting') }} {{ userName }}!
             </div>
-            <div class="home-btn-container border-4 border-gray-400 border-solid m-24">
-                <router-link :to="{ name: 'metadataExisting' }" class="flex justify-center h-full w-full" target>
-                    <button class="text-2xl font-bold">{{ $t('editor.editProduct') }}</button>
-                </router-link>
+            <div class="mb-5 text-2xl font-semibold">{{ $t('editor.chooseOption') }}</div>
+            <div class="flex justify-center">
+                <div class="home-btn-container border border-gray-400 border-solid mr-5 flex-1 home-buttons">
+                    <router-link :to="{ name: 'metadataNew' }" class="flex justify-center h-full" target>
+                        <button class="flex items-center text-xl font-bold px-2" tabindex="-1">
+                            <svg
+                                height="50"
+                                width="50"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke-width="1.5"
+                                stroke="currentColor"
+                                class="size-6 pr-3"
+                            >
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                            </svg>
+                            <div style="font-size: calc(60% + 0.25vw)">{{ $t('editor.createProduct') }}</div>
+                        </button>
+                    </router-link>
+                </div>
+                <div class="home-btn-container border border-gray-400 border-solid flex-1 home-buttons">
+                    <router-link :to="{ name: 'metadataExisting' }" class="flex justify-center h-full" target>
+                        <button class="flex items-center text-xl font-bold" tabindex="-1">
+                            <span class="pr-3">
+                                <svg
+                                    width="55"
+                                    height="55"
+                                    viewBox="0 0 55 55"
+                                    fill="none"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                >
+                                    <path
+                                        d="M6.875 9.16675H48.125"
+                                        stroke="#33363F"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path
+                                        d="M11.4585 9.16675H43.5418V40.3417C43.5418 41.4619 43.5418 42.0219 43.3238 42.4497C43.1321 42.8261 42.8261 43.132 42.4498 43.3238C42.022 43.5417 41.4619 43.5417 40.3418 43.5417H14.6585C13.5384 43.5417 12.9783 43.5417 12.5505 43.3238C12.1742 43.132 11.8682 42.8261 11.6765 42.4497C11.4585 42.0219 11.4585 41.4619 11.4585 40.3417V9.16675Z"
+                                        stroke="#33363F"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path
+                                        d="M27.5 34.375V20.625"
+                                        stroke="#33363F"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path
+                                        d="M20.625 27.5L27.3939 20.7311C27.4525 20.6725 27.5475 20.6725 27.6061 20.7311L34.375 27.5"
+                                        stroke="#33363F"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                </svg>
+                            </span>
+                            <div style="font-size: calc(60% + 0.25vw)">{{ $t('editor.loadProduct') }}</div>
+                        </button>
+                    </router-link>
+                </div>
             </div>
+
+            <h2 class="pt-8 pb-5 text-2xl font-semibold">{{ $t('editor.previousProducts') }}</h2>
+            <table class="shadow-lg bg-white w-full pr-0 mr-0">
+                <colgroup>
+                    <col class="w-3/5" />
+                    <col span="2" />
+                </colgroup>
+                <tr>
+                    <td style="background-color: #e7e7e7" class="font-bold border-b border-solid border-black">
+                        <div style="font-size: calc(70% + 0.25vw)" class="m-2 mr-0 ml-3">
+                            {{ $t('editor.previousProducts.productInfo') }}
+                        </div>
+                    </td>
+                    <td style="background-color: #e7e7e7" class="font-bold border-b border-solid border-black">
+                        <div style="font-size: calc(70% + 0.25vw)">
+                            {{ $t('editor.previousProducts.lastModified') }}
+                        </div>
+                    </td>
+                    <td style="background-color: #e7e7e7" class="font-bold border-b border-solid border-black">
+                        <div style="font-size: calc(70% + 0.25vw)" class="ml-2">
+                            {{ $t('editor.previousProducts.actions') }}
+                        </div>
+                    </td>
+                </tr>
+                <tr v-for="(storyline, idx) in userStorylines" :key="idx">
+                    <td
+                        style="background-color: #f9f9f9; padding-right: 1vw"
+                        class="border-b border-solid"
+                        :class="idx === userStorylines.length - 1 ? 'border-black' : 'border-gray-200'"
+                    >
+                        <div class="m-2 mt-4 ml-3">UUID: {{ storyline.uuid }}</div>
+                        <div class="m-2 mb-4 ml-3">
+                            {{ $t('editor.previousProducts.productInfo.title') + ': ' + storyline.titleEN }}
+                        </div>
+                    </td>
+                    <td
+                        style="background-color: #f9f9f9; padding-right: 1vw"
+                        class="border-b border-solid"
+                        :class="idx === userStorylines.length - 1 ? 'border-black' : 'border-gray-200'"
+                    >
+                        {{ dateFormatter(storyline.lastModified) }}
+                    </td>
+                    <td
+                        style="background-color: #f9f9f9; padding-right: 1vw"
+                        class="border-b border-solid"
+                        :class="idx === userStorylines.length - 1 ? 'border-black' : 'border-gray-200'"
+                    >
+                        <button
+                            class="flex items-center font-semibold rounded-sm py-2 border border-solid border-black home-buttons"
+                            style="
+                                padding-right: 1vw;
+                                padding-left: 1vw;
+                                word-wrap: break-word;
+                                overflow-wrap: break-word;
+                                display: flex;
+                                flex-wrap: wrap;
+                                white-space: normal;
+                                min-width: 0;
+                                max-width: 100%;
+                            "
+                        >
+                            <span class="pr-1">
+                                <svg
+                                    height="20"
+                                    width="20"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24"
+                                    fill="currentColor"
+                                    class="size-6"
+                                >
+                                    <path
+                                        d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z"
+                                    />
+                                </svg>
+                            </span>
+                            <span>{{ $t('editor.chart.label.edit') }}</span>
+                        </button>
+                    </td>
+                </tr>
+            </table>
         </div>
     </div>
 </template>
 
 <script lang="ts">
 import { Vue } from 'vue-property-decorator';
-import { useUserStore } from '../stores/userStore';
+import { Storyline, UserProfile, useUserStore } from '../stores/userStore';
 
 export default class HomeV extends Vue {
+    userStore = useUserStore();
+    currLang = 'en';
+    sourceFile = 'index.html#';
+    profile: UserProfile = {};
+
+    mounted(): void {
+        this.currLang = (this.$route.params.lang as string) || 'en';
+        this.sourceFile = window.location.href.split('/').find((s) => s.includes('#'));
+        this.userStore
+            .fetchUserProfile()
+            .then(() => {
+                if (this.userStore.userProfile) {
+                    this.profile = JSON.parse(JSON.stringify(this.userStore.userProfile));
+                }
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    }
     get userName(): string {
-        const userStore = useUserStore();
-        return userStore.userProfile.userName || 'Guest';
+        return this.profile?.userName || 'Guest';
+    }
+
+    get userStorylines(): Array<Storyline> {
+        return this.profile?.storylines || {};
+    }
+
+    dateFormatter(date: string | null): string {
+        if (date) {
+            const d = new Date(date);
+            const months = [
+                this.$t('editor.month.january'),
+                this.$t('editor.month.february'),
+                this.$t('editor.month.march'),
+                this.$t('editor.month.april'),
+                this.$t('editor.month.may'),
+                this.$t('editor.month.june'),
+                this.$t('editor.month.july'),
+                this.$t('editor.month.august'),
+                this.$t('editor.month.september'),
+                this.$t('editor.month.october'),
+                this.$t('editor.month.november'),
+                this.$t('editor.month.december')
+            ];
+            if (this.currLang === 'en') {
+                return months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
+            } else {
+                return d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();
+            }
+        }
     }
 }
 </script>
 
 <style lang="scss">
 .home-btn-container {
-    height: 60vh;
-    width: 40vh;
+    height: 12vh;
+    width: 45vh;
+    min-height: 110px;
+}
+.home-buttons:hover {
+    background-color: #e7e7e7;
+}
+
+table {
+    table-layout: fixed;
+}
+
+td {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    white-space: normal;
 }
 </style>
diff --git a/src/components/landing.vue b/src/components/landing.vue
index e7492de2..f9d53ac6 100644
--- a/src/components/landing.vue
+++ b/src/components/landing.vue
@@ -38,7 +38,7 @@ export default class LandingV extends Vue {
 
     get userName(): string {
         const userStore = useUserStore();
-        return userStore.userProfile.userName || 'Guest';
+        return userStore.userProfile?.userName || 'Guest';
     }
 }
 </script>
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 873d1d42..986f12ec 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -5,7 +5,7 @@
             <div class="px-20 py-5">
                 <div class="flex">
                     <div class="flex flex-1 text-2xl font-bold mb-5">
-                        {{ editExisting ? $t('editor.editProduct') : $t('editor.createProduct') }}
+                        {{ editExisting ? $t('editor.loadProduct') : $t('editor.createProduct') }}
                     </div>
                     <button class="editor-button" @click="swapLang()">
                         {{ configLang === 'en' ? $t('editor.frenchConfig') : $t('editor.englishConfig') }}
@@ -220,7 +220,7 @@
                     {{ $t('editor.saveChanges') }}
                 </button>
                 <div class="ml-auto">
-                    <router-link :to="{ name: 'home' }" target>
+                    <router-link :to="{ name: 'home' }" target tabindex="-1">
                         <button class="editor-button">{{ $t('editor.back') }}</button>
                     </router-link>
                     <button
@@ -1336,9 +1336,9 @@ export default class MetadataEditorV extends Vue {
 
     get getStorylines() {
         const userStore = useUserStore();
-        const userStorylines = userStore.userProfile.storylines?.map((s) => ({ ...s, isUserStoryline: true })) || [];
+        const userStorylines = userStore.userProfile?.storylines?.map((s) => ({ ...s, isUserStoryline: true })) || [];
         const allStorylines =
-            userStore.userProfile.allStorylines?.filter((s) => !userStorylines.some((u) => u.uuid === s.uuid)) || [];
+            userStore.userProfile?.allStorylines?.filter((s) => !userStorylines.some((u) => u.uuid === s.uuid)) || [];
         let combined = [...userStorylines, ...allStorylines];
 
         if (this.uuid) {
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 7848585a..4a96d5af 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -31,7 +31,14 @@ editor.feedback.subject,Storylines Editor Feedback,1,Commentaires de l'éditeur
 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.editProduct,Edit Existing Storylines Product,1,Modifier un produit de scénarios,1
+editor.loadProduct,Load Existing Storylines Product,1,Charger un produit Storylines existant,0
+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.productDetails,Storylines product details,1,Détails du produit de scénarios,1
 editor.metadata.instructions,Fill in metadata details about your new Storylines product. Use the "Preview" button to see what your slides will look like.,1,Inscrivez les métadonnées de votre nouveau produit de scénario. Utilisez la fonction « Afficher l’aperçu » pour voir à quoi ressemblent vos diapositives.,1
@@ -42,6 +49,7 @@ editor.warning.rename,UUID already in use. Please choose a different ID.,1,UUID
 editor.changeUuid,Click here to change UUID,1,Click here to change UUID,0
 editor.changingUuid,You are changing this product UUID to {changeUuid}. Save changes required.,1,You are changing this product UUID to {changeUuid}. Save changes required.,0
 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.logoPreviewAltText,Preview of product logo,1,Aperçu du logo du produit,0
@@ -163,6 +171,18 @@ 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.month.january,January,1,Janvier,0
+editor.month.february,February,1,Février,0
+editor.month.march,March,1,Mars,0
+editor.month.april,April,1,Avril,0
+editor.month.may,May,1,Mai,0
+editor.month.june,June,1,Juin,0
+editor.month.july,July,1,Juillet,0
+editor.month.august,August,1,Août,0
+editor.month.september,September,1,Septembre,0
+editor.month.october,October,1,Octobre,0
+editor.month.november,November,1,Novembre,0
+editor.month.december,December,1,Décembre,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
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index 88ecabb6..26710700 100644
--- a/src/stores/userStore.ts
+++ b/src/stores/userStore.ts
@@ -4,6 +4,7 @@ interface Storyline {
     uuid: string;
     titleEN: string;
     titleFR: string;
+    lastModified: Date;
     isUserStoryline?: boolean;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 2a4631df..fef7e16d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,7 +22,7 @@ module.exports = {
             flex: {
                 2: '2 2 0%'
             },
-            maxHeight:{
+            maxHeight: {
                 '60vh': '60vh'
             },
             maxWidth: {