Skip to content

Commit

Permalink
dashboard redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@IshavSohal
IshavSohal committed Nov 15, 2024
1 parent 483a170 commit 3e03426
Show file tree
Hide file tree
Showing 4 changed files with 226 additions and 21 deletions.
231 changes: 214 additions & 17 deletions src/components/home.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions src/components/metadata-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') }}
Expand Down Expand Up @@ -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
Expand Down
10 changes: 9 additions & 1 deletion src/lang/lang.csv
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ module.exports = {
flex: {
2: '2 2 0%'
},
maxHeight:{
maxHeight: {
'60vh': '60vh'
},
maxWidth: {
Expand Down

0 comments on commit 3e03426

Please sign in to comment.