refactor: 💄 change radio button for segmented

cloud-pi-native · Oct 3, 2024 · 59bf2d5 · 59bf2d5
1 parent 4888e64
commit 59bf2d5
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 86 deletions.
diff --git a/apps/client/cypress/components/specs/config-param.ct.ts b/apps/client/cypress/components/specs/config-param.ct.ts
@@ -61,7 +61,7 @@ describe('ConfigParamComponent.vue', () => {
 
     // Vérifie que la valeur a été modifiée
     cy.get('[data-testid="switch"]').within(() => {
-      cy.get('.fr-fieldset__element').eq(1).click() // Sélectionne le bouton de commutation "Défaut"
+      cy.get('.fr-segmented__element').eq(1).click() // Sélectionne le bouton de commutation "Défaut"
       cy.get('input').eq(1).should('be.checked')
     })
   })

diff --git a/apps/client/src/components/ConfigParam.vue b/apps/client/src/components/ConfigParam.vue
@@ -19,23 +19,16 @@ const switchOptions = [
   {
     label: 'Activé',
     value: ENABLED,
-    disabled: false,
-    inline: true,
   },
   {
     label: 'Par Défaut',
     value: DEFAULT,
-    disabled: false,
-    inline: true,
   },
   {
     label: 'Désactivé',
     value: DISABLED,
-    disabled: false,
-    inline: true,
   },
 ]
-const switchOptionsDisabled = switchOptions.map(options => ({ ...options, disabled: true }))
 
 const value = ref(props.options.value)
 
@@ -46,46 +39,37 @@ function set(data: string) {
 </script>
 
 <template>
-  <div
-    class="pr-8 self-center"
-  >
-    {{ props.options.name }}
-  </div>
-  <div>
-    <DsfrInput
-      v-if="props.options.kind === 'text' && !props.options.disabled"
-      :model-value="value"
-      :label-visible="false"
-      :placeholder="props.options.placeholder"
-      data-testid="input"
-      @update:model-value="(event: string) => set(event)"
-    />
-    <span
-      v-else-if="props.options.kind === 'text' && props.options.disabled"
-      :class="`${!props.options.value.value && 'italic text-sm'} self-end`"
-    >
-      {{ props.options.value || 'Non défini' }}
-    </span>
-
-    <DsfrRadioButtonSet
-      v-else-if="props.options.kind === 'switch'"
-      :name="options.name"
-      :model-value="value"
-      :options="props.options.disabled ? switchOptionsDisabled : switchOptions"
-      :label-visible="false"
-      inline
-      :small="false"
-      data-testid="switch"
-      @update:model-value="(event: string | number) => set(String(event))"
-    />
-  </div>
-  <div
-    v-if="props.options.description"
-    class="text-sm italic justify-self-center col-span-2"
-  >
-    {{ props.options.description }}
-  </div>
+  <DsfrInput
+    v-if="props.options.kind === 'text'"
+    class="config-input"
+    type="textarea"
+    :model-value="value"
+    :label="props.options.name"
+    label-visible
+    :hint="props.options.description"
+    :placeholder="props.options.placeholder || 'Non défini'"
+    data-testid="input"
+    :disabled="props.options.disabled"
+    @update:model-value="(event: string) => set(event)"
+  />
+  <DsfrSegmentedSet
+    v-else-if="props.options.kind === 'switch'"
+    :name="options.name"
+    :model-value="value"
+    :legend="props.options.name"
+    :hint="props.options.description"
+    :options="switchOptions"
+    :disabled="props.options.disabled"
+    data-testid="switch"
+    @update:model-value="(event: string | number) => set(String(event))"
+  />
   <hr
     class="col-span-2 p-1"
   >
 </template>
+
+<style>
+.config-input.fr-input{
+  background-color: var(--background-default-grey);
+}
+</style>
diff --git a/apps/client/src/components/ServicesConfig.vue b/apps/client/src/components/ServicesConfig.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import type { PermissionTarget, PluginsUpdateBody, ProjectService } from '@cpn-console/shared'
+import type { PermissionTarget, PluginConfigItem, PluginsUpdateBody, ProjectService } from '@cpn-console/shared'
 
 const props = withDefaults(defineProps<{
   services: ProjectService[]
@@ -62,6 +62,10 @@ function save() {
 function reload() {
   emit('reload')
 }
+
+function getItemsToShowLength(items: PluginConfigItem[] | undefined, scope: PermissionTarget): number | undefined {
+  return items?.filter(item => item.permissions[scope].read || item.permissions[scope].write).length
+}
 </script>
 
 <template>
@@ -159,48 +163,48 @@ function reload() {
         {{ service.description }}
       </p>
       <div
-        class="w-full grid gap-2"
+        :class="getItemsToShowLength(service.manifest.project, permissionTarget) && (props.displayGlobal && getItemsToShowLength(service.manifest.global, permissionTarget)) ? '2xl:grid 2xl:grid-cols-2 2xl:gap-10' : ''"
       >
-        <div
-          v-if="service.manifest.project?.length"
-          class="border-b-solid border-stone-600 text-xl col-span-2"
+        <DsfrCallout
+          v-if="getItemsToShowLength(service.manifest.project, permissionTarget)"
+          title="Configuration projet"
+          class="flex flex-col gap-2"
         >
-          Configuration projet
-        </div>
-        <ConfigParam
-          v-for="item in service.manifest.project"
-          :key="item.key"
-          :options="{
-            value: item.value,
-            kind: item.kind,
-            description: item.description,
-            name: item.title,
-            // @ts-ignore Sisi il y a potentiellement un placeholder
-            placeholder: item.placeholder || '',
-            disabled: !item.permissions[permissionTarget].write,
-          }"
-          @update="(value: string) => update({ key: item.key, value, plugin: service.name })"
-        />
-        <div
+          <ConfigParam
+            v-for="item in service.manifest.project"
+            :key="item.key"
+            :options="{
+              value: item.value,
+              kind: item.kind,
+              description: item.description,
+              name: item.title,
+              // @ts-ignore Sisi il y a potentiellement un placeholder
+              placeholder: item.placeholder || '',
+              disabled: !item.permissions[permissionTarget].write,
+            }"
+            @update="(value: string) => update({ key: item.key, value, plugin: service.name })"
+          />
+        </DsfrCallout>
+        <DsfrCallout
           v-if="service.manifest.global?.length && props.displayGlobal"
-          class="border-b-solid border-stone-600 text-xl col-span-2"
+          title="Configuration globale"
+          class="flex flex-col gap-2"
         >
-          Configuration global
-        </div>
-        <ConfigParam
-          v-for="item in props.displayGlobal ? service.manifest.global : []"
-          :key="item.key"
-          :options="{
-            value: ref(item.value),
-            kind: item.kind,
-            description: item.description,
-            name: item.title,
-            // @ts-ignore si si il y a potentiellement un placeholder
-            placeholder: item.placeholder || '',
-            disabled: !item.permissions[permissionTarget].write,
-          }"
-          @update="(value: string) => update({ key: item.key, value, plugin: service.name })"
-        />
+          <ConfigParam
+            v-for="item in props.displayGlobal ? service.manifest.global : []"
+            :key="item.key"
+            :options="{
+              value: ref(item.value),
+              kind: item.kind,
+              description: item.description,
+              name: item.title,
+              // @ts-ignore si si il y a potentiellement un placeholder
+              placeholder: item.placeholder || '',
+              disabled: !item.permissions[permissionTarget].write,
+            }"
+            @update="(value: string) => update({ key: item.key, value, plugin: service.name })"
+          />
+        </DsfrCallout>
       </div>
     </div>
   </div>