From 45688c0dded538a7c52cad16581367ad8098ce16 Mon Sep 17 00:00:00 2001 From: Dave Date: Tue, 17 Mar 2026 11:03:14 -0400 Subject: [PATCH] feature/IO-3587-Commision-Cut - Additional test, layout enhancements --- .../shop-employee-teams.form.component.jsx | 415 +-- package-lock.json | 2346 +++++++++-------- package.json | 44 +- 3 files changed, 1501 insertions(+), 1304 deletions(-) diff --git a/client/src/components/shop-teams/shop-employee-teams.form.component.jsx b/client/src/components/shop-teams/shop-employee-teams.form.component.jsx index 87cd275e3..0b92fa69c 100644 --- a/client/src/components/shop-teams/shop-employee-teams.form.component.jsx +++ b/client/src/components/shop-teams/shop-employee-teams.form.component.jsx @@ -1,9 +1,23 @@ import { DeleteFilled } from "@ant-design/icons"; import { useMutation, useQuery } from "@apollo/client/react"; -import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Space, Switch, Tag, Typography } from "antd"; +import { + Button, + Card, + Col, + Form, + Input, + InputNumber, + Row, + Select, + Skeleton, + Space, + Switch, + Tag, + Typography +} from "antd"; import querystring from "query-string"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { useLocation, useNavigate } from "react-router-dom"; @@ -85,21 +99,40 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) { const history = useNavigate(); const search = querystring.parse(useLocation().search); const notification = useNotification(); + const [hydratedTeamId, setHydratedTeamId] = useState(search.employeeTeamId === "new" ? "new" : null); + const isNewTeam = search.employeeTeamId === "new"; - const { error, data } = useQuery(QUERY_EMPLOYEE_TEAM_BY_ID, { + const { error, data, loading } = useQuery(QUERY_EMPLOYEE_TEAM_BY_ID, { variables: { id: search.employeeTeamId }, - skip: !search.employeeTeamId || search.employeeTeamId === "new", + skip: !search.employeeTeamId || isNewTeam, fetchPolicy: "network-only", - nextFetchPolicy: "network-only" + nextFetchPolicy: "network-only", + notifyOnNetworkStatusChange: true }); useEffect(() => { - if (data?.employee_teams_by_pk) { + if (!search.employeeTeamId) return; + + if (isNewTeam) { + form.resetFields(); + setHydratedTeamId("new"); + return; + } + + setHydratedTeamId(null); + }, [form, isNewTeam, search.employeeTeamId]); + + useEffect(() => { + if (!search.employeeTeamId || isNewTeam || loading) return; + + if (data?.employee_teams_by_pk?.id === search.employeeTeamId) { form.setFieldsValue(normalizeEmployeeTeam(data.employee_teams_by_pk)); + setHydratedTeamId(search.employeeTeamId); } else { form.resetFields(); + setHydratedTeamId(search.employeeTeamId); } - }, [form, data, search.employeeTeamId]); + }, [data, form, isNewTeam, loading, search.employeeTeamId]); const [updateEmployeeTeam] = useMutation(UPDATE_EMPLOYEE_TEAM); const [insertEmployeeTeam] = useMutation(INSERT_EMPLOYEE_TEAM); @@ -109,7 +142,10 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) { })); const teamName = Form.useWatch("name", form); const teamMembers = Form.useWatch(["employee_team_members"], form) || []; - const teamCardTitle = teamName?.trim() || t("employee_teams.fields.name"); + const isTeamHydrating = !isNewTeam && Boolean(search.employeeTeamId) && hydratedTeamId !== search.employeeTeamId; + const teamCardTitle = isTeamHydrating + ? t("employee_teams.fields.name") + : teamName?.trim() || t("employee_teams.fields.name"); const getTeamMemberTitle = (teamMember = {}) => { const employeeName = @@ -123,10 +159,10 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) { return (
{employeeName} - + {`${t("employee_teams.fields.allocation")}: ${allocation || "--"}`} - + {payoutMethod}
@@ -228,191 +264,194 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) { form.submit()}> + } > -
- - - - - - - - - - - - - {(fields, { add, remove, move }) => { - return ( -
- {fields.map((field, index) => { - const teamMember = normalizeTeamMember(teamMembers[field.name]); - - return ( - - - -