We're starting to really pick up some speed on our application.
I like it let's keep rolling through.
We now have the ability to navigate over the two this simply form which means we can finally start focusing
on having some real functionality to our app by giving users the ability to create employees.
All right.
So before we start work on the farm itself I want make sure that we're on the same page as to what this
forum needs to do.
Exactly.
So when employees created where they're going to have three properties assigned to them a name a phone
number and a shift time or shift days.
Really what is the shift they will be the day of the week that they are scheduled to work.
So for the phone number and the name the first two entries here we can definitely reuse the input component
that we've already created previously the reusable component.
On the other hand for the shift where they have to pick a day of the week we're probably going to want
to make sure that we display the choices for them and they should only be able to use or should only
be able to pick from one of these existing options on here.
So Monday Tuesday Wednesday you get the idea after the user enters all this stuff we should validate
their inputs in some fashion.
So you make sure they actually entered a value for each one of these and then it's Add a button on to
submit it all.
Now we did something really similar with a log in form.
So we're going to make sure you know of course that we're absolutely concrete and understanding on how
to put a form together.
So this is going to be another exercise in form generation and form validation.
We'll make sure that the component or we'll make the components.
We're going to wire them up to some action creators make a reduce or to hold all the values in the forms
and then make an action crater to actually save the form.
Now there is one twist in here that I really want to add in that I really want to add one more twist
on all the boxes shown you so far tonight.
I know this is a horrible example right here.
Maybe I've got a better one blah blah.
I guess I'll have to do all the mocks passionately before it kind of showed this form as having like
editing capability is right like a save button a fire button text button to text that employee.
But now I'm claiming that we're going to have a form that is solely made for creating an employee and
not really kind of viewing one or editing one.
So if we're going to make a edit form or kind of like a show form to show an existing record and a creative
form maybe it would be a waste of time to make two separate forms.
Right.
Maybe we should make just one form and reuse it for both the Create and the edit as well.
So for now we're going to focus on just the Create aspect to the form.
But I want you to keep that thought in mind or I want you to remember that that maybe recreating this
form for both create and edit doesn't make a lot of sense.
But anyways we're going to concentrate on just create right now.
So let's get started for the form itself.
You probably got a good idea of what we need to do.
We're going to import some of our reusable components put on some labels some card sections some inputs
just get a form on the page.
It's going look very similar to the log in form to start.
So we're going to breeze right through it first.
We do not need the re-act need of import any more.
We're gonna replace it with all of our own custom components.
It's going to take those out.
I'll pull in my card card section input and button from common and then inside of the employee create
component replace it with a card and a couple of card sections.
So I'm going to copy paste the card section down.
I'm going to skip the worrying about the picker right now hours selecting the date because I definitely
want a new custom component in there.
So right now I'm not going to worry about it.
We're going to come back to it in a future section.
So in the first card section I'll place my first input which is going to be responsible for getting
the employee's name and I'll give it a placeholder.
Jane then for the second and put this one is going to be responsible for collecting the phone number
given the label of just a phone and a placeholder.
555
looks good.
Again the third card section is give me that picture.
I'm going to ignore it right now.
So the last thing I need to do is place a button inside of the last card section.
So place my button and I want to say something like save all we can do to create now.
Yes create.
Let's go to create.
Why not.
OK.
I'm sure this all works good.
So I'm oh I will refresh the simulator just to make sure I don't have a compilation error or anything
like that any typos but I'm going to skip the process of actually logging in and checking it out.
OK.
So a good place to start with our form.
Let's continue in the next section by starting to wire up our action creators our reducers all that
kind of good stuff.