Cron
[WIP] Add SocialNetworkService for event social networks management
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
- 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 } }
- 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
- Ouvrir la page contenant SocialNetworks.vue
- Vérifier que l'appel GET est fait et que les champs se pré-remplissent si des données existent
- Modifier un lien, sauvegarder — vérifier appel POST/PUT et notification de succès
- 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
- 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 } }
- 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
- Ouvrir la page contenant SocialNetworks.vue
- Vérifier que l'appel GET est fait et que les champs se pré-remplissent si des données existent
- Modifier un lien, sauvegarder — vérifier appel POST/PUT et notification de succès
- 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.
