Create New Event dialog

[mariuskricena]

Implement “New Event” dialog component

Mock spec --> https://www.figma.com/file/bDQlhwU2IDZmM9PbDjA84O/Untitled?node-id=0%3A1

Create a separate component to be used as a “New Event dialog” inside of the AnimalEvents component (src/components/animal/events/AnimalEvents.tsx). The component mock is specified above the spec.

Component form fields are specified below:

• Tipas (Type) → selector with list of possible options with default initial option specified in TypeOptions part of this spec.
• Kategorija (Category) → selector with list of possible options and default initial option specified in CategoryOptions part of this spec.
• Islaidos (Expenses) → input, that takes floating point number as value
• Komentarai (Comments) → input that takes free text.
• DateTime - date time component

Please take advantage of material ui component library and reuse dialog and input components from this library. Also please check AnimalFilters component as an example of how material-ui components like dialog can be used (in this example dialog component is not created as separate, however for this task we need to create a standalone dialog component).

This New Event dialog component should take onCancel and onCreate callbacks as props and use them to communicate back to consumer component.

Since we are not using graphQL yet in this workshop, we need to create some mocks for Event type, created by this new NewEvent dialog component. When passing result to onCreate callback, we should mock Event type object property id (just hardcode this prop to be ‘123456’ when creating).

To summarise, this component should take onCancel and onCreate callbacks, allow user to input necessary input, after clicking create button it should create NewEvent object and pass it to onCreate callback, or if user clicks cancel, it should discard all entered info and use onCancel callback.

STEPS FOR WORKSHOP:
We suggest to implement this task in steps as specified below:

• Create a blank dialog component that only renders “Hello” as form content. Embed this component inside the AnimalEvents component.
• Add Create and Cancel buttons that shows alerts on interaction.
• Hide dialog and implement AnimalEvents component Create Event button on click functionality (add interaction to button here → src/components/animal/events/AnimalEvents.tsx:68), so that dialog appears on click of this button.
• Add all input components (use material ui functionality, ask mentors for guidance on what component to use)
• for “Type” field options, create a static list in AnimalEvents component, pass it to this component via props, with values as specified in TypeOptions
• For “Category” field options, create a static list in AnimalEvents component, pass it to this component via props, with values as specified in Category
• Add on interaction event handlers to input component to track changes.
• Add support to receive onCancel and onCreate callbacks from dialog component consumer (parent).
• Implement Create button functionality
  -- Creates Event type object (we are not yet using graphQL and actual data fetching/mutating, so we will mock id property when creating this object)
  -- Pass this object to onCreate callback
• Call onCancel callback when clicking Cancel button
• Implement onCancel callback (this should only pass showDialog=false prop, that should hide the dialog) in AnimalEvents and pass it to our new dialog component.
• Implement basic validation functions to validate all input fields (check if not empty and expenses is a valid float number) and use it to validate inputs before passing NewEvent object to onCreate.
• Implement onCreate callback (this should push newly created Event type object to filteredEvents array) in AnimalEvents and pass it to our new dialog component.

TypeOptions = [
"Ženklinimas ir įregistravimas",
"Laikytojo pasikeitimas",
"Laikymo vietos pasikeitimas",
"Savininko pasikeitimas",
"Dingimas",
"Suradimas",
"Nugaišimas",
"Nugaišinimas",
"Išvežimas",
"Vakcinavimas",
"Augintinio agresyvumas"
]

Category = [
“General”,
“Medical”
]