mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

added edit/remove for customEventTypeInputs

Browse source
This commit is contained in:
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
? 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,

52
pages/availability/event/[type].tsx
View file

@ -31,8 +31,9 @@ export default function EventType(props) {
const [ showAddCustomModal, setShowAddCustomModal ] = useState(false);
const [ selectedLocation, setSelectedLocation ] = useState<OptionBase | undefined>(undefined);
const [ selectedInputOption, setSelectedInputOption ] = useState<OptionBase>(inputOptions[0]);
const [ selectedCustomInput, setSelectedCustomInput ] = useState<EventTypeCustomInput | undefined>(undefined);
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 titleRef = useRef<HTMLInputElement>();
@ -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 (
<div>
<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>
<ul className="w-96 mt-1">
{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>
<div>
@ -296,11 +322,9 @@ export default function EventType(props) {
</div>
</div>
<div className="flex">
<button type="button" onClick={() => {
}} className="mr-2 text-sm text-blue-600">Edit
<button type="button" onClick={() => openEditCustomModel(customInput)} className="mr-2 text-sm text-blue-600">Edit
</button>
<button onClick={() => {
}}>
<button onClick={(e) => removeCustom(customInput, e)}>
<XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 "/>
</button>
</div>
@ -437,16 +461,20 @@ export default function EventType(props) {
<div className="mb-2">
<label htmlFor="label" className="block text-sm font-medium text-gray-700">Label</label>
<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 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">
Is required
</label>
</div>
<input type="hidden" name="id" id="id" value={selectedCustomInput?.id}/>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary">
Save