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

2
00:00:00,410 --> 00:00:02,960
And up next, let's set up the pagination.

3
00:00:03,140 --> 00:00:08,480
Now, even though there's not that much code, it's quite complex topic.

4
00:00:08,480 --> 00:00:11,550
And therefore, I'll do everything step by step.

5
00:00:11,570 --> 00:00:16,219
So for starters, let's see how we can get all of the jobs we're returning.

6
00:00:16,219 --> 00:00:20,570
And if you're wondering where we're going to use that on the front end notice over here.

7
00:00:20,570 --> 00:00:27,710
So yes, we'll display only ten jobs per page, but notice we can clearly see that total.

8
00:00:27,710 --> 00:00:30,800
There are 75 jobs in this example.

9
00:00:30,920 --> 00:00:34,790
And the way we do that, we go here with some kind of variable.

10
00:00:35,510 --> 00:00:36,040
My case.

11
00:00:36,040 --> 00:00:38,770
I'm going to call this total jobs.

12
00:00:38,860 --> 00:00:45,310
And we want to go with Await, then Job and then count documents.

13
00:00:45,310 --> 00:00:51,890
And in here we want to provide the query object and as a result, we'll get back total jobs.

14
00:00:51,910 --> 00:00:59,050
Now, I will place this one before jobs since it's going to be easier to see in the Thunder client.

15
00:00:59,080 --> 00:01:03,400
So let me go to my Json and I'll say total jobs and then comma.

16
00:01:03,760 --> 00:01:10,960
Now let's navigate back over here and I think I'm going to stick with some kind of search query because

17
00:01:10,960 --> 00:01:17,500
in my opinion, it's going to be easier to showcase the skip and limit something we're going to cover

18
00:01:17,500 --> 00:01:20,710
in a second with less amount of jobs.

19
00:01:20,710 --> 00:01:29,650
So if I go back to empty search term, I'm going to get back 19, which basically matches the job status

20
00:01:29,680 --> 00:01:32,110
as well as the job type.

21
00:01:32,110 --> 00:01:37,100
And this is definitely something that we can use when we set up the pagination.

22
00:01:37,100 --> 00:01:44,660
But for now, when we're just discussing Skip and Limit, I'm going to provide the search as as because

23
00:01:44,660 --> 00:01:48,410
then I'm going to get back three jobs and effectively.

24
00:01:48,960 --> 00:01:55,110
Just like sort we can chain skip method and limit method.

25
00:01:55,140 --> 00:02:00,990
Now, as far as the limit, it just limits the amount of jobs we're returning.

26
00:02:00,990 --> 00:02:04,800
But again, it's not going to change the total jobs.

27
00:02:04,800 --> 00:02:07,160
And this is super, super important.

28
00:02:07,170 --> 00:02:15,150
So let's navigate back to job controller and where we have over here the job find basically where we're

29
00:02:15,150 --> 00:02:18,480
looking for all of the jobs right after sort.

30
00:02:18,510 --> 00:02:21,940
I'll also say limit and it's pretty straightforward.

31
00:02:21,960 --> 00:02:24,800
Essentially we just provide some kind of number value.

32
00:02:24,810 --> 00:02:27,930
So at the moment I have three jobs, correct.

33
00:02:27,930 --> 00:02:34,980
So let's just provide a value of one to a limit and let's see what we're going to get back and let's

34
00:02:34,980 --> 00:02:36,990
focus on the company value.

35
00:02:36,990 --> 00:02:38,220
I think it's going to be easier.

36
00:02:38,220 --> 00:02:40,260
So the second one over here is the flash dog.

37
00:02:40,260 --> 00:02:44,070
And then I have something starting with S as my first job.

38
00:02:44,070 --> 00:02:45,720
So let me go with Limit.

39
00:02:45,750 --> 00:02:49,060
Let's provide one and let's make the same request.

40
00:02:49,060 --> 00:02:52,990
So notice we're not changing anything in the Thunder client.

41
00:02:52,990 --> 00:02:55,510
And now of course I only have one company.

42
00:02:55,510 --> 00:03:00,220
But again, total jobs is three super, super important.

43
00:03:00,220 --> 00:03:03,610
So we didn't change the amount of total jobs.

