1fd30cf7-7093-4f63-ad48-0fe6dff7c3c2

Committed 28 Apr 2026 02:29PM UTC coverage: 7.419% (-0.05%) from 7.465%

Build # 1fd30cf7-7093-4f63-ad48-0fe6dff7c3c2

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #485 from inclusion-numerique/dev

MEP 206-01-28

Coverage Stats

500 of 10653 branches covered (4.69%)

Branch coverage included in aggregate %.

0 of 149 new or added lines in 19 files covered. (0.0%)

5 existing lines in 5 files now uncovered.

1500 of 16306 relevant lines covered (9.2%)

36.8 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/apps/web/src/components/EditCardTanStack.tsx

'use client'

import { handleSubmit } from '@app/web/libs/form/handle-submit'
import Button from '@codegouvfr/react-dsfr/Button'
import ButtonsGroup from '@codegouvfr/react-dsfr/ButtonsGroup'
import type { AnyFormApi } from '@tanstack/react-form'
import { useRouter } from 'next/navigation'
import type { ReactNode } from 'react'
import { useState } from 'react'
import Card from './Card'

const EditCardTanStack = ({
  id,
  className,
  noBorder,
  contentSeparator = true,
  title,
  titleAs: CardTitle = 'h3',
  description,
  edition,
  view,
  emptyState,
  canEdit = true,
  isEmpty = false,
  form,
  isPending,
  noRefresh,
}: {
  id?: string
  className?: string
  noBorder?: boolean
  contentSeparator?: boolean
  title: ReactNode
  titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  description?: string
  edition: ReactNode
  view: ReactNode
  canEdit?: boolean
  isEmpty?: boolean
  emptyState?: ReactNode
  form: AnyFormApi
  isPending: boolean
  noRefresh?: boolean
}) => {
  const router = useRouter()
  const [editMode, setEditMode] = useState(false)

  return (
    <Card
      noBorder={noBorder}
      contentSeparator={contentSeparator}
      id={id}
      className={className}
      title={<CardTitle className="fr-h6 fr-mb-0">{title}</CardTitle>}
      action={
        !editMode &&
        canEdit && (
          <Button
            data-testid="edit-card-button"
            size="small"
            priority="tertiary no outline"
            iconId="fr-icon-edit-line"
            iconPosition="right"
            title={isEmpty ? 'Compléter' : 'Modifier'}
            onClick={() => setEditMode(true)}
          >
            {isEmpty ? 'Compléter' : 'Modifier'}
          </Button>
        )
      }
      description={description}
      titleAs="div"
    >
      {editMode && (
        <form
          onSubmit={async (e) => {
            await handleSubmit(form)(e)
            if (form.state.isValid) {
              setEditMode(false)
              if (!noRefresh) {
                router.refresh()
              }
            }
          }}
        >
          {edition}
          <ButtonsGroup
            inlineLayoutWhen="always"
            alignment="right"
            buttons={[
              {
                children: 'Annuler',
                priority: 'secondary',
                onClick: () => {
                  form.reset()
                  setEditMode(false)
                },
                disabled: isPending,
              },
              {
                children: 'Enregistrer',
                type: 'submit',
                disabled: isPending,
                nativeButtonProps: {
                  'data-testid': 'edit-card-save-button',
                },
              },
            ]}
          />
        </form>
      )}
      {!editMode && (isEmpty ? emptyState : view)}
    </Card>
  )
}

export default EditCardTanStack

1	'use client'
2
3	import { handleSubmit } from '@app/web/libs/form/handle-submit'
4	import Button from '@codegouvfr/react-dsfr/Button'
5	import ButtonsGroup from '@codegouvfr/react-dsfr/ButtonsGroup'
6	import type { AnyFormApi } from '@tanstack/react-form'
7	import { useRouter } from 'next/navigation'
8	import type { ReactNode } from 'react'
9	import { useState } from 'react'
10	import Card from './Card'
11
NEW 12	const EditCardTanStack = ({	×
13	id,
14	className,
15	noBorder,
16	contentSeparator = true,	×
17	title,
18	titleAs: CardTitle = 'h3',	×
19	description,
20	edition,
21	view,
22	emptyState,
23	canEdit = true,	×
24	isEmpty = false,	×
25	form,
26	isPending,
27	noRefresh,
28	}: {
29	id?: string
30	className?: string
31	noBorder?: boolean
32	contentSeparator?: boolean
33	title: ReactNode
34	titleAs?: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'
35	description?: string
36	edition: ReactNode
37	view: ReactNode
38	canEdit?: boolean
39	isEmpty?: boolean
40	emptyState?: ReactNode
41	form: AnyFormApi
42	isPending: boolean
43	noRefresh?: boolean
44	}) => {
NEW 45	const router = useRouter()	×
NEW 46	const [editMode, setEditMode] = useState(false)	×
47
NEW 48	return (	×
49	<Card
50	noBorder={noBorder}
51	contentSeparator={contentSeparator}
52	id={id}
53	className={className}
54	title={<CardTitle className="fr-h6 fr-mb-0">{title}</CardTitle>}
55	action={
56	!editMode &&	×
57	canEdit && (
58	<Button
59	data-testid="edit-card-button"
60	size="small"
61	priority="tertiary no outline"
62	iconId="fr-icon-edit-line"
63	iconPosition="right"
64	title={isEmpty ? 'Compléter' : 'Modifier'}	×
NEW 65	onClick={() => setEditMode(true)}	×
66	>
67	{isEmpty ? 'Compléter' : 'Modifier'}	×
68	</Button>
69	)
70	}
71	description={description}
72	titleAs="div"
73	>
74	{editMode && (	×
75	<form
76	onSubmit={async (e) => {
NEW 77	await handleSubmit(form)(e)	×
NEW 78	if (form.state.isValid) {	×
NEW 79	setEditMode(false)	×
NEW 80	if (!noRefresh) {	×
NEW 81	router.refresh()	×
82	}
83	}
84	}}
85	>
86	{edition}
87	<ButtonsGroup
88	inlineLayoutWhen="always"
89	alignment="right"
90	buttons={[
91	{
92	children: 'Annuler',
93	priority: 'secondary',
94	onClick: () => {
NEW 95	form.reset()	×
NEW 96	setEditMode(false)	×
97	},
98	disabled: isPending,
99	},
100	{
101	children: 'Enregistrer',
102	type: 'submit',
103	disabled: isPending,
104	nativeButtonProps: {
105	'data-testid': 'edit-card-save-button',
106	},
107	},
108	]}
109	/>
110	</form>
111	)}
112	{!editMode && (isEmpty ? emptyState : view)}	×
113	</Card>
114	)
115	}
116
117	export default EditCardTanStack

inclusion-numerique / coop-mediation-numerique / 1fd30cf7-7093-4f63-ad48-0fe6dff7c3c2

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous