Merge branch 'ticket/filter-ticket-by-id' into 'ticket-app-master'

Add ticket filtering "byTicketId" See merge request Chill-Projet/chill-bundles!882
Add ticket filtering "byTicketId"
2025-09-15 11:14:59 +00:00 · 2025-09-15 09:17:23 +00:00 · 2025-09-15 11:11:40 +02:00 · 2025-09-09 08:24:08 +00:00 · 2025-09-09 08:24:08 +00:00 · 2025-09-08 14:18:02 +00:00
576 changed files with 45628 additions and 24886 deletions
--- a/.changes/unreleased/Feature-20240530-160003.yaml
+++ b/.changes/unreleased/Feature-20240530-160003.yaml
@@ -0,0 +1,6 @@
+kind: Feature
+body: |
+  Upgrade import of address list to the last version of compiled addresses of belgian-best-address
+time: 2024-05-30T16:00:03.440767606+02:00
+custom:
+  Issue: ""
--- a/.changes/unreleased/Feature-20240531-190242.yaml
+++ b/.changes/unreleased/Feature-20240531-190242.yaml
@@ -0,0 +1,6 @@
+kind: Feature
+body: |
+  Upgrade CKEditor and refactor configuration with use of typescript
+time: 2024-05-31T19:02:42.776662753+02:00
+custom:
+  Issue: ""
--- a/.changes/unreleased/Feature-20250722-155039.yaml
+++ b/.changes/unreleased/Feature-20250722-155039.yaml
@@ -1,6 +0,0 @@
-kind: Feature
-body: Show filters on list pages unfolded by default
-time: 2025-07-22T15:50:39.338057044+02:00
-custom:
-    Issue: "399"
-    SchemaChange: No schema change
--- a/.changes/unreleased/Feature-20250904-181032.yaml
+++ b/.changes/unreleased/Feature-20250904-181032.yaml
@@ -0,0 +1,6 @@
+kind: Feature
+body: Add a command to generate a list of permissions
+time: 2025-09-04T18:10:32.334524026+02:00
+custom:
+    Issue: ""
+    SchemaChange: No schema change
--- a/.changes/unreleased/Fixed-20250806-134609.yaml
+++ b/.changes/unreleased/Fixed-20250806-134609.yaml
@@ -1,6 +0,0 @@
-kind: Fixed
-body: adjust display logic for accompanying period dates, include closing date if period is closed.
-time: 2025-08-06T13:46:09.241584292+02:00
-custom:
-    Issue: "382"
-    SchemaChange: No schema change
--- a/.changes/unreleased/Fixed-20250806-173527.yaml
+++ b/.changes/unreleased/Fixed-20250806-173527.yaml
@@ -1,6 +0,0 @@
-kind: Fixed
-body: add min and step attributes to integer field in DateIntervalType
-time: 2025-08-06T17:35:27.413787704+02:00
-custom:
-    Issue: "384"
-    SchemaChange: No schema change
--- a/.changes/unreleased/UX-20250722-132637.yaml
+++ b/.changes/unreleased/UX-20250722-132637.yaml
@@ -1,6 +0,0 @@
-kind: UX
-body: Limit display of participations in event list
-time: 2025-07-22T13:26:37.500656935+02:00
-custom:
-    Issue: ""
-    SchemaChange: No schema change
--- a/.changes/v4.1.0.md
+++ b/.changes/v4.1.0.md
@@ -0,0 +1,12 @@
+## v4.1.0 - 2025-08-26
+### Feature
+* ([#400](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/400)) Add filter to social actions list to filter out actions where current user intervenes   
+* ([#399](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/399)) Show filters on list pages unfolded by default   
+* Expansion of event module with new fields in the creation form: thematic, internal/external animator, responsable, and budget elements. Filtering options in the event list + adapted exports   
+
+  **Schema Change**: Add columns or tables
+### Fixed
+* ([#382](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/382)) adjust display logic for accompanying period dates, include closing date if period is closed.   
+* ([#384](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/384)) add min and step attributes to integer field in DateIntervalType   
+### UX
+* Limit display of participations in event list   
--- a/.changes/v4.2.0.md
+++ b/.changes/v4.2.0.md
@@ -0,0 +1,10 @@
+## v4.2.0 - 2025-09-02
+### Feature
+* ([#64](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/64)) Add external identifier for a Person
+
+  **Schema Change**: Add columns or tables
+* ([#330](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/330) Allow users to choose for which notifications they want to receive an email
+### Fixed
+* ([#422](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/422)) Fixed html layout of pages for recovering password
+* Fix typo in 'uncheckAll' script for centers selection
+* Fix incorrect parameter name in event details link
--- a/.changes/v4.2.1.md
+++ b/.changes/v4.2.1.md
@@ -0,0 +1,6 @@
+## v4.2.1 - 2025-09-03
+### Fixed
+* Fix exports to work with DirectExportInterface   
+### DX
+* Improve error message when a stored object cannot be written on local disk
+   
--- a/.editorconfig
+++ b/.editorconfig
@@ -19,11 +19,11 @@ max_line_length = 80
 [COMMIT_EDITMSG]
 max_line_length = 0

-[*.{js, vue, ts}]
+[*.{js,vue,ts}]
 indent_size = 2
 indent_style = space

-[.rst]
-ident_size = 3
-ident_style = space
+[*.rst]
+indent_size = 3
+indent_style = space

--- a/.eslint-baseline.json
+++ b/.eslint-baseline.json
@@ -7,14 +7,6 @@
        "message": "'app' is assigned a value but never used.",
        "hash": "f8c2979921289906e3baabae31ba101ead91504f"
    },
-    {
-        "path": "src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js",
-        "line": 57,
-        "column": 23,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'event' is defined but never used.",
-        "hash": "cf0cf378f71403f62a6425f384ccbbdec433d1f2"
-    },
    {
        "path": "src/Bundle/ChillCalendarBundle/Resources/public/module/Invite/answer.js",
        "line": 7,
@@ -127,46 +119,6 @@
        "message": "'payload' is defined but never used.",
        "hash": "66c545917093ba30f1d6ca10ddaa676140e749bd"
    },
-    {
-        "path": "src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue",
-        "line": 224,
-        "column": 10,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reactive' is defined but never used.",
-        "hash": "96ed76a9828138fb125fc36c4b55e900bbfe87c2"
-    },
-    {
-        "path": "src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue",
-        "line": 230,
-        "column": 5,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'DropArg' is defined but never used.",
-        "hash": "bd405399a4091d65e8391404bfb0c4611816c8e0"
-    },
-    {
-        "path": "src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue",
-        "line": 251,
-        "column": 9,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'t' is assigned a value but never used.",
-        "hash": "bc09207a496405f7a71c178e522b89aeb1f7ebd3"
-    },
-    {
-        "path": "src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue",
-        "line": 356,
-        "column": 32,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'arg' is defined but never used.",
-        "hash": "aeae152f0669b946a1ad681dd52b0ef03393ae79"
-    },
-    {
-        "path": "src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue",
-        "line": 434,
-        "column": 11,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'changedEvent' is assigned a value but never used.",
-        "hash": "a7a81a6bf09d00c0364e3aa8207ffad853f0547b"
-    },
    {
        "path": "src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/Components/EditLocation.vue",
        "line": 77,
@@ -399,14 +351,6 @@
        "message": "'error' is defined but never used.",
        "hash": "e26e5e101e90d2b7ee84d6f5de8c819e52129c17"
    },
-    {
-        "path": "src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/index.ts",
-        "line": 29,
-        "column": 14,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'vm' is defined but never used.",
-        "hash": "8e7f5e89dd72c54459cf82156389b88988f97d63"
-    },
    {
        "path": "src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/uploader.js",
        "line": 39,
@@ -615,14 +559,6 @@
        "message": "'ref' is defined but never used.",
        "hash": "2a27cd6d06a26e1326654c929068e3704137e24b"
    },
-    {
-        "path": "src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue",
-        "line": 57,
-        "column": 17,
-        "ruleId": "vue/valid-v-for",
-        "message": "Custom elements in iteration require 'v-bind:key' directives.",
-        "hash": "cce787939524e83dd135869e13738ef332d7156c"
-    },
    {
        "path": "src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/WopiEditButton.vue",
        "line": 15,
@@ -983,22 +919,6 @@
        "message": "'_e' is defined but never used.",
        "hash": "1d6448401778e8c56554020fe5abd47851ed33f3"
    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/module/wopi-link/index.js",
-        "line": 21,
-        "column": 55,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'e' is defined but never used.",
-        "hash": "eae499e4f6e9f43a9d17f9cd917cb6d3d97be25c"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/page/export/download-export.js",
-        "line": 3,
-        "column": 55,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'e' is defined but never used.",
-        "hash": "088fd383e7807e484aefc9825209bc7c8942bd22"
-    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/page/homepage_widget/index.js",
        "line": 9,
@@ -1089,115 +1009,19 @@
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 247,
-        "column": 5,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'postAddressToPerson' is defined but never used.",
-        "hash": "8a41c437cf2b5554cbbe1704cd51f3102b3d5994"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 248,
-        "column": 5,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'postAddressToHousehold' is defined but never used.",
-        "hash": "66dec84b2ece299daf21308e5e60d497ba442b27"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 490,
+        "line": 516,
        "column": 21,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"context\" prop.",
-        "hash": "0d3f40c47974a4371072b3b9ee04b197c830162d"
+        "hash": "984c4203f2ac1e1bb65f9ce76ecd03b763cfaa83"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 491,
+        "line": 517,
        "column": 21,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"context\" prop.",
-        "hash": "8e877b7e588c30e182f7b572bdb9685360f9cf99"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 508,
-        "column": 47,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "5a3e3401bc3c765d91faaf4cfde57697af1262b7"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 525,
-        "column": 47,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "35a741d90379574b9323279f5802193d0c98a9dc"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 553,
-        "column": 47,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "c23d1ddf6c0d10ae97948e74aee9c14b9320b86c"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 572,
-        "column": 47,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "4322e81c6ea9d9734c680633a724d5bd4fabacb2"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 803,
-        "column": 47,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "7928a6461b9d394c7d97f048933553936f7d8963"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue",
-        "line": 852,
-        "column": 47,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "e5afdb8efccb5470a08dde48f755b1268fa947b5"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue",
-        "line": 93,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "68f5e1cf5c03f9ada59c9e0afca0b74c7f3fca4b"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue",
-        "line": 101,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "50d730f6109092baff2db66adc44dc1315e2bda2"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue",
-        "line": 109,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "573e4c041ce663f28b933d7a675c2a525aba644c"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue",
-        "line": 117,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "293f845eeab515b1df4649d136c2d8219ed59c4d"
+        "hash": "c9fb019bc21bfa77d989ed596913b99dd653c594"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue",
@@ -1224,204 +1048,180 @@
        "hash": "2d5a5e680ff207ad97c7e7b7d999064b561dfd8a"
    },
    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 106,
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue",
+        "line": 149,
        "column": 17,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "d52356f2af31d0167c02330ec22d09fbfa6b2b9f"
+        "hash": "e4c1ecd7ae77d46ac3625c5bbe92a24d6a964db9"
    },
    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 114,
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue",
+        "line": 157,
        "column": 17,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "c8e8e06f370f93bf05867e93b5f037dfa46937b1"
+        "hash": "4dece2db87c6ce1c04ae06c088ddfe916c1c0c61"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue",
+        "line": 165,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "facc7a0f17bdf19396fae3d0de3da82e60503c0d"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue",
+        "line": 173,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "19de32c76518387218264d7c4dab914d143a9cca"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 128,
-        "column": 13,
+        "line": 130,
+        "column": 17,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "9abaf71ca4b4f292b3b01e724d0a7733365e71f1"
+        "hash": "239ac02a02694d5b20ab30d4c7ce5838c51d1515"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 129,
-        "column": 13,
+        "line": 138,
+        "column": 17,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "0b0743959778a9e3d93089b132608816ee4e6646"
+        "hash": "a54f9bc6d1edfa4df93c7dd7d409cfef3fccf99e"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 132,
+        "line": 152,
        "column": 13,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "9759da7b7859b8ee8efaf74876430658ac6b6fe2"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 133,
-        "column": 13,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "dba8be9a27ab74ec743b7d9e07c05d857b407dd3"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 134,
-        "column": 13,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "9b1f5bce779aafc46b19d7a5d266eaa29f8f9be9"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 139,
-        "column": 13,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "fe6fc4aea0994ba9da15b7c09d308842b67958cb"
+        "hash": "74a5f664d18f3916ea908897fcd0291cb0128f29"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
        "line": 153,
-        "column": 55,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "bd0e024fcad2e3f4566f15293e3c25c840f6dd3e"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 154,
-        "column": 37,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "596c4b180b926b7829f987384328bf5636cd367a"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 171,
-        "column": 59,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "5b41d5f9b45da074fb7bbbbd45e0da501da72071"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 172,
-        "column": 41,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "d92b92a25043244cca809bd129633b7e024e26b4"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 190,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "dd9a85ea740742d620e864796f67c5bff834486d"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 191,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "e3e59960d0d50709a57b336f66b586710b774892"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 192,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "fe11b0e54396511e7b3b08615a78d22fc27e2fad"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
-        "line": 222,
        "column": 13,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "63c14c2150c33ec701bc4a0ff94efde69537d490"
+        "hash": "740ea5d793c7a34c9f352d8b333f3aa04cc80ee8"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 156,
+        "column": 13,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "af8aca18f0226a5988ed90d44d95e2d607bfb5e6"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 157,
+        "column": 13,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "7bc2453017793ae20cd6c10005f941d384b59d84"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 158,
+        "column": 13,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "571b4ee5f22358dd165ec59696bb3439b7c9ff6c"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 163,
+        "column": 13,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "cfcb5946c86e289fc61623a794284a5a272d02e8"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 178,
+        "column": 37,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "0ec402e43cb08bf129e0737c0d2c4f6d0c7af8bd"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 196,
+        "column": 41,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "ec178d33e067aac892e015002afb6f3a2ff98762"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 214,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "c0f4e5454e672b6064eb9cf6c235c6810f7bfa80"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 215,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "e3dd840d2474f9865a45822872bf9ecfb15961d7"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 216,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "a32a60382b145cc7a4a7ebe01ec435b8e3103320"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue",
+        "line": 246,
+        "column": 13,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "082447e5c731012f3acc282943502775dfd24797"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 96,
+        "line": 118,
        "column": 20,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "d2a9fdaeef0e2810f480022d4c6f99e4f76a818e"
+        "hash": "d4fba4fe09af3c0937c0dd164928c8930c1591b5"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 96,
+        "line": 118,
        "column": 20,
        "ruleId": "vue/no-side-effects-in-computed-properties",
        "message": "Unexpected side effect in \"cities\" computed property.",
-        "hash": "dd92a60a9b1ebefeb9a90941d45326fbfa483733"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 102,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "04be01ab638ce01f568fb0216929e65e1175ca23"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 110,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "8619c8e0b63e87d09268832f90e4fba06b87e41f"
+        "hash": "1113a114d5aaf9f32f442916d25458541c5af35c"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
        "line": 124,
-        "column": 13,
+        "column": 17,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "281f918da00635079501418b1e6b2c05b62eb4a7"
+        "hash": "fa56a7c93583f0a9d0c2ecac10228c4f4fc1bc3a"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 125,
-        "column": 13,
+        "line": 132,
+        "column": 17,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "c131b09fa67ab1d069f1d04a54582d6b0f206153"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 126,
-        "column": 13,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "3d3a2a4add64c291b8f5f1cddd90a173cd6a819d"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 131,
-        "column": 21,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "ed48f4988914d7897018a2e06830a97e6740b3e8"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 145,
-        "column": 13,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "744f3a7610d4d6015e50e25149bceffd6c6e2763"
+        "hash": "9fe87937ea67d1dae95fb3d44d4be0da2eba0905"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
@@ -1441,115 +1241,139 @@
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 149,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "1e7b1ad55866f708baaca72dfa4ff26d6f8e5d21"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 152,
+        "line": 148,
        "column": 13,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "84779331536ffceec8d4a8c5ca4307310b882549"
+        "hash": "ab4f478fbfbc954b8dff75176dcd432f9ff28cfc"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 161,
+        "line": 153,
+        "column": 21,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "1d907d149f9ddb62e32140a90efe9a74b3e71fef"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
+        "line": 167,
        "column": 13,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "0789999841be671a4d8ab080d6fdb679f843eb52"
+        "hash": "8aa37d2d4f011773e68838a2c88017875de563b5"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 170,
-        "column": 51,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "bbb17afa114f016e2058d90aa32d2a625804f0d1"
+        "line": 168,
+        "column": 13,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "a4827a357e52a51fa9262319114d81a130296acf"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
+        "line": 169,
+        "column": 13,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "a4c9715664202949e3242b8d4aa4098288b46dc4"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
        "line": 171,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "f3e9e21e433e90ec7b615b8940d43c4177372b66"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
+        "line": 174,
+        "column": 13,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "770b7a24cc24b380e88db47d62422c8e1ece2571"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
+        "line": 183,
+        "column": 13,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "2aef3c519a9ec6abcfe7573989d3de19d5c4c752"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
+        "line": 193,
        "column": 33,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "5fbe407ceceb37bff2ac800ceddd7942540132f1"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 190,
-        "column": 55,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'reject' is defined but never used.",
-        "hash": "e2af91def877befbabef8e93deba4c58a3ee2ded"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 191,
-        "column": 37,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "ee8544ee45681a650ed7d4918ae979685cdd8f0f"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 210,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "5d9d2217c8c7e6571bc9f72a98ea5b370edb4968"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 211,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "6e04619b373c23c91f6c36c2aad314ac16cdb697"
-    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 212,
-        "column": 17,
-        "ruleId": "vue/no-mutating-props",
-        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "39df045639a62f64ccdb03a80e286bc3ad772587"
+        "hash": "5d1f97e4d7d9f47399d312e8b9f95ef9e3843b8c"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
        "line": 213,
-        "column": 17,
+        "column": 37,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "c399a43fa797a8ce61c9d96a644a39cc84a387b7"
+        "hash": "c1df874f790ef0c036bf58ae8a8db1ee173685d4"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
-        "line": 245,
+        "line": 232,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "476e6588a28ac9382e8b9d2e63a8babecd23bad8"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
+        "line": 233,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "6a0c82ba72d6d87217bf33a6ad8e40a4b81bc802"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
+        "line": 234,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "741d5af6c7d90041c0dc1c1df2e8699b80fca69a"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
+        "line": 235,
+        "column": 17,
+        "ruleId": "vue/no-mutating-props",
+        "message": "Unexpected mutation of \"entity\" prop.",
+        "hash": "c3ffd141f58d532663875cc5c7d338ed00db2a6d"
+    },
+    {
+        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue",
+        "line": 267,
        "column": 13,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "04337a07944caaa4819cfebcf29e1a7cbfdf248b"
+        "hash": "2700f258396516a2fe971618fafbcdf72cdda3ab"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue",
-        "line": 76,
+        "line": 94,
        "column": 13,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "373a2e31f110d138c66d77f1faf5dc61545c55af"
+        "hash": "4be1b0592efa775092a91a1d744e16ce98bd216e"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue",
-        "line": 81,
+        "line": 99,
        "column": 13,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "421eb6a63224b4b1d81b216677a710c5c99ddee3"
+        "hash": "19b54b6d76c30249d520a296f826eda9d6eb0668"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue",
@@ -1569,19 +1393,19 @@
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue",
-        "line": 155,
+        "line": 169,
        "column": 17,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "b3a822914fcb5e2fcf28efc331a45b9205002eeb"
+        "hash": "dcb7b34098062760ddbb849655a5bb3ca65c36d3"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue",
-        "line": 164,
+        "line": 178,
        "column": 17,
        "ruleId": "vue/no-mutating-props",
        "message": "Unexpected mutation of \"entity\" prop.",
-        "hash": "72c7d850f6cdeaf65b373a33234222f9766ee30b"
+        "hash": "86b3ecf201025cac36878c5e4bf8850fb9d58cb5"
    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js",
@@ -1631,14 +1455,6 @@
        "message": "'app' is assigned a value but never used.",
        "hash": "9e6125f4fc387dc362c69cc6e3ce360eb2851f1b"
    },
-    {
-        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue",
-        "line": 60,
-        "column": 22,
-        "ruleId": "vue/require-valid-default-prop",
-        "message": "Type of the default value for 'suggested' prop must be a function.",
-        "hash": "d30212820bc2e97fa02d75dbc3a014558693f169"
-    },
    {
        "path": "src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue",
        "line": 24,
@@ -1727,14 +1543,6 @@
        "message": "'tags' is assigned a value but never used.",
        "hash": "ae9bb2e0651c118ed9efd227e88b86cc83f5d80d"
    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue",
-        "line": 116,
-        "column": 18,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'event' is defined but never used.",
-        "hash": "201f182769c6dfb87148b841e7d9b592be429669"
-    },
    {
        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js",
        "line": 19,
@@ -1767,14 +1575,6 @@
        "message": "'app' is assigned a value but never used.",
        "hash": "aaaaa63e7a60443b8cbf8191feb9142852ebdf1c"
    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue",
-        "line": 79,
-        "column": 13,
-        "ruleId": "vue/require-v-for-key",
-        "message": "Elements in iteration expect to have 'v-bind:key' directives.",
-        "hash": "422f53925922e59655d0f71624c19af75d41628c"
-    },
    {
        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/index.js",
        "line": 12,
@@ -1815,22 +1615,6 @@
        "message": "'evalFQDN' is assigned a value but never used.",
        "hash": "7fc32caafa23addddf44f3acbc5045b4523a0271"
    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js",
-        "line": 611,
-        "column": 9,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'errors' is assigned a value but never used.",
-        "hash": "c41cf979fc1626c38328dbf1028800c3395496bd"
-    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue",
-        "line": 282,
-        "column": 7,
-        "ruleId": "@typescript-eslint/no-unused-expressions",
-        "message": "Expected an assignment or function call and instead saw an expression.",
-        "hash": "de3a6e2bb10a80a2bacba665be74266c7efc7d64"
-    },
    {
        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/index.js",
        "line": 16,
@@ -1847,38 +1631,6 @@
        "message": "'app' is assigned a value but never used.",
        "hash": "2f161e663689e3e4dfe2c53b0d64c91a4d2b1a60"
    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue",
-        "line": 263,
-        "column": 19,
-        "ruleId": "vue/return-in-computed-property",
-        "message": "Expected to return a value in \"refreshNetwork\" computed property.",
-        "hash": "2c1b08a49098c83b09058cedc0a962126e91e544"
-    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue",
-        "line": 270,
-        "column": 7,
-        "ruleId": "vue/no-side-effects-in-computed-properties",
-        "message": "Unexpected side effect in \"legendLayers\" computed property.",
-        "hash": "760948d2187c853f17ac9a1bd7107e883092d4f4"
-    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue",
-        "line": 281,
-        "column": 5,
-        "ruleId": "vue/no-dupe-keys",
-        "message": "Duplicate key 'checkedLayers'. May cause name collision in script or template tag.",
-        "hash": "447edb461e15e3ff5c60c8ecba88131e442539aa"
-    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue",
-        "line": 353,
-        "column": 7,
-        "ruleId": "@typescript-eslint/no-unused-expressions",
-        "message": "Expected an assignment or function call and instead saw an expression.",
-        "hash": "9cf656cbf1eb3d7cc0082e63adcd320b6093d14f"
-    },
    {
        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/index.js",
        "line": 20,
@@ -1887,22 +1639,6 @@
        "message": "'app' is assigned a value but never used.",
        "hash": "9e94e6412b8a44e47bfe8e66218cad09cff5bed4"
    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue",
-        "line": 42,
-        "column": 16,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'response' is defined but never used.",
-        "hash": "62de07b13c662e32332bb062038acee23978ea70"
-    },
-    {
-        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue",
-        "line": 356,
-        "column": 28,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'_response' is defined but never used.",
-        "hash": "097e7788a2b5dea500b80b8a3cf968e57063a66a"
-    },
    {
        "path": "src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUserGroup.vue",
        "line": 6,
@@ -1918,45 +1654,5 @@
        "ruleId": "@typescript-eslint/no-unused-vars",
        "message": "'UserRenderBoxBadge' is defined but never used.",
        "hash": "99eba0d8633b2c9497417f4f61ec4194dbb2a96b"
-    },
-    {
-        "path": "src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts",
-        "line": 4,
-        "column": 3,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'StoredObjectStatus' is defined but never used.",
-        "hash": "63f8c4572293916850d6165647774b27d4b732c6"
-    },
-    {
-        "path": "src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts",
-        "line": 5,
-        "column": 3,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'StoredObjectStatusChange' is defined but never used.",
-        "hash": "a87c178e3eb5999bf0f46b3fa1c6da77e1be08b9"
-    },
-    {
-        "path": "src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts",
-        "line": 30,
-        "column": 61,
-        "ruleId": "@typescript-eslint/no-unused-vars",
-        "message": "'e' is defined but never used.",
-        "hash": "02953121583f4f73742a19adab099ab63df9076e"
-    },
-    {
-        "path": "src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts",
-        "line": 31,
-        "column": 32,
-        "ruleId": "@typescript-eslint/no-explicit-any",
-        "message": "Unexpected any. Specify a different type.",
-        "hash": "af48e21a1651b6017ede882dab249c00a818a44d"
-    },
-    {
-        "path": "src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts",
-        "line": 37,
-        "column": 16,
-        "ruleId": "@typescript-eslint/no-explicit-any",
-        "message": "Unexpected any. Specify a different type.",
-        "hash": "7513ea552a0a649ce4ab93b6cf9d40bfef4f68d9"
    }
 ]
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,9 @@ migrations/*
 templates/*
 translations/*

+# we allow developers to add customization on their installation, without commiting it
+config/packages/dev/*
+
 ###> symfony/framework-bundle ###
 /.env.local
 /.env.local.php
--- a/.junie/guidelines.md
+++ b/.junie/guidelines.md
@@ -27,11 +27,11 @@ Chill is a comprehensive web application built as a set of Symfony bundles. It i

 ## Project Structure

-Note: This is a project which exists from a long time ago, and we found multiple structure inside each bundle. When having the choice, the developers should choose the new structure.
+Note: This is a project that's existed for a long time, and throughout the years we've used multiple structures inside each bundle. When having the choice, the developers should choose the new structure.

 The project follows a standard Symfony bundle structure:
 - `/src/Bundle/`: Contains all the Chill bundles. The code is either at the root of the bundle directory, or within a `src/` directory (preferred). See psr4 mapping at the root's `composer.json`.
- each bundle come with his own tests, either in the `Tests` directory (when the code is directly within the bundle directory (for instance `src/Bundle/ChillMainBundle/Tests`, `src/Bundle/ChillPersonBundle/Tests`)), or inside the `tests` directory, alongside to the `src/` sub-directory (example: `src/Bundle/ChillWopiBundle/tests`) (this is the preferred way).
+- each bundle comes with its own tests, either in the `Tests` directory (when the code is directly within the bundle directory (for instance `src/Bundle/ChillMainBundle/Tests`, `src/Bundle/ChillPersonBundle/Tests`)), or inside the `tests` directory, alongside the `src/` sub-directory (example: `src/Bundle/ChillWopiBundle/tests`) (this is the preferred way).
 - `/docs/`: Contains project documentation

 Each bundle typically has the following structure:
@@ -46,13 +46,13 @@ Each bundle typically has the following structure:

 ### A special word about TicketBundle

-The ticket bundle is developed using a kind of "Command" pattern. The controller fill a "Command", and a "CommandHandler" handle this command. They are savec in the `src/Bundle/ChillTicketBundle/src/Action` directory.
+The ticket bundle is developed using a kind of "Command" pattern. The controller fills a "Command," and a "CommandHandler" handles this command. They are saved in the `src/Bundle/ChillTicketBundle/src/Action` directory.

 ## Development Guidelines

 ### Building and Configuration Instructions

-All the command should be run through the `symfony` command, which will configure the required variables.
+All the commands should be run through the `symfony` command, which will configure the required variables.

 For assets, we must ensure that we use node at version `^20.0.0`. This is done using `nvm use 20`.

@@ -87,7 +87,7 @@ For assets, we must ensure that we use node at version `^20.0.0`. This is done u
   docker compose up -d
   ```

-5. **Set Up the Database**:
+6. **Set Up the Database**:
   ```bash
   # Create the database
   symfony console doctrine:database:create
@@ -99,20 +99,20 @@ For assets, we must ensure that we use node at version `^20.0.0`. This is done u
   symfony console doctrine:fixtures:load
   ```

-6. **Build Assets**:
+7. **Build Assets**:
   ```bash
   nvm use 20
   yarn run encore dev
   ```

-7. **Start the Development Server**:
+8. **Start the Development Server**:
   ```bash
   symfony server:start -d
   ```

 #### Docker Setup

-The project includes Docker configuration for easier development:
+The project includes a Docker configuration for easier development:

 1. **Start Docker Services**:
   ```bash
@@ -153,9 +153,9 @@ Key configuration files:

 Each time a doctrine entity is created, we generate migration to adapt the database.

-The migration are created using the command `symfony console doctrine:migrations:diff --no-interaction --namespace <namespace>`, where the namespace is the relevant namespace for migration. As this is a bash script, do not forget to quote the `\` (`\` must become `\\` in your command).
+The migration is created using the command `symfony console doctrine:migrations:diff --no-interaction --namespace <namespace>`, where the namespace is the relevant namespace for migration. As this is a bash script, remember to quote the `\` (`\` must become `\\` in your command).

-Each bundle has his own namespace for migration (always ask me to confirm that command, with a list of updated / created entities so that I can confirm you that it is ok):
+Each bundle has his own namespace for migration (always ask me to confirm that command with a list of updated / created entities so that I can confirm to you that it is ok):

 - `Chill\Bundle\ActivityBundle` writes migrations to `Chill\Migrations\Activity`;
 - `Chill\Bundle\BudgetBundle` writes migrations to `Chill\Migrations\Budget`;
@@ -183,7 +183,7 @@ Once created the, comment's classes should be removed and a description of the c

 When we need to use a DateTime or DateTimeImmutable that need to express "now", we prefer the usage of
 `Symfony\Component\Clock\ClockInterface`, where possible. This is usually not possible in doctrine entities,
-where injection does not work when restoring an entity from database, but usually possible in services.
+where injection does not work when restoring an entity from a database, but usually possible in services.

 In test, we use `\Symfony\Component\Clock\MockClock` which is an implementation of `Symfony\Component\Clock\ClockInterface`
 where we have full and easy control of the date.
@@ -198,9 +198,9 @@ The project uses PHPUnit for testing. Each bundle has its own test suite, and th

 For creating mock, we prefer using prophecy (library phpspec/prophecy).

-##### Useful helpers and tips that avoid create a mock
+##### Useful helpers and tips that avoid creating a mock

-Some notable implementations that are tests helper, and avoid to create a mock:
+Some notable implementations that are test helpers and avoid creating a mock:

 - `\Psr\Log\NullLogger`, an implementation of `\Psr\Log\LoggerInterface`;
 - `\Symfony\Component\Clock\MockClock`, an implementation of `Symfony\Component\Clock\ClockInterface` (already mentioned above);
@@ -234,15 +234,9 @@ This must be a decision made by a human, not by an AI. Every AI task must abort

 #### Running Tests

-The tests are run from the project's root (not from the bundle's root).
+The tests are run from the project's root (not from the bundle's root: so, do not change the directory to any bundle directory before running tests).

 ```bash
-# Run all tests
-vendor/bin/phpunit
-
-# Run tests for a specific bundle
-vendor/bin/phpunit --testsuite NameBundle
-
 # Run a specific test file
 vendor/bin/phpunit path/to/TestFile.php

@@ -297,7 +291,7 @@ class TicketTest extends TestCase

 #### Test Database

-For tests that require a database, the project uses postgresql database filled by fixtures (usage of doctrine-fixtures). You can configure a different database for testing in the `.env.test` file.
+For tests that require a database, the project uses a postgresql database filled with fixtures (usage of doctrine-fixtures). You can configure a different database for testing in the `.env.test` file.

 ### Code Quality Tools

--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,30 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Chill Debug",
+            "type": "php",
+            "request": "launch",
+            "port": 9000,
+            "pathMappings": {
+                "/var/www/html": "${workspaceFolder}"
+            },
+            "preLaunchTask": "symfony"
+        },
+        {
+            "name": "Yarn Encore Dev (Watch)",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "yarn encore dev --watch",
+            "cwd": "${workspaceFolder}"
+        }
+    ],
+    "compounds": [
+        {
+            "name": "Chill Debug + Yarn Encore Dev (Watch)",
+            "configurations": ["Chill Debug", "Yarn Encore Dev (Watch)"]
+        }
+    ]
+}
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -0,0 +1,23 @@
+{
+    "tasks": [
+        {
+            "type": "shell",
+            "command": "symfony",
+            "args": [
+                "server:start",
+                "--allow-http",
+                "--no-tls",
+                "--port=8000",
+                "--allow-all-ip",
+                "-d"
+            ],
+            "label": "symfony"
+        },
+        {
+            "type": "shell",
+            "command": "yarn",
+            "args": ["encore", "dev", "--watch"],
+            "label": "webpack"
+        }
+    ]
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,37 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html),
 and is generated by [Changie](https://github.com/miniscruff/changie).


+## v4.2.1 - 2025-09-03
+### Fixed
+* Fix exports to work with DirectExportInterface   
+### DX
+* Improve error message when a stored object cannot be written on local disk
+   
+
+## v4.2.0 - 2025-09-02
+### Feature
+* ([#64](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/64)) Add external identifier for a Person
+
+  **Schema Change**: Add columns or tables
+* ([#330](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/330) Allow users to choose for which notifications they want to receive an email
+### Fixed
+* ([#422](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/422)) Fixed html layout of pages for recovering password
+* Fix typo in 'uncheckAll' script for centers selection
+* Fix incorrect parameter name in event details link
+
+## v4.1.0 - 2025-08-26
+### Feature
+* ([#400](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/400)) Add filter to social actions list to filter out actions where current user intervenes   
+* ([#399](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/399)) Show filters on list pages unfolded by default   
+* Expansion of event module with new fields in the creation form: thematic, internal/external animator, responsable, and budget elements. Filtering options in the event list + adapted exports   
+
+  **Schema Change**: Add columns or tables
+### Fixed
+* ([#382](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/382)) adjust display logic for accompanying period dates, include closing date if period is closed.   
+* ([#384](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/384)) add min and step attributes to integer field in DateIntervalType   
+### UX
+* Limit display of participations in event list   
+
 ## v4.0.2 - 2025-07-09
 ### Fixed
 * Fix add missing translation   
--- a/CONVENTIONS-fr.md
+++ b/CONVENTIONS-fr.md
@@ -54,7 +54,7 @@ Arborescence:
    - person
    - personvendee
    - household_edit_metadata
-        - index.js
+        - index.ts
 ```

 ## Organisation des feuilles de styles
--- a/composer.json
+++ b/composer.json
@@ -133,6 +133,7 @@
            "Chill\\TaskBundle\\": "src/Bundle/ChillTaskBundle",
            "Chill\\ThirdPartyBundle\\": "src/Bundle/ChillThirdPartyBundle",
            "Chill\\WopiBundle\\": "src/Bundle/ChillWopiBundle/src",
+            "Chill\\TicketBundle\\": "src/Bundle/ChillTicketBundle/src",
            "Chill\\Utils\\Rector\\": "utils/rector/src"
        }
    },
--- a/config/bundles.php
+++ b/config/bundles.php
@@ -35,6 +35,7 @@ return [
    Chill\ThirdPartyBundle\ChillThirdPartyBundle::class => ['all' => true],
    Chill\BudgetBundle\ChillBudgetBundle::class => ['all' => true],
    Chill\WopiBundle\ChillWopiBundle::class => ['all' => true],
+    Chill\TicketBundle\ChillTicketBundle::class => ['all' => true],
    Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
    Symfony\UX\Translator\UxTranslatorBundle::class => ['all' => true],
 ];
--- a/config/packages/chill_doc_store.yaml
+++ b/config/packages/chill_doc_store.yaml
@@ -1,5 +1,5 @@
 chill_doc_store:
-    use_driver: openstack
+    use_driver: local_storage
    local_storage:
        storage_path: '%kernel.project_dir%/var/storage'
    openstack:
--- a/config/packages/chill_ticket.yaml
+++ b/config/packages/chill_ticket.yaml
@@ -0,0 +1,5 @@
+chill_ticket:
+    ticket:
+        person_per_ticket:    one # One of "one"; "many"
+        response_time_exceeded_delay: PT12H
+
--- a/config/packages/doctrine_migrations_chill.yaml
+++ b/config/packages/doctrine_migrations_chill.yaml
@@ -14,6 +14,7 @@ doctrine_migrations:
        'Chill\Migrations\Calendar': '@ChillCalendarBundle/migrations'
        'Chill\Migrations\Budget': '@ChillBudgetBundle/migrations'
        'Chill\Migrations\Report': '@ChillReportBundle/migrations'
+        'Chill\Migrations\Ticket': '@ChillTicketBundle/migrations'
    all_or_nothing:
        true

--- a/config/routes/chill_ticket.yaml
+++ b/config/routes/chill_ticket.yaml
@@ -0,0 +1,2 @@
+chill_ticket_bundle:
+    resource: '@ChillTicketBundle/config/routes.yaml'
--- a/docs/source/development/create-a-new-bundle.rst
+++ b/docs/source/development/create-a-new-bundle.rst
@@ -11,24 +11,94 @@
 Create a new bundle
 *******************

-Create your own bundle is not a trivial task.
-
-The easiest way to achieve this is seems to be : 
-
-1. Prepare a fresh installation of the chill project, in a new directory
-2. Create a new bundle in this project, in the src directory
-3. Initialize a git repository **at the root bundle**, and create your initial commit.
-4. Register the bundle with composer/packagist. If you do not plan to distribute your bundle with packagist, you may use a custom repository for achieve this [#f1]_
-5. Move to a development installation, made as described in the :ref:`installation-for-development` section, and add your new repository to the composer.json file
-6. Work as :ref:`usual <editing-code-and-commiting>`
-
 .. warning::

    This part of the doc is not yet tested

-TODO
+Create a new directory with Bundle class
+----------------------------------------
+
+.. code-block:: bash
+
+   mkdir -p src/Bundle/ChillSomeBundle/src/config
+   mkdir -p src/Bundle/ChillSomeBundle/src/Controller
+
+Add a bundle file
+
+.. code-block:: php
+
+    <?php
+
+    declare(strict_types=1);
+
+    /*
+     * Chill is a software for social workers
+     *
+     * For the full copyright and license information, please view
+     * the LICENSE file that was distributed with this source code.
+     */
+
+    namespace Chill\SomeBundle;
+
+    use Symfony\Component\HttpKernel\Bundle\Bundle;
+
+    class ChillSomeBundle extends Bundle {}
+
+And a route file:
+
+.. code-block:: yaml
+
+   chill_ticket_controller:
+       resource: '@ChillTicketBundle/Controller/'
+       type: annotation
+
+Register the new psr-4 namespace
+--------------------------------
+
+In composer.json, add the new psr4 namespace
+
+.. code-block:: diff
+
+    {
+    "autoload": {
+        "psr-4": {
+    +        "Chill\\SomeBundle\\": "src/Bundle/ChillSomeBundle/src",
+        }
+    }
+    }


-.. rubric:: Footnotes
+Register the bundle
+-------------------
+
+Register in the file :code:`config/bundles.php`:
+
+.. code-block:: php
+
+    Vendor\Bundle\YourBundle\YourBundle::class => ['all' => true],
+
+And import routes in :code:`config/routes/chill_some_bundle.yaml`:
+
+.. code-block:: yaml
+
+   chill_ticket_bundle:
+       resource: '@ChillSomeBundle/config/routes.yaml'
+
+Add the doctrine_migration namespace
+------------------------------------
+
+Add the namespace to :code:`config/packages/doctrine_migrations_chill.yaml`
+
+.. code-block:: diff
+
+   doctrine_migrations:
+       migrations_paths:
+   +        'Chill\Some\Ticket': '@ChillSomeBundle/migrations'
+
+Dump autoloading
+----------------
+
+.. code-block:: bash
+
+   symfony composer dump-autoload

-.. [#f1] Be aware that we use the Affero GPL Licence, which ensure that all users must have access to derivative works done with this software.
--- a/package.json
+++ b/package.json
@@ -79,12 +79,12 @@
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress",
-    "specs-build": "yaml-merge src/Bundle/ChillMainBundle/chill.api.specs.yaml src/Bundle/ChillPersonBundle/chill.api.specs.yaml src/Bundle/ChillCalendarBundle/chill.api.specs.yaml src/Bundle/ChillThirdPartyBundle/chill.api.specs.yaml src/Bundle/ChillDocStoreBundle/chill.api.specs.yaml> templates/api/specs.yaml",
+    "specs-build": "yaml-merge src/Bundle/ChillMainBundle/chill.api.specs.yaml src/Bundle/ChillPersonBundle/chill.api.specs.yaml src/Bundle/ChillCalendarBundle/chill.api.specs.yaml src/Bundle/ChillThirdPartyBundle/chill.api.specs.yaml src/Bundle/ChillDocStoreBundle/chill.api.specs.yaml src/Bundle/ChillTicketBundle/chill.api.specs.yaml> templates/api/specs.yaml",
    "specs-validate": "swagger-cli validate templates/api/specs.yaml",
    "specs-create-dir": "mkdir -p templates/api",
    "specs": "yarn run specs-create-dir && yarn run specs-build && yarn run specs-validate",
    "version": "node --version",
-    "eslint": "npx eslint-baseline --fix \"src/**/*.{js,ts,vue}\""
+    "eslint": "eslint-baseline --fix \"src/**/*.{js,ts,vue}\""
  },
  "private": true
 }
--- a/phpunit.xml.dist
+++ b/phpunit.xml.dist
@@ -58,6 +58,10 @@
      <!-- temporarily removed, the time to find a fix -->
      <exclude>src/Bundle/ChillPersonBundle/Tests/Controller/PersonDuplicateControllerViewTest.php</exclude>
    </testsuite>
+
+    <testsuite name="TicketBundle">
+      <directory suffix="Test.php">src/Bundle/ChillTicketBundle/tests/</directory>
+    </testsuite>
    <!--
        <testsuite name="ReportBundle">
            <directory suffix="Test.php">src/Bundle/ChillReportBundle/Tests/</directory>
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
@@ -1,7 +1,7 @@
 <template>
-    <concerned-groups v-if="hasPerson" />
-    <social-issues-acc v-if="hasSocialIssues" />
-    <location v-if="hasLocation" />
+  <concerned-groups v-if="hasPerson" />
+  <social-issues-acc v-if="hasSocialIssues" />
+  <location v-if="hasLocation" />
 </template>

 <script>
@@ -10,12 +10,12 @@ import SocialIssuesAcc from "./components/SocialIssuesAcc.vue";
 import Location from "./components/Location.vue";

 export default {
-    name: "App",
-    props: ["hasSocialIssues", "hasLocation", "hasPerson"],
-    components: {
-        ConcernedGroups,
-        SocialIssuesAcc,
-        Location,
-    },
+  name: "App",
+  props: ["hasSocialIssues", "hasLocation", "hasPerson"],
+  components: {
+    ConcernedGroups,
+    SocialIssuesAcc,
+    Location,
+  },
 };
 </script>
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
@@ -1,46 +1,43 @@
 <template>
-    <teleport to="#add-persons" v-if="isComponentVisible">
-        <div class="flex-bloc concerned-groups" :class="getContext">
-            <persons-bloc
-                v-for="bloc in contextPersonsBlocs"
-                :key="bloc.key"
-                :bloc="bloc"
-                :bloc-width="getBlocWidth"
-                :set-persons-in-bloc="setPersonsInBloc"
-            />
-        </div>
-        <div
-            v-if="
-                getContext === 'accompanyingCourse' &&
-                suggestedEntities.length > 0
-            "
+  <teleport to="#add-persons" v-if="isComponentVisible">
+    <div class="flex-bloc concerned-groups" :class="getContext">
+      <persons-bloc
+        v-for="bloc in contextPersonsBlocs"
+        :key="bloc.key"
+        :bloc="bloc"
+        :bloc-width="getBlocWidth"
+        :set-persons-in-bloc="setPersonsInBloc"
+      />
+    </div>
+    <div
+      v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0"
+    >
+      <ul class="list-suggest add-items inline">
+        <li
+          v-for="(p, i) in suggestedEntities"
+          @click="addSuggestedEntity(p)"
+          :key="`suggestedEntities-${i}`"
        >
-            <ul class="list-suggest add-items inline">
-                <li
-                    v-for="(p, i) in suggestedEntities"
-                    @click="addSuggestedEntity(p)"
-                    :key="`suggestedEntities-${i}`"
-                >
-                    <person-text v-if="p.type === 'person'" :person="p" />
-                    <span v-else>{{ p.text }}</span>
-                </li>
-            </ul>
-        </div>
+          <person-text v-if="p.type === 'person'" :person="p" />
+          <span v-else>{{ p.text }}</span>
+        </li>
+      </ul>
+    </div>

-        <ul class="record_actions">
-            <li class="add-persons">
-                <add-persons
-                    :buttonTitle="trans(ACTIVITY_ADD_PERSONS)"
-                    :modalTitle="trans(ACTIVITY_ADD_PERSONS)"
-                    v-bind:key="addPersons.key"
-                    v-bind:options="addPersonsOptions"
-                    @addNewPersons="addNewPersons"
-                    ref="addPersons"
-                >
-                </add-persons>
-            </li>
-        </ul>
-    </teleport>
+    <ul class="record_actions">
+      <li class="add-persons">
+        <add-persons
+          :buttonTitle="trans(ACTIVITY_ADD_PERSONS)"
+          :modalTitle="trans(ACTIVITY_ADD_PERSONS)"
+          v-bind:key="addPersons.key"
+          v-bind:options="addPersonsOptions"
+          @addNewPersons="addNewPersons"
+          ref="addPersons"
+        >
+        </add-persons>
+      </li>
+    </ul>
+  </teleport>
 </template>

 <script>
@@ -49,208 +46,208 @@ import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
 import PersonsBloc from "./ConcernedGroups/PersonsBloc.vue";
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 import {
-    ACTIVITY_BLOC_PERSONS,
-    ACTIVITY_BLOC_PERSONS_ASSOCIATED,
-    ACTIVITY_BLOC_THIRDPARTY,
-    ACTIVITY_BLOC_USERS,
-    ACTIVITY_ADD_PERSONS,
-    trans,
+  ACTIVITY_BLOC_PERSONS,
+  ACTIVITY_BLOC_PERSONS_ASSOCIATED,
+  ACTIVITY_BLOC_THIRDPARTY,
+  ACTIVITY_BLOC_USERS,
+  ACTIVITY_ADD_PERSONS,
+  trans,
 } from "translator";

 export default {
-    name: "ConcernedGroups",
-    components: {
-        AddPersons,
-        PersonsBloc,
-        PersonText,
+  name: "ConcernedGroups",
+  components: {
+    AddPersons,
+    PersonsBloc,
+    PersonText,
+  },
+  setup() {
+    return {
+      trans,
+      ACTIVITY_ADD_PERSONS,
+    };
+  },
+  data() {
+    return {
+      personsBlocs: [
+        {
+          key: "persons",
+          title: trans(ACTIVITY_BLOC_PERSONS),
+          persons: [],
+          included: false,
+        },
+        {
+          key: "personsAssociated",
+          title: trans(ACTIVITY_BLOC_PERSONS_ASSOCIATED),
+          persons: [],
+          included: window.activity
+            ? window.activity.activityType.personsVisible !== 0
+            : true,
+        },
+        {
+          key: "personsNotAssociated",
+          title: "activity.bloc_persons_not_associated",
+          persons: [],
+          included: window.activity
+            ? window.activity.activityType.personsVisible !== 0
+            : true,
+        },
+        {
+          key: "thirdparty",
+          title: trans(ACTIVITY_BLOC_THIRDPARTY),
+          persons: [],
+          included: window.activity
+            ? window.activity.activityType.thirdPartiesVisible !== 0
+            : true,
+        },
+        {
+          key: "users",
+          title: trans(ACTIVITY_BLOC_USERS),
+          persons: [],
+          included: window.activity
+            ? window.activity.activityType.usersVisible !== 0
+            : true,
+        },
+      ],
+      addPersons: {
+        key: "activity",
+      },
+    };
+  },
+  computed: {
+    isComponentVisible() {
+      return window.activity
+        ? window.activity.activityType.personsVisible !== 0 ||
+            window.activity.activityType.thirdPartiesVisible !== 0 ||
+            window.activity.activityType.usersVisible !== 0
+        : true;
    },
-    setup() {
-        return {
-            trans,
-            ACTIVITY_ADD_PERSONS,
-        };
+    ...mapState({
+      persons: (state) => state.activity.persons,
+      thirdParties: (state) => state.activity.thirdParties,
+      users: (state) => state.activity.users,
+      accompanyingCourse: (state) => state.activity.accompanyingPeriod,
+    }),
+    ...mapGetters(["suggestedEntities"]),
+    getContext() {
+      return this.accompanyingCourse ? "accompanyingCourse" : "person";
    },
-    data() {
-        return {
-            personsBlocs: [
-                {
-                    key: "persons",
-                    title: trans(ACTIVITY_BLOC_PERSONS),
-                    persons: [],
-                    included: false,
-                },
-                {
-                    key: "personsAssociated",
-                    title: trans(ACTIVITY_BLOC_PERSONS_ASSOCIATED),
-                    persons: [],
-                    included: window.activity
-                        ? window.activity.activityType.personsVisible !== 0
-                        : true,
-                },
-                {
-                    key: "personsNotAssociated",
-                    title: "activity.bloc_persons_not_associated",
-                    persons: [],
-                    included: window.activity
-                        ? window.activity.activityType.personsVisible !== 0
-                        : true,
-                },
-                {
-                    key: "thirdparty",
-                    title: trans(ACTIVITY_BLOC_THIRDPARTY),
-                    persons: [],
-                    included: window.activity
-                        ? window.activity.activityType.thirdPartiesVisible !== 0
-                        : true,
-                },
-                {
-                    key: "users",
-                    title: trans(ACTIVITY_BLOC_USERS),
-                    persons: [],
-                    included: window.activity
-                        ? window.activity.activityType.usersVisible !== 0
-                        : true,
-                },
-            ],
-            addPersons: {
-                key: "activity",
-            },
-        };
+    contextPersonsBlocs() {
+      return this.personsBlocs.filter((bloc) => bloc.included !== false);
    },
-    computed: {
-        isComponentVisible() {
-            return window.activity
-                ? window.activity.activityType.personsVisible !== 0 ||
-                      window.activity.activityType.thirdPartiesVisible !== 0 ||
-                      window.activity.activityType.usersVisible !== 0
-                : true;
-        },
-        ...mapState({
-            persons: (state) => state.activity.persons,
-            thirdParties: (state) => state.activity.thirdParties,
-            users: (state) => state.activity.users,
-            accompanyingCourse: (state) => state.activity.accompanyingPeriod,
-        }),
-        ...mapGetters(["suggestedEntities"]),
-        getContext() {
-            return this.accompanyingCourse ? "accompanyingCourse" : "person";
-        },
-        contextPersonsBlocs() {
-            return this.personsBlocs.filter((bloc) => bloc.included !== false);
-        },
-        addPersonsOptions() {
-            let optionsType = [];
-            if (window.activity) {
-                if (window.activity.activityType.personsVisible !== 0) {
-                    optionsType.push("person");
-                }
-                if (window.activity.activityType.thirdPartiesVisible !== 0) {
-                    optionsType.push("thirdparty");
-                }
-                if (window.activity.activityType.usersVisible !== 0) {
-                    optionsType.push("user");
-                }
-            } else {
-                optionsType = ["person", "thirdparty", "user"];
-            }
-            return {
-                type: optionsType,
-                priority: null,
-                uniq: false,
-                button: {
-                    size: "btn-sm",
-                },
-            };
-        },
-        getBlocWidth() {
-            return Math.round(100 / this.contextPersonsBlocs.length) + "%";
+    addPersonsOptions() {
+      let optionsType = [];
+      if (window.activity) {
+        if (window.activity.activityType.personsVisible !== 0) {
+          optionsType.push("person");
+        }
+        if (window.activity.activityType.thirdPartiesVisible !== 0) {
+          optionsType.push("thirdparty");
+        }
+        if (window.activity.activityType.usersVisible !== 0) {
+          optionsType.push("user");
+        }
+      } else {
+        optionsType = ["person", "thirdparty", "user"];
+      }
+      return {
+        type: optionsType,
+        priority: null,
+        uniq: false,
+        button: {
+          size: "btn-sm",
        },
+      };
    },
-    mounted() {
-        this.setPersonsInBloc();
+    getBlocWidth() {
+      return Math.round(100 / this.contextPersonsBlocs.length) + "%";
    },
-    methods: {
-        setPersonsInBloc() {
-            let groups;
-            if (this.accompanyingCourse) {
-                groups = this.splitPersonsInGroups();
-            }
-            this.personsBlocs.forEach((bloc) => {
-                if (this.accompanyingCourse) {
-                    switch (bloc.key) {
-                        case "personsAssociated":
-                            bloc.persons = groups.personsAssociated;
-                            bloc.included = true;
-                            break;
-                        case "personsNotAssociated":
-                            bloc.persons = groups.personsNotAssociated;
-                            bloc.included = true;
-                            break;
-                    }
-                } else {
-                    switch (bloc.key) {
-                        case "persons":
-                            bloc.persons = this.persons;
-                            bloc.included = true;
-                            break;
-                    }
-                }
-                switch (bloc.key) {
-                    case "thirdparty":
-                        bloc.persons = this.thirdParties;
-                        break;
-                    case "users":
-                        bloc.persons = this.users;
-                        break;
-                }
-            }, groups);
-        },
-        splitPersonsInGroups() {
-            let personsAssociated = [];
-            let personsNotAssociated = this.persons;
-            let participations = this.getCourseParticipations();
-            this.persons.forEach((person) => {
-                participations.forEach((participation) => {
-                    if (person.id === participation.id) {
-                        //console.log(person.id);
-                        personsAssociated.push(person);
-                        personsNotAssociated = personsNotAssociated.filter(
-                            (p) => p !== person,
-                        );
-                    }
-                });
-            });
-            return {
-                personsAssociated: personsAssociated,
-                personsNotAssociated: personsNotAssociated,
-            };
-        },
-        getCourseParticipations() {
-            let participations = [];
-            this.accompanyingCourse.participations.forEach((participation) => {
-                if (!participation.endDate) {
-                    participations.push(participation.person);
-                }
-            });
-            return participations;
-        },
-        addNewPersons({ selected, modal }) {
-            console.log("@@@ CLICK button addNewPersons", selected);
-            selected.forEach((item) => {
-                this.$store.dispatch("addPersonsInvolved", item);
-            }, this);
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
-            this.setPersonsInBloc();
-        },
-        addSuggestedEntity(person) {
-            this.$store.dispatch("addPersonsInvolved", {
-                result: person,
-                type: "person",
-            });
-            this.setPersonsInBloc();
-        },
+  },
+  mounted() {
+    this.setPersonsInBloc();
+  },
+  methods: {
+    setPersonsInBloc() {
+      let groups;
+      if (this.accompanyingCourse) {
+        groups = this.splitPersonsInGroups();
+      }
+      this.personsBlocs.forEach((bloc) => {
+        if (this.accompanyingCourse) {
+          switch (bloc.key) {
+            case "personsAssociated":
+              bloc.persons = groups.personsAssociated;
+              bloc.included = true;
+              break;
+            case "personsNotAssociated":
+              bloc.persons = groups.personsNotAssociated;
+              bloc.included = true;
+              break;
+          }
+        } else {
+          switch (bloc.key) {
+            case "persons":
+              bloc.persons = this.persons;
+              bloc.included = true;
+              break;
+          }
+        }
+        switch (bloc.key) {
+          case "thirdparty":
+            bloc.persons = this.thirdParties;
+            break;
+          case "users":
+            bloc.persons = this.users;
+            break;
+        }
+      }, groups);
    },
+    splitPersonsInGroups() {
+      let personsAssociated = [];
+      let personsNotAssociated = this.persons;
+      let participations = this.getCourseParticipations();
+      this.persons.forEach((person) => {
+        participations.forEach((participation) => {
+          if (person.id === participation.id) {
+            //console.log(person.id);
+            personsAssociated.push(person);
+            personsNotAssociated = personsNotAssociated.filter(
+              (p) => p !== person,
+            );
+          }
+        });
+      });
+      return {
+        personsAssociated: personsAssociated,
+        personsNotAssociated: personsNotAssociated,
+      };
+    },
+    getCourseParticipations() {
+      let participations = [];
+      this.accompanyingCourse.participations.forEach((participation) => {
+        if (!participation.endDate) {
+          participations.push(participation.person);
+        }
+      });
+      return participations;
+    },
+    addNewPersons({ selected, modal }) {
+      console.log("@@@ CLICK button addNewPersons", selected);
+      selected.forEach((item) => {
+        this.$store.dispatch("addPersonsInvolved", item);
+      }, this);
+      this.$refs.addPersons.resetSearch(); // to cast child method
+      modal.showModal = false;
+      this.setPersonsInBloc();
+    },
+    addSuggestedEntity(person) {
+      this.$store.dispatch("addPersonsInvolved", {
+        result: person,
+        type: "person",
+      });
+      this.setPersonsInBloc();
+    },
+  },
 };
 </script>

--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
@@ -1,29 +1,29 @@
 <template>
-    <li>
-        <span :title="person.text" @click.prevent="$emit('remove', person)">
-            <span class="chill_denomination">
-                <person-text :person="person" :is-cut="true" />
-            </span>
-        </span>
-    </li>
+  <li>
+    <span :title="person.text" @click.prevent="$emit('remove', person)">
+      <span class="chill_denomination">
+        <person-text :person="person" :is-cut="true" />
+      </span>
+    </span>
+  </li>
 </template>

 <script>
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";

 export default {
-    name: "PersonBadge",
-    props: ["person"],
-    components: {
-        PersonText,
-    },
-    // computed: {
-    //    textCutted() {
-    //       let more = (this.person.text.length > 15) ?'…' : '';
-    //       return this.person.text.slice(0,15) + more;
-    //    }
-    // },
-    emits: ["remove"],
+  name: "PersonBadge",
+  props: ["person"],
+  components: {
+    PersonText,
+  },
+  // computed: {
+  //    textCutted() {
+  //       let more = (this.person.text.length > 15) ?'…' : '';
+  //       return this.person.text.slice(0,15) + more;
+  //    }
+  // },
+  emits: ["remove"],
 };
 </script>

--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
@@ -1,38 +1,38 @@
 <template>
-    <div class="item-bloc" :style="{ 'flex-basis': blocWidth }">
-        <div class="item-row">
-            <div class="item-col">
-                <h4>{{ $t(bloc.title) }}</h4>
-            </div>
-            <div class="item-col">
-                <ul class="list-suggest remove-items">
-                    <person-badge
-                        v-for="person in bloc.persons"
-                        :key="person.id"
-                        :person="person"
-                        @remove="removePerson"
-                    />
-                </ul>
-            </div>
-        </div>
+  <div class="item-bloc" :style="{ 'flex-basis': blocWidth }">
+    <div class="item-row">
+      <div class="item-col">
+        <h4>{{ $t(bloc.title) }}</h4>
+      </div>
+      <div class="item-col">
+        <ul class="list-suggest remove-items">
+          <person-badge
+            v-for="person in bloc.persons"
+            :key="person.id"
+            :person="person"
+            @remove="removePerson"
+          />
+        </ul>
+      </div>
    </div>
+  </div>
 </template>

 <script>
 import PersonBadge from "./PersonBadge.vue";
 export default {
-    name: "PersonsBloc",
-    components: {
-        PersonBadge,
-    },
-    props: ["bloc", "setPersonsInBloc", "blocWidth"],
-    methods: {
-        removePerson(item) {
-            console.log("@@ CLICK remove person: item", item);
-            this.$store.dispatch("removePersonInvolved", item);
-            this.setPersonsInBloc();
-        },
+  name: "PersonsBloc",
+  components: {
+    PersonBadge,
+  },
+  props: ["bloc", "setPersonsInBloc", "blocWidth"],
+  methods: {
+    removePerson(item) {
+      console.log("@@ CLICK remove person: item", item);
+      this.$store.dispatch("removePersonInvolved", item);
+      this.setPersonsInBloc();
    },
+  },
 };
 </script>

--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
@@ -1,32 +1,32 @@
 <template>
-    <teleport to="#location">
-        <div class="mb-3 row">
-            <label :class="locationClassList">
-                {{ trans(ACTIVITY_LOCATION) }}
-            </label>
-            <div class="col-sm-8">
-                <VueMultiselect
-                    name="selectLocation"
-                    id="selectLocation"
-                    label="name"
-                    track-by="id"
-                    open-direction="top"
-                    :multiple="false"
-                    :searchable="true"
-                    :placeholder="trans(ACTIVITY_CHOOSE_LOCATION)"
-                    :custom-label="customLabel"
-                    :select-label="trans(MULTISELECT_SELECT_LABEL)"
-                    :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
-                    :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
-                    :options="availableLocations"
-                    group-values="locations"
-                    group-label="locationGroup"
-                    v-model="location"
-                />
-                <new-location v-bind:available-locations="availableLocations" />
-            </div>
-        </div>
-    </teleport>
+  <teleport to="#location">
+    <div class="mb-3 row">
+      <label :class="locationClassList">
+        {{ trans(ACTIVITY_LOCATION) }}
+      </label>
+      <div class="col-sm-8">
+        <VueMultiselect
+          name="selectLocation"
+          id="selectLocation"
+          label="name"
+          track-by="id"
+          open-direction="top"
+          :multiple="false"
+          :searchable="true"
+          :placeholder="trans(ACTIVITY_CHOOSE_LOCATION)"
+          :custom-label="customLabel"
+          :select-label="trans(MULTISELECT_SELECT_LABEL)"
+          :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
+          :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
+          :options="availableLocations"
+          group-values="locations"
+          group-label="locationGroup"
+          v-model="location"
+        />
+        <new-location v-bind:available-locations="availableLocations" />
+      </div>
+    </div>
+  </teleport>
 </template>

 <script>
@@ -35,60 +35,60 @@ import VueMultiselect from "vue-multiselect";
 import NewLocation from "./Location/NewLocation.vue";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 import {
-    trans,
-    ACTIVITY_LOCATION,
-    ACTIVITY_CHOOSE_LOCATION,
-    MULTISELECT_SELECT_LABEL,
-    MULTISELECT_DESELECT_LABEL,
-    MULTISELECT_SELECTED_LABEL,
+  trans,
+  ACTIVITY_LOCATION,
+  ACTIVITY_CHOOSE_LOCATION,
+  MULTISELECT_SELECT_LABEL,
+  MULTISELECT_DESELECT_LABEL,
+  MULTISELECT_SELECTED_LABEL,
 } from "translator";

 export default {
-    name: "Location",
-    components: {
-        NewLocation,
-        VueMultiselect,
+  name: "Location",
+  components: {
+    NewLocation,
+    VueMultiselect,
+  },
+  setup() {
+    return {
+      trans,
+      ACTIVITY_LOCATION,
+      ACTIVITY_CHOOSE_LOCATION,
+      MULTISELECT_SELECT_LABEL,
+      MULTISELECT_DESELECT_LABEL,
+      MULTISELECT_SELECTED_LABEL,
+    };
+  },
+  data() {
+    return {
+      locationClassList: `col-form-label col-sm-4 ${document.querySelector("input#chill_activitybundle_activity_location").getAttribute("required") ? "required" : ""}`,
+    };
+  },
+  computed: {
+    ...mapState(["activity", "availableLocations"]),
+    ...mapGetters(["suggestedEntities"]),
+    location: {
+      get() {
+        return this.activity.location;
+      },
+      set(value) {
+        this.$store.dispatch("updateLocation", value);
+      },
    },
-    setup() {
-        return {
-            trans,
-            ACTIVITY_LOCATION,
-            ACTIVITY_CHOOSE_LOCATION,
-            MULTISELECT_SELECT_LABEL,
-            MULTISELECT_DESELECT_LABEL,
-            MULTISELECT_SELECTED_LABEL,
-        };
+  },
+  methods: {
+    labelAccompanyingCourseLocation(value) {
+      return `${value.address.text} (${localizeString(value.locationType.title)})`;
    },
-    data() {
-        return {
-            locationClassList: `col-form-label col-sm-4 ${document.querySelector("input#chill_activitybundle_activity_location").getAttribute("required") ? "required" : ""}`,
-        };
-    },
-    computed: {
-        ...mapState(["activity", "availableLocations"]),
-        ...mapGetters(["suggestedEntities"]),
-        location: {
-            get() {
-                return this.activity.location;
-            },
-            set(value) {
-                this.$store.dispatch("updateLocation", value);
-            },
-        },
-    },
-    methods: {
-        labelAccompanyingCourseLocation(value) {
-            return `${value.address.text} (${localizeString(value.locationType.title)})`;
-        },
-        customLabel(value) {
-            return value.locationType
-                ? value.name
-                    ? value.name === "__AccompanyingCourseLocation__"
-                        ? this.labelAccompanyingCourseLocation(value)
-                        : `${value.name} (${localizeString(value.locationType.title)})`
-                    : localizeString(value.locationType.title)
-                : "";
-        },
+    customLabel(value) {
+      return value.locationType
+        ? value.name
+          ? value.name === "__AccompanyingCourseLocation__"
+            ? this.labelAccompanyingCourseLocation(value)
+            : `${value.name} (${localizeString(value.locationType.title)})`
+          : localizeString(value.locationType.title)
+        : "";
    },
+  },
 };
 </script>
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
@@ -1,123 +1,114 @@
 <template>
-    <div>
-        <ul class="record_actions">
-            <li>
-                <a class="btn btn-sm btn-create" @click="openModal">
-                    {{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}
-                </a>
-            </li>
-        </ul>
+  <div>
+    <ul class="record_actions">
+      <li>
+        <a class="btn btn-sm btn-create" @click="openModal">
+          {{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}
+        </a>
+      </li>
+    </ul>

-        <teleport to="body">
-            <modal
-                v-if="modal.showModal"
-                :modalDialogClass="modal.modalDialogClass"
-                @close="modal.showModal = false"
-            >
-                <template #header>
-                    <h3 class="modal-title">
-                        {{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}
-                    </h3>
-                </template>
-                <template #body>
-                    <form>
-                        <div class="alert alert-warning" v-if="errors.length">
-                            <ul>
-                                <li v-for="(e, i) in errors" :key="i">
-                                    {{ e }}
-                                </li>
-                            </ul>
-                        </div>
+    <teleport to="body">
+      <modal
+        v-if="modal.showModal"
+        :modalDialogClass="modal.modalDialogClass"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <h3 class="modal-title">
+            {{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}
+          </h3>
+        </template>
+        <template #body>
+          <form>
+            <div class="alert alert-warning" v-if="errors.length">
+              <ul>
+                <li v-for="(e, i) in errors" :key="i">
+                  {{ e }}
+                </li>
+              </ul>
+            </div>

-                        <div class="form-floating mb-3">
-                            <select
-                                class="form-select form-select-lg"
-                                id="type"
-                                required
-                                v-model="selectType"
-                            >
-                                <option selected disabled value="">
-                                    {{ trans(ACTIVITY_CHOOSE_LOCATION_TYPE) }}
-                                </option>
-                                <option
-                                    v-for="t in locationTypes"
-                                    :value="t"
-                                    :key="t.id"
-                                >
-                                    {{ localizeString(t.title) }}
-                                </option>
-                            </select>
-                            <label>{{
-                                trans(ACTIVITY_LOCATION_FIELDS_TYPE)
-                            }}</label>
-                        </div>
+            <div class="form-floating mb-3">
+              <select
+                class="form-select form-select-lg"
+                id="type"
+                required
+                v-model="selectType"
+              >
+                <option selected disabled value="">
+                  {{ trans(ACTIVITY_CHOOSE_LOCATION_TYPE) }}
+                </option>
+                <option v-for="t in locationTypes" :value="t" :key="t.id">
+                  {{ localizeString(t.title) }}
+                </option>
+              </select>
+              <label>{{ trans(ACTIVITY_LOCATION_FIELDS_TYPE) }}</label>
+            </div>

-                        <div class="form-floating mb-3">
-                            <input
-                                class="form-control form-control-lg"
-                                id="name"
-                                v-model="inputName"
-                                placeholder
-                            />
-                            <label for="name">{{
-                                trans(ACTIVITY_LOCATION_FIELDS_NAME)
-                            }}</label>
-                        </div>
+            <div class="form-floating mb-3">
+              <input
+                class="form-control form-control-lg"
+                id="name"
+                v-model="inputName"
+                placeholder
+              />
+              <label for="name">{{
+                trans(ACTIVITY_LOCATION_FIELDS_NAME)
+              }}</label>
+            </div>

-                        <add-address
-                            :context="addAddress.context"
-                            :options="addAddress.options"
-                            :addressChangedCallback="submitNewAddress"
-                            v-if="showAddAddress"
-                            ref="addAddress"
-                        />
+            <add-address
+              :context="addAddress.context"
+              :options="addAddress.options"
+              :addressChangedCallback="submitNewAddress"
+              v-if="showAddAddress"
+              ref="addAddress"
+            />

-                        <div class="form-floating mb-3" v-if="showContactData">
-                            <input
-                                class="form-control form-control-lg"
-                                id="phonenumber1"
-                                v-model="inputPhonenumber1"
-                                placeholder
-                            />
-                            <label for="phonenumber1">{{
-                                trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER1)
-                            }}</label>
-                        </div>
-                        <div class="form-floating mb-3" v-if="hasPhonenumber1">
-                            <input
-                                class="form-control form-control-lg"
-                                id="phonenumber2"
-                                v-model="inputPhonenumber2"
-                                placeholder
-                            />
-                            <label for="phonenumber2">{{
-                                trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER2)
-                            }}</label>
-                        </div>
-                        <div class="form-floating mb-3" v-if="showContactData">
-                            <input
-                                class="form-control form-control-lg"
-                                id="email"
-                                v-model="inputEmail"
-                                placeholder
-                            />
-                            <label for="email">{{
-                                trans(ACTIVITY_LOCATION_FIELDS_EMAIL)
-                            }}</label>
-                        </div>
-                    </form>
-                </template>
-                <template #footer>
-                    <button
-                        class="btn btn-save"
-                        @click.prevent="saveNewLocation"
-                    >
-                        {{ trans(SAVE) }}
-                    </button>
-                </template>
-            </modal>
-        </teleport>
-    </div>
+            <div class="form-floating mb-3" v-if="showContactData">
+              <input
+                class="form-control form-control-lg"
+                id="phonenumber1"
+                v-model="inputPhonenumber1"
+                placeholder
+              />
+              <label for="phonenumber1">{{
+                trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER1)
+              }}</label>
+            </div>
+            <div class="form-floating mb-3" v-if="hasPhonenumber1">
+              <input
+                class="form-control form-control-lg"
+                id="phonenumber2"
+                v-model="inputPhonenumber2"
+                placeholder
+              />
+              <label for="phonenumber2">{{
+                trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER2)
+              }}</label>
+            </div>
+            <div class="form-floating mb-3" v-if="showContactData">
+              <input
+                class="form-control form-control-lg"
+                id="email"
+                v-model="inputEmail"
+                placeholder
+              />
+              <label for="email">{{
+                trans(ACTIVITY_LOCATION_FIELDS_EMAIL)
+              }}</label>
+            </div>
+          </form>
+        </template>
+        <template #footer>
+          <button class="btn btn-save" @click.prevent="saveNewLocation">
+            {{ trans(SAVE) }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+  </div>
 </template>

 <script>
@@ -128,237 +119,236 @@ import { getLocationTypes } from "../../api";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 import {
-    SAVE,
-    ACTIVITY_LOCATION_FIELDS_EMAIL,
-    ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
-    ACTIVITY_LOCATION_FIELDS_PHONENUMBER2,
-    ACTIVITY_LOCATION_FIELDS_NAME,
-    ACTIVITY_LOCATION_FIELDS_TYPE,
-    ACTIVITY_CHOOSE_LOCATION_TYPE,
-    ACTIVITY_CREATE_NEW_LOCATION,
-    trans,
+  SAVE,
+  ACTIVITY_LOCATION_FIELDS_EMAIL,
+  ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
+  ACTIVITY_LOCATION_FIELDS_PHONENUMBER2,
+  ACTIVITY_LOCATION_FIELDS_NAME,
+  ACTIVITY_LOCATION_FIELDS_TYPE,
+  ACTIVITY_CHOOSE_LOCATION_TYPE,
+  ACTIVITY_CREATE_NEW_LOCATION,
+  trans,
 } from "translator";

 export default {
-    name: "NewLocation",
-    components: {
-        Modal,
-        AddAddress,
+  name: "NewLocation",
+  components: {
+    Modal,
+    AddAddress,
+  },
+  setup() {
+    return {
+      trans,
+      SAVE,
+      ACTIVITY_LOCATION_FIELDS_EMAIL,
+      ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
+      ACTIVITY_LOCATION_FIELDS_PHONENUMBER2,
+      ACTIVITY_LOCATION_FIELDS_NAME,
+      ACTIVITY_LOCATION_FIELDS_TYPE,
+      ACTIVITY_CHOOSE_LOCATION_TYPE,
+      ACTIVITY_CREATE_NEW_LOCATION,
+    };
+  },
+  props: ["availableLocations"],
+  data() {
+    return {
+      errors: [],
+      selected: {
+        type: null,
+        name: null,
+        addressId: null,
+        phonenumber1: null,
+        phonenumber2: null,
+        email: null,
+      },
+      locationTypes: [],
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-xl",
+      },
+      addAddress: {
+        options: {
+          button: {
+            text: {
+              create: "activity.create_address",
+              edit: "activity.edit_address",
+            },
+            size: "btn-sm",
+          },
+          title: {
+            create: "activity.create_address",
+            edit: "activity.edit_address",
+          },
+        },
+        context: {
+          target: {
+            //name, id
+          },
+          edit: false,
+          addressId: null,
+          defaults: window.addaddress,
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState(["activity"]),
+    selectType: {
+      get() {
+        return this.selected.type;
+      },
+      set(value) {
+        this.selected.type = value;
+      },
    },
-    setup() {
-        return {
-            trans,
-            SAVE,
-            ACTIVITY_LOCATION_FIELDS_EMAIL,
-            ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
-            ACTIVITY_LOCATION_FIELDS_PHONENUMBER2,
-            ACTIVITY_LOCATION_FIELDS_NAME,
-            ACTIVITY_LOCATION_FIELDS_TYPE,
-            ACTIVITY_CHOOSE_LOCATION_TYPE,
-            ACTIVITY_CREATE_NEW_LOCATION,
+    inputName: {
+      get() {
+        return this.selected.name;
+      },
+      set(value) {
+        this.selected.name = value;
+      },
+    },
+    inputEmail: {
+      get() {
+        return this.selected.email;
+      },
+      set(value) {
+        this.selected.email = value;
+      },
+    },
+    inputPhonenumber1: {
+      get() {
+        return this.selected.phonenumber1;
+      },
+      set(value) {
+        this.selected.phonenumber1 = value;
+      },
+    },
+    inputPhonenumber2: {
+      get() {
+        return this.selected.phonenumber2;
+      },
+      set(value) {
+        this.selected.phonenumber2 = value;
+      },
+    },
+    hasPhonenumber1() {
+      return (
+        this.selected.phonenumber1 !== null && this.selected.phonenumber1 !== ""
+      );
+    },
+    showAddAddress() {
+      let cond = false;
+      if (this.selected.type) {
+        if (this.selected.type.addressRequired !== "never") {
+          cond = true;
+        }
+      }
+      return cond;
+    },
+    showContactData() {
+      let cond = false;
+      if (this.selected.type) {
+        if (this.selected.type.contactData !== "never") {
+          cond = true;
+        }
+      }
+      return cond;
+    },
+  },
+  mounted() {
+    this.getLocationTypesList();
+  },
+  methods: {
+    localizeString,
+    checkForm() {
+      let cond = true;
+      this.errors = [];
+      if (!this.selected.type) {
+        this.errors.push("Type de localisation requis");
+        cond = false;
+      } else {
+        if (
+          this.selected.type.addressRequired === "required" &&
+          !this.selected.addressId
+        ) {
+          this.errors.push("Adresse requise");
+          cond = false;
+        }
+        if (
+          this.selected.type.contactData === "required" &&
+          !this.selected.phonenumber1
+        ) {
+          this.errors.push("Numéro de téléphone requis");
+          cond = false;
+        }
+        if (
+          this.selected.type.contactData === "required" &&
+          !this.selected.email
+        ) {
+          this.errors.push("Adresse email requise");
+          cond = false;
+        }
+      }
+      return cond;
+    },
+    getLocationTypesList() {
+      getLocationTypes().then((results) => {
+        this.locationTypes = results.filter(
+          (t) => t.availableForUsers === true,
+        );
+      });
+    },
+    openModal() {
+      this.modal.showModal = true;
+    },
+    saveNewLocation() {
+      if (this.checkForm()) {
+        let body = {
+          type: "location",
+          name: this.selected.name,
+          locationType: {
+            id: this.selected.type.id,
+            type: "location-type",
+          },
+          phonenumber1: this.selected.phonenumber1,
+          phonenumber2: this.selected.phonenumber2,
+          email: this.selected.email,
        };
-    },
-    props: ["availableLocations"],
-    data() {
-        return {
-            errors: [],
-            selected: {
-                type: null,
-                name: null,
-                addressId: null,
-                phonenumber1: null,
-                phonenumber2: null,
-                email: null,
+        if (this.selected.addressId) {
+          body = Object.assign(body, {
+            address: {
+              id: this.selected.addressId,
            },
-            locationTypes: [],
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-scrollable modal-xl",
-            },
-            addAddress: {
-                options: {
-                    button: {
-                        text: {
-                            create: "activity.create_address",
-                            edit: "activity.edit_address",
-                        },
-                        size: "btn-sm",
-                    },
-                    title: {
-                        create: "activity.create_address",
-                        edit: "activity.edit_address",
-                    },
-                },
-                context: {
-                    target: {
-                        //name, id
-                    },
-                    edit: false,
-                    addressId: null,
-                    defaults: window.addaddress,
-                },
-            },
-        };
-    },
-    computed: {
-        ...mapState(["activity"]),
-        selectType: {
-            get() {
-                return this.selected.type;
-            },
-            set(value) {
-                this.selected.type = value;
-            },
-        },
-        inputName: {
-            get() {
-                return this.selected.name;
-            },
-            set(value) {
-                this.selected.name = value;
-            },
-        },
-        inputEmail: {
-            get() {
-                return this.selected.email;
-            },
-            set(value) {
-                this.selected.email = value;
-            },
-        },
-        inputPhonenumber1: {
-            get() {
-                return this.selected.phonenumber1;
-            },
-            set(value) {
-                this.selected.phonenumber1 = value;
-            },
-        },
-        inputPhonenumber2: {
-            get() {
-                return this.selected.phonenumber2;
-            },
-            set(value) {
-                this.selected.phonenumber2 = value;
-            },
-        },
-        hasPhonenumber1() {
-            return (
-                this.selected.phonenumber1 !== null &&
-                this.selected.phonenumber1 !== ""
-            );
-        },
-        showAddAddress() {
-            let cond = false;
-            if (this.selected.type) {
-                if (this.selected.type.addressRequired !== "never") {
-                    cond = true;
-                }
-            }
-            return cond;
-        },
-        showContactData() {
-            let cond = false;
-            if (this.selected.type) {
-                if (this.selected.type.contactData !== "never") {
-                    cond = true;
-                }
-            }
-            return cond;
-        },
-    },
-    mounted() {
-        this.getLocationTypesList();
-    },
-    methods: {
-        localizeString,
-        checkForm() {
-            let cond = true;
-            this.errors = [];
-            if (!this.selected.type) {
-                this.errors.push("Type de localisation requis");
-                cond = false;
-            } else {
-                if (
-                    this.selected.type.addressRequired === "required" &&
-                    !this.selected.addressId
-                ) {
-                    this.errors.push("Adresse requise");
-                    cond = false;
-                }
-                if (
-                    this.selected.type.contactData === "required" &&
-                    !this.selected.phonenumber1
-                ) {
-                    this.errors.push("Numéro de téléphone requis");
-                    cond = false;
-                }
-                if (
-                    this.selected.type.contactData === "required" &&
-                    !this.selected.email
-                ) {
-                    this.errors.push("Adresse email requise");
-                    cond = false;
-                }
-            }
-            return cond;
-        },
-        getLocationTypesList() {
-            getLocationTypes().then((results) => {
-                this.locationTypes = results.filter(
-                    (t) => t.availableForUsers === true,
-                );
-            });
-        },
-        openModal() {
-            this.modal.showModal = true;
-        },
-        saveNewLocation() {
-            if (this.checkForm()) {
-                let body = {
-                    type: "location",
-                    name: this.selected.name,
-                    locationType: {
-                        id: this.selected.type.id,
-                        type: "location-type",
-                    },
-                    phonenumber1: this.selected.phonenumber1,
-                    phonenumber2: this.selected.phonenumber2,
-                    email: this.selected.email,
-                };
-                if (this.selected.addressId) {
-                    body = Object.assign(body, {
-                        address: {
-                            id: this.selected.addressId,
-                        },
-                    });
-                }
+          });
+        }

-                makeFetch("POST", "/api/1.0/main/location.json", body)
-                    .then((response) => {
-                        this.$store.dispatch("addAvailableLocationGroup", {
-                            locationGroup: "Localisations nouvellement créées",
-                            locations: [response],
-                        });
-                        this.$store.dispatch("updateLocation", response);
-                        this.modal.showModal = false;
-                    })
-                    .catch((error) => {
-                        if (error.name === "ValidationException") {
-                            for (let v of error.violations) {
-                                this.errors.push(v);
-                            }
-                        } else {
-                            this.errors.push("An error occurred");
-                        }
-                    });
+        makeFetch("POST", "/api/1.0/main/location.json", body)
+          .then((response) => {
+            this.$store.dispatch("addAvailableLocationGroup", {
+              locationGroup: "Localisations nouvellement créées",
+              locations: [response],
+            });
+            this.$store.dispatch("updateLocation", response);
+            this.modal.showModal = false;
+          })
+          .catch((error) => {
+            if (error.name === "ValidationException") {
+              for (let v of error.violations) {
+                this.errors.push(v);
+              }
+            } else {
+              this.errors.push("An error occurred");
            }
-        },
-        submitNewAddress(payload) {
-            this.selected.addressId = payload.addressId;
-            this.addAddress.context.addressId = payload.addressId;
-            this.addAddress.context.edit = true;
-        },
+          });
+      }
    },
+    submitNewAddress(payload) {
+      this.selected.addressId = payload.addressId;
+      this.addAddress.context.addressId = payload.addressId;
+      this.addAddress.context.edit = true;
+    },
+  },
 };
 </script>
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -1,103 +1,98 @@
 <template>
-    <teleport to="#social-issues-acc">
-        <div class="mb-3 row">
-            <div class="col-4">
-                <label :class="socialIssuesClassList">{{
-                    trans(ACTIVITY_SOCIAL_ISSUES)
-                }}</label>
-            </div>
-            <div class="col-8">
-                <check-social-issue
-                    v-for="issue in socialIssuesList"
-                    :key="issue.id"
-                    :issue="issue"
-                    :selection="socialIssuesSelected"
-                    @updateSelected="updateIssuesSelected"
-                >
-                </check-social-issue>
+  <teleport to="#social-issues-acc">
+    <div class="mb-3 row">
+      <div class="col-4">
+        <label :class="socialIssuesClassList">{{
+          trans(ACTIVITY_SOCIAL_ISSUES)
+        }}</label>
+      </div>
+      <div class="col-8">
+        <check-social-issue
+          v-for="issue in socialIssuesList"
+          :key="issue.id"
+          :issue="issue"
+          :selection="socialIssuesSelected"
+          @updateSelected="updateIssuesSelected"
+        >
+        </check-social-issue>

-                <div class="my-3">
-                    <VueMultiselect
-                        name="otherIssues"
-                        label="text"
-                        track-by="id"
-                        open-direction="bottom"
-                        :close-on-select="true"
-                        :preserve-search="false"
-                        :reset-after="true"
-                        :hide-selected="true"
-                        :taggable="false"
-                        :multiple="false"
-                        :searchable="true"
-                        :allow-empty="true"
-                        :show-labels="false"
-                        :loading="issueIsLoading"
-                        :placeholder="trans(ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE)"
-                        :options="socialIssuesOther"
-                        @select="addIssueInList"
-                    >
-                    </VueMultiselect>
-                </div>
-            </div>
+        <div class="my-3">
+          <VueMultiselect
+            name="otherIssues"
+            label="text"
+            track-by="id"
+            open-direction="bottom"
+            :close-on-select="true"
+            :preserve-search="false"
+            :reset-after="true"
+            :hide-selected="true"
+            :taggable="false"
+            :multiple="false"
+            :searchable="true"
+            :allow-empty="true"
+            :show-labels="false"
+            :loading="issueIsLoading"
+            :placeholder="trans(ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE)"
+            :options="socialIssuesOther"
+            @select="addIssueInList"
+          >
+          </VueMultiselect>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-3 row">
+      <div class="col-4">
+        <label :class="socialActionsClassList">{{
+          trans(ACTIVITY_SOCIAL_ACTIONS)
+        }}</label>
+      </div>
+      <div class="col-8">
+        <div v-if="actionIsLoading === true">
+          <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
        </div>

-        <div class="mb-3 row">
-            <div class="col-4">
-                <label :class="socialActionsClassList">{{
-                    trans(ACTIVITY_SOCIAL_ACTIONS)
-                }}</label>
-            </div>
-            <div class="col-8">
-                <div v-if="actionIsLoading === true">
-                    <i
-                        class="chill-green fa fa-circle-o-notch fa-spin fa-lg"
-                    ></i>
-                </div>
+        <span
+          v-else-if="socialIssuesSelected.length === 0"
+          class="inline-choice chill-no-data-statement mt-3"
+        >
+          {{ trans(ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE) }}
+        </span>

-                <span
-                    v-else-if="socialIssuesSelected.length === 0"
-                    class="inline-choice chill-no-data-statement mt-3"
-                >
-                    {{ trans(ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE) }}
-                </span>
+        <template
+          v-else-if="
+            socialActionsList.length > 0 &&
+            (socialIssuesSelected.length || socialActionsSelected.length)
+          "
+        >
+          <div
+            id="actionsList"
+            v-for="group in socialActionsList"
+            :key="group.issue"
+          >
+            <span class="badge bg-chill-l-gray text-dark">{{
+              group.issue
+            }}</span>
+            <check-social-action
+              v-for="action in group.actions"
+              :key="action.id"
+              :action="action"
+              :selection="socialActionsSelected"
+              @updateSelected="updateActionsSelected"
+            >
+            </check-social-action>
+          </div>
+        </template>

-                <template
-                    v-else-if="
-                        socialActionsList.length > 0 &&
-                        (socialIssuesSelected.length ||
-                            socialActionsSelected.length)
-                    "
-                >
-                    <div
-                        id="actionsList"
-                        v-for="group in socialActionsList"
-                        :key="group.issue"
-                    >
-                        <span class="badge bg-chill-l-gray text-dark">{{
-                            group.issue
-                        }}</span>
-                        <check-social-action
-                            v-for="action in group.actions"
-                            :key="action.id"
-                            :action="action"
-                            :selection="socialActionsSelected"
-                            @updateSelected="updateActionsSelected"
-                        >
-                        </check-social-action>
-                    </div>
-                </template>
-
-                <span
-                    v-else-if="
-                        actionAreLoaded && socialActionsList.length === 0
-                    "
-                    class="inline-choice chill-no-data-statement mt-3"
-                >
-                    {{ trans(ACTIVITY_SOCIAL_ACTION_LIST_EMPTY) }}
-                </span>
-            </div>
-        </div>
-    </teleport>
+        <span
+          v-else-if="actionAreLoaded && socialActionsList.length === 0"
+          class="inline-choice chill-no-data-statement mt-3"
+        >
+          {{ trans(ACTIVITY_SOCIAL_ACTION_LIST_EMPTY) }}
+        </span>
+      </div>
+    </div>
+  </teleport>
 </template>

 <script>
@@ -106,154 +101,153 @@ import CheckSocialIssue from "./SocialIssuesAcc/CheckSocialIssue.vue";
 import CheckSocialAction from "./SocialIssuesAcc/CheckSocialAction.vue";
 import { getSocialIssues, getSocialActionByIssue } from "../api.js";
 import {
-    ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
-    ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
-    ACTIVITY_SOCIAL_ACTIONS,
-    ACTIVITY_SOCIAL_ISSUES,
-    ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
-    trans,
+  ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
+  ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
+  ACTIVITY_SOCIAL_ACTIONS,
+  ACTIVITY_SOCIAL_ISSUES,
+  ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
+  trans,
 } from "translator";

 export default {
-    name: "SocialIssuesAcc",
-    components: {
-        CheckSocialIssue,
-        CheckSocialAction,
-        VueMultiselect,
+  name: "SocialIssuesAcc",
+  components: {
+    CheckSocialIssue,
+    CheckSocialAction,
+    VueMultiselect,
+  },
+  setup() {
+    return {
+      trans,
+      ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
+      ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
+      ACTIVITY_SOCIAL_ACTIONS,
+      ACTIVITY_SOCIAL_ISSUES,
+      ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
+    };
+  },
+  data() {
+    return {
+      issueIsLoading: false,
+      actionIsLoading: false,
+      actionAreLoaded: false,
+      socialIssuesClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialIssues").getAttribute("required") ? "required" : ""}`,
+      socialActionsClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialActions").getAttribute("required") ? "required" : ""}`,
+    };
+  },
+  computed: {
+    socialIssuesList() {
+      return this.$store.state.activity.accompanyingPeriod.socialIssues;
    },
-    setup() {
-        return {
-            trans,
-            ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
-            ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
-            ACTIVITY_SOCIAL_ACTIONS,
-            ACTIVITY_SOCIAL_ISSUES,
-            ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
-        };
+    socialIssuesSelected() {
+      return this.$store.state.activity.socialIssues;
    },
-    data() {
-        return {
-            issueIsLoading: false,
-            actionIsLoading: false,
-            actionAreLoaded: false,
-            socialIssuesClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialIssues").getAttribute("required") ? "required" : ""}`,
-            socialActionsClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialActions").getAttribute("required") ? "required" : ""}`,
-        };
+    socialIssuesOther() {
+      return this.$store.state.socialIssuesOther;
    },
-    computed: {
-        socialIssuesList() {
-            return this.$store.state.activity.accompanyingPeriod.socialIssues;
-        },
-        socialIssuesSelected() {
-            return this.$store.state.activity.socialIssues;
-        },
-        socialIssuesOther() {
-            return this.$store.state.socialIssuesOther;
-        },
-        socialActionsList() {
-            return this.$store.getters.socialActionsListSorted;
-        },
-        socialActionsSelected() {
-            return this.$store.state.activity.socialActions;
-        },
+    socialActionsList() {
+      return this.$store.getters.socialActionsListSorted;
    },
-    mounted() {
-        /* Load other issues in multiselect */
-        this.issueIsLoading = true;
-        this.actionAreLoaded = false;
-
-        getSocialIssues().then((response) => {
-            /* Add issues to the store */
-            this.$store.commit("updateIssuesOther", response);
-
-            /* Add in list the issues already associated (if not yet listed) */
-            this.socialIssuesSelected.forEach((issue) => {
-                if (
-                    this.socialIssuesList.filter((i) => i.id === issue.id)
-                        .length !== 1
-                ) {
-                    this.$store.commit("addIssueInList", issue);
-                }
-            });
-
-            /* Remove from multiselect the issues that are not yet in the checkbox list */
-            this.socialIssuesList.forEach((issue) => {
-                this.$store.commit("removeIssueInOther", issue);
-            });
-
-            /* Filter issues */
-            this.$store.commit("filterList", "issues");
-
-            /* Add in list the actions already associated (if not yet listed) */
-            this.socialActionsSelected.forEach((action) => {
-                this.$store.commit("addActionInList", action);
-            });
-
-            /* Filter actions */
-            this.$store.commit("filterList", "actions");
-
-            this.issueIsLoading = false;
-            this.actionAreLoaded = true;
-            this.updateActionsList();
-        });
+    socialActionsSelected() {
+      return this.$store.state.activity.socialActions;
    },
-    methods: {
-        /* When choosing an issue in multiselect, add it in checkboxes (as selected),
+  },
+  mounted() {
+    /* Load other issues in multiselect */
+    this.issueIsLoading = true;
+    this.actionAreLoaded = false;
+
+    getSocialIssues().then((response) => {
+      /* Add issues to the store */
+      this.$store.commit("updateIssuesOther", response);
+
+      /* Add in list the issues already associated (if not yet listed) */
+      this.socialIssuesSelected.forEach((issue) => {
+        if (
+          this.socialIssuesList.filter((i) => i.id === issue.id).length !== 1
+        ) {
+          this.$store.commit("addIssueInList", issue);
+        }
+      });
+
+      /* Remove from multiselect the issues that are not yet in the checkbox list */
+      this.socialIssuesList.forEach((issue) => {
+        this.$store.commit("removeIssueInOther", issue);
+      });
+
+      /* Filter issues */
+      this.$store.commit("filterList", "issues");
+
+      /* Add in list the actions already associated (if not yet listed) */
+      this.socialActionsSelected.forEach((action) => {
+        this.$store.commit("addActionInList", action);
+      });
+
+      /* Filter actions */
+      this.$store.commit("filterList", "actions");
+
+      this.issueIsLoading = false;
+      this.actionAreLoaded = true;
+      this.updateActionsList();
+    });
+  },
+  methods: {
+    /* When choosing an issue in multiselect, add it in checkboxes (as selected),
         remove it from multiselect, and add socialActions concerned
      */
-        addIssueInList(value) {
-            //console.log('addIssueInList', value);
-            this.$store.commit("addIssueInList", value);
-            this.$store.commit("removeIssueInOther", value);
-            this.$store.dispatch("addIssueSelected", value);
-            this.updateActionsList();
-        },
-        /* Update value for selected issues checkboxes
-         */
-        updateIssuesSelected(issues) {
-            //console.log('updateIssuesSelected', issues);
-            this.$store.dispatch("updateIssuesSelected", issues);
-            this.updateActionsList();
-        },
-        /* Update value for selected actions checkboxes
-         */
-        updateActionsSelected(actions) {
-            //console.log('updateActionsSelected', actions);
-            this.$store.dispatch("updateActionsSelected", actions);
-        },
-        /* Add socialActions concerned: after reset, loop on each issue selected
+    addIssueInList(value) {
+      //console.log('addIssueInList', value);
+      this.$store.commit("addIssueInList", value);
+      this.$store.commit("removeIssueInOther", value);
+      this.$store.dispatch("addIssueSelected", value);
+      this.updateActionsList();
+    },
+    /* Update value for selected issues checkboxes
+     */
+    updateIssuesSelected(issues) {
+      //console.log('updateIssuesSelected', issues);
+      this.$store.dispatch("updateIssuesSelected", issues);
+      this.updateActionsList();
+    },
+    /* Update value for selected actions checkboxes
+     */
+    updateActionsSelected(actions) {
+      //console.log('updateActionsSelected', actions);
+      this.$store.dispatch("updateActionsSelected", actions);
+    },
+    /* Add socialActions concerned: after reset, loop on each issue selected
         to get social actions concerned
      */
-        updateActionsList() {
-            this.resetActionsList();
-            this.socialIssuesSelected.forEach((item) => {
-                this.actionIsLoading = true;
-                getSocialActionByIssue(item.id).then(
-                    (actions) =>
-                        new Promise((resolve) => {
-                            actions.results.forEach((action) => {
-                                this.$store.commit("addActionInList", action);
-                            }, this);
+    updateActionsList() {
+      this.resetActionsList();
+      this.socialIssuesSelected.forEach((item) => {
+        this.actionIsLoading = true;
+        getSocialActionByIssue(item.id).then(
+          (actions) =>
+            new Promise((resolve) => {
+              actions.results.forEach((action) => {
+                this.$store.commit("addActionInList", action);
+              }, this);

-                            this.$store.commit("filterList", "actions");
+              this.$store.commit("filterList", "actions");

-                            this.actionIsLoading = false;
-                            this.actionAreLoaded = true;
-                            resolve();
-                        }),
-                );
-            }, this);
-        },
-        /* Reset socialActions List: flush list and restore selected actions
-         */
-        resetActionsList() {
-            this.$store.commit("resetActionsList");
-            this.actionAreLoaded = false;
-            this.socialActionsSelected.forEach((item) => {
-                this.$store.commit("addActionInList", item);
-            }, this);
-        },
+              this.actionIsLoading = false;
+              this.actionAreLoaded = true;
+              resolve();
+            }),
+        );
+      }, this);
    },
+    /* Reset socialActions List: flush list and restore selected actions
+     */
+    resetActionsList() {
+      this.$store.commit("resetActionsList");
+      this.actionAreLoaded = false;
+      this.socialActionsSelected.forEach((item) => {
+        this.$store.commit("addActionInList", item);
+      }, this);
+    },
+  },
 };
 </script>

@@ -263,18 +257,18 @@ export default {
@import "ChillMainAssets/chill/scss/chill_variables";

 span.multiselect__single {
-    display: none !important;
+  display: none !important;
 }

 #actionsList {
-    border-radius: 0.5rem;
-    padding: 1rem;
-    margin: 0.5rem;
-    background-color: whitesmoke;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 0.5rem;
+  background-color: whitesmoke;
 }

 span.badge {
-    margin-bottom: 0.5rem;
-    @include badge_social($social-issue-color);
+  margin-bottom: 0.5rem;
+  @include badge_social($social-issue-color);
 }
 </style>
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
@@ -1,38 +1,38 @@
 <template>
-    <span class="inline-choice">
-        <div class="form-check">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                v-model="selected"
-                name="action"
-                :id="action.id"
-                :value="action"
-            />
-            <label class="form-check-label" :for="action.id">
-                <span class="badge bg-light text-dark" :title="action.text">{{
-                    action.text
-                }}</span>
-            </label>
-        </div>
-    </span>
+  <span class="inline-choice">
+    <div class="form-check">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        v-model="selected"
+        name="action"
+        :id="action.id"
+        :value="action"
+      />
+      <label class="form-check-label" :for="action.id">
+        <span class="badge bg-light text-dark" :title="action.text">{{
+          action.text
+        }}</span>
+      </label>
+    </div>
+  </span>
 </template>

 <script>
 export default {
-    name: "CheckSocialAction",
-    props: ["action", "selection"],
-    emits: ["updateSelected"],
-    computed: {
-        selected: {
-            set(value) {
-                this.$emit("updateSelected", value);
-            },
-            get() {
-                return this.selection;
-            },
-        },
+  name: "CheckSocialAction",
+  props: ["action", "selection"],
+  emits: ["updateSelected"],
+  computed: {
+    selected: {
+      set(value) {
+        this.$emit("updateSelected", value);
+      },
+      get() {
+        return this.selection;
+      },
    },
+  },
 };
 </script>

@@ -41,13 +41,13 @@ export default {
@import "ChillPersonAssets/chill/scss/mixins";
@import "ChillMainAssets/chill/scss/chill_variables";
 span.badge {
-    @include badge_social($social-action-color);
-    font-size: 95%;
-    margin-bottom: 5px;
-    margin-right: 1em;
-    max-width: 100%; /* Adjust as needed */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  @include badge_social($social-action-color);
+  font-size: 95%;
+  margin-bottom: 5px;
+  margin-right: 1em;
+  max-width: 100%; /* Adjust as needed */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
@@ -1,38 +1,36 @@
 <template>
-    <span class="inline-choice">
-        <div class="form-check">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                v-model="selected"
-                name="issue"
-                :id="issue.id"
-                :value="issue"
-            />
-            <label class="form-check-label" :for="issue.id">
-                <span class="badge bg-chill-l-gray text-dark">{{
-                    issue.text
-                }}</span>
-            </label>
-        </div>
-    </span>
+  <span class="inline-choice">
+    <div class="form-check">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        v-model="selected"
+        name="issue"
+        :id="issue.id"
+        :value="issue"
+      />
+      <label class="form-check-label" :for="issue.id">
+        <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
+      </label>
+    </div>
+  </span>
 </template>

 <script>
 export default {
-    name: "CheckSocialIssue",
-    props: ["issue", "selection"],
-    emits: ["updateSelected"],
-    computed: {
-        selected: {
-            set(value) {
-                this.$emit("updateSelected", value);
-            },
-            get() {
-                return this.selection;
-            },
-        },
+  name: "CheckSocialIssue",
+  props: ["issue", "selection"],
+  emits: ["updateSelected"],
+  computed: {
+    selected: {
+      set(value) {
+        this.$emit("updateSelected", value);
+      },
+      get() {
+        return this.selection;
+      },
    },
+  },
 };
 </script>

@@ -41,9 +39,9 @@ export default {
@import "ChillPersonAssets/chill/scss/mixins";
@import "ChillMainAssets/chill/scss/chill_variables";
 span.badge {
-    @include badge_social($social-issue-color);
-    font-size: 95%;
-    margin-bottom: 5px;
-    margin-right: 1em;
+  @include badge_social($social-issue-color);
+  font-size: 95%;
+  margin-bottom: 5px;
+  margin-right: 1em;
 }
 </style>
--- a/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
@@ -1,76 +1,74 @@
 import { EventInput } from "@fullcalendar/core";
 import {
-    DateTime,
-    Location,
-    User,
-    UserAssociatedInterface,
+  DateTime,
+  Location,
+  User,
+  UserAssociatedInterface,
 } from "../../../ChillMainBundle/Resources/public/types";
 import { Person } from "../../../ChillPersonBundle/Resources/public/types";

 export interface CalendarRange {
-    id: number;
-    endDate: DateTime;
-    startDate: DateTime;
-    user: User;
-    location: Location;
-    createdAt: DateTime;
-    createdBy: User;
-    updatedAt: DateTime;
-    updatedBy: User;
+  id: number;
+  endDate: DateTime;
+  startDate: DateTime;
+  user: User;
+  location: Location;
+  createdAt: DateTime;
+  createdBy: User;
+  updatedAt: DateTime;
+  updatedBy: User;
 }

 export interface CalendarRangeCreate {
-    user: UserAssociatedInterface;
-    startDate: DateTime;
-    endDate: DateTime;
-    location: Location;
+  user: UserAssociatedInterface;
+  startDate: DateTime;
+  endDate: DateTime;
+  location: Location;
 }

 export interface CalendarRangeEdit {
-    startDate?: DateTime;
-    endDate?: DateTime;
-    location?: Location;
+  startDate?: DateTime;
+  endDate?: DateTime;
+  location?: Location;
 }

 export interface Calendar {
-    id: number;
+  id: number;
 }

 export interface CalendarLight {
-    id: number;
-    endDate: DateTime;
-    startDate: DateTime;
-    mainUser: User;
-    persons: Person[];
-    status: "valid" | "moved" | "canceled";
+  id: number;
+  endDate: DateTime;
+  startDate: DateTime;
+  mainUser: User;
+  persons: Person[];
+  status: "valid" | "moved" | "canceled";
 }

 export interface CalendarRemote {
-    id: number;
-    endDate: DateTime;
-    startDate: DateTime;
-    title: string;
-    isAllDay: boolean;
+  id: number;
+  endDate: DateTime;
+  startDate: DateTime;
+  title: string;
+  isAllDay: boolean;
 }

 export type EventInputCalendarRange = EventInput & {
-    id: string;
-    userId: number;
-    userLabel: string;
-    calendarRangeId: number;
-    locationId: number;
-    locationName: string;
-    start: string;
-    end: string;
-    is: "range";
+  id: string;
+  userId: number;
+  userLabel: string;
+  calendarRangeId: number;
+  locationId: number;
+  locationName: string;
+  start: string;
+  end: string;
+  is: "range";
 };

 export function isEventInputCalendarRange(
-    toBeDetermined: EventInputCalendarRange | EventInput,
+  toBeDetermined: EventInputCalendarRange | EventInput,
 ): toBeDetermined is EventInputCalendarRange {
-    return (
-        typeof toBeDetermined.is === "string" && toBeDetermined.is === "range"
-    );
+  return typeof toBeDetermined.is === "string" && toBeDetermined.is === "range";
 }

 export {};
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -1,164 +1,146 @@
 <template>
-    <teleport to="#mainUser">
-        <h2 class="chill-red">Utilisateur principal</h2>
-        <div>
-            <div>
-                <div v-if="null !== this.$store.getters.getMainUser">
-                    <calendar-active :user="this.$store.getters.getMainUser" />
-                </div>
-                <pick-entity
-                    :multiple="false"
-                    :types="['user']"
-                    :uniqid="'main_user_calendar'"
-                    :picked="
-                        null !== this.$store.getters.getMainUser
-                            ? [this.$store.getters.getMainUser]
-                            : []
-                    "
-                    :removable-if-set="false"
-                    :display-picked="false"
-                    :suggested="this.suggestedUsers"
-                    :label="'main_user'"
-                    @add-new-entity="setMainUser"
-                />
-            </div>
+  <teleport to="#mainUser">
+    <h2 class="chill-red">Utilisateur principal</h2>
+    <div>
+      <div>
+        <div v-if="null !== this.$store.getters.getMainUser">
+          <calendar-active :user="this.$store.getters.getMainUser" />
        </div>
-    </teleport>
+        <pick-entity
+          :multiple="false"
+          :types="['user']"
+          :uniqid="'main_user_calendar'"
+          :picked="
+            null !== this.$store.getters.getMainUser
+              ? [this.$store.getters.getMainUser]
+              : []
+          "
+          :removable-if-set="false"
+          :display-picked="false"
+          :suggested="this.suggestedUsers"
+          :label="'main_user'"
+          @add-new-entity="setMainUser"
+        />
+      </div>
+    </div>
+  </teleport>

-    <concerned-groups />
+  <concerned-groups />

-    <teleport to="#schedule">
-        <div class="row mb-3" v-if="activity.startDate !== null">
-            <label class="col-form-label col-sm-4">Date</label>
-            <div class="col-sm-8">
-                {{ $d(activity.startDate, "long") }} -
-                {{ $d(activity.endDate, "hoursOnly") }}
-                <span v-if="activity.calendarRange === null"
-                    >(Pas de plage de disponibilité sélectionnée)</span
-                >
-                <span v-else>(Une plage de disponibilité sélectionnée)</span>
-            </div>
-        </div>
-    </teleport>
-
-    <location />
-
-    <teleport to="#fullCalendar">
-        <div class="calendar-actives">
-            <template v-for="u in getActiveUsers" :key="u.id">
-                <calendar-active
-                    :user="u"
-                    :invite="this.$store.getters.getInviteForUser(u)"
-                />
-            </template>
-        </div>
-        <div
-            class="display-options row justify-content-between"
-            style="margin-top: 1rem"
+  <teleport to="#schedule">
+    <div class="row mb-3" v-if="activity.startDate !== null">
+      <label class="col-form-label col-sm-4">Date</label>
+      <div class="col-sm-8">
+        {{ $d(activity.startDate, "long") }} -
+        {{ $d(activity.endDate, "hoursOnly") }}
+        <span v-if="activity.calendarRange === null"
+          >(Pas de plage de disponibilité sélectionnée)</span
        >
-            <div class="col-sm-9 col-xs-12">
-                <div class="input-group mb-3">
-                    <label class="input-group-text" for="slotDuration"
-                        >Durée des créneaux</label
-                    >
-                    <select
-                        v-model="slotDuration"
-                        id="slotDuration"
-                        class="form-select"
-                    >
-                        <option value="00:05:00">5 minutes</option>
-                        <option value="00:10:00">10 minutes</option>
-                        <option value="00:15:00">15 minutes</option>
-                        <option value="00:30:00">30 minutes</option>
-                    </select>
-                    <label class="input-group-text" for="slotMinTime">De</label>
-                    <select
-                        v-model="slotMinTime"
-                        id="slotMinTime"
-                        class="form-select"
-                    >
-                        <option value="00:00:00">0h</option>
-                        <option value="01:00:00">1h</option>
-                        <option value="02:00:00">2h</option>
-                        <option value="03:00:00">3h</option>
-                        <option value="04:00:00">4h</option>
-                        <option value="05:00:00">5h</option>
-                        <option value="06:00:00">6h</option>
-                        <option value="07:00:00">7h</option>
-                        <option value="08:00:00">8h</option>
-                        <option value="09:00:00">9h</option>
-                        <option value="10:00:00">10h</option>
-                        <option value="11:00:00">11h</option>
-                        <option value="12:00:00">12h</option>
-                    </select>
-                    <label class="input-group-text" for="slotMaxTime">À</label>
-                    <select
-                        v-model="slotMaxTime"
-                        id="slotMaxTime"
-                        class="form-select"
-                    >
-                        <option value="12:00:00">12h</option>
-                        <option value="13:00:00">13h</option>
-                        <option value="14:00:00">14h</option>
-                        <option value="15:00:00">15h</option>
-                        <option value="16:00:00">16h</option>
-                        <option value="17:00:00">17h</option>
-                        <option value="18:00:00">18h</option>
-                        <option value="19:00:00">19h</option>
-                        <option value="20:00:00">20h</option>
-                        <option value="21:00:00">21h</option>
-                        <option value="22:00:00">22h</option>
-                        <option value="23:00:00">23h</option>
-                        <option value="23:59:59">24h</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-sm-3 col-xs-12">
-                <div class="float-end">
-                    <div class="form-check input-group">
-                        <span class="input-group-text">
-                            <input
-                                id="showHideWE"
-                                class="mt-0"
-                                type="checkbox"
-                                v-model="hideWeekends"
-                            />
-                        </span>
-                        <label
-                            for="showHideWE"
-                            class="form-check-label input-group-text"
-                            >Week-ends</label
-                        >
-                    </div>
-                </div>
-            </div>
+        <span v-else>(Une plage de disponibilité sélectionnée)</span>
+      </div>
+    </div>
+  </teleport>
+
+  <location />
+
+  <teleport to="#fullCalendar">
+    <div class="calendar-actives">
+      <template v-for="u in getActiveUsers" :key="u.id">
+        <calendar-active
+          :user="u"
+          :invite="this.$store.getters.getInviteForUser(u)"
+        />
+      </template>
+    </div>
+    <div
+      class="display-options row justify-content-between"
+      style="margin-top: 1rem"
+    >
+      <div class="col-sm-9 col-xs-12">
+        <div class="input-group mb-3">
+          <label class="input-group-text" for="slotDuration"
+            >Durée des créneaux</label
+          >
+          <select v-model="slotDuration" id="slotDuration" class="form-select">
+            <option value="00:05:00">5 minutes</option>
+            <option value="00:10:00">10 minutes</option>
+            <option value="00:15:00">15 minutes</option>
+            <option value="00:30:00">30 minutes</option>
+          </select>
+          <label class="input-group-text" for="slotMinTime">De</label>
+          <select v-model="slotMinTime" id="slotMinTime" class="form-select">
+            <option value="00:00:00">0h</option>
+            <option value="01:00:00">1h</option>
+            <option value="02:00:00">2h</option>
+            <option value="03:00:00">3h</option>
+            <option value="04:00:00">4h</option>
+            <option value="05:00:00">5h</option>
+            <option value="06:00:00">6h</option>
+            <option value="07:00:00">7h</option>
+            <option value="08:00:00">8h</option>
+            <option value="09:00:00">9h</option>
+            <option value="10:00:00">10h</option>
+            <option value="11:00:00">11h</option>
+            <option value="12:00:00">12h</option>
+          </select>
+          <label class="input-group-text" for="slotMaxTime">À</label>
+          <select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
+            <option value="12:00:00">12h</option>
+            <option value="13:00:00">13h</option>
+            <option value="14:00:00">14h</option>
+            <option value="15:00:00">15h</option>
+            <option value="16:00:00">16h</option>
+            <option value="17:00:00">17h</option>
+            <option value="18:00:00">18h</option>
+            <option value="19:00:00">19h</option>
+            <option value="20:00:00">20h</option>
+            <option value="21:00:00">21h</option>
+            <option value="22:00:00">22h</option>
+            <option value="23:00:00">23h</option>
+            <option value="23:59:59">24h</option>
+          </select>
        </div>
-        <FullCalendar ref="fullCalendar" :options="calendarOptions">
-            <template #eventContent="arg">
-                <span>
-                    <b v-if="arg.event.extendedProps.is === 'remote'">{{
-                        arg.event.title
-                    }}</b>
-                    <b v-else-if="arg.event.extendedProps.is === 'range'"
-                        >{{ arg.timeText }}
-                        {{ arg.event.extendedProps.locationName }}
-                        <small>{{
-                            arg.event.extendedProps.userLabel
-                        }}</small></b
-                    >
-                    <b v-else-if="arg.event.extendedProps.is === 'current'"
-                        >{{ arg.timeText }} {{ $t("current_selected") }}
-                    </b>
-                    <b v-else-if="arg.event.extendedProps.is === 'local'">{{
-                        arg.event.title
-                    }}</b>
-                    <b v-else
-                        >{{ arg.timeText }} {{ $t("current_selected") }}
-                    </b>
-                </span>
-            </template>
-        </FullCalendar>
-    </teleport>
+      </div>
+      <div class="col-sm-3 col-xs-12">
+        <div class="float-end">
+          <div class="form-check input-group">
+            <span class="input-group-text">
+              <input
+                id="showHideWE"
+                class="mt-0"
+                type="checkbox"
+                v-model="hideWeekends"
+              />
+            </span>
+            <label for="showHideWE" class="form-check-label input-group-text"
+              >Week-ends</label
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <FullCalendar ref="fullCalendar" :options="calendarOptions">
+      <template #eventContent="arg">
+        <span>
+          <b v-if="arg.event.extendedProps.is === 'remote'">{{
+            arg.event.title
+          }}</b>
+          <b v-else-if="arg.event.extendedProps.is === 'range'"
+            >{{ arg.timeText }}
+            {{ arg.event.extendedProps.locationName }}
+            <small>{{ arg.event.extendedProps.userLabel }}</small></b
+          >
+          <b v-else-if="arg.event.extendedProps.is === 'current'"
+            >{{ arg.timeText }} {{ $t("current_selected") }}
+          </b>
+          <b v-else-if="arg.event.extendedProps.is === 'local'">{{
+            arg.event.title
+          }}</b>
+          <b v-else>{{ arg.timeText }} {{ $t("current_selected") }} </b>
+        </span>
+      </template>
+    </FullCalendar>
+  </teleport>
 </template>

 <script>
@@ -175,219 +157,210 @@ import PickEntity from "ChillMainAssets/vuejs/PickEntity/PickEntity.vue";
 import { mapGetters, mapState } from "vuex";

 export default {
-    name: "App",
-    components: {
-        ConcernedGroups,
-        Location,
-        FullCalendar,
-        CalendarActive,
-        PickEntity,
+  name: "App",
+  components: {
+    ConcernedGroups,
+    Location,
+    FullCalendar,
+    CalendarActive,
+    PickEntity,
+  },
+  data() {
+    return {
+      errorMsg: [],
+      showMyCalendar: false,
+      slotDuration: "00:05:00",
+      slotMinTime: "09:00:00",
+      slotMaxTime: "18:00:00",
+      hideWeekEnds: true,
+      previousUser: [],
+    };
+  },
+  computed: {
+    ...mapGetters(["getMainUser"]),
+    ...mapState(["activity"]),
+    events() {
+      return this.$store.getters.getEventSources;
    },
-    data() {
-        return {
-            errorMsg: [],
-            showMyCalendar: false,
-            slotDuration: "00:05:00",
-            slotMinTime: "09:00:00",
-            slotMaxTime: "18:00:00",
-            hideWeekEnds: true,
-            previousUser: [],
-        };
+    calendarOptions() {
+      return {
+        locale: frLocale,
+        plugins: [
+          dayGridPlugin,
+          interactionPlugin,
+          timeGridPlugin,
+          dayGridPlugin,
+          listPlugin,
+        ],
+        initialView: "timeGridWeek",
+        initialDate: this.$store.getters.getInitialDate,
+        eventSources: this.events,
+        selectable: true,
+        slotMinTime: this.slotMinTime,
+        slotMaxTime: this.slotMaxTime,
+        scrollTimeReset: false,
+        datesSet: this.onDatesSet,
+        select: this.onDateSelect,
+        eventChange: this.onEventChange,
+        eventClick: this.onEventClick,
+        selectMirror: true,
+        editable: true,
+        weekends: !this.hideWeekEnds,
+        headerToolbar: {
+          left: "prev,next today",
+          center: "title",
+          right: "timeGridWeek,timeGridDay,listWeek",
+        },
+        views: {
+          timeGrid: {
+            slotEventOverlap: false,
+            slotDuration: this.slotDuration,
+          },
+        },
+      };
    },
-    computed: {
-        ...mapGetters(["getMainUser"]),
-        ...mapState(["activity"]),
-        events() {
-            return this.$store.getters.getEventSources;
-        },
-        calendarOptions() {
-            return {
-                locale: frLocale,
-                plugins: [
-                    dayGridPlugin,
-                    interactionPlugin,
-                    timeGridPlugin,
-                    dayGridPlugin,
-                    listPlugin,
-                ],
-                initialView: "timeGridWeek",
-                initialDate: this.$store.getters.getInitialDate,
-                eventSources: this.events,
-                selectable: true,
-                slotMinTime: this.slotMinTime,
-                slotMaxTime: this.slotMaxTime,
-                scrollTimeReset: false,
-                datesSet: this.onDatesSet,
-                select: this.onDateSelect,
-                eventChange: this.onEventChange,
-                eventClick: this.onEventClick,
-                selectMirror: true,
-                editable: true,
-                weekends: !this.hideWeekEnds,
-                headerToolbar: {
-                    left: "prev,next today",
-                    center: "title",
-                    right: "timeGridWeek,timeGridDay,listWeek",
-                },
-                views: {
-                    timeGrid: {
-                        slotEventOverlap: false,
-                        slotDuration: this.slotDuration,
-                    },
-                },
-            };
-        },
-        getActiveUsers() {
-            const users = [];
-            for (const id of this.$store.state.currentView.users.keys()) {
-                users.push(this.$store.getters.getUserDataById(id).user);
-            }
-            return users;
-        },
-        suggestedUsers() {
-            const suggested = [];
-
-            this.$data.previousUser.forEach((u) => {
-                if (u.id !== this.$store.getters.getMainUser.id) {
-                    suggested.push(u);
-                }
-            });
-
-            return suggested;
-        },
+    getActiveUsers() {
+      const users = [];
+      for (const id of this.$store.state.currentView.users.keys()) {
+        users.push(this.$store.getters.getUserDataById(id).user);
+      }
+      return users;
    },
-    methods: {
-        setMainUser({ entity }) {
-            const user = entity;
-            console.log("setMainUser APP", entity);
+    suggestedUsers() {
+      const suggested = [];

-            if (
-                user.id !== this.$store.getters.getMainUser &&
-                (this.$store.state.activity.calendarRange !== null ||
-                    this.$store.state.activity.startDate !== null ||
-                    this.$store.state.activity.endDate !== null)
-            ) {
-                if (
-                    !window.confirm(
-                        this.$t("change_main_user_will_reset_event_data"),
-                    )
-                ) {
-                    return;
-                }
-            }
+      this.$data.previousUser.forEach((u) => {
+        if (u.id !== this.$store.getters.getMainUser.id) {
+          suggested.push(u);
+        }
+      });

-            // add the previous user, if any, in the previous user list (in use for suggestion)
-            if (null !== this.$store.getters.getMainUser) {
-                const suggestedUids = new Set(
-                    this.$data.previousUser.map((u) => u.id),
-                );
-                if (!suggestedUids.has(this.$store.getters.getMainUser.id)) {
-                    this.$data.previousUser.push(
-                        this.$store.getters.getMainUser,
-                    );
-                }
-            }
-
-            this.$store.dispatch("setMainUser", user);
-            this.$store.commit("showUserOnCalendar", {
-                user,
-                ranges: true,
-                remotes: true,
-            });
-        },
-        removeMainUser(user) {
-            console.log("removeMainUser APP", user);
-
-            window.alert(this.$t("main_user_is_mandatory"));
-            return;
-        },
-        onDatesSet(event) {
-            console.log("onDatesSet", event);
-            this.$store.dispatch("setCurrentDatesView", {
-                start: event.start,
-                end: event.end,
-            });
-        },
-        onDateSelect(payload) {
-            console.log("onDateSelect", payload);
-
-            // show an alert if changing mainUser
-            if (
-                (this.$store.getters.getMainUser !== null &&
-                    this.$store.state.me.id !==
-                        this.$store.getters.getMainUser.id) ||
-                this.$store.getters.getMainUser === null
-            ) {
-                if (!window.confirm(this.$t("will_change_main_user_for_me"))) {
-                    return;
-                } else {
-                    this.$store.commit("showUserOnCalendar", {
-                        user: this.$store.state.me,
-                        remotes: true,
-                        ranges: true,
-                    });
-                }
-            }
-
-            this.$store.dispatch("setEventTimes", {
-                start: payload.start,
-                end: payload.end,
-            });
-        },
-        onEventChange(payload) {
-            console.log("onEventChange", payload);
-            if (this.$store.state.activity.calendarRange !== null) {
-                throw new Error(
-                    "not allowed to edit a calendar associated with a calendar range",
-                );
-            }
-            this.$store.dispatch("setEventTimes", {
-                start: payload.event.start,
-                end: payload.event.end,
-            });
-        },
-        onEventClick(payload) {
-            if (payload.event.extendedProps.is !== "range") {
-                // do nothing when clicking on remote
-                return;
-            }
-
-            // show an alert if changing mainUser
-            if (
-                this.$store.getters.getMainUser !== null &&
-                payload.event.extendedProps.userId !==
-                    this.$store.getters.getMainUser.id
-            ) {
-                if (
-                    !window.confirm(
-                        this.$t("this_calendar_range_will_change_main_user"),
-                    )
-                ) {
-                    return;
-                }
-            }
-
-            this.$store.dispatch("associateCalendarToRange", {
-                range: payload.event,
-            });
-        },
+      return suggested;
    },
+  },
+  methods: {
+    setMainUser({ entity }) {
+      const user = entity;
+      console.log("setMainUser APP", entity);
+
+      if (
+        user.id !== this.$store.getters.getMainUser &&
+        (this.$store.state.activity.calendarRange !== null ||
+          this.$store.state.activity.startDate !== null ||
+          this.$store.state.activity.endDate !== null)
+      ) {
+        if (
+          !window.confirm(this.$t("change_main_user_will_reset_event_data"))
+        ) {
+          return;
+        }
+      }
+
+      // add the previous user, if any, in the previous user list (in use for suggestion)
+      if (null !== this.$store.getters.getMainUser) {
+        const suggestedUids = new Set(this.$data.previousUser.map((u) => u.id));
+        if (!suggestedUids.has(this.$store.getters.getMainUser.id)) {
+          this.$data.previousUser.push(this.$store.getters.getMainUser);
+        }
+      }
+
+      this.$store.dispatch("setMainUser", user);
+      this.$store.commit("showUserOnCalendar", {
+        user,
+        ranges: true,
+        remotes: true,
+      });
+    },
+    removeMainUser(user) {
+      console.log("removeMainUser APP", user);
+
+      window.alert(this.$t("main_user_is_mandatory"));
+      return;
+    },
+    onDatesSet(event) {
+      console.log("onDatesSet", event);
+      this.$store.dispatch("setCurrentDatesView", {
+        start: event.start,
+        end: event.end,
+      });
+    },
+    onDateSelect(payload) {
+      console.log("onDateSelect", payload);
+
+      // show an alert if changing mainUser
+      if (
+        (this.$store.getters.getMainUser !== null &&
+          this.$store.state.me.id !== this.$store.getters.getMainUser.id) ||
+        this.$store.getters.getMainUser === null
+      ) {
+        if (!window.confirm(this.$t("will_change_main_user_for_me"))) {
+          return;
+        } else {
+          this.$store.commit("showUserOnCalendar", {
+            user: this.$store.state.me,
+            remotes: true,
+            ranges: true,
+          });
+        }
+      }
+
+      this.$store.dispatch("setEventTimes", {
+        start: payload.start,
+        end: payload.end,
+      });
+    },
+    onEventChange(payload) {
+      console.log("onEventChange", payload);
+      if (this.$store.state.activity.calendarRange !== null) {
+        throw new Error(
+          "not allowed to edit a calendar associated with a calendar range",
+        );
+      }
+      this.$store.dispatch("setEventTimes", {
+        start: payload.event.start,
+        end: payload.event.end,
+      });
+    },
+    onEventClick(payload) {
+      if (payload.event.extendedProps.is !== "range") {
+        // do nothing when clicking on remote
+        return;
+      }
+
+      // show an alert if changing mainUser
+      if (
+        this.$store.getters.getMainUser !== null &&
+        payload.event.extendedProps.userId !==
+          this.$store.getters.getMainUser.id
+      ) {
+        if (
+          !window.confirm(this.$t("this_calendar_range_will_change_main_user"))
+        ) {
+          return;
+        }
+      }
+
+      this.$store.dispatch("associateCalendarToRange", {
+        range: payload.event,
+      });
+    },
+  },
 };
 </script>

 <style>
 .calendar-actives {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }

 .display-options {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }

 /* for events which are range */
 .fc-event.isrange {
-    border-width: 3px;
+  border-width: 3px;
 }
 </style>
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
@@ -1,119 +1,105 @@
 <template>
-    <div :style="style" class="calendar-active">
-        <span class="badge-user">
-            {{ user.text }}
-            <template v-if="invite !== null">
-                <i v-if="invite.status === 'accepted'" class="fa fa-check" />
-                <i
-                    v-else-if="invite.status === 'declined'"
-                    class="fa fa-times"
-                />
-                <i
-                    v-else-if="invite.status === 'pending'"
-                    class="fa fa-question-o"
-                />
-                <i
-                    v-else-if="invite.status === 'tentative'"
-                    class="fa fa-question"
-                />
-                <span v-else="">{{ invite.status }}</span>
-            </template>
-        </span>
-        <span class="form-check-inline form-switch">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                id="flexSwitchCheckDefault"
-                v-model="rangeShow"
-            />
-            &nbsp;<label
-                class="form-check-label"
-                for="flexSwitchCheckDefault"
-                title="Disponibilités"
-                ><i class="fa fa-calendar-check-o"
-            /></label>
-        </span>
-        <span class="form-check-inline form-switch">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                id="flexSwitchCheckDefault"
-                v-model="remoteShow"
-            />
-            &nbsp;<label
-                class="form-check-label"
-                for="flexSwitchCheckDefault"
-                title="Agenda"
-                ><i class="fa fa-calendar"
-            /></label>
-        </span>
-    </div>
+  <div :style="style" class="calendar-active">
+    <span class="badge-user">
+      {{ user.text }}
+      <template v-if="invite !== null">
+        <i v-if="invite.status === 'accepted'" class="fa fa-check" />
+        <i v-else-if="invite.status === 'declined'" class="fa fa-times" />
+        <i v-else-if="invite.status === 'pending'" class="fa fa-question-o" />
+        <i v-else-if="invite.status === 'tentative'" class="fa fa-question" />
+        <span v-else="">{{ invite.status }}</span>
+      </template>
+    </span>
+    <span class="form-check-inline form-switch">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="flexSwitchCheckDefault"
+        v-model="rangeShow"
+      />
+      &nbsp;<label
+        class="form-check-label"
+        for="flexSwitchCheckDefault"
+        title="Disponibilités"
+        ><i class="fa fa-calendar-check-o"
+      /></label>
+    </span>
+    <span class="form-check-inline form-switch">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="flexSwitchCheckDefault"
+        v-model="remoteShow"
+      />
+      &nbsp;<label
+        class="form-check-label"
+        for="flexSwitchCheckDefault"
+        title="Agenda"
+        ><i class="fa fa-calendar"
+      /></label>
+    </span>
+  </div>
 </template>

 <script>
 import { mapGetters } from "vuex";

 export default {
-    name: "CalendarActive",
-    props: {
-        user: {
-            type: Object,
-            required: true,
-        },
-        invite: {
-            type: Object,
-            required: false,
-            default: null,
-        },
+  name: "CalendarActive",
+  props: {
+    user: {
+      type: Object,
+      required: true,
    },
-    computed: {
-        style() {
-            return {
-                backgroundColor: this.$store.getters.getUserData(this.user)
-                    .mainColor,
-            };
-        },
-        rangeShow: {
-            set(value) {
-                this.$store.commit("showUserOnCalendar", {
-                    user: this.user,
-                    ranges: value,
-                });
-            },
-            get() {
-                return this.$store.getters.isRangeShownOnCalendarForUser(
-                    this.user,
-                );
-            },
-        },
-        remoteShow: {
-            set(value) {
-                this.$store.commit("showUserOnCalendar", {
-                    user: this.user,
-                    remotes: value,
-                });
-            },
-            get() {
-                return this.$store.getters.isRemoteShownOnCalendarForUser(
-                    this.user,
-                );
-            },
-        },
+    invite: {
+      type: Object,
+      required: false,
+      default: null,
    },
+  },
+  computed: {
+    style() {
+      return {
+        backgroundColor: this.$store.getters.getUserData(this.user).mainColor,
+      };
+    },
+    rangeShow: {
+      set(value) {
+        this.$store.commit("showUserOnCalendar", {
+          user: this.user,
+          ranges: value,
+        });
+      },
+      get() {
+        return this.$store.getters.isRangeShownOnCalendarForUser(this.user);
+      },
+    },
+    remoteShow: {
+      set(value) {
+        this.$store.commit("showUserOnCalendar", {
+          user: this.user,
+          remotes: value,
+        });
+      },
+      get() {
+        return this.$store.getters.isRemoteShownOnCalendarForUser(this.user);
+      },
+    },
+  },
 };
 </script>

 <style scoped lang="scss">
 .calendar-active {
-    margin: 0 0.25rem 0.25rem 0;
-    padding: 0.5rem;
+  margin: 0 0.25rem 0.25rem 0;
+  padding: 0.5rem;

-    border-radius: 0.5rem;
+  border-radius: 0.5rem;

-    color: var(--bs-blue);
+  color: var(--bs-blue);

-    & > .badge-user {
-        margin-right: 0.5rem;
-    }
+  & > .badge-user {
+    margin-right: 0.5rem;
+  }
 }
 </style>
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts
@@ -14,37 +14,37 @@ export { whoami } from "../../../../../ChillMainBundle/Resources/public/lib/api/
 * @return Promise
 */
 export const fetchCalendarRangeForUser = (
-    user: User,
-    start: Date,
-    end: Date,
+  user: User,
+  start: Date,
+  end: Date,
 ): Promise<CalendarRange[]> => {
-    const uri = `/api/1.0/calendar/calendar-range-available/${user.id}.json`;
-    const dateFrom = datetimeToISO(start);
-    const dateTo = datetimeToISO(end);
+  const uri = `/api/1.0/calendar/calendar-range-available/${user.id}.json`;
+  const dateFrom = datetimeToISO(start);
+  const dateTo = datetimeToISO(end);

-    return fetchResults<CalendarRange>(uri, { dateFrom, dateTo });
+  return fetchResults<CalendarRange>(uri, { dateFrom, dateTo });
 };

 export const fetchCalendarRemoteForUser = (
-    user: User,
-    start: Date,
-    end: Date,
+  user: User,
+  start: Date,
+  end: Date,
 ): Promise<CalendarRemote[]> => {
-    const uri = `/api/1.0/calendar/proxy/calendar/by-user/${user.id}/events`;
-    const dateFrom = datetimeToISO(start);
-    const dateTo = datetimeToISO(end);
+  const uri = `/api/1.0/calendar/proxy/calendar/by-user/${user.id}/events`;
+  const dateFrom = datetimeToISO(start);
+  const dateTo = datetimeToISO(end);

-    return fetchResults<CalendarRemote>(uri, { dateFrom, dateTo });
+  return fetchResults<CalendarRemote>(uri, { dateFrom, dateTo });
 };

 export const fetchCalendarLocalForUser = (
-    user: User,
-    start: Date,
-    end: Date,
+  user: User,
+  start: Date,
+  end: Date,
 ): Promise<CalendarLight[]> => {
-    const uri = `/api/1.0/calendar/calendar/by-user/${user.id}.json`;
-    const dateFrom = datetimeToISO(start);
-    const dateTo = datetimeToISO(end);
+  const uri = `/api/1.0/calendar/calendar/by-user/${user.id}.json`;
+  const dateFrom = datetimeToISO(start);
+  const dateTo = datetimeToISO(end);

-    return fetchResults<CalendarLight>(uri, { dateFrom, dateTo });
+  return fetchResults<CalendarLight>(uri, { dateFrom, dateTo });
 };
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.ts
@@ -1,17 +1,17 @@
 const COLORS = [
-    /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
-    "#8dd3c7",
-    "#ffffb3",
-    "#bebada",
-    "#fb8072",
-    "#80b1d3",
-    "#fdb462",
-    "#b3de69",
-    "#fccde5",
-    "#d9d9d9",
-    "#bc80bd",
-    "#ccebc5",
-    "#ffed6f",
+  /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
+  "#8dd3c7",
+  "#ffffb3",
+  "#bebada",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#b3de69",
+  "#fccde5",
+  "#d9d9d9",
+  "#bc80bd",
+  "#ccebc5",
+  "#ffed6f",
 ];

 export { COLORS };
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
@@ -1,117 +1,117 @@
 import { COLORS } from "../const";
 import { ISOToDatetime } from "../../../../../../ChillMainBundle/Resources/public/chill/js/date";
 import {
-    DateTime,
-    User,
+  DateTime,
+  User,
 } from "../../../../../../ChillMainBundle/Resources/public/types";
 import { CalendarLight, CalendarRange, CalendarRemote } from "../../../types";
 import type { EventInputCalendarRange } from "../../../types";
 import { EventInput } from "@fullcalendar/core";

 export interface UserData {
-    user: User;
-    calendarRanges: CalendarRange[];
-    calendarRangesLoaded: {}[];
-    remotes: CalendarRemote[];
-    remotesLoaded: {}[];
-    locals: CalendarRemote[];
-    localsLoaded: {}[];
-    mainColor: string;
+  user: User;
+  calendarRanges: CalendarRange[];
+  calendarRangesLoaded: {}[];
+  remotes: CalendarRemote[];
+  remotesLoaded: {}[];
+  locals: CalendarRemote[];
+  localsLoaded: {}[];
+  mainColor: string;
 }

 export const addIdToValue = (string: string, id: number): string => {
-    const array = string ? string.split(",") : [];
-    array.push(id.toString());
-    const str = array.join();
-    return str;
+  const array = string ? string.split(",") : [];
+  array.push(id.toString());
+  const str = array.join();
+  return str;
 };

 export const removeIdFromValue = (string: string, id: number) => {
-    let array = string.split(",");
-    array = array.filter((el) => el !== id.toString());
-    const str = array.join();
-    return str;
+  let array = string.split(",");
+  array = array.filter((el) => el !== id.toString());
+  const str = array.join();
+  return str;
 };

 /*
 * Assign missing keys for the ConcernedGroups component
 */
 export const mapEntity = (entity: EventInput): EventInput => {
-    const calendar = { ...entity };
-    Object.assign(calendar, { thirdParties: entity.professionals });
+  const calendar = { ...entity };
+  Object.assign(calendar, { thirdParties: entity.professionals });

-    if (entity.startDate !== null) {
-        calendar.startDate = ISOToDatetime(entity.startDate.datetime);
-    }
-    if (entity.endDate !== null) {
-        calendar.endDate = ISOToDatetime(entity.endDate.datetime);
-    }
+  if (entity.startDate !== null) {
+    calendar.startDate = ISOToDatetime(entity.startDate.datetime);
+  }
+  if (entity.endDate !== null) {
+    calendar.endDate = ISOToDatetime(entity.endDate.datetime);
+  }

-    if (entity.calendarRange !== null) {
-        calendar.calendarRange.calendarRangeId = entity.calendarRange.id;
-        calendar.calendarRange.id = `range_${entity.calendarRange.id}`;
-    }
+  if (entity.calendarRange !== null) {
+    calendar.calendarRange.calendarRangeId = entity.calendarRange.id;
+    calendar.calendarRange.id = `range_${entity.calendarRange.id}`;
+  }

-    return calendar;
+  return calendar;
 };

 export const createUserData = (user: User, colorIndex: number): UserData => {
-    const colorId = colorIndex % COLORS.length;
+  const colorId = colorIndex % COLORS.length;

-    return {
-        user: user,
-        calendarRanges: [],
-        calendarRangesLoaded: [],
-        remotes: [],
-        remotesLoaded: [],
-        locals: [],
-        localsLoaded: [],
-        mainColor: COLORS[colorId],
-    };
+  return {
+    user: user,
+    calendarRanges: [],
+    calendarRangesLoaded: [],
+    remotes: [],
+    remotesLoaded: [],
+    locals: [],
+    localsLoaded: [],
+    mainColor: COLORS[colorId],
+  };
 };

 // TODO move this function to a more global namespace, as it is also in use in MyCalendarRange app
 export const calendarRangeToFullCalendarEvent = (
-    entity: CalendarRange,
+  entity: CalendarRange,
 ): EventInputCalendarRange => {
-    return {
-        id: `range_${entity.id}`,
-        title: "(" + entity.user.text + ")",
-        start: entity.startDate.datetime8601,
-        end: entity.endDate.datetime8601,
-        allDay: false,
-        userId: entity.user.id,
-        userLabel: entity.user.label,
-        calendarRangeId: entity.id,
-        locationId: entity.location.id,
-        locationName: entity.location.name,
-        is: "range",
-    };
+  return {
+    id: `range_${entity.id}`,
+    title: "(" + entity.user.text + ")",
+    start: entity.startDate.datetime8601,
+    end: entity.endDate.datetime8601,
+    allDay: false,
+    userId: entity.user.id,
+    userLabel: entity.user.label,
+    calendarRangeId: entity.id,
+    locationId: entity.location.id,
+    locationName: entity.location.name,
+    is: "range",
+  };
 };

 export const remoteToFullCalendarEvent = (
-    entity: CalendarRemote,
+  entity: CalendarRemote,
 ): EventInput & { id: string } => {
-    return {
-        id: `range_${entity.id}`,
-        title: entity.title,
-        start: entity.startDate.datetime8601,
-        end: entity.endDate.datetime8601,
-        allDay: entity.isAllDay,
-        is: "remote",
-    };
+  return {
+    id: `range_${entity.id}`,
+    title: entity.title,
+    start: entity.startDate.datetime8601,
+    end: entity.endDate.datetime8601,
+    allDay: entity.isAllDay,
+    is: "remote",
+  };
 };

 export const localsToFullCalendarEvent = (
-    entity: CalendarLight,
+  entity: CalendarLight,
 ): EventInput & { id: string; originId: number } => {
-    return {
-        id: `local_${entity.id}`,
-        title: entity.persons.map((p) => p.text).join(", "),
-        originId: entity.id,
-        start: entity.startDate.datetime8601,
-        end: entity.endDate.datetime8601,
-        allDay: false,
-        is: "local",
-    };
+  return {
+    id: `local_${entity.id}`,
+    title: entity.persons.map((p) => p.text).join(", "),
+    originId: entity.id,
+    start: entity.startDate.datetime8601,
+    end: entity.endDate.datetime8601,
+    allDay: false,
+    is: "local",
+  };
 };
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
@@ -1,58 +1,50 @@
 <template>
-    <div class="btn-group" role="group">
-        <button
-            id="btnGroupDrop1"
-            type="button"
-            class="btn btn-misc dropdown-toggle"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
+  <div class="btn-group" role="group">
+    <button
+      id="btnGroupDrop1"
+      type="button"
+      class="btn btn-misc dropdown-toggle"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+    >
+      <template v-if="status === Statuses.PENDING">
+        <span class="fa fa-hourglass"></span> {{ $t("Give_an_answer") }}
+      </template>
+      <template v-else-if="status === Statuses.ACCEPTED">
+        <span class="fa fa-check"></span> {{ $t("Accepted") }}
+      </template>
+      <template v-else-if="status === Statuses.DECLINED">
+        <span class="fa fa-times"></span> {{ $t("Declined") }}
+      </template>
+      <template v-else-if="status === Statuses.TENTATIVELY_ACCEPTED">
+        <span class="fa fa-question"></span> {{ $t("Tentative") }}
+      </template>
+    </button>
+    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+      <li v-if="status !== Statuses.ACCEPTED">
+        <a class="dropdown-item" @click="changeStatus(Statuses.ACCEPTED)"
+          ><i class="fa fa-check" aria-hidden="true"></i> {{ $t("Accept") }}</a
        >
-            <template v-if="status === Statuses.PENDING">
-                <span class="fa fa-hourglass"></span> {{ $t("Give_an_answer") }}
-            </template>
-            <template v-else-if="status === Statuses.ACCEPTED">
-                <span class="fa fa-check"></span> {{ $t("Accepted") }}
-            </template>
-            <template v-else-if="status === Statuses.DECLINED">
-                <span class="fa fa-times"></span> {{ $t("Declined") }}
-            </template>
-            <template v-else-if="status === Statuses.TENTATIVELY_ACCEPTED">
-                <span class="fa fa-question"></span> {{ $t("Tentative") }}
-            </template>
-        </button>
-        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-            <li v-if="status !== Statuses.ACCEPTED">
-                <a
-                    class="dropdown-item"
-                    @click="changeStatus(Statuses.ACCEPTED)"
-                    ><i class="fa fa-check" aria-hidden="true"></i>
-                    {{ $t("Accept") }}</a
-                >
-            </li>
-            <li v-if="status !== Statuses.DECLINED">
-                <a
-                    class="dropdown-item"
-                    @click="changeStatus(Statuses.DECLINED)"
-                    ><i class="fa fa-times" aria-hidden="true"></i>
-                    {{ $t("Decline") }}</a
-                >
-            </li>
-            <li v-if="status !== Statuses.TENTATIVELY_ACCEPTED">
-                <a
-                    class="dropdown-item"
-                    @click="changeStatus(Statuses.TENTATIVELY_ACCEPTED)"
-                    ><i class="fa fa-question"></i>
-                    {{ $t("Tentatively_accept") }}</a
-                >
-            </li>
-            <li v-if="status !== Statuses.PENDING">
-                <a class="dropdown-item" @click="changeStatus(Statuses.PENDING)"
-                    ><i class="fa fa-hourglass-o"></i>
-                    {{ $t("Set_pending") }}</a
-                >
-            </li>
-        </ul>
-    </div>
+      </li>
+      <li v-if="status !== Statuses.DECLINED">
+        <a class="dropdown-item" @click="changeStatus(Statuses.DECLINED)"
+          ><i class="fa fa-times" aria-hidden="true"></i> {{ $t("Decline") }}</a
+        >
+      </li>
+      <li v-if="status !== Statuses.TENTATIVELY_ACCEPTED">
+        <a
+          class="dropdown-item"
+          @click="changeStatus(Statuses.TENTATIVELY_ACCEPTED)"
+          ><i class="fa fa-question"></i> {{ $t("Tentatively_accept") }}</a
+        >
+      </li>
+      <li v-if="status !== Statuses.PENDING">
+        <a class="dropdown-item" @click="changeStatus(Statuses.PENDING)"
+          ><i class="fa fa-hourglass-o"></i> {{ $t("Set_pending") }}</a
+        >
+      </li>
+    </ul>
+  </div>
 </template>

 <script lang="ts">
@@ -64,69 +56,67 @@ const PENDING = "pending";
 const TENTATIVELY_ACCEPTED = "tentative";

 const i18n = {
-    messages: {
-        fr: {
-            Give_an_answer: "Répondre",
-            Accepted: "Accepté",
-            Declined: "Refusé",
-            Tentative: "Accepté provisoirement",
-            Accept: "Accepter",
-            Decline: "Refuser",
-            Tentatively_accept: "Accepter provisoirement",
-            Set_pending: "Ne pas répondre",
-        },
+  messages: {
+    fr: {
+      Give_an_answer: "Répondre",
+      Accepted: "Accepté",
+      Declined: "Refusé",
+      Tentative: "Accepté provisoirement",
+      Accept: "Accepter",
+      Decline: "Refuser",
+      Tentatively_accept: "Accepter provisoirement",
+      Set_pending: "Ne pas répondre",
    },
+  },
 };

 export default defineComponent({
-    name: "Answer",
-    i18n,
-    props: {
-        calendarId: { type: Number, required: true },
-        status: {
-            type: String as PropType<
-                "accepted" | "declined" | "pending" | "tentative"
-            >,
-            required: true,
-        },
+  name: "Answer",
+  i18n,
+  props: {
+    calendarId: { type: Number, required: true },
+    status: {
+      type: String as PropType<
+        "accepted" | "declined" | "pending" | "tentative"
+      >,
+      required: true,
    },
-    emits: {
-        statusChanged(
-            payload: "accepted" | "declined" | "pending" | "tentative",
-        ) {
-            return true;
-        },
+  },
+  emits: {
+    statusChanged(payload: "accepted" | "declined" | "pending" | "tentative") {
+      return true;
    },
-    data() {
-        return {
-            Statuses: {
-                ACCEPTED,
-                DECLINED,
-                PENDING,
-                TENTATIVELY_ACCEPTED,
-            },
-        };
-    },
-    methods: {
-        changeStatus: function (
-            newStatus: "accepted" | "declined" | "pending" | "tentative",
-        ) {
-            console.log("changeStatus", newStatus);
-            const url = `/api/1.0/calendar/calendar/${this.$props.calendarId}/answer/${newStatus}.json`;
-            window
-                .fetch(url, {
-                    method: "POST",
-                })
-                .then((r: Response) => {
-                    if (!r.ok) {
-                        console.error("could not confirm answer", newStatus);
-                        return;
-                    }
-                    console.log("answer sent", newStatus);
-                    this.$emit("statusChanged", newStatus);
-                });
-        },
+  },
+  data() {
+    return {
+      Statuses: {
+        ACCEPTED,
+        DECLINED,
+        PENDING,
+        TENTATIVELY_ACCEPTED,
+      },
+    };
+  },
+  methods: {
+    changeStatus: function (
+      newStatus: "accepted" | "declined" | "pending" | "tentative",
+    ) {
+      console.log("changeStatus", newStatus);
+      const url = `/api/1.0/calendar/calendar/${this.$props.calendarId}/answer/${newStatus}.json`;
+      window
+        .fetch(url, {
+          method: "POST",
+        })
+        .then((r: Response) => {
+          if (!r.ok) {
+            console.error("could not confirm answer", newStatus);
+            return;
+          }
+          console.log("answer sent", newStatus);
+          this.$emit("statusChanged", newStatus);
+        });
    },
+  },
 });
 </script>

--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
@@ -1,225 +1,177 @@
 <template>
-    <div class="row">
-        <div class="col-sm">
-            <label class="form-label">{{ $t("created_availabilities") }}</label>
-            <vue-multiselect
-                v-model="pickedLocation"
-                :options="locations"
-                :label="'name'"
-                :track-by="'id'"
-                :selectLabel="'Presser \'Entrée\' pour choisir'"
-                :selectedLabel="'Choisir'"
-                :deselectLabel="'Presser \'Entrée\' pour enlever'"
-                :placeholder="'Choisir'"
-            ></vue-multiselect>
-        </div>
+  <div class="row">
+    <div class="col-sm">
+      <label class="form-label">{{ $t("created_availabilities") }}</label>
+      <vue-multiselect
+        v-model="pickedLocation"
+        :options="locations"
+        :label="'name'"
+        :track-by="'id'"
+        :selectLabel="'Presser \'Entrée\' pour choisir'"
+        :selectedLabel="'Choisir'"
+        :deselectLabel="'Presser \'Entrée\' pour enlever'"
+        :placeholder="'Choisir'"
+      ></vue-multiselect>
    </div>
-    <div
-        class="display-options row justify-content-between"
-        style="margin-top: 1rem"
-    >
-        <div class="col-sm-9 col-xs-12">
-            <div class="input-group mb-3">
-                <label class="input-group-text" for="slotDuration"
-                    >Durée des créneaux</label
-                >
-                <select
-                    v-model="slotDuration"
-                    id="slotDuration"
-                    class="form-select"
-                >
-                    <option value="00:05:00">5 minutes</option>
-                    <option value="00:10:00">10 minutes</option>
-                    <option value="00:15:00">15 minutes</option>
-                    <option value="00:30:00">30 minutes</option>
-                </select>
-                <label class="input-group-text" for="slotMinTime">De</label>
-                <select
-                    v-model="slotMinTime"
-                    id="slotMinTime"
-                    class="form-select"
-                >
-                    <option value="00:00:00">0h</option>
-                    <option value="01:00:00">1h</option>
-                    <option value="02:00:00">2h</option>
-                    <option value="03:00:00">3h</option>
-                    <option value="04:00:00">4h</option>
-                    <option value="05:00:00">5h</option>
-                    <option value="06:00:00">6h</option>
-                    <option value="07:00:00">7h</option>
-                    <option value="08:00:00">8h</option>
-                    <option value="09:00:00">9h</option>
-                    <option value="10:00:00">10h</option>
-                    <option value="11:00:00">11h</option>
-                    <option value="12:00:00">12h</option>
-                </select>
-                <label class="input-group-text" for="slotMaxTime">À</label>
-                <select
-                    v-model="slotMaxTime"
-                    id="slotMaxTime"
-                    class="form-select"
-                >
-                    <option value="12:00:00">12h</option>
-                    <option value="13:00:00">13h</option>
-                    <option value="14:00:00">14h</option>
-                    <option value="15:00:00">15h</option>
-                    <option value="16:00:00">16h</option>
-                    <option value="17:00:00">17h</option>
-                    <option value="18:00:00">18h</option>
-                    <option value="19:00:00">19h</option>
-                    <option value="20:00:00">20h</option>
-                    <option value="21:00:00">21h</option>
-                    <option value="22:00:00">22h</option>
-                    <option value="23:00:00">23h</option>
-                    <option value="23:59:59">24h</option>
-                </select>
-            </div>
-        </div>
-        <div class="col-xs-12 col-sm-3">
-            <div class="float-end">
-                <div class="form-check input-group">
-                    <span class="input-group-text">
-                        <input
-                            id="showHideWE"
-                            class="mt-0"
-                            type="checkbox"
-                            v-model="showWeekends"
-                        />
-                    </span>
-                    <label
-                        for="showHideWE"
-                        class="form-check-label input-group-text"
-                        >Week-ends</label
-                    >
-                </div>
-            </div>
-        </div>
+  </div>
+  <div
+    class="display-options row justify-content-between"
+    style="margin-top: 1rem"
+  >
+    <div class="col-sm-9 col-xs-12">
+      <div class="input-group mb-3">
+        <label class="input-group-text" for="slotDuration"
+          >Durée des créneaux</label
+        >
+        <select v-model="slotDuration" id="slotDuration" class="form-select">
+          <option value="00:05:00">5 minutes</option>
+          <option value="00:10:00">10 minutes</option>
+          <option value="00:15:00">15 minutes</option>
+          <option value="00:30:00">30 minutes</option>
+        </select>
+        <label class="input-group-text" for="slotMinTime">De</label>
+        <select v-model="slotMinTime" id="slotMinTime" class="form-select">
+          <option value="00:00:00">0h</option>
+          <option value="01:00:00">1h</option>
+          <option value="02:00:00">2h</option>
+          <option value="03:00:00">3h</option>
+          <option value="04:00:00">4h</option>
+          <option value="05:00:00">5h</option>
+          <option value="06:00:00">6h</option>
+          <option value="07:00:00">7h</option>
+          <option value="08:00:00">8h</option>
+          <option value="09:00:00">9h</option>
+          <option value="10:00:00">10h</option>
+          <option value="11:00:00">11h</option>
+          <option value="12:00:00">12h</option>
+        </select>
+        <label class="input-group-text" for="slotMaxTime">À</label>
+        <select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
+          <option value="12:00:00">12h</option>
+          <option value="13:00:00">13h</option>
+          <option value="14:00:00">14h</option>
+          <option value="15:00:00">15h</option>
+          <option value="16:00:00">16h</option>
+          <option value="17:00:00">17h</option>
+          <option value="18:00:00">18h</option>
+          <option value="19:00:00">19h</option>
+          <option value="20:00:00">20h</option>
+          <option value="21:00:00">21h</option>
+          <option value="22:00:00">22h</option>
+          <option value="23:00:00">23h</option>
+          <option value="23:59:59">24h</option>
+        </select>
+      </div>
    </div>
-    <FullCalendar :options="calendarOptions" ref="calendarRef">
-        <template v-slot:eventContent="{ event }: { event: EventApi }">
-            <span :class="eventClasses">
-                <b v-if="event.extendedProps.is === 'remote'">{{
-                    event.title
-                }}</b>
-                <b v-else-if="event.extendedProps.is === 'range'"
-                    >{{ formatDate(event.startStr) }} -
-                    {{ event.extendedProps.locationName }}</b
-                >
-                <b v-else-if="event.extendedProps.is === 'local'">{{
-                    event.title
-                }}</b>
-                <b v-else>no 'is'</b>
-                <a
-                    v-if="event.extendedProps.is === 'range'"
-                    class="fa fa-fw fa-times delete"
-                    @click.prevent="onClickDelete(event)"
-                >
-                </a>
-            </span>
+    <div class="col-xs-12 col-sm-3">
+      <div class="float-end">
+        <div class="form-check input-group">
+          <span class="input-group-text">
+            <input
+              id="showHideWE"
+              class="mt-0"
+              type="checkbox"
+              v-model="showWeekends"
+            />
+          </span>
+          <label for="showHideWE" class="form-check-label input-group-text"
+            >Week-ends</label
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+  <FullCalendar :options="calendarOptions" ref="calendarRef">
+    <template v-slot:eventContent="{ event }: { event: EventApi }">
+      <span :class="eventClasses">
+        <b v-if="event.extendedProps.is === 'remote'">{{ event.title }}</b>
+        <b v-else-if="event.extendedProps.is === 'range'"
+          >{{ formatDate(event.startStr) }} -
+          {{ event.extendedProps.locationName }}</b
+        >
+        <b v-else-if="event.extendedProps.is === 'local'">{{ event.title }}</b>
+        <b v-else>no 'is'</b>
+        <a
+          v-if="event.extendedProps.is === 'range'"
+          class="fa fa-fw fa-times delete"
+          @click.prevent="onClickDelete(event)"
+        >
+        </a>
+      </span>
+    </template>
+  </FullCalendar>
+
+  <div id="copy-widget">
+    <div class="container mt-2 mb-2">
+      <div class="row justify-content-between align-items-center mb-4">
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <h6 class="chill-red">{{ $t("copy_range_from_to") }}</h6>
+        </div>
+        <div class="col-xs-12 col-sm-9 col-md-2">
+          <select v-model="dayOrWeek" id="dayOrWeek" class="form-select">
+            <option value="day">{{ $t("from_day_to_day") }}</option>
+            <option value="week">
+              {{ $t("from_week_to_week") }}
+            </option>
+          </select>
+        </div>
+        <template v-if="dayOrWeek === 'day'">
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <input class="form-control" type="date" v-model="copyFrom" />
+          </div>
+          <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
+            <i class="fa fa-angle-double-right"></i>
+          </div>
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <input class="form-control" type="date" v-model="copyTo" />
+          </div>
+          <div class="col-xs-12 col-sm-5 col-md-1">
+            <button class="btn btn-action float-end" @click="copyDay">
+              {{ $t("copy_range") }}
+            </button>
+          </div>
        </template>
-    </FullCalendar>
-
-    <div id="copy-widget">
-        <div class="container mt-2 mb-2">
-            <div class="row justify-content-between align-items-center mb-4">
-                <div class="col-xs-12 col-sm-3 col-md-2">
-                    <h6 class="chill-red">{{ $t("copy_range_from_to") }}</h6>
-                </div>
-                <div class="col-xs-12 col-sm-9 col-md-2">
-                    <select
-                        v-model="dayOrWeek"
-                        id="dayOrWeek"
-                        class="form-select"
-                    >
-                        <option value="day">{{ $t("from_day_to_day") }}</option>
-                        <option value="week">
-                            {{ $t("from_week_to_week") }}
-                        </option>
-                    </select>
-                </div>
-                <template v-if="dayOrWeek === 'day'">
-                    <div class="col-xs-12 col-sm-3 col-md-3">
-                        <input
-                            class="form-control"
-                            type="date"
-                            v-model="copyFrom"
-                        />
-                    </div>
-                    <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
-                        <i class="fa fa-angle-double-right"></i>
-                    </div>
-                    <div class="col-xs-12 col-sm-3 col-md-3">
-                        <input
-                            class="form-control"
-                            type="date"
-                            v-model="copyTo"
-                        />
-                    </div>
-                    <div class="col-xs-12 col-sm-5 col-md-1">
-                        <button
-                            class="btn btn-action float-end"
-                            @click="copyDay"
-                        >
-                            {{ $t("copy_range") }}
-                        </button>
-                    </div>
-                </template>
-                <template v-else>
-                    <div class="col-xs-12 col-sm-3 col-md-3">
-                        <select
-                            v-model="copyFromWeek"
-                            id="copyFromWeek"
-                            class="form-select"
-                        >
-                            <option
-                                v-for="w in lastWeeks"
-                                :value="w.value"
-                                :key="w.value"
-                            >
-                                {{ w.text }}
-                            </option>
-                        </select>
-                    </div>
-                    <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
-                        <i class="fa fa-angle-double-right"></i>
-                    </div>
-                    <div class="col-xs-12 col-sm-3 col-md-3">
-                        <select
-                            v-model="copyToWeek"
-                            id="copyToWeek"
-                            class="form-select"
-                        >
-                            <option
-                                v-for="w in nextWeeks"
-                                :value="w.value"
-                                :key="w.value"
-                            >
-                                {{ w.text }}
-                            </option>
-                        </select>
-                    </div>
-                    <div class="col-xs-12 col-sm-5 col-md-1">
-                        <button
-                            class="btn btn-action float-end"
-                            @click="copyWeek"
-                        >
-                            {{ $t("copy_range") }}
-                        </button>
-                    </div>
-                </template>
-            </div>
-        </div>
+        <template v-else>
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <select
+              v-model="copyFromWeek"
+              id="copyFromWeek"
+              class="form-select"
+            >
+              <option v-for="w in lastWeeks" :value="w.value" :key="w.value">
+                {{ w.text }}
+              </option>
+            </select>
+          </div>
+          <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
+            <i class="fa fa-angle-double-right"></i>
+          </div>
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <select v-model="copyToWeek" id="copyToWeek" class="form-select">
+              <option v-for="w in nextWeeks" :value="w.value" :key="w.value">
+                {{ w.text }}
+              </option>
+            </select>
+          </div>
+          <div class="col-xs-12 col-sm-5 col-md-1">
+            <button class="btn btn-action float-end" @click="copyWeek">
+              {{ $t("copy_range") }}
+            </button>
+          </div>
+        </template>
+      </div>
    </div>
+  </div>

-    <!-- not directly seen, but include in a modal -->
-    <edit-location ref="editLocation"></edit-location>
+  <!-- not directly seen, but include in a modal -->
+  <edit-location ref="editLocation"></edit-location>
 </template>

 <script setup lang="ts">
 import type {
-    CalendarOptions,
-    DatesSetArg,
-    EventInput,
+  CalendarOptions,
+  DatesSetArg,
+  EventInput,
 } from "@fullcalendar/core";
 import { computed, ref, onMounted } from "vue";
 import { useStore } from "vuex";
@@ -227,14 +179,14 @@ import { key } from "./store";
 import FullCalendar from "@fullcalendar/vue3";
 import frLocale from "@fullcalendar/core/locales/fr";
 import interactionPlugin, {
-    EventResizeDoneArg,
+  EventResizeDoneArg,
 } from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import {
-    EventApi,
-    DateSelectArg,
-    EventDropArg,
-    EventClickArg,
+  EventApi,
+  DateSelectArg,
+  EventDropArg,
+  EventClickArg,
 } from "@fullcalendar/core";
 import { dateToISO, ISOToDate } from "ChillMainAssets/chill/js/date";
 import VueMultiselect from "vue-multiselect";
@@ -255,96 +207,96 @@ const copyFromWeek = ref<string | null>(null);
 const copyToWeek = ref<string | null>(null);

 interface Weeks {
-    value: string | null;
-    text: string;
+  value: string | null;
+  text: string;
 }

 const getMonday = (week: number): Date => {
-    const lastMonday = new Date();
-    lastMonday.setDate(
-        lastMonday.getDate() - ((lastMonday.getDay() + 6) % 7) + week * 7,
-    );
-    return lastMonday;
+  const lastMonday = new Date();
+  lastMonday.setDate(
+    lastMonday.getDate() - ((lastMonday.getDay() + 6) % 7) + week * 7,
+  );
+  return lastMonday;
 };

 const dateOptions: Intl.DateTimeFormatOptions = {
-    weekday: "long",
-    year: "numeric",
-    month: "long",
-    day: "numeric",
+  weekday: "long",
+  year: "numeric",
+  month: "long",
+  day: "numeric",
 };

 const lastWeeks = computed((): Weeks[] =>
-    Array.from(Array(30).keys()).map((w) => {
-        const lastMonday = getMonday(15 - w);
-        return {
-            value: dateToISO(lastMonday),
-            text: `Semaine du ${lastMonday.toLocaleDateString("fr-FR", dateOptions)}`,
-        };
-    }),
+  Array.from(Array(30).keys()).map((w) => {
+    const lastMonday = getMonday(15 - w);
+    return {
+      value: dateToISO(lastMonday),
+      text: `Semaine du ${lastMonday.toLocaleDateString("fr-FR", dateOptions)}`,
+    };
+  }),
 );

 const nextWeeks = computed((): Weeks[] =>
-    Array.from(Array(52).keys()).map((w) => {
-        const nextMonday = getMonday(w + 1);
-        return {
-            value: dateToISO(nextMonday),
-            text: `Semaine du ${nextMonday.toLocaleDateString("fr-FR", dateOptions)}`,
-        };
-    }),
+  Array.from(Array(52).keys()).map((w) => {
+    const nextMonday = getMonday(w + 1);
+    return {
+      value: dateToISO(nextMonday),
+      text: `Semaine du ${nextMonday.toLocaleDateString("fr-FR", dateOptions)}`,
+    };
+  }),
 );

 const formatDate = (datetime: string) => {
-    console.log(typeof datetime);
-    return ISOToDate(datetime);
+  console.log(typeof datetime);
+  return ISOToDate(datetime);
 };

 const baseOptions = ref<CalendarOptions>({
-    locale: frLocale,
-    plugins: [interactionPlugin, timeGridPlugin],
-    initialView: "timeGridWeek",
-    initialDate: new Date(),
-    scrollTimeReset: false,
-    selectable: true,
-    // when the dates are changes in the fullcalendar view OR when new events are added
-    datesSet: onDatesSet,
-    // when a date is selected
-    select: onDateSelect,
-    // when a event is resized
-    eventResize: onEventDropOrResize,
-    // when an event is moved
-    eventDrop: onEventDropOrResize,
-    // when an event si clicked
-    eventClick: onEventClick,
-    selectMirror: false,
-    editable: true,
-    headerToolbar: {
-        left: "prev,next today",
-        center: "title",
-        right: "timeGridWeek,timeGridDay",
-    },
+  locale: frLocale,
+  plugins: [interactionPlugin, timeGridPlugin],
+  initialView: "timeGridWeek",
+  initialDate: new Date(),
+  scrollTimeReset: false,
+  selectable: true,
+  // when the dates are changes in the fullcalendar view OR when new events are added
+  datesSet: onDatesSet,
+  // when a date is selected
+  select: onDateSelect,
+  // when a event is resized
+  eventResize: onEventDropOrResize,
+  // when an event is moved
+  eventDrop: onEventDropOrResize,
+  // when an event si clicked
+  eventClick: onEventClick,
+  selectMirror: false,
+  editable: true,
+  headerToolbar: {
+    left: "prev,next today",
+    center: "title",
+    right: "timeGridWeek,timeGridDay",
+  },
 });

 const ranges = computed<EventInput[]>(() => {
-    return store.state.calendarRanges.ranges;
+  return store.state.calendarRanges.ranges;
 });

 const locations = computed<Location[]>(() => {
-    return store.state.locations.locations;
+  return store.state.locations.locations;
 });

 const pickedLocation = computed<Location | null>({
-    get(): Location | null {
-        return (
-            store.state.locations.locationPicked ||
-            store.state.locations.currentLocation
-        );
-    },
-    set(newLocation: Location | null): void {
-        store.commit("locations/setLocationPicked", newLocation, {
-            root: true,
-        });
-    },
+  get(): Location | null {
+    return (
+      store.state.locations.locationPicked ||
+      store.state.locations.currentLocation
+    );
+  },
+  set(newLocation: Location | null): void {
+    store.commit("locations/setLocationPicked", newLocation, {
+      root: true,
+    });
+  },
 });

 /**
@@ -373,116 +325,116 @@ const sources = computed<EventSourceInput[]>(() => {
 */

 const calendarOptions = computed((): CalendarOptions => {
-    return {
-        ...baseOptions.value,
-        weekends: showWeekends.value,
-        slotDuration: slotDuration.value,
-        events: ranges.value,
-        slotMinTime: slotMinTime.value,
-        slotMaxTime: slotMaxTime.value,
-    };
+  return {
+    ...baseOptions.value,
+    weekends: showWeekends.value,
+    slotDuration: slotDuration.value,
+    events: ranges.value,
+    slotMinTime: slotMinTime.value,
+    slotMaxTime: slotMaxTime.value,
+  };
 });

 /**
 * launched when the calendar range date change
 */
 function onDatesSet(event: DatesSetArg): void {
-    store.dispatch("fullCalendar/setCurrentDatesView", {
-        start: event.start,
-        end: event.end,
-    });
+  store.dispatch("fullCalendar/setCurrentDatesView", {
+    start: event.start,
+    end: event.end,
+  });
 }

 function onDateSelect(event: DateSelectArg): void {
-    if (null === pickedLocation.value) {
-        window.alert(
-            "Indiquez une localisation avant de créer une période de disponibilité.",
-        );
-        return;
-    }
+  if (null === pickedLocation.value) {
+    window.alert(
+      "Indiquez une localisation avant de créer une période de disponibilité.",
+    );
+    return;
+  }

-    store.dispatch("calendarRanges/createRange", {
-        start: event.start,
-        end: event.end,
-        location: pickedLocation.value,
-    });
+  store.dispatch("calendarRanges/createRange", {
+    start: event.start,
+    end: event.end,
+    location: pickedLocation.value,
+  });
 }

 /**
 * When a calendar range is deleted
 */
 function onClickDelete(event: EventApi): void {
-    if (event.extendedProps.is !== "range") {
-        return;
-    }
+  if (event.extendedProps.is !== "range") {
+    return;
+  }

-    store.dispatch(
-        "calendarRanges/deleteRange",
-        event.extendedProps.calendarRangeId,
-    );
+  store.dispatch(
+    "calendarRanges/deleteRange",
+    event.extendedProps.calendarRangeId,
+  );
 }

 function onEventDropOrResize(payload: EventDropArg | EventResizeDoneArg) {
-    if (payload.event.extendedProps.is !== "range") {
-        return;
-    }
+  if (payload.event.extendedProps.is !== "range") {
+    return;
+  }

-    store.dispatch("calendarRanges/patchRangeTime", {
-        calendarRangeId: payload.event.extendedProps.calendarRangeId,
-        start: payload.event.start,
-        end: payload.event.end,
-    });
+  store.dispatch("calendarRanges/patchRangeTime", {
+    calendarRangeId: payload.event.extendedProps.calendarRangeId,
+    start: payload.event.start,
+    end: payload.event.end,
+  });
 }

 function onEventClick(payload: EventClickArg): void {
-    // @ts-ignore TS does not recognize the target. But it does exists.
-    if (payload.jsEvent.target.classList.contains("delete")) {
-        return;
-    }
-    if (payload.event.extendedProps.is !== "range") {
-        return;
-    }
+  // @ts-ignore TS does not recognize the target. But it does exists.
+  if (payload.jsEvent.target.classList.contains("delete")) {
+    return;
+  }
+  if (payload.event.extendedProps.is !== "range") {
+    return;
+  }

-    editLocation.value?.startEdit(payload.event);
+  editLocation.value?.startEdit(payload.event);
 }

 function copyDay() {
-    if (null === copyFrom.value || null === copyTo.value) {
-        return;
-    }
-    store.dispatch("calendarRanges/copyFromDayToAnotherDay", {
-        from: ISOToDate(copyFrom.value),
-        to: ISOToDate(copyTo.value),
-    });
+  if (null === copyFrom.value || null === copyTo.value) {
+    return;
+  }
+  store.dispatch("calendarRanges/copyFromDayToAnotherDay", {
+    from: ISOToDate(copyFrom.value),
+    to: ISOToDate(copyTo.value),
+  });
 }

 function copyWeek() {
-    if (null === copyFromWeek.value || null === copyToWeek.value) {
-        return;
-    }
-    store.dispatch("calendarRanges/copyFromWeekToAnotherWeek", {
-        fromMonday: ISOToDate(copyFromWeek.value),
-        toMonday: ISOToDate(copyToWeek.value),
-    });
+  if (null === copyFromWeek.value || null === copyToWeek.value) {
+    return;
+  }
+  store.dispatch("calendarRanges/copyFromWeekToAnotherWeek", {
+    fromMonday: ISOToDate(copyFromWeek.value),
+    toMonday: ISOToDate(copyToWeek.value),
+  });
 }

 onMounted(() => {
-    copyFromWeek.value = dateToISO(getMonday(0));
-    copyToWeek.value = dateToISO(getMonday(1));
+  copyFromWeek.value = dateToISO(getMonday(0));
+  copyToWeek.value = dateToISO(getMonday(1));
 });
 </script>

 <style scoped>
 #copy-widget {
-    position: sticky;
-    bottom: 0px;
-    background-color: white;
-    z-index: 9999999999;
-    padding: 0.25rem 0 0.25rem;
+  position: sticky;
+  bottom: 0px;
+  background-color: white;
+  z-index: 9999999999;
+  padding: 0.25rem 0 0.25rem;
 }
 div.copy-chevron {
-    text-align: center;
-    font-size: x-large;
-    width: 2rem;
+  text-align: center;
+  font-size: x-large;
+  width: 2rem;
 }
 </style>
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/Components/EditLocation.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/Components/EditLocation.vue
@@ -1,28 +1,28 @@
 <template>
-    <component :is="Teleport" to="body">
-        <modal v-if="showModal" @close="closeModal">
-            <template v-slot:header>
-                <h3>{{ "Modifier le lieu" }}</h3>
-            </template>
+  <component :is="Teleport" to="body">
+    <modal v-if="showModal" @close="closeModal">
+      <template v-slot:header>
+        <h3>{{ "Modifier le lieu" }}</h3>
+      </template>

-            <template v-slot:body>
-                <div></div>
-                <label>Localisation</label>
-                <vue-multiselect
-                    v-model="location"
-                    :options="locations"
-                    :label="'name'"
-                    :track-by="'id'"
-                ></vue-multiselect>
-            </template>
+      <template v-slot:body>
+        <div></div>
+        <label>Localisation</label>
+        <vue-multiselect
+          v-model="location"
+          :options="locations"
+          :label="'name'"
+          :track-by="'id'"
+        ></vue-multiselect>
+      </template>

-            <template v-slot:footer>
-                <button class="btn btn-save" @click="saveAndClose">
-                    {{ "Enregistrer" }}
-                </button>
-            </template>
-        </modal>
-    </component>
+      <template v-slot:footer>
+        <button class="btn btn-save" @click="saveAndClose">
+          {{ "Enregistrer" }}
+        </button>
+      </template>
+    </modal>
+  </component>
 </template>

 <script setup lang="ts">
@@ -39,7 +39,7 @@ import VueMultiselect from "vue-multiselect";
 import { Teleport as teleport_, TeleportProps, VNodeProps } from "vue";

 const Teleport = teleport_ as new () => {
-    $props: VNodeProps & TeleportProps;
+  $props: VNodeProps & TeleportProps;
 };

 const store = useStore(key);
@@ -50,37 +50,37 @@ const showModal = ref(false);
 //const tele = ref<InstanceType<typeof Teleport> | null>(null);

 const locations = computed<Location[]>(() => {
-    return store.state.locations.locations;
+  return store.state.locations.locations;
 });

 const startEdit = function (event: EventApi): void {
-    console.log("startEditing", event);
-    calendarRangeId.value = event.extendedProps.calendarRangeId;
-    location.value =
-        store.getters["locations/getLocationById"](
-            event.extendedProps.locationId,
-        ) || null;
+  console.log("startEditing", event);
+  calendarRangeId.value = event.extendedProps.calendarRangeId;
+  location.value =
+    store.getters["locations/getLocationById"](
+      event.extendedProps.locationId,
+    ) || null;

-    console.log("new location value", location.value);
-    console.log("calendar range id", calendarRangeId.value);
-    showModal.value = true;
+  console.log("new location value", location.value);
+  console.log("calendar range id", calendarRangeId.value);
+  showModal.value = true;
 };

 const saveAndClose = function (e: Event): void {
-    console.log("saveEditAndClose", e);
+  console.log("saveEditAndClose", e);

-    store
-        .dispatch("calendarRanges/patchRangeLocation", {
-            location: location.value,
-            calendarRangeId: calendarRangeId.value,
-        })
-        .then((_) => {
-            showModal.value = false;
-        });
+  store
+    .dispatch("calendarRanges/patchRangeLocation", {
+      location: location.value,
+      calendarRangeId: calendarRangeId.value,
+    })
+    .then((_) => {
+      showModal.value = false;
+    });
 };

 const closeModal = function (_: any): void {
-    showModal.value = false;
+  showModal.value = false;
 };

 defineExpose({ startEdit });
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.ts
@@ -1,27 +1,27 @@
 const appMessages = {
-    fr: {
-        created_availabilities: "Lieu des plages de disponibilités créées",
-        edit_your_calendar_range: "Planifiez vos plages de disponibilités",
-        show_my_calendar: "Afficher mon calendrier",
-        show_weekends: "Afficher les week-ends",
-        copy_range: "Copier",
-        copy_range_from_to: "Copier les plages",
-        from_day_to_day: "d'un jour à l'autre",
-        from_week_to_week: "d'une semaine à l'autre",
-        copy_range_how_to:
-            "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi.",
-        new_range_to_save: "Nouvelles plages à enregistrer",
-        update_range_to_save: "Plages à modifier",
-        delete_range_to_save: "Plages à supprimer",
-        by: "Par",
-        main_user_concerned: "Utilisateur concerné",
-        dateFrom: "De",
-        dateTo: "à",
-        day: "Jour",
-        week: "Semaine",
-        month: "Mois",
-        today: "Aujourd'hui",
-    },
+  fr: {
+    created_availabilities: "Lieu des plages de disponibilités créées",
+    edit_your_calendar_range: "Planifiez vos plages de disponibilités",
+    show_my_calendar: "Afficher mon calendrier",
+    show_weekends: "Afficher les week-ends",
+    copy_range: "Copier",
+    copy_range_from_to: "Copier les plages",
+    from_day_to_day: "d'un jour à l'autre",
+    from_week_to_week: "d'une semaine à l'autre",
+    copy_range_how_to:
+      "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi.",
+    new_range_to_save: "Nouvelles plages à enregistrer",
+    update_range_to_save: "Plages à modifier",
+    delete_range_to_save: "Plages à supprimer",
+    by: "Par",
+    main_user_concerned: "Utilisateur concerné",
+    dateFrom: "De",
+    dateTo: "à",
+    day: "Jour",
+    week: "Semaine",
+    month: "Mois",
+    today: "Aujourd'hui",
+  },
 };

 export { appMessages };
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts
@@ -7,13 +7,13 @@ import App2 from "./App2.vue";
 import { useI18n } from "vue-i18n";

 futureStore().then((store) => {
-    const i18n = _createI18n(appMessages, false);
+  const i18n = _createI18n(appMessages, false);

-    const app = createApp({
-        template: `<app></app>`,
-    })
-        .use(store, key)
-        .use(i18n)
-        .component("app", App2)
-        .mount("#myCalendar");
+  const app = createApp({
+    template: `<app></app>`,
+  })
+    .use(store, key)
+    .use(i18n)
+    .component("app", App2)
+    .mount("#myCalendar");
 });
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts
@@ -5,7 +5,7 @@ import me, { MeState } from "./modules/me";
 import fullCalendar, { FullCalendarState } from "./modules/fullcalendar";
 import calendarRanges, { CalendarRangesState } from "./modules/calendarRanges";
 import calendarRemotes, {
-    CalendarRemotesState,
+  CalendarRemotesState,
 } from "./modules/calendarRemotes";
 import { whoami } from "../../../../../../ChillMainBundle/Resources/public/lib/api/user";
 import { User } from "../../../../../../ChillMainBundle/Resources/public/types";
@@ -15,42 +15,40 @@ import calendarLocals, { CalendarLocalsState } from "./modules/calendarLocals";
 const debug = process.env.NODE_ENV !== "production";

 export interface State {
-    calendarRanges: CalendarRangesState;
-    calendarRemotes: CalendarRemotesState;
-    calendarLocals: CalendarLocalsState;
-    fullCalendar: FullCalendarState;
-    me: MeState;
-    locations: LocationState;
+  calendarRanges: CalendarRangesState;
+  calendarRemotes: CalendarRemotesState;
+  calendarLocals: CalendarLocalsState;
+  fullCalendar: FullCalendarState;
+  me: MeState;
+  locations: LocationState;
 }

 export const key: InjectionKey<Store<State>> = Symbol();

 const futureStore = function (): Promise<Store<State>> {
-    return whoami().then((user: User) => {
-        const store = createStore<State>({
-            strict: debug,
-            modules: {
-                me,
-                fullCalendar,
-                calendarRanges,
-                calendarRemotes,
-                calendarLocals,
-                locations,
-            },
-            mutations: {},
-        });
-
-        store.commit("me/setWhoAmi", user, { root: true });
-        store
-            .dispatch("locations/getLocations", null, { root: true })
-            .then((_) => {
-                return store.dispatch("locations/getCurrentLocation", null, {
-                    root: true,
-                });
-            });
-
-        return Promise.resolve(store);
+  return whoami().then((user: User) => {
+    const store = createStore<State>({
+      strict: debug,
+      modules: {
+        me,
+        fullCalendar,
+        calendarRanges,
+        calendarRemotes,
+        calendarLocals,
+        locations,
+      },
+      mutations: {},
    });
+
+    store.commit("me/setWhoAmi", user, { root: true });
+    store.dispatch("locations/getLocations", null, { root: true }).then((_) => {
+      return store.dispatch("locations/getCurrentLocation", null, {
+        root: true,
+      });
+    });
+
+    return Promise.resolve(store);
+  });
 };

 export default futureStore;
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarLocals.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarLocals.ts
@@ -8,109 +8,99 @@ import { TransportExceptionInterface } from "../../../../../../../ChillMainBundl
 import { COLORS } from "../../../Calendar/const";

 export interface CalendarLocalsState {
-    locals: EventInput[];
-    localsLoaded: { start: number; end: number }[];
-    localsIndex: Set<string>;
-    key: number;
+  locals: EventInput[];
+  localsLoaded: { start: number; end: number }[];
+  localsIndex: Set<string>;
+  key: number;
 }

 type Context = ActionContext<CalendarLocalsState, State>;

 export default {
-    namespaced: true,
-    state: (): CalendarLocalsState => ({
-        locals: [],
-        localsLoaded: [],
-        localsIndex: new Set<string>(),
-        key: 0,
-    }),
-    getters: {
-        isLocalsLoaded:
-            (state: CalendarLocalsState) =>
-            ({ start, end }: { start: Date; end: Date }): boolean => {
-                for (const range of state.localsLoaded) {
-                    if (
-                        start.getTime() === range.start &&
-                        end.getTime() === range.end
-                    ) {
-                        return true;
-                    }
-                }
+  namespaced: true,
+  state: (): CalendarLocalsState => ({
+    locals: [],
+    localsLoaded: [],
+    localsIndex: new Set<string>(),
+    key: 0,
+  }),
+  getters: {
+    isLocalsLoaded:
+      (state: CalendarLocalsState) =>
+      ({ start, end }: { start: Date; end: Date }): boolean => {
+        for (const range of state.localsLoaded) {
+          if (start.getTime() === range.start && end.getTime() === range.end) {
+            return true;
+          }
+        }

-                return false;
-            },
+        return false;
+      },
+  },
+  mutations: {
+    addLocals(state: CalendarLocalsState, ranges: CalendarLight[]) {
+      console.log("addLocals", ranges);
+
+      const toAdd = ranges
+        .map((cr) => localsToFullCalendarEvent(cr))
+        .filter((r) => !state.localsIndex.has(r.id));
+
+      toAdd.forEach((r) => {
+        state.localsIndex.add(r.id);
+        state.locals.push(r);
+      });
+      state.key = state.key + toAdd.length;
    },
-    mutations: {
-        addLocals(state: CalendarLocalsState, ranges: CalendarLight[]) {
-            console.log("addLocals", ranges);
-
-            const toAdd = ranges
-                .map((cr) => localsToFullCalendarEvent(cr))
-                .filter((r) => !state.localsIndex.has(r.id));
-
-            toAdd.forEach((r) => {
-                state.localsIndex.add(r.id);
-                state.locals.push(r);
-            });
-            state.key = state.key + toAdd.length;
-        },
-        addLoaded(
-            state: CalendarLocalsState,
-            payload: { start: Date; end: Date },
-        ) {
-            state.localsLoaded.push({
-                start: payload.start.getTime(),
-                end: payload.end.getTime(),
-            });
-        },
+    addLoaded(state: CalendarLocalsState, payload: { start: Date; end: Date }) {
+      state.localsLoaded.push({
+        start: payload.start.getTime(),
+        end: payload.end.getTime(),
+      });
    },
-    actions: {
-        fetchLocals(
-            ctx: Context,
-            payload: { start: Date; end: Date },
-        ): Promise<null> {
-            const start = payload.start;
-            const end = payload.end;
+  },
+  actions: {
+    fetchLocals(
+      ctx: Context,
+      payload: { start: Date; end: Date },
+    ): Promise<null> {
+      const start = payload.start;
+      const end = payload.end;

-            if (ctx.rootGetters["me/getMe"] === null) {
-                return Promise.resolve(null);
-            }
+      if (ctx.rootGetters["me/getMe"] === null) {
+        return Promise.resolve(null);
+      }

-            if (ctx.getters.isLocalsLoaded({ start, end })) {
-                return Promise.resolve(ctx.getters.getRangeSource);
-            }
+      if (ctx.getters.isLocalsLoaded({ start, end })) {
+        return Promise.resolve(ctx.getters.getRangeSource);
+      }

-            ctx.commit("addLoaded", {
-                start: start,
-                end: end,
-            });
+      ctx.commit("addLoaded", {
+        start: start,
+        end: end,
+      });

-            return fetchCalendarLocalForUser(
-                ctx.rootGetters["me/getMe"],
-                start,
-                end,
-            )
-                .then((remotes: CalendarLight[]) => {
-                    // to be add when reactivity problem will be solve ?
-                    //ctx.commit('addRemotes', remotes);
-                    const inputs = remotes
-                        .map((cr) => localsToFullCalendarEvent(cr))
-                        .map((cr) => ({
-                            ...cr,
-                            backgroundColor: COLORS[0],
-                            textColor: "black",
-                            editable: false,
-                        }));
-                    ctx.commit("calendarRanges/addExternals", inputs, {
-                        root: true,
-                    });
-                    return Promise.resolve(null);
-                })
-                .catch((e: TransportExceptionInterface) => {
-                    console.error(e);
+      return fetchCalendarLocalForUser(ctx.rootGetters["me/getMe"], start, end)
+        .then((remotes: CalendarLight[]) => {
+          // to be add when reactivity problem will be solve ?
+          //ctx.commit('addRemotes', remotes);
+          const inputs = remotes
+            .map((cr) => localsToFullCalendarEvent(cr))
+            .map((cr) => ({
+              ...cr,
+              backgroundColor: COLORS[0],
+              textColor: "black",
+              editable: false,
+            }));
+          ctx.commit("calendarRanges/addExternals", inputs, {
+            root: true,
+          });
+          return Promise.resolve(null);
+        })
+        .catch((e: TransportExceptionInterface) => {
+          console.error(e);

-                    return Promise.resolve(null);
-                });
-        },
+          return Promise.resolve(null);
+        });
    },
+  },
 } as Module<CalendarLocalsState, State>;
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
@@ -1,10 +1,10 @@
 import { State } from "./../index";
 import { ActionContext, Module } from "vuex";
 import {
-    CalendarRange,
-    CalendarRangeCreate,
-    CalendarRangeEdit,
-    isEventInputCalendarRange,
+  CalendarRange,
+  CalendarRangeCreate,
+  CalendarRangeEdit,
+  isEventInputCalendarRange,
 } from "../../../../types";
 import { Location } from "../../../../../../../ChillMainBundle/Resources/public/types";
 import { fetchCalendarRangeForUser } from "../../../Calendar/api";
@@ -12,369 +12,332 @@ import { calendarRangeToFullCalendarEvent } from "../../../Calendar/store/utils"
 import { EventInput } from "@fullcalendar/core";
 import { makeFetch } from "../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 import {
-    datetimeToISO,
-    dateToISO,
-    ISOToDatetime,
+  datetimeToISO,
+  dateToISO,
+  ISOToDatetime,
 } from "../../../../../../../ChillMainBundle/Resources/public/chill/js/date";
 import type { EventInputCalendarRange } from "../../../../types";

 export interface CalendarRangesState {
-    ranges: (EventInput | EventInputCalendarRange)[];
-    rangesLoaded: { start: number; end: number }[];
-    rangesIndex: Set<string>;
-    key: number;
+  ranges: (EventInput | EventInputCalendarRange)[];
+  rangesLoaded: { start: number; end: number }[];
+  rangesIndex: Set<string>;
+  key: number;
 }

 type Context = ActionContext<CalendarRangesState, State>;

 export default {
-    namespaced: true,
-    state: (): CalendarRangesState => ({
-        ranges: [],
-        rangesLoaded: [],
-        rangesIndex: new Set<string>(),
-        key: 0,
-    }),
-    getters: {
-        isRangeLoaded:
-            (state: CalendarRangesState) =>
-            ({ start, end }: { start: Date; end: Date }): boolean => {
-                for (const range of state.rangesLoaded) {
-                    if (
-                        start.getTime() === range.start &&
-                        end.getTime() === range.end
-                    ) {
-                        return true;
-                    }
-                }
+  namespaced: true,
+  state: (): CalendarRangesState => ({
+    ranges: [],
+    rangesLoaded: [],
+    rangesIndex: new Set<string>(),
+    key: 0,
+  }),
+  getters: {
+    isRangeLoaded:
+      (state: CalendarRangesState) =>
+      ({ start, end }: { start: Date; end: Date }): boolean => {
+        for (const range of state.rangesLoaded) {
+          if (start.getTime() === range.start && end.getTime() === range.end) {
+            return true;
+          }
+        }

-                return false;
-            },
-        getRangesOnDate:
-            (state: CalendarRangesState) =>
-            (date: Date): EventInputCalendarRange[] => {
-                const founds = [];
-                const dateStr = dateToISO(date) as string;
+        return false;
+      },
+    getRangesOnDate:
+      (state: CalendarRangesState) =>
+      (date: Date): EventInputCalendarRange[] => {
+        const founds = [];
+        const dateStr = dateToISO(date) as string;

-                for (const range of state.ranges) {
-                    if (
-                        isEventInputCalendarRange(range) &&
-                        range.start.startsWith(dateStr)
-                    ) {
-                        founds.push(range);
-                    }
-                }
+        for (const range of state.ranges) {
+          if (
+            isEventInputCalendarRange(range) &&
+            range.start.startsWith(dateStr)
+          ) {
+            founds.push(range);
+          }
+        }

-                return founds;
-            },
-        getRangesOnWeek:
-            (state: CalendarRangesState) =>
-            (mondayDate: Date): EventInputCalendarRange[] => {
-                const founds = [];
-                for (const d of Array.from(Array(7).keys())) {
-                    const dateOfWeek = new Date(mondayDate);
-                    dateOfWeek.setDate(mondayDate.getDate() + d);
-                    const dateStr = dateToISO(dateOfWeek) as string;
-                    for (const range of state.ranges) {
-                        if (
-                            isEventInputCalendarRange(range) &&
-                            range.start.startsWith(dateStr)
-                        ) {
-                            founds.push(range);
-                        }
-                    }
-                }
+        return founds;
+      },
+    getRangesOnWeek:
+      (state: CalendarRangesState) =>
+      (mondayDate: Date): EventInputCalendarRange[] => {
+        const founds = [];
+        for (const d of Array.from(Array(7).keys())) {
+          const dateOfWeek = new Date(mondayDate);
+          dateOfWeek.setDate(mondayDate.getDate() + d);
+          const dateStr = dateToISO(dateOfWeek) as string;
+          for (const range of state.ranges) {
+            if (
+              isEventInputCalendarRange(range) &&
+              range.start.startsWith(dateStr)
+            ) {
+              founds.push(range);
+            }
+          }
+        }

-                return founds;
-            },
+        return founds;
+      },
+  },
+  mutations: {
+    addRanges(state: CalendarRangesState, ranges: CalendarRange[]) {
+      const toAdd = ranges
+        .map((cr) => calendarRangeToFullCalendarEvent(cr))
+        .map((cr) => ({
+          ...cr,
+          backgroundColor: "white",
+          borderColor: "#3788d8",
+          textColor: "black",
+        }))
+        .filter((r) => !state.rangesIndex.has(r.id));
+
+      toAdd.forEach((r) => {
+        state.rangesIndex.add(r.id);
+        state.ranges.push(r);
+      });
+      state.key = state.key + toAdd.length;
    },
-    mutations: {
-        addRanges(state: CalendarRangesState, ranges: CalendarRange[]) {
-            const toAdd = ranges
-                .map((cr) => calendarRangeToFullCalendarEvent(cr))
-                .map((cr) => ({
-                    ...cr,
-                    backgroundColor: "white",
-                    borderColor: "#3788d8",
-                    textColor: "black",
-                }))
-                .filter((r) => !state.rangesIndex.has(r.id));
+    addExternals(
+      state: CalendarRangesState,
+      externalEvents: (EventInput & { id: string })[],
+    ) {
+      const toAdd = externalEvents.filter((r) => !state.rangesIndex.has(r.id));

-            toAdd.forEach((r) => {
-                state.rangesIndex.add(r.id);
-                state.ranges.push(r);
-            });
-            state.key = state.key + toAdd.length;
-        },
-        addExternals(
-            state: CalendarRangesState,
-            externalEvents: (EventInput & { id: string })[],
-        ) {
-            const toAdd = externalEvents.filter(
-                (r) => !state.rangesIndex.has(r.id),
-            );
-
-            toAdd.forEach((r) => {
-                state.rangesIndex.add(r.id);
-                state.ranges.push(r);
-            });
-            state.key = state.key + toAdd.length;
-        },
-        addLoaded(
-            state: CalendarRangesState,
-            payload: { start: Date; end: Date },
-        ) {
-            state.rangesLoaded.push({
-                start: payload.start.getTime(),
-                end: payload.end.getTime(),
-            });
-        },
-        addRange(state: CalendarRangesState, payload: CalendarRange) {
-            const asEvent = calendarRangeToFullCalendarEvent(payload);
-            state.ranges.push({
-                ...asEvent,
-                backgroundColor: "white",
-                borderColor: "#3788d8",
-                textColor: "black",
-            });
-            state.rangesIndex.add(asEvent.id);
-            state.key = state.key + 1;
-        },
-        removeRange(state: CalendarRangesState, calendarRangeId: number) {
-            const found = state.ranges.find(
-                (r) =>
-                    r.calendarRangeId === calendarRangeId && r.is === "range",
-            );
-
-            if (found !== undefined) {
-                state.ranges = state.ranges.filter(
-                    (r) =>
-                        !(
-                            r.calendarRangeId === calendarRangeId &&
-                            r.is === "range"
-                        ),
-                );
-
-                if (typeof found.id === "string") {
-                    // should always be true
-                    state.rangesIndex.delete(found.id);
-                }
-
-                state.key = state.key + 1;
-            }
-        },
-        updateRange(state: CalendarRangesState, range: CalendarRange) {
-            const found = state.ranges.find(
-                (r) => r.calendarRangeId === range.id && r.is === "range",
-            );
-            const newEvent = calendarRangeToFullCalendarEvent(range);
-
-            if (found !== undefined) {
-                found.start = newEvent.start;
-                found.end = newEvent.end;
-                found.locationId = range.location.id;
-                found.locationName = range.location.name;
-            }
-
-            state.key = state.key + 1;
-        },
+      toAdd.forEach((r) => {
+        state.rangesIndex.add(r.id);
+        state.ranges.push(r);
+      });
+      state.key = state.key + toAdd.length;
    },
-    actions: {
-        fetchRanges(
-            ctx: Context,
-            payload: { start: Date; end: Date },
-        ): Promise<null> {
-            const start = payload.start;
-            const end = payload.end;
-
-            if (ctx.rootGetters["me/getMe"] === null) {
-                return Promise.resolve(ctx.getters.getRangeSource);
-            }
-
-            if (ctx.getters.isRangeLoaded({ start, end })) {
-                return Promise.resolve(ctx.getters.getRangeSource);
-            }
-
-            ctx.commit("addLoaded", {
-                start: start,
-                end: end,
-            });
-
-            return fetchCalendarRangeForUser(
-                ctx.rootGetters["me/getMe"],
-                start,
-                end,
-            ).then((ranges: CalendarRange[]) => {
-                ctx.commit("addRanges", ranges);
-                return Promise.resolve(null);
-            });
-        },
-        createRange(
-            ctx: Context,
-            {
-                start,
-                end,
-                location,
-            }: { start: Date; end: Date; location: Location },
-        ): Promise<null> {
-            const url = `/api/1.0/calendar/calendar-range.json?`;
-
-            if (ctx.rootState.me.me === null) {
-                throw new Error("user is currently null");
-            }
-
-            const body = {
-                user: {
-                    id: ctx.rootState.me.me.id,
-                    type: "user",
-                },
-                startDate: {
-                    datetime: datetimeToISO(start),
-                },
-                endDate: {
-                    datetime: datetimeToISO(end),
-                },
-                location: {
-                    id: location.id,
-                    type: "location",
-                },
-            } as CalendarRangeCreate;
-
-            return makeFetch<CalendarRangeCreate, CalendarRange>(
-                "POST",
-                url,
-                body,
-            )
-                .then((newRange) => {
-                    ctx.commit("addRange", newRange);
-
-                    return Promise.resolve(null);
-                })
-                .catch((error) => {
-                    console.error(error);
-
-                    throw error;
-                });
-        },
-        deleteRange(ctx: Context, calendarRangeId: number) {
-            const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
-
-            makeFetch<undefined, never>("DELETE", url).then(() => {
-                ctx.commit("removeRange", calendarRangeId);
-            });
-        },
-        patchRangeTime(
-            ctx,
-            {
-                calendarRangeId,
-                start,
-                end,
-            }: { calendarRangeId: number; start: Date; end: Date },
-        ): Promise<null> {
-            const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
-            const body = {
-                startDate: {
-                    datetime: datetimeToISO(start),
-                },
-                endDate: {
-                    datetime: datetimeToISO(end),
-                },
-            } as CalendarRangeEdit;
-
-            return makeFetch<CalendarRangeEdit, CalendarRange>(
-                "PATCH",
-                url,
-                body,
-            )
-                .then((range) => {
-                    ctx.commit("updateRange", range);
-                    return Promise.resolve(null);
-                })
-                .catch((error) => {
-                    console.error(error);
-                    return Promise.resolve(null);
-                });
-        },
-        patchRangeLocation(
-            ctx,
-            {
-                location,
-                calendarRangeId,
-            }: { location: Location; calendarRangeId: number },
-        ): Promise<null> {
-            const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
-            const body = {
-                location: {
-                    id: location.id,
-                    type: "location",
-                },
-            } as CalendarRangeEdit;
-
-            return makeFetch<CalendarRangeEdit, CalendarRange>(
-                "PATCH",
-                url,
-                body,
-            )
-                .then((range) => {
-                    ctx.commit("updateRange", range);
-                    return Promise.resolve(null);
-                })
-                .catch((error) => {
-                    console.error(error);
-                    return Promise.resolve(null);
-                });
-        },
-        copyFromDayToAnotherDay(
-            ctx,
-            { from, to }: { from: Date; to: Date },
-        ): Promise<null> {
-            const rangesToCopy: EventInputCalendarRange[] =
-                ctx.getters["getRangesOnDate"](from);
-            const promises = [];
-
-            for (const r of rangesToCopy) {
-                const start = new Date(ISOToDatetime(r.start) as Date);
-                start.setFullYear(
-                    to.getFullYear(),
-                    to.getMonth(),
-                    to.getDate(),
-                );
-                const end = new Date(ISOToDatetime(r.end) as Date);
-                end.setFullYear(to.getFullYear(), to.getMonth(), to.getDate());
-                const location = ctx.rootGetters["locations/getLocationById"](
-                    r.locationId,
-                );
-
-                promises.push(
-                    ctx.dispatch("createRange", { start, end, location }),
-                );
-            }
-
-            return Promise.all(promises).then(() => Promise.resolve(null));
-        },
-        copyFromWeekToAnotherWeek(
-            ctx: Context,
-            { fromMonday, toMonday }: { fromMonday: Date; toMonday: Date },
-        ): Promise<null> {
-            const rangesToCopy: EventInputCalendarRange[] =
-                ctx.getters["getRangesOnWeek"](fromMonday);
-            const promises = [];
-            const diffTime = toMonday.getTime() - fromMonday.getTime();
-            for (const r of rangesToCopy) {
-                const start = new Date(ISOToDatetime(r.start) as Date);
-                const end = new Date(ISOToDatetime(r.end) as Date);
-                start.setTime(start.getTime() + diffTime);
-                end.setTime(end.getTime() + diffTime);
-                const location = ctx.rootGetters["locations/getLocationById"](
-                    r.locationId,
-                );
-
-                promises.push(
-                    ctx.dispatch("createRange", { start, end, location }),
-                );
-            }
-
-            return Promise.all(promises).then(() => Promise.resolve(null));
-        },
+    addLoaded(state: CalendarRangesState, payload: { start: Date; end: Date }) {
+      state.rangesLoaded.push({
+        start: payload.start.getTime(),
+        end: payload.end.getTime(),
+      });
    },
+    addRange(state: CalendarRangesState, payload: CalendarRange) {
+      const asEvent = calendarRangeToFullCalendarEvent(payload);
+      state.ranges.push({
+        ...asEvent,
+        backgroundColor: "white",
+        borderColor: "#3788d8",
+        textColor: "black",
+      });
+      state.rangesIndex.add(asEvent.id);
+      state.key = state.key + 1;
+    },
+    removeRange(state: CalendarRangesState, calendarRangeId: number) {
+      const found = state.ranges.find(
+        (r) => r.calendarRangeId === calendarRangeId && r.is === "range",
+      );
+
+      if (found !== undefined) {
+        state.ranges = state.ranges.filter(
+          (r) => !(r.calendarRangeId === calendarRangeId && r.is === "range"),
+        );
+
+        if (typeof found.id === "string") {
+          // should always be true
+          state.rangesIndex.delete(found.id);
+        }
+
+        state.key = state.key + 1;
+      }
+    },
+    updateRange(state: CalendarRangesState, range: CalendarRange) {
+      const found = state.ranges.find(
+        (r) => r.calendarRangeId === range.id && r.is === "range",
+      );
+      const newEvent = calendarRangeToFullCalendarEvent(range);
+
+      if (found !== undefined) {
+        found.start = newEvent.start;
+        found.end = newEvent.end;
+        found.locationId = range.location.id;
+        found.locationName = range.location.name;
+      }
+
+      state.key = state.key + 1;
+    },
+  },
+  actions: {
+    fetchRanges(
+      ctx: Context,
+      payload: { start: Date; end: Date },
+    ): Promise<null> {
+      const start = payload.start;
+      const end = payload.end;
+
+      if (ctx.rootGetters["me/getMe"] === null) {
+        return Promise.resolve(ctx.getters.getRangeSource);
+      }
+
+      if (ctx.getters.isRangeLoaded({ start, end })) {
+        return Promise.resolve(ctx.getters.getRangeSource);
+      }
+
+      ctx.commit("addLoaded", {
+        start: start,
+        end: end,
+      });
+
+      return fetchCalendarRangeForUser(
+        ctx.rootGetters["me/getMe"],
+        start,
+        end,
+      ).then((ranges: CalendarRange[]) => {
+        ctx.commit("addRanges", ranges);
+        return Promise.resolve(null);
+      });
+    },
+    createRange(
+      ctx: Context,
+      { start, end, location }: { start: Date; end: Date; location: Location },
+    ): Promise<null> {
+      const url = `/api/1.0/calendar/calendar-range.json?`;
+
+      if (ctx.rootState.me.me === null) {
+        throw new Error("user is currently null");
+      }
+
+      const body = {
+        user: {
+          id: ctx.rootState.me.me.id,
+          type: "user",
+        },
+        startDate: {
+          datetime: datetimeToISO(start),
+        },
+        endDate: {
+          datetime: datetimeToISO(end),
+        },
+        location: {
+          id: location.id,
+          type: "location",
+        },
+      } as CalendarRangeCreate;
+
+      return makeFetch<CalendarRangeCreate, CalendarRange>("POST", url, body)
+        .then((newRange) => {
+          ctx.commit("addRange", newRange);
+
+          return Promise.resolve(null);
+        })
+        .catch((error) => {
+          console.error(error);
+
+          throw error;
+        });
+    },
+    deleteRange(ctx: Context, calendarRangeId: number) {
+      const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
+
+      makeFetch<undefined, never>("DELETE", url).then(() => {
+        ctx.commit("removeRange", calendarRangeId);
+      });
+    },
+    patchRangeTime(
+      ctx,
+      {
+        calendarRangeId,
+        start,
+        end,
+      }: { calendarRangeId: number; start: Date; end: Date },
+    ): Promise<null> {
+      const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
+      const body = {
+        startDate: {
+          datetime: datetimeToISO(start),
+        },
+        endDate: {
+          datetime: datetimeToISO(end),
+        },
+      } as CalendarRangeEdit;
+
+      return makeFetch<CalendarRangeEdit, CalendarRange>("PATCH", url, body)
+        .then((range) => {
+          ctx.commit("updateRange", range);
+          return Promise.resolve(null);
+        })
+        .catch((error) => {
+          console.error(error);
+          return Promise.resolve(null);
+        });
+    },
+    patchRangeLocation(
+      ctx,
+      {
+        location,
+        calendarRangeId,
+      }: { location: Location; calendarRangeId: number },
+    ): Promise<null> {
+      const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
+      const body = {
+        location: {
+          id: location.id,
+          type: "location",
+        },
+      } as CalendarRangeEdit;
+
+      return makeFetch<CalendarRangeEdit, CalendarRange>("PATCH", url, body)
+        .then((range) => {
+          ctx.commit("updateRange", range);
+          return Promise.resolve(null);
+        })
+        .catch((error) => {
+          console.error(error);
+          return Promise.resolve(null);
+        });
+    },
+    copyFromDayToAnotherDay(
+      ctx,
+      { from, to }: { from: Date; to: Date },
+    ): Promise<null> {
+      const rangesToCopy: EventInputCalendarRange[] =
+        ctx.getters["getRangesOnDate"](from);
+      const promises = [];
+
+      for (const r of rangesToCopy) {
+        const start = new Date(ISOToDatetime(r.start) as Date);
+        start.setFullYear(to.getFullYear(), to.getMonth(), to.getDate());
+        const end = new Date(ISOToDatetime(r.end) as Date);
+        end.setFullYear(to.getFullYear(), to.getMonth(), to.getDate());
+        const location = ctx.rootGetters["locations/getLocationById"](
+          r.locationId,
+        );
+
+        promises.push(ctx.dispatch("createRange", { start, end, location }));
+      }
+
+      return Promise.all(promises).then(() => Promise.resolve(null));
+    },
+    copyFromWeekToAnotherWeek(
+      ctx: Context,
+      { fromMonday, toMonday }: { fromMonday: Date; toMonday: Date },
+    ): Promise<null> {
+      const rangesToCopy: EventInputCalendarRange[] =
+        ctx.getters["getRangesOnWeek"](fromMonday);
+      const promises = [];
+      const diffTime = toMonday.getTime() - fromMonday.getTime();
+      for (const r of rangesToCopy) {
+        const start = new Date(ISOToDatetime(r.start) as Date);
+        const end = new Date(ISOToDatetime(r.end) as Date);
+        start.setTime(start.getTime() + diffTime);
+        end.setTime(end.getTime() + diffTime);
+        const location = ctx.rootGetters["locations/getLocationById"](
+          r.locationId,
+        );
+
+        promises.push(ctx.dispatch("createRange", { start, end, location }));
+      }
+
+      return Promise.all(promises).then(() => Promise.resolve(null));
+    },
+  },
 } as Module<CalendarRangesState, State>;
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRemotes.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRemotes.ts
@@ -8,109 +8,102 @@ import { TransportExceptionInterface } from "../../../../../../../ChillMainBundl
 import { COLORS } from "../../../Calendar/const";

 export interface CalendarRemotesState {
-    remotes: EventInput[];
-    remotesLoaded: { start: number; end: number }[];
-    remotesIndex: Set<string>;
-    key: number;
+  remotes: EventInput[];
+  remotesLoaded: { start: number; end: number }[];
+  remotesIndex: Set<string>;
+  key: number;
 }

 type Context = ActionContext<CalendarRemotesState, State>;

 export default {
-    namespaced: true,
-    state: (): CalendarRemotesState => ({
-        remotes: [],
-        remotesLoaded: [],
-        remotesIndex: new Set<string>(),
-        key: 0,
-    }),
-    getters: {
-        isRemotesLoaded:
-            (state: CalendarRemotesState) =>
-            ({ start, end }: { start: Date; end: Date }): boolean => {
-                for (const range of state.remotesLoaded) {
-                    if (
-                        start.getTime() === range.start &&
-                        end.getTime() === range.end
-                    ) {
-                        return true;
-                    }
-                }
+  namespaced: true,
+  state: (): CalendarRemotesState => ({
+    remotes: [],
+    remotesLoaded: [],
+    remotesIndex: new Set<string>(),
+    key: 0,
+  }),
+  getters: {
+    isRemotesLoaded:
+      (state: CalendarRemotesState) =>
+      ({ start, end }: { start: Date; end: Date }): boolean => {
+        for (const range of state.remotesLoaded) {
+          if (start.getTime() === range.start && end.getTime() === range.end) {
+            return true;
+          }
+        }

-                return false;
-            },
+        return false;
+      },
+  },
+  mutations: {
+    addRemotes(state: CalendarRemotesState, ranges: CalendarRemote[]) {
+      console.log("addRemotes", ranges);
+
+      const toAdd = ranges
+        .map((cr) => remoteToFullCalendarEvent(cr))
+        .filter((r) => !state.remotesIndex.has(r.id));
+
+      toAdd.forEach((r) => {
+        state.remotesIndex.add(r.id);
+        state.remotes.push(r);
+      });
+      state.key = state.key + toAdd.length;
    },
-    mutations: {
-        addRemotes(state: CalendarRemotesState, ranges: CalendarRemote[]) {
-            console.log("addRemotes", ranges);
-
-            const toAdd = ranges
-                .map((cr) => remoteToFullCalendarEvent(cr))
-                .filter((r) => !state.remotesIndex.has(r.id));
-
-            toAdd.forEach((r) => {
-                state.remotesIndex.add(r.id);
-                state.remotes.push(r);
-            });
-            state.key = state.key + toAdd.length;
-        },
-        addLoaded(
-            state: CalendarRemotesState,
-            payload: { start: Date; end: Date },
-        ) {
-            state.remotesLoaded.push({
-                start: payload.start.getTime(),
-                end: payload.end.getTime(),
-            });
-        },
+    addLoaded(
+      state: CalendarRemotesState,
+      payload: { start: Date; end: Date },
+    ) {
+      state.remotesLoaded.push({
+        start: payload.start.getTime(),
+        end: payload.end.getTime(),
+      });
    },
-    actions: {
-        fetchRemotes(
-            ctx: Context,
-            payload: { start: Date; end: Date },
-        ): Promise<null> {
-            const start = payload.start;
-            const end = payload.end;
+  },
+  actions: {
+    fetchRemotes(
+      ctx: Context,
+      payload: { start: Date; end: Date },
+    ): Promise<null> {
+      const start = payload.start;
+      const end = payload.end;

-            if (ctx.rootGetters["me/getMe"] === null) {
-                return Promise.resolve(null);
-            }
+      if (ctx.rootGetters["me/getMe"] === null) {
+        return Promise.resolve(null);
+      }

-            if (ctx.getters.isRemotesLoaded({ start, end })) {
-                return Promise.resolve(ctx.getters.getRangeSource);
-            }
+      if (ctx.getters.isRemotesLoaded({ start, end })) {
+        return Promise.resolve(ctx.getters.getRangeSource);
+      }

-            ctx.commit("addLoaded", {
-                start: start,
-                end: end,
-            });
+      ctx.commit("addLoaded", {
+        start: start,
+        end: end,
+      });

-            return fetchCalendarRemoteForUser(
-                ctx.rootGetters["me/getMe"],
-                start,
-                end,
-            )
-                .then((remotes: CalendarRemote[]) => {
-                    // to be add when reactivity problem will be solve ?
-                    //ctx.commit('addRemotes', remotes);
-                    const inputs = remotes
-                        .map((cr) => remoteToFullCalendarEvent(cr))
-                        .map((cr) => ({
-                            ...cr,
-                            backgroundColor: COLORS[0],
-                            textColor: "black",
-                            editable: false,
-                        }));
-                    ctx.commit("calendarRanges/addExternals", inputs, {
-                        root: true,
-                    });
-                    return Promise.resolve(null);
-                })
-                .catch((e: TransportExceptionInterface) => {
-                    console.error(e);
+      return fetchCalendarRemoteForUser(ctx.rootGetters["me/getMe"], start, end)
+        .then((remotes: CalendarRemote[]) => {
+          // to be add when reactivity problem will be solve ?
+          //ctx.commit('addRemotes', remotes);
+          const inputs = remotes
+            .map((cr) => remoteToFullCalendarEvent(cr))
+            .map((cr) => ({
+              ...cr,
+              backgroundColor: COLORS[0],
+              textColor: "black",
+              editable: false,
+            }));
+          ctx.commit("calendarRanges/addExternals", inputs, {
+            root: true,
+          });
+          return Promise.resolve(null);
+        })
+        .catch((e: TransportExceptionInterface) => {
+          console.error(e);

-                    return Promise.resolve(null);
-                });
-        },
+          return Promise.resolve(null);
+        });
    },
+  },
 } as Module<CalendarRemotesState, State>;
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
@@ -2,77 +2,77 @@ import { State } from "./../index";
 import { ActionContext } from "vuex";

 export interface FullCalendarState {
-    currentView: {
-        start: Date | null;
-        end: Date | null;
-    };
-    key: number;
+  currentView: {
+    start: Date | null;
+    end: Date | null;
+  };
+  key: number;
 }

 type Context = ActionContext<FullCalendarState, State>;

 export default {
-    namespaced: true,
-    state: (): FullCalendarState => ({
-        currentView: {
-            start: null,
-            end: null,
-        },
-        key: 0,
-    }),
-    mutations: {
-        setCurrentDatesView: function (
-            state: FullCalendarState,
-            payload: { start: Date; end: Date },
-        ): void {
-            state.currentView.start = payload.start;
-            state.currentView.end = payload.end;
-        },
-        increaseKey: function (state: FullCalendarState): void {
-            state.key = state.key + 1;
-        },
+  namespaced: true,
+  state: (): FullCalendarState => ({
+    currentView: {
+      start: null,
+      end: null,
    },
-    actions: {
-        setCurrentDatesView(
-            ctx: Context,
-            { start, end }: { start: Date | null; end: Date | null },
-        ): Promise<null> {
-            console.log("dispatch setCurrentDatesView", { start, end });
-
-            if (
-                ctx.state.currentView.start !== start ||
-                ctx.state.currentView.end !== end
-            ) {
-                ctx.commit("setCurrentDatesView", { start, end });
-            }
-
-            if (start !== null && end !== null) {
-                return Promise.all([
-                    ctx
-                        .dispatch(
-                            "calendarRanges/fetchRanges",
-                            { start, end },
-                            { root: true },
-                        )
-                        .then((_) => Promise.resolve(null)),
-                    ctx
-                        .dispatch(
-                            "calendarRemotes/fetchRemotes",
-                            { start, end },
-                            { root: true },
-                        )
-                        .then((_) => Promise.resolve(null)),
-                    ctx
-                        .dispatch(
-                            "calendarLocals/fetchLocals",
-                            { start, end },
-                            { root: true },
-                        )
-                        .then((_) => Promise.resolve(null)),
-                ]).then((_) => Promise.resolve(null));
-            } else {
-                return Promise.resolve(null);
-            }
-        },
+    key: 0,
+  }),
+  mutations: {
+    setCurrentDatesView: function (
+      state: FullCalendarState,
+      payload: { start: Date; end: Date },
+    ): void {
+      state.currentView.start = payload.start;
+      state.currentView.end = payload.end;
    },
+    increaseKey: function (state: FullCalendarState): void {
+      state.key = state.key + 1;
+    },
+  },
+  actions: {
+    setCurrentDatesView(
+      ctx: Context,
+      { start, end }: { start: Date | null; end: Date | null },
+    ): Promise<null> {
+      console.log("dispatch setCurrentDatesView", { start, end });
+
+      if (
+        ctx.state.currentView.start !== start ||
+        ctx.state.currentView.end !== end
+      ) {
+        ctx.commit("setCurrentDatesView", { start, end });
+      }
+
+      if (start !== null && end !== null) {
+        return Promise.all([
+          ctx
+            .dispatch(
+              "calendarRanges/fetchRanges",
+              { start, end },
+              { root: true },
+            )
+            .then((_) => Promise.resolve(null)),
+          ctx
+            .dispatch(
+              "calendarRemotes/fetchRemotes",
+              { start, end },
+              { root: true },
+            )
+            .then((_) => Promise.resolve(null)),
+          ctx
+            .dispatch(
+              "calendarLocals/fetchLocals",
+              { start, end },
+              { root: true },
+            )
+            .then((_) => Promise.resolve(null)),
+        ]).then((_) => Promise.resolve(null));
+      } else {
+        return Promise.resolve(null);
+      }
+    },
+  },
 };
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/location.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/location.ts
@@ -5,61 +5,61 @@ import { getLocations } from "../../../../../../../ChillMainBundle/Resources/pub
 import { whereami } from "../../../../../../../ChillMainBundle/Resources/public/lib/api/user";

 export interface LocationState {
-    locations: Location[];
-    locationPicked: Location | null;
-    currentLocation: Location | null;
+  locations: Location[];
+  locationPicked: Location | null;
+  currentLocation: Location | null;
 }

 export default {
-    namespaced: true,
-    state: (): LocationState => {
-        return {
-            locations: [],
-            locationPicked: null,
-            currentLocation: null,
-        };
+  namespaced: true,
+  state: (): LocationState => {
+    return {
+      locations: [],
+      locationPicked: null,
+      currentLocation: null,
+    };
+  },
+  getters: {
+    getLocationById:
+      (state) =>
+      (id: number): Location | undefined => {
+        return state.locations.find((l) => l.id === id);
+      },
+  },
+  mutations: {
+    setLocations(state, locations): void {
+      state.locations = locations;
    },
-    getters: {
-        getLocationById:
-            (state) =>
-            (id: number): Location | undefined => {
-                return state.locations.find((l) => l.id === id);
-            },
-    },
-    mutations: {
-        setLocations(state, locations): void {
-            state.locations = locations;
-        },
-        setLocationPicked(state, location: Location | null): void {
-            if (null === location) {
-                state.locationPicked = null;
-                return;
-            }
+    setLocationPicked(state, location: Location | null): void {
+      if (null === location) {
+        state.locationPicked = null;
+        return;
+      }

-            state.locationPicked =
-                state.locations.find((l) => l.id === location.id) || null;
-        },
-        setCurrentLocation(state, location: Location | null): void {
-            if (null === location) {
-                state.currentLocation = null;
-                return;
-            }
+      state.locationPicked =
+        state.locations.find((l) => l.id === location.id) || null;
+    },
+    setCurrentLocation(state, location: Location | null): void {
+      if (null === location) {
+        state.currentLocation = null;
+        return;
+      }

-            state.currentLocation =
-                state.locations.find((l) => l.id === location.id) || null;
-        },
+      state.currentLocation =
+        state.locations.find((l) => l.id === location.id) || null;
    },
-    actions: {
-        getLocations(ctx): Promise<void> {
-            return getLocations().then((locations) => {
-                ctx.commit("setLocations", locations);
-                return Promise.resolve();
-            });
-        },
-        getCurrentLocation(ctx): Promise<void> {
-            return whereami().then((location) => {
-                ctx.commit("setCurrentLocation", location);
-            });
-        },
+  },
+  actions: {
+    getLocations(ctx): Promise<void> {
+      return getLocations().then((locations) => {
+        ctx.commit("setLocations", locations);
+        return Promise.resolve();
+      });
    },
+    getCurrentLocation(ctx): Promise<void> {
+      return whereami().then((location) => {
+        ctx.commit("setCurrentLocation", location);
+      });
+    },
+  },
 } as Module<LocationState, State>;
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts
@@ -3,24 +3,24 @@ import { User } from "../../../../../../../ChillMainBundle/Resources/public/type
 import { ActionContext } from "vuex";

 export interface MeState {
-    me: User | null;
+  me: User | null;
 }

 type Context = ActionContext<MeState, State>;

 export default {
-    namespaced: true,
-    state: (): MeState => ({
-        me: null,
-    }),
-    getters: {
-        getMe: function (state: MeState): User | null {
-            return state.me;
-        },
+  namespaced: true,
+  state: (): MeState => ({
+    me: null,
+  }),
+  getters: {
+    getMe: function (state: MeState): User | null {
+      return state.me;
    },
-    mutations: {
-        setWhoAmi(state: MeState, me: User) {
-            state.me = me;
-        },
+  },
+  mutations: {
+    setWhoAmi(state: MeState, me: User) {
+      state.me = me;
    },
+  },
 };
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -1,51 +1,51 @@
 <template>
-    <div>
-        <h2 class="chill-red">
-            {{ $t("choose_your_calendar_user") }}
-        </h2>
-        <VueMultiselect
-            name="field"
-            id="calendarUserSelector"
-            v-model="value"
-            track-by="id"
-            label="value"
-            :custom-label="transName"
-            :placeholder="$t('select_user')"
-            :multiple="true"
-            :close-on-select="false"
-            :allow-empty="true"
-            :model-value="value"
-            :select-label="$t('multiselect.select_label')"
-            :deselect-label="$t('multiselect.deselect_label')"
-            :selected-label="$t('multiselect.selected_label')"
-            @select="selectUsers"
-            @remove="unSelectUsers"
-            @close="coloriseSelectedValues"
-            :options="options"
-        />
-    </div>
-    <div class="form-check">
-        <input
-            type="checkbox"
-            id="myCalendar"
-            class="form-check-input"
-            v-model="showMyCalendarWidget"
-        />
-        <label class="form-check-label" for="myCalendar">{{
-            $t("show_my_calendar")
-        }}</label>
-    </div>
-    <div class="form-check">
-        <input
-            type="checkbox"
-            id="weekends"
-            class="form-check-input"
-            @click="toggleWeekends"
-        />
-        <label class="form-check-label" for="weekends">{{
-            $t("show_weekends")
-        }}</label>
-    </div>
+  <div>
+    <h2 class="chill-red">
+      {{ $t("choose_your_calendar_user") }}
+    </h2>
+    <VueMultiselect
+      name="field"
+      id="calendarUserSelector"
+      v-model="value"
+      track-by="id"
+      label="value"
+      :custom-label="transName"
+      :placeholder="$t('select_user')"
+      :multiple="true"
+      :close-on-select="false"
+      :allow-empty="true"
+      :model-value="value"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('multiselect.deselect_label')"
+      :selected-label="$t('multiselect.selected_label')"
+      @select="selectUsers"
+      @remove="unSelectUsers"
+      @close="coloriseSelectedValues"
+      :options="options"
+    />
+  </div>
+  <div class="form-check">
+    <input
+      type="checkbox"
+      id="myCalendar"
+      class="form-check-input"
+      v-model="showMyCalendarWidget"
+    />
+    <label class="form-check-label" for="myCalendar">{{
+      $t("show_my_calendar")
+    }}</label>
+  </div>
+  <div class="form-check">
+    <input
+      type="checkbox"
+      id="weekends"
+      class="form-check-input"
+      @click="toggleWeekends"
+    />
+    <label class="form-check-label" for="weekends">{{
+      $t("show_weekends")
+    }}</label>
+  </div>
 </template>
 <script>
 import { fetchCalendarRanges, fetchCalendar } from "../../_api/api";
@@ -53,206 +53,183 @@ import VueMultiselect from "vue-multiselect";
 import { whoami } from "ChillPersonAssets/vuejs/AccompanyingCourse/api";

 const COLORS = [
-    /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
-    "#8dd3c7",
-    "#ffffb3",
-    "#bebada",
-    "#fb8072",
-    "#80b1d3",
-    "#fdb462",
-    "#b3de69",
-    "#fccde5",
-    "#d9d9d9",
-    "#bc80bd",
-    "#ccebc5",
-    "#ffed6f",
+  /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
+  "#8dd3c7",
+  "#ffffb3",
+  "#bebada",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#b3de69",
+  "#fccde5",
+  "#d9d9d9",
+  "#bc80bd",
+  "#ccebc5",
+  "#ffed6f",
 ];

 export default {
-    name: "CalendarUserSelector",
-    components: { VueMultiselect },
-    props: [
-        "users",
-        "updateEventsSource",
-        "calendarEvents",
-        "showMyCalendar",
-        "toggleMyCalendar",
-        "toggleWeekends",
-    ],
-    data() {
-        return {
-            errorMsg: [],
-            value: [],
-            options: [],
-        };
+  name: "CalendarUserSelector",
+  components: { VueMultiselect },
+  props: [
+    "users",
+    "updateEventsSource",
+    "calendarEvents",
+    "showMyCalendar",
+    "toggleMyCalendar",
+    "toggleWeekends",
+  ],
+  data() {
+    return {
+      errorMsg: [],
+      value: [],
+      options: [],
+    };
+  },
+  computed: {
+    showMyCalendarWidget: {
+      set(value) {
+        this.toggleMyCalendar(value);
+        this.updateEventsSource();
+      },
+      get() {
+        return this.showMyCalendar;
+      },
    },
-    computed: {
-        showMyCalendarWidget: {
-            set(value) {
-                this.toggleMyCalendar(value);
-                this.updateEventsSource();
-            },
-            get() {
-                return this.showMyCalendar;
-            },
-        },
+  },
+  methods: {
+    init() {
+      this.fetchData();
    },
-    methods: {
-        init() {
-            this.fetchData();
-        },
-        fetchData() {
-            fetchCalendarRanges()
-                .then(
-                    (calendarRanges) =>
-                        new Promise((resolve, reject) => {
-                            let results = calendarRanges.results;
+    fetchData() {
+      fetchCalendarRanges()
+        .then(
+          (calendarRanges) =>
+            new Promise((resolve, reject) => {
+              let results = calendarRanges.results;

-                            let users = [];
+              let users = [];

-                            results.forEach((i) => {
-                                if (!users.some((j) => i.user.id === j.id)) {
-                                    let ratio = Math.floor(
-                                        users.length / COLORS.length,
-                                    );
-                                    let colorIndex =
-                                        users.length - ratio * COLORS.length;
-                                    users.push({
-                                        id: i.user.id,
-                                        username: i.user.username,
-                                        color: COLORS[colorIndex],
-                                    });
-                                }
-                            });
-
-                            let calendarEvents = [];
-                            users.forEach((u) => {
-                                let arr = results
-                                    .filter((i) => i.user.id === u.id)
-                                    .map((i) => ({
-                                        start: i.startDate.datetime,
-                                        end: i.endDate.datetime,
-                                        calendarRangeId: i.id,
-                                        sourceColor: u.color,
-                                        //display: 'background' // can be an option for the disponibility
-                                    }));
-                                calendarEvents.push({
-                                    events: arr,
-                                    color: u.color,
-                                    textColor: "#444444",
-                                    editable: false,
-                                    id: u.id,
-                                });
-                            });
-
-                            this.users.loaded = users;
-                            this.options = users;
-
-                            this.calendarEvents.loaded = calendarEvents;
-                            whoami().then(
-                                (me) =>
-                                    new Promise((resolve, reject) => {
-                                        this.users.logged = me;
-                                        let currentUser = users.find(
-                                            (u) => u.id === me.id,
-                                        );
-                                        this.value = currentUser;
-
-                                        fetchCalendar(currentUser.id).then(
-                                            (calendar) =>
-                                                new Promise(
-                                                    (resolve, reject) => {
-                                                        let results =
-                                                            calendar.results;
-                                                        let events =
-                                                            results.map(
-                                                                (i) => ({
-                                                                    start: i
-                                                                        .startDate
-                                                                        .datetime,
-                                                                    end: i
-                                                                        .endDate
-                                                                        .datetime,
-                                                                }),
-                                                            );
-                                                        let calendarEventsCurrentUser =
-                                                            {
-                                                                events: events,
-                                                                color: "darkblue",
-                                                                id: 1000,
-                                                                editable: false,
-                                                            };
-                                                        this.calendarEvents.user =
-                                                            calendarEventsCurrentUser;
-
-                                                        this.selectUsers(
-                                                            currentUser,
-                                                        );
-
-                                                        resolve();
-                                                    },
-                                                ),
-                                        );
-
-                                        resolve();
-                                    }),
-                            );
-
-                            resolve();
-                        }),
-                )
-                .catch((error) => {
-                    this.errorMsg.push(error.message);
-                });
-        },
-        transName(value) {
-            return `${value.username}`;
-        },
-        coloriseSelectedValues() {
-            let tags = document.querySelectorAll(
-                "div.multiselect__tags-wrap",
-            )[0];
-
-            if (tags.hasChildNodes()) {
-                let children = tags.childNodes;
-                for (let i = 0; i < children.length; i++) {
-                    let child = children[i];
-                    if (child.nodeType === Node.ELEMENT_NODE) {
-                        this.users.selected.forEach((u) => {
-                            if (child.hasChildNodes()) {
-                                if (child.firstChild.innerText == u.username) {
-                                    child.style.background = u.color;
-                                    child.firstChild.style.color = "#444444";
-                                }
-                            }
-                        });
-                    }
+              results.forEach((i) => {
+                if (!users.some((j) => i.user.id === j.id)) {
+                  let ratio = Math.floor(users.length / COLORS.length);
+                  let colorIndex = users.length - ratio * COLORS.length;
+                  users.push({
+                    id: i.user.id,
+                    username: i.user.username,
+                    color: COLORS[colorIndex],
+                  });
                }
-            }
-        },
-        selectEvents() {
-            let selectedUsersId = this.users.selected.map((a) => a.id);
-            this.calendarEvents.selected = this.calendarEvents.loaded.filter(
-                (a) => selectedUsersId.includes(a.id),
-            );
-        },
-        selectUsers(value) {
-            this.users.selected.push(value);
-            this.coloriseSelectedValues();
-            this.selectEvents();
-            this.updateEventsSource();
-        },
-        unSelectUsers(value) {
-            this.users.selected = this.users.selected.filter(
-                (a) => a.id != value.id,
-            );
-            this.selectEvents();
-            this.updateEventsSource();
-        },
+              });
+
+              let calendarEvents = [];
+              users.forEach((u) => {
+                let arr = results
+                  .filter((i) => i.user.id === u.id)
+                  .map((i) => ({
+                    start: i.startDate.datetime,
+                    end: i.endDate.datetime,
+                    calendarRangeId: i.id,
+                    sourceColor: u.color,
+                    //display: 'background' // can be an option for the disponibility
+                  }));
+                calendarEvents.push({
+                  events: arr,
+                  color: u.color,
+                  textColor: "#444444",
+                  editable: false,
+                  id: u.id,
+                });
+              });
+
+              this.users.loaded = users;
+              this.options = users;
+
+              this.calendarEvents.loaded = calendarEvents;
+              whoami().then(
+                (me) =>
+                  new Promise((resolve, reject) => {
+                    this.users.logged = me;
+                    let currentUser = users.find((u) => u.id === me.id);
+                    this.value = currentUser;
+
+                    fetchCalendar(currentUser.id).then(
+                      (calendar) =>
+                        new Promise((resolve, reject) => {
+                          let results = calendar.results;
+                          let events = results.map((i) => ({
+                            start: i.startDate.datetime,
+                            end: i.endDate.datetime,
+                          }));
+                          let calendarEventsCurrentUser = {
+                            events: events,
+                            color: "darkblue",
+                            id: 1000,
+                            editable: false,
+                          };
+                          this.calendarEvents.user = calendarEventsCurrentUser;
+
+                          this.selectUsers(currentUser);
+
+                          resolve();
+                        }),
+                    );
+
+                    resolve();
+                  }),
+              );
+
+              resolve();
+            }),
+        )
+        .catch((error) => {
+          this.errorMsg.push(error.message);
+        });
    },
-    mounted() {
-        this.init();
+    transName(value) {
+      return `${value.username}`;
    },
+    coloriseSelectedValues() {
+      let tags = document.querySelectorAll("div.multiselect__tags-wrap")[0];
+
+      if (tags.hasChildNodes()) {
+        let children = tags.childNodes;
+        for (let i = 0; i < children.length; i++) {
+          let child = children[i];
+          if (child.nodeType === Node.ELEMENT_NODE) {
+            this.users.selected.forEach((u) => {
+              if (child.hasChildNodes()) {
+                if (child.firstChild.innerText == u.username) {
+                  child.style.background = u.color;
+                  child.firstChild.style.color = "#444444";
+                }
+              }
+            });
+          }
+        }
+      }
+    },
+    selectEvents() {
+      let selectedUsersId = this.users.selected.map((a) => a.id);
+      this.calendarEvents.selected = this.calendarEvents.loaded.filter((a) =>
+        selectedUsersId.includes(a.id),
+      );
+    },
+    selectUsers(value) {
+      this.users.selected.push(value);
+      this.coloriseSelectedValues();
+      this.selectEvents();
+      this.updateEventsSource();
+    },
+    unSelectUsers(value) {
+      this.users.selected = this.users.selected.filter((a) => a.id != value.id);
+      this.selectEvents();
+      this.updateEventsSource();
+    },
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>

--- a/src/Bundle/ChillCustomFieldsBundle/EntityRepository/CustomFieldsDefaultGroupRepository.php
+++ b/src/Bundle/ChillCustomFieldsBundle/EntityRepository/CustomFieldsDefaultGroupRepository.php
@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\CustomFieldsBundle\EntityRepository;
+
+use Chill\CustomFieldsBundle\Entity\CustomFieldsDefaultGroup;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+class CustomFieldsDefaultGroupRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, CustomFieldsDefaultGroup::class);
+    }
+
+    public function findOneByEntity(string $className): ?CustomFieldsDefaultGroup
+    {
+        return $this->findOneBy(['entity' => $className]);
+    }
+}
--- a/src/Bundle/ChillCustomFieldsBundle/config/services.yaml
+++ b/src/Bundle/ChillCustomFieldsBundle/config/services.yaml
@@ -127,3 +127,7 @@ services:
        factory: ["@doctrine", getRepository]
        arguments:
            - "Chill\\CustomFieldsBundle\\Entity\\CustomFieldLongChoice\\Option"
+
+    Chill\CustomFieldsBundle\EntityRepository\CustomFieldsDefaultGroupRepository:
+        autowire: true
+        autoconfigure: true
--- a/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
+++ b/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
@@ -1,59 +1,54 @@
 <template>
-    <div>
-        <template v-if="templates.length > 0">
-            <slot name="title">
-                <h2>{{ $t("generate_document") }}</h2>
-            </slot>
+  <div>
+    <template v-if="templates.length > 0">
+      <slot name="title">
+        <h2>{{ $t("generate_document") }}</h2>
+      </slot>

-            <div class="container">
-                <div class="row">
-                    <div class="col-md-4">
-                        <slot name="label">
-                            <label>{{ $t("select_a_template") }}</label>
-                        </slot>
-                    </div>
-                    <div class="col-md-8">
-                        <div class="input-group mb-3">
-                            <select class="form-select" v-model="template">
-                                <option disabled selected value="">
-                                    {{ $t("choose_a_template") }}
-                                </option>
-                                <template v-for="t in templates" :key="t.id">
-                                    <option :value="t.id">
-                                        {{
-                                            localizeString(t.name) ||
-                                            "Aucun nom défini"
-                                        }}
-                                    </option>
-                                </template>
-                            </select>
-                            <a
-                                v-if="canGenerate"
-                                class="btn btn-update btn-sm change-icon"
-                                :href="buildUrlGenerate"
-                                @click.prevent="
-                                    clickGenerate($event, buildUrlGenerate)
-                                "
-                                ><i class="fa fa-fw fa-cog"
-                            /></a>
-                            <a
-                                v-else
-                                class="btn btn-update btn-sm change-icon"
-                                href="#"
-                                disabled
-                                ><i class="fa fa-fw fa-cog"
-                            /></a>
-                        </div>
-                    </div>
-                </div>
-                <div class="row" v-if="hasDescription">
-                    <div class="col-md-8 align-self-end">
-                        <p>{{ getDescription }}</p>
-                    </div>
-                </div>
+      <div class="container">
+        <div class="row">
+          <div class="col-md-4">
+            <slot name="label">
+              <label>{{ $t("select_a_template") }}</label>
+            </slot>
+          </div>
+          <div class="col-md-8">
+            <div class="input-group mb-3">
+              <select class="form-select" v-model="template">
+                <option disabled selected value="">
+                  {{ $t("choose_a_template") }}
+                </option>
+                <template v-for="t in templates" :key="t.id">
+                  <option :value="t.id">
+                    {{ localizeString(t.name) || "Aucun nom défini" }}
+                  </option>
+                </template>
+              </select>
+              <a
+                v-if="canGenerate"
+                class="btn btn-update btn-sm change-icon"
+                :href="buildUrlGenerate"
+                @click.prevent="clickGenerate($event, buildUrlGenerate)"
+                ><i class="fa fa-fw fa-cog"
+              /></a>
+              <a
+                v-else
+                class="btn btn-update btn-sm change-icon"
+                href="#"
+                disabled
+                ><i class="fa fa-fw fa-cog"
+              /></a>
            </div>
-        </template>
-    </div>
+          </div>
+        </div>
+        <div class="row" v-if="hasDescription">
+          <div class="col-md-8 align-self-end">
+            <p>{{ getDescription }}</p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>

 <script>
@@ -61,83 +56,83 @@ import { buildLink } from "ChillDocGeneratorAssets/lib/document-generator";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export default {
-    name: "PickTemplate",
-    props: {
-        entityId: [String, Number],
-        entityClass: {
-            type: String,
-            required: false,
-        },
-        templates: {
-            type: Array,
-            required: true,
-        },
-        preventDefaultMoveToGenerate: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
+  name: "PickTemplate",
+  props: {
+    entityId: [String, Number],
+    entityClass: {
+      type: String,
+      required: false,
    },
-    emits: ["goToGenerateDocument"],
-    data() {
-        return {
-            template: null,
-        };
+    templates: {
+      type: Array,
+      required: true,
    },
-    computed: {
-        canGenerate() {
-            return this.template != null;
-        },
-        hasDescription() {
-            if (this.template == null) {
-                return false;
-            }
+    preventDefaultMoveToGenerate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ["goToGenerateDocument"],
+  data() {
+    return {
+      template: null,
+    };
+  },
+  computed: {
+    canGenerate() {
+      return this.template != null;
+    },
+    hasDescription() {
+      if (this.template == null) {
+        return false;
+      }

-            return true;
-        },
-        getDescription() {
-            if (null === this.template) {
-                return "";
-            }
-            let desc = this.templates.find((t) => t.id === this.template);
-            if (null === desc) {
-                return "";
-            }
-            return desc.description || "";
-        },
-        buildUrlGenerate() {
-            if (null === this.template) {
-                return "#";
-            }
+      return true;
+    },
+    getDescription() {
+      if (null === this.template) {
+        return "";
+      }
+      let desc = this.templates.find((t) => t.id === this.template);
+      if (null === desc) {
+        return "";
+      }
+      return desc.description || "";
+    },
+    buildUrlGenerate() {
+      if (null === this.template) {
+        return "#";
+      }

-            return buildLink(this.template, this.entityId, this.entityClass);
-        },
+      return buildLink(this.template, this.entityId, this.entityClass);
    },
-    methods: {
-        localizeString(str) {
-            return localizeString(str);
-        },
-        clickGenerate(event, link) {
-            if (!this.preventDefaultMoveToGenerate) {
-                window.location.assign(link);
-            }
+  },
+  methods: {
+    localizeString(str) {
+      return localizeString(str);
+    },
+    clickGenerate(event, link) {
+      if (!this.preventDefaultMoveToGenerate) {
+        window.location.assign(link);
+      }

-            this.$emit("goToGenerateDocument", {
-                event,
-                link,
-                template: this.template,
-            });
-        },
+      this.$emit("goToGenerateDocument", {
+        event,
+        link,
+        template: this.template,
+      });
    },
-    i18n: {
-        messages: {
-            fr: {
-                generate_document: "Générer un document",
-                select_a_template: "Choisir un modèle",
-                choose_a_template: "Choisir",
-            },
-        },
+  },
+  i18n: {
+    messages: {
+      fr: {
+        generate_document: "Générer un document",
+        select_a_template: "Choisir un modèle",
+        choose_a_template: "Choisir",
+      },
    },
+  },
 };
 </script>

--- a/src/Bundle/ChillDocStoreBundle/AsyncUpload/Driver/LocalStorage/StoredObjectManager.php
+++ b/src/Bundle/ChillDocStoreBundle/AsyncUpload/Driver/LocalStorage/StoredObjectManager.php
@@ -18,6 +18,7 @@ use Chill\DocStoreBundle\Exception\StoredObjectManagerException;
 use Chill\DocStoreBundle\Service\Cryptography\KeyGenerator;
 use Chill\DocStoreBundle\Service\StoredObjectManagerInterface;
 use Symfony\Component\DependencyInjection\ParameterBag\ParameterBagInterface;
+use Symfony\Component\Filesystem\Exception\IOExceptionInterface;
 use Symfony\Component\Filesystem\Filesystem;
 use Symfony\Component\Filesystem\Path;

@@ -147,16 +148,11 @@ class StoredObjectManager implements StoredObjectManagerInterface
    public function writeContent(string $filename, string $encryptedContent): void
    {
        $fullPath = $this->buildPath($filename);
-        $dir = Path::getDirectory($fullPath);

-        if (!$this->filesystem->exists($dir)) {
-            $this->filesystem->mkdir($dir);
-        }
-
-        $result = file_put_contents($fullPath, $encryptedContent);
-
-        if (false === $result) {
-            throw StoredObjectManagerException::unableToStoreDocumentOnDisk();
+        try {
+            $this->filesystem->dumpFile($fullPath, $encryptedContent);
+        } catch (IOExceptionInterface $exception) {
+            throw StoredObjectManagerException::unableToStoreDocumentOnDisk($exception);
        }
    }

--- a/src/Bundle/ChillDocStoreBundle/Resources/public/js/async-upload/uploader.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/js/async-upload/uploader.ts
@@ -6,20 +6,20 @@ const algo = "AES-CBC";
 const URL_POST = "/asyncupload/temp_url/generate/post";

 const keyDefinition = {
-    name: algo,
-    length: 256,
+  name: algo,
+  length: 256,
 };

 const createFilename = (): string => {
-    let text = "";
-    const possible =
-        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let text = "";
+  const possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

-    for (let i = 0; i < 7; i++) {
-        text += possible.charAt(Math.floor(Math.random() * possible.length));
-    }
+  for (let i = 0; i < 7; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }

-    return text;
+  return text;
 };

 /**
@@ -30,59 +30,59 @@ const createFilename = (): string => {
 * @returns {Promise<StoredObject>} A Promise that resolves to the newly created StoredObject.
 */
 export const fetchNewStoredObject = async (): Promise<StoredObject> => {
-    return makeFetch("POST", "/api/1.0/doc-store/stored-object/create", null);
+  return makeFetch("POST", "/api/1.0/doc-store/stored-object/create", null);
 };

 export const uploadVersion = async (
-    uploadFile: ArrayBuffer,
-    storedObject: StoredObject,
+  uploadFile: ArrayBuffer,
+  storedObject: StoredObject,
 ): Promise<string> => {
-    const params = new URLSearchParams();
-    params.append("expires_delay", "180");
-    params.append("submit_delay", "180");
-    const asyncData: PostStoreObjectSignature = await makeFetch(
-        "GET",
-        `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/post` +
-            "?" +
-            params.toString(),
-    );
-    const suffix = createFilename();
-    const filename = asyncData.prefix + suffix;
-    const formData = new FormData();
-    formData.append("redirect", asyncData.redirect);
-    formData.append("max_file_size", asyncData.max_file_size.toString());
-    formData.append("max_file_count", asyncData.max_file_count.toString());
-    formData.append("expires", asyncData.expires.toString());
-    formData.append("signature", asyncData.signature);
-    formData.append(filename, new Blob([uploadFile]), suffix);
+  const params = new URLSearchParams();
+  params.append("expires_delay", "180");
+  params.append("submit_delay", "180");
+  const asyncData: PostStoreObjectSignature = await makeFetch(
+    "GET",
+    `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/post` +
+      "?" +
+      params.toString(),
+  );
+  const suffix = createFilename();
+  const filename = asyncData.prefix + suffix;
+  const formData = new FormData();
+  formData.append("redirect", asyncData.redirect);
+  formData.append("max_file_size", asyncData.max_file_size.toString());
+  formData.append("max_file_count", asyncData.max_file_count.toString());
+  formData.append("expires", asyncData.expires.toString());
+  formData.append("signature", asyncData.signature);
+  formData.append(filename, new Blob([uploadFile]), suffix);

-    const response = await window.fetch(asyncData.url, {
-        method: "POST",
-        body: formData,
-    });
+  const response = await window.fetch(asyncData.url, {
+    method: "POST",
+    body: formData,
+  });

-    if (!response.ok) {
-        console.error("Error while sending file to store", response);
-        throw new Error(response.statusText);
-    }
+  if (!response.ok) {
+    console.error("Error while sending file to store", response);
+    throw new Error(response.statusText);
+  }

-    return Promise.resolve(filename);
+  return Promise.resolve(filename);
 };

 export const encryptFile = async (
-    originalFile: ArrayBuffer,
+  originalFile: ArrayBuffer,
 ): Promise<[ArrayBuffer, Uint8Array, JsonWebKey]> => {
-    const iv = crypto.getRandomValues(new Uint8Array(16));
-    const key = await window.crypto.subtle.generateKey(keyDefinition, true, [
-        "encrypt",
-        "decrypt",
-    ]);
-    const exportedKey = await window.crypto.subtle.exportKey("jwk", key);
-    const encrypted = await window.crypto.subtle.encrypt(
-        { name: algo, iv: iv },
-        key,
-        originalFile,
-    );
+  const iv = crypto.getRandomValues(new Uint8Array(16));
+  const key = await window.crypto.subtle.generateKey(keyDefinition, true, [
+    "encrypt",
+    "decrypt",
+  ]);
+  const exportedKey = await window.crypto.subtle.exportKey("jwk", key);
+  const encrypted = await window.crypto.subtle.encrypt(
+    { name: algo, iv: iv },
+    key,
+    originalFile,
+  );

-    return Promise.resolve([encrypted, iv, exportedKey]);
+  return Promise.resolve([encrypted, iv, exportedKey]);
 };
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/js/generic-doc-api.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/js/generic-doc-api.ts
@@ -2,9 +2,9 @@ import { fetchResults } from "ChillMainAssets/lib/api/apiMethods";
 import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";

 export function fetch_generic_docs_by_accompanying_period(
-    periodId: number,
+  periodId: number,
 ): Promise<GenericDocForAccompanyingPeriod[]> {
-    return fetchResults(
-        `/api/1.0/doc-store/generic-doc/by-period/${periodId}/index`,
-    );
+  return fetchResults(
+    `/api/1.0/doc-store/generic-doc/by-period/${periodId}/index`,
+  );
 }
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/index.ts
@@ -6,117 +6,116 @@ import { _createI18n } from "../../../../../ChillMainBundle/Resources/public/vue
 const i18n = _createI18n({});

 const startApp = (
-    divElement: HTMLDivElement,
-    collectionEntry: null | HTMLLIElement,
+  divElement: HTMLDivElement,
+  collectionEntry: null | HTMLLIElement,
 ): void => {
-    console.log("app started", divElement);
+  console.log("app started", divElement);

-    const inputTitle = collectionEntry?.querySelector("input[type='text']");
+  const inputTitle = collectionEntry?.querySelector("input[type='text']");

-    const input_stored_object: HTMLInputElement | null =
-        divElement.querySelector("input[data-stored-object]");
-    if (null === input_stored_object) {
-        throw new Error("input to stored object not found");
-    }
+  const input_stored_object: HTMLInputElement | null = divElement.querySelector(
+    "input[data-stored-object]",
+  );
+  if (null === input_stored_object) {
+    throw new Error("input to stored object not found");
+  }

-    let existingDoc: StoredObject | null = null;
-    if (input_stored_object.value !== "") {
-        existingDoc = JSON.parse(input_stored_object.value);
-    }
-    const app_container = document.createElement("div");
-    divElement.appendChild(app_container);
+  let existingDoc: StoredObject | null = null;
+  if (input_stored_object.value !== "") {
+    existingDoc = JSON.parse(input_stored_object.value);
+  }
+  const app_container = document.createElement("div");
+  divElement.appendChild(app_container);

-    const app = createApp({
-        template:
-            '<drop-file-widget :existingDoc="this.$data.existingDoc" :allowRemove="true" @addDocument="this.addDocument" @removeDocument="removeDocument"></drop-file-widget>',
-        data() {
-            return {
-                existingDoc: existingDoc,
-                inputTitle: inputTitle,
-            };
-        },
-        components: {
-            DropFileWidget,
-        },
-        methods: {
-            addDocument: function ({
-                stored_object,
-                stored_object_version,
-                file_name,
-            }: {
-                stored_object: StoredObject;
-                stored_object_version: StoredObjectVersion;
-                file_name: string;
-            }): void {
-                stored_object.title = file_name;
-                console.log("object added", stored_object);
-                console.log("version added", stored_object_version);
-                this.$data.existingDoc = stored_object;
-                this.$data.existingDoc.currentVersion = stored_object_version;
-                input_stored_object.value = JSON.stringify(
-                    this.$data.existingDoc,
-                );
-                if (this.$data.inputTitle) {
-                    if (!this.$data.inputTitle?.value) {
-                        this.$data.inputTitle.value = file_name;
-                    }
-                }
-            },
-            removeDocument: function (object: StoredObject): void {
-                console.log("catch remove document", object);
-                input_stored_object.value = "";
-                this.$data.existingDoc = undefined;
-                console.log("collectionEntry", collectionEntry);
+  const app = createApp({
+    template:
+      '<drop-file-widget :existingDoc="this.$data.existingDoc" :allowRemove="true" @addDocument="this.addDocument" @removeDocument="removeDocument"></drop-file-widget>',
+    data() {
+      return {
+        existingDoc: existingDoc,
+        inputTitle: inputTitle,
+      };
+    },
+    components: {
+      DropFileWidget,
+    },
+    methods: {
+      addDocument: function ({
+        stored_object,
+        stored_object_version,
+        file_name,
+      }: {
+        stored_object: StoredObject;
+        stored_object_version: StoredObjectVersion;
+        file_name: string;
+      }): void {
+        stored_object.title = file_name;
+        console.log("object added", stored_object);
+        console.log("version added", stored_object_version);
+        this.$data.existingDoc = stored_object;
+        this.$data.existingDoc.currentVersion = stored_object_version;
+        input_stored_object.value = JSON.stringify(this.$data.existingDoc);
+        if (this.$data.inputTitle) {
+          if (!this.$data.inputTitle?.value) {
+            this.$data.inputTitle.value = file_name;
+          }
+        }
+      },
+      removeDocument: function (object: StoredObject): void {
+        console.log("catch remove document", object);
+        input_stored_object.value = "";
+        this.$data.existingDoc = undefined;
+        console.log("collectionEntry", collectionEntry);

-                if (null !== collectionEntry) {
-                    console.log("will remove collection");
-                    collectionEntry.remove();
-                }
-            },
-        },
-    });
+        if (null !== collectionEntry) {
+          console.log("will remove collection");
+          collectionEntry.remove();
+        }
+      },
+    },
+  });

-    app.use(i18n).mount(app_container);
+  app.use(i18n).mount(app_container);
 };
 window.addEventListener("collection-add-entry", ((
-    e: CustomEvent<CollectionEventPayload>,
+  e: CustomEvent<CollectionEventPayload>,
 ) => {
-    const detail = e.detail;
-    const divElement: null | HTMLDivElement = detail.entry.querySelector(
-        "div[data-stored-object]",
-    );
+  const detail = e.detail;
+  const divElement: null | HTMLDivElement = detail.entry.querySelector(
+    "div[data-stored-object]",
+  );

-    if (null === divElement) {
-        throw new Error("div[data-stored-object] not found");
-    }
+  if (null === divElement) {
+    throw new Error("div[data-stored-object] not found");
+  }

-    startApp(divElement, detail.entry);
+  startApp(divElement, detail.entry);
 }) as EventListener);

 window.addEventListener("DOMContentLoaded", () => {
-    const upload_inputs: NodeListOf<HTMLDivElement> = document.querySelectorAll(
-        "div[data-stored-object]",
-    );
+  const upload_inputs: NodeListOf<HTMLDivElement> = document.querySelectorAll(
+    "div[data-stored-object]",
+  );

-    upload_inputs.forEach((input: HTMLDivElement): void => {
-        // test for a parent to check if this is a collection entry
-        let collectionEntry: null | HTMLLIElement = null;
-        const parent = input.parentElement;
-        console.log("parent", parent);
-        if (null !== parent) {
-            const grandParent = parent.parentElement;
-            console.log("grandParent", grandParent);
-            if (null !== grandParent) {
-                if (
-                    grandParent.tagName.toLowerCase() === "li" &&
-                    grandParent.classList.contains("entry")
-                ) {
-                    collectionEntry = grandParent as HTMLLIElement;
-                }
-            }
+  upload_inputs.forEach((input: HTMLDivElement): void => {
+    // test for a parent to check if this is a collection entry
+    let collectionEntry: null | HTMLLIElement = null;
+    const parent = input.parentElement;
+    console.log("parent", parent);
+    if (null !== parent) {
+      const grandParent = parent.parentElement;
+      console.log("grandParent", grandParent);
+      if (null !== grandParent) {
+        if (
+          grandParent.tagName.toLowerCase() === "li" &&
+          grandParent.classList.contains("entry")
+        ) {
+          collectionEntry = grandParent as HTMLLIElement;
        }
-        startApp(input, collectionEntry);
-    });
+      }
+    }
+    startApp(input, collectionEntry);
+  });
 });

 export {};
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/module/button_download/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/module/button_download/index.ts
@@ -9,26 +9,26 @@ import ToastPlugin from "vue-toast-notification";
 const i18n = _createI18n({});

 window.addEventListener("DOMContentLoaded", function (e) {
-    document
-        .querySelectorAll<HTMLDivElement>("div[data-download-button-single]")
-        .forEach((el) => {
-            const storedObject = JSON.parse(
-                el.dataset.storedObject as string,
-            ) as StoredObject;
-            const title = el.dataset.title as string;
-            const app = createApp({
-                components: { DownloadButton },
-                data() {
-                    return {
-                        storedObject,
-                        title,
-                        classes: { btn: true, "btn-outline-primary": true },
-                    };
-                },
-                template:
-                    '<download-button :stored-object="storedObject" :at-version="storedObject.currentVersion" :classes="classes" :filename="title" :direct-download="true"></download-button>',
-            });
+  document
+    .querySelectorAll<HTMLDivElement>("div[data-download-button-single]")
+    .forEach((el) => {
+      const storedObject = JSON.parse(
+        el.dataset.storedObject as string,
+      ) as StoredObject;
+      const title = el.dataset.title as string;
+      const app = createApp({
+        components: { DownloadButton },
+        data() {
+          return {
+            storedObject,
+            title,
+            classes: { btn: true, "btn-outline-primary": true },
+          };
+        },
+        template:
+          '<download-button :stored-object="storedObject" :at-version="storedObject.currentVersion" :classes="classes" :filename="title" :direct-download="true"></download-button>',
+      });

-            app.use(i18n).use(ToastPlugin).mount(el);
-        });
+      app.use(i18n).use(ToastPlugin).mount(el);
+    });
 });
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts
@@ -8,66 +8,66 @@ import ToastPlugin from "vue-toast-notification";
 const i18n = _createI18n({});

 window.addEventListener("DOMContentLoaded", function (e) {
-    document
-        .querySelectorAll<HTMLDivElement>("div[data-download-buttons]")
-        .forEach((el) => {
-            const app = createApp({
-                components: { DocumentActionButtonsGroup },
-                data() {
-                    const datasets = el.dataset as {
-                        filename: string;
-                        canEdit: string;
-                        storedObject: string;
-                        buttonSmall: string;
-                        davLink: string;
-                        davLinkExpiration: string;
-                    };
+  document
+    .querySelectorAll<HTMLDivElement>("div[data-download-buttons]")
+    .forEach((el) => {
+      const app = createApp({
+        components: { DocumentActionButtonsGroup },
+        data() {
+          const datasets = el.dataset as {
+            filename: string;
+            canEdit: string;
+            storedObject: string;
+            buttonSmall: string;
+            davLink: string;
+            davLinkExpiration: string;
+          };

-                    const storedObject = JSON.parse(
-                            datasets.storedObject,
-                        ) as StoredObject,
-                        filename = datasets.filename,
-                        canEdit = datasets.canEdit === "1",
-                        small = datasets.buttonSmall === "1",
-                        davLink =
-                            "davLink" in datasets && datasets.davLink !== ""
-                                ? datasets.davLink
-                                : null,
-                        davLinkExpiration =
-                            "davLinkExpiration" in datasets
-                                ? Number.parseInt(datasets.davLinkExpiration)
-                                : null;
-                    return {
-                        storedObject,
-                        filename,
-                        canEdit,
-                        small,
-                        davLink,
-                        davLinkExpiration,
-                    };
-                },
-                template:
-                    '<document-action-buttons-group :can-edit="canEdit" :filename="filename" :stored-object="storedObject" :small="small" :dav-link="davLink" :dav-link-expiration="davLinkExpiration" @on-stored-object-status-change="onStoredObjectStatusChange"></document-action-buttons-group>',
-                methods: {
-                    onStoredObjectStatusChange: function (
-                        newStatus: StoredObjectStatusChange,
-                    ): void {
-                        this.$data.storedObject.status = newStatus.status;
-                        this.$data.storedObject.filename = newStatus.filename;
-                        this.$data.storedObject.type = newStatus.type;
+          const storedObject = JSON.parse(
+              datasets.storedObject,
+            ) as StoredObject,
+            filename = datasets.filename,
+            canEdit = datasets.canEdit === "1",
+            small = datasets.buttonSmall === "1",
+            davLink =
+              "davLink" in datasets && datasets.davLink !== ""
+                ? datasets.davLink
+                : null,
+            davLinkExpiration =
+              "davLinkExpiration" in datasets
+                ? Number.parseInt(datasets.davLinkExpiration)
+                : null;
+          return {
+            storedObject,
+            filename,
+            canEdit,
+            small,
+            davLink,
+            davLinkExpiration,
+          };
+        },
+        template:
+          '<document-action-buttons-group :can-edit="canEdit" :filename="filename" :stored-object="storedObject" :small="small" :dav-link="davLink" :dav-link-expiration="davLinkExpiration" @on-stored-object-status-change="onStoredObjectStatusChange"></document-action-buttons-group>',
+        methods: {
+          onStoredObjectStatusChange: function (
+            newStatus: StoredObjectStatusChange,
+          ): void {
+            this.$data.storedObject.status = newStatus.status;
+            this.$data.storedObject.filename = newStatus.filename;
+            this.$data.storedObject.type = newStatus.type;

-                        // remove eventual div which inform pending status
-                        document
-                            .querySelectorAll(
-                                `[data-docgen-is-pending="${this.$data.storedObject.id}"]`,
-                            )
-                            .forEach(function (el) {
-                                el.remove();
-                            });
-                    },
-                },
-            });
+            // remove eventual div which inform pending status
+            document
+              .querySelectorAll(
+                `[data-docgen-is-pending="${this.$data.storedObject.id}"]`,
+              )
+              .forEach(function (el) {
+                el.remove();
+              });
+          },
+        },
+      });

-            app.use(i18n).use(ToastPlugin).mount(el);
-        });
+      app.use(i18n).use(ToastPlugin).mount(el);
+    });
 });
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types/generic_doc.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types/generic_doc.ts
@@ -2,7 +2,7 @@ import { DateTime } from "ChillMainAssets/types";
 import { StoredObject } from "ChillDocStoreAssets/types/index";

 export interface GenericDocMetadata {
-    isPresent: boolean;
+  isPresent: boolean;
 }

 /**
@@ -15,57 +15,57 @@ export interface EmptyMetadata extends GenericDocMetadata {}
 * Minimal Metadata for a GenericDoc with a normalizer
 */
 export interface BaseMetadata extends GenericDocMetadata {
-    title: string;
+  title: string;
 }

 /**
 * A generic doc is a document attached to a Person or an AccompanyingPeriod.
 */
 export interface GenericDoc {
-    type: "doc_store_generic_doc";
-    uniqueKey: string;
-    key: string;
-    identifiers: object;
-    context: "person" | "accompanying-period";
-    doc_date: DateTime;
-    metadata: GenericDocMetadata;
-    storedObject: StoredObject | null;
+  type: "doc_store_generic_doc";
+  uniqueKey: string;
+  key: string;
+  identifiers: object;
+  context: "person" | "accompanying-period";
+  doc_date: DateTime;
+  metadata: GenericDocMetadata;
+  storedObject: StoredObject | null;
 }

 export interface GenericDocForAccompanyingPeriod extends GenericDoc {
-    context: "accompanying-period";
+  context: "accompanying-period";
 }

 interface BaseMetadataWithHtml extends BaseMetadata {
-    html: string;
+  html: string;
 }

 export interface GenericDocForAccompanyingCourseDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "accompanying_course_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "accompanying_course_document";
+  metadata: BaseMetadataWithHtml;
 }

 export interface GenericDocForAccompanyingCourseActivityDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "accompanying_course_activity_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "accompanying_course_activity_document";
+  metadata: BaseMetadataWithHtml;
 }

 export interface GenericDocForAccompanyingCourseCalendarDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "accompanying_course_calendar_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "accompanying_course_calendar_document";
+  metadata: BaseMetadataWithHtml;
 }

 export interface GenericDocForAccompanyingCoursePersonDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "person_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "person_document";
+  metadata: BaseMetadataWithHtml;
 }

 export interface GenericDocForAccompanyingCourseWorkEvaluationDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "accompanying_period_work_evaluation_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "accompanying_period_work_evaluation_document";
+  metadata: BaseMetadataWithHtml;
 }
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types/index.ts
@@ -4,73 +4,73 @@ import { SignedUrlGet } from "ChillDocStoreAssets/vuejs/StoredObjectButton/helpe
 export type StoredObjectStatus = "empty" | "ready" | "failure" | "pending";

 export interface StoredObject {
-    id: number;
-    title: string | null;
-    uuid: string;
-    prefix: string;
-    status: StoredObjectStatus;
-    currentVersion:
-        | null
-        | StoredObjectVersionCreated
-        | StoredObjectVersionPersisted;
-    totalVersions: number;
-    datas: object;
-    /** @deprecated */
-    creationDate: DateTime;
-    createdAt: DateTime | null;
-    createdBy: User | null;
-    _permissions: {
-        canEdit: boolean;
-        canSee: boolean;
-    };
-    _links?: {
-        dav_link?: {
-            href: string;
-            expiration: number;
-        };
-        downloadLink?: SignedUrlGet;
+  id: number;
+  title: string | null;
+  uuid: string;
+  prefix: string;
+  status: StoredObjectStatus;
+  currentVersion:
+    | null
+    | StoredObjectVersionCreated
+    | StoredObjectVersionPersisted;
+  totalVersions: number;
+  datas: object;
+  /** @deprecated */
+  creationDate: DateTime;
+  createdAt: DateTime | null;
+  createdBy: User | null;
+  _permissions: {
+    canEdit: boolean;
+    canSee: boolean;
+  };
+  _links?: {
+    dav_link?: {
+      href: string;
+      expiration: number;
    };
+    downloadLink?: SignedUrlGet;
+  };
 }

 export interface StoredObjectVersion {
-    /**
-     * filename of the object in the object storage
-     */
-    filename: string;
-    iv: number[];
-    keyInfos: JsonWebKey;
-    type: string;
+  /**
+   * filename of the object in the object storage
+   */
+  filename: string;
+  iv: number[];
+  keyInfos: JsonWebKey;
+  type: string;
 }

 export interface StoredObjectVersionCreated extends StoredObjectVersion {
-    persisted: false;
+  persisted: false;
 }

 export interface StoredObjectVersionPersisted
-    extends StoredObjectVersionCreated {
-    version: number;
-    id: number;
-    createdAt: DateTime | null;
-    createdBy: User | null;
+  extends StoredObjectVersionCreated {
+  version: number;
+  id: number;
+  createdAt: DateTime | null;
+  createdBy: User | null;
 }

 export interface StoredObjectStatusChange {
-    id: number;
-    filename: string;
-    status: StoredObjectStatus;
-    type: string;
+  id: number;
+  filename: string;
+  status: StoredObjectStatus;
+  type: string;
 }

 export interface StoredObjectVersionWithPointInTime
-    extends StoredObjectVersionPersisted {
-    "point-in-times": StoredObjectPointInTime[];
-    "from-restored": StoredObjectVersionPersisted | null;
+  extends StoredObjectVersionPersisted {
+  "point-in-times": StoredObjectPointInTime[];
+  "from-restored": StoredObjectVersionPersisted | null;
 }

 export interface StoredObjectPointInTime {
-    id: number;
-    byUser: User | null;
-    reason: "keep-before-conversion" | "keep-by-user";
+  id: number;
+  byUser: User | null;
+  reason: "keep-before-conversion" | "keep-by-user";
 }

 /**
@@ -82,63 +82,63 @@ export type WopiEditButtonExecutableBeforeLeaveFunction = () => Promise<void>;
 * Object containing information for performering a POST request to a swift object store
 */
 export interface PostStoreObjectSignature {
-    method: "POST";
-    max_file_size: number;
-    max_file_count: 1;
-    expires: number;
-    submit_delay: 180;
-    redirect: string;
-    prefix: string;
-    url: string;
-    signature: string;
+  method: "POST";
+  max_file_size: number;
+  max_file_count: 1;
+  expires: number;
+  submit_delay: 180;
+  redirect: string;
+  prefix: string;
+  url: string;
+  signature: string;
 }

 export interface PDFPage {
-    index: number;
-    width: number;
-    height: number;
+  index: number;
+  width: number;
+  height: number;
 }
 export interface SignatureZone {
-    index: number | null;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    PDFPage: PDFPage;
+  index: number | null;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  PDFPage: PDFPage;
 }

 export interface Signature {
-    id: number;
-    storedObject: StoredObject;
-    zones: SignatureZone[];
+  id: number;
+  storedObject: StoredObject;
+  zones: SignatureZone[];
 }

 export type SignedState =
-    | "pending"
-    | "signed"
-    | "rejected"
-    | "canceled"
-    | "error";
+  | "pending"
+  | "signed"
+  | "rejected"
+  | "canceled"
+  | "error";

 export interface CheckSignature {
-    state: SignedState;
-    storedObject: StoredObject;
+  state: SignedState;
+  storedObject: StoredObject;
 }

 export type CanvasEvent = "select" | "add";

 export interface ZoomLevel {
-    id: number;
-    zoom: number;
-    label: {
-        fr?: string;
-        nl?: string;
-    };
+  id: number;
+  zoom: number;
+  label: {
+    fr?: string;
+    nl?: string;
+  };
 }

 export interface GenericDoc {
-    type: "doc_store_generic_doc";
-    key: string;
-    context: "person" | "accompanying-period";
-    doc_date: DateTime;
+  type: "doc_store_generic_doc";
+  key: string;
+  context: "person" | "accompanying-period";
+  doc_date: DateTime;
 }
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
@@ -1,67 +1,65 @@
 <template>
-    <div v-if="isButtonGroupDisplayable" class="btn-group">
-        <button
-            :class="
-                Object.assign({
-                    btn: true,
-                    'btn-outline-primary': true,
-                    'dropdown-toggle': true,
-                    'btn-sm': props.small,
-                })
-            "
-            type="button"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
-        >
-            Actions
-        </button>
-        <ul class="dropdown-menu">
-            <li v-if="isEditableOnline">
-                <wopi-edit-button
-                    :stored-object="props.storedObject"
-                    :classes="{ 'dropdown-item': true }"
-                    :execute-before-leave="props.executeBeforeLeave"
-                ></wopi-edit-button>
-            </li>
-            <li v-if="isEditableOnDesktop">
-                <desktop-edit-button
-                    :classes="{ 'dropdown-item': true }"
-                    :edit-link="props.davLink"
-                    :expiration-link="props.davLinkExpiration"
-                ></desktop-edit-button>
-            </li>
-            <li v-if="isConvertibleToPdf">
-                <convert-button
-                    :stored-object="props.storedObject"
-                    :filename="filename"
-                    :classes="{ 'dropdown-item': true }"
-                ></convert-button>
-            </li>
-            <li v-if="isDownloadable">
-                <download-button
-                    :stored-object="props.storedObject"
-                    :at-version="props.storedObject.currentVersion"
-                    :filename="filename"
-                    :classes="{ 'dropdown-item': true }"
-                    :display-action-string-in-button="true"
-                ></download-button>
-            </li>
-            <li v-if="isHistoryViewable">
-                <history-button
-                    :stored-object="props.storedObject"
-                    :can-edit="
-                        canEdit && props.storedObject._permissions.canEdit
-                    "
-                ></history-button>
-            </li>
-        </ul>
-    </div>
-    <div v-else-if="'pending' === props.storedObject.status">
-        <div class="btn btn-outline-info">Génération en cours</div>
-    </div>
-    <div v-else-if="'failure' === props.storedObject.status">
-        <div class="btn btn-outline-danger">La génération a échoué</div>
-    </div>
+  <div v-if="isButtonGroupDisplayable" class="btn-group">
+    <button
+      :class="
+        Object.assign({
+          btn: true,
+          'btn-outline-primary': true,
+          'dropdown-toggle': true,
+          'btn-sm': props.small,
+        })
+      "
+      type="button"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+    >
+      Actions
+    </button>
+    <ul class="dropdown-menu">
+      <li v-if="isEditableOnline">
+        <wopi-edit-button
+          :stored-object="props.storedObject"
+          :classes="{ 'dropdown-item': true }"
+          :execute-before-leave="props.executeBeforeLeave"
+        ></wopi-edit-button>
+      </li>
+      <li v-if="isEditableOnDesktop">
+        <desktop-edit-button
+          :classes="{ 'dropdown-item': true }"
+          :edit-link="props.davLink"
+          :expiration-link="props.davLinkExpiration"
+        ></desktop-edit-button>
+      </li>
+      <li v-if="isConvertibleToPdf">
+        <convert-button
+          :stored-object="props.storedObject"
+          :filename="filename"
+          :classes="{ 'dropdown-item': true }"
+        ></convert-button>
+      </li>
+      <li v-if="isDownloadable">
+        <download-button
+          :stored-object="props.storedObject"
+          :at-version="props.storedObject.currentVersion"
+          :filename="filename"
+          :classes="{ 'dropdown-item': true }"
+          :display-action-string-in-button="true"
+        ></download-button>
+      </li>
+      <li v-if="isHistoryViewable">
+        <history-button
+          :stored-object="props.storedObject"
+          :can-edit="canEdit && props.storedObject._permissions.canEdit"
+        ></history-button>
+      </li>
+    </ul>
+  </div>
+  <div v-else-if="'pending' === props.storedObject.status">
+    <div class="btn btn-outline-info">Génération en cours</div>
+  </div>
+  <div v-else-if="'failure' === props.storedObject.status">
+    <div class="btn btn-outline-danger">La génération a échoué</div>
+  </div>
 </template>

 <script lang="ts" setup>
@@ -70,68 +68,66 @@ import ConvertButton from "./StoredObjectButton/ConvertButton.vue";
 import DownloadButton from "./StoredObjectButton/DownloadButton.vue";
 import WopiEditButton from "./StoredObjectButton/WopiEditButton.vue";
 import {
-    is_extension_editable,
-    is_extension_viewable,
-    is_object_ready,
+  is_extension_editable,
+  is_extension_viewable,
+  is_object_ready,
 } from "./StoredObjectButton/helpers";
 import {
-    StoredObject,
-    StoredObjectStatusChange,
-    StoredObjectVersion,
-    WopiEditButtonExecutableBeforeLeaveFunction,
+  StoredObject,
+  StoredObjectStatusChange,
+  StoredObjectVersion,
+  WopiEditButtonExecutableBeforeLeaveFunction,
 } from "../types";
 import DesktopEditButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/DesktopEditButton.vue";
 import HistoryButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton.vue";

 interface DocumentActionButtonsGroupConfig {
-    storedObject: StoredObject;
-    small?: boolean;
-    canEdit?: boolean;
-    canDownload?: boolean;
-    canConvertPdf?: boolean;
-    returnPath?: string;
+  storedObject: StoredObject;
+  small?: boolean;
+  canEdit?: boolean;
+  canDownload?: boolean;
+  canConvertPdf?: boolean;
+  returnPath?: string;

-    /**
-     * Will be the filename displayed to the user when he·she download the document
-     * (the document will be saved on his disk with this name)
-     *
-     * If not set, 'document' will be used.
-     */
-    filename?: string;
+  /**
+   * Will be the filename displayed to the user when he·she download the document
+   * (the document will be saved on his disk with this name)
+   *
+   * If not set, 'document' will be used.
+   */
+  filename?: string;

-    /**
-     * If set, will execute this function before leaving to the editor
-     */
-    executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;
+  /**
+   * If set, will execute this function before leaving to the editor
+   */
+  executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;

-    /**
-     * a link to download and edit file using webdav
-     */
-    davLink?: string;
+  /**
+   * a link to download and edit file using webdav
+   */
+  davLink?: string;

-    /**
-     * the expiration date of the download, as a unix timestamp
-     */
-    davLinkExpiration?: number;
+  /**
+   * the expiration date of the download, as a unix timestamp
+   */
+  davLinkExpiration?: number;
 }

 const emit =
-    defineEmits<
-        (
-            e: "onStoredObjectStatusChange",
-            newStatus: StoredObjectStatusChange,
-        ) => void
-    >();
+  defineEmits<
+    (
+      e: "onStoredObjectStatusChange",
+      newStatus: StoredObjectStatusChange,
+    ) => void
+  >();

 const props = withDefaults(defineProps<DocumentActionButtonsGroupConfig>(), {
-    small: false,
-    canEdit: true,
-    canDownload: true,
-    canConvertPdf: true,
-    returnPath:
-        window.location.pathname +
-        window.location.search +
-        window.location.hash,
+  small: false,
+  canEdit: true,
+  canDownload: true,
+  canConvertPdf: true,
+  returnPath:
+    window.location.pathname + window.location.search + window.location.hash,
 });

 /**
@@ -145,93 +141,93 @@ let tryiesForReady = 0;
 const maxTryiesForReady = 120;

 const isButtonGroupDisplayable = computed<boolean>(() => {
-    return (
-        isDownloadable.value ||
-        isEditableOnline.value ||
-        isEditableOnDesktop.value ||
-        isConvertibleToPdf.value
-    );
+  return (
+    isDownloadable.value ||
+    isEditableOnline.value ||
+    isEditableOnDesktop.value ||
+    isConvertibleToPdf.value
+  );
 });

 const isDownloadable = computed<boolean>(() => {
-    return (
-        props.storedObject.status === "ready" ||
-        // happens when the stored object version is just added, but not persisted
-        (props.storedObject.currentVersion !== null &&
-            props.storedObject.status === "empty")
-    );
+  return (
+    props.storedObject.status === "ready" ||
+    // happens when the stored object version is just added, but not persisted
+    (props.storedObject.currentVersion !== null &&
+      props.storedObject.status === "empty")
+  );
 });

 const isEditableOnline = computed<boolean>(() => {
-    return (
-        props.storedObject.status === "ready" &&
-        props.storedObject._permissions.canEdit &&
-        props.canEdit &&
-        props.storedObject.currentVersion !== null &&
-        is_extension_editable(props.storedObject.currentVersion.type) &&
-        props.storedObject.currentVersion.persisted !== false
-    );
+  return (
+    props.storedObject.status === "ready" &&
+    props.storedObject._permissions.canEdit &&
+    props.canEdit &&
+    props.storedObject.currentVersion !== null &&
+    is_extension_editable(props.storedObject.currentVersion.type) &&
+    props.storedObject.currentVersion.persisted !== false
+  );
 });

 const isEditableOnDesktop = computed<boolean>(() => {
-    return isEditableOnline.value;
+  return isEditableOnline.value;
 });

 const isConvertibleToPdf = computed<boolean>(() => {
-    return (
-        props.storedObject.status === "ready" &&
-        props.storedObject._permissions.canSee &&
-        props.canConvertPdf &&
-        props.storedObject.currentVersion !== null &&
-        is_extension_viewable(props.storedObject.currentVersion.type) &&
-        props.storedObject.currentVersion.type !== "application/pdf" &&
-        props.storedObject.currentVersion.persisted !== false
-    );
+  return (
+    props.storedObject.status === "ready" &&
+    props.storedObject._permissions.canSee &&
+    props.canConvertPdf &&
+    props.storedObject.currentVersion !== null &&
+    is_extension_viewable(props.storedObject.currentVersion.type) &&
+    props.storedObject.currentVersion.type !== "application/pdf" &&
+    props.storedObject.currentVersion.persisted !== false
+  );
 });

 const isHistoryViewable = computed<boolean>(() => {
-    return props.storedObject.status === "ready";
+  return props.storedObject.status === "ready";
 });

 const checkForReady = function (): void {
-    if (
-        "ready" === props.storedObject.status ||
-        "empty" === props.storedObject.status ||
-        "failure" === props.storedObject.status ||
-        // stop reloading if the page stays opened for a long time
-        tryiesForReady > maxTryiesForReady
-    ) {
-        return;
-    }
+  if (
+    "ready" === props.storedObject.status ||
+    "empty" === props.storedObject.status ||
+    "failure" === props.storedObject.status ||
+    // stop reloading if the page stays opened for a long time
+    tryiesForReady > maxTryiesForReady
+  ) {
+    return;
+  }

-    tryiesForReady = tryiesForReady + 1;
+  tryiesForReady = tryiesForReady + 1;

-    setTimeout(onObjectNewStatusCallback, 5000);
+  setTimeout(onObjectNewStatusCallback, 5000);
 };

 const onObjectNewStatusCallback = async function (): Promise<void> {
-    if (props.storedObject.status === "stored_object_created") {
-        return Promise.resolve();
-    }
-
-    const new_status = await is_object_ready(props.storedObject);
-    if (props.storedObject.status !== new_status.status) {
-        emit("onStoredObjectStatusChange", new_status);
-        return Promise.resolve();
-    } else if ("failure" === new_status.status) {
-        return Promise.resolve();
-    }
-
-    if ("ready" !== new_status.status) {
-        // we check for new status, unless it is ready
-        checkForReady();
-    }
-
+  if (props.storedObject.status === "stored_object_created") {
    return Promise.resolve();
+  }
+
+  const new_status = await is_object_ready(props.storedObject);
+  if (props.storedObject.status !== new_status.status) {
+    emit("onStoredObjectStatusChange", new_status);
+    return Promise.resolve();
+  } else if ("failure" === new_status.status) {
+    return Promise.resolve();
+  }
+
+  if ("ready" !== new_status.status) {
+    // we check for new status, unless it is ready
+    checkForReady();
+  }
+
+  return Promise.resolve();
 };

 onMounted(() => {
-    checkForReady();
+  checkForReady();
 });
 </script>

--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
@@ -4,36 +4,36 @@ import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
 import App from "./App.vue";

 const appMessages = {
-    fr: {
-        yes: "Oui",
-        are_you_sure: "Êtes-vous sûr·e?",
-        you_are_going_to_sign: "Vous allez signer le document",
-        signature_confirmation: "Confirmation de la signature",
-        sign: "Signer",
-        choose_another_signature: "Choisir une autre zone",
-        cancel: "Annuler",
-        last_sign_zone: "Zone de signature précédente",
-        next_sign_zone: "Zone de signature suivante",
-        add_sign_zone: "Ajouter une zone de signature",
-        click_on_document: "Cliquer sur le document",
-        last_zone: "Zone précédente",
-        next_zone: "Zone suivante",
-        add_zone: "Ajouter une zone",
-        another_zone: "Autre zone",
-        electronic_signature_in_progress: "Signature électronique en cours...",
-        loading: "Chargement...",
-        remove_sign_zone: "Enlever la zone",
-        return: "Retour",
-        see_all_pages: "Voir toutes les pages",
-        all_pages: "Toutes les pages",
-    },
+  fr: {
+    yes: "Oui",
+    are_you_sure: "Êtes-vous sûr·e?",
+    you_are_going_to_sign: "Vous allez signer le document",
+    signature_confirmation: "Confirmation de la signature",
+    sign: "Signer",
+    choose_another_signature: "Choisir une autre zone",
+    cancel: "Annuler",
+    last_sign_zone: "Zone de signature précédente",
+    next_sign_zone: "Zone de signature suivante",
+    add_sign_zone: "Ajouter une zone de signature",
+    click_on_document: "Cliquer sur le document",
+    last_zone: "Zone précédente",
+    next_zone: "Zone suivante",
+    add_zone: "Ajouter une zone",
+    another_zone: "Autre zone",
+    electronic_signature_in_progress: "Signature électronique en cours...",
+    loading: "Chargement...",
+    remove_sign_zone: "Enlever la zone",
+    return: "Retour",
+    see_all_pages: "Voir toutes les pages",
+    all_pages: "Toutes les pages",
+  },
 };

 const i18n = _createI18n(appMessages);

 const app = createApp({
-    template: `<app></app>`,
+  template: `<app></app>`,
 })
-    .use(i18n)
-    .component("app", App)
-    .mount("#document-signature");
+  .use(i18n)
+  .component("app", App)
+  .mount("#document-signature");
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
@@ -1,208 +1,206 @@
 <script setup lang="ts">
 import { StoredObject, StoredObjectVersionCreated } from "../../types";
 import {
-    encryptFile,
-    fetchNewStoredObject,
-    uploadVersion,
+  encryptFile,
+  fetchNewStoredObject,
+  uploadVersion,
 } from "../../js/async-upload/uploader";
 import { computed, ref, Ref } from "vue";
 import FileIcon from "ChillDocStoreAssets/vuejs/FileIcon.vue";

 interface DropFileConfig {
-    existingDoc?: StoredObject;
+  existingDoc?: StoredObject;
 }

 const props = withDefaults(defineProps<DropFileConfig>(), {
-    existingDoc: null,
+  existingDoc: null,
 });

 const emit =
-    defineEmits<
-        (
-            e: "addDocument",
-            {
-                stored_object_version: StoredObjectVersionCreated,
-                stored_object: StoredObject,
-                file_name: string,
-            },
-        ) => void
-    >();
+  defineEmits<
+    (
+      e: "addDocument",
+      {
+        stored_object_version: StoredObjectVersionCreated,
+        stored_object: StoredObject,
+        file_name: string,
+      },
+    ) => void
+  >();

 const is_dragging: Ref<boolean> = ref(false);
 const uploading: Ref<boolean> = ref(false);
 const display_filename: Ref<string | null> = ref(null);

 const has_existing_doc = computed<boolean>(() => {
-    return props.existingDoc !== undefined && props.existingDoc !== null;
+  return props.existingDoc !== undefined && props.existingDoc !== null;
 });

 const onDragOver = (e: Event) => {
-    e.preventDefault();
+  e.preventDefault();

-    is_dragging.value = true;
+  is_dragging.value = true;
 };

 const onDragLeave = (e: Event) => {
-    e.preventDefault();
+  e.preventDefault();

-    is_dragging.value = false;
+  is_dragging.value = false;
 };

 const onDrop = (e: DragEvent) => {
-    e.preventDefault();
+  e.preventDefault();

-    const files = e.dataTransfer?.files;
+  const files = e.dataTransfer?.files;

-    if (null === files || undefined === files) {
-        console.error("no files transferred", e.dataTransfer);
-        return;
-    }
-    if (files.length === 0) {
-        console.error("no files given");
-        return;
-    }
+  if (null === files || undefined === files) {
+    console.error("no files transferred", e.dataTransfer);
+    return;
+  }
+  if (files.length === 0) {
+    console.error("no files given");
+    return;
+  }

-    handleFile(files[0]);
+  handleFile(files[0]);
 };

 const onZoneClick = (e: Event) => {
-    e.stopPropagation();
-    e.preventDefault();
+  e.stopPropagation();
+  e.preventDefault();

-    const input = document.createElement("input");
-    input.type = "file";
-    input.addEventListener("change", onFileChange);
+  const input = document.createElement("input");
+  input.type = "file";
+  input.addEventListener("change", onFileChange);

-    input.click();
+  input.click();
 };

 const onFileChange = async (event: Event): Promise<void> => {
-    const input = event.target as HTMLInputElement;
+  const input = event.target as HTMLInputElement;

-    if (input.files && input.files[0]) {
-        console.log("file added", input.files[0]);
-        const file = input.files[0];
-        await handleFile(file);
+  if (input.files && input.files[0]) {
+    console.log("file added", input.files[0]);
+    const file = input.files[0];
+    await handleFile(file);

-        return Promise.resolve();
-    }
+    return Promise.resolve();
+  }

-    throw "No file given";
+  throw "No file given";
 };

 const handleFile = async (file: File): Promise<void> => {
-    uploading.value = true;
-    display_filename.value = file.name;
-    const type = file.type;
+  uploading.value = true;
+  display_filename.value = file.name;
+  const type = file.type;

-    // create a stored_object if not exists
-    let stored_object;
-    if (null === props.existingDoc) {
-        stored_object = await fetchNewStoredObject();
-    } else {
-        stored_object = props.existingDoc;
-    }
+  // create a stored_object if not exists
+  let stored_object;
+  if (null === props.existingDoc) {
+    stored_object = await fetchNewStoredObject();
+  } else {
+    stored_object = props.existingDoc;
+  }

-    const buffer = await file.arrayBuffer();
-    const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
-    const filename = await uploadVersion(encrypted, stored_object);
+  const buffer = await file.arrayBuffer();
+  const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
+  const filename = await uploadVersion(encrypted, stored_object);

-    const stored_object_version: StoredObjectVersionCreated = {
-        filename: filename,
-        iv: Array.from(iv),
-        keyInfos: jsonWebKey,
-        type: type,
-        persisted: false,
-    };
+  const stored_object_version: StoredObjectVersionCreated = {
+    filename: filename,
+    iv: Array.from(iv),
+    keyInfos: jsonWebKey,
+    type: type,
+    persisted: false,
+  };

-    const fileName = file.name;
-    let file_name = "Nouveau document";
-    const file_name_split = fileName.split(".");
-    if (file_name_split.length > 1) {
-        const extension = file_name_split
-            ? file_name_split[file_name_split.length - 1]
-            : "";
-        file_name = fileName.replace(extension, "").slice(0, -1);
-    }
+  const fileName = file.name;
+  let file_name = "Nouveau document";
+  const file_name_split = fileName.split(".");
+  if (file_name_split.length > 1) {
+    const extension = file_name_split
+      ? file_name_split[file_name_split.length - 1]
+      : "";
+    file_name = fileName.replace(extension, "").slice(0, -1);
+  }

-    emit("addDocument", {
-        stored_object,
-        stored_object_version,
-        file_name: file_name,
-    });
-    uploading.value = false;
+  emit("addDocument", {
+    stored_object,
+    stored_object_version,
+    file_name: file_name,
+  });
+  uploading.value = false;
 };
 </script>

 <template>
-    <div class="drop-file">
-        <div
-            v-if="!uploading"
-            :class="{ area: true, dragging: is_dragging }"
-            @click="onZoneClick"
-            @dragover="onDragOver"
-            @dragleave="onDragLeave"
-            @drop="onDrop"
-        >
-            <p v-if="has_existing_doc" class="file-icon">
-                <file-icon :type="props.existingDoc?.type"></file-icon>
-            </p>
+  <div class="drop-file">
+    <div
+      v-if="!uploading"
+      :class="{ area: true, dragging: is_dragging }"
+      @click="onZoneClick"
+      @dragover="onDragOver"
+      @dragleave="onDragLeave"
+      @drop="onDrop"
+    >
+      <p v-if="has_existing_doc" class="file-icon">
+        <file-icon :type="props.existingDoc?.type"></file-icon>
+      </p>

-            <p v-if="display_filename !== null" class="display-filename">
-                {{ display_filename }}
-            </p>
-            <!-- todo i18n -->
-            <p v-if="has_existing_doc">
-                Déposez un document ou cliquez ici pour remplacer le document
-                existant
-            </p>
-            <p v-else>
-                Déposez un document ou cliquez ici pour ouvrir le navigateur de
-                fichier
-            </p>
-        </div>
-        <div v-else class="waiting">
-            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
-            <span class="sr-only">Loading...</span>
-        </div>
+      <p v-if="display_filename !== null" class="display-filename">
+        {{ display_filename }}
+      </p>
+      <!-- todo i18n -->
+      <p v-if="has_existing_doc">
+        Déposez un document ou cliquez ici pour remplacer le document existant
+      </p>
+      <p v-else>
+        Déposez un document ou cliquez ici pour ouvrir le navigateur de fichier
+      </p>
    </div>
+    <div v-else class="waiting">
+      <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+  </div>
 </template>

 <style scoped lang="scss">
 .drop-file {
+  width: 100%;
+
+  .file-icon {
+    font-size: xx-large;
+  }
+
+  .display-filename {
+    font-variant: small-caps;
+    font-weight: 200;
+  }
+
+  & > .area,
+  & > .waiting {
    width: 100%;
+    height: 10rem;

-    .file-icon {
-        font-size: xx-large;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    p {
+      // require for display in DropFileModal
+      text-align: center;
    }
+  }

-    .display-filename {
-        font-variant: small-caps;
-        font-weight: 200;
-    }
-
-    & > .area,
-    & > .waiting {
-        width: 100%;
-        height: 10rem;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        p {
-            // require for display in DropFileModal
-            text-align: center;
-        }
-    }
-
-    & > .area {
-        border: 4px dashed #ccc;
-
-        &.dragging {
-            border: 4px dashed blue;
-        }
+  & > .area {
+    border: 4px dashed #ccc;
+
+    &.dragging {
+      border: 4px dashed blue;
    }
+  }
 }
 </style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileModal.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileModal.vue
@@ -6,24 +6,24 @@ import { computed, reactive } from "vue";
 import { useToast } from "vue-toast-notification";

 interface DropFileConfig {
-    allowRemove: boolean;
-    existingDoc?: StoredObject;
+  allowRemove: boolean;
+  existingDoc?: StoredObject;
 }

 const props = withDefaults(defineProps<DropFileConfig>(), {
-    allowRemove: false,
+  allowRemove: false,
 });

 const emit = defineEmits<{
-    (
-        e: "addDocument",
-        {
-            stored_object: StoredObject,
-            stored_object_version: StoredObjectVersion,
-            file_name: string,
-        },
-    ): void;
-    (e: "removeDocument"): void;
+  (
+    e: "addDocument",
+    {
+      stored_object: StoredObject,
+      stored_object_version: StoredObjectVersion,
+      file_name: string,
+    },
+  ): void;
+  (e: "removeDocument"): void;
 }>();

 const $toast = useToast();
@@ -33,67 +33,67 @@ const state = reactive({ showModal: false });
 const modalClasses = { "modal-dialog-centered": true, "modal-md": true };

 const buttonState = computed<"add" | "replace">(() => {
-    if (props.existingDoc === undefined || props.existingDoc === null) {
-        return "add";
-    }
+  if (props.existingDoc === undefined || props.existingDoc === null) {
+    return "add";
+  }

-    return "replace";
+  return "replace";
 });

 function onAddDocument({
-    stored_object,
-    stored_object_version,
-    file_name,
+  stored_object,
+  stored_object_version,
+  file_name,
 }: {
-    stored_object: StoredObject;
-    stored_object_version: StoredObjectVersion;
-    file_name: string;
+  stored_object: StoredObject;
+  stored_object_version: StoredObjectVersion;
+  file_name: string;
 }): void {
-    const message =
-        buttonState.value === "add" ? "Document ajouté" : "Document remplacé";
-    $toast.success(message);
-    emit("addDocument", { stored_object_version, stored_object, file_name });
-    state.showModal = false;
+  const message =
+    buttonState.value === "add" ? "Document ajouté" : "Document remplacé";
+  $toast.success(message);
+  emit("addDocument", { stored_object_version, stored_object, file_name });
+  state.showModal = false;
 }

 function onRemoveDocument(): void {
-    emit("removeDocument");
+  emit("removeDocument");
 }

 function openModal(): void {
-    state.showModal = true;
+  state.showModal = true;
 }

 function closeModal(): void {
-    state.showModal = false;
+  state.showModal = false;
 }
 </script>

 <template>
-    <button
-        v-if="buttonState === 'add'"
-        @click="openModal"
-        class="btn btn-create"
-    >
-        Ajouter un document
-    </button>
-    <button v-else @click="openModal" class="btn btn-edit">
-        Remplacer le document
-    </button>
-    <modal
-        v-if="state.showModal"
-        :modal-dialog-class="modalClasses"
-        @close="closeModal"
-    >
-        <template v-slot:body>
-            <drop-file-widget
-                :existing-doc="existingDoc"
-                :allow-remove="allowRemove"
-                @add-document="onAddDocument"
-                @remove-document="onRemoveDocument"
-            ></drop-file-widget>
-        </template>
-    </modal>
+  <button
+    v-if="buttonState === 'add'"
+    @click="openModal"
+    class="btn btn-create"
+  >
+    Ajouter un document
+  </button>
+  <button v-else @click="openModal" class="btn btn-edit">
+    Remplacer le document
+  </button>
+  <modal
+    v-if="state.showModal"
+    :modal-dialog-class="modalClasses"
+    @close="closeModal"
+  >
+    <template v-slot:body>
+      <drop-file-widget
+        :existing-doc="existingDoc"
+        :allow-remove="allowRemove"
+        @add-document="onAddDocument"
+        @remove-document="onRemoveDocument"
+      ></drop-file-widget>
+    </template>
+  </modal>
 </template>

 <style scoped lang="scss"></style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileWidget.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileWidget.vue
@@ -5,97 +5,97 @@ import DropFile from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFile.vue";
 import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";

 interface DropFileConfig {
-    allowRemove: boolean;
-    existingDoc?: StoredObject;
+  allowRemove: boolean;
+  existingDoc?: StoredObject;
 }

 const props = withDefaults(defineProps<DropFileConfig>(), {
-    allowRemove: false,
+  allowRemove: false,
 });

 const emit = defineEmits<{
-    (
-        e: "addDocument",
-        {
-            stored_object: StoredObject,
-            stored_object_version: StoredObjectVersion,
-            file_name: string,
-        },
-    ): void;
-    (e: "removeDocument"): void;
+  (
+    e: "addDocument",
+    {
+      stored_object: StoredObject,
+      stored_object_version: StoredObjectVersion,
+      file_name: string,
+    },
+  ): void;
+  (e: "removeDocument"): void;
 }>();

 const has_existing_doc = computed<boolean>(() => {
-    return props.existingDoc !== undefined && props.existingDoc !== null;
+  return props.existingDoc !== undefined && props.existingDoc !== null;
 });

 const dav_link_expiration = computed<number | undefined>(() => {
-    if (props.existingDoc === undefined || props.existingDoc === null) {
-        return undefined;
-    }
-    if (props.existingDoc.status !== "ready") {
-        return undefined;
-    }
+  if (props.existingDoc === undefined || props.existingDoc === null) {
+    return undefined;
+  }
+  if (props.existingDoc.status !== "ready") {
+    return undefined;
+  }

-    return props.existingDoc._links?.dav_link?.expiration;
+  return props.existingDoc._links?.dav_link?.expiration;
 });

 const dav_link_href = computed<string | undefined>(() => {
-    if (props.existingDoc === undefined || props.existingDoc === null) {
-        return undefined;
-    }
-    if (props.existingDoc.status !== "ready") {
-        return undefined;
-    }
+  if (props.existingDoc === undefined || props.existingDoc === null) {
+    return undefined;
+  }
+  if (props.existingDoc.status !== "ready") {
+    return undefined;
+  }

-    return props.existingDoc._links?.dav_link?.href;
+  return props.existingDoc._links?.dav_link?.href;
 });

 const onAddDocument = ({
-    stored_object,
-    stored_object_version,
-    file_name,
+  stored_object,
+  stored_object_version,
+  file_name,
 }: {
-    stored_object: StoredObject;
-    stored_object_version: StoredObjectVersion;
-    file_name: string;
+  stored_object: StoredObject;
+  stored_object_version: StoredObjectVersion;
+  file_name: string;
 }): void => {
-    emit("addDocument", { stored_object, stored_object_version, file_name });
+  emit("addDocument", { stored_object, stored_object_version, file_name });
 };

 const onRemoveDocument = (e: Event): void => {
-    e.stopPropagation();
-    e.preventDefault();
-    emit("removeDocument");
+  e.stopPropagation();
+  e.preventDefault();
+  emit("removeDocument");
 };
 </script>

 <template>
-    <div>
-        <drop-file
-            :existingDoc="props.existingDoc"
-            @addDocument="onAddDocument"
-        ></drop-file>
+  <div>
+    <drop-file
+      :existingDoc="props.existingDoc"
+      @addDocument="onAddDocument"
+    ></drop-file>

-        <ul class="record_actions">
-            <li v-if="has_existing_doc">
-                <document-action-buttons-group
-                    :stored-object="props.existingDoc"
-                    :can-edit="props.existingDoc?.status === 'ready'"
-                    :can-download="true"
-                    :dav-link="dav_link_href"
-                    :dav-link-expiration="dav_link_expiration"
-                />
-            </li>
-            <li>
-                <button
-                    v-if="allowRemove"
-                    class="btn btn-delete"
-                    @click="onRemoveDocument($event)"
-                ></button>
-            </li>
-        </ul>
-    </div>
+    <ul class="record_actions">
+      <li v-if="has_existing_doc">
+        <document-action-buttons-group
+          :stored-object="props.existingDoc"
+          :can-edit="props.existingDoc?.status === 'ready'"
+          :can-download="true"
+          :dav-link="dav_link_href"
+          :dav-link-expiration="dav_link_expiration"
+        />
+      </li>
+      <li>
+        <button
+          v-if="allowRemove"
+          class="btn btn-delete"
+          @click="onRemoveDocument($event)"
+        ></button>
+      </li>
+    </ul>
+  </div>
 </template>

 <style scoped lang="scss"></style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue
@@ -1,46 +1,46 @@
 <script setup lang="ts">
 interface FileIconConfig {
-    type: string;
+  type: string;
 }

 const props = defineProps<FileIconConfig>();
 </script>

 <template>
-    <i class="fa fa-file-pdf-o" v-if="props.type === 'application/pdf'"></i>
-    <i
-        class="fa fa-file-word-o"
-        v-else-if="props.type === 'application/vnd.oasis.opendocument.text'"
-    ></i>
-    <i
-        class="fa fa-file-word-o"
-        v-else-if="
-            props.type ===
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-        "
-    ></i>
-    <i
-        class="fa fa-file-word-o"
-        v-else-if="props.type === 'application/msword'"
-    ></i>
-    <i
-        class="fa fa-file-excel-o"
-        v-else-if="
-            props.type ===
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-        "
-    ></i>
-    <i
-        class="fa fa-file-excel-o"
-        v-else-if="props.type === 'application/vnd.ms-excel'"
-    ></i>
-    <i class="fa fa-file-image-o" v-else-if="props.type === 'image/jpeg'"></i>
-    <i class="fa fa-file-image-o" v-else-if="props.type === 'image/png'"></i>
-    <i
-        class="fa fa-file-archive-o"
-        v-else-if="props.type === 'application/x-zip-compressed'"
-    ></i>
-    <i class="fa fa-file-code-o" v-else></i>
+  <i class="fa fa-file-pdf-o" v-if="props.type === 'application/pdf'"></i>
+  <i
+    class="fa fa-file-word-o"
+    v-else-if="props.type === 'application/vnd.oasis.opendocument.text'"
+  ></i>
+  <i
+    class="fa fa-file-word-o"
+    v-else-if="
+      props.type ===
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+    "
+  ></i>
+  <i
+    class="fa fa-file-word-o"
+    v-else-if="props.type === 'application/msword'"
+  ></i>
+  <i
+    class="fa fa-file-excel-o"
+    v-else-if="
+      props.type ===
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    "
+  ></i>
+  <i
+    class="fa fa-file-excel-o"
+    v-else-if="props.type === 'application/vnd.ms-excel'"
+  ></i>
+  <i class="fa fa-file-image-o" v-else-if="props.type === 'image/jpeg'"></i>
+  <i class="fa fa-file-image-o" v-else-if="props.type === 'image/png'"></i>
+  <i
+    class="fa fa-file-archive-o"
+    v-else-if="props.type === 'application/x-zip-compressed'"
+  ></i>
+  <i class="fa fa-file-code-o" v-else></i>
 </template>

 <style scoped lang="scss"></style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/ConvertButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/ConvertButton.vue
@@ -1,28 +1,28 @@
 <template>
-    <a :class="props.classes" @click="download_and_open($event)" ref="btn">
-        <i class="fa fa-file-pdf-o"></i>
-        Télécharger en pdf
-    </a>
+  <a :class="props.classes" @click="download_and_open($event)" ref="btn">
+    <i class="fa fa-file-pdf-o"></i>
+    Télécharger en pdf
+  </a>
 </template>

 <script lang="ts" setup>
 import {
-    build_convert_link,
-    download_and_decrypt_doc,
-    download_doc,
+  build_convert_link,
+  download_and_decrypt_doc,
+  download_doc,
 } from "./helpers";
 import mime from "mime";
 import { reactive, ref } from "vue";
 import { StoredObject } from "../../types";

 interface ConvertButtonConfig {
-    storedObject: StoredObject;
-    classes: Record<string, boolean>;
-    filename?: string;
+  storedObject: StoredObject;
+  classes: Record<string, boolean>;
+  filename?: string;
 }

 interface DownloadButtonState {
-    content: null | string;
+  content: null | string;
 }

 const props = defineProps<ConvertButtonConfig>();
@@ -30,36 +30,34 @@ const state: DownloadButtonState = reactive({ content: null });
 const btn = ref<HTMLAnchorElement | null>(null);

 async function download_and_open(event: Event): Promise<void> {
-    const button = event.target as HTMLAnchorElement;
+  const button = event.target as HTMLAnchorElement;

-    if (null === state.content) {
-        event.preventDefault();
+  if (null === state.content) {
+    event.preventDefault();

-        const raw = await download_doc(
-            build_convert_link(props.storedObject.uuid),
-        );
-        state.content = window.URL.createObjectURL(raw);
+    const raw = await download_doc(build_convert_link(props.storedObject.uuid));
+    state.content = window.URL.createObjectURL(raw);

-        button.href = window.URL.createObjectURL(raw);
-        button.type = "application/pdf";
+    button.href = window.URL.createObjectURL(raw);
+    button.type = "application/pdf";

-        button.download = props.filename + ".pdf" || "document.pdf";
-    }
+    button.download = props.filename + ".pdf" || "document.pdf";
+  }

-    button.click();
-    const reset_pending = setTimeout(reset_state, 45000);
+  button.click();
+  const reset_pending = setTimeout(reset_state, 45000);
 }

 function reset_state(): void {
-    state.content = null;
-    btn.value?.removeAttribute("download");
-    btn.value?.removeAttribute("href");
-    btn.value?.removeAttribute("type");
+  state.content = null;
+  btn.value?.removeAttribute("download");
+  btn.value?.removeAttribute("href");
+  btn.value?.removeAttribute("type");
 }
 </script>

 <style scoped lang="scss">
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 </style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DesktopEditButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DesktopEditButton.vue
@@ -3,13 +3,13 @@ import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import { computed, reactive } from "vue";

 export interface DesktopEditButtonConfig {
-    editLink: null;
-    classes: Record<string, boolean>;
-    expirationLink: number | Date;
+  editLink: null;
+  classes: Record<string, boolean>;
+  expirationLink: number | Date;
 }

 interface DesktopEditButtonState {
-    modalOpened: boolean;
+  modalOpened: boolean;
 }

 const state: DesktopEditButtonState = reactive({ modalOpened: false });
@@ -17,80 +17,76 @@ const state: DesktopEditButtonState = reactive({ modalOpened: false });
 const props = defineProps<DesktopEditButtonConfig>();

 const buildCommand = computed<string>(
-    () => "vnd.libreoffice.command:ofe|u|" + props.editLink,
+  () => "vnd.libreoffice.command:ofe|u|" + props.editLink,
 );

 const editionUntilFormatted = computed<string>(() => {
-    let d;
+  let d;

-    if (props.expirationLink instanceof Date) {
-        d = props.expirationLink;
-    } else {
-        d = new Date(props.expirationLink * 1000);
-    }
-    console.log(props.expirationLink);
+  if (props.expirationLink instanceof Date) {
+    d = props.expirationLink;
+  } else {
+    d = new Date(props.expirationLink * 1000);
+  }
+  console.log(props.expirationLink);

-    return new Intl.DateTimeFormat(undefined, {
-        dateStyle: "long",
-        timeStyle: "medium",
-    }).format(d);
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "long",
+    timeStyle: "medium",
+  }).format(d);
 });
 </script>

 <template>
-    <teleport to="body">
-        <modal v-if="state.modalOpened" @close="state.modalOpened = false">
-            <template v-slot:body>
-                <div class="desktop-edit">
-                    <p class="center">
-                        Veuillez enregistrer vos modifications avant le
-                    </p>
-                    <p>
-                        <strong>{{ editionUntilFormatted }}</strong>
-                    </p>
+  <teleport to="body">
+    <modal v-if="state.modalOpened" @close="state.modalOpened = false">
+      <template v-slot:body>
+        <div class="desktop-edit">
+          <p class="center">Veuillez enregistrer vos modifications avant le</p>
+          <p>
+            <strong>{{ editionUntilFormatted }}</strong>
+          </p>

-                    <p>
-                        <a class="btn btn-primary" :href="buildCommand"
-                            >Ouvrir le document pour édition</a
-                        >
-                    </p>
+          <p>
+            <a class="btn btn-primary" :href="buildCommand"
+              >Ouvrir le document pour édition</a
+            >
+          </p>

-                    <p>
-                        <small
-                            >Le document peut être édité uniquement en utilisant
-                            Libre Office.</small
-                        >
-                    </p>
+          <p>
+            <small
+              >Le document peut être édité uniquement en utilisant Libre
+              Office.</small
+            >
+          </p>

-                    <p>
-                        <small
-                            >En cas d'échec lors de l'enregistrement, sauver le
-                            document sur le poste de travail avant de le déposer
-                            à nouveau ici.</small
-                        >
-                    </p>
+          <p>
+            <small
+              >En cas d'échec lors de l'enregistrement, sauver le document sur
+              le poste de travail avant de le déposer à nouveau ici.</small
+            >
+          </p>

-                    <p>
-                        <small
-                            >Vous pouvez naviguez sur d'autres pages pendant
-                            l'édition.</small
-                        >
-                    </p>
-                </div>
-            </template>
-        </modal>
-    </teleport>
-    <a :class="props.classes" @click="state.modalOpened = true">
-        <i class="fa fa-desktop"></i>
-        Éditer sur le bureau
-    </a>
+          <p>
+            <small
+              >Vous pouvez naviguez sur d'autres pages pendant l'édition.</small
+            >
+          </p>
+        </div>
+      </template>
+    </modal>
+  </teleport>
+  <a :class="props.classes" @click="state.modalOpened = true">
+    <i class="fa fa-desktop"></i>
+    Éditer sur le bureau
+  </a>
 </template>

 <style scoped lang="scss">
 .desktop-edit {
-    text-align: center;
+  text-align: center;
 }
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 </style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
@@ -1,26 +1,26 @@
 <template>
-    <a
-        v-if="!state.is_ready"
-        :class="props.classes"
-        @click="download_and_open()"
-        title="T&#233;l&#233;charger"
-    >
-        <i class="fa fa-download"></i>
-        <template v-if="displayActionStringInButton">Télécharger</template>
-    </a>
-    <a
-        v-else
-        :class="props.classes"
-        target="_blank"
-        :type="props.atVersion.type"
-        :download="buildDocumentName()"
-        :href="state.href_url"
-        ref="open_button"
-        title="Ouvrir"
-    >
-        <i class="fa fa-external-link"></i>
-        <template v-if="displayActionStringInButton">Ouvrir</template>
-    </a>
+  <a
+    v-if="!state.is_ready"
+    :class="props.classes"
+    @click="download_and_open()"
+    title="T&#233;l&#233;charger"
+  >
+    <i class="fa fa-download"></i>
+    <template v-if="displayActionStringInButton">Télécharger</template>
+  </a>
+  <a
+    v-else
+    :class="props.classes"
+    target="_blank"
+    :type="props.atVersion.type"
+    :download="buildDocumentName()"
+    :href="state.href_url"
+    ref="open_button"
+    title="Ouvrir"
+  >
+    <i class="fa fa-external-link"></i>
+    <template v-if="displayActionStringInButton">Ouvrir</template>
+  </a>
 </template>

 <script lang="ts" setup>
@@ -30,112 +30,109 @@ import mime from "mime";
 import { StoredObject, StoredObjectVersion } from "../../types";

 interface DownloadButtonConfig {
-    storedObject: StoredObject;
-    atVersion: StoredObjectVersion;
-    classes: Record<string, boolean>;
-    filename?: string;
-    /**
-     * if true, display the action string into the button. If false, displays only
-     * the icon
-     */
-    displayActionStringInButton?: boolean;
-    /**
-     * if true, will download directly the file on load
-     */
-    directDownload?: boolean;
+  storedObject: StoredObject;
+  atVersion: StoredObjectVersion;
+  classes: Record<string, boolean>;
+  filename?: string;
+  /**
+   * if true, display the action string into the button. If false, displays only
+   * the icon
+   */
+  displayActionStringInButton?: boolean;
+  /**
+   * if true, will download directly the file on load
+   */
+  directDownload?: boolean;
 }

 interface DownloadButtonState {
-    is_ready: boolean;
-    is_running: boolean;
-    href_url: string;
+  is_ready: boolean;
+  is_running: boolean;
+  href_url: string;
 }

 const props = withDefaults(defineProps<DownloadButtonConfig>(), {
-    displayActionStringInButton: true,
-    directDownload: false,
+  displayActionStringInButton: true,
+  directDownload: false,
 });
 const state: DownloadButtonState = reactive({
-    is_ready: false,
-    is_running: false,
-    href_url: "#",
+  is_ready: false,
+  is_running: false,
+  href_url: "#",
 });

 const open_button = ref<HTMLAnchorElement | null>(null);

 function buildDocumentName(): string {
-    let document_name = props.filename ?? props.storedObject.title;
+  let document_name = props.filename ?? props.storedObject.title;

-    if ("" === document_name || null === document_name) {
-        document_name = "document";
-    }
+  if ("" === document_name || null === document_name) {
+    document_name = "document";
+  }

-    const ext = mime.getExtension(props.atVersion.type);
+  const ext = mime.getExtension(props.atVersion.type);

-    if (null !== ext) {
-        return document_name + "." + ext;
-    }
+  if (null !== ext) {
+    return document_name + "." + ext;
+  }

-    return document_name;
+  return document_name;
 }

 async function download_and_open(): Promise<void> {
-    if (state.is_running) {
-        console.log("state is running, aborting");
-        return;
-    }
+  if (state.is_running) {
+    console.log("state is running, aborting");
+    return;
+  }

-    state.is_running = true;
+  state.is_running = true;

-    if (state.is_ready) {
-        console.log("state is ready. This should not happens");
-        return;
-    }
+  if (state.is_ready) {
+    console.log("state is ready. This should not happens");
+    return;
+  }

-    let raw;
+  let raw;

-    try {
-        raw = await download_and_decrypt_doc(
-            props.storedObject,
-            props.atVersion,
-        );
-    } catch (e) {
-        console.error("error while downloading and decrypting document");
-        console.error(e);
-        throw e;
-    }
+  try {
+    raw = await download_and_decrypt_doc(props.storedObject, props.atVersion);
+  } catch (e) {
+    console.error("error while downloading and decrypting document");
+    console.error(e);
+    throw e;
+  }

-    state.href_url = window.URL.createObjectURL(raw);
-    state.is_running = false;
-    state.is_ready = true;
+  state.href_url = window.URL.createObjectURL(raw);
+  state.is_running = false;
+  state.is_ready = true;

-    if (!props.directDownload) {
-        await nextTick();
-        open_button.value?.click();
+  if (!props.directDownload) {
+    await nextTick();
+    open_button.value?.click();

-        console.log("open button should have been clicked");
-        setTimeout(reset_state, 45000);
-    }
+    console.log("open button should have been clicked");
+    setTimeout(reset_state, 45000);
+  }
 }

 function reset_state(): void {
-    state.href_url = "#";
-    state.is_ready = false;
-    state.is_running = false;
+  state.href_url = "#";
+  state.is_ready = false;
+  state.is_running = false;
 }

 onMounted(() => {
-    if (props.directDownload) {
-        download_and_open();
-    }
+  if (props.directDownload) {
+    download_and_open();
+  }
 });
 </script>

 <style scoped lang="scss">
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 i.fa {
-    margin-right: 0.5rem;
+  margin-right: 0.5rem;
 }
 </style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import HistoryButtonModal from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue";
 import {
-    StoredObject,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectVersionWithPointInTime,
 } from "./../../types";
 import { computed, reactive, ref, useTemplateRef } from "vue";
 import { get_versions } from "./HistoryButton/api";

 interface HistoryButtonConfig {
-    storedObject: StoredObject;
-    canEdit: boolean;
+  storedObject: StoredObject;
+  canEdit: boolean;
 }

 interface HistoryButtonState {
-    versions: StoredObjectVersionWithPointInTime[];
-    loaded: boolean;
+  versions: StoredObjectVersionWithPointInTime[];
+  loaded: boolean;
 }

 const props = defineProps<HistoryButtonConfig>();
@@ -22,47 +22,47 @@ const state = reactive<HistoryButtonState>({ versions: [], loaded: false });
 const modal = useTemplateRef<typeof HistoryButtonModal>("modal");

 const download_version_and_open_modal = async function (): Promise<void> {
-    if (null !== modal.value) {
-        modal.value.open();
-    } else {
-        console.log("modal is null");
-    }
+  if (null !== modal.value) {
+    modal.value.open();
+  } else {
+    console.log("modal is null");
+  }

-    if (!state.loaded) {
-        const versions = await get_versions(props.storedObject);
+  if (!state.loaded) {
+    const versions = await get_versions(props.storedObject);

-        for (const version of versions) {
-            state.versions.push(version);
-        }
-        state.loaded = true;
+    for (const version of versions) {
+      state.versions.push(version);
    }
+    state.loaded = true;
+  }
 };

 const onRestoreVersion = ({
-    newVersion,
+  newVersion,
 }: {
-    newVersion: StoredObjectVersionWithPointInTime;
+  newVersion: StoredObjectVersionWithPointInTime;
 }) => {
-    state.versions.unshift(newVersion);
+  state.versions.unshift(newVersion);
 };
 </script>

 <template>
-    <a @click="download_version_and_open_modal" class="dropdown-item">
-        <history-button-modal
-            ref="modal"
-            :versions="state.versions"
-            :stored-object="storedObject"
-            :can-edit="canEdit"
-            @restore-version="onRestoreVersion"
-        ></history-button-modal>
-        <i class="fa fa-history"></i>
-        Historique
-    </a>
+  <a @click="download_version_and_open_modal" class="dropdown-item">
+    <history-button-modal
+      ref="modal"
+      :versions="state.versions"
+      :stored-object="storedObject"
+      :can-edit="canEdit"
+      @restore-version="onRestoreVersion"
+    ></history-button-modal>
+    <i class="fa fa-history"></i>
+    Historique
+  </a>
 </template>

 <style scoped lang="scss">
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 </style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import {
-    StoredObject,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectVersionWithPointInTime,
 } from "./../../../types";
 import HistoryButtonListItem from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue";
 import { computed, reactive } from "vue";

 interface HistoryButtonListConfig {
-    versions: StoredObjectVersionWithPointInTime[];
-    storedObject: StoredObject;
-    canEdit: boolean;
+  versions: StoredObjectVersionWithPointInTime[];
+  storedObject: StoredObject;
+  canEdit: boolean;
 }

 const emit = defineEmits<{
-    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
+  restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
 }>();

 interface HistoryButtonListState {
-    /**
-     * Contains the number of the newly created version when a version is restored.
-     */
-    restored: number;
+  /**
+   * Contains the number of the newly created version when a version is restored.
+   */
+  restored: number;
 }

 const props = defineProps<HistoryButtonListConfig>();
@@ -28,11 +28,11 @@ const props = defineProps<HistoryButtonListConfig>();
 const state = reactive<HistoryButtonListState>({ restored: -1 });

 const higher_version = computed<number>(() =>
-    props.versions.reduce(
-        (accumulator: number, version: StoredObjectVersionWithPointInTime) =>
-            Math.max(accumulator, version.version),
-        -1,
-    ),
+  props.versions.reduce(
+    (accumulator: number, version: StoredObjectVersionWithPointInTime) =>
+      Math.max(accumulator, version.version),
+    -1,
+  ),
 );

 /**
@@ -41,32 +41,32 @@ const higher_version = computed<number>(() =>
 * internally, keep track of the newly restored version
 */
 const onRestored = ({
-    newVersion,
+  newVersion,
 }: {
-    newVersion: StoredObjectVersionWithPointInTime;
+  newVersion: StoredObjectVersionWithPointInTime;
 }) => {
-    state.restored = newVersion.version;
-    emit("restoreVersion", { newVersion });
+  state.restored = newVersion.version;
+  emit("restoreVersion", { newVersion });
 };
 </script>

 <template>
-    <template v-if="props.versions.length > 0">
-        <div class="container">
-            <template v-for="v in props.versions" :key="v.id">
-                <history-button-list-item
-                    :version="v"
-                    :can-edit="canEdit"
-                    :is-current="higher_version === v.version"
-                    :stored-object="storedObject"
-                    @restore-version="onRestored"
-                ></history-button-list-item>
-            </template>
-        </div>
-    </template>
-    <template v-else>
-        <p>Chargement des versions</p>
-    </template>
+  <template v-if="props.versions.length > 0">
+    <div class="container">
+      <template v-for="v in props.versions" :key="v.id">
+        <history-button-list-item
+          :version="v"
+          :can-edit="canEdit"
+          :is-current="higher_version === v.version"
+          :stored-object="storedObject"
+          @restore-version="onRestored"
+        ></history-button-list-item>
+      </template>
+    </div>
+  </template>
+  <template v-else>
+    <p>Chargement des versions</p>
+  </template>
 </template>

 <style scoped lang="scss"></style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
-    StoredObject,
-    StoredObjectPointInTime,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectPointInTime,
+  StoredObjectVersionWithPointInTime,
 } from "./../../../types";
 import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
 import { ISOToDatetime } from "./../../../../../../ChillMainBundle/Resources/public/chill/js/date";
@@ -12,185 +12,173 @@ import DownloadButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/Downloa
 import { computed } from "vue";

 interface HistoryButtonListItemConfig {
-    version: StoredObjectVersionWithPointInTime;
-    storedObject: StoredObject;
-    canEdit: boolean;
-    isCurrent: boolean;
+  version: StoredObjectVersionWithPointInTime;
+  storedObject: StoredObject;
+  canEdit: boolean;
+  isCurrent: boolean;
 }

 const emit = defineEmits<{
-    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
+  restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
 }>();

 const props = defineProps<HistoryButtonListItemConfig>();

 const onRestore = ({
-    newVersion,
+  newVersion,
 }: {
-    newVersion: StoredObjectVersionWithPointInTime;
+  newVersion: StoredObjectVersionWithPointInTime;
 }) => {
-    emit("restoreVersion", { newVersion });
+  emit("restoreVersion", { newVersion });
 };

 const isKeptBeforeConversion = computed<boolean>(() => {
-    if ("point-in-times" in props.version) {
-        return props.version["point-in-times"].reduce(
-            (accumulator: boolean, pit: StoredObjectPointInTime) =>
-                accumulator || "keep-before-conversion" === pit.reason,
-            false,
-        );
-    } else {
-        return false;
-    }
+  if ("point-in-times" in props.version) {
+    return props.version["point-in-times"].reduce(
+      (accumulator: boolean, pit: StoredObjectPointInTime) =>
+        accumulator || "keep-before-conversion" === pit.reason,
+      false,
+    );
+  } else {
+    return false;
+  }
 });

 const isRestored = computed<boolean>(
-    () => props.version.version > 0 && null !== props.version["from-restored"],
+  () => props.version.version > 0 && null !== props.version["from-restored"],
 );

 const isDuplicated = computed<boolean>(
-    () =>
-        props.version.version === 0 && null !== props.version["from-restored"],
+  () => props.version.version === 0 && null !== props.version["from-restored"],
 );

 const classes = computed<{
-    row: true;
-    "row-hover": true;
-    "blinking-1": boolean;
-    "blinking-2": boolean;
+  row: true;
+  "row-hover": true;
+  "blinking-1": boolean;
+  "blinking-2": boolean;
 }>(() => ({
-    row: true,
-    "row-hover": true,
-    "blinking-1": props.isRestored && 0 === props.version.version % 2,
-    "blinking-2": props.isRestored && 1 === props.version.version % 2,
+  row: true,
+  "row-hover": true,
+  "blinking-1": props.isRestored && 0 === props.version.version % 2,
+  "blinking-2": props.isRestored && 1 === props.version.version % 2,
 }));
 </script>

 <template>
-    <div :class="classes">
-        <div
-            class="col-12 tags"
-            v-if="
-                isCurrent ||
-                isKeptBeforeConversion ||
-                isRestored ||
-                isDuplicated
-            "
-        >
-            <span class="badge bg-success" v-if="isCurrent"
-                >Version actuelle</span
-            >
-            <span class="badge bg-info" v-if="isKeptBeforeConversion"
-                >Conservée avant conversion dans un autre format</span
-            >
-            <span class="badge bg-info" v-if="isRestored"
-                >Restaurée depuis la version
-                {{ version["from-restored"]?.version + 1 }}</span
-            >
-            <span class="badge bg-info" v-if="isDuplicated"
-                >Dupliqué depuis un autre document</span
-            >
-        </div>
-        <div class="col-12">
-            <file-icon :type="version.type"></file-icon>
-            <span
-                ><strong>&nbsp;#{{ version.version + 1 }}&nbsp;</strong></span
-            >
-            <template
-                v-if="version.createdBy !== null && version.createdAt !== null"
-                ><strong v-if="version.version == 0">créé par</strong
-                ><strong v-else>modifié par</strong>
-                <span class="badge-user"
-                    ><UserRenderBoxBadge
-                        :user="version.createdBy"
-                    ></UserRenderBoxBadge
-                ></span>
-                <strong>à</strong>
-                {{
-                    $d(ISOToDatetime(version.createdAt.datetime8601), "long")
-                }}</template
-            ><template
-                v-if="version.createdBy === null && version.createdAt !== null"
-                ><strong v-if="version.version == 0">Créé le</strong
-                ><strong v-else>modifié le</strong>
-                {{
-                    $d(ISOToDatetime(version.createdAt.datetime8601), "long")
-                }}</template
-            >
-        </div>
-        <div class="col-12">
-            <ul class="record_actions small slim on-version-actions">
-                <li v-if="canEdit && !isCurrent">
-                    <restore-version-button
-                        :stored-object-version="props.version"
-                        @restore-version="onRestore"
-                    ></restore-version-button>
-                </li>
-                <li>
-                    <download-button
-                        :stored-object="storedObject"
-                        :at-version="version"
-                        :classes="{
-                            btn: true,
-                            'btn-outline-primary': true,
-                            'btn-sm': true,
-                        }"
-                        :display-action-string-in-button="false"
-                    ></download-button>
-                </li>
-            </ul>
-        </div>
+  <div :class="classes">
+    <div
+      class="col-12 tags"
+      v-if="isCurrent || isKeptBeforeConversion || isRestored || isDuplicated"
+    >
+      <span class="badge bg-success" v-if="isCurrent">Version actuelle</span>
+      <span class="badge bg-info" v-if="isKeptBeforeConversion"
+        >Conservée avant conversion dans un autre format</span
+      >
+      <span class="badge bg-info" v-if="isRestored"
+        >Restaurée depuis la version
+        {{ version["from-restored"]?.version + 1 }}</span
+      >
+      <span class="badge bg-info" v-if="isDuplicated"
+        >Dupliqué depuis un autre document</span
+      >
    </div>
+    <div class="col-12">
+      <file-icon :type="version.type"></file-icon>
+      <span
+        ><strong>&nbsp;#{{ version.version + 1 }}&nbsp;</strong></span
+      >
+      <template v-if="version.createdBy !== null && version.createdAt !== null"
+        ><strong v-if="version.version == 0">créé par</strong
+        ><strong v-else>modifié par</strong>
+        <span class="badge-user"
+          ><UserRenderBoxBadge :user="version.createdBy"></UserRenderBoxBadge
+        ></span>
+        <strong>à</strong>
+        {{
+          $d(ISOToDatetime(version.createdAt.datetime8601), "long")
+        }}</template
+      ><template v-if="version.createdBy === null && version.createdAt !== null"
+        ><strong v-if="version.version == 0">Créé le</strong
+        ><strong v-else>modifié le</strong>
+        {{
+          $d(ISOToDatetime(version.createdAt.datetime8601), "long")
+        }}</template
+      >
+    </div>
+    <div class="col-12">
+      <ul class="record_actions small slim on-version-actions">
+        <li v-if="canEdit && !isCurrent">
+          <restore-version-button
+            :stored-object-version="props.version"
+            @restore-version="onRestore"
+          ></restore-version-button>
+        </li>
+        <li>
+          <download-button
+            :stored-object="storedObject"
+            :at-version="version"
+            :classes="{
+              btn: true,
+              'btn-outline-primary': true,
+              'btn-sm': true,
+            }"
+            :display-action-string-in-button="false"
+          ></download-button>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>

 <style scoped lang="scss">
 div.tags {
-    span.badge:not(:last-child) {
-        margin-right: 0.5rem;
-    }
+  span.badge:not(:last-child) {
+    margin-right: 0.5rem;
+  }
 }
 // to make the animation restart, we have the same animation twice,
 // and alternate between both
 .blinking-1 {
-    animation-name: backgroundColorPalette-1;
-    animation-duration: 8s;
-    animation-iteration-count: 1;
-    animation-direction: normal;
-    animation-timing-function: linear;
+  animation-name: backgroundColorPalette-1;
+  animation-duration: 8s;
+  animation-iteration-count: 1;
+  animation-direction: normal;
+  animation-timing-function: linear;
 }
@keyframes backgroundColorPalette-1 {
-    0% {
-        background: var(--bs-chill-green-dark);
-    }
-    25% {
-        background: var(--bs-chill-green);
-    }
-    65% {
-        background: var(--bs-chill-beige);
-    }
-    100% {
-        background: unset;
-    }
+  0% {
+    background: var(--bs-chill-green-dark);
+  }
+  25% {
+    background: var(--bs-chill-green);
+  }
+  65% {
+    background: var(--bs-chill-beige);
+  }
+  100% {
+    background: unset;
+  }
 }
 .blinking-2 {
-    animation-name: backgroundColorPalette-2;
-    animation-duration: 8s;
-    animation-iteration-count: 1;
-    animation-direction: normal;
-    animation-timing-function: linear;
+  animation-name: backgroundColorPalette-2;
+  animation-duration: 8s;
+  animation-iteration-count: 1;
+  animation-direction: normal;
+  animation-timing-function: linear;
 }
@keyframes backgroundColorPalette-2 {
-    0% {
-        background: var(--bs-chill-green-dark);
-    }
-    25% {
-        background: var(--bs-chill-green);
-    }
-    65% {
-        background: var(--bs-chill-beige);
-    }
-    100% {
-        background: unset;
-    }
+  0% {
+    background: var(--bs-chill-green-dark);
+  }
+  25% {
+    background: var(--bs-chill-green);
+  }
+  65% {
+    background: var(--bs-chill-beige);
+  }
+  100% {
+    background: unset;
+  }
 }
 </style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
@@ -3,54 +3,54 @@ import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import { reactive } from "vue";
 import HistoryButtonList from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue";
 import {
-    StoredObject,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectVersionWithPointInTime,
 } from "./../../../types";

 interface HistoryButtonListConfig {
-    versions: StoredObjectVersionWithPointInTime[];
-    storedObject: StoredObject;
-    canEdit: boolean;
+  versions: StoredObjectVersionWithPointInTime[];
+  storedObject: StoredObject;
+  canEdit: boolean;
 }

 const emit = defineEmits<{
-    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
+  restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
 }>();

 interface HistoryButtonModalState {
-    opened: boolean;
+  opened: boolean;
 }

 const props = defineProps<HistoryButtonListConfig>();
 const state = reactive<HistoryButtonModalState>({ opened: false });

 const open = () => {
-    state.opened = true;
+  state.opened = true;
 };

 const onRestoreVersion = (payload: {
-    newVersion: StoredObjectVersionWithPointInTime;
+  newVersion: StoredObjectVersionWithPointInTime;
 }) => emit("restoreVersion", payload);

 defineExpose({ open });
 </script>
 <template>
-    <Teleport to="body">
-        <modal v-if="state.opened" @close="state.opened = false">
-            <template v-slot:header>
-                <h3>Historique des versions du document</h3>
-            </template>
-            <template v-slot:body>
-                <p>Les versions sont conservées pendant 90 jours.</p>
-                <history-button-list
-                    :versions="props.versions"
-                    :can-edit="canEdit"
-                    :stored-object="storedObject"
-                    @restore-version="onRestoreVersion"
-                ></history-button-list>
-            </template>
-        </modal>
-    </Teleport>
+  <Teleport to="body">
+    <modal v-if="state.opened" @close="state.opened = false">
+      <template v-slot:header>
+        <h3>Historique des versions du document</h3>
+      </template>
+      <template v-slot:body>
+        <p>Les versions sont conservées pendant 90 jours.</p>
+        <history-button-list
+          :versions="props.versions"
+          :can-edit="canEdit"
+          :stored-object="storedObject"
+          @restore-version="onRestoreVersion"
+        ></history-button-list>
+      </template>
+    </modal>
+  </Teleport>
 </template>

 <style scoped lang="scss"></style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import {
-    StoredObjectVersionPersisted,
-    StoredObjectVersionWithPointInTime,
+  StoredObjectVersionPersisted,
+  StoredObjectVersionWithPointInTime,
 } from "../../../types";
 import { useToast } from "vue-toast-notification";
 import { restore_version } from "./api";

 interface RestoreVersionButtonProps {
-    storedObjectVersion: StoredObjectVersionPersisted;
+  storedObjectVersion: StoredObjectVersionPersisted;
 }

 const emit = defineEmits<{
-    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
+  restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
 }>();

 const props = defineProps<RestoreVersionButtonProps>();
@@ -19,21 +19,21 @@ const props = defineProps<RestoreVersionButtonProps>();
 const $toast = useToast();

 const restore_version_fn = async () => {
-    const newVersion = await restore_version(props.storedObjectVersion);
+  const newVersion = await restore_version(props.storedObjectVersion);

-    $toast.success("Version restaurée");
-    emit("restoreVersion", { newVersion });
+  $toast.success("Version restaurée");
+  emit("restoreVersion", { newVersion });
 };
 </script>

 <template>
-    <button
-        class="btn btn-outline-action"
-        @click="restore_version_fn"
-        title="Restaurer"
-    >
-        <i class="fa fa-rotate-left"></i> Restaurer
-    </button>
+  <button
+    class="btn btn-outline-action"
+    @click="restore_version_fn"
+    title="Restaurer"
+  >
+    <i class="fa fa-rotate-left"></i> Restaurer
+  </button>
 </template>

 <style scoped lang="scss"></style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts
@@ -1,33 +1,33 @@
 import {
-    StoredObject,
-    StoredObjectVersionPersisted,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectVersionPersisted,
+  StoredObjectVersionWithPointInTime,
 } from "../../../types";
 import {
-    fetchResults,
-    makeFetch,
+  fetchResults,
+  makeFetch,
 } from "../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";

 export const get_versions = async (
-    storedObject: StoredObject,
+  storedObject: StoredObject,
 ): Promise<StoredObjectVersionWithPointInTime[]> => {
-    const versions = await fetchResults<StoredObjectVersionWithPointInTime>(
-        `/api/1.0/doc-store/stored-object/${storedObject.uuid}/versions`,
-    );
+  const versions = await fetchResults<StoredObjectVersionWithPointInTime>(
+    `/api/1.0/doc-store/stored-object/${storedObject.uuid}/versions`,
+  );

-    return versions.sort(
-        (
-            a: StoredObjectVersionWithPointInTime,
-            b: StoredObjectVersionWithPointInTime,
-        ) => b.version - a.version,
-    );
+  return versions.sort(
+    (
+      a: StoredObjectVersionWithPointInTime,
+      b: StoredObjectVersionWithPointInTime,
+    ) => b.version - a.version,
+  );
 };

 export const restore_version = async (
-    version: StoredObjectVersionPersisted,
+  version: StoredObjectVersionPersisted,
 ): Promise<StoredObjectVersionWithPointInTime> => {
-    return await makeFetch<null, StoredObjectVersionWithPointInTime>(
-        "POST",
-        `/api/1.0/doc-store/stored-object/restore-from-version/${version.id}`,
-    );
+  return await makeFetch<null, StoredObjectVersionWithPointInTime>(
+    "POST",
+    `/api/1.0/doc-store/stored-object/restore-from-version/${version.id}`,
+  );
 };
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/WopiEditButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/WopiEditButton.vue
@@ -1,29 +1,27 @@
 <template>
-    <a
-        :class="Object.assign(props.classes, { btn: true })"
-        @click="beforeLeave($event)"
-        :href="
-            build_wopi_editor_link(props.storedObject.uuid, props.returnPath)
-        "
-    >
-        <i class="fa fa-paragraph"></i>
-        Editer en ligne
-    </a>
+  <a
+    :class="Object.assign(props.classes, { btn: true })"
+    @click="beforeLeave($event)"
+    :href="build_wopi_editor_link(props.storedObject.uuid, props.returnPath)"
+  >
+    <i class="fa fa-paragraph"></i>
+    Editer en ligne
+  </a>
 </template>

 <script lang="ts" setup>
 import WopiEditButton from "./WopiEditButton.vue";
 import { build_wopi_editor_link } from "./helpers";
 import {
-    StoredObject,
-    WopiEditButtonExecutableBeforeLeaveFunction,
+  StoredObject,
+  WopiEditButtonExecutableBeforeLeaveFunction,
 } from "../../types";

 interface WopiEditButtonConfig {
-    storedObject: StoredObject;
-    returnPath?: string;
-    classes: Record<string, boolean>;
-    executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;
+  storedObject: StoredObject;
+  returnPath?: string;
+  classes: Record<string, boolean>;
+  executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;
 }

 const props = defineProps<WopiEditButtonConfig>();
@@ -31,24 +29,24 @@ const props = defineProps<WopiEditButtonConfig>();
 let executed = false;

 async function beforeLeave(event: Event): Promise<true> {
-    if (props.executeBeforeLeave === undefined || executed === true) {
-        return Promise.resolve(true);
-    }
-
-    event.preventDefault();
-
-    await props.executeBeforeLeave();
-    executed = true;
-
-    const link = event.target as HTMLAnchorElement;
-    link.click();
-
+  if (props.executeBeforeLeave === undefined || executed === true) {
    return Promise.resolve(true);
+  }
+
+  event.preventDefault();
+
+  await props.executeBeforeLeave();
+  executed = true;
+
+  const link = event.target as HTMLAnchorElement;
+  link.click();
+
+  return Promise.resolve(true);
 }
 </script>

 <style scoped lang="scss">
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 </style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts
@@ -1,235 +1,230 @@
 import {
-    StoredObject,
-    StoredObjectStatus,
-    StoredObjectStatusChange,
-    StoredObjectVersion,
+  StoredObject,
+  StoredObjectStatus,
+  StoredObjectStatusChange,
+  StoredObjectVersion,
 } from "../../types";
 import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";

 const MIMES_EDIT = new Set([
-    "application/vnd.ms-powerpoint",
-    "application/vnd.ms-excel",
-    "application/vnd.oasis.opendocument.text",
-    "application/vnd.oasis.opendocument.text-flat-xml",
-    "application/vnd.oasis.opendocument.spreadsheet",
-    "application/vnd.oasis.opendocument.spreadsheet-flat-xml",
-    "application/vnd.oasis.opendocument.presentation",
-    "application/vnd.oasis.opendocument.presentation-flat-xml",
-    "application/vnd.oasis.opendocument.graphics",
-    "application/vnd.oasis.opendocument.graphics-flat-xml",
-    "application/vnd.oasis.opendocument.chart",
-    "application/msword",
-    "application/vnd.ms-excel",
-    "application/vnd.ms-powerpoint",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    "application/vnd.ms-word.document.macroEnabled.12",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
-    "application/vnd.ms-excel.sheet.macroEnabled.12",
-    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
-    "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
-    "application/x-dif-document",
-    "text/spreadsheet",
-    "text/csv",
-    "application/x-dbase",
-    "text/rtf",
-    "text/plain",
-    "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.ms-excel",
+  "application/vnd.oasis.opendocument.text",
+  "application/vnd.oasis.opendocument.text-flat-xml",
+  "application/vnd.oasis.opendocument.spreadsheet",
+  "application/vnd.oasis.opendocument.spreadsheet-flat-xml",
+  "application/vnd.oasis.opendocument.presentation",
+  "application/vnd.oasis.opendocument.presentation-flat-xml",
+  "application/vnd.oasis.opendocument.graphics",
+  "application/vnd.oasis.opendocument.graphics-flat-xml",
+  "application/vnd.oasis.opendocument.chart",
+  "application/msword",
+  "application/vnd.ms-excel",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.ms-word.document.macroEnabled.12",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
+  "application/vnd.ms-excel.sheet.macroEnabled.12",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
+  "application/x-dif-document",
+  "text/spreadsheet",
+  "text/csv",
+  "application/x-dbase",
+  "text/rtf",
+  "text/plain",
+  "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
 ]);

 const MIMES_VIEW = new Set([
-    ...MIMES_EDIT,
-    [
-        "image/svg+xml",
-        "application/vnd.sun.xml.writer",
-        "application/vnd.sun.xml.calc",
-        "application/vnd.sun.xml.impress",
-        "application/vnd.sun.xml.draw",
-        "application/vnd.sun.xml.writer.global",
-        "application/vnd.sun.xml.writer.template",
-        "application/vnd.sun.xml.calc.template",
-        "application/vnd.sun.xml.impress.template",
-        "application/vnd.sun.xml.draw.template",
-        "application/vnd.oasis.opendocument.text-master",
-        "application/vnd.oasis.opendocument.text-template",
-        "application/vnd.oasis.opendocument.text-master-template",
-        "application/vnd.oasis.opendocument.spreadsheet-template",
-        "application/vnd.oasis.opendocument.presentation-template",
-        "application/vnd.oasis.opendocument.graphics-template",
-        "application/vnd.ms-word.template.macroEnabled.12",
-        "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
-        "application/vnd.ms-excel.template.macroEnabled.12",
-        "application/vnd.openxmlformats-officedocument.presentationml.template",
-        "application/vnd.ms-powerpoint.template.macroEnabled.12",
-        "application/vnd.wordperfect",
-        "application/x-aportisdoc",
-        "application/x-hwp",
-        "application/vnd.ms-works",
-        "application/x-mswrite",
-        "application/vnd.lotus-1-2-3",
-        "image/cgm",
-        "image/vnd.dxf",
-        "image/x-emf",
-        "image/x-wmf",
-        "application/coreldraw",
-        "application/vnd.visio2013",
-        "application/vnd.visio",
-        "application/vnd.ms-visio.drawing",
-        "application/x-mspublisher",
-        "application/x-sony-bbeb",
-        "application/x-gnumeric",
-        "application/macwriteii",
-        "application/x-iwork-numbers-sffnumbers",
-        "application/vnd.oasis.opendocument.text-web",
-        "application/x-pagemaker",
-        "application/x-fictionbook+xml",
-        "application/clarisworks",
-        "image/x-wpg",
-        "application/x-iwork-pages-sffpages",
-        "application/x-iwork-keynote-sffkey",
-        "application/x-abiword",
-        "image/x-freehand",
-        "application/vnd.sun.xml.chart",
-        "application/x-t602",
-        "image/bmp",
-        "image/png",
-        "image/gif",
-        "image/tiff",
-        "image/jpg",
-        "image/jpeg",
-        "application/pdf",
-    ],
+  ...MIMES_EDIT,
+  [
+    "image/svg+xml",
+    "application/vnd.sun.xml.writer",
+    "application/vnd.sun.xml.calc",
+    "application/vnd.sun.xml.impress",
+    "application/vnd.sun.xml.draw",
+    "application/vnd.sun.xml.writer.global",
+    "application/vnd.sun.xml.writer.template",
+    "application/vnd.sun.xml.calc.template",
+    "application/vnd.sun.xml.impress.template",
+    "application/vnd.sun.xml.draw.template",
+    "application/vnd.oasis.opendocument.text-master",
+    "application/vnd.oasis.opendocument.text-template",
+    "application/vnd.oasis.opendocument.text-master-template",
+    "application/vnd.oasis.opendocument.spreadsheet-template",
+    "application/vnd.oasis.opendocument.presentation-template",
+    "application/vnd.oasis.opendocument.graphics-template",
+    "application/vnd.ms-word.template.macroEnabled.12",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
+    "application/vnd.ms-excel.template.macroEnabled.12",
+    "application/vnd.openxmlformats-officedocument.presentationml.template",
+    "application/vnd.ms-powerpoint.template.macroEnabled.12",
+    "application/vnd.wordperfect",
+    "application/x-aportisdoc",
+    "application/x-hwp",
+    "application/vnd.ms-works",
+    "application/x-mswrite",
+    "application/vnd.lotus-1-2-3",
+    "image/cgm",
+    "image/vnd.dxf",
+    "image/x-emf",
+    "image/x-wmf",
+    "application/coreldraw",
+    "application/vnd.visio2013",
+    "application/vnd.visio",
+    "application/vnd.ms-visio.drawing",
+    "application/x-mspublisher",
+    "application/x-sony-bbeb",
+    "application/x-gnumeric",
+    "application/macwriteii",
+    "application/x-iwork-numbers-sffnumbers",
+    "application/vnd.oasis.opendocument.text-web",
+    "application/x-pagemaker",
+    "application/x-fictionbook+xml",
+    "application/clarisworks",
+    "image/x-wpg",
+    "application/x-iwork-pages-sffpages",
+    "application/x-iwork-keynote-sffkey",
+    "application/x-abiword",
+    "image/x-freehand",
+    "application/vnd.sun.xml.chart",
+    "application/x-t602",
+    "image/bmp",
+    "image/png",
+    "image/gif",
+    "image/tiff",
+    "image/jpg",
+    "image/jpeg",
+    "application/pdf",
+  ],
 ]);

 export interface SignedUrlGet {
-    method: "GET" | "HEAD";
-    url: string;
-    expires: number;
-    object_name: string;
+  method: "GET" | "HEAD";
+  url: string;
+  expires: number;
+  object_name: string;
 }

 function is_extension_editable(mimeType: string): boolean {
-    return MIMES_EDIT.has(mimeType);
+  return MIMES_EDIT.has(mimeType);
 }

 function is_extension_viewable(mimeType: string): boolean {
-    return MIMES_VIEW.has(mimeType);
+  return MIMES_VIEW.has(mimeType);
 }

 function build_convert_link(uuid: string) {
-    return `/chill/wopi/convert/${uuid}`;
+  return `/chill/wopi/convert/${uuid}`;
 }

 function build_download_info_link(
-    storedObject: StoredObject,
-    atVersion: null | StoredObjectVersion,
+  storedObject: StoredObject,
+  atVersion: null | StoredObjectVersion,
 ): string {
-    const url = `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/get`;
+  const url = `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/get`;

-    if (null !== atVersion) {
-        const params = new URLSearchParams({ version: atVersion.filename });
+  if (null !== atVersion) {
+    const params = new URLSearchParams({ version: atVersion.filename });

-        return url + "?" + params.toString();
-    }
+    return url + "?" + params.toString();
+  }

-    return url;
+  return url;
 }

 async function download_info_link(
-    storedObject: StoredObject,
-    atVersion: null | StoredObjectVersion,
+  storedObject: StoredObject,
+  atVersion: null | StoredObjectVersion,
 ): Promise<SignedUrlGet> {
-    return makeFetch("GET", build_download_info_link(storedObject, atVersion));
+  return makeFetch("GET", build_download_info_link(storedObject, atVersion));
 }

 function build_wopi_editor_link(uuid: string, returnPath?: string) {
-    if (returnPath === undefined) {
-        returnPath =
-            window.location.pathname +
-            window.location.search +
-            window.location.hash;
-    }
+  if (returnPath === undefined) {
+    returnPath =
+      window.location.pathname + window.location.search + window.location.hash;
+  }

-    return (
-        `/chill/wopi/edit/${uuid}?returnPath=` + encodeURIComponent(returnPath)
-    );
+  return (
+    `/chill/wopi/edit/${uuid}?returnPath=` + encodeURIComponent(returnPath)
+  );
 }

 function download_doc(url: string): Promise<Blob> {
-    return window.fetch(url).then((r) => {
-        if (r.ok) {
-            return r.blob();
-        }
+  return window.fetch(url).then((r) => {
+    if (r.ok) {
+      return r.blob();
+    }

-        throw new Error("Could not download document");
-    });
+    throw new Error("Could not download document");
+  });
 }

 async function download_and_decrypt_doc(
-    storedObject: StoredObject,
-    atVersion: null | StoredObjectVersion,
+  storedObject: StoredObject,
+  atVersion: null | StoredObjectVersion,
 ): Promise<Blob> {
-    const algo = "AES-CBC";
+  const algo = "AES-CBC";

-    const atVersionToDownload = atVersion ?? storedObject.currentVersion;
+  const atVersionToDownload = atVersion ?? storedObject.currentVersion;

-    if (null === atVersionToDownload) {
-        throw new Error("no version associated to stored object");
-    }
+  if (null === atVersionToDownload) {
+    throw new Error("no version associated to stored object");
+  }

-    // sometimes, the downloadInfo may be embedded into the storedObject
-    console.log("storedObject", storedObject);
-    let downloadInfo;
-    if (
-        typeof storedObject._links !== "undefined" &&
-        typeof storedObject._links.downloadLink !== "undefined"
-    ) {
-        downloadInfo = storedObject._links.downloadLink;
-    } else {
-        downloadInfo = await download_info_link(
-            storedObject,
-            atVersionToDownload,
-        );
-    }
+  // sometimes, the downloadInfo may be embedded into the storedObject
+  console.log("storedObject", storedObject);
+  let downloadInfo;
+  if (
+    typeof storedObject._links !== "undefined" &&
+    typeof storedObject._links.downloadLink !== "undefined"
+  ) {
+    downloadInfo = storedObject._links.downloadLink;
+  } else {
+    downloadInfo = await download_info_link(storedObject, atVersionToDownload);
+  }

-    const rawResponse = await window.fetch(downloadInfo.url);
+  const rawResponse = await window.fetch(downloadInfo.url);

-    if (!rawResponse.ok) {
-        throw new Error(
-            "error while downloading raw file " +
-                rawResponse.status +
-                " " +
-                rawResponse.statusText,
-        );
-    }
+  if (!rawResponse.ok) {
+    throw new Error(
+      "error while downloading raw file " +
+        rawResponse.status +
+        " " +
+        rawResponse.statusText,
+    );
+  }

-    if (atVersionToDownload.iv.length === 0) {
-        return rawResponse.blob();
-    }
+  if (atVersionToDownload.iv.length === 0) {
+    return rawResponse.blob();
+  }

-    const rawBuffer = await rawResponse.arrayBuffer();
-    try {
-        const key = await window.crypto.subtle.importKey(
-            "jwk",
-            atVersionToDownload.keyInfos,
-            { name: algo },
-            false,
-            ["decrypt"],
-        );
-        const iv = Uint8Array.from(atVersionToDownload.iv);
-        const decrypted = await window.crypto.subtle.decrypt(
-            { name: algo, iv: iv },
-            key,
-            rawBuffer,
-        );
+  const rawBuffer = await rawResponse.arrayBuffer();
+  try {
+    const key = await window.crypto.subtle.importKey(
+      "jwk",
+      atVersionToDownload.keyInfos,
+      { name: algo },
+      false,
+      ["decrypt"],
+    );
+    const iv = Uint8Array.from(atVersionToDownload.iv);
+    const decrypted = await window.crypto.subtle.decrypt(
+      { name: algo, iv: iv },
+      key,
+      rawBuffer,
+    );

-        return Promise.resolve(new Blob([decrypted]));
-    } catch (e) {
-        console.error("encounter error while keys and decrypt operations");
-        console.error(e);
+    return Promise.resolve(new Blob([decrypted]));
+  } catch (e) {
+    console.error("encounter error while keys and decrypt operations");
+    console.error(e);

-        throw e;
-    }
+    throw e;
+  }
 }

 /**
@@ -239,48 +234,45 @@ async function download_and_decrypt_doc(
 * storage.
 */
 async function download_doc_as_pdf(storedObject: StoredObject): Promise<Blob> {
-    if (null === storedObject.currentVersion) {
-        throw new Error("the stored object does not count any version");
-    }
+  if (null === storedObject.currentVersion) {
+    throw new Error("the stored object does not count any version");
+  }

-    if (storedObject.currentVersion?.type === "application/pdf") {
-        return download_and_decrypt_doc(
-            storedObject,
-            storedObject.currentVersion,
-        );
-    }
+  if (storedObject.currentVersion?.type === "application/pdf") {
+    return download_and_decrypt_doc(storedObject, storedObject.currentVersion);
+  }

-    const convertLink = build_convert_link(storedObject.uuid);
-    const response = await fetch(convertLink);
+  const convertLink = build_convert_link(storedObject.uuid);
+  const response = await fetch(convertLink);

-    if (!response.ok) {
-        throw new Error("Could not convert the document: " + response.status);
-    }
+  if (!response.ok) {
+    throw new Error("Could not convert the document: " + response.status);
+  }

-    return response.blob();
+  return response.blob();
 }

 async function is_object_ready(
-    storedObject: StoredObject,
+  storedObject: StoredObject,
 ): Promise<StoredObjectStatusChange> {
-    const new_status_response = await window.fetch(
-        `/api/1.0/doc-store/stored-object/${storedObject.uuid}/is-ready`,
-    );
+  const new_status_response = await window.fetch(
+    `/api/1.0/doc-store/stored-object/${storedObject.uuid}/is-ready`,
+  );

-    if (!new_status_response.ok) {
-        throw new Error("could not fetch the new status");
-    }
+  if (!new_status_response.ok) {
+    throw new Error("could not fetch the new status");
+  }

-    return await new_status_response.json();
+  return await new_status_response.json();
 }

 export {
-    build_convert_link,
-    build_wopi_editor_link,
-    download_and_decrypt_doc,
-    download_doc,
-    download_doc_as_pdf,
-    is_extension_editable,
-    is_extension_viewable,
-    is_object_ready,
+  build_convert_link,
+  build_wopi_editor_link,
+  download_and_decrypt_doc,
+  download_doc,
+  download_doc_as_pdf,
+  is_extension_editable,
+  is_extension_viewable,
+  is_object_ready,
 };
--- a/src/Bundle/ChillDocStoreBundle/Serializer/Normalizer/StoredObjectVersionNormalizer.php
+++ b/src/Bundle/ChillDocStoreBundle/Serializer/Normalizer/StoredObjectVersionNormalizer.php
@@ -43,11 +43,17 @@ class StoredObjectVersionNormalizer implements NormalizerInterface, NormalizerAw
            'createdBy' => $this->normalizer->normalize($object->getCreatedBy(), $format, [...$context, UserNormalizer::AT_DATE => $object->getCreatedAt()]),
        ];

-        if (in_array(self::WITH_POINT_IN_TIMES_CONTEXT, $context[AbstractNormalizer::GROUPS] ?? [], true)) {
+        $normalizationGroups = $context[AbstractNormalizer::GROUPS] ?? [];
+
+        if (is_string($normalizationGroups)) {
+            $normalizationGroups = [$normalizationGroups];
+        }
+
+        if (in_array(self::WITH_POINT_IN_TIMES_CONTEXT, $normalizationGroups, true)) {
            $data['point-in-times'] = $this->normalizer->normalize($object->getPointInTimes(), $format, $context);
        }

-        if (in_array(self::WITH_RESTORED_CONTEXT, $context[AbstractNormalizer::GROUPS] ?? [], true)) {
+        if (in_array(self::WITH_RESTORED_CONTEXT, $normalizationGroups, true)) {
            $data['from-restored'] = $this->normalizer->normalize($object->getCreatedFrom(), $format, [AbstractNormalizer::GROUPS => ['read']]);
        }

--- a/src/Bundle/ChillEventBundle/Controller/Admin/EventBudgetKindController.php
+++ b/src/Bundle/ChillEventBundle/Controller/Admin/EventBudgetKindController.php
@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\EventBundle\Controller\Admin;
+
+use Chill\MainBundle\CRUD\Controller\CRUDController;
+use Chill\MainBundle\Pagination\PaginatorInterface;
+use Doctrine\ORM\QueryBuilder;
+use Symfony\Component\HttpFoundation\Request;
+
+class EventBudgetKindController extends CRUDController
+{
+    protected function orderQuery(string $action, $query, Request $request, PaginatorInterface $paginator)
+    {
+        /* @var QueryBuilder $query */
+        $query->addOrderBy('e.type', 'ASC');
+
+        return parent::orderQuery($action, $query, $request, $paginator);
+    }
+}
--- a/src/Bundle/ChillEventBundle/Controller/EventController.php
+++ b/src/Bundle/ChillEventBundle/Controller/EventController.php
@@ -23,11 +23,11 @@ use Chill\MainBundle\Security\Authorization\AuthorizationHelperInterface;
 use Chill\PersonBundle\Entity\Person;
 use Chill\PersonBundle\Form\Type\PickPersonDynamicType;
 use Chill\PersonBundle\Privacy\PrivacyEvent;
+use Doctrine\Persistence\ManagerRegistry;
 use PhpOffice\PhpSpreadsheet\Spreadsheet;
 use PhpOffice\PhpSpreadsheet\Writer\Csv;
 use PhpOffice\PhpSpreadsheet\Writer\Ods;
 use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
-use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
 use Symfony\Bridge\Doctrine\Form\Type\EntityType;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\EventDispatcher\EventDispatcherInterface;
@@ -41,6 +41,8 @@ use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\StreamedResponse;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 use Symfony\Component\Security\Core\Security;
+use Symfony\Component\Serializer\Exception\ExceptionInterface;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
 use Symfony\Contracts\Translation\TranslatorInterface;

 /**
@@ -58,7 +60,8 @@ final class EventController extends AbstractController
        private readonly TranslatorInterface $translator,
        private readonly PaginatorFactory $paginator,
        private readonly Security $security,
-        private readonly \Doctrine\Persistence\ManagerRegistry $managerRegistry,
+        private readonly ManagerRegistry $managerRegistry,
+        private readonly NormalizerInterface $normalizer,
    ) {}

    #[\Symfony\Component\Routing\Annotation\Route(path: '/{_locale}/event/event/{event_id}/delete', name: 'chill_event__event_delete', requirements: ['event_id' => '\d+'], methods: ['GET', 'POST', 'DELETE'])]
@@ -75,6 +78,7 @@ final class EventController extends AbstractController

        /** @var array $participations */
        $participations = $event->getParticipations();
+        $budgetElements = $event->getBudgetElements();

        $form = $this->createDeleteForm($event_id);

@@ -86,6 +90,10 @@ final class EventController extends AbstractController
                    $em->remove($participation);
                }

+                foreach ($budgetElements as $e) {
+                    $em->remove($e);
+                }
+
                $em->remove($event);
                $em->flush();

@@ -103,7 +111,7 @@ final class EventController extends AbstractController
        }

        return $this->render('@ChillEvent/Event/confirm_delete.html.twig', [
-            'event_id' => $event->getId(),
+            'id' => $event->getId(),
            'delete_form' => $form->createView(),
        ]);
    }
@@ -169,6 +177,8 @@ final class EventController extends AbstractController

    /**
     * Displays a form to create a new Event entity.
+     *
+     * @throws ExceptionInterface
     */
    #[\Symfony\Component\Routing\Annotation\Route(path: '/{_locale}/event/event/new', name: 'chill_event__event_new', methods: ['GET', 'POST'])]
    public function newAction(?Center $center, Request $request): Response
@@ -199,26 +209,23 @@ final class EventController extends AbstractController
            $this->addFlash('success', $this->translator
                ->trans('The event was created'));

-            return $this->redirectToRoute('chill_event__event_show', ['event_id' => $entity->getId()]);
+            return $this->redirectToRoute('chill_event__event_show', ['id' => $entity->getId()]);
        }

+        $entity_array = $this->normalizer->normalize($entity, 'json', ['groups' => 'read']);
+
        return $this->render('@ChillEvent/Event/new.html.twig', [
            'entity' => $entity,
            'form' => $form->createView(),
+            'entity_json' => $entity_array,
        ]);
    }

-    /**
-     * First step of new Event form.
-     */
    #[\Symfony\Component\Routing\Annotation\Route(path: '/{_locale}/event/event/new/pick-center', name: 'chill_event__event_new_pickcenter', options: [null])]
    public function newPickCenterAction(): Response
    {
        $role = 'CHILL_EVENT_CREATE';

-        /**
-         * @var Center $centers
-         */
        $centers = $this->authorizationHelper->getReachableCenters($this->getUser(), $role);

        if (1 === \count($centers)) {
@@ -238,7 +245,7 @@ final class EventController extends AbstractController
            ->add('center_id', EntityType::class, [
                'class' => Center::class,
                'choices' => $centers,
-                'placeholder' => '',
+                'placeholder' => $this->translator->trans('Pick a center'),
                'label' => 'To which centre should the event be associated ?',
            ])
            ->add('submit', SubmitType::class, [
@@ -251,16 +258,7 @@ final class EventController extends AbstractController
        ]);
    }

-    /**
-     * Finds and displays a Event entity.
-     *
-     * @ParamConverter("event", options={"id": "event_id"})
-     *
-     * @return Response
-     *
-     * @throws \PhpOffice\PhpSpreadsheet\Exception
-     */
-    #[\Symfony\Component\Routing\Annotation\Route(path: '/{_locale}/event/event/{event_id}/show', name: 'chill_event__event_show')]
+    #[\Symfony\Component\Routing\Annotation\Route(path: '/{_locale}/event/event/{id}/show', name: 'chill_event__event_show')]
    public function showAction(Event $event, Request $request)
    {
        if (!$event) {
@@ -317,7 +315,7 @@ final class EventController extends AbstractController

            $this->addFlash('success', $this->translator->trans('The event was updated'));

-            return $this->redirectToRoute('chill_event__event_show', ['event_id' => $event_id]);
+            return $this->redirectToRoute('chill_event__event_show', ['id' => $event_id]);
        }

        return $this->render('@ChillEvent/Event/edit.html.twig', [
--- a/src/Bundle/ChillEventBundle/Controller/EventListController.php
+++ b/src/Bundle/ChillEventBundle/Controller/EventListController.php
@@ -15,11 +15,15 @@ use Chill\EventBundle\Entity\Event;
 use Chill\EventBundle\Entity\EventType;
 use Chill\EventBundle\Repository\EventACLAwareRepositoryInterface;
 use Chill\EventBundle\Repository\EventTypeRepository;
+use Chill\EventBundle\Security\EventVoter;
+use Chill\MainBundle\Entity\Center;
 use Chill\MainBundle\Pagination\PaginatorFactoryInterface;
+use Chill\MainBundle\Security\Authorization\AuthorizationHelper;
 use Chill\MainBundle\Templating\Listing\FilterOrderHelper;
 use Chill\MainBundle\Templating\Listing\FilterOrderHelperFactory;
 use Chill\MainBundle\Templating\TranslatableStringHelperInterface;
 use Chill\PersonBundle\Form\Type\PickPersonDynamicType;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Form\Extension\Core\Type\FormType;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\FormFactoryInterface;
@@ -29,17 +33,18 @@ use Symfony\Component\Routing\Annotation\Route;
 use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 use Twig\Environment;

-final readonly class EventListController
+final class EventListController extends AbstractController
 {
    public function __construct(
-        private Environment $environment,
-        private EventACLAwareRepositoryInterface $eventACLAwareRepository,
-        private EventTypeRepository $eventTypeRepository,
-        private FilterOrderHelperFactory $filterOrderHelperFactory,
-        private FormFactoryInterface $formFactory,
-        private PaginatorFactoryInterface $paginatorFactory,
-        private TranslatableStringHelperInterface $translatableStringHelper,
-        private UrlGeneratorInterface $urlGenerator,
+        private readonly Environment $environment,
+        private readonly EventACLAwareRepositoryInterface $eventACLAwareRepository,
+        private readonly EventTypeRepository $eventTypeRepository,
+        private readonly FilterOrderHelperFactory $filterOrderHelperFactory,
+        private readonly FormFactoryInterface $formFactory,
+        private readonly PaginatorFactoryInterface $paginatorFactory,
+        private readonly TranslatableStringHelperInterface $translatableStringHelper,
+        private readonly UrlGeneratorInterface $urlGenerator,
+        private readonly AuthorizationHelper $authorizationHelper,
    ) {}

    #[Route(path: '{_locale}/event/event/list', name: 'chill_event_event_list')]
@@ -50,6 +55,8 @@ final readonly class EventListController
            'q' => (string) $filter->getQueryString(),
            'dates' => $filter->getDateRangeData('dates'),
            'event_types' => $filter->getEntityChoiceData('event_types'),
+            'responsables' => $filter->getUserPickerData('responsables'),
+            'centers' => $filter->getEntityChoiceData('centers'),
        ];
        $total = $this->eventACLAwareRepository->countAllViewable($filterData);
        $pagination = $this->paginatorFactory->create($total);
@@ -73,6 +80,7 @@ final readonly class EventListController
    private function buildFilterOrder(): FilterOrderHelper
    {
        $types = $this->eventTypeRepository->findAllActive();
+        $centers = $this->authorizationHelper->getReachableCenters($this->getUser(), EventVoter::SEE);

        $builder = $this->filterOrderHelperFactory->create(__METHOD__);
        $builder
@@ -80,6 +88,16 @@ final readonly class EventListController
            ->addSearchBox(['name'])
            ->addEntityChoice('event_types', 'event.filter.event_types', EventType::class, $types, [
                'choice_label' => fn (EventType $e) => $this->translatableStringHelper->localize($e->getName()),
+                'expanded' => false,
+                'required' => false,
+                'attr' => ['class' => 'select2'],
+            ])
+            ->addUserPicker('responsables', 'event.filter.pick_responsable', ['multiple' => true, 'required' => false])
+            ->addEntityChoice('centers', 'event.filter.center', Center::class, $centers, [
+                'choice_label' => fn (Center $c) => $c->getName(),
+                'expanded' => false,
+                'required' => false,
+                'attr' => ['class' => 'select2'],
            ]);

        return $builder->build();
--- a/src/Bundle/ChillEventBundle/Controller/EventThemeController.php
+++ b/src/Bundle/ChillEventBundle/Controller/EventThemeController.php
@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\EventBundle\Controller;
+
+use Chill\MainBundle\CRUD\Controller\CRUDController;
+use Chill\MainBundle\Pagination\PaginatorInterface;
+use Doctrine\ORM\QueryBuilder;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\HttpFoundation\Request;
+
+class EventThemeController extends CRUDController
+{
+    protected function createFormFor(string $action, $entity, ?string $formClass = null, array $formOptions = []): FormInterface
+    {
+        if ('new' === $action) {
+            return parent::createFormFor($action, $entity, $formClass, ['step' => 'create']);
+        }
+
+        if ('edit' === $action) {
+            return parent::createFormFor($action, $entity, $formClass, ['step' => 'edit']);
+        }
+
+        throw new \LogicException('action is not supported: '.$action);
+    }
+
+    /**
+     * @param QueryBuilder|mixed $query
+     */
+    protected function orderQuery(string $action, $query, Request $request, PaginatorInterface $paginator): QueryBuilder
+    {
+        /* @var QueryBuilder $query */
+        return $query->orderBy('e.ordering', 'ASC')
+            ->addOrderBy('e.id', 'ASC');
+    }
+}
--- a/src/Bundle/ChillEventBundle/Controller/ParticipationController.php
+++ b/src/Bundle/ChillEventBundle/Controller/ParticipationController.php
@@ -228,7 +228,7 @@ final class ParticipationController extends AbstractController
            }

            return $this->redirectToRoute('chill_event__event_show', [
-                'event_id' => $participation->getEvent()->getId(),
+                'id' => $participation->getEvent()->getId(),
            ]);
        }

@@ -242,7 +242,7 @@ final class ParticipationController extends AbstractController
    /**
     * @param int $participation_id
     */
-    #[\Symfony\Component\Routing\Annotation\Route(path: '/{_locale}/event/participation/{participation_id}/delete', name: 'chill_event_participation_delete', requirements: ['participation_id' => '\d+'], methods: ['GET', 'DELETE'])]
+    #[\Symfony\Component\Routing\Annotation\Route(path: '/{_locale}/event/participation/{participation_id}/delete', name: 'chill_event_participation_delete', requirements: ['participation_id' => '\d+'])]
    public function deleteAction($participation_id, Request $request): Response|\Symfony\Component\HttpFoundation\RedirectResponse
    {
        $em = $this->managerRegistry->getManager();
@@ -273,7 +273,7 @@ final class ParticipationController extends AbstractController
                );

                return $this->redirectToRoute('chill_event__event_show', [
-                    'event_id' => $event->getId(),
+                    'id' => $event->getId(),
                ]);
            }
        }
@@ -442,7 +442,7 @@ final class ParticipationController extends AbstractController
            ));

            return $this->redirectToRoute('chill_event__event_show', [
-                'event_id' => $participation->getEvent()->getId(),
+                'id' => $participation->getEvent()->getId(),
            ]);
        }

--- a/src/Bundle/ChillEventBundle/DependencyInjection/ChillEventExtension.php
+++ b/src/Bundle/ChillEventBundle/DependencyInjection/ChillEventExtension.php
@@ -11,6 +11,12 @@ declare(strict_types=1);

 namespace Chill\EventBundle\DependencyInjection;

+use Chill\EventBundle\Controller\Admin\EventBudgetKindController;
+use Chill\EventBundle\Controller\EventThemeController;
+use Chill\EventBundle\Entity\EventBudgetKind;
+use Chill\EventBundle\Entity\EventTheme;
+use Chill\EventBundle\Form\EventBudgetKindType;
+use Chill\EventBundle\Form\EventThemeType;
 use Chill\EventBundle\Security\EventVoter;
 use Chill\EventBundle\Security\ParticipationVoter;
 use Symfony\Component\Config\FileLocator;
@@ -26,7 +32,10 @@ use Symfony\Component\HttpKernel\DependencyInjection\Extension;
 */
 class ChillEventExtension extends Extension implements PrependExtensionInterface
 {
-    public function load(array $configs, ContainerBuilder $container)
+    /**
+     * @throws \Exception
+     */
+    public function load(array $configs, ContainerBuilder $container): void
    {
        $configuration = new Configuration();
        $config = $this->processConfiguration($configuration, $configs);
@@ -45,16 +54,17 @@ class ChillEventExtension extends Extension implements PrependExtensionInterface
    /** (non-PHPdoc).
     * @see \Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface::prepend()
     */
-    public function prepend(ContainerBuilder $container)
+    public function prepend(ContainerBuilder $container): void
    {
        $this->prependAuthorization($container);
+        $this->prependCruds($container);
        $this->prependRoute($container);
    }

    /**
     * add authorization hierarchy.
     */
-    protected function prependAuthorization(ContainerBuilder $container)
+    protected function prependAuthorization(ContainerBuilder $container): void
    {
        $container->prependExtensionConfig('security', [
            'role_hierarchy' => [
@@ -70,7 +80,7 @@ class ChillEventExtension extends Extension implements PrependExtensionInterface
    /**
     * add route to route loader for chill.
     */
-    protected function prependRoute(ContainerBuilder $container)
+    protected function prependRoute(ContainerBuilder $container): void
    {
        // add routes for custom bundle
        $container->prependExtensionConfig('chill_main', [
@@ -81,4 +91,54 @@ class ChillEventExtension extends Extension implements PrependExtensionInterface
            ],
        ]);
    }
+
+    protected function prependCruds(ContainerBuilder $container): void
+    {
+        $container->prependExtensionConfig('chill_main', [
+            'cruds' => [
+                [
+                    'class' => EventTheme::class,
+                    'name' => 'event_theme',
+                    'base_path' => '/admin/event/theme',
+                    'form_class' => EventThemeType::class,
+                    'controller' => EventThemeController::class,
+                    'actions' => [
+                        'index' => [
+                            'template' => '@ChillEvent/Admin/EventTheme/index.html.twig',
+                            'role' => 'ROLE_ADMIN',
+                        ],
+                        'new' => [
+                            'role' => 'ROLE_ADMIN',
+                            'template' => '@ChillEvent/Admin/EventTheme/new.html.twig',
+                        ],
+                        'edit' => [
+                            'role' => 'ROLE_ADMIN',
+                            'template' => '@ChillEvent/Admin/EventTheme/edit.html.twig',
+                        ],
+                    ],
+                ],
+                [
+                    'class' => EventBudgetKind::class,
+                    'name' => 'event_budget_kind',
+                    'base_path' => '/admin/event/budget',
+                    'form_class' => EventBudgetKindType::class,
+                    'controller' => EventBudgetKindController::class,
+                    'actions' => [
+                        'index' => [
+                            'template' => '@ChillEvent/Admin/BudgetKind/index.html.twig',
+                            'role' => 'ROLE_ADMIN',
+                        ],
+                        'new' => [
+                            'role' => 'ROLE_ADMIN',
+                            'template' => '@ChillEvent/Admin/BudgetKind/new.html.twig',
+                        ],
+                        'edit' => [
+                            'role' => 'ROLE_ADMIN',
+                            'template' => '@ChillEvent/Admin/BudgetKind/edit.html.twig',
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+    }
 }
--- a/src/Bundle/ChillEventBundle/Entity/BudgetTypeEnum.php
+++ b/src/Bundle/ChillEventBundle/Entity/BudgetTypeEnum.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\EventBundle\Entity;
+
+enum BudgetTypeEnum: string
+{
+    case CHARGE = 'Charge';
+    case RESOURCE = 'Resource';
+}
--- a/src/Bundle/ChillEventBundle/Entity/Event.php
+++ b/src/Bundle/ChillEventBundle/Entity/Event.php
@@ -23,10 +23,13 @@ use Chill\MainBundle\Entity\HasScopeInterface;
 use Chill\MainBundle\Entity\Location;
 use Chill\MainBundle\Entity\Scope;
 use Chill\MainBundle\Entity\User;
+use Chill\ThirdPartyBundle\Entity\ThirdParty;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
+use Doctrine\DBAL\Types\Types;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Validator\Constraints as Assert;
+use Symfony\Component\Serializer\Annotation as Serializer;

 /**
 * Class Event.
@@ -46,35 +49,63 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter
    #[ORM\ManyToOne(targetEntity: Scope::class)]
    private ?Scope $circle = null;

-    #[ORM\Column(type: \Doctrine\DBAL\Types\Types::DATETIME_MUTABLE)]
+    #[ORM\Column(type: Types::DATETIME_MUTABLE)]
    private ?\DateTime $date = null;

    #[ORM\Id]
-    #[ORM\Column(name: 'id', type: \Doctrine\DBAL\Types\Types::INTEGER)]
+    #[ORM\Column(name: 'id', type: Types::INTEGER)]
    #[ORM\GeneratedValue(strategy: 'AUTO')]
    private ?int $id = null;

    #[ORM\ManyToOne(targetEntity: User::class)]
    private ?User $moderator = null;

+    /**
+     * @var Collection<int, User>
+     */
+    #[ORM\ManyToMany(targetEntity: User::class)]
+    #[Serializer\Groups(['read'])]
+    #[ORM\JoinTable('chill_event_animatorsintern')]
+    private Collection $animatorsIntern;
+
+    /**
+     * @var Collection<int, ThirdParty>
+     */
+    #[ORM\ManyToMany(targetEntity: ThirdParty::class)]
+    #[Serializer\Groups(['read'])]
+    #[ORM\JoinTable('chill_event_animatorsextern')]
+    private Collection $animatorsExtern;
+
    #[Assert\NotBlank]
-    #[ORM\Column(type: \Doctrine\DBAL\Types\Types::STRING, length: 150)]
+    #[Serializer\Groups(['read'])]
+    #[ORM\Column(type: Types::STRING, length: 150)]
    private ?string $name = null;

    /**
     * @var Collection<int, Participation>
     */
    #[ORM\OneToMany(mappedBy: 'event', targetEntity: Participation::class)]
+    #[Serializer\Groups(['read'])]
    private Collection $participations;

    #[Assert\NotNull]
+    #[Serializer\Groups(['read'])]
    #[ORM\ManyToOne(targetEntity: EventType::class)]
    private ?EventType $type = null;

+    /**
+     * @var Collection<int, EventTheme>
+     */
+    #[ORM\ManyToMany(targetEntity: EventTheme::class)]
+    #[Serializer\Groups(['read'])]
+    #[ORM\JoinTable('chill_event_eventtheme')]
+    private Collection $themes;
+
    #[ORM\Embedded(class: CommentEmbeddable::class, columnPrefix: 'comment_')]
    private CommentEmbeddable $comment;

    #[ORM\ManyToOne(targetEntity: Location::class)]
+    #[Serializer\Groups(['read'])]
    #[ORM\JoinColumn(nullable: true)]
    private ?Location $location = null;

@@ -85,7 +116,17 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter
    #[ORM\JoinTable('chill_event_event_documents')]
    private Collection $documents;

-    #[ORM\Column(type: \Doctrine\DBAL\Types\Types::DECIMAL, precision: 10, scale: 4, nullable: true, options: ['default' => '0.0'])]
+    /**
+     * @var Collection<int, EventBudgetElement>
+     */
+    #[ORM\OneToMany(mappedBy: 'event', targetEntity: EventBudgetElement::class, cascade: ['persist'])]
+    #[Serializer\Groups(['read'])]
+    private Collection $budgetElements;
+
+    /**
+     * @deprecated use budgetElements instead
+     */
+    #[ORM\Column(type: Types::DECIMAL, precision: 10, scale: 4, nullable: true, options: ['default' => '0.0'])]
    private string $organizationCost = '0.0';

    /**
@@ -96,6 +137,20 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter
        $this->participations = new ArrayCollection();
        $this->documents = new ArrayCollection();
        $this->comment = new CommentEmbeddable();
+        $this->themes = new ArrayCollection();
+        $this->budgetElements = new ArrayCollection();
+        $this->animatorsIntern = new ArrayCollection();
+        $this->animatorsExtern = new ArrayCollection();
+    }
+
+    public function addBudgetElement(EventBudgetElement $budgetElement)
+    {
+        if (!$this->budgetElements->contains($budgetElement)) {
+            $this->budgetElements[] = $budgetElement;
+            $budgetElement->setEvent($this);
+        }
+
+        return $this;
    }

    /**
@@ -126,38 +181,79 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter
        return $this;
    }

-    /**
-     * @return Center
-     */
-    public function getCenter()
+    public function getThemes(): Collection
+    {
+        return $this->themes;
+    }
+
+    public function addTheme(EventTheme $theme): self
+    {
+        $this->themes->add($theme);
+
+        return $this;
+    }
+
+    public function removeTheme(EventTheme $theme): void
+    {
+        $this->themes->removeElement($theme);
+    }
+
+    public function getAnimatorsIntern(): Collection
+    {
+        return $this->animatorsIntern;
+    }
+
+    public function getAnimatorsExtern(): Collection
+    {
+        return $this->animatorsExtern;
+    }
+
+    public function addAnimatorsIntern(User $ai): self
+    {
+        $this->animatorsIntern->add($ai);
+
+        return $this;
+    }
+
+    public function removeAnimatorsIntern(User $ai): void
+    {
+        $this->animatorsIntern->removeElement($ai);
+    }
+
+    public function addAnimatorsExtern(ThirdParty $ae): self
+    {
+        $this->animatorsExtern->add($ae);
+
+        return $this;
+    }
+
+    public function removeAnimatorsExtern(ThirdParty $ae): void
+    {
+        $this->animatorsExtern->removeElement($ae);
+    }
+
+    public function getCenter(): Center
    {
        return $this->center;
    }

-    /**
-     * @return Scope
-     */
-    public function getCircle()
+    public function getCircle(): ?Scope
    {
        return $this->circle;
    }

    /**
     * Get date.
-     *
-     * @return \DateTime
     */
-    public function getDate()
+    public function getDate(): ?\DateTime
    {
        return $this->date;
    }

    /**
     * Get id.
-     *
-     * @return int
     */
-    public function getId()
+    public function getId(): ?int
    {
        return $this->id;
    }
@@ -169,14 +265,20 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter

    /**
     * Get label.
-     *
-     * @return string
     */
-    public function getName()
+    public function getName(): ?string
    {
        return $this->name;
    }

+    /**
+     * @return Collection<int, EventBudgetElement>
+     */
+    public function getBudgetElements(): Collection
+    {
+        return $this->budgetElements;
+    }
+
    /**
     * @return Collection<int, Participation>
     */
@@ -199,26 +301,26 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter

    /**
     * @deprecated
-     *
-     * @return Scope
     */
-    public function getScope()
+    public function getScope(): Scope
    {
        return $this->getCircle();
    }

-    /**
-     * @return EventType
-     */
-    public function getType()
+    public function getType(): ?EventType
    {
        return $this->type;
    }

+    public function removeBudgetElement(EventBudgetElement $budgetElement): void
+    {
+        $this->budgetElements->removeElement($budgetElement);
+    }
+
    /**
     * Remove participation.
     */
-    public function removeParticipation(Participation $participation)
+    public function removeParticipation(Participation $participation): void
    {
        $this->participations->removeElement($participation);
    }
@@ -314,11 +416,17 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter
        $this->documents = $documents;
    }

+    /**
+     * @deprecated
+     */
    public function getOrganizationCost(): string
    {
        return $this->organizationCost;
    }

+    /**
+     * @deprecated
+     */
    public function setOrganizationCost(string $organizationCost): void
    {
        $this->organizationCost = $organizationCost;
--- a/src/Bundle/ChillEventBundle/Entity/EventBudgetElement.php
+++ b/src/Bundle/ChillEventBundle/Entity/EventBudgetElement.php
@@ -0,0 +1,103 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\EventBundle\Entity;
+
+use Chill\EventBundle\Repository\EventThemeRepository;
+use Chill\MainBundle\Entity\Embeddable\CommentEmbeddable;
+use Doctrine\DBAL\Types\Types;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Validator\Constraints as Assert;
+
+#[ORM\Entity(repositoryClass: EventThemeRepository::class)]
+#[ORM\Table(name: 'chill_event_budget_element')]
+class EventBudgetElement
+{
+    #[ORM\Column(name: 'id', type: Types::INTEGER)]
+    #[ORM\Id]
+    #[ORM\GeneratedValue(strategy: 'AUTO')]
+    private ?int $id = null;
+
+    #[Assert\GreaterThan(value: 0)]
+    #[Assert\NotNull(message: 'The amount cannot be empty')]
+    #[ORM\Column(name: 'amount', type: Types::DECIMAL, precision: 10, scale: 2)]
+    private string $amount;
+
+    #[ORM\Embedded(class: CommentEmbeddable::class, columnPrefix: 'comment_budget_element_')]
+    private ?CommentEmbeddable $comment = null;
+
+    #[ORM\ManyToOne(targetEntity: Event::class)]
+    private Event $event;
+
+    #[ORM\ManyToOne(targetEntity: EventBudgetKind::class, inversedBy: 'EventBudgetElement')]
+    #[ORM\JoinColumn]
+    private EventBudgetKind $kind;
+
+    /* Getters and Setters */
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function setId(?int $id): void
+    {
+        $this->id = $id;
+    }
+
+    public function getAmount(): float
+    {
+        return (float) $this->amount;
+    }
+
+    public function getComment(): ?CommentEmbeddable
+    {
+        return $this->comment;
+    }
+
+    public function getEvent(): Event
+    {
+        return $this->event;
+    }
+
+    public function getKind(): EventBudgetKind
+    {
+        return $this->kind;
+    }
+
+    public function setAmount(string $amount): self
+    {
+        $this->amount = $amount;
+
+        return $this;
+    }
+
+    public function setComment(?CommentEmbeddable $comment = null): self
+    {
+        $this->comment = $comment;
+
+        return $this;
+    }
+
+    public function setEvent(Event $event): self
+    {
+        $this->event = $event;
+
+        return $this;
+    }
+
+    public function setKind(EventBudgetKind $kind): self
+    {
+        $this->kind = $kind;
+
+        return $this;
+    }
+}
--- a/src/Bundle/ChillEventBundle/Entity/EventBudgetKind.php
+++ b/src/Bundle/ChillEventBundle/Entity/EventBudgetKind.php
@@ -0,0 +1,78 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\EventBundle\Entity;
+
+use Doctrine\DBAL\Types\Types;
+use Doctrine\ORM\Mapping as ORM;
+
+/**
+ * Type of event budget element.
+ */
+#[ORM\Entity]
+#[ORM\Table(name: 'chill_event_budget_kind')]
+class EventBudgetKind
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column(type: Types::INTEGER)]
+    private ?int $id = null;
+
+    #[ORM\Column(type: Types::BOOLEAN, options: ['default' => true])]
+    private bool $isActive = true;
+
+    #[ORM\Column(enumType: BudgetTypeEnum::class)]
+    private BudgetTypeEnum $type;
+
+    #[ORM\Column(type: Types::JSON, length: 255, options: ['default' => '{}', 'jsonb' => true])]
+    private array $name = [];
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getIsActive(): bool
+    {
+        return $this->isActive;
+    }
+
+    public function getType(): BudgetTypeEnum
+    {
+        return $this->type;
+    }
+
+    public function getName(): ?array
+    {
+        return $this->name;
+    }
+
+    public function setIsActive(bool $isActive): self
+    {
+        $this->isActive = $isActive;
+
+        return $this;
+    }
+
+    public function setType(BudgetTypeEnum $type): self
+    {
+        $this->type = $type;
+
+        return $this;
+    }
+
+    public function setName(array $name): self
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+}
--- a/src/Bundle/ChillEventBundle/Entity/EventTheme.php
+++ b/src/Bundle/ChillEventBundle/Entity/EventTheme.php
@@ -0,0 +1,158 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\EventBundle\Entity;
+
+use Chill\EventBundle\Repository\EventThemeRepository;
+use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\Common\Collections\Collection;
+use Doctrine\DBAL\Types\Types;
+use Doctrine\ORM\Mapping as ORM;
+
+/**
+ * Class EventTheme.
+ */
+#[ORM\HasLifecycleCallbacks]
+#[ORM\Entity(repositoryClass: EventThemeRepository::class)]
+#[ORM\Table(name: 'chill_event_event_theme')]
+class EventTheme
+{
+    #[ORM\Column(type: Types::BOOLEAN, nullable: false)]
+    private bool $isActive = true;
+
+    #[ORM\Id]
+    #[ORM\Column(name: 'id', type: Types::INTEGER)]
+    #[ORM\GeneratedValue(strategy: 'AUTO')]
+    private ?int $id = null;
+
+    #[ORM\Column(type: Types::JSON)]
+    private array $name;
+
+    /**
+     * @var Collection<int, EventTheme>
+     */
+    #[ORM\OneToMany(mappedBy: 'parent', targetEntity: EventTheme::class)]
+    private Collection $children;
+
+    #[ORM\ManyToOne(targetEntity: EventTheme::class, inversedBy: 'children')]
+    private ?EventTheme $parent = null;
+
+    #[ORM\Column(name: 'ordering', type: Types::FLOAT, options: ['default' => '0.0'])]
+    private float $ordering = 0.0;
+
+    /**
+     * Constructor.
+     */
+    public function __construct()
+    {
+        $this->children = new ArrayCollection();
+    }
+
+    /**
+     * Get active.
+     */
+    public function getIsActive(): bool
+    {
+        return $this->isActive;
+    }
+
+    /**
+     * Get id.
+     */
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    /**
+     * Get label.
+     */
+    public function getName(): array
+    {
+        return $this->name;
+    }
+
+    public function setIsActive(bool $active): self
+    {
+        $this->isActive = $active;
+
+        return $this;
+    }
+
+    public function setName(array $label): self
+    {
+        $this->name = $label;
+
+        return $this;
+    }
+
+    public function addChild(self $child): self
+    {
+        if (!$this->children->contains($child)) {
+            $this->children[] = $child;
+        }
+
+        return $this;
+    }
+
+    public function removeChild(self $child): self
+    {
+        if ($this->children->removeElement($child)) {
+            // set the owning side to null (unless already changed)
+            if ($child->getParent() === $this) {
+                $child->setParent(null);
+            }
+        }
+
+        return $this;
+    }
+
+    public function getChildren(): Collection
+    {
+        return $this->children;
+    }
+
+    public function hasChildren(): bool
+    {
+        return 0 < $this->getChildren()->count();
+    }
+
+    public function hasParent(): bool
+    {
+        return null !== $this->parent;
+    }
+
+    public function getOrdering(): float
+    {
+        return $this->ordering;
+    }
+
+    public function setOrdering(float $ordering): EventTheme
+    {
+        $this->ordering = $ordering;
+
+        return $this;
+    }
+
+    public function getParent(): ?self
+    {
+        return $this->parent;
+    }
+
+    public function setParent(?self $parent): self
+    {
+        $this->parent = $parent;
+
+        $parent?->addChild($this);
+
+        return $this;
+    }
+}
--- a/src/Bundle/ChillEventBundle/Export/Export/ListEvents.php
+++ b/src/Bundle/ChillEventBundle/Export/Export/ListEvents.php
@@ -0,0 +1,377 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\EventBundle\Export\Export;
+
+use Chill\EventBundle\Entity\BudgetTypeEnum;
+use Chill\EventBundle\Entity\Event;
+use Chill\EventBundle\Export\Declarations;
+use Chill\EventBundle\Repository\EventBudgetElementRepository;
+use Chill\EventBundle\Repository\EventThemeRepository;
+use Chill\EventBundle\Security\EventVoter;
+use Chill\EventBundle\Templating\Entity\EventThemeRender;
+use Chill\MainBundle\Export\ExportGenerationContext;
+use Chill\MainBundle\Export\FormatterInterface;
+use Chill\MainBundle\Export\GroupedExportInterface;
+use Chill\MainBundle\Export\ListInterface;
+use Chill\MainBundle\Templating\TranslatableStringHelperInterface;
+use Chill\ThirdPartyBundle\Export\Helper\LabelThirdPartyHelper;
+use Doctrine\ORM\EntityManagerInterface;
+use Doctrine\ORM\NativeQuery;
+use Doctrine\ORM\Query;
+use Doctrine\ORM\QueryBuilder;
+use Symfony\Component\DependencyInjection\ParameterBag\ParameterBagInterface;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints\Callback;
+use Symfony\Component\Validator\Context\ExecutionContextInterface;
+use Symfony\Contracts\Translation\TranslatableInterface;
+
+/**
+ * Render a list of events.
+ */
+class ListEvents implements ListInterface, GroupedExportInterface
+{
+    protected array $fields = [
+        'event_id',
+        'event_center',
+        'event_name',
+        'event_date',
+        'event_location',
+        'event_type',
+        'event_themes',
+        'event_moderator',
+        'event_animators',
+        'event_participants_count',
+        'event_budget_resources',
+        'event_budget_charges',
+    ];
+
+    private readonly bool $filterStatsByCenters;
+
+    public function __construct(
+        protected readonly EntityManagerInterface $entityManager,
+        ParameterBagInterface $parameterBag,
+        protected readonly TranslatableStringHelperInterface $translatableStringHelper,
+        protected readonly EventThemeRender $eventThemeRender,
+        protected readonly EventThemeRepository $eventThemeRepository,
+        protected readonly LabelThirdPartyHelper $labelThirdPartyHelper,
+        protected readonly EventBudgetElementRepository $eventBudgetElementRepository,
+    ) {
+        $this->filterStatsByCenters = $parameterBag->get('chill_main')['acl']['filter_stats_by_center'];
+    }
+
+    public function buildForm(FormBuilderInterface $builder): void
+    {
+        $builder
+            ->add('fields', ChoiceType::class, [
+                'multiple' => true,
+                'expanded' => true,
+                'choices' => array_combine($this->fields, $this->fields),
+                'label' => 'Fields to include in export',
+                'constraints' => [new Callback([
+                    'callback' => static function ($selected, ExecutionContextInterface $context) {
+                        if (0 === \count($selected)) {
+                            $context->buildViolation('You must select at least one element')
+                                ->atPath('fields')
+                                ->addViolation();
+                        }
+                    },
+                ])],
+            ]);
+
+    }
+
+    public function getFormDefaultData(): array
+    {
+        return [
+            'fields' => $this->fields,
+        ];
+    }
+
+    public function getAllowedFormattersTypes(): array
+    {
+        return [FormatterInterface::TYPE_LIST];
+    }
+
+    public function getDescription(): string
+    {
+        return 'export.event.list.description';
+    }
+
+    public function getGroup(): string
+    {
+        return 'Exports of events';
+    }
+
+    public function getLabels($key, array $values, $data)
+    {
+        return match ($key) {
+            'event_id' => fn ($value) => '_header' === $value ? $key : $value,
+            'event_name' => fn ($value) => '_header' === $value ? $key : $value,
+            'event_date' => function ($value) use ($key) {
+                if ('_header' === $value) {
+                    return $key;
+                }
+
+                if ($value instanceof \DateTime) {
+                    return $value->format('Y-m-d');
+                }
+
+                $date = \DateTime::createFromFormat('Y-m-d H:i:s', $value);
+
+                return $date ? $date->format('Y-m-d') : $value;
+            },
+            'event_type' => function ($value) use ($key) {
+                if ('_header' === $value) {
+                    return 'export.event.list.'.$key;
+                }
+
+                return $this->translatableStringHelper->localize(json_decode((string) $value, true, 512, JSON_THROW_ON_ERROR));
+            },
+            'event_center' => fn ($value) => '_header' === $value ? $key : $value,
+            'event_moderator' => fn ($value) => '_header' === $value ? $key : $value,
+            'event_participants_count' => fn ($value) => '_header' === $value ? $key : $value,
+            'event_location' => fn ($value) => '_header' === $value ? $key : $value,
+            'event_animators' => $this->labelThirdPartyHelper->getLabelMulti($key, $values, $key),
+            'event_themes' => function ($value) use ($key) {
+                if ('_header' === $value) {
+                    return $key;
+                }
+
+                if (null === $value) {
+                    return '';
+                }
+
+                return implode(
+                    '|',
+                    array_map(
+                        fn ($t) => $this->eventThemeRender->renderString($this->eventThemeRepository->find($t), []),
+                        json_decode((string) $value, true, 512, JSON_THROW_ON_ERROR)
+                    )
+                );
+            },
+            'event_budget_resources' => function ($value) use ($key) {
+                if ('_header' === $value) {
+                    return $key;
+                }
+
+                if (!$value) {
+                    return '';
+                }
+
+                $ids = explode(',', $value);
+                $ids = json_decode($value, true, 512, JSON_THROW_ON_ERROR);
+                $elements = $this->eventBudgetElementRepository->findBy(['id' => $ids]);
+
+                return implode('|', array_map(function ($element) {
+                    $name = $this->translatableStringHelper->localize($element->getKind()->getName());
+                    $amount = number_format($element->getAmount(), 2, '.', '');
+
+                    return $name.': '.$amount;
+                }, $elements));
+            },
+
+            'event_budget_charges' => function ($value) use ($key) {
+                if ('_header' === $value) {
+                    return $key;
+                }
+
+                if (!$value) {
+                    return '';
+                }
+
+                $ids = explode(',', $value);
+                $ids = json_decode($value, true, 512, JSON_THROW_ON_ERROR);
+
+                $elements = $this->eventBudgetElementRepository->findBy(['id' => $ids]);
+
+                return implode('|', array_map(function ($element) {
+                    $name = $this->translatableStringHelper->localize($element->getKind()->getName());
+                    $amount = number_format($element->getAmount(), 2, '.', '');
+
+                    return $name.': '.$amount;
+                }, $elements));
+            },
+
+
+            default => fn ($value) => '_header' === $value ? $key : $value,
+        };
+    }
+
+    public function getQueryKeys(array $data): array
+    {
+        return $data['fields'];
+    }
+
+    public function getResult($query, $data, ExportGenerationContext $context): array
+    {
+        return $query->getQuery()->getResult(Query::HYDRATE_SCALAR);
+    }
+
+    public function getTitle(): string|TranslatableInterface
+    {
+        return 'export.event.list.title';
+    }
+
+    public function getType(): string
+    {
+        return Declarations::EVENT;
+    }
+
+    public function initiateQuery(array $requiredModifiers, array $acl, array $data, ExportGenerationContext $context): NativeQuery|QueryBuilder
+    {
+        $centers = array_map(static fn ($el) => $el['center'], $acl);
+
+        // Throw an error if no fields are present
+        if (!\array_key_exists('fields', $data)) {
+            throw new \InvalidArgumentException('No fields have been checked.');
+        }
+
+        $qb = $this->entityManager->createQueryBuilder()
+            ->from(Event::class, 'event');
+
+        if ($this->filterStatsByCenters) {
+            $qb
+                ->andWhere('event.center IN (:authorized_centers)')
+                ->setParameter('authorized_centers', $centers);
+        }
+
+        // Add fields based on selection
+        foreach ($this->fields as $field) {
+            if (\in_array($field, $data['fields'], true)) {
+                switch ($field) {
+                    case 'event_id':
+                        $qb->addSelect('event.id AS event_id');
+                        break;
+
+                    case 'event_name':
+                        $qb->addSelect('event.name AS event_name');
+                        break;
+
+                    case 'event_date':
+                        $qb->addSelect('event.date AS event_date');
+                        break;
+
+                    case 'event_type':
+                        if (!$this->hasJoin($qb, 'event.type')) {
+                            $qb->leftJoin('event.type', 'type');
+                        }
+                        $qb->addSelect('type.name AS event_type');
+                        break;
+
+                    case 'event_center':
+                        if (!$this->hasJoin($qb, 'event.center')) {
+                            $qb->leftJoin('event.center', 'center');
+                        }
+                        $qb->addSelect('center.name AS event_center');
+                        break;
+
+                    case 'event_moderator':
+                        if (!$this->hasJoin($qb, 'event.moderator')) {
+                            $qb->leftJoin('event.moderator', 'user');
+                        }
+                        $qb->addSelect('user.username AS event_moderator');
+                        break;
+
+                    case 'event_participants_count':
+                        $qb->addSelect('(SELECT COUNT(p.id) FROM Chill\EventBundle\Entity\Participation p WHERE p.event = event.id) AS event_participants_count');
+                        break;
+
+                    case 'event_location':
+                        if (!$this->hasJoin($qb, 'event.location')) {
+                            $qb->leftJoin('event.location', 'location');
+                        }
+                        $qb->addSelect('location.name AS event_location');
+                        break;
+
+                    case 'event_animators':
+                        $qb->addSelect(
+                            '(SELECT AGGREGATE(tp.id) FROM Chill\ThirdPartyBundle\Entity\ThirdParty tp WHERE tp MEMBER OF event.animators) AS event_animators'
+                        );
+                        break;
+
+                    case 'event_themes':
+                        $qb->addSelect(
+                            '(SELECT AGGREGATE(t.id) FROM Chill\EventBundle\Entity\EventTheme t WHERE t MEMBER OF event.themes) AS event_themes'
+                        );
+                        break;
+
+                    case 'event_budget_resources':
+                        $qb->addSelect(
+                            '(SELECT AGGREGATE(ebr.id)
+                          FROM Chill\EventBundle\Entity\EventBudgetElement ebr
+                          JOIN ebr.kind kr
+                          WHERE ebr.event = event.id AND kr.type = :resource_type) AS event_budget_resources'
+                        );
+                        $qb->setParameter('resource_type', BudgetTypeEnum::RESOURCE->value);
+                        break;
+
+                    case 'event_budget_charges':
+                        $qb->addSelect(
+                            '(SELECT AGGREGATE(ebc.id)
+                          FROM Chill\EventBundle\Entity\EventBudgetElement ebc
+                          JOIN ebc.kind kc
+                          WHERE ebc.event = event.id AND kc.type = :charge_type) AS event_budget_charges'
+                        );
+                        $qb->setParameter('charge_type', BudgetTypeEnum::CHARGE->value);
+                        break;
+                }
+            }
+        }
+
+        return $qb;
+    }
+
+    public function requiredRole(): string
+    {
+        return EventVoter::STATS;
+    }
+
+    public function supportsModifiers()
+    {
+        return [Declarations::EVENT];
+    }
+
+    /**
+     * Helper method to check if a join already exists in the QueryBuilder.
+     */
+    private function hasJoin($queryBuilder, $joinPath): bool
+    {
+        $joins = $queryBuilder->getDQLPart('join');
+        if (!isset($joins['event'])) {
+            return false;
+        }
+
+        foreach ($joins['event'] as $join) {
+            if ($join->getJoin() === $joinPath) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    public function normalizeFormData(array $formData): array
+    {
+        return ['fields' => $formData['fields']];
+    }
+
+    public function denormalizeFormData(array $formData, int $fromVersion): array
+    {
+        return ['fields' => $formData['fields']];
+    }
+
+    public function getNormalizationVersion(): int
+    {
+        return 1;
+    }
+}
--- a/src/Bundle/ChillEventBundle/Form/AddEventBudgetElementType.php
+++ b/src/Bundle/ChillEventBundle/Form/AddEventBudgetElementType.php
@@ -0,0 +1,59 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\EventBundle\Form;
+
+use Chill\EventBundle\Entity\BudgetTypeEnum;
+use Chill\EventBundle\Entity\EventBudgetElement;
+use Chill\EventBundle\Entity\EventBudgetKind;
+use Chill\EventBundle\Repository\EventBudgetKindRepository;
+use Chill\MainBundle\Form\Type\CommentType;
+use Chill\MainBundle\Templating\TranslatableStringHelperInterface;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\NumberType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class AddEventBudgetElementType extends AbstractType
+{
+    public function __construct(private readonly EventBudgetKindRepository $kindRepository, private readonly TranslatableStringHelperInterface $translatableStringHelper) {}
+
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $charges = $this->kindRepository->findByType(BudgetTypeEnum::CHARGE->value);
+        $resources = $this->kindRepository->findByType(BudgetTypeEnum::RESOURCE->value);
+
+        $builder->add('kind', ChoiceType::class, [
+            'choices' => [
+                'event.budget.charges' => $charges,
+                'event.budget.resources' => $resources,
+            ],
+            'choice_label' => fn (EventBudgetKind $kind) => $this->translatableStringHelper->localize($kind->getName()),
+            'choice_value' => fn (?EventBudgetKind $kind) => $kind?->getId(),
+            'placeholder' => 'event.budget.Select a budget element kind',
+        ])
+            ->add('amount', NumberType::class, [
+                'required' => true,
+            ])
+            ->add('comment', CommentType::class, [
+                'label' => 'Comment',
+                'required' => false,
+            ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'data_class' => EventBudgetElement::class,
+        ]);
+    }
+}
--- a/src/Bundle/ChillEventBundle/Form/EventBudgetKindType.php
+++ b/src/Bundle/ChillEventBundle/Form/EventBudgetKindType.php
@@ -0,0 +1,53 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\EventBundle\Form;
+
+use Chill\EventBundle\Entity\BudgetTypeEnum;
+use Chill\EventBundle\Entity\EventBudgetKind;
+use Chill\MainBundle\Form\Type\TranslatableStringFormType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
+use Symfony\Component\Form\Extension\Core\Type\EnumType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+class EventBudgetKindType extends AbstractType
+{
+    public function __construct(private readonly TranslatorInterface $translator) {}
+
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder
+            ->add('name', TranslatableStringFormType::class, [
+                'label' => 'Title',
+            ])
+            ->add('type', EnumType::class, [
+                'class' => BudgetTypeEnum::class,
+                'choice_label' => fn (BudgetTypeEnum $type): string => $this->translator->trans($type->value),
+                'expanded' => true,
+                'multiple' => false,
+                'mapped' => true,
+                'label' => 'event.admin.Select budget type',
+            ])
+            ->add('isActive', CheckboxType::class, [
+                'label' => 'Actif ?',
+                'required' => false,
+            ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver
+            ->setDefault('class', EventBudgetKind::class);
+    }
+}
--- a/Show More
+++ b/Show More