fix: with prettier
This commit is contained in:
Mohamed Maoulainine Maoulainine
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="canvas container-fluid">
|
||||
<CanvasItem
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
:title="item.title"
|
||||
:title-text="item.title_text"
|
||||
:description="item.description"
|
||||
:project-id="item.projectId"
|
||||
:class="['canvas-item', item.class, 'card', 'shadow', 'p-3']"
|
||||
:is-admin= props.isAdmin
|
||||
/>
|
||||
</div>
|
||||
<div class="canvas container-fluid">
|
||||
<CanvasItem
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
:title="item.title"
|
||||
:title-text="item.title_text"
|
||||
:description="item.description"
|
||||
:project-id="item.projectId"
|
||||
:class="['canvas-item', item.class, 'card', 'shadow', 'p-3']"
|
||||
:is-admin="props.isAdmin"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -18,65 +18,150 @@ import { ref, onMounted } from "vue";
|
||||
import CanvasItem from "@/components/canvas/CanvasItem.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
isAdmin: number;
|
||||
isAdmin: number;
|
||||
}>();
|
||||
|
||||
const items = ref([
|
||||
{ projectId: 1, title: 1, title_text: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" },
|
||||
{ projectId: 1, title: 2, title_text: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" },
|
||||
{ projectId: 1, title: 3, title_text: "3. Valeur", description: "La proposition de valeur", class: "Valeur" },
|
||||
{ projectId: 1, title: 4, title_text: "4. Solution", description: "Les solutions proposées", class: "Solution" },
|
||||
{ projectId: 1, title: 5, title_text: "5. Avantage", description: "Les avantages concurrentiels", class: "Avantage" },
|
||||
{ projectId: 1, title: 6, title_text: "6. Canaux", description: "Les canaux de distribution", class: "Canaux" },
|
||||
{ projectId: 1, title: 7, title_text: "7. Indicateurs", description: "Les indicateurs clés de performance", class: "Indicateurs" },
|
||||
{ projectId: 1, title: 8, title_text: "8. Coûts", description: "Les coûts associés", class: "Couts" },
|
||||
{ projectId: 1, title: 9, title_text: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
|
||||
{
|
||||
projectId: 1,
|
||||
title: 1,
|
||||
title_text: "1. Problème",
|
||||
description: "3 problèmes essentiels à résoudre pour le client",
|
||||
class: "Probleme",
|
||||
},
|
||||
{
|
||||
projectId: 1,
|
||||
title: 2,
|
||||
title_text: "2. Segments",
|
||||
description: "Les segments de clientèle visés",
|
||||
class: "Segments",
|
||||
},
|
||||
{
|
||||
projectId: 1,
|
||||
title: 3,
|
||||
title_text: "3. Valeur",
|
||||
description: "La proposition de valeur",
|
||||
class: "Valeur",
|
||||
},
|
||||
{
|
||||
projectId: 1,
|
||||
title: 4,
|
||||
title_text: "4. Solution",
|
||||
description: "Les solutions proposées",
|
||||
class: "Solution",
|
||||
},
|
||||
{
|
||||
projectId: 1,
|
||||
title: 5,
|
||||
title_text: "5. Avantage",
|
||||
description: "Les avantages concurrentiels",
|
||||
class: "Avantage",
|
||||
},
|
||||
{
|
||||
projectId: 1,
|
||||
title: 6,
|
||||
title_text: "6. Canaux",
|
||||
description: "Les canaux de distribution",
|
||||
class: "Canaux",
|
||||
},
|
||||
{
|
||||
projectId: 1,
|
||||
title: 7,
|
||||
title_text: "7. Indicateurs",
|
||||
description: "Les indicateurs clés de performance",
|
||||
class: "Indicateurs",
|
||||
},
|
||||
{
|
||||
projectId: 1,
|
||||
title: 8,
|
||||
title_text: "8. Coûts",
|
||||
description: "Les coûts associés",
|
||||
class: "Couts",
|
||||
},
|
||||
{
|
||||
projectId: 1,
|
||||
title: 9,
|
||||
title_text: "9. Revenus",
|
||||
description: "Les sources de revenus",
|
||||
class: "Revenus",
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
const bootstrapCss = document.createElement('link')
|
||||
bootstrapCss.rel = 'stylesheet'
|
||||
bootstrapCss.href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'
|
||||
bootstrapCss.integrity = 'sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+Fpc+NC'
|
||||
bootstrapCss.crossOrigin = 'anonymous'
|
||||
document.head.appendChild(bootstrapCss)
|
||||
const bootstrapCss = document.createElement("link");
|
||||
bootstrapCss.rel = "stylesheet";
|
||||
bootstrapCss.href =
|
||||
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css";
|
||||
bootstrapCss.integrity =
|
||||
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+Fpc+NC";
|
||||
bootstrapCss.crossOrigin = "anonymous";
|
||||
document.head.appendChild(bootstrapCss);
|
||||
|
||||
const bootstrapJs = document.createElement('script')
|
||||
bootstrapJs.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js'
|
||||
bootstrapJs.integrity = 'sha384-mQ93S0EhrF4Z1nM+fTflmYf0DyzsY5j7F5H3WlClDD6H3WUJh6kxBkF3GDW8n1j6'
|
||||
bootstrapJs.crossOrigin = 'anonymous'
|
||||
document.body.appendChild(bootstrapJs)
|
||||
})
|
||||
const bootstrapJs = document.createElement("script");
|
||||
bootstrapJs.src =
|
||||
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js";
|
||||
bootstrapJs.integrity =
|
||||
"sha384-mQ93S0EhrF4Z1nM+fTflmYf0DyzsY5j7F5H3WlClDD6H3WUJh6kxBkF3GDW8n1j6";
|
||||
bootstrapJs.crossOrigin = "anonymous";
|
||||
document.body.appendChild(bootstrapJs);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
|
||||
.canvas {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
gap: 12px;
|
||||
padding: 30px;
|
||||
/*background-color: #f8f9fa;*/
|
||||
position: relative;
|
||||
height: 90vh;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
gap: 12px;
|
||||
padding: 30px;
|
||||
/*background-color: #f8f9fa;*/
|
||||
position: relative;
|
||||
height: 90vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.Probleme { grid-column: 1 / 3; grid-row: 1 / 5; }
|
||||
.Segments { grid-column: 9 / 11; grid-row: 1 / 5; }
|
||||
.Valeur { grid-column: 5 / 7; grid-row: 1 / 5; }
|
||||
.Solution { grid-column: 3 / 5; grid-row: 1 / 3; }
|
||||
.Avantage { grid-column: 7 / 9; grid-row: 1 / 3; }
|
||||
.Canaux { grid-column: 7 / 9; grid-row: 3 / 5; }
|
||||
.Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; }
|
||||
.Couts { grid-column: 1 / 6; grid-row: 5 / 7; }
|
||||
.Revenus { grid-column: 6 / 11; grid-row: 5 / 7; }
|
||||
.Probleme {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 5;
|
||||
}
|
||||
.Segments {
|
||||
grid-column: 9 / 11;
|
||||
grid-row: 1 / 5;
|
||||
}
|
||||
.Valeur {
|
||||
grid-column: 5 / 7;
|
||||
grid-row: 1 / 5;
|
||||
}
|
||||
.Solution {
|
||||
grid-column: 3 / 5;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.Avantage {
|
||||
grid-column: 7 / 9;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.Canaux {
|
||||
grid-column: 7 / 9;
|
||||
grid-row: 3 / 5;
|
||||
}
|
||||
.Indicateurs {
|
||||
grid-column: 3 / 5;
|
||||
grid-row: 3 / 5;
|
||||
}
|
||||
.Couts {
|
||||
grid-column: 1 / 6;
|
||||
grid-row: 5 / 7;
|
||||
}
|
||||
.Revenus {
|
||||
grid-column: 6 / 11;
|
||||
grid-row: 5 / 7;
|
||||
}
|
||||
|
||||
.canvas-item {
|
||||
/*background-color: white;*/
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
/*background-color: white;*/
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user