From 0be69f083abbe3c500c866050bca55bf7782c0ab Mon Sep 17 00:00:00 2001 From: rishadbaniya Date: Mon, 13 Nov 2023 21:25:11 +0545 Subject: [PATCH] feat: add event(s) operations --- package-lock.json | 168 ++++++++++++++++++++++++++- package.json | 4 +- src/_everything.scss | 6 + src/dataProvider.js | 136 ++++++++++++++++++++++ src/events/EventCreate.tsx | 72 +++++++----- src/events/EventEdit.tsx | 200 ++++++++++++++++++++------------- src/events/EventList.tsx | 0 src/routines/RoutineCreate.jsx | 1 + 8 files changed, 477 insertions(+), 110 deletions(-) create mode 100644 src/_everything.scss create mode 100644 src/events/EventList.tsx diff --git a/package-lock.json b/package-lock.json index e157c3d..4f587b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@fullcalendar/timegrid": "^6.1.9", "@uiw/react-md-editor": "^3.25.4", "axios": "^1.6.1", + "date-fns": "^2.30.0", "graphql": "^16.8.1", "moment": "^2.29.4", "nanoid": "^5.0.3", @@ -23,7 +24,8 @@ "react": "^18.2.0", "react-admin": "^4.15.2", "react-dom": "^18.2.0", - "react-hook-form": "^7.48.2" + "react-hook-form": "^7.48.2", + "sass": "^1.69.5" }, "devDependencies": { "@types/react": "^18.2.15", @@ -2026,6 +2028,18 @@ "node": ">=4" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -2292,6 +2306,14 @@ "node": "*" } }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, "node_modules/bl": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", @@ -2317,6 +2339,17 @@ "concat-map": "0.0.1" } }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/broadcast-channel": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", @@ -2494,6 +2527,43 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/chownr": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", @@ -3465,6 +3535,17 @@ "node": ">= 10" } }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/filter-obj": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz", @@ -3569,7 +3650,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -4097,6 +4177,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -4233,6 +4318,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-boolean-object": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -4319,7 +4415,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -4355,7 +4450,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -4392,6 +4486,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/is-number-object": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz", @@ -5782,6 +5884,14 @@ "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", "dev": true }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/not": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/not/-/not-0.1.0.tgz", @@ -6077,6 +6187,17 @@ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -6655,6 +6776,17 @@ "node": ">= 6" } }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", @@ -7062,6 +7194,22 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sass": { + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -7296,7 +7444,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -7604,6 +7751,17 @@ "node": ">=4" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/trim-lines": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", diff --git a/package.json b/package.json index 058189d..b234009 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@fullcalendar/timegrid": "^6.1.9", "@uiw/react-md-editor": "^3.25.4", "axios": "^1.6.1", + "date-fns": "^2.30.0", "graphql": "^16.8.1", "moment": "^2.29.4", "nanoid": "^5.0.3", @@ -25,7 +26,8 @@ "react": "^18.2.0", "react-admin": "^4.15.2", "react-dom": "^18.2.0", - "react-hook-form": "^7.48.2" + "react-hook-form": "^7.48.2", + "sass": "^1.69.5" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/src/_everything.scss b/src/_everything.scss new file mode 100644 index 0000000..4a65eff --- /dev/null +++ b/src/_everything.scss @@ -0,0 +1,6 @@ +@use "@react-md/theme/dist/color-palette" as *; + +@forward "react-md" with ( + $rmd-theme-primary: $rmd-teal-500, + $rmd-theme-secondary: $rmd-deep-orange-a-400 +); diff --git a/src/dataProvider.js b/src/dataProvider.js index 01b03d4..b0fce81 100644 --- a/src/dataProvider.js +++ b/src/dataProvider.js @@ -131,6 +131,55 @@ const myBuildQuery = (fetchType, resource, params) => { }; }, }; + case "Event": + const create_event = gql` + mutation createEvent( + $date: String!, + $title: String!, + $location: String!, + $categories: [String!]!, + $description: String!, + $isDraft: Boolean!, + ) { + event { + createEvent(inputEvent: { + date: $date, + title: $title, + location: $location, + categories: $categories, + description: $description, + isDraft: $isDraft, + }){ + id + date + title + location + categories + noOfRegistrants + registrants + description + isDraft + } + } + }`; + return { + query: create_event, + variables: { + title: data.title, + location: data.location, + categories: data.categories, + description: data.description, + date: data.date, + isDraft: data.isDraft + }, + parseResponse: response => { + return { + data: { + ...response.data.event.createEvent + }, + }; + }, + }; } } else if (fetchType === 'GET_LIST') { @@ -175,6 +224,7 @@ const myBuildQuery = (fetchType, resource, params) => { categories noOfRegistrants description + isDraft } } } @@ -298,6 +348,36 @@ const myBuildQuery = (fetchType, resource, params) => { }; }, }; + case "Event": + const get_one_event = gql` + query getEvent($id: String!) { + event{ + Event( + id : $id, + ){ + id + date + title + location + categories + noOfRegistrants + registrants + description + } + } + } + `; + return { + query: get_one_event, + variables: { + id: params.id, + }, + parseResponse: response => { + return { + data: response.data.event.Event, + }; + }, + }; } } else if (fetchType === 'UPDATE') { let data = params.data; @@ -437,6 +517,62 @@ const myBuildQuery = (fetchType, resource, params) => { }; }, }; + case "Event": + const update_event = gql` + mutation updateEvent( + $id : String!, + $date: String!, + $title: String!, + $location: String!, + $categories: [String!]!, + $description: String!, + $isDraft: Boolean!, + ){ + event { + updateEvent( + id : $id + updatedEvent: { + date : $date, + title : $title, + location : $location, + description : $description, + categories : $categories + isDraft : $isDraft, + }){ + id + date + title + location + categories + noOfRegistrants + description + isDraft + } + } + } + `; + + return { + query: update_event, + variables: { + id: params.id, + title: data.title, + location: data.location, + categories: data.categories, + description: data.description, + date: data.date, + isDraft: data.isDraft + }, + parseResponse: response => { + console.log(data); + console.log(response); + return { + data: { + ...response.data.event.updateEvent + } + }; + }, + }; } } else if (fetchType === 'DELETE') { diff --git a/src/events/EventCreate.tsx b/src/events/EventCreate.tsx index e9ff62e..6fc0c35 100644 --- a/src/events/EventCreate.tsx +++ b/src/events/EventCreate.tsx @@ -8,27 +8,56 @@ import { SimpleFormIterator, BooleanInput, Create, + useInput } from 'react-admin'; import {Box, Typography} from '@mui/material'; -import Chip from '@mui/material/Chip'; import MDEditor from '@uiw/react-md-editor'; +import {format} from 'date-fns' +const DATE_FORMAT = "yyyy:MM:dd'T'HH:mm:ss" + +const transformEventSubmissionData = (data: any) => { + data.categories = data.categories.map((d: any) => d.category); + data.date = format(data.date, DATE_FORMAT); + return data; +} const EventCreate = () => { - const transformData = (data: any) => { - data.categories = data.categories.map((d: any) => d.category); - } - return + + return } - const EventCreateForm = () => { - let registrants = []; + const validateEventCreation = (values: any) => { + console.log(values); + const errors = {}; + + if (!values.title) { + errors["title"] = "Missing title"; + } + + if (!values.location) { + errors["location"] = "Missing location"; + } + + if (!values.categories || Object.entries(values.categories).length === 0) { + errors["categories"] = "Missing categories"; + } + + if (!values.description || values.length === 0) { + errors["description"] = "Missing description"; + } + + if (!values.date) { + errors["date"] = "Missing Date and Time"; + } + + return errors; + }; - console.log(registrants); return - + { - - - - {registrants.map((d, i) => { - return - - - })} - - {registrants.length} registrants - + } -const MarkdownDescription = () => { - const [value, setValue] = React.useState("## About Event"); +const MarkdownDescription = ({source}) => { + const {field} = useInput({source}); + const editorStyle = { width: "100%", height: "700px", - backgroundColor: "#f0f0f0", // Set your desired background color here }; const onValueChange = (e: any) => { - setValue(e); + field.onChange(e) } - return (
- + return (
+
) } +export {DATE_FORMAT, transformEventSubmissionData} export default EventCreate; diff --git a/src/events/EventEdit.tsx b/src/events/EventEdit.tsx index 6f6d123..3003d70 100644 --- a/src/events/EventEdit.tsx +++ b/src/events/EventEdit.tsx @@ -1,114 +1,158 @@ import * as React from 'react'; import { BooleanInput, - DateField, Edit, - Form, - Labeled, - PrevNextButtons, - ReferenceField, - SelectInput, - TextField, - Toolbar, - useRecordContext, - useTranslate, + useInput, TabbedForm, TextInput, DateTimeInput, - ChipField, ArrayInput, SimpleFormIterator, - SingleFieldList, - NumberInput + RecordContext, } from 'react-admin'; import {Box, Typography} from '@mui/material'; +import MDEditor from '@uiw/react-md-editor'; +import {parse} from 'date-fns' import Chip from '@mui/material/Chip'; +import {DATE_FORMAT, transformEventSubmissionData} from './EventCreate'; const EventEdit = () => { - return Flsajfasljfsaljf
}> + return } const EventEditForm = () => { - const record = useRecordContext(); - let registrants = record["registrants"]; - - console.log(registrants); - return - - - - - - - Title - + const validateEventEdit = (values: any) => { + console.log(values); + const errors = {}; + + if (!values.title) { + errors["title"] = "Missing title"; + } + + if (!values.location) { + errors["location"] = "Missing location"; + } + + if (!values.categories || Object.entries(values.categories).length === 0) { + errors["categories"] = "Missing categories"; + } + + if (!values.description || values.length === 0) { + errors["description"] = "Missing description"; + } + + if (!values.date) { + errors["date"] = "Missing Date and Time"; + } + + return errors; + }; + + const transformInputData = (input_data: any) => { + let transformed_input_data = {...input_data}; + transformed_input_data.categories = transformed_input_data.categories.map((d: string) => { + console.log(d); + return { + category: d + }; + }); + + console.log(transformed_input_data); + transformed_input_data.date = parse(transformed_input_data.date, DATE_FORMAT, new Date()); + console.log(transformed_input_data.date); + return transformed_input_data; + } + + return + + {value => { + let transormed_input_data = transformInputData(value); + let registrants = transormed_input_data.registrants ? transormed_input_data.registrants : []; + return + + - - - - - Date and Time - - - - - - Location - - + - - - - - - Categories - - - - - - + + + + + + + Date and Time + + + - - - - - - - - - {registrants.map((d: any, i: number) => { - return - + + + + + Categories + + + + + + + - })} - - - {registrants.length} registrants - - - - + + + + + + + {registrants.map((d: any, i: number) => { + return + + + })} + + Total Registrants: {registrants.length} + + + + } + } + } + + +const MarkdownDescription = ({source}) => { + const {field} = useInput({source}); + + const editorStyle = { + width: "100%", + height: "700px", + }; + const onValueChange = (e: any) => { + field.onChange(e) + } + + return (
+ +
) +} + + export default EventEdit; diff --git a/src/events/EventList.tsx b/src/events/EventList.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/routines/RoutineCreate.jsx b/src/routines/RoutineCreate.jsx index 623465e..6e6d133 100644 --- a/src/routines/RoutineCreate.jsx +++ b/src/routines/RoutineCreate.jsx @@ -7,6 +7,7 @@ import { } from 'react-admin'; import {Box, Typography} from '@mui/material'; import Schedule from './Schedule'; +import {format} from 'date-fns' const RoutineCreate = () => {