kwa.fr/kwa-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

appends tests tab

Browse Source
This commit is contained in:
Sylvain Schneider
2026-05-11 23:39:20 +02:00
parent 14314de3b8
commit 4e179b40d2
1 changed files with 95 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
kwa-ui/src/components/RequirementDetail.vue
View File

@@ -3,6 +3,8 @@ import Button from 'primevue/button'
import Card from 'primevue/card' import Card from 'primevue/card'
import Chip from 'primevue/chip' import Chip from 'primevue/chip'
import Divider from 'primevue/divider' import Divider from 'primevue/divider'
import TabView from 'primevue/tabview'
import TabPanel from 'primevue/tabpanel'
import Tag from 'primevue/tag' import Tag from 'primevue/tag'
export interface Requirement { export interface Requirement {
@@ -76,79 +78,90 @@ const prioritySeverity = (priority: Requirement['priority']) => {
</template> </template>
<template #content> <template #content>
<!-- Status and priority tags --> <TabView>
<div class="detail-badges"> <TabPanel value="details" header="Details">
<Tag :value="requirement.status" :severity="statusSeverity(requirement.status)" /> <!-- Status and priority tags -->
<Tag :value="requirement.priority" :severity="prioritySeverity(requirement.priority)" rounded /> <div class="detail-badges">
</div> <Tag :value="requirement.status" :severity="statusSeverity(requirement.status)" />
<Tag :value="requirement.priority" :severity="prioritySeverity(requirement.priority)" rounded />
<!-- Description -->
<p class="detail-description">{{ requirement.description }}</p>
<!-- Blockers section (shown only if blockers exist) -->
<article v-if="requirement.blockers.length" class="info-panel info-panel--warning">
<h3>Identified blockers</h3>
<ul class="blockers-list">
<li v-for="blocker in requirement.blockers" :key="blocker">
<i class="pi pi-exclamation-triangle" />
<span>{{ blocker }}</span>
</li>
</ul>
</article>
<Divider />
<!-- Key attributes: Author, Stakeholders, Priority, Flexibility -->
<div class="detail-grid">
<article class="info-panel">
<h3>Author</h3>
<p>{{ requirement.owner }}</p>
</article>
<article class="info-panel">
<h3>Stakeholders</h3>
<div class="chip-row">
<Chip v-for="stakeholder in requirement.stakeholders" :key="stakeholder" :label="stakeholder" />
</div> </div>
</article>
<article class="info-panel"> <!-- Description -->
<h3>Flexibility</h3> <p class="detail-description">{{ requirement.description }}</p>
<p>{{ requirement.flexibility }}</p>
</article>
<article class="info-panel"> <!-- Blockers section (shown only if blockers exist) -->
<h3>Tolerances</h3> <article v-if="requirement.blockers.length" class="info-panel info-panel--warning">
<p>{{ requirement.tolerances }}</p> <h3>Identified blockers</h3>
</article> <ul class="blockers-list">
</div> <li v-for="blocker in requirement.blockers" :key="blocker">
<i class="pi pi-exclamation-triangle" />
<span>{{ blocker }}</span>
</li>
</ul>
</article>
<Divider /> <Divider />
<!-- Acceptance criteria and impacted modules --> <!-- Key attributes: Author, Stakeholders, Priority, Flexibility -->
<div class="detail-columns"> <div class="detail-grid">
<article class="info-panel"> <article class="info-panel">
<h3>Acceptance criteria</h3> <h3>Author</h3>
<ul class="checklist"> <p>{{ requirement.owner }}</p>
<li v-for="item in requirement.acceptanceCriteria" :key="item"> </article>
<i class="pi pi-check-circle" />
<span>{{ item }}</span>
</li>
</ul>
</article>
<article class="info-panel"> <article class="info-panel">
<h3>Impacted modules</h3> <h3>Stakeholders</h3>
<div class="chip-row"> <div class="chip-row">
<Chip v-for="module in requirement.impactedModules" :key="module" :label="module" /> <Chip v-for="stakeholder in requirement.stakeholders" :key="stakeholder" :label="stakeholder" />
</div>
</article>
<article class="info-panel">
<h3>Flexibility</h3>
<p>{{ requirement.flexibility }}</p>
</article>
<article class="info-panel">
<h3>Tolerances</h3>
<p>{{ requirement.tolerances }}</p>
</article>
</div> </div>
<Divider /> <Divider />
<h3>Remarks</h3> <!-- Acceptance criteria and impacted modules -->
<p>{{ requirement.notes }}</p> <div class="detail-columns">
</article> <article class="info-panel">
</div> <h3>Acceptance criteria</h3>
<ul class="checklist">
<li v-for="item in requirement.acceptanceCriteria" :key="item">
<i class="pi pi-check-circle" />
<span>{{ item }}</span>
</li>
</ul>
</article>
<article class="info-panel">
<h3>Impacted modules</h3>
<div class="chip-row">
<Chip v-for="module in requirement.impactedModules" :key="module" :label="module" />
</div>
<Divider />
<h3>Remarks</h3>
<p>{{ requirement.notes }}</p>
</article>
</div>
</TabPanel>
<TabPanel value="tests" header="Tests to perform">
<div class="tests-placeholder">
<i class="pi pi-inbox" />
<p>No tests defined yet</p>
</div>
</TabPanel>
</TabView>
</template> </template>
</Card> </Card>
</section> </section>
@@ -316,6 +329,25 @@ const prioritySeverity = (priority: Requirement['priority']) => {
margin-top: 0.75rem; margin-top: 0.75rem;
} }
.tests-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 2rem 1rem;
color: #9ca3af;
}
.tests-placeholder i {
font-size: 2.5rem;
}
:deep(.p-tabview-panels) {
padding-left: 0;
padding-right: 0;
}
@media (max-width: 1120px) { @media (max-width: 1120px) {
.detail-grid, .detail-grid,
.detail-columns { .detail-columns {