Implemented group search filter (16a717c7) · Commits · IA2 / GMS

gms-ui/package-lock.json

+5 −0

Original line number	Diff line number	Diff line
		@@ -3715,6 +3715,11 @@
		"integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
		"dev": true
		},
		"debounce": {
		"version": "1.2.0",
		"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
		"integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
		},
		"debug": {
		"version": "4.1.1",
		"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",

gms-ui/package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -13,6 +13,7 @@
		"@fortawesome/vue-fontawesome": "^0.1.6",
		"bootstrap-vue": "^2.0.0-rc.27",
		"core-js": "^2.6.5",
		"debounce": "^1.2.0",
		"vue": "^2.6.10",
		"vuex": "^3.1.1"
		},

gms-ui/src/api/server/index.js

+31 −3

Original line number	Diff line number	Diff line
		@@ -59,7 +59,30 @@ export default {
		let url = BASE_API_URL
		+ 'groups?groupId=' + input.selectedGroupId
		+ '&paginatorPageSize=' + input.paginatorPageSize
		+ '&paginatorPage=' + input.paginatorPage;
		+ '&paginatorPage=' + input.paginatorPage
		+ '&onlyPanel=false';
		if(input.searchFilter !== null) {
		url += '&searchFilter=' + input.searchFilter;
		}
		return apiRequest(url, {
		method: 'GET',
		cache: 'no-cache',
		credentials: 'include',
		headers: {
		'Content-Type': 'application/json',
		'Accept': 'application/json',
		}
		});
		},
		fetchGroupsPanel (input) {
		let url = BASE_API_URL
		+ 'groups?groupId=' + input.selectedGroupId
		+ '&paginatorPageSize=' + input.paginatorPageSize
		+ '&paginatorPage=' + input.paginatorPage
		+ '&onlyPanel=true';
		if(input.searchFilter !== null) {
		url += '&searchFilter=' + input.searchFilter;
		}
		return apiRequest(url, {
		method: 'GET',
		cache: 'no-cache',
		@@ -114,7 +137,8 @@ export default {
		newGroupName: newGroupName,
		parentGroupId: input.selectedGroupId,
		paginatorPageSize: input.paginatorPageSize,
		paginatorPage: input.paginatorPage
		paginatorPage: input.paginatorPage,
		searchFilter: input.searchFilter
		})
		});
		},
		@@ -131,7 +155,8 @@ export default {
		body: JSON.stringify({
		newGroupName: newGroupName,
		paginatorPageSize: input.paginatorPageSize,
		paginatorPage: input.paginatorPage
		paginatorPage: input.paginatorPage,
		searchFilter: input.searchFilter
		})
		});
		},
		@@ -139,6 +164,9 @@ export default {
		let url = BASE_API_URL + 'group/' + groupId
		+ '?paginatorPageSize=' + input.paginatorPageSize
		+ '&paginatorPage=' + input.paginatorPage;
		if(input.searchFilter !== null) {
		url += '&searchFilter=' + input.searchFilter;
		}
		return apiRequest(url, {
		method: 'DELETE',
		cache: 'no-cache',

gms-ui/src/components/GroupsBreadcrumb.vue

+1 −0

Original line number	Diff line number	Diff line
		@@ -40,6 +40,7 @@ export default {
		methods: {
		changeBreadcrumb: function(groupId) {
		this.input.selectedGroupId = groupId;
		this.input.searchFilter = null;
		if(this.input.selectedTab === 'groups') {
		client.fetchGroupsTab(this.input)
		.then(model => {

gms-ui/src/components/GroupsPanel.vue

+13 −5

Original line number	Diff line number	Diff line
		@@ -2,7 +2,7 @@
		<b-tab title="Groups" active>
		<b-row>
		<b-col xs="12">
		<b-form-input placeholder="Search group" v-model="groupFilter" v-on:input="filterGroups"></b-form-input>
		<b-form-input placeholder="Search group" v-model="input.searchFilter" v-on:input="filterGroups"></b-form-input>
		</b-col>
		</b-row>
		<div id="groups-list" v-if="model.groupsPanel !== null">
		@@ -34,6 +34,7 @@ import ConfirmRemoveGroupModal from './modals/ConfirmRemoveGroupModal.vue';
		import Paginator from './Paginator.vue';
		import { mapState, mapActions } from 'vuex';
		import client from 'api-client';
		import debounce from 'debounce'; // for delaying the input event (search filter)

		export default {
		name: 'GroupsPanel',
		@@ -54,6 +55,7 @@ export default {
		methods: {
		openGroup: function(group) {
		this.$store.state.input.selectedGroupId = group.groupId;
		this.$store.state.input.searchFilter = null;
		client.fetchGroupsTab(this.input)
		.then(model => {
		this.$store.commit('updateGroups', model);
		@@ -66,14 +68,20 @@ export default {
		this.$refs.confirmRemoveGroupModal.openRemoveGroupModal(group);
		},
		filterGroups: function() {
		console.log('filterGroups', this.groupFilter);
		client.fetchGroupsPanel(this.input)
		.then(panel => {
		this.$store.commit('updateGroupsPanel', panel);
		});
		},
		updatePagination: function() {
		client.fetchGroupsTab(this.input)
		.then(model => {
		this.$store.commit('updateGroupsPanel', model.groupsPanel);
		client.fetchGroupsPanel(this.input)
		.then(panel => {
		this.$store.commit('updateGroupsPanel', panel);
		});
		}
		},
		created: function() {
		this.filterGroups = debounce(this.filterGroups, 500)
		}
		}
		</script>