44
00:03:03,640 --> 00:03:10,510
When it comes to total jobs, we're changing by providing different values to job status, the search,

45
00:03:10,510 --> 00:03:11,920
job type and all that.

46
00:03:12,190 --> 00:03:15,500
But not when we're changing the limit.

47
00:03:15,520 --> 00:03:17,020
This is just a response.

48
00:03:17,020 --> 00:03:20,170
So in our response, we're returning only one.

49
00:03:20,200 --> 00:03:24,160
Now, if I'm going to change this and let's say set it equal to two.

50
00:03:24,320 --> 00:03:28,020
You can probably already guess that we'll get back these two job values.

51
00:03:28,030 --> 00:03:36,310
And there's also a skip where effectively we can just skip the jobs in our response.

52
00:03:36,310 --> 00:03:41,080
So again, please focus on the company value since it's going to be.

53
00:03:41,880 --> 00:03:46,980
Easier to understand if we provide, for example, skip of one.

54
00:03:47,220 --> 00:03:54,720
I'm going to get back still those two jobs since my limit is two, but we'll skip the first job in our

55
00:03:54,720 --> 00:03:55,260
array.

56
00:03:55,940 --> 00:03:57,290
How was that going to look like?

57
00:03:57,290 --> 00:03:59,120
Well, let's go over here.

58
00:03:59,150 --> 00:04:00,620
Dot, Skip.

59
00:04:00,620 --> 00:04:02,900
And like I said, for now, let's just skip one.

60
00:04:03,560 --> 00:04:04,880
Let's navigate back.

61
00:04:05,000 --> 00:04:07,150
Let's send it and check it out.

62
00:04:07,160 --> 00:04:13,040
Now I have the second and the third job in my original array.

63
00:04:13,070 --> 00:04:14,720
Hopefully that is clear.

64
00:04:14,720 --> 00:04:21,829
So now we want to set up some functionality where of course we're going to calculate these both values

65
00:04:21,829 --> 00:04:23,630
based on something.

66
00:04:23,630 --> 00:04:27,830
So for now, let's just remove we're not going to set anything here.

67
00:04:27,830 --> 00:04:29,330
We'll leave both of them empty.

68
00:04:29,330 --> 00:04:34,340
And yes, basically in my case, I'm going to do it right after the sort key and all that.

69
00:04:34,490 --> 00:04:38,510
Let me add here first a comment I'll say set up.

70
00:04:39,860 --> 00:04:40,850
Pagination.

71
00:04:41,820 --> 00:04:45,450
And then for starters, let's create a page variable.

72
00:04:45,660 --> 00:04:50,130
And remember, when it comes to the query parameters, they are going to be strings.

73
00:04:50,130 --> 00:04:56,040
But since we want to do the math operation, I want to right away turn it into a number and therefore

74
00:04:56,040 --> 00:04:57,240
I'm going to go with number.

75
00:04:57,270 --> 00:04:59,220
Again, this is straight up JavaScript.

76
00:04:59,250 --> 00:05:05,970
Then we're going to go with rec, dot, query and page, which of course eventually will provide in

77
00:05:05,970 --> 00:05:06,880
our request.

78
00:05:06,900 --> 00:05:10,210
So I'm expecting that the value is going to be there.

79
00:05:10,230 --> 00:05:12,630
If it's not there, I'm going to go with one.

80
00:05:12,750 --> 00:05:16,500
So by default, we'll always look for the first page.

81
00:05:16,530 --> 00:05:19,110
Then second one is going to be the limit.

82
00:05:19,230 --> 00:05:24,570
And even though I will look for the limit in the rec dot query, please keep in mind that in this project

83
00:05:24,570 --> 00:05:26,220
we're not going to utilize it.

84
00:05:26,220 --> 00:05:29,910
So it's always going to default to whatever value I'm going to use.

85
00:05:29,910 --> 00:05:31,920
So in my case, that is going to be ten.

86
00:05:31,950 --> 00:05:34,530
Now this is a nice challenge that you can set it up.

87
00:05:34,560 --> 00:05:41,770
You'll have all of the backend logic in place in a second and the only thing you need to change of course,

88
00:05:41,770 --> 00:05:46,210
is the front end where you'll need to implement that limit option.

89
00:05:46,210 --> 00:05:48,120
So in here, let's go with limit.

