Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

context menu on ebios rm valid step/unvalid step #1211

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

context menu on ebios rm valid step/unvalid step #1211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f99e3e8
context menu on ebios rm valid step/unvalid step
melinoix Dec 19, 2024
94d9636
changed fr.json
melinoix Dec 21, 2024
342ce25
Merge branch 'main' into add-context-menu-modeltable
melinoix Jan 22, 2025
124b7bd
merged and adapted new tile.svelte
melinoix Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/messages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -996,6 +996,8 @@
"noReviewer": "No reviewer assigned",
"selectAudit": "Select audit",
"errorAssetGraphMustNotContainCycles": "The asset graph must not contain cycles.",
"markAsValid": "Mark as valid",
"markAsNotValid": "Mark as not valid",
"addStakeholder": "Add stakeholder",
"operationalScenario": "Operational scenario",
"operationalScenarioRefId": "Operational scenario {refId}",
Expand Down
2 changes: 2 additions & 0 deletions frontend/messages/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -987,6 +987,8 @@
"notSelected": "Non retenu",
"resetPasswordHere": "Vous pouvez réinitialiser votre mot de passe ici.",
"resetPassword": "Réinitialiser le mot de passe",
"markAsValid": "marquée terminée",
"markAsNotValid": "marquer en cours",
"ebiosRm": "Ebios RM",
"workshopOne": "Atelier 1",
"refIdSemiColon": "ID :",
Expand Down
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
"@typescript-eslint/parser": "^8.18.0",
"@unovis/svelte": "1.4.3-beta.0",
"@unovis/ts": "1.4.3-beta.0",
"bits-ui": "^0.22.0",
"cmdk-sv": "^0.0.18",
"dotenv": "^16.4.7",
"driver.js": "^1.3.1",
Expand Down
15 changes: 15 additions & 0 deletions frontend/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

215 changes: 132 additions & 83 deletions frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/Tile.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { enhance } from '$app/forms';
import { page } from '$app/stores';
import { safeTranslate } from '$lib/utils/i18n';
import { ContextMenu } from 'bits-ui';
import Anchor from '$lib/components/Anchor/Anchor.svelte';
import * as m from '$paraglide/messages';
import { invalidateAll } from '$app/navigation';
Expand All @@ -13,6 +14,8 @@
export let accent_color = '';
export let borderColor = '';
export let createRiskAnalysis = false;

let openMenuIndex: number | null = null;
export let workshop: number = 0;

