1
00:00:00,050 --> 00:00:00,380
All right.

2
00:00:00,380 --> 00:00:04,430
And once we can access the specific job, now let's set up the form.

3
00:00:04,430 --> 00:00:06,890
So essentially, let's work on the return.

4
00:00:06,890 --> 00:00:09,520
For starters, it's not going to be a heading one.

5
00:00:09,530 --> 00:00:11,540
We're going to go here with the wrapper.

6
00:00:11,690 --> 00:00:13,940
Then we'll place the form.

7
00:00:14,330 --> 00:00:17,360
So let me remove all of this text we're looking for.

8
00:00:17,390 --> 00:00:19,760
Form method will be post.

9
00:00:20,060 --> 00:00:25,580
So again, instead of creating a job now we'll just send a patch request.

10
00:00:25,580 --> 00:00:28,130
So class name will be form as well.

11
00:00:29,450 --> 00:00:33,890
Then inside of this particular component I want to start with heading for.

12
00:00:34,850 --> 00:00:37,860
Or the class that will be formed.

13
00:00:37,880 --> 00:00:38,420
Title.

14
00:00:39,440 --> 00:00:41,990
And then let's set up edit job.

15
00:00:42,080 --> 00:00:46,490
Then let's go with the div and let's add a class of form center.

16
00:00:46,490 --> 00:00:49,360
And one by one let's set up those form rows.

17
00:00:49,370 --> 00:00:52,480
So first one will be position.

18
00:00:52,490 --> 00:00:56,720
So form row, then type will be equal to text.

19
00:00:58,010 --> 00:01:00,500
As far as the name will go with position.

20
00:01:00,500 --> 00:01:02,000
So this is very, very important.

21
00:01:02,000 --> 00:01:04,250
Please keep the same syntax.

22
00:01:04,250 --> 00:01:09,830
We still need to use a name and yes, it still needs to be positioned because when we make a request,

23
00:01:09,860 --> 00:01:14,420
this is what we're going to be sending back to the server and as far as the default value.

24
00:01:14,980 --> 00:01:16,930
We're not going to hardcode this.

25
00:01:16,960 --> 00:01:23,110
Actually, this will be equal to job and then position because again, keep in mind when it comes to

26
00:01:23,110 --> 00:01:27,030
edit functionality, I want to reuse the existing values.

27
00:01:27,040 --> 00:01:32,650
And then of course, once I update them, make a request, then of course we'll update that on the server

28
00:01:32,650 --> 00:01:33,080
as well.

29
00:01:33,100 --> 00:01:34,330
Hopefully that is clear.

30
00:01:34,600 --> 00:01:36,670
Let me copy and paste in here.

31
00:01:36,670 --> 00:01:44,320
We're looking for company and instead of job position we're going to go with job company.

32
00:01:44,680 --> 00:01:47,950
After that, we have one for job location.

33
00:01:47,950 --> 00:01:51,460
So pretty much same deal type is equal to text.

34
00:01:51,580 --> 00:01:55,780
The name is equal to job location.

35
00:01:56,970 --> 00:01:57,690
Of course, in here.

36
00:01:57,690 --> 00:01:59,280
We also want to fix this.

37
00:01:59,820 --> 00:02:04,240
And this is going to be the case where we also want to add the label text.

38
00:02:04,260 --> 00:02:11,100
So right next to the name, I'm going to go with label text and I'll set it equal to job location.

39
00:02:11,130 --> 00:02:18,900
Then we have to form row select where we'll still iterate over the job status and job type.

40
00:02:18,900 --> 00:02:25,170
But you can probably already guess that when it comes to default value, we'll use the values from the

41
00:02:25,170 --> 00:02:25,890
job.

42
00:02:26,470 --> 00:02:29,920
So let's navigate here right after the form row.

43
00:02:29,950 --> 00:02:32,020
We want to go with Form row Select.

