feat: Ajout d'une section "Temps passé" dans le formulaire d'édition d'un service

src/lib/components/forms/fields/basic-input-field.svelte

@@ -9,7 +9,7 @@
   import FieldWrapper from "../field-wrapper.svelte";
 
   export let id: string;
-  export let value: string | undefined = undefined;
+  export let value: string | number | undefined = undefined;
 
   export let type: "email" | "tel" | "text" | "url" | "date" | "number" =
     "text";
@@ -30,18 +30,34 @@
   let phoneValue = value;
   function handlePhoneChange() {
     if (phoneValue) {
-      phoneValue = phoneValue.replace(/[^0-9]/g, "");
+      phoneValue = phoneValue.toString().replace(/[^0-9]/g, "");
     }
     value = phoneValue;
   }
   function handlePhoneBlur() {
     if (phoneValue) {
-      phoneValue = formatPhoneNumber(phoneValue);
+      phoneValue = formatPhoneNumber(phoneValue.toString());
     }
   }
   function handlePhoneFocus() {
     if (phoneValue) {
-      phoneValue = phoneValue.replace(/[^0-9]/g, "");
+      phoneValue = phoneValue.toString().replace(/[^0-9]/g, "");
+    }
+  }
+
+  function handleNumberInput(event) {
+    if (event.target.value && event.target.value.length > 0) {
+      value = event.target.value.replace(/[^0-9]/g, "");
+    } else {
+      value = undefined
+    }
+  }
+  function handleNumberBlur() {
+    value = Number(value)
+  }
+  function handleNumberFocus() {
+    if (value) {
+      value = Number(value)
     }
   }
 
@@ -99,8 +115,10 @@
         <input
           type="number"
           bind:value
-          on:blur={onBlur}
-          on:change={onChange}
+          inputmode="numeric"
+          on:input={handleNumberInput}
+          on:blur={handleNumberBlur}
+          on:focus={handleNumberFocus}
           {...props}
         />
       {:else if type === "email"}
@@ -136,9 +154,9 @@
       {#if value && maxLength != null && !readonly && !disabled}
         <div
           class="mt-s4 self-end text-f12 text-gray-text-alt"
-          class:text-error={value.length > maxLength}
+          class:text-error={value.toString().length > maxLength}
         >
-          {value.length}/{maxLength} caractères
+          {value.toString().length}/{maxLength} caractères
         </div>
       {/if}
     </div>

src/lib/components/specialized/services/fields-participation.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import FieldSet from "$lib/components/display/fieldset.svelte";
+  import BasicInputField from "$lib/components/forms/fields/basic-input-field.svelte";
+  import type { Service } from "$lib/types";
+
+  export let service: Service;
+</script>
+
+<FieldSet title="Participation du bénéficiaire">
+  <BasicInputField
+    type="number"
+    id="spendingTimeTotalHours"
+    description="Nombre total d'heures investies par le bénéficiaire, ex : 18"
+    bind:value={service.spendingTimeTotalHours}
+  />
+
+  <BasicInputField
+    type="text"
+    id="spendingTimePrecision"
+    description="Précision sur la répartition des heures passées, ex : « 6h par semaine, pendant 3 semaines »"
+    bind:value={service.spendingTimePrecision}
+  />
+</FieldSet>

src/lib/types.ts

@@ -455,6 +455,8 @@ export interface Service {
   slug: string;
   source?: string;
   status: ServiceStatus;
+  spendingTimeTotalHours?: number;
+  spendingTimePrecision: string;
   structure: string;
   structureInfo: ServiceStructure;
   subcategories: string[];

src/lib/validation/schema-utils.ts

@@ -64,7 +64,7 @@ export function isBool(msg = "") {
 
 export function isInteger(msg = "") {
   return (name, value, _data) => ({
-    valid: Number.isInteger(value),
+    valid: !value || value === "" || Number.isInteger(value),
     msg: msg || `Ce champ doit être un nombre entier`,
   });
 }

src/lib/validation/schemas/service.ts

@@ -365,6 +365,18 @@ export const serviceSchema: v.Schema = {
     default: false,
     rules: [v.isBool()],
   },
+  spendingTimeTotalHours: {
+    label: "Temps passé",
+    default: false,
+    rules: [v.isInteger()],
+  },
+  spendingTimePrecision: {
+    label: "Précision sur le temps passé",
+    default: "",
+    maxLength: 60,
+    post: [v.trim],
+    rules: [v.isString(), v.maxStrLength(60)],
+  },
 };
 
 export const inclusionNumeriqueSchema: v.Schema = {
@@ -442,6 +454,8 @@ export const draftSchema: v.Schema = {
   recurrence: serviceSchema.recurrence,
   suspensionDate: serviceSchema.suspensionDate,
   useInclusionNumeriqueScheme: serviceSchema.useInclusionNumeriqueScheme,
+  spendingTimeTotalHours: serviceSchema.spendingTimeTotalHours,
+  spendingTimePrecision: serviceSchema.spendingTimePrecision,
 };
 
 export const contribSchema: v.Schema = {
@@ -500,4 +514,6 @@ export const modelSchema: v.Schema = {
   onlineForm: serviceSchema.onlineForm,
   recurrence: serviceSchema.recurrence,
   suspensionDate: serviceSchema.suspensionDate,
+  spendingTimeTotalHours: serviceSchema.spendingTimeTotalHours,
+  spendingTimePrecision: serviceSchema.spendingTimePrecision,
 };

src/routes/(modeles-services)/services/service-edition-form.svelte

@@ -13,6 +13,7 @@
   import FieldsDocuments from "../_common/fields-documents.svelte";
   import FieldsInclusionNumerique from "../_common/fields-inclusion-numerique.svelte";
   import FieldsModalities from "../_common/fields-modalities.svelte";
+  import FieldsParticipation from "$lib/components/specialized/services/fields-participation.svelte";
   import FieldsPerimeter from "../_common/fields-perimeter.svelte";
   import FieldsPeriodicity from "../_common/fields-periodicity.svelte";
   import FieldsPlace from "$lib/components/specialized/services/fields-place.svelte";
@@ -240,6 +241,8 @@
 
           <FieldsPlace bind:service {structure} {servicesOptions} />
 
+          <FieldsParticipation bind:service />
+
           <FieldsContact bind:service />
         </div>
       {:else}