public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added edit/remove for customEventTypeInputs

pull/299/head
Malte Delfs 2021-06-22 17:10:52 +02:00
parent 0c8d2c74de
commit 0ea36cb3f8
2 changed files with 46 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pages/api/availability/eventtype.ts
View File

@ -22,6 +22,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
customInputs: !req.body.customInputs customInputs: !req.body.customInputs
? undefined ? undefined
: { : {
deleteMany: {
eventTypeId: req.body.id,
NOT: {
id: {in: req.body.customInputs.filter(input => !!input.id).map(e => e.id)}
}
},
createMany: { createMany: {
data: req.body.customInputs.filter(input => !input.id).map(input => ({ data: req.body.customInputs.filter(input => !input.id).map(input => ({
type: input.type, type: input.type,

48
pages/availability/event/[type].tsx
View File

@ -31,6 +31,7 @@ export default function EventType(props) {
const [ showAddCustomModal, setShowAddCustomModal ] = useState(false); const [ showAddCustomModal, setShowAddCustomModal ] = useState(false);
const [ selectedLocation, setSelectedLocation ] = useState<OptionBase | undefined>(undefined); const [ selectedLocation, setSelectedLocation ] = useState<OptionBase | undefined>(undefined);
const [ selectedInputOption, setSelectedInputOption ] = useState<OptionBase>(inputOptions[0]); const [ selectedInputOption, setSelectedInputOption ] = useState<OptionBase>(inputOptions[0]);
const [ selectedCustomInput, setSelectedCustomInput ] = useState<EventTypeCustomInput | undefined>(undefined);
const [ locations, setLocations ] = useState(props.eventType.locations || []); const [ locations, setLocations ] = useState(props.eventType.locations || []);
const [ customInputs, setCustomInputs ] = useState<EventTypeCustomInput[]>(props.eventType.customInputs.sort((a, b) => a.id - b.id) || []); const [ customInputs, setCustomInputs ] = useState<EventTypeCustomInput[]>(props.eventType.customInputs.sort((a, b) => a.id - b.id) || []);
const locationOptions = props.locationOptions const locationOptions = props.locationOptions
@ -95,8 +96,15 @@ export default function EventType(props) {
const closeAddCustomModal = () => { const closeAddCustomModal = () => {
setSelectedInputOption(inputOptions[0]); setSelectedInputOption(inputOptions[0]);
setShowAddCustomModal(false); setShowAddCustomModal(false);
setSelectedCustomInput(undefined);
}; };
const openEditCustomModel = (customInput: EventTypeCustomInput) => {
setSelectedCustomInput(customInput);
setSelectedInputOption(inputOptions.find(e => e.value === customInput.type));
setShowAddCustomModal(true);
}
const LocationOptions = () => { const LocationOptions = () => {
if (!selectedLocation) { if (!selectedLocation) {
return null; return null;
@ -160,12 +168,30 @@ export default function EventType(props) {
type: e.target.type.value type: e.target.type.value
}; };
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)); setCustomInputs(customInputs.concat(customInput));
}
console.log(customInput) closeAddCustomModal();
setShowAddCustomModal(false);
}; };
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 ( return (
<div> <div>
<Head> <Head>
@ -281,7 +307,7 @@ export default function EventType(props) {
<label htmlFor="additionalFields" className="block text-sm font-medium text-gray-700">Additional Inputs</label> <label htmlFor="additionalFields" className="block text-sm font-medium text-gray-700">Additional Inputs</label>
<ul className="w-96 mt-1"> <ul className="w-96 mt-1">
{customInputs.map( (customInput) => ( {customInputs.map( (customInput) => (
<li key={customInput.type} className="bg-blue-50 mb-2 p-2 border"> <li key={customInput.label} className="bg-blue-50 mb-2 p-2 border">
<div className="flex justify-between"> <div className="flex justify-between">
<div> <div>
<div> <div>
@ -296,11 +322,9 @@ export default function EventType(props) {
</div> </div>
</div> </div>
<div className="flex"> <div className="flex">
<button type="button" onClick={() => { <button type="button" onClick={() => openEditCustomModel(customInput)} className="mr-2 text-sm text-blue-600">Edit
}} className="mr-2 text-sm text-blue-600">Edit
</button> </button>
<button onClick={() => { <button onClick={(e) => removeCustom(customInput, e)}>
}}>
<XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 "/> <XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 "/>
</button> </button>
</div> </div>
@ -437,16 +461,20 @@ export default function EventType(props) {
<div className="mb-2"> <div className="mb-2">
<label htmlFor="label" className="block text-sm font-medium text-gray-700">Label</label> <label htmlFor="label" className="block text-sm font-medium text-gray-700">Label</label>
<div className="mt-1"> <div className="mt-1">
<input type="text" name="label" id="label" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" /> <input type="text" name="label" id="label" required
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
defaultValue={selectedCustomInput?.label}/>
</div> </div>
</div> </div>
<div className="flex items-center h-5"> <div className="flex items-center h-5">
<input id="required" name="required" type="checkbox" className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2" defaultChecked={true}/> <input id="required" name="required" type="checkbox" className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2" defaultChecked={selectedCustomInput?.required ?? true}/>
<label htmlFor="required" className="block text-sm font-medium text-gray-700"> <label htmlFor="required" className="block text-sm font-medium text-gray-700">
Is required Is required
</label> </label>
</div> </div>
<input type="hidden" name="id" id="id" value={selectedCustomInput?.id}/>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary"> <button type="submit" className="btn btn-primary">
Save Save