robin.couret/manolia-alpha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add content in flow component

Browse Source
This commit is contained in:
Robin COuret
2026-03-08 19:00:10 +01:00
parent d1e5a6b0c7
commit e0bc69e98f
21 changed files with 413 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
user-interface/src/components/EvaluateQuestion.vue
View File

@@ -2,6 +2,7 @@
import { onBeforeMount, ref, watch } from "vue";
import type { Knowledge, Question, MetricCreate, Metric } from "@/types/types"
import { BCollapse, BSlider } from "buefy";
import { useStepStore } from '@/stores/step'
import { useItemStore } from '@/stores/item'
@@ -79,10 +80,55 @@
<template>
<div class="container">
<h2>Evaluate Questions</h2>
<ul>
<li v-for="(question, index) in questions" :key="index">
<p>{{ question.question }}</p>
<div class="title-container">
<div class="title-icon">
<img src="../assets/svg/message-circle-star.svg" alt="evaluate icon" />
</div>
<h2>Evaluer les questions</h2>
</div>
<div>
<ul class="list">
<li class="list-item">
<span class="list-index">1</span>
<p>Un ensemble de questions a été généré à partir d'une connaissance que vous avez saisie (ci-dessous).</p>
</li>
<li class="list-item">
<span class="list-index">2</span>
<p>Mise en situation : si vous deviez vous adresser à une personne capable d'améliorer la connaissance incertaine, la question générée serait-elle pertinente ?</p>
</li>
<li class="list-item">
<span class="list-index">3</span>
<p>Evaluez de 0 à 100, pour chaque question, la pertinence de celle-ci.</p>
</li>
</ul>
</div>
<b-collapse class="card" animation="slide" aria-id="contentIdForA11y3">
<template #trigger="props">
<div
class="card-header"
role="button"
aria-controls="contentIdForA11y3"
:aria-expanded="props.open"
>
<p class="card-header-title">Connaissance</p>
<a class="card-header-icon">
{{ props.open ? "▲" : "▼" }}
</a>
</div>
</template>
<div class="card-content">
<div class="content">
{{ itemStore.knowledge?.content }}
</div>
</div>
</b-collapse>
<ul class="question-list">
<li v-for="(question, index) in questions" :key="index" class="question-list-item">
<div class="question">
<img src="../assets/svg/question-mark.svg" alt="question-mark " />
{{ question.question }}
</div>
<b-field>
<b-slider v-model="metrics![getIndexMetrics(question)]!.need_index"></b-slider>
</b-field>
@@ -99,13 +145,57 @@
</template>
<style scoped>
.container{
background-color: #ffffff;
border-radius: 16px;
padding: 34px;
}
.btn-container{
display: flex;
justify-content: end;
}
.list{
padding-left: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.list-item{
display: flex;
flex-direction: raw;
align-items: center;
gap: 8px;
}
.list-index{
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
border: 1px solid #D6D9E0;
border-radius: 4px;
}
.card-header{
box-shadow: none;
}
.card{
box-shadow: none;
border: 1px solid #D6D9E0;
}
.question-list{
display: flex;
flex-direction: column;
gap: 12px;
}
.question-list-item{
padding: 24px;
border: 1px solid #D6D9E0;
border-radius: 16px;
}
.question{
background-color: #ebebeb;
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 4px;
img{
border-right: 1px solid;
}
}
</style>