From 7e6bbfac4e9d248725afaf289abf3695a71fb710 Mon Sep 17 00:00:00 2001 From: Nicolas Date: Mon, 30 Dec 2024 16:18:41 +0100 Subject: [PATCH] client --- backend/src/controllers/clients.ts | 8 +++-- frontend/src/actions/clientActions.ts | 19 ++++++++++ frontend/src/components/client/EditClient.tsx | 2 ++ .../src/components/socketio/SocketService.ts | 36 ++++++++++--------- frontend/src/trans.nl.ts | 3 +- 5 files changed, 48 insertions(+), 20 deletions(-) diff --git a/backend/src/controllers/clients.ts b/backend/src/controllers/clients.ts index ba1f696b..41f4cbc4 100644 --- a/backend/src/controllers/clients.ts +++ b/backend/src/controllers/clients.ts @@ -3,9 +3,10 @@ import slugify from 'slugify'; import fetch from 'node-fetch'; import {ObjectID} from 'mongodb'; import {IClient} from '../models/clients'; -import {CollectionNames, updateAudit, createAudit} from '../models/common'; +import {CollectionNames, updateAudit, createAudit, SocketEventTypes} from '../models/common'; import {ConfacRequest} from '../models/technical'; import {saveAudit} from './utils/audit-logs'; +import {emitEntityEvent} from './utils/entity-events'; export const getClients = async (req: Request, res: Response) => { @@ -31,7 +32,9 @@ export const saveClient = async (req: ConfacRequest, res: Response) => { const {value: originalClient} = await clientsCollection.findOneAndUpdate({_id: new ObjectID(_id)}, {$set: client}, {returnOriginal: true}); await saveAudit(req, 'client', originalClient, client); - return res.send({_id, ...client}); + const clientResponse = {_id, ...client}; + emitEntityEvent(req, SocketEventTypes.EntityUpdated, CollectionNames.CLIENTS, _id, clientResponse); + return res.send(clientResponse); } @@ -39,5 +42,6 @@ export const saveClient = async (req: ConfacRequest, res: Response) => { client.audit = createAudit(req.user); const inserted = await req.db.collection(CollectionNames.CLIENTS).insertOne(client); const [createdClient] = inserted.ops; + emitEntityEvent(req, SocketEventTypes.EntityCreated, CollectionNames.CLIENTS, createdClient._id, createdClient); return res.send(createdClient); }; diff --git a/frontend/src/actions/clientActions.ts b/frontend/src/actions/clientActions.ts index 0bb08397..0faeaa14 100644 --- a/frontend/src/actions/clientActions.ts +++ b/frontend/src/actions/clientActions.ts @@ -7,6 +7,9 @@ import {ClientModel} from '../components/client/models/ClientModels'; import {busyToggle, success} from './appActions'; import {authService} from '../components/users/authService'; import { socketService } from '../components/socketio/SocketService'; +import { EntityEventPayload } from '../components/socketio/EntityEventPayload'; +import { SocketEventTypes } from '../components/socketio/SocketEventTypes'; +import { Dispatch } from 'redux'; export function saveClient(client: ClientModel, stayOnPage = false, callback?: (client: ClientModel) => void) { @@ -34,3 +37,19 @@ export function saveClient(client: ClientModel, stayOnPage = false, callback?: ( .then(() => dispatch(busyToggle.off())); }; } + +export function handleClientSocketEvents(eventType: string, eventPayload: EntityEventPayload){ + return (dispatch: Dispatch) => { + dispatch(busyToggle()); + switch(eventType){ + case SocketEventTypes.EntityUpdated: + case SocketEventTypes.EntityCreated: + dispatch({ + type: ACTION_TYPES.CLIENT_UPDATE, + client: eventPayload.entity, + }); break; + default: throw new Error(`${eventType} not supported for client.`); + } + dispatch(busyToggle.off()); + } +} \ No newline at end of file diff --git a/frontend/src/components/client/EditClient.tsx b/frontend/src/components/client/EditClient.tsx index 3ad6c0a5..5f36fa39 100644 --- a/frontend/src/components/client/EditClient.tsx +++ b/frontend/src/components/client/EditClient.tsx @@ -18,6 +18,7 @@ import {Audit} from '../admin/audit/Audit'; import {Claim} from '../users/models/UserModel'; import {useParams} from 'react-router-dom'; import {InvoiceLine} from '../invoice/models/InvoiceLineModels'; +import useEntityChangedToast from '../hooks/useEntityChangedToast'; /** Different spellings of "Belgium" */ @@ -42,6 +43,7 @@ const EditClient = () => { const dispatch = useDispatch(); // useEffect(() => window.scrollTo(0, 0)); // TODO: each keystroke made it scroll to top :( useDocumentTitle('clientEdit', {name: client.name}); + useEntityChangedToast(client._id); if (storeClient && !client._id) { setClient(storeClient); diff --git a/frontend/src/components/socketio/SocketService.ts b/frontend/src/components/socketio/SocketService.ts index 52115dd2..2c827313 100644 --- a/frontend/src/components/socketio/SocketService.ts +++ b/frontend/src/components/socketio/SocketService.ts @@ -1,7 +1,7 @@ import { Dispatch } from "redux"; import { io } from "socket.io-client"; -import { handleConsultantSocketEvents, handleProjectSocketEvents } from "../../actions"; +import { handleClientSocketEvents, handleConsultantSocketEvents, handleProjectSocketEvents } from "../../actions"; import { SocketEventTypes } from "./SocketEventTypes"; import { EntityEventPayload } from "./EntityEventPayload"; import { t } from "../utils"; @@ -25,9 +25,9 @@ function createSocketService () { throw new Error("Initialize should only be called once."); } - function registerEntityChangeEventHandler(entityEventType: SocketEventTypes, dispatch: Dispatch){ - socket.on(entityEventType, eventPayload=> { - console.log("Received entity event from socketio: " + entityEventType); + function registerHandlerForEventType(eventType: SocketEventTypes, dispatch: Dispatch){ + socket.on(eventType, eventPayload=> { + console.log("Received entity event from socketio: " + eventType); console.log("Source socket Id: " + eventPayload.sourceSocketId); console.log("Payload:"); console.log(eventPayload); @@ -38,16 +38,17 @@ function createSocketService () { } switch(eventPayload.entityType){ - case 'projects': dispatch(handleProjectSocketEvents(entityEventType, eventPayload)); break; - case 'consultants': dispatch(handleConsultantSocketEvents(entityEventType, eventPayload)); break; + case 'projects': dispatch(handleProjectSocketEvents(eventType, eventPayload)); break; + case 'consultants': dispatch(handleConsultantSocketEvents(eventType, eventPayload)); break; + case 'clients': dispatch(handleClientSocketEvents(eventType, eventPayload)); break; default: throw new Error(`${eventPayload.entityType} event for entity type not supported.`); }; }); } - registerEntityChangeEventHandler(SocketEventTypes.EntityCreated, dispatch); - registerEntityChangeEventHandler(SocketEventTypes.EntityUpdated, dispatch); - registerEntityChangeEventHandler(SocketEventTypes.EntityDeleted, dispatch); + registerHandlerForEventType(SocketEventTypes.EntityCreated, dispatch); + registerHandlerForEventType(SocketEventTypes.EntityUpdated, dispatch); + registerHandlerForEventType(SocketEventTypes.EntityDeleted, dispatch); initialized = true; } @@ -77,10 +78,11 @@ function createSocketService () { function enableToastsForEntity(entityId: string) { var unsubscriptions: (()=>void)[] = []; - function registerToastForEventType(eventType: SocketEventTypes){ - var process = (msg: EntityEventPayload)=>{ + function registerHandlerForEventType(eventType: SocketEventTypes){ + + var handleEvent = (msg: EntityEventPayload)=>{ if(msg.sourceSocketId === socketId){ - console.log("Event ignored for entityId subscription => socket id is self"); + console.log("Event ignored for entityId subscription => source socket id is self"); return; } if(msg.entityId !== entityId){ @@ -90,14 +92,14 @@ function createSocketService () { toastEntityChanged(eventType, msg); }; - socket.on(eventType, process); + socket.on(eventType, handleEvent); - unsubscriptions.push(() => socket.off(eventType,process)); + unsubscriptions.push(() => socket.off(eventType,handleEvent)); } - registerToastForEventType(SocketEventTypes.EntityCreated); - registerToastForEventType(SocketEventTypes.EntityUpdated); - registerToastForEventType(SocketEventTypes.EntityDeleted); + registerHandlerForEventType(SocketEventTypes.EntityCreated); + registerHandlerForEventType(SocketEventTypes.EntityUpdated); + registerHandlerForEventType(SocketEventTypes.EntityDeleted); return ()=> { unsubscriptions.forEach(fn=> fn()); diff --git a/frontend/src/trans.nl.ts b/frontend/src/trans.nl.ts index c54cbf79..167cd099 100644 --- a/frontend/src/trans.nl.ts +++ b/frontend/src/trans.nl.ts @@ -680,7 +680,8 @@ export const trans = { socketio: { entities: { projects: 'Project', - consultants: 'Consultant' + consultants: 'Consultant', + clients: 'Klant' }, operation: { entityUpdated: '{entityType} werd aangepast door {user}',