Skip to content

Commit

Permalink
refactor: remove unused code and simplify display logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@elisfainstein
elisfainstein committed Jan 20, 2025
1 parent c5d9183 commit 3f28ab9
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 199 deletions.
10 changes: 5 additions & 5 deletions ...erritoiresentransitions.react/src/app/pages/collectivite/Referentiels/ReferentielTabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { avancementToLabel, referentielToName } from '@/app/app/labels';
import { referentielToName } from '@/app/app/labels';
import {
makeCollectiviteReferentielUrl,
ReferentielParamOption,
ReferentielVueParamOption,
} from '@/app/app/paths';
import { actionAvancementColors } from '@/app/app/theme';
import {
useCollectiviteId,
useReferentielId,
Expand All @@ -13,7 +12,6 @@ import {
import { ReferentielOfIndicateur } from '@/app/types/litterals';
import { Card, Tab, Tabs } from '@/ui';
import { useRouter } from 'next/navigation';
import ProgressBarWithTooltip from '../../../../ui/score/ProgressBarWithTooltip';
import AidePriorisation from '../AidePriorisation';
import DetailTacheTable from '../DetailTaches';
import ActionsReferentiels from './Referentiels';
Expand Down Expand Up @@ -88,7 +86,9 @@ const ReferentielTabs = () => {
{/* </div> */}
</div>
<div className="my-5">
<ProgressBarWithTooltip
{/* *** For future use *** */}
{/* <ProgressBarWithTooltip
// Fake data, replace with real data when available
score={[
{
label: avancementToLabel.fait,
Expand All @@ -103,7 +103,7 @@ const ReferentielTabs = () => {
}}
valueToDisplay={avancementToLabel.fait}
progressBarStyleOptions={{ justify: 'start', fullWidth: true }}
/>
/> */}
</div>

<Tabs
Expand Down
101 changes: 45 additions & 56 deletions app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/Referentiels.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,55 +29,53 @@ export const ActionsReferentiels = () => {
return (
<main data-test="ActionsReferentiels" className="fr-container mt-2">
<section>
<>
<div className="relative">
<div className="relative z-[1] flex justify-between max-xl:flex-col xl:items-center gap-4 pb-6 border-b border-primary-3 mb-6">
<div className="flex max-md:flex-col gap-x-8 gap-y-4 md:items-center">
<div className="w-full md:w-64">
<Select
options={[
{ value: 'axe', label: 'Par axe' },
{ value: 'action', label: 'Par action' },
// *** For future use ***
// { value: 'competences', label: 'Par compétences' },
]}
onChange={(value) => setDisplayOption(value ?? 'axe')}
values={[displayOption]}
customItem={(v) => (
<span className="text-grey-8 font-normal">{v.label}</span>
)}
small
/>
</div>

<div className="flex gap-x-6">
<Checkbox
label="Afficher la description des actions"
variant="switch"
labelClassname="font-normal text-sm !text-grey-7"
containerClassname="items-center"
checked={isDescriptionOn}
onChange={(evt) => {
setIsDescriptionOn(!isDescriptionOn);
}}
disabled={isLoading}
/>
</div>
</div>
<div>
<Button
data-test="export-scores"
icon={'download-fill'}
disabled={isLoading}
onClick={() => {
exportScore();
}}
size="sm"
/>
</div>
<div className="relative z-[1] flex justify-between max-xl:flex-col xl:items-center gap-4 pb-6 border-b border-primary-3 mb-6">
<div className="flex max-md:flex-col gap-x-8 gap-y-4 md:items-center">
<div className="w-full md:w-64">
<Select
options={[
{ value: 'axe', label: 'Par axe' },
{ value: 'action', label: 'Par action' },
// *** For future use ***
// { value: 'competences', label: 'Par compétences' },
]}
onChange={(value) => setDisplayOption(value ?? 'axe')}
values={[displayOption]}
customItem={(v) => (
<span className="text-grey-8 font-normal">{v.label}</span>
)}
small
/>
</div>

<Checkbox
label="Afficher la description des actions"
variant="switch"
labelClassname="font-normal text-sm !text-grey-7"
containerClassname="items-center"
checked={isDescriptionOn}
onChange={() => setIsDescriptionOn(!isDescriptionOn)}
disabled={isLoading}
/>
</div>
</>

<Button
data-test="export-scores"
icon={'download-fill'}
disabled={isLoading}
onClick={() => exportScore()}
size="sm"
/>
</div>

{displayOption === 'axe' &&
axes.map((axe) => (
<ExpandableAction
action={axe}
key={axe.id}
isDescriptionOn={isDescriptionOn}
/>
))}

{displayOption === 'action' && (
<div>
Expand All @@ -94,15 +92,6 @@ export const ActionsReferentiels = () => {
</div>
</div>
)}

{displayOption === 'axe' &&
axes.map((axe) => (
<ExpandableAction
action={axe}
key={axe.id}
isDescriptionOn={isDescriptionOn}
/>
))}
</section>
</main>
);
Expand Down
85 changes: 4 additions & 81 deletions app.territoiresentransitions.react/src/ui/referentiels/ActionReferentielDisplayTitle.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,6 @@
import { ActionDefinitionSummary } from '@/app/core-logic/api/endpoints/ActionDefinitionSummaryReadEndpoint';
import classNames from 'classnames';

// export interface PillParams {
// color: string;
// textColor: string;
// filled: boolean;
// height: number;
// }

// export const pillParams: Record<ActionType, PillParams> = {
// referentiel: {
// color: '#000091',
// textColor: '#000091',
// filled: false,
// height: 20,
// },
// axe: {
// color: '#000091',
// textColor: '#000091',
// filled: false,
// height: 20,
// },
// 'sous-axe': {
// color: '#000091',
// textColor: '#000091',
// filled: false,
// height: 20,
// },
// action: { color: '#000091', textColor: 'white', filled: true, height: 20 },
// 'sous-action': {
// color: '#919BAC',
// textColor: 'white',
// filled: true,
// height: 20,
// },
// tache: { color: '#E8EBF3', textColor: 'black', filled: true, height: 20 },
// };
// export const ActionPotentiel = ({
// action,
// }: {
// action: ActionDefinitionSummary;
// }) => {
// const score = useActionScore(action.id);

// if (score === null) return null;

// const potentiel = Number(score.point_potentiel.toFixed(2));
// const text =
// potentiel && !isNaN(potentiel)
// ? `${potentiel.toLocaleString()} points`
// : '0 point';
// return <span className="font-normal whitespace-nowrap">({text})</span>;
// };

// export const ActionReferentielTitlePill = ({
// action,
// }: {
// action: ActionDefinitionSummary;
// }) => {
// const pill = pillParams[action.type];
// return (
// <div
// className="content-center font-normal"
// style={{
// color: pill.textColor,
// borderWidth: 2,
// backgroundColor: pill.filled ? pill.color : 'white',
// borderColor: pill.filled ? 'white' : pill.color,
// borderRadius: pill.height,
// minHeight: pill.height,
// paddingLeft: pill.height * 0.5,
// paddingRight: pill.height * 0.5,
// fontSize: pill.height + 'px',
// }}
// >
// <div className="pb-1">{action.identifiant}</div>
// </div>
// );
// };

export const ActionReferentielDisplayTitle = ({
action,
isOpen,
Expand All @@ -105,17 +27,18 @@ export const ActionReferentielDisplayTitle = ({
</div>
<div>
<span className={action.type === 'sous-axe' ? 'text-grey-6' : ''}>
{action.identifiant}
{action.type === 'axe'
? `${action.identifiant} -`
: action.identifiant}
</span>
&nbsp;
<span
className={`fr-text--lg ${
action.type === 'sous-axe' ? 'text-grey-6' : ''
}`}
>
{action.nom}{' '}
{action.nom}
</span>
{/* <ActionPotentiel action={action} /> */}
</div>
</div>
);
Expand Down
35 changes: 13 additions & 22 deletions app.territoiresentransitions.react/src/ui/referentiels/Card/ReferentielCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,36 +55,27 @@ export const ReferentielCard = ({
// </div>
// }
>
<div className="flex min-w-min">
<span className="text-md font-bold text-primary-9 font-bold">
<div className={`flex min-w-min ${!isDescriptionOn && 'min-h-36'}`}>
<span className="text-lg font-bold text-primary-9 font-bold">
{action.identifiant} {action.nom}
</span>
</div>
{isDescriptionOn && action.description ? (
<>

<div>
{isDescriptionOn && action.description && (
<p
className="htmlContent text-sm text-grey-9 font-light"
className="htmlContent text-sm text-grey-9 font-light mb-6"
dangerouslySetInnerHTML={{
__html: action.description,
}}
/>
<div>
<Counter actionId={action.id} className="mb-3" />
<ActionProgressBar
action={action}
styleOptions={{ justify: 'start', fullWidth: true }}
/>
</div>
</>
) : (
<div>
<Counter actionId={action.id} className="mb-3" />
<ActionProgressBar
action={action}
styleOptions={{ justify: 'start', fullWidth: true }}
/>
</div>
)}
)}
<Counter actionId={action.id} className={'mb-3'} />
<ActionProgressBar
action={action}
progressBarStyleOptions={{ justify: 'start', fullWidth: true }}
/>
</div>
</Card>
</Link>
);
Expand Down
Loading

0 comments on commit 3f28ab9

Please sign in to comment.