Skip to content

Commit a1f59b8

Browse files
jerricotandelacruzjerricotandelacruz
committed
feat: Merge the closed request and add filter by response
Signed-off-by: Jerrico Dela Cruz <94591636+jerricotandelacruz@users.noreply.github.com>
1 parent e600fac commit a1f59b8

File tree

6 files changed

+164
-135
lines changed

6 files changed

+164
-135
lines changed

‎src/goapp/public/components/list.js

Lines changed: 70 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,88 @@
11
const list = ({
2+
enabledSearch = true,
3+
otherState,
24
callback,
3-
renderItem,
5+
renderItem
46
}) => {
57
return {
6-
// FILTER
7-
search : '',
8-
filter : 10,
9-
page : 0,
8+
state: {
9+
// FILTER
10+
search : '',
11+
filter : 10,
12+
page : 0,
1013

11-
// DISPLAY
12-
total : 0,
13-
showStart : 0,
14-
showEnd : 0,
15-
isLoading : false,
14+
// DISPLAY
15+
total : 0,
16+
showStart : 0,
17+
showEnd : 0,
18+
isLoading : false,
1619

17-
items : [],
20+
enabledSearch: true,
21+
22+
other: {},
23+
24+
items : []
25+
},
1826
async init(){
27+
this.state.other = otherState
1928
await this.load();
2029
},
2130
async load(){
22-
this.isLoading = true
23-
this.showStart = 0
24-
this.showEnd = 0
25-
const {data, total} = await callback({
26-
filter : this.filter,
27-
page : this.page,
28-
search : this.search,
29-
})
31+
this.state.enabledSearch = enabledSearch
32+
this.state.isLoading = true
33+
this.state.showStart = 0
34+
this.state.showEnd = 0
35+
const {data, total} = await callback(this.state)
3036

31-
this.items = data
32-
this.total = total
37+
this.state.items = data
38+
this.state.total = total
3339

34-
this.isLoading = false
40+
this.state.isLoading = false
3541

36-
if (this.items == null || this.items.length == 0) return;
42+
if (this.state.items == null || this.state.items.length == 0) return;
3743

38-
this.showStart = this.items.length > 0 ? ((this.page * this.filter) + 1) : 0;
39-
this.showEnd = (this.page * this.filter) + this.items.length;
44+
this.state.showStart = this.state.items.length > 0 ? ((this.state.page * this.state.filter) + 1) : 0;
45+
this.state.showEnd = (this.state.page * this.state.filter) + this.state.items.length;
4046
},
4147
//EVENT HANDLERS
4248
onChangeFilterHandler(e){
43-
this.page = 0,
44-
this.total = 0,
45-
this.filter = parseInt(e.target.value);
49+
this.state.page = 0,
50+
this.state.total = 0,
51+
this.state.filter = parseInt(e.target.value);
4652
this.load()
4753
},
4854
onSearchSubmitHandler(e){
49-
this.page = 0,
50-
this.total = 0,
51-
this.search = e.target.value;
55+
this.state.page = 0,
56+
this.state.total = 0,
57+
this.state.search = e.target.value;
5258
this.load();
5359
},
5460
onNextPageHandler(){
5561
if (!this.nextPageEnabled()) return;
5662

57-
this.page = this.page + 1
63+
this.state.page = this.state.page + 1
5864

5965
this.load()
6066
},
6167
onPreviousPageHandler(){
6268
if (!this.previousPageEnabled()) return;
6369

64-
this.page = this.page - 1
70+
this.state.page = this.state.page - 1
6571

6672
this.load();
6773
},
6874
//FUNCTIONS
6975
nextPageEnabled(){
70-
return this.page < Math.ceil(this.total/this.filter) - 1
76+
return this.state.page < Math.ceil(this.state.total/this.state.filter) - 1
7177
},
7278
previousPageEnabled(){
73-
return this.page > 0
79+
return this.state.page > 0
7480
},
7581
checkItemLenght(){
76-
if (!this.items ){
82+
if (!this.state.items ){
7783
return false
7884
}
79-
if (this.items.length == 0 ){
85+
if (this.state.items.length == 0 ){
8086
return false
8187
}
8288
return true
@@ -86,29 +92,19 @@ const list = ({
8692
return renderItem(item)
8793
},
8894
template : `<nav class="bg-white flex items-center justify-between" aria-label="header">
89-
<div class="sm:block">
90-
<div>
91-
<label for="filter" class="block text-sm font-medium text-gray-700">Filter</label>
92-
<select @change="onChangeFilterHandler" x-model="filter" id="filter" name="filter" class="mt-1 block w-20 pl-3 pr-10 py-2 text-base text-center border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
93-
<option>5</option>
94-
<option>10</option>
95-
<option>20</option>
96-
<option>50</option>
97-
<option>100</option>
98-
</select>
99-
</div>
100-
</div>
101-
<div class="flex justify-between sm:justify-end">
102-
<div class="sm:col-span-3">
103-
<label for="search" class="block text-sm font-medium text-gray-700">Search</label>
104-
<div class="mt.-1">
105-
<input @keyup.enter="onSearchSubmitHandler" type="text" name="search" id="search" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 pl-2 sm:text-sm border-gray-300 rounded-md" x-model="search">
95+
<template x-if="state.enabledSearch">
96+
<div class="flex justify-between sm:justify-end">
97+
<div class="sm:col-span-3">
98+
<label for="search" class="block text-sm font-medium text-gray-700">Search</label>
99+
<div class="mt.-1">
100+
<input @keyup.enter="onSearchSubmitHandler" type="text" name="search" id="search" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 pl-2 sm:text-sm border-gray-300 rounded-md" x-model="state.search">
101+
</div>
106102
</div>
107103
</div>
108-
</div>
104+
</template>
109105
</nav>
110106
111-
<div x-show='isLoading' x-transition>
107+
<div x-show='state.isLoading' x-transition>
112108
<svg
113109
role="status"
114110
class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-[#FF5800] m-auto my-5"
@@ -124,13 +120,13 @@ const list = ({
124120
</svg>
125121
</div>
126122
127-
<div x-show="!isLoading" x-transition>
128-
<template x-if="!items">
123+
<div x-show="!state.isLoading" x-transition>
124+
<template x-if="!state.items">
129125
<p class="text-center my-5">NO RESULT FOUND</p>
130126
</template>
131127
<template x-if="checkItemLenght ">
132128
<ul role="list" class="divide-y divide-gray-300 my-3">
133-
<template x-for="item in items">
129+
<template x-for="item in state.items">
134130
<li x-html="render(item)">
135131
</li>
136132
</template>
@@ -139,14 +135,26 @@ const list = ({
139135
</div>
140136
141137
<nav class="bg-white py-3 flex items-center justify-between border-t border-gray-200" aria-label="Pagination">
138+
<div class="sm:block">
139+
<div class="content-start">
140+
<label for="filter" class="text-sm font-medium text-gray-700">Filter</label>
141+
<select @change="onChangeFilterHandler" x-model="state.filter" id="filter" name="filter" class="mt-1 w-20 pl-3 pr-10 py-2 text-base text-center border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
142+
<option>5</option>
143+
<option>10</option>
144+
<option>20</option>
145+
<option>50</option>
146+
<option>100</option>
147+
</select>
148+
</div>
149+
</div>
142150
<div class="sm:block">
143151
<p class="text-sm text-gray-700">
144152
Showing
145-
<span class="font-medium" x-text="showStart"></span>
153+
<span class="font-medium" x-text="state.showStart"></span>
146154
to
147-
<span class="font-medium" x-text="showEnd"></span>
155+
<span class="font-medium" x-text="state.showEnd"></span>
148156
of
149-
<span class="font-medium" x-text="total"></span>
157+
<span class="font-medium" x-text="state.total"></span>
150158
results
151159
</p>
152160
</div>

‎src/goapp/routes/apis/item.go

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@ const (
2424
type ItemStatus int8
2525

2626
const (
27-
Disapproved ItemStatus = iota
27+
Pending ItemStatus = iota
2828
Approved
29-
Pending
30-
AllStatus
29+
Rejected
30+
Closed // Disapproved, Approved
31+
All // Disapproved, Approved, Pending
3132
)
3233

3334
type Item struct {
@@ -75,13 +76,13 @@ func GetItems(w http.ResponseWriter, r *http.Request) {
7576
}
7677
user := fmt.Sprintf("%s", profile["preferred_username"])
7778

78-
itemType, errItemType := strconv.ParseInt(vars["type"], 10, 64)
79+
itemType, errItemType := strconv.ParseInt(vars["type"], 10, 8)
7980
if errItemType != nil {
8081
http.Error(w, errItemType.Error(), http.StatusInternalServerError)
8182
return
8283
}
8384

84-
itemStatus, errItemStatus := strconv.ParseInt(vars["status"], 10, 64)
85+
itemStatus, errItemStatus := strconv.ParseInt(vars["status"], 10, 8)
8586
if errItemStatus != nil {
8687
http.Error(w, errItemStatus.Error(), http.StatusInternalServerError)
8788
return
@@ -127,14 +128,8 @@ func GetItemsBy(itemType ItemType, itemStatus ItemStatus, user, search string, o
127128
params["ItemType"] = itemType
128129
params["User"] = user
129130
}
130-
if itemStatus != AllStatus {
131-
if itemStatus == Pending {
132-
params["IsApproved"] = nil
133-
} else {
134-
params["IsApproved"] = itemStatus
135-
}
136-
}
137131

132+
params["IsApproved"] = itemStatus
138133
params["Search"] = search
139134

140135
resultTotal, errResultTotal := db.ExecuteStoredProcedureWithResult("PR_Items_Total", params)

‎src/goapp/templates/myapprovals.html

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,36 @@
2323
<div x-html="template"></div>
2424
</div>
2525
</div>
26-
<div x-show="activeTab == tabs[1]">
27-
<h2 class="text-lg p-3 text-green-800 border-b">Approved Requests</h2>
26+
<div x-show="activeTab == tabs[1]">
2827
<div class="p-5" x-data="list({
29-
callback: approvedCallback,
30-
renderItem: closedRenderItem
31-
})">
32-
<div x-html="template"></div>
33-
</div>
34-
<h2 class="text-lg p-3 text-red-800 border-b">Rejected Requests</h2>
35-
<div class="p-5" x-data="list({
36-
callback: rejectedCallback,
28+
enabledSearch: false,
29+
otherState: { responseType: 'All'},
30+
callback: closedCallback,
3731
renderItem: closedRenderItem
3832
})">
33+
<nav class="bg-white flex items-center justify-between" aria-label="header">
34+
<div class="sm:block">
35+
<div class="content-start">
36+
<label for="filter" class="block text-sm font-medium text-gray-700">Filter by Response</label>
37+
<select @change="() => {
38+
load()
39+
}"
40+
x-model="state.other.responseType" id="reponseType" name="responseType" class="block mt-1 pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
41+
<option>All</option>
42+
<option>Rejected</option>
43+
<option>Approved</option>
44+
</select>
45+
</div>
46+
</div>
47+
<div class="flex justify-between sm:justify-end">
48+
<div class="sm:col-span-3">
49+
<label for="search" class="block text-sm font-medium text-gray-700">Search</label>
50+
<div class="mt.-1">
51+
<input @keyup.enter="onSearchSubmitHandler" type="text" name="search" id="search" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 pl-2 sm:text-sm border-gray-300 rounded-md" x-model="state.search">
52+
</div>
53+
</div>
54+
</div>
55+
</nav>
3956
<div x-html="template"></div>
4057
</div>
4158
</div>
@@ -140,7 +157,7 @@ <h2 class="text-lg p-3 text-red-800 border-b">Rejected Requests</h2>
140157
}
141158

142159
async function pendingCallback(e){
143-
return await getItemsBy(1, 2, e)
160+
return await getItemsBy(1, 0, e.filter, e.page, e.search)
144161
}
145162

146163
//CLOSED REQUEST
@@ -193,19 +210,17 @@ <h2 class="text-lg p-3 text-red-800 border-b">Rejected Requests</h2>
193210
</div>`
194211
}
195212

196-
async function approvedCallback(e){
197-
return await getItemsBy(1, 1, e)
198-
}
199-
200-
async function rejectedCallback(e){
201-
return await getItemsBy(1, 0, e)
213+
async function closedCallback(e){
214+
const responses = [{name: 'All', value: 3}, {name: 'Rejected', value: 2}, {name: 'Approved', value: 1}]
215+
selectedResponseType = responses.find((obj) => { return obj.name == e.other.responseType}).value
216+
return await getItemsBy(1, selectedResponseType, e.filter, e.page, e.search)
202217
}
203218

204-
async function getItemsBy(type, status, option){
205-
const offset = option.filter * option.page;
206-
const search = encodeURIComponent(option.search)
219+
async function getItemsBy(type, status, filter, page, search){
220+
const offset = filter * page;
221+
search = encodeURIComponent(search)
207222

208-
const res = await fetch(`/api/items/type/${type}/status/${status}?filter=${option.filter}&offset=${offset}&search=${search}`)
223+
const res = await fetch(`/api/items/type/${type}/status/${status}?filter=${filter}&offset=${offset}&search=${search}`)
209224
const data = await res.json()
210225
return data
211226
}

0 commit comments

Comments
 (0)