Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
IA2
GMS
Commits
af35db24
Commit
af35db24
authored
Aug 19, 2019
by
Sonia Zorba
Browse files
FE: Added Paginator Vue component
parent
f8443b4c
Changes
9
Hide whitespace changes
Inline
Side-by-side
gms-ui/src/App.vue
View file @
af35db24
...
...
@@ -6,7 +6,7 @@
</div>
<div
id=
"loading"
v-if=
"loading"
>
<div
id=
"spinner-wrapper"
>
<
font-awesome-icon
icon=
"spinner"
spin
/
>
<
b-spinner
variant=
"primary"
style=
"width: 3rem; height: 3rem;"
label=
"Loading"
></b-spinner
>
</div>
</div>
</div>
...
...
@@ -61,7 +61,6 @@ export default {
}
#loading
{
font-size
:
40px
;
position
:
absolute
;
top
:
0
;
bottom
:
0
;
...
...
gms-ui/src/api/server/index.js
View file @
af35db24
...
...
@@ -55,10 +55,39 @@ export default {
}
});
},
fetch
Panel
(
input
)
{
fetch
GroupsTab
(
input
)
{
let
url
=
BASE_API_URL
+
input
.
selectedTab
+
'
?groupId=
'
+
input
.
selectedGroupId
+
'
groups?groupId=
'
+
input
.
selectedGroupId
+
'
&paginatorPageSize=
'
+
input
.
paginatorPageSize
+
'
&paginatorPage=
'
+
input
.
paginatorPage
;
return
apiRequest
(
url
,
{
method
:
'
GET
'
,
cache
:
'
no-cache
'
,
credentials
:
'
include
'
,
headers
:
{
'
Content-Type
'
:
'
application/json
'
,
'
Accept
'
:
'
application/json
'
,
}
});
},
fetchMembersPanel
(
input
)
{
let
url
=
BASE_API_URL
+
'
members?groupId=
'
+
input
.
selectedGroupId
+
'
&paginatorPageSize=
'
+
input
.
paginatorPageSize
+
'
&paginatorPage=
'
+
input
.
paginatorPage
;
return
apiRequest
(
url
,
{
method
:
'
GET
'
,
cache
:
'
no-cache
'
,
credentials
:
'
include
'
,
headers
:
{
'
Content-Type
'
:
'
application/json
'
,
'
Accept
'
:
'
application/json
'
,
}
});
},
fetchPermissionsPanel
(
input
)
{
let
url
=
BASE_API_URL
+
'
permissions?groupId=
'
+
input
.
selectedGroupId
+
'
&paginatorPageSize=
'
+
input
.
paginatorPageSize
+
'
&paginatorPage=
'
+
input
.
paginatorPage
;
return
apiRequest
(
url
,
{
...
...
gms-ui/src/components/GroupsBreadcrumb.vue
View file @
af35db24
...
...
@@ -41,9 +41,9 @@ export default {
changeBreadcrumb
:
function
(
groupId
)
{
this
.
input
.
selectedGroupId
=
groupId
;
if
(
this
.
input
.
selectedTab
===
'
groups
'
)
{
client
.
fetch
Panel
(
this
.
input
)
client
.
fetch
GroupsTab
(
this
.
input
)
.
then
(
model
=>
{
this
.
$store
.
commit
(
'
updateGroups
Panel
'
,
model
);
this
.
$store
.
commit
(
'
updateGroups
'
,
model
);
});
}
else
{
this
.
$store
.
commit
(
'
setTabIndex
'
,
0
);
...
...
gms-ui/src/components/GroupsPanel.vue
View file @
af35db24
...
...
@@ -20,33 +20,9 @@
</span>
</b-list-group-item>
</b-list-group>
<p
v-if=
"model.groupsPanel.items.length === 0"
>
No groups
</p>
</div>
<div
class=
"row"
v-if=
"model.groupsPanel !== null"
>
<div
class=
"col-md-9"
>
<b-pagination
v-model=
"model.groupsPanel.currentPage"
:total-rows=
"model.groupsPanel.totalItems"
:per-page=
"model.groupsPanel.pageSize"
aria-controls=
"groups-list"
align=
"center"
v-on:change=
"setPage"
></b-pagination>
</div>
<div
class=
"col-md-3"
>
<b-container
fluid
>
<b-row>
<b-col
sm=
"5"
>
<label
for=
"page-size"
>
Page size:
</label>
</b-col>
<b-col
sm=
"6"
>
<b-form-select
id=
"page-size"
v-model=
"input.paginatorPageSize"
:options=
"pageSizeOptions"
v-on:change=
"changePageSize"
></b-form-select>
</b-col>
</b-row>
</b-container>
</div>
</div>
<div
class=
"text-center"
>
</div>
<Paginator
:paginatedPanel=
"model.groupsPanel"
:onUpdate=
"updatePagination"
/>
<RenameGroupModal
ref=
"renameGroupModal"
/>
<ConfirmRemoveGroupModal
ref=
"confirmRemoveGroupModal"
/>
</b-tab>
...
...
@@ -55,6 +31,7 @@
<
script
>
import
RenameGroupModal
from
'
./modals/RenameGroupModal.vue
'
;
import
ConfirmRemoveGroupModal
from
'
./modals/ConfirmRemoveGroupModal.vue
'
;
import
Paginator
from
'
./Paginator.vue
'
;
import
{
mapState
,
mapActions
}
from
'
vuex
'
;
import
client
from
'
api-client
'
;
...
...
@@ -62,7 +39,8 @@ export default {
name
:
'
GroupsPanel
'
,
components
:
{
RenameGroupModal
,
ConfirmRemoveGroupModal
ConfirmRemoveGroupModal
,
Paginator
},
computed
:
mapState
({
model
:
state
=>
state
.
model
,
...
...
@@ -70,20 +48,15 @@ export default {
}),
data
:
function
()
{
return
{
pageSizeOptions
:
[
{
value
:
20
,
text
:
"
20
"
},
{
value
:
50
,
text
:
"
50
"
},
{
value
:
100
,
text
:
"
100
"
}
],
groupFilter
:
''
};
},
methods
:
{
openGroup
:
function
(
group
)
{
this
.
$store
.
state
.
input
.
selectedGroupId
=
group
.
groupId
;
client
.
fetch
Panel
(
this
.
input
)
client
.
fetch
GroupsTab
(
this
.
input
)
.
then
(
model
=>
{
this
.
$store
.
commit
(
'
updateGroups
Panel
'
,
model
);
this
.
$store
.
commit
(
'
updateGroups
'
,
model
);
});
},
openRenameGroupModal
:
function
(
group
)
{
...
...
@@ -92,14 +65,14 @@ export default {
openRemoveGroupModal
:
function
(
group
)
{
this
.
$refs
.
confirmRemoveGroupModal
.
openRemoveGroupModal
(
group
);
},
setPage
:
function
(
page
)
{
console
.
log
(
'
setPage
'
,
page
);
},
changePageSize
:
function
(
pageSize
)
{
console
.
log
(
'
changePageSize
'
,
pageSize
);
},
filterGroups
:
function
()
{
console
.
log
(
'
filterGroups
'
,
this
.
groupFilter
);
},
updatePagination
:
function
()
{
client
.
fetchGroupsTab
(
this
.
input
)
.
then
(
model
=>
{
this
.
$store
.
commit
(
'
updateGroupsPanel
'
,
model
.
groupsPanel
);
});
}
}
}
...
...
gms-ui/src/components/Main.vue
View file @
af35db24
...
...
@@ -66,20 +66,26 @@ export default {
}
if
(
this
.
input
.
selectedTab
!==
tab
)
{
this
.
input
.
selectedTab
=
tab
;
client
.
fetchPanel
(
this
.
input
)
.
then
(
model
=>
{
switch
(
this
.
input
.
selectedTab
)
{
case
'
groups
'
:
this
.
$store
.
commit
(
'
updateGroupsPanel
'
,
model
);
break
;
case
'
members
'
:
this
.
$store
.
commit
(
'
updateMembersPanel
'
,
model
);
break
;
case
'
permissions
'
:
this
.
$store
.
commit
(
'
updatePermissionsPanel
'
,
model
);
break
;
}
});
switch
(
this
.
input
.
selectedTab
)
{
case
'
groups
'
:
client
.
fetchGroupsTab
(
this
.
input
)
.
then
(
model
=>
{
this
.
$store
.
commit
(
'
updateGroups
'
,
model
);
});
break
;
case
'
members
'
:
client
.
fetchMembersPanel
(
this
.
input
)
.
then
(
panel
=>
{
this
.
$store
.
commit
(
'
updateMembersPanel
'
,
panel
);
});
break
;
case
'
permissions
'
:
client
.
fetchPermissionsPanel
(
this
.
input
)
.
then
(
panel
=>
{
this
.
$store
.
commit
(
'
updatePermissionsPanel
'
,
panel
);
});
break
;
}
}
},
openAddGroupModal
:
function
()
{
...
...
gms-ui/src/components/MembersPanel.vue
View file @
af35db24
<
template
>
<b-tab
title=
"Members"
>
<b-tab
title=
"Members"
v-if=
"model.permission === 'ADMIN' || model.permission === 'MANAGE_MEMBERS' || model.permission === 'VIEW_MEMBERS'"
>
<div
v-if=
"model.membersPanel !== null"
>
<b-list-group
v-for=
"member in model.membersPanel.items"
id=
"members-list"
>
<b-list-group-item
href=
"#"
>
...
...
@@ -13,17 +13,9 @@
</span>
</b-list-group-item>
</b-list-group>
<p
v-if=
"model.membersPanel.items.length === 0"
>
No direct members
</p>
</div>
<div
class=
"text-center"
v-if=
"model.membersPanel !== null"
>
<b-pagination
v-model=
"model.membersPanel.page"
:total-rows=
"model.membersPanel.totalItems"
:per-page=
"model.membersPanel.pageSize"
aria-controls=
"members-list"
align=
"center"
v-on:change=
"setPage"
></b-pagination>
</div>
<Paginator
:paginatedPanel=
"model.membersPanel"
:onUpdate=
"updatePagination"
/>
<ConfirmRemoveMemberModal
ref=
"confirmRemoveMemberModal"
/>
</b-tab>
</
template
>
...
...
@@ -31,17 +23,20 @@
<
script
>
import
client
from
'
api-client
'
;
import
User
from
'
./User.vue
'
;
import
ConfirmRemoveMemberModal
from
'
./modals/ConfirmRemoveMemberModal.vue
'
import
Paginator
from
'
./Paginator.vue
'
;
import
ConfirmRemoveMemberModal
from
'
./modals/ConfirmRemoveMemberModal.vue
'
;
import
{
mapState
}
from
'
vuex
'
;
export
default
{
name
:
'
MembersPanel
'
,
components
:
{
User
,
ConfirmRemoveMemberModal
ConfirmRemoveMemberModal
,
Paginator
},
computed
:
mapState
({
model
:
state
=>
state
.
model
model
:
state
=>
state
.
model
,
input
:
state
=>
state
.
input
}),
methods
:
{
openRemoveMemberModal
:
function
(
member
)
{
...
...
@@ -50,8 +45,11 @@ export default {
this
.
$refs
.
confirmRemoveMemberModal
.
openRemoveMemberModal
(
member
,
memberPermission
);
});
},
setPage
:
function
(
page
)
{
console
.
log
(
'
setPage
'
,
page
);
updatePagination
:
function
()
{
client
.
fetchMembersPanel
(
this
.
input
)
.
then
(
panel
=>
{
this
.
$store
.
commit
(
'
updateMembersPanel
'
,
panel
);
});
}
}
}
...
...
gms-ui/src/components/Paginator.vue
0 → 100644
View file @
af35db24
<
template
>
<div
class=
"row mt-4"
v-if=
"paginatedPanel !== null && paginatedPanel.totalItems > 0"
>
<div
class=
"col-md-8"
>
<b-pagination
v-model=
"paginatedPanel.currentPage"
:total-rows=
"paginatedPanel.totalItems"
:per-page=
"paginatedPanel.pageSize"
aria-controls=
"groups-list"
align=
"center"
v-on:change=
"setPage"
></b-pagination>
<p>
Total items:
{{
paginatedPanel
.
totalItems
}}
</p>
</div>
<div
class=
"col-md-4"
>
<b-row>
<b-col
sm=
"5"
>
<label
for=
"page-size"
>
Page size:
</label>
</b-col>
<b-col
sm=
"6"
>
<b-form-select
id=
"page-size"
v-model=
"input.paginatorPageSize"
:options=
"pageSizeOptions"
v-on:change=
"changePageSize"
></b-form-select>
</b-col>
</b-row>
</div>
</div>
</
template
>
<
script
>
import
{
mapState
}
from
'
vuex
'
;
export
default
{
name
:
'
Paginator
'
,
props
:
{
paginatedPanel
:
Object
,
onUpdate
:
Function
},
computed
:
mapState
({
input
:
state
=>
state
.
input
}),
data
:
function
()
{
return
{
pageSizeOptions
:
[
{
value
:
5
,
text
:
"
5
"
},
{
value
:
20
,
text
:
"
20
"
},
{
value
:
50
,
text
:
"
50
"
},
{
value
:
100
,
text
:
"
100
"
}
]
};
},
methods
:
{
setPage
:
function
(
page
)
{
this
.
input
.
paginatorPage
=
page
;
this
.
onUpdate
();
},
changePageSize
:
function
(
pageSize
)
{
this
.
input
.
paginatorPageSize
=
pageSize
;
this
.
onUpdate
();
}
}
}
</
script
>
gms-ui/src/components/PermissionsPanel.vue
View file @
af35db24
<
template
>
<b-tab
title=
"Permissions"
>
<b-tab
title=
"Permissions"
v-if=
"model.permission === 'ADMIN'"
>
<div
v-if=
"model.permissionsPanel !== null"
>
<table
class=
"table b-table table-striped table-hover"
>
<thead>
...
...
@@ -23,23 +23,17 @@
</tr>
</tbody>
</table>
<p
v-if=
"model.permissionsPanel.items.length === 0"
>
No direct permissions
</p>
</div>
<div
class=
"text-center"
v-if=
"model.permissionsPanel !== null"
>
<b-pagination
v-model=
"model.permissionsPanel.currentPage"
:total-rows=
"model.permissionsPanel.totalItems"
:per-page=
"model.permissionsPanel.pageSize"
aria-controls=
"permissions-list"
align=
"center"
v-on:change=
"setPage"
></b-pagination>
</div>
<Paginator
:paginatedPanel=
"model.permissionsPanel"
:onUpdate=
"updatePagination"
/>
<ConfirmRemovePermissionModal
ref=
"confirmRemovePermissionModal"
/>
</b-tab>
</
template
>
<
script
>
import
client
from
'
api-client
'
;
import
User
from
'
./User.vue
'
;
import
Paginator
from
'
./Paginator.vue
'
;
import
ConfirmRemovePermissionModal
from
'
./modals/ConfirmRemovePermissionModal.vue
'
import
{
mapState
}
from
'
vuex
'
;
...
...
@@ -47,17 +41,22 @@ export default {
name
:
'
PermissionsPanel
'
,
components
:
{
User
,
ConfirmRemovePermissionModal
ConfirmRemovePermissionModal
,
Paginator
},
computed
:
mapState
({
model
:
state
=>
state
.
model
,
input
:
state
=>
state
.
input
}),
methods
:
{
openRemovePermissionModal
:
function
(
user
)
{
this
.
$refs
.
confirmRemovePermissionModal
.
openRemovePermissionModal
(
user
);
},
setPage
:
function
(
page
)
{
console
.
log
(
'
setPage
'
,
page
);
updatePagination
:
function
()
{
client
.
fetchPermissionsPanel
(
this
.
input
)
.
then
(
panel
=>
{
this
.
$store
.
commit
(
'
updatePermissionsPanel
'
,
panel
);
});
}
}
}
...
...
gms-ui/src/store.js
View file @
af35db24
...
...
@@ -33,11 +33,14 @@ export default new Vuex.Store({
this
.
state
.
model
.
permission
=
model
.
permission
;
this
.
state
.
model
.
user
=
model
.
user
;
},
updateGroups
Panel
(
state
,
model
)
{
updateGroups
(
state
,
model
)
{
this
.
state
.
model
.
breadcrumbs
=
model
.
breadcrumbs
;
this
.
state
.
model
.
groupsPanel
=
model
.
groupsPanel
;
this
.
state
.
model
.
permission
=
model
.
permission
;
},
updateGroupsPanel
(
state
,
groupsPanel
)
{
this
.
state
.
model
.
groupsPanel
=
groupsPanel
;
},
updatePermissionsPanel
(
state
,
permissionsPanel
)
{
this
.
state
.
model
.
permissionsPanel
=
permissionsPanel
;
},
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment