From 0ea36cb3f887dc406412fb3bc30b8069e57f4318 Mon Sep 17 00:00:00 2001 From: Malte Delfs Date: Tue, 22 Jun 2021 17:10:52 +0200 Subject: [PATCH] added edit/remove for customEventTypeInputs --- pages/api/availability/eventtype.ts | 6 ++++ pages/availability/event/[type].tsx | 52 ++++++++++++++++++++++------- 2 files changed, 46 insertions(+), 12 deletions(-) diff --git a/pages/api/availability/eventtype.ts b/pages/api/availability/eventtype.ts index a519a549a0..e50fc4abee 100644 --- a/pages/api/availability/eventtype.ts +++ b/pages/api/availability/eventtype.ts @@ -22,6 +22,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) customInputs: !req.body.customInputs ? undefined : { + deleteMany: { + eventTypeId: req.body.id, + NOT: { + id: {in: req.body.customInputs.filter(input => !!input.id).map(e => e.id)} + } + }, createMany: { data: req.body.customInputs.filter(input => !input.id).map(input => ({ type: input.type, diff --git a/pages/availability/event/[type].tsx b/pages/availability/event/[type].tsx index 1ad8824a22..1a1a7cd4a1 100644 --- a/pages/availability/event/[type].tsx +++ b/pages/availability/event/[type].tsx @@ -31,8 +31,9 @@ export default function EventType(props) { const [ showAddCustomModal, setShowAddCustomModal ] = useState(false); const [ selectedLocation, setSelectedLocation ] = useState(undefined); const [ selectedInputOption, setSelectedInputOption ] = useState(inputOptions[0]); + const [ selectedCustomInput, setSelectedCustomInput ] = useState(undefined); const [ locations, setLocations ] = useState(props.eventType.locations || []); - const [customInputs, setCustomInputs] = useState(props.eventType.customInputs.sort((a, b) => a.id - b.id) || []); + const [ customInputs, setCustomInputs ] = useState(props.eventType.customInputs.sort((a, b) => a.id - b.id) || []); const locationOptions = props.locationOptions const titleRef = useRef(); @@ -95,8 +96,15 @@ export default function EventType(props) { const closeAddCustomModal = () => { setSelectedInputOption(inputOptions[0]); setShowAddCustomModal(false); + setSelectedCustomInput(undefined); }; + const openEditCustomModel = (customInput: EventTypeCustomInput) => { + setSelectedCustomInput(customInput); + setSelectedInputOption(inputOptions.find(e => e.value === customInput.type)); + setShowAddCustomModal(true); + } + const LocationOptions = () => { if (!selectedLocation) { return null; @@ -160,12 +168,30 @@ export default function EventType(props) { type: e.target.type.value }; - setCustomInputs(customInputs.concat(customInput)); - - console.log(customInput) - setShowAddCustomModal(false); + if (!!e.target.id?.value) { + const index = customInputs.findIndex(inp => inp.id === +e.target.id?.value); + if (index >= 0) { + const input = customInputs[index]; + input.label = customInput.label; + input.required = customInput.required; + input.type = customInput.type; + setCustomInputs(customInputs); + } + } else{ + setCustomInputs(customInputs.concat(customInput)); + } + closeAddCustomModal(); }; + const removeCustom = (customInput, e) => { + e.preventDefault(); + const index = customInputs.findIndex(inp => inp.id === customInput.id); + if (index >= 0){ + customInputs.splice(index, 1); + setCustomInputs([...customInputs]); + } + } + return (
@@ -281,7 +307,7 @@ export default function EventType(props) {
    {customInputs.map( (customInput) => ( -
  • +
  • @@ -296,11 +322,9 @@ export default function EventType(props) {
    - -
    @@ -437,16 +461,20 @@ export default function EventType(props) {
    - +
    - +
    + +