feat(groups): fix permissions + validation

src/components/bouquets/BouquetDatasetList.vue

@@ -140,12 +140,12 @@ onMounted(() => {
             :group-name="group"
             :all-groups="groupedDatasets"
             :datasets-properties="datasets"
+            :is-edit="isEdit"
             @edit-group-name="handleRenameGroup"
             @delete-group="handleDeleteGroup"
           >
-            <template #datasetActions="{ dataset, index }">
+            <template v-if="isEdit" #datasetActions="{ dataset, index }">
               <DsfrButton
-                v-if="isEdit"
                 size="sm"
                 icon="fr-icon-edit-line"
                 label="Éditer"
@@ -154,7 +154,6 @@ onMounted(() => {
                 :on-click="() => editDataset(dataset, index, group)"
               />
               <DsfrButton
-                v-if="isEdit"
                 size="sm"
                 icon="fr-icon-delete-line"
                 label="Supprimer"

src/components/bouquets/BouquetGroup.vue

@@ -20,6 +20,10 @@ const props = defineProps({
   headingLevel: {
     type: String,
     default: 'h3'
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -54,6 +58,7 @@ const emit = defineEmits<{
 }>()
 
 const isDisclosureOpen: Ref<boolean> = ref(!isDisclosure.value)
+
 const toggleDisclosure = () => {
   isDisclosureOpen.value = !isDisclosureOpen.value
 }
@@ -71,15 +76,15 @@ const modalContent = computed(() => {
   switch (modalType.value) {
     case 'edit':
       modalFields = {
-        title: `Renommer le regroupement ${props.groupName}`,
+        title: `Renommer le regroupement ${props.groupName}.`,
         confirmLabel: 'Valider',
         color: '',
         action: onValidateEdit
       }
       break
     case 'delete':
       modalFields = {
-        title: `Supprimer le regroupement ${props.groupName}`,
+        title: `Supprimer le regroupement ${props.groupName}.`,
         confirmLabel: 'Supprimer',
         color: '--background-flat-error',
         action: onDelete
@@ -95,15 +100,17 @@ const openModal = (type: string) => {
 }
 
 const onValidateEdit = () => {
+  inputErrors.value = []
   // check if new group name already exists
   if (
     props.allGroups.has(newGroupName.value.trim()) ||
     props.groupName.trim() === newGroupName.value.trim()
   ) {
-    inputErrors.value = []
     inputErrors.value.push('Ce nom de regroupement existe déjà.')
+  } else if (newGroupName.value.length > 100) {
+    inputErrors.value.push('Ce nom de regroupement est trop long.')
   } else if (newGroupName.value) {
-    emit('editGroupName', props.groupName, newGroupName.value)
+    emit('editGroupName', props.groupName, newGroupName.value.trim())
     opened.value = false
   }
 }
@@ -152,7 +159,7 @@ const actions = computed(() => {
             <DsfrTag class="fr-text--xs" small :label="factorsInGroup" />
           </span>
         </button>
-        <div class="disclosure__actions">
+        <div v-if="isEdit" class="disclosure__actions">
           <DsfrButton
             :label="`éditer le regroupement ${groupName}`"
             icon="fr-icon-edit-line"
@@ -222,10 +229,21 @@ const actions = computed(() => {
             v-model="newGroupName"
             label="Nom du regroupement"
             label-visible
+            maxlength="100"
             :aria-invalid="inputErrors.length ? true : undefined"
-            :description-id="inputErrors.length ? 'errors-name' : undefined"
+            :description-id="
+              inputErrors.length
+                ? 'input-requirements errors-name'
+                : 'input-requirements'
+            "
             @keypress.prevent.enter="onValidateEdit"
           />
+          <small
+            id="input-requirements"
+            :class="{ 'error fr-text--bold': newGroupName.length > 100 }"
+            >100 caractères maximum&nbsp;:
+            {{ newGroupName.length }}&nbsp;/&nbsp;100</small
+          >
           <div v-if="inputErrors.length" id="errors-name" class="error">
             <p v-for="(error, index) in inputErrors" :key="index">
               <span class="fr-icon-error-fill" aria-hidden="true" />

src/components/datasets/DatasetAddToBouquetModal.vue

@@ -52,9 +52,12 @@ const bouquetOptions = computed(() => {
 const isValid = computed(() => {
   if (topicsDatasetEditorialization) {
     return (
-      datasetProperties.value.title.trim() !== '' &&
-      datasetProperties.value.purpose.trim() !== '' &&
-      !!selectedBouquetId.value
+      !!datasetProperties.value.title.trim() &&
+      !!datasetProperties.value.purpose.trim() &&
+      !!selectedBouquetId.value &&
+      (datasetProperties.value.group
+        ? datasetProperties.value.group.trim().length < 100
+        : true)
     )
   } else {
     return !!selectedBouquetId.value
@@ -157,14 +160,11 @@ onMounted(() => {
       class="fr-mb-2w"
     />
     <div class="fr-input-group">
-      <label for="input-regroupement">Regroupement (facultatif)</label>
-      <p id="regroupement-description" class="fr-mt-1v fr-mb-2v fr-text--sm">
-        Rechercher ou créer un regroupement. Un regroupement contient un ou
-        plusieurs jeux de données.
-      </p>
       <SelectTopicGroup
         v-model:properties-model="datasetProperties"
         v-model:groups-model="datasetsGroups"
+        label="Regroupement"
+        description="Rechercher ou créer un regroupement (100 caractères maximum). Un regroupement contient un ou plusieurs jeux de données."
       />
     </div>
     <DatasetPropertiesTextFields

src/components/forms/SelectTopicGroup.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { DatasetProperties, DatasetsGroups } from '@/model/topic'
+import { NO_GROUP } from '@/utils/bouquetGroups'
 import Multiselect from '@vueform/multiselect'
 import '@vueform/multiselect/themes/default.css'
 
@@ -13,9 +14,31 @@ const datasetsGroups = defineModel('groups-model', {
   default: []
 })
 
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    default: undefined
+  },
+  required: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const groupOptions = computed(() =>
   Array.from(datasetsGroups.value, ([key]) => key)
 )
+
+const setNoGroupValue = () => {
+  if (!datasetProperties.value.group) {
+    datasetProperties.value.group = NO_GROUP
+  }
+}
+
 const clear = () => {
   datasetProperties.value.group = undefined
 }
@@ -24,11 +47,26 @@ const trimGroupName = (groupName: string) => {
   // prevents spaces at the beginning and end of the group name
   datasetProperties.value.group = groupName.trim()
 }
+
+onMounted(() => {
+  setNoGroupValue()
+})
 </script>
 
 <template>
+  <label for="regroupement-input">
+    {{ label }}
+    (<span v-if="required">obligatoire</span><span v-else>facultatif</span>)
+  </label>
+  <p
+    v-if="description"
+    id="regroupement-description"
+    class="fr-mt-1v fr-mb-2v fr-text--sm"
+  >
+    {{ description }}
+  </p>
   <Multiselect
-    id="input-regroupement"
+    id="regroupement-input"
     v-model="datasetProperties.group"
     :options="groupOptions"
     :searchable="true"

src/components/forms/dataset/DatasetPropertiesFields.vue

@@ -42,7 +42,10 @@ const selectedDataset: Ref<DatasetV2 | undefined> = ref(undefined)
 const hasEditorialization = computed(() => {
   return (
     !!datasetProperties.value.title.trim() &&
-    !!datasetProperties.value.purpose.trim()
+    !!datasetProperties.value.purpose.trim() &&
+    (datasetProperties.value.group
+      ? datasetProperties.value.group.trim().length < 100
+      : true)
   )
 })
 
@@ -175,15 +178,11 @@ onMounted(() => {
     </fieldset>
   </div>
   <div class="fr-input-group">
-    <label for="input-regroupement">Regroupement (facultatif)</label>
-    <p id="regroupement-description" class="fr-mt-1v fr-mb-2v fr-text--sm">
-      Rechercher ou créer un regroupement. Un regroupement contient un ou
-      plusieurs jeux de données.
-    </p>
-
     <SelectTopicGroup
       v-model:properties-model="datasetProperties"
       v-model:groups-model="datasetsGroups"
+      label="Regroupement"
+      description="Rechercher ou créer un regroupement (100 caractères maximum). Un regroupement contient un ou plusieurs jeux de données."
     />
   </div>
 </template>