FEATURE Add artisan JavaScript file to update Artisan members name

resources/js/artisans.ts

@@ -0,0 +1,44 @@
+interface MemberElement extends Element {
+  querySelector(selectors: string): Element | null;
+}
+
+window.addEventListener('DOMContentLoaded', (): void => {
+  const artisansMembers: NodeListOf<MemberElement> = document.querySelectorAll('.acf-field-670d268f2b324 div[data-layout="membre"]');
+
+  artisansMembers.forEach((member: MemberElement): void => {
+    setMemberName(member);
+
+    // Créer un MutationObserver pour surveiller les changements de classe
+    const observer: MutationObserver = new MutationObserver((mutations: MutationRecord[]): void => {
+      mutations.forEach((mutation: MutationRecord): void => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          setTimeout((): void => {
+            setMemberName(member);
+          }, 200);
+        }
+      });
+    });
+
+    // Configuration de l'observateur pour surveiller les changements de classe
+    observer.observe(member, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+  });
+});
+
+function setMemberName(member: MemberElement): void {
+  const memberFirstName: string | undefined = (member.querySelector('div[data-name="first_name"] input') as HTMLInputElement)?.value;
+  const memberLastName: string | undefined = (member.querySelector('div[data-name="last_name"] input') as HTMLInputElement)?.value;
+  const memberName: string = `${memberFirstName} ${memberLastName}`;
+
+  const spanOrder: Element | null = member.querySelector('.acf-fc-layout-handle span');
+  const panelTitleDiv: Element | null = member.querySelector('.acf-fc-layout-handle');
+
+  if (memberName && memberName !== '' && panelTitleDiv) {
+    panelTitleDiv.textContent = memberName;
+    if (spanOrder) {
+      panelTitleDiv.prepend(spanOrder);
+    }
+  }
+}