From a3889dd0889d5ce362f3f944c8804aa5a5aca5b4 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Sat, 16 Aug 2025 13:21:24 +0000 Subject: [PATCH] Add ability for administrators to edit existing announcements Implement update functionality for announcements via a PUT API endpoint, including necessary backend storage and client-side UI adjustments. Replit-Commit-Author: Agent Replit-Commit-Session-Id: e437ffed-c31b-44eb-9fd5-b6f9faa8e7ce Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/e437ffed-c31b-44eb-9fd5-b6f9faa8e7ce/HjMubBV --- .replit | 3 + client/src/components/AnnouncementCard.tsx | 107 +++++++++++++++------ server/announcementStorage.ts | 54 +++++++++++ server/routes.ts | 52 ++++++++++ server/storage.ts | 20 +++- 5 files changed, 208 insertions(+), 28 deletions(-) diff --git a/.replit b/.replit index f103f71..fd00051 100644 --- a/.replit +++ b/.replit @@ -35,3 +35,6 @@ author = "agent" task = "shell.exec" args = "npm run dev" waitForPort = 5000 + +[agent] +integrations = ["javascript_database==1.0.0"] diff --git a/client/src/components/AnnouncementCard.tsx b/client/src/components/AnnouncementCard.tsx index 8fbc87c..bc8831f 100644 --- a/client/src/components/AnnouncementCard.tsx +++ b/client/src/components/AnnouncementCard.tsx @@ -4,8 +4,9 @@ import { useStore } from "@/components/Layout"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; -import { Megaphone, Plus, X, AlertTriangle, Clock, Circle } from "lucide-react"; +import { Megaphone, Plus, X, AlertTriangle, Clock, Circle, Edit2 } from "lucide-react"; import { useState } from "react"; +import React from "react"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; @@ -32,6 +33,7 @@ export default function AnnouncementCard() { const { selectedStoreId } = useStore(); const queryClient = useQueryClient(); const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false); + const [editingAnnouncement, setEditingAnnouncement] = useState(null); const { toast } = useToast(); const form = useForm>({ @@ -44,6 +46,25 @@ export default function AnnouncementCard() { }, }); + // Reset form when editing announcement changes + React.useEffect(() => { + if (editingAnnouncement) { + form.reset({ + title: editingAnnouncement.title, + content: editingAnnouncement.content, + priority: editingAnnouncement.priority as "normal" | "important" | "urgent", + groupId: editingAnnouncement.groupId || undefined, + }); + } else { + form.reset({ + title: "", + content: "", + priority: "normal", + groupId: undefined, + }); + } + }, [editingAnnouncement, form]); + // Fetch announcements const { data: announcements = [], isLoading } = useQuery({ queryKey: ['/api/announcements', selectedStoreId], @@ -72,19 +93,26 @@ export default function AnnouncementCard() { enabled: user?.role === 'admin', }); - // Create announcement mutation + // Create/Update announcement mutation const createMutation = useMutation({ mutationFn: async (data: z.infer) => { - console.log('📢 Creating announcement with data:', data); + const isEditing = !!editingAnnouncement; + console.log('📢 Submitting announcement:', { data, isEditing }); - const response = await fetch('/api/announcements', { - method: 'POST', + const url = isEditing + ? `/api/announcements/${editingAnnouncement.id}` + : '/api/announcements'; + + const method = isEditing ? 'PUT' : 'POST'; + + const response = await fetch(url, { + method, headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify(data), }); - console.log('📢 Create announcement response:', { + console.log('📢 Announcement response:', { status: response.status, statusText: response.statusText, ok: response.ok @@ -92,31 +120,32 @@ export default function AnnouncementCard() { if (!response.ok) { const errorText = await response.text(); - console.error('📢 Create announcement failed:', errorText); - throw new Error(`Failed to create announcement: ${response.status} - ${errorText}`); + console.error('📢 Announcement failed:', errorText); + throw new Error(`Failed to ${isEditing ? 'update' : 'create'} announcement: ${response.status} - ${errorText}`); } const result = await response.json(); - console.log('📢 Announcement created successfully:', result); + console.log('📢 Announcement success:', result); return result; }, onSuccess: (data) => { - console.log('📢 Announcement creation success callback:', data); + const isEditing = !!editingAnnouncement; + console.log('📢 Announcement success callback:', data); queryClient.invalidateQueries({ queryKey: ['/api/announcements'] }); setIsCreateDialogOpen(false); + setEditingAnnouncement(null); form.reset(); - // Add success toast toast({ title: "Succès", - description: "Annonce créée avec succès", + description: isEditing ? "Information modifiée avec succès" : "Information créée avec succès", }); }, onError: (error) => { - console.error('📢 Announcement creation error:', error); - // Add error toast + const isEditing = !!editingAnnouncement; + console.error('📢 Announcement error:', error); toast({ title: "Erreur", - description: error.message || "Impossible de créer l'annonce", + description: error.message || `Impossible de ${isEditing ? 'modifier' : 'créer'} l'information`, variant: "destructive", }); }, @@ -229,7 +258,13 @@ export default function AnnouncementCard() { Informations
{user?.role === 'admin' && ( - + { + setIsCreateDialogOpen(open); + if (!open) { + setEditingAnnouncement(null); + form.reset(); + } + }}>
@@ -386,15 +426,28 @@ export default function AnnouncementCard() { {user?.role === 'admin' && ( - +
+ + +
)} ); diff --git a/server/announcementStorage.ts b/server/announcementStorage.ts index 9982394..77cfddd 100644 --- a/server/announcementStorage.ts +++ b/server/announcementStorage.ts @@ -114,6 +114,60 @@ class AnnouncementMemoryStorage { return announcement; } + async getAnnouncement(id: number): Promise { + const announcement = this.announcements.get(id); + if (!announcement) { + return undefined; + } + + // Récupérer les utilisateurs et groupes pour les relations + const [users, groups] = await Promise.all([ + this.usersGetter(), + this.groupsGetter() + ]); + + const usersMap = new Map(users.map(u => [u.id, u])); + const groupsMap = new Map(groups.map(g => [g.id, g])); + + const author = usersMap.get(announcement.authorId); + const group = announcement.groupId ? groupsMap.get(announcement.groupId) : undefined; + + if (!author) { + return undefined; + } + + return { + ...announcement, + author, + group, + }; + } + + async updateAnnouncement(id: number, announcementData: Partial): Promise { + const existingAnnouncement = this.announcements.get(id); + if (!existingAnnouncement) { + throw new Error(`Announcement with ID ${id} not found`); + } + + const updatedAnnouncement: Announcement = { + ...existingAnnouncement, + ...announcementData, + id, // Ensure ID doesn't change + updatedAt: new Date(), + }; + + this.announcements.set(id, updatedAnnouncement); + console.log(`✏️ Annonce mise à jour: ${updatedAnnouncement.title} (ID: ${id})`); + + // Return the announcement with relations + const announcementWithRelations = await this.getAnnouncement(id); + if (!announcementWithRelations) { + throw new Error(`Failed to get updated announcement with relations`); + } + + return announcementWithRelations; + } + async deleteAnnouncement(id: number): Promise { const existed = this.announcements.has(id); const deleted = this.announcements.delete(id); diff --git a/server/routes.ts b/server/routes.ts index 0b89987..1fbeaa0 100644 --- a/server/routes.ts +++ b/server/routes.ts @@ -3078,6 +3078,58 @@ RÉSUMÉ DU SCAN } }); + // PUT /api/announcements/:id - Update announcement (admin only) + app.put('/api/announcements/:id', isAuthenticated, async (req: any, res) => { + console.log('📝 [SERVER] PUT /api/announcements/:id endpoint hit'); + console.log('📝 [SERVER] Request body:', JSON.stringify(req.body, null, 2)); + + try { + const userId = req.user.claims ? req.user.claims.sub : req.user.id; + console.log('📝 [SERVER] Extracted userId:', userId); + + const user = await storage.getUserWithGroups(userId); + if (!user) { + console.error('📝 [SERVER] User not found for ID:', userId); + return res.status(404).json({ message: "User not found" }); + } + + console.log('📝 [SERVER] User found:', { username: user.username, role: user.role, id: user.id }); + + // Only admin can edit announcements + if (user.role !== 'admin') { + console.error('📝 [SERVER] Access denied - user role:', user.role); + return res.status(403).json({ message: "Only administrators can edit announcements" }); + } + + const id = parseInt(req.params.id); + console.log('📝 [SERVER] Announcement ID:', id); + + // Verify announcement exists + const existingAnnouncement = await storage.getAnnouncement(id); + if (!existingAnnouncement) { + console.error('📝 [SERVER] Announcement not found:', id); + return res.status(404).json({ message: "Announcement not found" }); + } + + console.log('📝 [SERVER] User is admin, proceeding with validation'); + + const announcementData = insertAnnouncementSchema.partial().parse(req.body); + console.log('📝 [SERVER] Announcement data validated:', announcementData); + + const updatedAnnouncement = await storage.updateAnnouncement(id, announcementData); + console.log('📝 [SERVER] Announcement updated successfully:', updatedAnnouncement); + + res.json(updatedAnnouncement); + } catch (error) { + console.error('📝 [SERVER] Error updating announcement:', error); + if (error instanceof z.ZodError) { + console.error('📝 [SERVER] Validation errors:', error.errors); + return res.status(400).json({ message: "Validation error", errors: error.errors }); + } + res.status(500).json({ message: "Failed to update announcement" }); + } + }); + app.delete('/api/announcements/:id', isAuthenticated, async (req: any, res) => { try { const userId = req.user.claims ? req.user.claims.sub : req.user.id; diff --git a/server/storage.ts b/server/storage.ts index 8597eeb..e417c42 100644 --- a/server/storage.ts +++ b/server/storage.ts @@ -68,7 +68,7 @@ import { } from "@shared/schema"; import { db } from "./db"; import { eq, and, inArray, desc, sql, gte, lte, lt, or, isNull, isNotNull, asc } from "drizzle-orm"; -import { getAnnouncementStorage } from "./announcementStorage.js"; + export interface IStorage { // User operations @@ -179,6 +179,8 @@ export interface IStorage { // Announcement operations createAnnouncement(announcement: InsertAnnouncement): Promise; getAnnouncements(groupIds?: number[]): Promise; + getAnnouncement(id: number): Promise; + updateAnnouncement(id: number, announcement: Partial): Promise; deleteAnnouncement(id: number): Promise; // SAV operations @@ -1607,6 +1609,22 @@ export class DatabaseStorage implements IStorage { return await announcementStorage.getAnnouncements(groupIds); } + async getAnnouncement(id: number): Promise { + const announcementStorage = getAnnouncementStorage( + () => this.getUsers(), + () => this.getGroups() + ); + return await announcementStorage.getAnnouncement(id); + } + + async updateAnnouncement(id: number, announcementData: Partial): Promise { + const announcementStorage = getAnnouncementStorage( + () => this.getUsers(), + () => this.getGroups() + ); + return await announcementStorage.updateAnnouncement(id, announcementData); + } + async deleteAnnouncement(id: number): Promise { const announcementStorage = getAnnouncementStorage( () => this.getUsers(),