90
00:05:48,130 --> 00:05:49,810
Again, we're going to go with number.

91
00:05:49,900 --> 00:05:55,480
But like I just said during the project, from the front end, we're not going to pass it.

92
00:05:55,480 --> 00:05:57,820
So it will always, always.

93
00:05:58,460 --> 00:06:00,140
Default back to ten.

94
00:06:00,410 --> 00:06:03,480
So by default, page is going to be one.

95
00:06:03,500 --> 00:06:06,130
And yes, we will change these page values.

96
00:06:06,140 --> 00:06:11,170
And when it comes to limit, we'll always have ten jobs per page.

97
00:06:11,180 --> 00:06:13,520
And here comes the main logic.

98
00:06:13,760 --> 00:06:15,410
We'll go with const.

99
00:06:15,410 --> 00:06:23,030
And in this case I'm going to call this Skip and then we'll go with page minus one times the limit.

100
00:06:23,450 --> 00:06:26,180
So let me kind of explain how everything works.

101
00:06:26,510 --> 00:06:30,560
Let's imagine that you're requesting the first page.

102
00:06:31,380 --> 00:06:32,880
What is going to be the value?

103
00:06:32,910 --> 00:06:34,290
Well, it's going to be one over here.

104
00:06:34,290 --> 00:06:34,800
Right.

105
00:06:34,800 --> 00:06:37,560
And then as far as the limit, we're going to go with ten.

106
00:06:37,740 --> 00:06:45,240
So for the first page, we're going to go with one minus one, which is zero times limit is what?

107
00:06:46,000 --> 00:06:47,350
That is zero.

108
00:06:47,380 --> 00:06:47,980
Correct.

109
00:06:48,130 --> 00:06:51,760
So as a result, we'll skip zero jobs.

110
00:06:52,670 --> 00:06:54,710
But we still have a limit of ten.

111
00:06:55,010 --> 00:06:55,490
Correct.

112
00:06:55,490 --> 00:06:58,790
So we will only return ten jobs.

113
00:06:59,030 --> 00:07:02,560
Now for the second page, what is the value of the page?

114
00:07:02,570 --> 00:07:07,310
Well, two, two minus one is what one.

115
00:07:07,460 --> 00:07:14,750
Multiply that by ten our limit and we will be skipping those first ten jobs, the ones that we showcase

116
00:07:14,750 --> 00:07:16,250
in the first page.

117
00:07:16,250 --> 00:07:21,260
And then of course, the same is for page three, four and however many pages you have.

118
00:07:21,290 --> 00:07:22,730
So hopefully that is clear.

119
00:07:22,730 --> 00:07:26,720
And of course we'll test it out here in the Thunder client as well.

120
00:07:26,720 --> 00:07:33,290
So now we just want to navigate where we have the jobs and basically I'll provide here, Skip, I'll

121
00:07:33,290 --> 00:07:35,600
provide here a limit.

122
00:07:35,600 --> 00:07:38,930
So those are the variables we want to use.

123
00:07:39,110 --> 00:07:45,050
And also right after the total jobs we want to return, Well, how many pages?

124
00:07:45,050 --> 00:07:48,530
So not only the jobs, but also how many pages we have.

125
00:07:48,530 --> 00:07:53,520
And we'll use those page values to construct our buttons on the front end.

126
00:07:53,910 --> 00:07:59,460
And the way we'll calculate that, first of all, we'll go with num of pages.

127
00:08:00,180 --> 00:08:05,190
We'll set it equal to math dot ceiling because I always want to round up.

128
00:08:05,220 --> 00:08:11,170
So imagine you have 89 jobs, you limit ten jobs per page.

129
00:08:11,190 --> 00:08:13,350
How many pages are you going to have?

130
00:08:13,500 --> 00:08:16,980
8.9 or you're going to have nine pages.

131
00:08:16,980 --> 00:08:20,100
So you'll have eight pages with ten jobs.

132
00:08:20,100 --> 00:08:21,660
And then the last one.

133
00:08:21,960 --> 00:08:26,610
Well, that one is going to have only nine jobs and therefore we're going to go with math dot ceiling.

134
00:08:26,610 --> 00:08:33,630
So we always round up and we'll divide total jobs by the limit.

