Feat: regroupement de facteurs (#583)

* add group property to datasetProperties
create disclosure component
add group field to datasetEditModal

* switch to a composable for groups related operations

* dataset edit and remove refactor to account for groups

* add group selection from dataset details form
refactor group selection in datasetAddToBouquetModdal

* move group selection to component

* add rename group feature

* add group to export

* fix async option fetching in new multiselect

* don't show nogroup name if it is the only group

* feat(groups): add number of factors to group name

* feat(groups): trim goup name on creation and comparison

* feat: filtre facteurs (#621)

* feat(groups-sommaire): add sommaire logic and styles

* feat(groups-filtre): optimize code and fix small bugs
moved functions to composables and updated references
fixed an anchor link bug inside DsfrTabs with a quick and dirty CSS hack

* fix(groups): change filtering logic
Hide filtered elements instead of removing them from the array.
This allows updating the array without replacing the original version with the filtered one.

package.json

@@ -26,6 +26,7 @@
     "@json2csv/plainjs": "^7.0.6",
     "@unhead/vue": "^1.11.10",
     "@vee-validate/rules": "^4.13.2",
+    "@vueform/multiselect": "^2.6.10",
     "@vueuse/core": "^11.1.0",
     "@vueuse/integrations": "^11.1.0",
     "axios": "^1.7.8",
@@ -36,7 +37,6 @@
     "vee-validate": "^4.13.2",
     "vite-plugin-html": "^3.2.2",
     "vue": "^3.5.12",
-    "vue-draggable-next": "^2.2.1",
     "vue-loading-overlay": "^6.0.6",
     "vue-matomo": "^4.2.0",
     "vue-multiselect": "^3.1.0",

src/assets/main.css

@@ -18,6 +18,12 @@
   --toastify-color-success: #1f8d49; /* --success-main-525 (unavailable to date) */
   /* DSFR contrast fix */
   --blue-cumulus-sun-368-moon-732-hover--fix: #516fb3;
+
+  /*
+  progressively enhanced height: auto transition
+  https://caniuse.com/mdn-css_properties_interpolate-size
+  */
+  interpolate-size: allow-keywords;
 }
 
 @font-face {
@@ -35,11 +41,6 @@ body {
   word-wrap: break-word;
 }
 
-.multiselect {
-  --ms-bg: var(--background-contrast-grey);
-  margin: 8px 0;
-}
-
 .fr-col-sm-45 {
   flex: 0 0 45%;
   max-width: 45%;
@@ -110,20 +111,24 @@ body {
 
 /* form */
 
-form textarea {
+:is(form, .form) textarea {
   resize: vertical;
 }
 
-form :where(input, textarea, fieldset, select)[aria-invalid='true'] {
+:is(form, .form)
+  :where(input, textarea, fieldset, select)[aria-invalid='true'] {
   border: 2px solid var(--border-plain-error);
 }
-form .error {
+:is(form, .form) .error {
   margin-block-start: 0.5rem;
   color: var(--text-default-error);
 }
-form .error-status {
+:is(form, .form) .error-status {
   border: 4px solid var(--background-flat-warning);
 }
+:is(form, .form) .fr-text--sm {
+  color: var(--text-mention-grey);
+}
 
 /* editorial (markdown) pages */
 .editorial {

src/assets/multiselect.css

@@ -18,9 +18,18 @@
   border-color: var(--background-alt-grey-active) transparent transparent;
   top: 60%;
 }
+.multiselect__select {
+  --data-uri-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23161616' d='m12 13.1 5-4.9 1.4 1.4-6.4 6.3-6.4-6.4L7 8.1l5 5z'/%3E%3C/svg%3E");
+  background-image: var(--data-uri-svg);
+  background-position: calc(100% - 1rem) 50%;
+  background-repeat: no-repeat;
+  background-size: 1rem 1rem;
+  .multiselect--active & {
+    transform: none;
+  }
+}
 .multiselect__select::before {
-  top: 80%;
-  border-top-color: var(--border-plain-grey);
+  content: unset;
 }
 .multiselect__clear {
   position: absolute;
@@ -51,6 +60,19 @@
     transform: rotate(-45deg);
   }
 }
+.multiselect {
+  --ms-bg: var(--background-contrast-grey);
+}
+.multiselect:has(.multiselect-single-label .card) {
+  --ms-bg: var(--background-default-grey);
+}
+.multiselect-wrapper {
+  --ms-radius: 0.25rem 0.25rem 0 0;
+  --ms-caret-color: var(--border-plain-grey);
+}
+.multiselect-search {
+  box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);
+}
 .multiselect__tags {
   --idle: transparent;
   --hover: var(--background-contrast-grey-hover);
@@ -59,7 +81,7 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   background-color: var(--background-contrast-grey);
-  border-radius: 0.25rem 0.25rem 0 0;
+  border: 0;
   box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);
   color: var(--text-title-grey);
   display: block;
@@ -70,12 +92,9 @@
   border-radius: 0.25rem 0.25rem 0 0;
   & > .multiselect__single {
     padding: 0;
+    background-color: var(--background-contrast-grey);
   }
 }
-.multiselect__tags:has(.multiselect__single) {
-  box-shadow: none;
-  background-color: #fff;
-}
 .multiselect__tags:focus-within {
   outline: 2px solid #0a76f6;
   outline-offset: -2px;

src/components/SearchComponent.vue

@@ -26,6 +26,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  labelVisible: {
+    type: Boolean,
+    default: true
+  },
   dropdown: {
     type: Array,
     default: () => []
@@ -82,7 +86,8 @@ const dropdownLabel = (text: string) => {
     v-model="selectedQuery"
     :label="searchLabel"
     class="filter-input"
-    label-visible
+    :label-visible="labelVisible"
+    :placeholder="!labelVisible ? searchLabel : undefined"
   >
     <template #before-input>
       <VIconCustom name="search-line" class="search-icon" />
@@ -144,6 +149,12 @@ const dropdownLabel = (text: string) => {
   --icon-width: 24px;
 }
 
+.fr-input-group {
+  margin: 0;
+}
+:deep(.fr-label.invisible + .filter-input) {
+  margin: 0;
+}
 :deep(.filter-input) {
   padding-inline-start: calc(var(--icon-width) + 1rem);
 }
@@ -197,6 +208,6 @@ const dropdownLabel = (text: string) => {
   inline-size: 100%;
 }
 :deep(.multiselect__content-wrapper) {
-  margin-block-start: 40px;
+  inset-block-start: 100%;
 }
 </style>

src/components/bouquets/BouquetDatasetCard.vue

@@ -21,8 +21,7 @@ const datasetPropertiesRef = toRef(props, 'datasetProperties')
 </script>
 
 <template>
-  <!-- Using :key ensures that the component is recreated when dataset changes
-       otherwise, we have a persistence on the thumbnail -->
+  <!-- Using :key ensures that the component is recreated when dataset changes otherwise, we have a persistence on the thumbnail -->
   <DatasetCard
     v-if="datasetContent"
     :key="datasetContent.id"
@@ -31,7 +30,8 @@ const datasetPropertiesRef = toRef(props, 'datasetProperties')
       name: 'dataset_detail',
       params: { did: datasetContent.id }
     }"
-    :show-metrics="false"
+    :show-description="false"
+    class="dataset-card fr-m-0"
   />
   <DsfrAlert
     v-if="datasetProperties.remoteDeleted"
@@ -46,3 +46,13 @@ const datasetPropertiesRef = toRef(props, 'datasetProperties')
     </div>
   </DsfrAlert>
 </template>
+
+<style scoped>
+/* fix overflow from "mis à jour" text in DatasetCard */
+:deep(h4 + div) {
+  flex-wrap: wrap;
+}
+.dataset-card {
+  background-color: var(--background-default-grey, #fff);
+}
+</style>