diff --git a/package-lock.json b/package-lock.json index 2b475013f463baaed4fa8b99c819086ce9448425..e9de75bc36a3b5988fc98db40167a13ee6198c98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26544,18 +26544,6 @@ "he": "^1.2.0" } }, - "node_modules/vuex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz", - "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==", - "dev": true, - "dependencies": { - "@vue/devtools-api": "^6.0.0-beta.11" - }, - "peerDependencies": { - "vue": "^3.2.0" - } - }, "node_modules/w3c-xmlserializer": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", @@ -27414,8 +27402,7 @@ "vite": "^5.2.10", "vitest": "^1.5.2", "vue": "^3.4.26", - "vue-router": "^4.3.2", - "vuex": "^4.1.0" + "vue-router": "^4.3.2" } }, "stub/types__react": { diff --git a/packages/common/src/typescript-tools.ts b/packages/common/src/typescript-tools.ts index bb8bbbb69b33adb15e7622fcd6055405a4a44cc2..4e715dca87d387d859a88e9a219ce24cd2cb5b87 100644 --- a/packages/common/src/typescript-tools.ts +++ b/packages/common/src/typescript-tools.ts @@ -104,34 +104,6 @@ export type DeepReadonly<T> = T extends Builtin } : Readonly<T> -type Mutable<T> = { - -readonly [P in keyof T]: T[P] -} - -export type DeepMutable<T> = T extends Builtin - ? T - : T extends Map<infer K, infer V> - ? Map<DeepMutable<K>, DeepMutable<V>> - : T extends ReadonlyMap<infer K, infer V> - ? Map<DeepMutable<K>, DeepMutable<V>> - : T extends WeakMap<infer K, infer V> - ? WeakMap<DeepMutable<K>, DeepMutable<V>> - : T extends Set<infer U> - ? Set<DeepMutable<U>> - : T extends ReadonlySet<infer U> - ? Set<DeepMutable<U>> - : T extends WeakSet<infer U> - ? WeakSet<DeepMutable<U>> - : T extends Promise<infer U> - ? Promise<DeepMutable<U>> - : T extends Ref<infer U> - ? Mutable<Ref<DeepMutable<U>>> - : T extends {} - ? { - -readonly [K in keyof T]: DeepMutable<T[K]> - } - : Mutable<T> - export const exhaustiveCheck = (param: never): never => { throw new Error(`Unreachable case: ${JSON.stringify(param)}`) } diff --git a/packages/ui/README.md b/packages/ui/README.md index 53f1e37bbb9b7cda8744d52f5f7d891d38ec8353..b35c8cd92749136299b05998deb68156f7355ebe 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -9,7 +9,6 @@ ## Technologies - [Vue.js](https://v3.vuejs.org/) -- [Vuex](https://vuex.vuejs.org/) - [Leaflet.js](https://leafletjs.com/) - [graphql-react](https://github.com/jaydenseric/graphql-react) - [vite](https://vitejs.dev/) diff --git a/packages/ui/package.json b/packages/ui/package.json index adc0e839fd432c8577e5beeb4101e47f5dbd8fff..f05a848a5506fadae3317f17a550531a3fe13525 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -88,8 +88,7 @@ "vite": "^5.2.10", "vitest": "^1.5.2", "vue": "^3.4.26", - "vue-router": "^4.3.2", - "vuex": "^4.1.0" + "vue-router": "^4.3.2" }, "eslintConfig": { "root": true, diff --git a/packages/ui/src/app.tsx b/packages/ui/src/app.tsx index cfb3f492d07c2a6adadb1c25634e38bdd175dfca..edd96dd183339a9e489a8c0780d5b6041bc682de 100644 --- a/packages/ui/src/app.tsx +++ b/packages/ui/src/app.tsx @@ -3,24 +3,19 @@ import '@gouvfr/dsfr/dist/component/navigation/navigation.module' import '@gouvfr/dsfr/dist/component/tab/tab.module' import { defineComponent, computed, ref, onMounted, inject } from 'vue' -import { Messages } from './components/_ui/messages' import { Header } from './components/page/header' import { Footer } from './components/page/footer' import { MapPattern } from './components/_map/pattern' import { IconSprite } from './components/_ui/iconSprite' -import { useStore } from 'vuex' import { RouterView, useRoute } from 'vue-router' import { isNullOrUndefined } from 'camino-common/src/typescript-tools' import { userKey } from './moi' export const App = defineComponent(() => { - const store = useStore() const route = useRoute() const loaded = ref<boolean>(false) - const messages = computed<{ type: 'error' | 'success'; value: string }[]>(() => store.state.messages) - const currentMenuSection = computed(() => route.meta?.menuSection) const user = inject(userKey) @@ -51,10 +46,6 @@ export const App = defineComponent(() => { </main> <Footer displayNewsletter={displayNewsletter.value} version={version.value} /> - - <div class="messages"> - <Messages messages={messages.value} /> - </div> </div> ) }) diff --git a/packages/ui/src/components/_common/storybook.spec.ts b/packages/ui/src/components/_common/storybook.spec.ts index e8b125a86dbd46c0c08ddeb7dd8716b3b667415f..d3df08b8053de393e9e6ebd15e2992742d5e580c 100644 --- a/packages/ui/src/components/_common/storybook.spec.ts +++ b/packages/ui/src/components/_common/storybook.spec.ts @@ -24,8 +24,6 @@ vi.mock('vue-router', () => ({ })), })) -vi.mock('vuex', () => ({ useStore: vi.fn() })) - const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>> => { try { return composeStories(entry) diff --git a/packages/ui/src/components/_ui/functional-popup.stories.tsx b/packages/ui/src/components/_ui/functional-popup.stories.tsx index 65174a640cfe57432f6952852fec43f6d872ae46..029c234d46a7134556da88e2b0fe9595203b3aee 100644 --- a/packages/ui/src/components/_ui/functional-popup.stories.tsx +++ b/packages/ui/src/components/_ui/functional-popup.stories.tsx @@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions' const meta: Meta = { title: 'Components/UI/Popup', + // @ts-ignore component: FunctionalPopup, } export default meta @@ -21,7 +22,30 @@ export const Main: StoryFn = () => ( action: () => { doStuff() - return Promise.resolve() + return new Promise<void>(resolve => setTimeout(() => resolve(), 5000)) + }, + }} + content={() => ( + <div> + <div class="bg-warning color-bg p-s mb-l"> + <span class="bold"> Attention </span>: cette opération est définitive et ne peut pas être annulée. + </div> + </div> + )} + /> +) + +export const SaveError: StoryFn = () => ( + <FunctionalPopup + id="mainId" + close={close} + title="Titre de la popup" + canValidate={true} + validate={{ + action: () => { + doStuff() + + return Promise.reject(new Error('erreur')) }, }} content={() => ( diff --git a/packages/ui/src/components/_ui/functional-popup.stories_snapshots_Main.html b/packages/ui/src/components/_ui/functional-popup.stories_snapshots_Main.html index 5aeaf85d00d5859d049d6945203d7867fbc37520..b23e68309277273c7caf1eef59b91caead0a25f0 100644 --- a/packages/ui/src/components/_ui/functional-popup.stories_snapshots_Main.html +++ b/packages/ui/src/components/_ui/functional-popup.stories_snapshots_Main.html @@ -12,13 +12,17 @@ <div> <div class="bg-warning color-bg p-s mb-l"><span class="bold"> Attention </span>: cette opération est définitive et ne peut pas être annulée.</div> </div> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="mainId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="mainId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/_ui/functional-popup.stories_snapshots_NotValid.html b/packages/ui/src/components/_ui/functional-popup.stories_snapshots_NotValid.html index 46b58a463912966ae51812af9b978c33455c26b5..82768c916ef5cd8bda11eb63117fee125fff9cb0 100644 --- a/packages/ui/src/components/_ui/functional-popup.stories_snapshots_NotValid.html +++ b/packages/ui/src/components/_ui/functional-popup.stories_snapshots_NotValid.html @@ -12,13 +12,17 @@ <div> <div class="bg-warning color-bg p-s mb-l"><span class="bold"> Attention </span>: cette opération est définitive et ne peut pas être annulée.</div> </div> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="mainId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="mainId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/_ui/functional-popup.stories_snapshots_SaveError.html b/packages/ui/src/components/_ui/functional-popup.stories_snapshots_SaveError.html new file mode 100644 index 0000000000000000000000000000000000000000..b23e68309277273c7caf1eef59b91caead0a25f0 --- /dev/null +++ b/packages/ui/src/components/_ui/functional-popup.stories_snapshots_SaveError.html @@ -0,0 +1,33 @@ +<!--teleport start--> +<div class="dsfr"> + <dialog id="mainId" class="fr-modal fr-modal--opened" open="" aria-modal="true" role="dialog" aria-labelledby="mainId-title" style="z-index: 1000001;"> + <div class="fr-container fr-container--fluid fr-container-md"> + <div class="fr-grid-row fr-grid-row--center"> + <div class="fr-col-12 fr-col-md-8 fr-col-lg-6"> + <div class="fr-modal__body"> + <div class="fr-modal__header"><button class="fr-btn--close fr-btn" aria-controls="mainId" title="Fermer">Fermer</button></div> + <div class="fr-modal__content"> + <h1 id="mainId-title" class="fr-modal__title"><span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>Titre de la popup</h1> + <div class="fr-container"> + <div> + <div class="bg-warning color-bg p-s mb-l"><span class="bold"> Attention </span>: cette opération est définitive et ne peut pas être annulée.</div> + </div> + <!----> + </div> + </div> + <div class="fr-modal__footer"> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="mainId">Annuler</button></li> + </ul> + </div> + </div> + </div> + </div> + </div> + </div> + </dialog> +</div> +<!--teleport end--> \ No newline at end of file diff --git a/packages/ui/src/components/_ui/functional-popup.tsx b/packages/ui/src/components/_ui/functional-popup.tsx index 38c1db59611b52010448f2a4d8965d093a431362..632e4e47227382aec924548dbb8d4edb7b93e654 100644 --- a/packages/ui/src/components/_ui/functional-popup.tsx +++ b/packages/ui/src/components/_ui/functional-popup.tsx @@ -1,8 +1,9 @@ import { AsyncData } from '@/api/client-rest' -import { caminoDefineComponent } from '@/utils/vue-tsx-utils' -import { Teleport, computed, onBeforeUnmount, onMounted, ref } from 'vue' +import { Teleport, computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue' import { LoadingElement } from './functional-loader' import type { JSX } from 'vue/jsx-runtime' +import { Alert } from './alert' + interface Props { id?: string title: string @@ -15,7 +16,7 @@ interface Props { canValidate: boolean } -export const FunctionalPopup = caminoDefineComponent<Props>(['id', 'title', 'content', 'close', 'validate', 'canValidate'], (props: Props) => { +export const FunctionalPopup = defineComponent<Props>((props: Props) => { const canValidate = computed<boolean>(() => { return props.canValidate }) @@ -87,35 +88,42 @@ export const FunctionalPopup = caminoDefineComponent<Props>(['id', 'title', 'con <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span> {props.title} </h1> - <div class="fr-container">{props.content()}</div> + <div class="fr-container"> + {props.content()} + {validateProcess.value.status === 'ERROR' ? <Alert small={true} type="error" title={validateProcess.value.message} /> : null} + </div> </div> - <LoadingElement - data={validateProcess.value} - renderItem={() => ( - <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li> - <button - class={['fr-btn', 'fr-icon-check-line', 'fr-btn--icon-left', !canValidate.value ? 'disabled' : '']} - disabled={!canValidate.value} - onClick={e => { - e.stopPropagation() - return validate() - }} - > - {text} - </button> - </li> - <li> - <button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls={id} onClick={props.close}> - Annuler - </button> - </li> - </ul> - </div> - )} - /> + <div class="fr-modal__footer"> + <div style={{ display: 'flex', width: '100%', justifyContent: 'end', alignItems: 'center', gap: '1rem' }}> + {validateProcess.value.status !== 'ERROR' ? <LoadingElement data={validateProcess.value} renderItem={() => null} /> : null} + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style={{ width: 'auto' }}> + <li> + <button + class={['fr-btn', 'fr-icon-check-line', 'fr-btn--icon-left', !canValidate.value ? 'disabled' : '']} + disabled={!canValidate.value || validateProcess.value.status === 'LOADING'} + onClick={e => { + e.stopPropagation() + + return validate() + }} + > + {text} + </button> + </li> + <li> + <button + class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" + disabled={validateProcess.value.status === 'LOADING'} + aria-controls={id} + onClick={props.close} + > + Annuler + </button> + </li> + </ul> + </div> + </div> </div> </div> </div> @@ -125,3 +133,6 @@ export const FunctionalPopup = caminoDefineComponent<Props>(['id', 'title', 'con </Teleport> ) }) + +// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833 +FunctionalPopup.props = ['id', 'title', 'content', 'close', 'validate', 'canValidate'] diff --git a/packages/ui/src/components/_ui/messages.tsx b/packages/ui/src/components/_ui/messages.tsx index d834d6f8bfd9bea9ff56afce22890cf0abc75e90..7d77fde977be6b7460fb6937583ce6750e835e20 100644 --- a/packages/ui/src/components/_ui/messages.tsx +++ b/packages/ui/src/components/_ui/messages.tsx @@ -1,10 +1,9 @@ -import { caminoDefineComponent } from '@/utils/vue-tsx-utils' -import { TransitionGroup } from 'vue' +import { TransitionGroup, defineComponent } from 'vue' interface Props { messages: { type: 'error' | 'success'; value: string | Error }[] } -export const Messages = caminoDefineComponent<Props>(['messages'], props => { +export const Messages = defineComponent<Props>(props => { return () => ( <TransitionGroup name="slide-bottom" tag="div"> {props.messages.map((message, index) => ( @@ -15,3 +14,6 @@ export const Messages = caminoDefineComponent<Props>(['messages'], props => { </TransitionGroup> ) }) + +// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833 +Messages.props = ['messages'] diff --git a/packages/ui/src/components/_ui/storybook.spec.ts b/packages/ui/src/components/_ui/storybook.spec.ts index 9ea05b2f6c1ef36d878ad05fb50dfe2a4438dc12..01d7716cdd25af043a27582d2ea4d5a8c4d1e923 100644 --- a/packages/ui/src/components/_ui/storybook.spec.ts +++ b/packages/ui/src/components/_ui/storybook.spec.ts @@ -24,8 +24,6 @@ vi.mock('vue-router', () => ({ })), })) -vi.mock('vuex', () => ({ useStore: vi.fn() })) - const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>> => { try { return composeStories(entry) diff --git a/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentObligatoire.html b/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentObligatoire.html index 54f66f8c70caffd168e70a101177b1e317370afd..01cd58f1f12c8630e8e01dad226593b0d7520d0f 100644 --- a/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentObligatoire.html +++ b/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentObligatoire.html @@ -25,13 +25,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentOptionnel.html b/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentOptionnel.html index ea0be91dfec50ad120b303a13060e57c0202ba19..d901fcf9e30b9e610896500696b5191e05803d76 100644 --- a/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentOptionnel.html +++ b/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentOptionnel.html @@ -25,13 +25,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/activite/depose-popup.stories_snapshots_Default.html b/packages/ui/src/components/activite/depose-popup.stories_snapshots_Default.html index e70f5656afce84114626256e71f519c8c4fdeb3f..48de9eefcd24961869ce6c8dc7042e901617f39c 100644 --- a/packages/ui/src/components/activite/depose-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/activite/depose-popup.stories_snapshots_Default.html @@ -12,13 +12,17 @@ <div class="fr-alert fr-alert--warning"> <h3 class="fr-alert__title">Attention : cette opération est définitive et ne peut pas être annulée.</h3> Souhaitez-vous déposer ce <span class="fr-text--bold"> rapport d'exploitation (permis et concessions M)</span> du titre<span class="fr-text--bold"> Titre 1</span> ? </div> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Déposer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Déposer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/demarche/depose-etape-popup.stories_snapshots_Default.html b/packages/ui/src/components/demarche/depose-etape-popup.stories_snapshots_Default.html index 425b2d2806d9017645b29f4a0489769379909ea7..8202add2b84de7c7490d7589412a93462ecc0ca3 100644 --- a/packages/ui/src/components/demarche/depose-etape-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/demarche/depose-etape-popup.stories_snapshots_Default.html @@ -12,13 +12,17 @@ <div class="fr-alert fr-alert--warning"> <h3 class="fr-alert__title">Attention : cette opération est définitive et ne peut pas être annulée.</h3>Souhaitez vous effectuer le dépôt ? </div> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Déposer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Déposer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/demarche/remove-etape-popup.stories_snapshots_Default.html b/packages/ui/src/components/demarche/remove-etape-popup.stories_snapshots_Default.html index 415a0f3822c2cc6adc8dc8f23397decd993eb45b..5be4af7c969076a51bc6112fde9fc86db9024c5b 100644 --- a/packages/ui/src/components/demarche/remove-etape-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/demarche/remove-etape-popup.stories_snapshots_Default.html @@ -12,13 +12,17 @@ <div class="fr-alert fr-alert--warning"> <h3 class="fr-alert__title">Attention : cette opération est définitive et ne peut pas être annulée.</h3>Souhaitez vous supprimer l'étape <span class="fr-text--bold">demande</span> de la démarche <span class="fr-text--bold">octroi</span> du titre <span class="fr-text--bold">Nouvelle espérance (autorisation de recherches)</span> ? </div> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/entreprise.tsx b/packages/ui/src/components/entreprise.tsx index 5f291b646b141d8cd415aa56252e0059fc18c537..d4944300b88f15ae174e7fe69996e56315532a98 100644 --- a/packages/ui/src/components/entreprise.tsx +++ b/packages/ui/src/components/entreprise.tsx @@ -9,7 +9,6 @@ import { utilisateursColonnes, utilisateursLignesBuild } from './utilisateurs/ta import { fiscaliteVisible as fiscaliteVisibleFunc } from 'camino-common/src/fiscalite' import { User } from 'camino-common/src/roles' import { computed, onMounted, watch, defineComponent, ref, inject } from 'vue' -import { useStore } from 'vuex' import { useRoute } from 'vue-router' import { canEditEntreprise, canSeeEntrepriseDocuments } from 'camino-common/src/permissions/entreprises' import { caminoDefineComponent } from '@/utils/vue-tsx-utils' @@ -25,7 +24,6 @@ import { userKey } from '@/moi' export const Entreprise = defineComponent({ setup() { - const store = useStore() const vueRoute = useRoute() const entrepriseId = ref<EntrepriseId | undefined>(newEntrepriseId(vueRoute.params.id.toString())) const user = inject(userKey) @@ -43,42 +41,10 @@ export const Entreprise = defineComponent({ ) const anneeCourante = getCurrentAnnee() - const apiClientRef = ref< - Pick< - ApiClient, - 'getEntreprise' | 'deleteEntrepriseDocument' | 'getEntrepriseDocuments' | 'getFiscaliteEntreprise' | 'modifierEntreprise' | 'creerEntreprise' | 'creerEntrepriseDocument' | 'uploadTempDocument' - > - >({ - ...apiClient, - modifierEntreprise: async entreprise => { - try { - await apiClient.modifierEntreprise(entreprise) - store.dispatch( - 'messageAdd', - { - value: `l'entreprise a été modifiée`, - type: 'success', - }, - { root: true } - ) - } catch (e) { - console.error(e) - store.dispatch( - 'messageAdd', - { - value: `Erreur lors de la modification de l'entreprise`, - type: 'error', - }, - { root: true } - ) - } - }, - }) - return () => ( <> {entrepriseId.value ? ( - <PureEntreprise currentYear={anneeCourante} entrepriseId={entrepriseId.value} apiClient={apiClientRef.value} user={user} /> + <PureEntreprise currentYear={anneeCourante} entrepriseId={entrepriseId.value} apiClient={apiClient} user={user} /> ) : ( <CaminoError couleur="error" message="Impossible d’afficher une entreprise sans identifiant" /> )} diff --git a/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_Default.html b/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_Default.html index 4a811c6bd10aa3bd5104849ce0a25d8f2af8d927..2aa99df59dcea8ca59d7279c8e902f10f50af998 100644 --- a/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_Default.html @@ -52,13 +52,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_TypeDeDocumentVerouille.html b/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_TypeDeDocumentVerouille.html index 455d24c91c28f698979ef29ada6879af0aa798a6..7af2cd039b4ad4e1a4c6a7e6672c359f9c95a28e 100644 --- a/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_TypeDeDocumentVerouille.html +++ b/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_TypeDeDocumentVerouille.html @@ -33,13 +33,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/entreprise/add-popup.stories_snapshots_Super.html b/packages/ui/src/components/entreprise/add-popup.stories_snapshots_Super.html index 5992b4b4229182cd8233ef9559317a0154c34f2c..ad54946d405310121477feda1f66f8487775261b 100644 --- a/packages/ui/src/components/entreprise/add-popup.stories_snapshots_Super.html +++ b/packages/ui/src/components/entreprise/add-popup.stories_snapshots_Super.html @@ -23,13 +23,17 @@ <!----> </div> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Ok.html b/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Ok.html index c4476f13be08df00fb5dc82f9abc5ecabbe2508e..c2ce47cd8aea817fd35641c12f3128288dba19b1 100644 --- a/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Ok.html +++ b/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Ok.html @@ -30,13 +30,17 @@ </div> <!----> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Super.html b/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Super.html index c5c8b9a8ff5134c2649f42c9fd27911f616ff908..667bff31b0e3c31bba1effbe3f5329f093530177 100644 --- a/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Super.html +++ b/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Super.html @@ -32,13 +32,17 @@ <!----> </label></div> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/entreprise/remove-entreprise-document-popup.stories_snapshots_Default.html b/packages/ui/src/components/entreprise/remove-entreprise-document-popup.stories_snapshots_Default.html index fe9347d5b915e37a6396093e7ab811f704729838..dc606f4c17b03307684d0afded5bd6ffd4837870 100644 --- a/packages/ui/src/components/entreprise/remove-entreprise-document-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/entreprise/remove-entreprise-document-popup.stories_snapshots_Default.html @@ -12,13 +12,17 @@ <div class="fr-alert fr-alert--warning"> <h3 class="fr-alert__title">Attention : cette opération est définitive et ne peut pas être annulée.</h3>Souhaitez vous supprimer le document <span class="fr-text--bold">Nom du document</span> ? </div> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/entreprises.tsx b/packages/ui/src/components/entreprises.tsx index 38a7d5389ac329ec8aacb06b29f2148671ccbc1c..5c0156fda8ba22c52fe4ff566857edc7b174e601 100644 --- a/packages/ui/src/components/entreprises.tsx +++ b/packages/ui/src/components/entreprises.tsx @@ -3,7 +3,6 @@ import { Liste, Params } from './_common/liste' import { RouteLocationNormalizedLoaded, Router, useRouter } from 'vue-router' import { canCreateEntreprise } from 'camino-common/src/permissions/utilisateurs' import { User } from 'camino-common/src/roles' -import { useStore } from 'vuex' import { EntrepriseAddPopup } from './entreprise/add-popup' import { entrepriseApiClient } from './entreprise/entreprise-api-client' import { Entreprise, Siren } from 'camino-common/src/entreprise' @@ -109,7 +108,6 @@ PureEntreprises.props = ['currentRoute', 'updateUrlQuery', 'apiClient', 'user', export const Entreprises = defineComponent(() => { const router = useRouter() - const store = useStore() const user = inject(userKey) const entreprises = inject(entreprisesKey, ref([])) @@ -117,16 +115,10 @@ export const Entreprises = defineComponent(() => { return { ...apiClient, creerEntreprise: async (siren: Siren) => { - try { - await entrepriseApiClient.creerEntreprise(siren) - const newEntreprises = await getWithJson('/rest/entreprises', {}) - entreprises.value = newEntreprises - - store.dispatch('messageAdd', { value: `l'entreprise a été créée`, type: 'success' }, { root: true }) - router.push({ name: 'entreprise', params: { id: `fr-${siren}` } }) - } catch (e) { - store.dispatch('messageAdd', { value: `erreur lors de la création de l'entreprise`, type: 'error' }, { root: true }) - } + await entrepriseApiClient.creerEntreprise(siren) + const newEntreprises = await getWithJson('/rest/entreprises', {}) + entreprises.value = newEntreprises + router.push({ name: 'entreprise', params: { id: `fr-${siren}` } }) }, } } diff --git a/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html b/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html index fc5b10cf6d2398563ac00b21eb1e467ed8757507..0ed4ec1c0bdd0976a1d0050050278022f5eeef95 100644 --- a/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html +++ b/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html @@ -42,13 +42,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_DocumentInitialTemporaire.html b/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_DocumentInitialTemporaire.html index fc5b10cf6d2398563ac00b21eb1e467ed8757507..0ed4ec1c0bdd0976a1d0050050278022f5eeef95 100644 --- a/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_DocumentInitialTemporaire.html +++ b/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_DocumentInitialTemporaire.html @@ -42,13 +42,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_SansDocumentInitial.html b/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_SansDocumentInitial.html index 4e17e617fd179c071f9099245a3a9005fa49f717..3f6a1f25a5c50504d954e9ccb6c852dab666515c 100644 --- a/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_SansDocumentInitial.html +++ b/packages/ui/src/components/etape/add-etape-asl-document-popup.stories_snapshots_SansDocumentInitial.html @@ -42,13 +42,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html b/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html index 696816d3c71fbda767fd052325af5eb17b5c9c6e..af7a3c959ad52d350de8c645709c9fc99c419523 100644 --- a/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html +++ b/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html @@ -49,13 +49,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_DocumentInitialTemporaire.html b/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_DocumentInitialTemporaire.html index 696816d3c71fbda767fd052325af5eb17b5c9c6e..af7a3c959ad52d350de8c645709c9fc99c419523 100644 --- a/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_DocumentInitialTemporaire.html +++ b/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_DocumentInitialTemporaire.html @@ -49,13 +49,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_SansDocumentInitial.html b/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_SansDocumentInitial.html index 6c2febfa46baaa5cdbdf8e400fb0121d4e907095..4c8fb80d7d1558dc71ba3902b3bb2bc7b15baf99 100644 --- a/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_SansDocumentInitial.html +++ b/packages/ui/src/components/etape/add-etape-dae-document-popup.stories_snapshots_SansDocumentInitial.html @@ -49,13 +49,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Default.html b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Default.html index 02b2c6ccc8ab23e435f16cd2fa80ad2c747cfafa..eebeb7ad0a1dd260067436b9af9d3f56cfb33ae1 100644 --- a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Default.html @@ -56,13 +56,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitial.html b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitial.html index d46abac6853c62166bc077a3a65c8a81686b66af..0cccaba1a09c279da7692863b1e5f02b41a3ba71 100644 --- a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitial.html +++ b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitial.html @@ -47,13 +47,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Entreprise.html b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Entreprise.html index 0b81c6c1e2b048878d762b3a8ca9bca8c133c561..37292a41c397d891bba255ec363cfc43c95dec12 100644 --- a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Entreprise.html +++ b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Entreprise.html @@ -51,13 +51,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_UnSeulDocumentPossible.html b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_UnSeulDocumentPossible.html index 2cc57e938817191b8ee1eb1f6bccaf6e3c58adaa..fd3fb08031c050f43b27b23210d940dc796b614a 100644 --- a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_UnSeulDocumentPossible.html +++ b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_UnSeulDocumentPossible.html @@ -42,13 +42,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_Default.html b/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_Default.html index 313a2c1f0ded577ab6c03b76613ed63b5735f760..f7d31b60f1aebd7f5e2e76f3684a87854836658a 100644 --- a/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_Default.html @@ -42,13 +42,17 @@ </fieldset> <!----> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Importer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Importer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/perimetre-import-popup.stories_snapshots_Default.html b/packages/ui/src/components/etape/perimetre-import-popup.stories_snapshots_Default.html index 41fa16e6ca34931d680cbcecfe3e0333a0bf5fa9..b4ab2433690bc3b2bd4afe5c4f55de6b55487f40 100644 --- a/packages/ui/src/components/etape/perimetre-import-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/etape/perimetre-import-popup.stories_snapshots_Default.html @@ -44,13 +44,17 @@ <!----> <!----> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Importer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Importer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/etape/points-import-popup.stories_snapshots_Default.html b/packages/ui/src/components/etape/points-import-popup.stories_snapshots_Default.html index a472fca7fdf7135c3b404ba31f77d5020d7a617c..e48c1c6b62333f76a429c35c1e611eced671746d 100644 --- a/packages/ui/src/components/etape/points-import-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/etape/points-import-popup.stories_snapshots_Default.html @@ -29,13 +29,17 @@ </div> </fieldset> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Importer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Importer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/meta-activite.tsx b/packages/ui/src/components/meta-activite.tsx deleted file mode 100644 index 054327d1e75a3f258337533e8b44a4bd1cbf5e30..0000000000000000000000000000000000000000 --- a/packages/ui/src/components/meta-activite.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { FunctionalComponent } from 'vue' -import { MetaPageTemplate } from './metas/meta-page-template' -import { DefinitionTree } from './metas/definition-edit' - -const definitionsTree = { - id: 'activites-types', - foreignKey: 'activiteTypeId', -} as const satisfies DefinitionTree -export const MetaActivite: FunctionalComponent = () => <MetaPageTemplate title="Activité" definitionsTree={definitionsTree} /> - -// Demandé par le router car utilisé dans un import asynchrone /shrug -MetaActivite.displayName = 'MetaActivite' diff --git a/packages/ui/src/components/meta-demarche.tsx b/packages/ui/src/components/meta-demarche.tsx deleted file mode 100644 index d51009789aea66fbad2b039b5803e967660b72d4..0000000000000000000000000000000000000000 --- a/packages/ui/src/components/meta-demarche.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { FunctionalComponent } from 'vue' -import { MetaPageTemplate } from './metas/meta-page-template' -import { DefinitionTree } from './metas/definition-edit' - -const definitionsTree = { - id: 'demarches-types', - foreignKey: 'demarcheTypeId', - definitions: [ - { - id: 'titres-types', - foreignKey: 'titreTypeId', - joinTable: 'titres-types--demarches-types', - definitions: [ - { - id: 'etapes-types', - foreignKey: 'etapeTypeId', - joinTable: 'titres-types--demarches-types--etapes-types', - definitions: [ - { - id: 'documents-types', - foreignKey: 'documentTypeId', - joinTable: 'titres-types--demarches-types--etapes-types--documents-types', - definitions: [], - }, - { - id: 'documents-types', - foreignKey: 'documentTypeId', - joinTable: 'titres-types--demarches-types--etapes-types--justificatifs-types', - definitions: [], - }, - ], - }, - ], - }, - ], -} as const satisfies DefinitionTree -export const MetaDemarche: FunctionalComponent = () => <MetaPageTemplate title="Démarche" definitionsTree={definitionsTree} /> - -// Demandé par le router car utilisé dans un import asynchrone /shrug -MetaDemarche.displayName = 'MetaDemarche' diff --git a/packages/ui/src/components/meta-etape.tsx b/packages/ui/src/components/meta-etape.tsx deleted file mode 100644 index 6c973cadc044f9f55e598ae6d3f8d96fe764df7f..0000000000000000000000000000000000000000 --- a/packages/ui/src/components/meta-etape.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { FunctionalComponent } from 'vue' -import { MetaPageTemplate } from './metas/meta-page-template' -import { DefinitionTree } from './metas/definition-edit' - -const definitionsTree = { - id: 'etapes-types', - foreignKey: 'etapeTypeId', - definitions: [ - { - id: 'etapes-statuts', - foreignKey: 'etapeStatutId', - joinTable: 'etapes-types--etapes-statuts', - definitions: [], - }, - { - id: 'documents-types', - foreignKey: 'documentTypeId', - joinTable: 'etapes-types--documents-types', - definitions: [], - }, - { - id: 'documents-types', - foreignKey: 'documentTypeId', - joinTable: 'etapes-types--justificatifs-types', - definitions: [], - }, - { - id: 'titres-types', - foreignKey: 'titreTypeId', - definitions: [ - { - id: 'demarches-types', - foreignKey: 'demarcheTypeId', - joinTable: 'titres-types--demarches-types--etapes-types', - definitions: [ - { - id: 'documents-types', - foreignKey: 'documentTypeId', - joinTable: 'titres-types--demarches-types--etapes-types--documents-types', - definitions: [], - }, - { - id: 'documents-types', - foreignKey: 'documentTypeId', - joinTable: 'titres-types--demarches-types--etapes-types--justificatifs-types', - definitions: [], - }, - ], - }, - ], - }, - ], -} as const satisfies DefinitionTree -export const MetaEtape: FunctionalComponent = () => <MetaPageTemplate title="Étape" definitionsTree={definitionsTree} /> - -// Demandé par le router car utilisé dans un import asynchrone /shrug -MetaEtape.displayName = 'MetaEtape' diff --git a/packages/ui/src/components/meta-titre.tsx b/packages/ui/src/components/meta-titre.tsx deleted file mode 100644 index 112c42a6f01ff3144b3a09b71ad799f071519f69..0000000000000000000000000000000000000000 --- a/packages/ui/src/components/meta-titre.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { FunctionalComponent } from 'vue' -import { MetaPageTemplate } from './metas/meta-page-template' -import { DefinitionTree } from './metas/definition-edit' - -const definitionsTree = { - id: 'titres-types', - foreignKey: 'titreTypeId', - definitions: [ - { - id: 'titres-statuts', - foreignKey: 'titreStatutId', - joinTable: 'titre-types--titres-statuts', - }, - { - id: 'demarches-types', - foreignKey: 'demarcheTypeId', - joinTable: 'titres-types--demarches-types', - definitions: [ - { - id: 'etapes-types', - foreignKey: 'etapeTypeId', - joinTable: 'titres-types--demarches-types--etapes-types', - definitions: [ - { - id: 'documents-types', - foreignKey: 'documentTypeId', - joinTable: 'titres-types--demarches-types--etapes-types--documents-types', - definitions: [], - }, - { - id: 'documents-types', - foreignKey: 'documentTypeId', - joinTable: 'titres-types--demarches-types--etapes-types--justificatifs-types', - definitions: [], - }, - ], - }, - ], - }, - ], -} as const satisfies DefinitionTree -export const MetaTitre: FunctionalComponent = () => <MetaPageTemplate title="Titre" definitionsTree={definitionsTree} /> - -// Demandé par le router car utilisé dans un import asynchrone /shrug -MetaTitre.displayName = 'MetaTitre' diff --git a/packages/ui/src/components/meta.tsx b/packages/ui/src/components/meta.tsx index cbd131a368049faed646878e575d220fa89a03e2..3ed5d31b79f66a0a91f6a39610be8bfd46a90777 100644 --- a/packages/ui/src/components/meta.tsx +++ b/packages/ui/src/components/meta.tsx @@ -1,16 +1,16 @@ -import { computed, defineComponent, inject, onBeforeUnmount, onMounted, watch } from 'vue' -import { MetaIndexTable, metasIndex } from '../store/metas-definitions' +import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue' +import { MetaIndexTable, metasIndex } from '../metas-definitions' import { canReadMetas } from 'camino-common/src/permissions/metas' -import { useStore } from 'vuex' import { useRoute } from 'vue-router' import { capitalize } from 'camino-common/src/strings' import { userKey } from '@/moi' -import { isNotNullNorUndefined } from 'camino-common/src/typescript-tools' +import { isNotNullNorUndefined, isNullOrUndefined } from 'camino-common/src/typescript-tools' export const Meta = defineComponent(() => { - const store = useStore() const route = useRoute() const user = inject(userKey) + const values = ref<{ [key in MetaIndexTable]?: unknown[] }>({}) + const id = computed<MetaIndexTable>(() => { return route.params.id as unknown as MetaIndexTable }) @@ -22,15 +22,35 @@ export const Meta = defineComponent(() => { onMounted(async () => { await get() }) - onBeforeUnmount(() => { - store.commit('meta/reset') - }) + const definition = computed(() => { return metasIndex[id.value] }) + const getDef = async (id: MetaIndexTable) => { + try { + if (isNotNullNorUndefined(metasIndex[id])) { + const definition = metasIndex[id] + if ('get' in definition) { + const elements = await definition.get() + values.value = { ...values.value, [id]: elements } + } + if ('colonnes' in definition) { + for (const colonne of definition.colonnes) { + if ('type' in colonne && colonne.type === 'entities' && isNotNullNorUndefined(colonne.entities) && isNullOrUndefined(values.value[colonne.entities])) { + const entities = await metasIndex[colonne.entities].get() + + values.value = { ...values.value, [colonne.entities]: entities } + } + } + } + } + } catch (e) { + console.error(e) + } + } const elements = computed(() => { - return store.getters['meta/elements'](id.value) + return values.value[id.value] }) const get = async () => { @@ -38,7 +58,7 @@ export const Meta = defineComponent(() => { // TODO 2024-04-16 afficher une jolie alerte dans la page console.error('impossible d’accéder à cette page') } else { - await store.dispatch('meta/get', id.value) + await getDef(id.value) } } @@ -86,7 +106,7 @@ export const Meta = defineComponent(() => { ) : null} </tr> - {elements.value.map((element: any) => ( + {elements.value?.map((element: any) => ( <tr key={elementKeyFind(element)}> {'colonnes' in definition.value ? ( <> diff --git a/packages/ui/src/components/metas.stories_snapshots_Super.html b/packages/ui/src/components/metas.stories_snapshots_Super.html index 9e8ec27ed0fc028c187bc3eb0cdb5c73dd998cf6..6304d008f62a4c94f5ad13646a3372ff13848984 100644 --- a/packages/ui/src/components/metas.stories_snapshots_Super.html +++ b/packages/ui/src/components/metas.stories_snapshots_Super.html @@ -75,18 +75,6 @@ <tr> <td><a class="fr-link" to="{name:meta,params:{id:activites-statuts}}" type="primary"><span class="">Statuts des activités</span></a></td> </tr> - <tr> - <td><a class="fr-link" to="{name:meta-titre}" type="primary"><span class="">Titre</span></a></td> - </tr> - <tr> - <td><a class="fr-link" to="{name:meta-demarche}" type="primary"><span class="">Démarche</span></a></td> - </tr> - <tr> - <td><a class="fr-link" to="{name:meta-etape}" type="primary"><span class="">Étape</span></a></td> - </tr> - <tr> - <td><a class="fr-link" to="{name:meta-activite}" type="primary"><span class="">Activité</span></a></td> - </tr> </tbody> </table> </div> diff --git a/packages/ui/src/components/metas.tsx b/packages/ui/src/components/metas.tsx index 326ea37244c0e3c705b3941fcd06c403f9587d8a..d4acbe0add9127cc05df9c406a0521d83f2468ce 100644 --- a/packages/ui/src/components/metas.tsx +++ b/packages/ui/src/components/metas.tsx @@ -5,7 +5,7 @@ import { canReadMetas } from 'camino-common/src/permissions/metas' import { CaminoAccessError } from './error' import { User } from 'camino-common/src/roles' import { Column, TableRow } from './_ui/table' -import { metasIndex } from '@/store/metas-definitions' +import { metasIndex } from '@/metas-definitions' import { userKey } from '@/moi' const metasColonnes = [ { @@ -21,7 +21,7 @@ const metasLignesBuild = (): Promise<{ values: TableRow[]; total: number }> => { nom: { value: element.nom }, } - const link = 'linkName' in element ? { name: element.linkName } : { name: 'meta', params: { id } } + const link = { name: 'meta', params: { id } } return { id, diff --git a/packages/ui/src/components/metas/definition-edit.tsx b/packages/ui/src/components/metas/definition-edit.tsx deleted file mode 100644 index b67937e96e153c989c2ce929f9c5f57355f12991..0000000000000000000000000000000000000000 --- a/packages/ui/src/components/metas/definition-edit.tsx +++ /dev/null @@ -1,178 +0,0 @@ -/* eslint-disable @typescript-eslint/strict-boolean-expressions */ - -import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue' -import { MetaIndexTable, metasIndex } from '@/store/metas-definitions' -import { useStore } from 'vuex' -import { AsyncData } from '@/api/client-rest' -import { LoadingElement } from '../_ui/functional-loader' - -export type DefinitionTree = { - joinTable?: MetaIndexTable - id: MetaIndexTable - // TOOD 2023-09-19 better type foreignKey - foreignKey?: string - definitions?: readonly DefinitionTree[] -} - -interface Props { - definitionsTree: DefinitionTree - foreignKeys?: Record<string, string> - rootComponent?: boolean -} -export const DefinitionEdit = defineComponent<Props>(props => { - const store = useStore() - - const data = ref<AsyncData<true>>({ status: 'LOADING' }) - onMounted(async () => { - const promises = [] - promises.push(store.dispatch('meta/get', props.definitionsTree.id)) - if (props.definitionsTree.joinTable) { - promises.push(store.dispatch('meta/get', props.definitionsTree.joinTable)) - } - await Promise.all(promises) - data.value = { status: 'LOADED', value: true } - }) - - onUnmounted(async () => { - await elementSelect(null) - }) - - const rootComponent = computed<boolean>(() => { - return props.rootComponent ?? true - }) - - const title = computed(() => { - if ('colonnes' in definition.value) { - const colonnes = [...definition.value.colonnes] - - return colonnes.find(colonne => colonne.id === props.definitionsTree.foreignKey)?.nom - } else { - return definition.value.nom - } - }) - const elementSelected = computed(() => { - return store.getters['meta/elementSelected'](props.definitionsTree.joinTable || props.definitionsTree.id) - }) - const definition = computed(() => { - return metasIndex[props.definitionsTree.joinTable ? props.definitionsTree.joinTable : props.definitionsTree.id] - }) - const elements = computed<{ id: string; nom: string }[]>(() => { - if (!props.definitionsTree.joinTable) { - // si pas de table de jointure on peut directement charger les éléments - return store.getters['meta/elements'](props.definitionsTree.id) ?? [] - } - // via une table de jointure - const elementIdsFiltered = store.getters['meta/elements'](props.definitionsTree.joinTable) - // on garde les lignes en fonction des éléments déjà sélectionnés - .filter((joinRow: any) => Object.keys(props.foreignKeys ?? {}).every(foreignKey => joinRow[foreignKey] === (props.foreignKeys ?? {})[foreignKey])) - .map((joinRow: any) => joinRow[props.definitionsTree.foreignKey as string]) - - return store.getters['meta/elements']?.(props.definitionsTree.id)?.filter(({ id }: any) => elementIdsFiltered.includes(id)) || [] - }) - - const colonnesToEdit = computed(() => { - if ('colonnes' in definition.value) { - const colonnes = [...definition.value.colonnes] - - return colonnes.filter((colonne: any) => colonne.id !== 'id').filter(colonne => !('type' in colonne) || colonne.type !== 'entities') - } - - return [] - }) - - const elementToEdit = computed(() => { - if (!props.definitionsTree.joinTable) { - return elementSelected.value - } - - return store.getters['meta/elements'](props.definitionsTree.joinTable).find((joinRow: any) => - Object.keys(foreignKeysNew.value).every(foreignKey => joinRow[foreignKey] === foreignKeysNew.value[foreignKey]) - ) - }) - - const foreignKeysNew = computed<Record<string, string>>(() => { - if (props.definitionsTree.foreignKey) { - return { - ...props.foreignKeys, - [props.definitionsTree.foreignKey]: elementSelected.value?.id, - } - } - - return { ...props.foreignKeys } - }) - - const selectChange = async (event: any) => { - const elementId = event.target.value - const element = elements.value.find(({ id }: { id: string }) => id === elementId) - await elementSelect(element) - } - const labelGet = (element: { id: string; nom: string } | undefined): string => { - const meta = metasIndex[props.definitionsTree.id] - if ('labelGet' in meta) { - return meta.labelGet(element) - } - - return '' - } - const elementSelect = async (element: any) => { - await store.dispatch('meta/elementSelect', { - id: props.definitionsTree.joinTable || props.definitionsTree.id, - element, - }) - } - - return () => ( - <LoadingElement - data={data.value} - renderItem={_ => ( - <div> - <div class="tablet-blobs"> - <div class="tablet-blob-1-3 tablet-pt-s pb-s"> - <h4>{title.value}</h4> - </div> - <div class="mb tablet-blob-2-3"> - <select value={elementSelected.value?.id} class="p-s" onChange={selectChange}> - {elements.value.map(element => { - return ( - <option key={element.id} value={element.id}> - {labelGet(element) ?? element.nom} - </option> - ) - })} - </select> - </div> - </div> - {elementSelected.value ? ( - <div class="mb-xl"> - {rootComponent.value || props.definitionsTree.joinTable ? ( - <div class="rnd-s border p-m"> - <div class="tablet-blobs"> - {colonnesToEdit.value.map(colonne => ( - <div key={colonne.id} class="tablet-blob-1-2"> - <div class="tablet-blobs mb-s"> - <div class="tablet-blob-1-3 tablet-pt-s pb-s"> - <h5>{colonne.nom}</h5> - </div> - <div class="tablet-blob-2-3">{elementToEdit.value[colonne.id] || ''}</div> - </div> - </div> - ))} - </div> - </div> - ) : null} - - {props.definitionsTree.definitions?.map(definitionChild => ( - <div key={definitionChild.joinTable} class="pl-l"> - <span class="separator" /> - <DefinitionEdit definitionsTree={definitionChild} foreignKeys={foreignKeysNew.value} rootComponent={false} /> - </div> - ))} - </div> - ) : null} - </div> - )} - /> - ) -}) -// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833 -DefinitionEdit.props = ['definitionsTree', 'foreignKeys', 'rootComponent'] diff --git a/packages/ui/src/components/metas/meta-page-template.tsx b/packages/ui/src/components/metas/meta-page-template.tsx deleted file mode 100644 index 4dafb2ee76364425f66730acdb6759d88e62f178..0000000000000000000000000000000000000000 --- a/packages/ui/src/components/metas/meta-page-template.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FunctionalComponent } from 'vue' -import { DefinitionEdit, DefinitionTree } from '@/components/metas/definition-edit' - -interface Props { - title: string - definitionsTree: DefinitionTree -} -export const MetaPageTemplate: FunctionalComponent<Props> = props => { - return ( - <div> - <div class="desktop-blobs"> - <div class="desktop-blob-2-3"> - <router-link to={{ name: 'metas' }}> - <h5>Métas</h5> - </router-link> - <h1> - <span class="cap-first">{props.title}</span> - </h1> - </div> - </div> - - <div class="line-neutral width-full mb-m" /> - - <div class="mb-xxl"> - <DefinitionEdit definitionsTree={props.definitionsTree} /> - </div> - </div> - ) -} diff --git a/packages/ui/src/components/titre.stories.tsx b/packages/ui/src/components/titre.stories.tsx index ee960407f758430e528aaaaaa0eaaf5babb258f5..b8ca9324afa4b1cd707740d8f2478e17bb093077 100644 --- a/packages/ui/src/components/titre.stories.tsx +++ b/packages/ui/src/components/titre.stories.tsx @@ -312,7 +312,7 @@ const apiClient: PropsApiClient = { deleteEtape: etapeId => { deleteEtapeAction(etapeId) - return Promise.resolve() + return Promise.reject(new Error('Nope')) }, deposeEtape: etapeId => { diff --git a/packages/ui/src/components/titre.tsx b/packages/ui/src/components/titre.tsx index 71d84379ab59c9de22d3d66cc1e262602222493d..9a1f17c4517a9f84f3ef2a398410675f0498ad05 100644 --- a/packages/ui/src/components/titre.tsx +++ b/packages/ui/src/components/titre.tsx @@ -3,7 +3,6 @@ import { Router, useRouter } from 'vue-router' import { LoadingElement } from './_ui/functional-loader' import { DemarcheEtapeFondamentale, DemarcheSlug, demarcheSlugValidator } from 'camino-common/src/demarche' import { AsyncData } from '@/api/client-rest' -import { useStore } from 'vuex' import { User, isAdministration, isEntrepriseOrBureauDEtude, isSuper } from 'camino-common/src/roles' import { capitalize } from 'camino-common/src/strings' import { TitresTypes } from 'camino-common/src/static/titresTypes' @@ -39,7 +38,6 @@ import { getGestionnairesByTitreTypeId } from 'camino-common/src/static/administ import { DemarcheEditPopup } from './titre/demarche-edit-popup' import { PhaseWithAlterations, phaseWithAlterations } from './titre/phase' import { SecteursMaritimes } from 'camino-common/src/static/facades' -import { EtapeId } from 'camino-common/src/etape' import { userKey } from '@/moi' const activitesSort: TableSortEvent = { @@ -49,7 +47,6 @@ const activitesSort: TableSortEvent = { export const Titre = defineComponent(() => { const router = useRouter() - const store = useStore() const user = inject(userKey) @@ -70,26 +67,7 @@ export const Titre = defineComponent(() => { return demarcheSlugValidator.optional().parse(Array.isArray(demarcheId) ? demarcheId[0] : demarcheId) ?? null }) - const overriddenApiClient: ApiClient = { - ...apiClient, - deleteEtape: async (titreEtapeId: EtapeId) => { - try { - await apiClient.deleteEtape(titreEtapeId) - } catch (e) { - store.dispatch( - 'messageAdd', - { - value: `Impossible de supprimer cette étape`, - type: 'error', - }, - { root: true } - ) - throw e - } - }, - } - - return () => <PureTitre user={user} titreIdOrSlug={titreIdOrSlug.value} currentDemarcheSlug={currentDemarcheSlug.value} apiClient={overriddenApiClient} router={router} currentDate={getCurrent()} /> + return () => <PureTitre user={user} titreIdOrSlug={titreIdOrSlug.value} currentDemarcheSlug={currentDemarcheSlug.value} apiClient={apiClient} router={router} currentDate={getCurrent()} /> }) interface Props { diff --git a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Create.html b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Create.html index 9ed7ca749a95f9aa61a7d9009869e2551c93e322..4c856d2cb8fb7f5ef56267eb5ba45b5c91ad8b63 100644 --- a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Create.html +++ b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Create.html @@ -23,13 +23,17 @@ <!----> </div> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left disabled" disabled="">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Edit.html b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Edit.html index 7f5b453c7a11e66b30110f9a6308e364df7b84d3..e64957764508465c62af99e5c3bb307d502f2987 100644 --- a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Edit.html +++ b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Edit.html @@ -23,13 +23,17 @@ <!----> </div> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/titre/demarche-remove-popup.stories_snapshots_Main.html b/packages/ui/src/components/titre/demarche-remove-popup.stories_snapshots_Main.html index 3ac0b659deb58275e77915c8427d9bf9d6e43bfc..bfa4d94c6b228ef7191d31df76cf5bbd9dd1aa40 100644 --- a/packages/ui/src/components/titre/demarche-remove-popup.stories_snapshots_Main.html +++ b/packages/ui/src/components/titre/demarche-remove-popup.stories_snapshots_Main.html @@ -12,13 +12,17 @@ <div class="fr-alert fr-alert--warning"> <h3 class="fr-alert__title">Attention : cette opération est définitive et ne peut pas être annulée.</h3>Souhaitez-vous supprimer la démarche <span class="fr-text--bold"> octroi</span> du titre<span class="fr-text--bold"> Nom du titre (autorisation de prospections préalables)</span> ? </div> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/titre/edit-popup.stories_snapshots_DefaultNoReference.html b/packages/ui/src/components/titre/edit-popup.stories_snapshots_DefaultNoReference.html index 5441abbd7ad15c431cdfb837abda712d131f9efb..b58abaf9f7f19a8046532e7a8642e9a05d61145f 100644 --- a/packages/ui/src/components/titre/edit-popup.stories_snapshots_DefaultNoReference.html +++ b/packages/ui/src/components/titre/edit-popup.stories_snapshots_DefaultNoReference.html @@ -17,13 +17,17 @@ </div> <div class="fr-input-group fr-mb-0 fr-mt-3w"><label class="fr-label fr-mb-1w" for="references">Références</label><button class="fr-btn fr-btn--icon-right fr-icon-add-line fr-btn--tertiary fr-btn--md" title="Ajouter une référence" aria-label="Ajouter une référence" type="button">Ajouter une référence</button></div> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/titre/edit-popup.stories_snapshots_OneReference.html b/packages/ui/src/components/titre/edit-popup.stories_snapshots_OneReference.html index 1ed94e4801c2242b568a6670b4a1436604c208d5..edc4f3ba6f3d1cae79f49006f8283104ce442b1a 100644 --- a/packages/ui/src/components/titre/edit-popup.stories_snapshots_OneReference.html +++ b/packages/ui/src/components/titre/edit-popup.stories_snapshots_OneReference.html @@ -41,13 +41,17 @@ </div><button class="fr-btn fr-btn--icon-right fr-icon-add-line fr-btn--tertiary fr-btn--md" title="Ajouter une référence" aria-label="Ajouter une référence" type="button">Ajouter une référence</button> </div> </form> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Enregistrer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/titre/remove-popup.stories_snapshots_Default.html b/packages/ui/src/components/titre/remove-popup.stories_snapshots_Default.html index 2669c42bf0e910443f78676b673f6f53bff24396..6a8da410f394e3c9588d952a10a07b6fe574c67e 100644 --- a/packages/ui/src/components/titre/remove-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/titre/remove-popup.stories_snapshots_Default.html @@ -12,13 +12,17 @@ <div class="fr-alert fr-alert--warning"> <h3 class="fr-alert__title">Attention : cette opération est définitive et ne peut pas être annulée.</h3>Souhaitez-vous supprimer le titre <span class="fr-text--bold">Nom du titre autorisation de recherches</span>) ? </div> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/components/utilisateur.stories.tsx b/packages/ui/src/components/utilisateur.stories.tsx index 4770dba4edb0c4e39c9218042f29b3c4af425462..feaeeef02c56cd3bf2fd89dd46b594938c6cf857 100644 --- a/packages/ui/src/components/utilisateur.stories.tsx +++ b/packages/ui/src/components/utilisateur.stories.tsx @@ -5,10 +5,10 @@ import { testBlankUser } from 'camino-common/src/tests-utils' import { PureUtilisateur, Props } from './utilisateur' import { toUtilisateurId } from 'camino-common/src/roles' -const meta: Meta = { +const meta: Meta<typeof PureUtilisateur> = { title: 'Components/Utilisateur', + // @ts-ignore component: PureUtilisateur, - argTypes: {}, } export default meta diff --git a/packages/ui/src/components/utilisateur.tsx b/packages/ui/src/components/utilisateur.tsx index e086c93542f1af4ad1443bbd377b1afe7551f2fe..f36f2d397f3bce491446478ce13a1cca86c28ac8 100644 --- a/packages/ui/src/components/utilisateur.tsx +++ b/packages/ui/src/components/utilisateur.tsx @@ -3,13 +3,12 @@ import { Card } from './_ui/card' import { User } from 'camino-common/src/roles' import { QGisToken } from './utilisateur/qgis-token' import { AsyncData } from '@/api/client-rest' -import { useStore } from 'vuex' import { useRoute, useRouter } from 'vue-router' import { UtilisateurApiClient, utilisateurApiClient } from './utilisateur/utilisateur-api-client' import { LoadingElement } from './_ui/functional-loader' import { RemovePopup } from './utilisateur/remove-popup' import { canDeleteUtilisateur } from 'camino-common/src/permissions/utilisateurs' -import { caminoDefineComponent, isEventWithTarget } from '../utils/vue-tsx-utils' +import { isEventWithTarget } from '../utils/vue-tsx-utils' import { PermissionDisplay } from './utilisateur/permission-edit' import { UtilisateurToEdit } from 'camino-common/src/utilisateur' import { Utilisateur as ApiUser, Entreprise } from 'camino-common/src/entreprise' @@ -20,7 +19,6 @@ import { entreprisesKey, userKey } from '@/moi' export const Utilisateur = defineComponent({ setup() { - const store = useStore() const route = useRoute() const router = useRouter() @@ -34,39 +32,11 @@ export const Utilisateur = defineComponent({ window.location.replace(`/apiUrl/rest/utilisateurs/${userId}/delete`) } else { await utilisateurApiClient.removeUtilisateur(userId) - store.dispatch( - 'messageAdd', - { - value: `l'utilisateur a été supprimé`, - type: 'success', - }, - { root: true } - ) router.push({ name: 'utilisateurs' }) } } const updateUtilisateur = async (utilisateur: UtilisateurToEdit) => { - try { - await utilisateurApiClient.updateUtilisateur(utilisateur) - - store.dispatch( - 'messageAdd', - { - value: `le rôle a bien été modifié`, - type: 'success', - }, - { root: true } - ) - } catch (e) { - store.dispatch( - 'messageAdd', - { - value: `Erreur lors de la modification du rôle de l'utilisateur`, - type: 'error', - }, - { root: true } - ) - } + await utilisateurApiClient.updateUtilisateur(utilisateur) } const passwordUpdate = () => { window.location.replace('/apiUrl/changerMotDePasse') @@ -98,7 +68,7 @@ export interface Props { passwordUpdate: () => void } -export const PureUtilisateur = caminoDefineComponent<Props>(['user', 'utilisateurId', 'apiClient', 'passwordUpdate', 'entreprises'], props => { +export const PureUtilisateur = defineComponent<Props>(props => { watch( () => props.utilisateurId, _newId => { @@ -290,3 +260,6 @@ export const PureUtilisateur = caminoDefineComponent<Props>(['user', 'utilisateu </div> ) }) + +// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833 +PureUtilisateur.props = ['user', 'utilisateurId', 'apiClient', 'passwordUpdate', 'entreprises'] diff --git a/packages/ui/src/components/utilisateur/remove-popup.stories_snapshots_Default.html b/packages/ui/src/components/utilisateur/remove-popup.stories_snapshots_Default.html index 0f67bbd38fe149ff95385872e029afceeb42c15b..96394c26638bb24582e754b9c490a67685d61b3d 100644 --- a/packages/ui/src/components/utilisateur/remove-popup.stories_snapshots_Default.html +++ b/packages/ui/src/components/utilisateur/remove-popup.stories_snapshots_Default.html @@ -12,13 +12,17 @@ <div class="fr-alert fr-alert--warning"> <h3 class="fr-alert__title">Attention : cette opération est définitive et ne peut pas être annulée.</h3>Souhaitez vous supprimer le compte de <span class="fr-text--bold">Prénom Nom</span> ? </div> + <!----> </div> </div> <div class="fr-modal__footer"> - <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> - <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> - <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> - </ul> + <div style="display: flex; width: 100%; justify-content: end; align-items: center; gap: 1rem;"> + <!----> + <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left" style="width: auto;"> + <li><button class="fr-btn fr-icon-check-line fr-btn--icon-left">Supprimer</button></li> + <li><button class="fr-btn fr-icon-arrow-go-back-fill fr-btn--icon-left fr-btn--secondary" aria-controls="monId">Annuler</button></li> + </ul> + </div> </div> </div> </div> diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 502814c6cc9683484b8f2faad9279e5fceafbac6..52344d80de8c5692eb42ff81de1f3591c21df81e 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -6,7 +6,6 @@ import { BrowserTracing } from '@sentry/browser' import { App } from './app' import router from './router' -import store from './store' import { CaminoConfig } from 'camino-common/src/static/config' import { getWithJson } from './api/client-rest' import { initMatomo } from './stats/matomo' @@ -97,6 +96,5 @@ Promise.resolve().then(async (): Promise<void> => { } } app.use(router) - app.use(store) app.mount('app-root') }) diff --git a/packages/ui/src/store/metas-definitions.ts b/packages/ui/src/metas-definitions.ts similarity index 97% rename from packages/ui/src/store/metas-definitions.ts rename to packages/ui/src/metas-definitions.ts index 95530e7cf30c0678c688c78c262e0b22c427c3b8..84bf0016a152a986c70c1a79033919e916286550 100644 --- a/packages/ui/src/store/metas-definitions.ts +++ b/packages/ui/src/metas-definitions.ts @@ -392,26 +392,6 @@ export const metasIndex = { }, ], }, - - titre: { - nom: 'Titre', - linkName: 'meta-titre', - }, - - demarche: { - nom: 'Démarche', - linkName: 'meta-demarche', - }, - - etape: { - nom: 'Étape', - linkName: 'meta-etape', - }, - - activite: { - nom: 'Activité', - linkName: 'meta-activite', - }, } as const export type MetaIndexTable = keyof typeof metasIndex diff --git a/packages/ui/src/router/index.ts b/packages/ui/src/router/index.ts index e7347694d73a1f75de3868c96161f32e1e65ea51..6e16f7388642541f4fc572cec0a850c0f18b30c5 100644 --- a/packages/ui/src/router/index.ts +++ b/packages/ui/src/router/index.ts @@ -85,26 +85,6 @@ const Meta = async () => { return Meta } -const MetaTitre = async () => { - const { MetaTitre } = await import('../components/meta-titre') - - return MetaTitre -} -const MetaDemarche = async () => { - const { MetaDemarche } = await import('../components/meta-demarche') - - return MetaDemarche -} -const MetaEtape = async () => { - const { MetaEtape } = await import('../components/meta-etape') - - return MetaEtape -} -const MetaActivite = async () => { - const { MetaActivite } = await import('../components/meta-activite') - - return MetaActivite -} const Metas = async () => { const { Metas } = await import('../components/metas') @@ -318,42 +298,6 @@ const routes = [ menuSection: 'metas', }, }, - { - path: '/metas/titre', - name: 'meta-titre', - component: MetaTitre, - meta: { - title: 'Métas des titres', - menuSection: 'metas', - }, - }, - { - path: '/metas/demarche', - name: 'meta-demarche', - component: MetaDemarche, - meta: { - title: 'Métas des démarches', - menuSection: 'metas', - }, - }, - { - path: '/metas/etape', - name: 'meta-etape', - component: MetaEtape, - meta: { - title: 'Métas des étapes', - menuSection: 'metas', - }, - }, - { - path: '/metas/activite', - name: 'meta-activite', - component: MetaActivite, - meta: { - title: 'Métas des activités', - menuSection: 'metas', - }, - }, { path: '/metas/:id', name: 'meta', diff --git a/packages/ui/src/store/index.js b/packages/ui/src/store/index.js deleted file mode 100644 index 70b13e378bb67a61160b4a37ca7b9cf6db703fc2..0000000000000000000000000000000000000000 --- a/packages/ui/src/store/index.js +++ /dev/null @@ -1,43 +0,0 @@ -import { createStore } from 'vuex' -import meta from './meta' - -const modules = { - meta, -} - -const state = { - messages: [], -} - -const actions = { - messageAdd({ commit }, message) { - const id = Date.now() - message.id = id - - commit('messageAdd', message) - - setTimeout(() => { - commit('messageRemove', id) - }, 4500) - }, -} - -const mutations = { - messageAdd(state, message) { - state.messages.push(message) - }, - - messageRemove(state, id) { - const index = state.messages.findIndex(m => m.id === id) - state.messages.splice(index, 1) - }, -} - -export { actions, mutations } - -export default createStore({ - state, - actions, - mutations, - modules, -}) diff --git a/packages/ui/src/store/index.test.js b/packages/ui/src/store/index.test.js deleted file mode 100644 index 127118ed7e9859e555babbce9bc17fe3b16677ea..0000000000000000000000000000000000000000 --- a/packages/ui/src/store/index.test.js +++ /dev/null @@ -1,90 +0,0 @@ -import { actions, mutations } from './index' -import { createApp } from 'vue' -import { createStore } from 'vuex' -import { vi, describe, expect, beforeEach, test } from 'vitest' - -vi.mock('./meta', () => ({ default: { meta: vi.fn() } })) - -console.info = vi.fn() -console.error = vi.fn() - -describe("état général de l'application", () => { - let state - let store - let modules - - beforeEach(() => { - vi.resetAllMocks() - modules = { - titre: { - namespaced: true, - state: { element: null }, - actions: { - get: vi.fn(), - }, - }, - } - - state = { - messages: [], - } - - store = createStore({ - modules, - state, - actions, - mutations, - }) - - const app = createApp({}) - app.use(store) - - localStorage.clear() - }) - - test('ajoute un message', () => { - const message = { id: 42, message: 'message très important' } - store.commit('messageAdd', message) - - expect(state.messages).toEqual([message]) - }) - - test('supprime un message', () => { - const message = { id: 42, message: 'message très important' } - store.commit('messageAdd', message) - store.commit('messageRemove', 42) - - expect(state.messages).toEqual([]) - }) -}) - -describe("état général de l'application", () => { - let state - let store - - beforeEach(() => { - state = { - messages: [], - } - - localStorage.clear() - }) - - test('supprime un message', async () => { - vi.useFakeTimers() - vi.setSystemTime('2022-01-01') - const messageRemoveMock = vi.fn() - mutations.messageRemove = messageRemoveMock - store = createStore({ actions, state, mutations }) - const message = { id: 14, message: 'message important' } - await store.dispatch('messageAdd', message) - - const res = state.messages.pop() - expect(res.message).toEqual('message important') - expect(res.id).toBeLessThanOrEqual(Date.now()) - vi.advanceTimersByTime(4500) - // expect(setTimeout).toHaveBeenCalled() - // expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 4500) - expect(messageRemoveMock).toHaveBeenCalled() - }) -}) diff --git a/packages/ui/src/store/meta.js b/packages/ui/src/store/meta.js deleted file mode 100644 index 7583877387da3a9dafe5b70a5124b6d20e3be812..0000000000000000000000000000000000000000 --- a/packages/ui/src/store/meta.js +++ /dev/null @@ -1,71 +0,0 @@ -/* eslint-disable @typescript-eslint/strict-boolean-expressions */ - -import { metasIndex } from './metas-definitions' -import { nextTick } from 'vue' - -const state = { - elementsIndex: {}, - elementsSelectedIndex: {}, -} - -const getters = { - elements: state => id => state.elementsIndex[id], - elementSelected: state => id => state.elementsSelectedIndex[id], -} - -const actions = { - async get({ _dispatch, commit, state }, id) { - try { - if (metasIndex[id]) { - const definition = metasIndex[id] - const elements = await definition.get() - commit('set', { id, elements }) - - for (const colonne of definition.colonnes) { - if (colonne.type === 'entities' && colonne.entities && !state.elementsIndex[colonne.entities]) { - const entities = await metasIndex[colonne.entities].get() - - commit('set', { id: colonne.entities, elements: entities }) - } - } - } - } catch (e) { - console.error(e) - } - }, - - elementSelect({ commit }, { id, element }) { - commit('elementSelectedSet', { id, element: null }) - if (element) { - nextTick(() => { - commit('elementSelectedSet', { id, element }) - }) - } - }, -} - -const mutations = { - reset(state) { - state.elementsIndex = {} - state.elementsSelectedIndex = {} - }, - - set(state, { id, elements }) { - state.elementsIndex = { ...state.elementsIndex, [id]: elements } - }, - - elementSelectedSet(state, { id, element }) { - state.elementsSelectedIndex = { - ...state.elementsSelectedIndex, - [id]: element, - } - }, -} - -export default { - namespaced: true, - state, - actions, - mutations, - getters, -} diff --git a/packages/ui/src/storybook.spec.ts b/packages/ui/src/storybook.spec.ts index d619e0038f9c6d1b416110d2cd19b0aa1aa4d855..1f188b6fe6eac759d956f3ce7d688bff38098da0 100644 --- a/packages/ui/src/storybook.spec.ts +++ b/packages/ui/src/storybook.spec.ts @@ -24,8 +24,6 @@ vi.mock('vue-router', () => ({ })), })) -vi.mock('vuex', () => ({ useStore: vi.fn() })) - const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>> => { try { return composeStories(entry) diff --git a/packages/ui/src/typings/global.d.ts b/packages/ui/src/typings/global.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..3d09ce57e54418ef1a56b3c6794ba46009129749 --- /dev/null +++ b/packages/ui/src/typings/global.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable no-unused-vars */ + +declare global { + interface ReadonlyArray<T> { + includes<U>(_x: U & (T & U extends never ? never : unknown)): boolean + } + + interface Array<T> { + includes<U>(_x: U & (T & U extends never ? never : unknown)): boolean + } +} diff --git a/packages/ui/src/typings/vuex.d.ts b/packages/ui/src/typings/vuex.d.ts deleted file mode 100644 index 6ab7fb3fa2746d05e643d18b6aef78d494db2d26..0000000000000000000000000000000000000000 --- a/packages/ui/src/typings/vuex.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { DeepMutable } from 'camino-common/src/typescript-tools' -import { Store } from 'vuex' - -/* eslint-disable no-unused-vars */ - -declare module '@vue/runtime-core' { - interface State { - count: number - } - - interface ComponentCustomProperties { - $store: Store<any> - } -} - -declare global { - interface ReadonlyArray<T> { - includes<U>(_x: U & (T & U extends never ? never : unknown)): boolean - } - - interface Array<T> { - includes<U>(_x: U & (T & U extends never ? never : unknown)): boolean - } - - declare function structuredClone<T>(value: T, transfer?: { transfer: ReadonlyArray<import('worker_threads').TransferListItem> }): DeepMutable<T> -}