let workshopStatus = 'to_do';
Expand Down Expand Up @@ -56,95 +59,141 @@
<div>
<ol class="relative text-gray-500 border-s border-gray-200">
{#each meta as step, i}
<li class="flex flex-row justify-between mb-10 ms-6">
{#if createRiskAnalysis && i == 0}
<slot name="addRiskAnalysis"></slot>
{:else if !step.disabled}
<Anchor
href={step.href}
prefixCrumbs={[{ label: safeTranslate(`ebiosWs${workshop}`) }]}
label={safeTranslate(`ebiosWs${workshop}_${i + 1}`)}
class="hover:text-purple-800"
>
{#if step.status == 'done'}
<span
class="absolute flex items-center justify-center w-8 h-8 bg-success-200 rounded-full -start-4 ring-4 ring-white"
<ContextMenu.Root
open={openMenuIndex === i}
onOpenChange={(isOpen) => (openMenuIndex = isOpen ? i : null)}
>
<ContextMenu.Trigger>
<li class="flex flex-row justify-between mb-10 ms-6">
{#if createRiskAnalysis && i == 0}
<slot name="addRiskAnalysis"></slot>
{:else if !step.disabled}
<Anchor
href={step.href}
prefixCrumbs={[{ label: safeTranslate(`ebiosWs${workshop}`) }]}
label={safeTranslate(`ebiosWs${workshop}_${i + 1}`)}
class="hover:text-purple-800"
>
<i class="fa-solid fa-check" />
</span>
{#if step.status == 'done'}
<span
class="absolute flex items-center justify-center w-8 h-8 bg-success-200 rounded-full -start-4 ring-4 ring-white"
>
<i class="fa-solid fa-check" />
</span>
{:else}
<span
class="absolute flex items-center justify-center w-8 h-8 bg-surface-200 rounded-full -start-4 ring-4 ring-white"
>
<i class="fa-solid fa-clipboard-check" />
</span>
{/if}
<h3 class="font-medium leading-tight">{m.activity()} {i + 1}</h3>
<p class="text-sm">{step.title}</p>
</Anchor>
{:else}
<span
class="absolute flex items-center justify-center w-8 h-8 bg-surface-200 rounded-full -start-4 ring-4 ring-white"
<div
class="text-gray-300 [&>*]:pointer-events-none"
use:popup={popupHover[i]}
>
<i class="fa-solid fa-clipboard-check" />
</span>
<div
class="transition card bg-white shadow-lg p-4 z-20 duration-300"
data-popup={'popup' + workshop + i}
>
<p
data-testid="activity-tooltip"
class="border-l-4 {borderColor} text-gray-500 p-2"
>
{step.tooltip}
</p>
<div class="arrow bg-white" />
</div>
<span
class="absolute flex items-center justify-center w-8 h-8 bg-surface-200 rounded-full -start-4 ring-4 ring-white"
>
<i class="fa-solid fa-clipboard-check" />
</span>
<h3 class="font-medium leading-tight">{m.activity()} {i + 1}</h3>
<p class="text-sm">{step.title}</p>
</div>
{/if}
<h3 class="font-medium leading-tight">{m.activity()} {i + 1}</h3>
<p class="text-sm">{step.title}</p>
</Anchor>
{:else}
<div class="text-gray-300 [&>*]:pointer-events-none" use:popup={popupHover[i]}>
<div
class="transition card bg-white shadow-lg p-4 z-20 duration-300"
data-popup={'popup' + workshop + i}
>
<p
data-testid="activity-tooltip"
class="border-l-4 {borderColor} text-gray-500 p-2"
{#if !step.disabled}
<button
class="btn bg-initial"
data-testid="sidebar-more-btn"
use:popup={{
event: 'click',
target: `popupStep-${workshop}.${i + 1}`,
placement: 'top'
}}><i class="fa-solid fa-ellipsis-vertical" /></button
>
{step.tooltip}
</p>
<div class="arrow bg-white" />
</div>
<span
class="absolute flex items-center justify-center w-8 h-8 bg-surface-200 rounded-full -start-4 ring-4 ring-white"
>
<i class="fa-solid fa-clipboard-check" />
</span>
<h3 class="font-medium leading-tight">{m.activity()} {i + 1}</h3>
<p class="text-sm">{step.title}</p>
</div>
{/if}
{#if !step.disabled}
<button
class="btn bg-initial"
data-testid="sidebar-more-btn"
use:popup={{
event: 'click',
target: `popupStep-${workshop}.${i + 1}`,
placement: 'top'
}}><i class="fa-solid fa-ellipsis-vertical" /></button
>
<div
class="card whitespace-nowrap bg-white py-2 w-fit shadow-lg space-y-1"
data-testid="sidebar-more-panel"
data-popup="popupStep-{workshop}.{i + 1}"
>
<form
action="/ebios-rm/{$page.params.id}?/changeStepState"
method="POST"
use:enhance={() => {
return async () => {
if (step.status !== 'done') step.status = 'done';
else step.status = 'in_progress';
};
}}
>
<input type="hidden" name="workshop" value={workshop} />
<input type="hidden" name="step" value={i + 1} />
{#if step.status === 'done'}
<input type="hidden" name="status" value="in_progress" />
<button type="submit" class="btn bg-initial"
>{m.markAsInProgress()}</button
<div
class="card whitespace-nowrap bg-white py-2 w-fit shadow-lg space-y-1"
data-testid="sidebar-more-panel"
data-popup="popupStep-{workshop}.{i + 1}"
>
<form
action="/ebios-rm/{$page.params.id}?/changeStepState"
method="POST"
use:enhance={() => {
return async () => {
if (step.status !== 'done') step.status = 'done';
else step.status = 'in_progress';
};
}}
>
{:else}
<input type="hidden" name="status" value="done" />
<button type="submit" class="btn bg-initial">{m.markAsDone()}</button>
{/if}
</form>
</div>
{/if}
</li>
<input type="hidden" name="workshop" value={workshop} />
<input type="hidden" name="step" value={i + 1} />
{#if step.status === 'done'}
<input type="hidden" name="status" value="in_progress" />
<button type="submit" class="btn bg-initial"
>{m.markAsInProgress()}</button
>
{:else}
<input type="hidden" name="status" value="done" />
<button type="submit" class="btn bg-initial">{m.markAsDone()}</button>
{/if}
</form>
</div>
{/if}
</li>
</ContextMenu.Trigger>
<ContextMenu.Content
class="z-50 w-full max-w-[229px] rounded-xl bg-gray-700 text-white px-2 py-2 shadow-xl outline-none transition-all duration-300"
>
<ContextMenu.Item
class="px-4 py-2 rounded-md text-base font-medium hover:bg-gray-600 transition-all duration-300 cursor-pointer"
on:click={async () => {
const newStatus = step.status === 'done' ? 'in_progress' : 'done';
const formData = new FormData();
formData.append('workshop', workshop.toString());
formData.append('step', (i + 1).toString());
formData.append('status', newStatus);

// Submit the data to the backend
const response = await fetch(
`/ebios-rm/${$page.params.id}?/changeStepState`,
{
method: 'POST',
body: formData
}
);

// Handle success or error
if (response.ok) {
step.status = newStatus; // Update the local state
} else {
console.error('Failed to update step state');
}
}}
>
{#if step.status === 'done'}
{m.markAsInProgress()}
{:else}
{m.markAsDone()}
{/if}
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Root>
{/each}
</ol>
</div>
Expand Down
Loading