135
00:08:33,630 --> 00:08:35,850
So how many jobs per page?

136
00:08:35,850 --> 00:08:37,650
So now let's save this.

137
00:08:37,679 --> 00:08:38,700
Or you know what?

138
00:08:38,820 --> 00:08:42,020
Actually, before we save, we want to send back this as well.

139
00:08:42,030 --> 00:08:44,880
So we're going to go with num of pages.

140
00:08:45,090 --> 00:08:53,610
That's the value we want to send back as well as the current page, and we'll set it equal to our page

141
00:08:53,610 --> 00:08:54,180
value.

142
00:08:54,330 --> 00:08:59,040
So whatever it is, again in a second we'll pass it from the Thunder client.

143
00:08:59,040 --> 00:09:04,000
But if it's not present, it's always going to be equal to one.

144
00:09:04,480 --> 00:09:05,260
Okay, good.

145
00:09:05,290 --> 00:09:07,480
Now let's navigate back to all jobs.

146
00:09:07,480 --> 00:09:13,060
Now, since I have a limit of ten, since I'm displaying ten jobs per page, of course I want to come

147
00:09:13,060 --> 00:09:19,030
up with some total jobs value, which is bigger than ten, and I believe this one was the case.

148
00:09:19,030 --> 00:09:20,410
So let's go over here.

149
00:09:20,920 --> 00:09:21,970
Let's send it.

150
00:09:21,970 --> 00:09:24,910
And it says match here is not defined because I.

151
00:09:24,910 --> 00:09:26,590
Yeah, it's not match.

152
00:09:26,890 --> 00:09:28,660
Sorry, it's math.

153
00:09:29,170 --> 00:09:30,310
Let me navigate back.

154
00:09:30,310 --> 00:09:31,360
Let me send it.

155
00:09:31,450 --> 00:09:31,810
Okay.

156
00:09:31,810 --> 00:09:32,410
Awesome.

157
00:09:32,410 --> 00:09:34,840
So I have total jobs.

158
00:09:34,870 --> 00:09:38,830
Notice how we nicely calculate number of pages.

159
00:09:38,860 --> 00:09:44,560
It is two because 19 divided by what the limit is.

160
00:09:44,560 --> 00:09:45,370
Ten correct.

161
00:09:45,370 --> 00:09:46,720
Again, we're rounding it up.

162
00:09:46,720 --> 00:09:53,110
So essentially we have two pages in the first page we'll have ten jobs and the second one will have

163
00:09:53,110 --> 00:09:53,860
nine.

164
00:09:53,890 --> 00:09:56,800
Now let me look for something that's less.

165
00:09:56,800 --> 00:10:01,360
Basically, I want to get, I don't know, in a second page, just few jobs.

166
00:10:01,360 --> 00:10:03,820
I don't want to count nine jobs because I want to showcase that.

167
00:10:03,820 --> 00:10:08,470
Of course, in the second page we'll have the remaining jobs.

168
00:10:08,470 --> 00:10:10,990
So in here in a search value, I'm going to go with E!

169
00:10:11,020 --> 00:10:11,770
Let's send it.

170
00:10:11,770 --> 00:10:14,770
Now, notice we have 16 over here.

171
00:10:14,770 --> 00:10:21,520
And then if I go to parameter and if I'm going to go with page number two, guess what?

172
00:10:21,550 --> 00:10:26,410
Now the value actually is going to be six as far as jobs in my page.

173
00:10:26,410 --> 00:10:29,170
So again, total jobs is 16.

174
00:10:29,200 --> 00:10:34,780
In the first page, I'm not going to count, but I can guarantee you that there's going to be ten jobs

175
00:10:34,780 --> 00:10:36,850
since my limit is equal to ten.

176
00:10:36,850 --> 00:10:44,590
And then when it comes to the second page, notice one, two, three, four, five and six.

177
00:10:44,740 --> 00:10:46,930
So everything is correct.

178
00:10:46,960 --> 00:10:49,060
Our pagination is in place.

179
00:10:49,120 --> 00:10:53,500
And of course, when it comes to the current page, this is something we'll use on the front end.

180
00:10:53,500 --> 00:10:56,320
So this concludes the pagination functionality.

181
00:10:56,320 --> 00:10:59,230
And up next, we'll start working on the front end.