44
00:02:32,770 --> 00:02:35,860
Name will be equal to job status.

45
00:02:36,690 --> 00:02:38,220
Then label text.

46
00:02:38,880 --> 00:02:40,740
We'll set it as job status.

47
00:02:41,760 --> 00:02:49,470
In here, the default value will be equal to job dot and then job status.

48
00:02:50,440 --> 00:02:55,360
And after that, remember, we want to set up the list and therefore we're going to go with object dot

49
00:02:55,360 --> 00:02:58,900
values and we'll pass in the job status.

50
00:02:58,900 --> 00:03:00,960
So the options are the same.

51
00:03:00,970 --> 00:03:04,810
The only thing that's changing is actually the default value.

52
00:03:04,840 --> 00:03:06,580
Then let's close this one.

53
00:03:07,320 --> 00:03:08,910
Copy and paste.

54
00:03:09,700 --> 00:03:12,280
And then let's go here with job type.

55
00:03:13,300 --> 00:03:16,570
Then the label text is going to be also job type.

56
00:03:18,490 --> 00:03:21,160
Default value job type.

57
00:03:21,310 --> 00:03:26,260
And as far as what we're passing in the object value as well, same deal.

58
00:03:26,350 --> 00:03:32,800
We're going to go here with job type and then still within this div, we want to set up the submit button.

59
00:03:32,890 --> 00:03:33,910
And you know what?

60
00:03:33,940 --> 00:03:37,270
We also want to navigate up, pretty much set up that.

61
00:03:38,110 --> 00:03:39,100
Is submitting.

62
00:03:39,100 --> 00:03:42,160
So we're looking for the navigation.

63
00:03:43,040 --> 00:03:45,910
That is equal to use navigation.

64
00:03:45,920 --> 00:03:53,930
Let's invoke that and then we're going to go with const is submitting and we'll set it equal to navigation

65
00:03:53,930 --> 00:03:57,730
dot state equals to submitting.

66
00:03:57,740 --> 00:04:00,590
Then let's scroll down and let's set up that button.

67
00:04:00,860 --> 00:04:03,740
So we're looking for the button element.

68
00:04:05,000 --> 00:04:09,080
Then we want to add type equals to submit.

69
00:04:09,620 --> 00:04:17,060
After that, let's add some classes BTN, BTN hyphen block and then form hyphen btn.

70
00:04:18,149 --> 00:04:20,130
Let's add the disabled attribute.

71
00:04:20,130 --> 00:04:24,290
So we're looking for disabled and we'll set it equal to is submitting.

72
00:04:24,300 --> 00:04:30,030
And then when it comes to the text we're going to go with is submitting.

73
00:04:30,890 --> 00:04:33,950
We're going to set up ternary operator in here.

74
00:04:33,950 --> 00:04:36,440
Let's write submitting dot, dot, dot.

75
00:04:36,440 --> 00:04:43,200
And then if the is submitting is not true, then we'll just simply say submit.

76
00:04:43,220 --> 00:04:45,620
So let's navigate here again.

77
00:04:45,620 --> 00:04:49,730
Pick any job you have in the all Jobs page.

78
00:04:49,730 --> 00:04:51,500
Click on edit and notice.

79
00:04:51,530 --> 00:04:53,990
Basically we'll get these values over here.

80
00:04:53,990 --> 00:04:56,630
Now it looks like I have a tiny typo over here.

81
00:04:57,680 --> 00:05:00,290
Of course, I didn't place this one inside of the button.

82
00:05:00,530 --> 00:05:03,020
So let me set it correctly.

83
00:05:03,020 --> 00:05:05,300
And now, of course, I have these values.

84
00:05:05,300 --> 00:05:10,730
Now, if I'm going to go back and take a look at this job now, of course, the values are going to

85
00:05:10,730 --> 00:05:11,580
be different.

86
00:05:11,600 --> 00:05:15,770
And with this in place, we can start working on the action functionality.