From 3e034266c86b4c6ebd65b1af521a69849345c7d8 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            | 231 ++++++++++++++++++++++++++---
 src/components/metadata-editor.vue |   4 +-
 src/lang/lang.csv                  |  10 +-
 tailwind.config.js                 |   2 +-
 4 files changed, 226 insertions(+), 21 deletions(-)

diff --git a/src/components/home.vue b/src/components/home.vue
index 9b37632b..d1cef66c 100644
--- a/src/components/home.vue
+++ b/src/components/home.vue
@@ -1,38 +1,235 @@
 <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'"
+                    >
+                        May 3, 2024
+                    </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';
+import { RouteLocationNormalized } from 'vue-router';
 
 export default class HomeV extends Vue {
+    userStore = useUserStore();
+    currLang = 'en';
+    sourceFile = 'index.html#';
+
+    mounted(): void {
+        this.currLang = (this.$route.params.lang as string) || 'en';
+        this.sourceFile = window.location.href.split('/').find((s) => s.includes('#'));
+        console.log('fetching user profile');
+        console.log(this.fetchProfile());
+        // just for testing purposes
+        this.userStore.userProfile.userName = 'Test User';
+        this.userStore.userProfile.storylines = [
+            {
+                uuid: '00000000-0000-0000-0000-000000000000',
+                titleEN: 'Test StoryRAMP',
+                titleFR: "Aperçu des secteurs de l’INRP : 'extraction de sables bitumineux111111"
+            },
+            {
+                uuid: '6dabdc70-8ad9-43d6-a09a-92cae0d9a2c3',
+                titleEN: 'new product',
+                titleFR: 'new product'
+            },
+            {
+                uuid: '123456',
+                titleEN: 'a product',
+                titleFR: 'a product'
+            }
+        ];
+    }
     get userName(): string {
-        const userStore = useUserStore();
-        return userStore.userProfile.userName || 'Guest';
+        return this.userStore.userProfile.userName || 'Guest';
+    }
+
+    get userStorylines(): Array<Storyline> {
+        return this.userStore.userProfile.storylines;
+    }
+
+    fetchProfile(): UserProfile {
+        this.userStore.fetchUserProfile().then(() => {
+            console.log('user profile fetched');
+            console.log(JSON.parse(JSON.stringify(this.userStore.userProfile)));
+        });
     }
 }
 </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/metadata-editor.vue b/src/components/metadata-editor.vue
index 873d1d42..c9c86537 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
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 7848585a..49a9ebb9 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
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: {