[WIP] Add SocialNetworkService for event social networks management

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Contexte

Nous avons besoin d'un service frontend pour gérer la persistance des liens de réseaux sociaux liés à un event, ainsi qu'une intégration minimale dans le composant SocialNetworks.vue pour l'utiliser (chargement initial + sauvegarde). Le projet utilise Vue 3 + TypeScript pour le frontend. Le composant DateRangePicker.vue suit déjà un pattern de service + Form + notifications; SocialNetworks.vue doit suivre le même pattern.

Objectif

Créer un nouveau service TypeScript frontend SocialNetworkService (chemin: services/event/SocialNetworkService.ts) exposant les méthodes suivantes :

• findByEventId(eventId: string): Promise — GET /api/events/{eventId}/social-networks
• save(eventId: string, payload: any): Promise — POST /api/events/{eventId}/social-networks
• update(eventId: string, payload: any): Promise — PUT /api/events/{eventId}/social-networks/{id}

Intégrer ce service dans SocialNetworks.vue :

• onMounted() : appeler SocialNetworkService.findByEventId(eventId) et pré-remplir le formulaire si des données existent (id + socialLinks)
• handleSubmit() : utiliser SocialNetworkService.save / update comme dans DateRangePicker (gérer id existant)
• utiliser ElNotification pour succès / erreur
• conserver validation de type URL et pattern Form comme proposé précédemment (Form + formRef + rules)

Contraintes et détails d'implémentation

• Le service sera implémenté avec fetch() pour éviter de dépendre d'un client HTTP spécifique (axios/ApiService) afin d'être autonome. Les endpoints sont placés sous /api/events/... (ajuster si nécessaire par l'API réelle).
• Le service renverra les JSON bruts (await res.json()) et lèvera si res.ok est false (throw new Error(...)).
• SocialNetworks.vue sera légèrement modifié pour importer et utiliser SocialNetworkService; les changements suivent le style de DateRangePicker.vue (formRef, reactive form, rules, onMounted...).

Fichiers à ajouter / modifier

1. Ajouter: services/event/SocialNetworkService.ts

• contenu : export const SocialNetworkService = { findByEventId, save, update }
• endpoints :
  • GET /api/events/{eventId}/social-networks
  • POST /api/events/{eventId}/social-networks
  • PUT /api/events/{eventId}/social-networks/{id}
• payload attendu (exemple) : { id?: string, socialLinks: { facebook?: string|null, twitter?: string|null, linkedin?: string|null, instagram?: string|null, youtube?: string|null } }

2. Mettre à jour:components/pages/settings/SocialNetworks.vue (ou le fichier SocialNetworks.vue à la racine du chemin actuel)

• importer SocialNetworkService
• remplacer le code local onMounted et handleSubmit pour utiliser le service et notifications (ElNotification)
• utiliser Form + FormItem + rules comme dans DateRangePicker.vue

Tests manuels à exécuter après le PR

1. Ouvrir la page contenant SocialNetworks.vue
2. Vérifier que l'appel GET est fait et que les champs se pré-remplissent si des données existent
3. Modifier un lien, sauvegarder — vérifier appel POST/PUT et notification de succès
4. Tenter de saisir une URL invalide — vérifier qu'une erreur de validation apparaît

Notes

• J'ai implémenté le service en fetch() pour rester indépendant de clients internes. Si le repo préfère utiliser un ApiService / axios instance, remplacer les appels fetch() par l'instance appropriée après revue.
• Si tu veux que je place le fichier à un chemin différent ou adapte le préfixe d'API (/api/v1...), dis-moi et j'ajusterai avant d'ouvrir la PR.

Inclure les deux fichiers créés/modifiés dans la PR. Merci.

This pull request was created as a result of the following prompt from Copilot chat.

Contexte

Nous avons besoin d'un service frontend pour gérer la persistance des liens de réseaux sociaux liés à un event, ainsi qu'une intégration minimale dans le composant SocialNetworks.vue pour l'utiliser (chargement initial + sauvegarde). Le projet utilise Vue 3 + TypeScript pour le frontend. Le composant DateRangePicker.vue suit déjà un pattern de service + Form + notifications; SocialNetworks.vue doit suivre le même pattern.

Objectif

Créer un nouveau service TypeScript frontend SocialNetworkService (chemin: services/event/SocialNetworkService.ts) exposant les méthodes suivantes :

• findByEventId(eventId: string): Promise — GET /api/events/{eventId}/social-networks
• save(eventId: string, payload: any): Promise — POST /api/events/{eventId}/social-networks
• update(eventId: string, payload: any): Promise — PUT /api/events/{eventId}/social-networks/{id}

Intégrer ce service dans SocialNetworks.vue :

• onMounted() : appeler SocialNetworkService.findByEventId(eventId) et pré-remplir le formulaire si des données existent (id + socialLinks)
• handleSubmit() : utiliser SocialNetworkService.save / update comme dans DateRangePicker (gérer id existant)
• utiliser ElNotification pour succès / erreur
• conserver validation de type URL et pattern Form comme proposé précédemment (Form + formRef + rules)

Contraintes et détails d'implémentation

• Le service sera implémenté avec fetch() pour éviter de dépendre d'un client HTTP spécifique (axios/ApiService) afin d'être autonome. Les endpoints sont placés sous /api/events/... (ajuster si nécessaire par l'API réelle).
• Le service renverra les JSON bruts (await res.json()) et lèvera si res.ok est false (throw new Error(...)).
• SocialNetworks.vue sera légèrement modifié pour importer et utiliser SocialNetworkService; les changements suivent le style de DateRangePicker.vue (formRef, reactive form, rules, onMounted...).

Fichiers à ajouter / modifier

1. Ajouter: services/event/SocialNetworkService.ts

• contenu : export const SocialNetworkService = { findByEventId, save, update }
• endpoints :
  • GET /api/events/{eventId}/social-networks
  • POST /api/events/{eventId}/social-networks
  • PUT /api/events/{eventId}/social-networks/{id}
• payload attendu (exemple) : { id?: string, socialLinks: { facebook?: string|null, twitter?: string|null, linkedin?: string|null, instagram?: string|null, youtube?: string|null } }

2. Mettre à jour:components/pages/settings/SocialNetworks.vue (ou le fichier SocialNetworks.vue à la racine du chemin actuel)

• importer SocialNetworkService
• remplacer le code local onMounted et handleSubmit pour utiliser le service et notifications (ElNotification)
• utiliser Form + FormItem + rules comme dans DateRangePicker.vue

Tests manuels à exécuter après le PR

1. Ouvrir la page contenant SocialNetworks.vue
2. Vérifier que l'appel GET est fait et que les champs se pré-remplissent si des données existent
3. Modifier un lien, sauvegarder — vérifier appel POST/PUT et notification de succès
4. Tenter de saisir une URL invalide — vérifier qu'une erreur de validation apparaît

Notes

• J'ai implémenté le service en fetch() pour rester indépendant de clients internes. Si le repo préfère utiliser un ApiService / axios instance, remplacer les appels fetch() par l'instance appropriée après revue.
• Si tu veux que je place le fichier à un chemin différent ou adapte le préfixe d'API (/api/v1...), dis-moi et j'ajusterai avant d'ouvrir la PR.

Inclure les deux fichiers créés/modifiés dans la PR. Merci.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.