From 86066613cb1a07db940a53ea3c5619fb55edd521 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Thu, 24 Apr 2025 16:03:21 +0200
Subject: [PATCH] FEATURE Add artisan JavaScript file  to update Artisan
 members name

---
 resources/js/artisans.ts | 44 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 resources/js/artisans.ts

diff --git a/resources/js/artisans.ts b/resources/js/artisans.ts
new file mode 100644
index 0000000..26adb2d
--- /dev/null
+++ b/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);
+    }
+  }
+}