Merge pull request #450 from emrysal/bugfix/custom-inputs

pull/459/head
Bailey Pumfleet 2021-08-16 10:35:28 +01:00 committed by GitHub
commit 06dce130b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 44 additions and 1172 deletions

View File

@ -1,13 +0,0 @@
export enum EventTypeCustomInputType {
Text = 'text',
TextLong = 'textLong',
Number = 'number',
Bool = 'bool',
}
export interface EventTypeCustomInput {
id?: number;
type: EventTypeCustomInputType;
label: string;
required: boolean;
}

View File

@ -3,6 +3,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { CalendarIcon, ClockIcon, ExclamationIcon, LocationMarkerIcon } from "@heroicons/react/solid";
import prisma, { whereAndSelect } from "../../lib/prisma";
import { EventTypeCustomInputType } from "@prisma/client";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry";
import { useEffect, useState } from "react";
import dayjs from "dayjs";
@ -13,7 +14,6 @@ import PhoneInput from "react-phone-number-input";
import { LocationType } from "../../lib/location";
import Avatar from "../../components/Avatar";
import Button from "../../components/ui/Button";
import { EventTypeCustomInputType } from "../../lib/eventTypeInput";
import Theme from "@components/Theme";
import { ReactMultiEmail } from "react-multi-email";
@ -70,7 +70,7 @@ export default function Book(props: any): JSX.Element {
.map((input) => {
const data = event.target["custom_" + input.id];
if (data) {
if (input.type === EventTypeCustomInputType.Bool) {
if (input.type === EventTypeCustomInputType.BOOL) {
return input.label + "\n" + (data.checked ? "Yes" : "No");
} else {
return input.label + "\n" + data.value;
@ -272,14 +272,14 @@ export default function Book(props: any): JSX.Element {
.sort((a, b) => a.id - b.id)
.map((input) => (
<div className="mb-4" key={"input-" + input.label.toLowerCase}>
{input.type !== EventTypeCustomInputType.Bool && (
{input.type !== EventTypeCustomInputType.BOOL && (
<label
htmlFor={input.label}
className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
{input.label}
</label>
)}
{input.type === EventTypeCustomInputType.TextLong && (
{input.type === EventTypeCustomInputType.TEXTLONG && (
<textarea
name={"custom_" + input.id}
id={"custom_" + input.id}
@ -289,7 +289,7 @@ export default function Book(props: any): JSX.Element {
placeholder=""
/>
)}
{input.type === EventTypeCustomInputType.Text && (
{input.type === EventTypeCustomInputType.TEXT && (
<input
type="text"
name={"custom_" + input.id}
@ -299,7 +299,7 @@ export default function Book(props: any): JSX.Element {
placeholder=""
/>
)}
{input.type === EventTypeCustomInputType.Number && (
{input.type === EventTypeCustomInputType.NUMBER && (
<input
type="number"
name={"custom_" + input.id}
@ -309,7 +309,7 @@ export default function Book(props: any): JSX.Element {
placeholder=""
/>
)}
{input.type === EventTypeCustomInputType.Bool && (
{input.type === EventTypeCustomInputType.BOOL && (
<div className="flex items-center h-5">
<input
type="checkbox"

File diff suppressed because it is too large Load Diff

View File

@ -5,13 +5,13 @@ import { useRouter } from "next/router";
import React, { useEffect, useRef, useState } from "react";
import Select, { OptionBase } from "react-select";
import prisma from "@lib/prisma";
import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
import { LocationType } from "@lib/location";
import Shell from "@components/Shell";
import { getSession } from "next-auth/client";
import { Scheduler } from "@components/ui/Scheduler";
import { Disclosure, RadioGroup } from "@headlessui/react";
import { PhoneIcon, XIcon } from "@heroicons/react/outline";
import { EventTypeCustomInput, EventTypeCustomInputType } from "@lib/eventTypeInput";
import {
LocationMarkerIcon,
LinkIcon,
@ -106,10 +106,10 @@ export default function EventTypePage({
const router = useRouter();
const inputOptions: OptionBase[] = [
{ value: EventTypeCustomInputType.Text, label: "Text" },
{ value: EventTypeCustomInputType.TextLong, label: "Multiline Text" },
{ value: EventTypeCustomInputType.Number, label: "Number" },
{ value: EventTypeCustomInputType.Bool, label: "Checkbox" },
{ value: EventTypeCustomInputType.TEXT, label: "Text" },
{ value: EventTypeCustomInputType.TEXTLONG, label: "Multiline Text" },
{ value: EventTypeCustomInputType.NUMBER, label: "Number" },
{ value: EventTypeCustomInputType.BOOL, label: "Checkbox" },
];
const [DATE_PICKER_ORIENTATION, setDatePickerOrientation] = useState<OrientationShape>("horizontal");
@ -342,28 +342,19 @@ export default function EventTypePage({
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);
}
if (selectedCustomInput) {
selectedCustomInput.label = customInput.label;
selectedCustomInput.required = customInput.required;
selectedCustomInput.type = customInput.type;
} 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]);
}
const removeCustom = (index: number) => {
customInputs.splice(index, 1);
setCustomInputs([...customInputs]);
};
return (
@ -638,8 +629,8 @@ export default function EventTypePage({
</div>
<div className="w-full">
<ul className="w-96 mt-1">
{customInputs.map((customInput) => (
<li key={customInput.label} className="bg-secondary-50 mb-2 p-2 border">
{customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
<li key={idx} className="bg-secondary-50 mb-2 p-2 border">
<div className="flex justify-between">
<div>
<div>
@ -661,7 +652,7 @@ export default function EventTypePage({
className="mr-2 text-sm text-primary-600">
Edit
</button>
<button onClick={(e) => removeCustom(customInput, e)}>
<button type="button" onClick={() => removeCustom(idx)}>
<XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
</button>
</div>

View File

@ -0,0 +1,14 @@
-- CreateEnum
CREATE TYPE "EventTypeCustomInputType" AS ENUM ('text', 'textLong', 'number', 'bool');
--- AlterTable
ALTER TABLE "EventTypeCustomInput" RENAME COLUMN "type" TO "type_old";
ALTER TABLE "EventTypeCustomInput" ADD COLUMN "type" "EventTypeCustomInputType";
-- UpdateTable
UPDATE "EventTypeCustomInput" SET "type" = CAST( "type_old" AS "EventTypeCustomInputType" );
-- AlterTable
ALTER TABLE "EventTypeCustomInput" ALTER COLUMN "type" SET NOT NULL;
ALTER TABLE "EventTypeCustomInput" DROP COLUMN "type_old";

View File

@ -163,12 +163,19 @@ model SelectedCalendar {
@@id([userId,integration,externalId])
}
enum EventTypeCustomInputType {
TEXT @map("text")
TEXTLONG @map("textLong")
NUMBER @map("number")
BOOL @map("bool")
}
model EventTypeCustomInput {
id Int @id @default(autoincrement())
eventTypeId Int
eventType EventType @relation(fields: [eventTypeId], references: [id])
label String
type String
type EventTypeCustomInputType
required Boolean
}