Transaction: CcnwhSL...H8tP

{ "data": { "events_v2.near": { "widget": { "events___form": { "": "const onSave = props.onSave;\nif (onSave === undefined || onSave === null) {\n return 'props.onSave is required';\n}\n\nconst model = props.model;\nconst buttonText = props.buttonText || 'Save';\n\nconst MIN_LENGTH_NAME = 4;\nconst MIN_LENGTH_DESCRIPTION = 10;\nconst MAX_LENGTH_NAME = 100;\nconst MAX_LENGTH_DESCRIPTION = 2000;\nconst MIN_LENGTH_LOCATION = 10;\nconst MAX_LENGTH_LOCATION = 400;\nconst MIN_LENGTH_CATEGORY = 3;\nconst MAX_LENGTH_CATEGORY = 20;\n\nconst MILLISECONDS_IN_DAY = 86400000;\nconst DAYS_IN_WEEK = 7;\n\nconst TODAY =\n Math.floor((Date.now() + 0) / MILLISECONDS_IN_DAY) * MILLISECONDS_IN_DAY;\nconst TOMORROW = TODAY + MILLISECONDS_IN_DAY;\nconst ONE_WEEK = DAYS_IN_WEEK * MILLISECONDS_IN_DAY;\n\nconst formatDate = props.__engine.helpers.formatDate;\n\nconst EventStatus = [\n { value: 'draft', label: 'Draft' },\n { value: 'published', label: 'Published' },\n { value: 'cancelled', label: 'Cancelled' },\n];\n\nconst EventTypes = [\n { value: 'virtual', label: 'Online' },\n { value: 'irl', label: 'In Person' },\n { value: 'mixed', label: 'Both' },\n];\n\nconst DEFAULT_STATE = {\n name: '',\n type: EventTypes[0].value,\n category: '',\n status: EventStatus[0].value,\n start_date: new Date(TODAY + ONE_WEEK),\n end_date: new Date(TOMORROW + ONE_WEEK),\n location: '',\n images: [\n {\n url: null,\n type: 'tile',\n },\n {\n url: null,\n type: 'banner',\n },\n ],\n links: [\n {\n text: 'Register here',\n url: '',\n type: 'register',\n },\n {\n text: 'Get tickets',\n url: '',\n type: 'tickets',\n },\n {\n text: 'Watch live',\n url: '',\n type: 'join_stream',\n },\n ],\n description: '',\n\n errors: {},\n};\n\nif (!state) {\n if (model) {\n const start_date = model.start_date\n ? formatDate(model.start_date, '{{ YYYY }}-{{ MM }}-{{ DD }}')\n : null;\n\n const end_date = model.end_date\n ? formatDate(model.end_date, '{{ YYYY }}-{{ MM }}-{{ DD }}')\n : null;\n\n State.init({\n ...model,\n images: model.images || DEFAULT_STATE.images,\n links: model.links || DEFAULT_STATE.links,\n start_date,\n end_date,\n });\n } else {\n State.init(DEFAULT_STATE);\n }\n return 'Loading...';\n}\n\nconst Button = styled.button`\n width: 100%;\n padding: 0.5rem;\n margin: 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-sizing: border-box;\n background-color: #ccc;\n`;\n\nconst Select = styled.select`\n width: 100%;\n padding: 0.5rem;\n margin: 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-sizing: border-box;\n`;\n\nconst Label = styled.label`\n width: 100%;\n color: #666;\n padding: 0.5rem 0;\n margin: 0.5rem 0 0 0;\n box-sizing: border-box;\n`;\n\nconst ValidationError = props.__engine.Components.ValidationError;\n\nconst LinkTypes = [\n { value: 'register', label: 'Register' },\n { value: 'tickets', label: 'Tickets' },\n { value: 'join_stream', label: 'Stream URL' },\n];\n\nfunction addError(key, message) {\n const oldErrors = { ...state.errors };\n const oldKeyErrors = oldErrors[key] || [];\n\n const newKeyErrors = oldKeyErrors.includes(message)\n ? oldKeyErrors\n : [...oldKeyErrors, message];\n const newErrors = { ...oldErrors, [key]: newKeyErrors };\n\n State.update({\n errors: newErrors,\n });\n}\n\nfunction clearErrors() {\n State.update({ errors: {} });\n}\n\nfunction getErrors(key) {\n const errors = state.errors[key];\n const hasErrors = errors && errors.length > 0;\n if (hasErrors && errors.length === 1) {\n return errors[0];\n }\n\n if (!hasErrors) {\n return null;\n }\n\n return (\n <ul>\n {errors.map((message, index) => (\n <li key={index}>{message}</li>\n ))}\n </ul>\n );\n}\n\nfunction assertCondition(valid, condition, key, message) {\n if (!condition) {\n addError(key, message);\n return false;\n }\n return valid;\n}\n\nfunction sanitize(data) {\n const {\n name,\n type,\n category,\n status,\n start_date,\n end_date,\n location,\n images,\n links,\n description,\n } = data;\n return {\n name,\n type,\n category,\n status,\n start_date: new Date(start_date).getTime(),\n end_date: new Date(end_date).getTime(),\n location,\n images,\n links,\n description,\n };\n}\n\nfunction validate(data) {\n let valid = true;\n\n const {\n name,\n description,\n end_date,\n start_date,\n images,\n category,\n type,\n status,\n location,\n } = data;\n\n clearErrors();\n\n valid = assertCondition(\n valid,\n name.length >= MIN_LENGTH_NAME && name.length < MAX_LENGTH_NAME,\n 'name',\n `Name must be between ${MIN_LENGTH_NAME} and ${MAX_LENGTH_NAME} characters long. Currently: ${name.length} characters.`\n );\n\n valid = assertCondition(\n valid,\n description.length >= MIN_LENGTH_DESCRIPTION &&\n description.length < MAX_LENGTH_DESCRIPTION,\n 'description',\n `Description must be between ${MIN_LENGTH_DESCRIPTION} and ${MAX_LENGTH_DESCRIPTION} characters long. Currently: ${description.length} characters.`\n );\n\n valid = assertCondition(\n valid,\n location !== null &&\n location.length >= MIN_LENGTH_LOCATION &&\n location.length < MAX_LENGTH_LOCATION,\n 'location',\n `Location must be between ${MIN_LENGTH_LOCATION} and ${MAX_LENGTH_LOCATION} characters long. Currently: ${location.length} characters.`\n );\n\n valid = assertCondition(\n valid,\n category !== null &&\n category.length >= MIN_LENGTH_CATEGORY &&\n category.length < MAX_LENGTH_CATEGORY,\n 'category',\n `Category must be between ${MIN_LENGTH_CATEGORY} and ${MAX_LENGTH_CATEGORY} characters long. Currently: ${category.length} characters.`\n );\n\n valid = assertCondition(\n valid,\n !end_date || new Date(end_date).getTime() > new Date(start_date).getTime(),\n 'end_date',\n 'End date must be after start date, or empty'\n );\n\n valid = assertCondition(\n valid,\n start_date !== null && start_date !== undefined && start_date !== '',\n 'start_date',\n 'Event must have a start date'\n );\n\n valid = assertCondition(\n valid,\n category !== null && category !== undefined && category !== '',\n 'category',\n 'Event must have a category'\n );\n\n valid = assertCondition(\n valid,\n location !== null && location !== undefined && location !== '',\n 'location',\n 'Event must have a location'\n );\n\n valid = assertCondition(\n valid,\n images !== null &&\n images !== undefined &&\n images.length >= 2 &&\n images.reduce(\n (acc, image) =>\n acc &&\n image.url !== null &&\n image.url !== undefined &&\n image.url !== '',\n true\n ) &&\n images.reduce(\n (acc, image) =>\n acc &&\n image.type !== null &&\n image.type !== undefined &&\n image.type !== '',\n true\n ),\n 'images',\n 'Event must have at least 2 images with a url and type'\n );\n\n valid = assertCondition(\n valid,\n type !== null && type !== undefined && type !== '',\n 'type',\n 'Event must have a type'\n );\n\n valid = assertCondition(\n valid,\n status !== null && status !== undefined && status !== '',\n 'status',\n 'Event must have a status'\n );\n\n return valid;\n}\n\nfunction sanitizeValidateAndCall(data) {\n const sanitized = sanitize(data);\n const valid = validate(sanitized);\n if (valid && onSave) {\n onSave(sanitized);\n }\n}\n\nfunction sanitizeAndValidate(data) {\n const sanitized = sanitize(data);\n return validate(sanitized);\n}\n\nconst updateState = (event, key) => {\n State.update({ [key]: event.target.value });\n sanitizeAndValidate({ ...state, [key]: event.target.value });\n};\n\nreturn (\n <div\n style={{\n width: '100%',\n padding: '1rem',\n }}\n >\n <div className=\"mt-3\">\n <Label>Name</Label>\n <input\n type=\"text\"\n placeholder=\"Event Name\"\n value={state.name || ''}\n onChange={(event) => {\n updateState(event, 'name');\n }}\n />\n </div>\n <ValidationError>{getErrors('name')}</ValidationError>\n\n <div className=\"mt-3\">\n <Label>Description</Label>\n <textarea\n className=\"w-100\"\n placeholder=\"Event Description\"\n value={state.description}\n onChange={(event) => {\n updateState(event, 'description');\n }}\n rows={3}\n />\n </div>\n <ValidationError>{getErrors('description')}</ValidationError>\n\n <div className=\"mt-3\">\n <Label>Type</Label>\n <Select\n value={state.type}\n onChange={(event) => {\n updateState(event, 'type');\n }}\n >\n {EventTypes.map((type) => (\n <option key={type.value} value={type.value}>\n {type.label}\n </option>\n ))}\n </Select>\n </div>\n <ValidationError>{getErrors('type')}</ValidationError>\n\n <div className=\"mt-3\">\n <Label>Category</Label>\n <input\n type=\"text\"\n placeholder=\"Event Category\"\n value={state.category}\n onChange={(event) => {\n updateState(event, 'category');\n }}\n />\n </div>\n <ValidationError>{getErrors('category')}</ValidationError>\n\n <div className=\"mt-3\">\n <Label>Status</Label>\n <Select\n value={state.status}\n onChange={(event) => {\n updateState(event, 'status');\n }}\n >\n {EventStatus.map((status) => (\n <option key={status.value} value={status.value}>\n {status.label}\n </option>\n ))}\n </Select>\n </div>\n <ValidationError>{getErrors('status')}</ValidationError>\n\n <div className=\"mt-3\">\n <Label>Start Date</Label>\n <input\n type=\"date\"\n value={state.start_date}\n onChange={(event) => {\n updateState(event, 'start_date');\n }}\n />\n </div>\n <ValidationError>{getErrors('start_date')}</ValidationError>\n\n <div className=\"mt-3\">\n <Label>End Date</Label>\n <input\n type=\"date\"\n value={state.end_date}\n onChange={(event) => {\n updateState(event, 'end_date');\n }}\n />\n </div>\n <ValidationError>{getErrors('end_date')}</ValidationError>\n\n <div className=\"mt-3\">\n <Label>Location</Label>\n <textarea\n className=\"w-100\"\n placeholder=\"Event Location\"\n value={state.location}\n onChange={(event) => {\n updateState(event, 'location');\n }}\n rows={3}\n />\n </div>\n <ValidationError>{getErrors('location')}</ValidationError>\n\n <div className=\"mt-3\">\n <Label>Images</Label>\n\n {state.images.map((image, index) => (\n <div key={index} className=\"mb-4 d-flex\">\n {props.__engine.renderComponent('_form.image_component', {\n image: image,\n onChange: (changed) => {\n state.images[index] = changed;\n sanitizeAndValidate({ ...state, images: state.images });\n },\n onRemove: () => {\n const images = [...state.images];\n images.splice(index, 1);\n State.update({ images });\n sanitizeAndValidate({ ...state, images });\n },\n })}\n </div>\n ))}\n\n <button\n className=\"btn btn-secondary\"\n onClick={() => {\n const images = [...state.images];\n images.push({ type: 'tile', image: '' });\n State.update({ images });\n sanitizeAndValidate({ ...state, images });\n }}\n >\n Add Image\n </button>\n </div>\n <ValidationError>{getErrors('images')}</ValidationError>\n\n <div className=\"mt-3\">\n <Label>Links</Label>\n {state.links.map((link, index) => (\n <div key={index} className=\"mb-4\">\n <input\n type=\"text\"\n placeholder=\"Link URL\"\n className=\"mb-2\"\n style={{\n width: '100%',\n padding: '0.5rem',\n border: '1px solid #ccc',\n borderRadius: '4px',\n boxSizing: 'border-box',\n }}\n value={link.url}\n onChange={(event) => {\n const links = [...state.links];\n links[index].url = event.target.value;\n State.update({ links });\n sanitizeAndValidate({ ...state, links });\n }}\n />\n\n <div>\n <input\n type=\"text\"\n placeholder=\"Link Text\"\n style={{\n width: '200px',\n display: 'inline-block',\n boxSizing: 'border-box',\n }}\n value={link.text}\n onChange={(event) => {\n const links = [...state.links];\n links[index].text = event.target.value;\n State.update({ links });\n sanitizeAndValidate({ ...state, links });\n }}\n />\n\n <Select\n className=\"ms-2\"\n style={{ width: '100px' }}\n value={link.type}\n onChange={(event) => {\n const links = [...state.links];\n links[index].type = event.target.value;\n State.update({ links });\n sanitizeAndValidate({ ...state, links });\n }}\n >\n {LinkTypes.map((type) => (\n <option key={type.value} value={type.value}>\n {type.label}\n </option>\n ))}\n </Select>\n\n <button\n className=\"ms-2 btn btn-danger\"\n onClick={() => {\n const links = [...state.links];\n links.splice(index, 1);\n State.update({ links });\n sanitizeAndValidate({ ...state, links });\n }}\n >\n Remove\n </button>\n </div>\n </div>\n ))}\n <button\n className=\"btn btn-secondary\"\n onClick={() => {\n const links = [...state.links];\n links.push('');\n State.update({ links });\n sanitizeAndValidate({ ...state, links });\n }}\n >\n Add Link\n </button>\n </div>\n <ValidationError>{getErrors('links')}</ValidationError>\n\n <br />\n <Button\n className=\"mt-3\"\n onClick={() => {\n sanitizeValidateAndCall(state);\n }}\n >\n {buttonText}\n </Button>\n </div>\n);\n" } } } } }