FE: Changes post BE-refactoring; Added loading animation and small improvements (f8443b4c) · Commits · IA2 / GMS

gms-ui/.env.production

+1 −1

Original line number	Diff line number	Diff line
		VUE_APP_API_CLIENT = 'server'
		BASE_API_URL = 'http://localhost:8081/'
		VUE_APP_API_BASE_URL = 'http://localhost:8081/'

gms-ui/src/App.vue

+39 −6

Original line number	Diff line number	Diff line
		@@ -4,6 +4,11 @@
		<div class="container">
		<Main />
		</div>
		<div id="loading" v-if="loading">
		<div id="spinner-wrapper">
		<font-awesome-icon icon="spinner" spin />
		</div>
		</div>
		</div>
		</template>

		@@ -11,7 +16,7 @@
		import TopMenu from './components/TopMenu.vue';
		import Main from './components/Main.vue';
		import { mapState } from 'vuex';
		//import { ToastPlugin } from 'bootstrap-vue';
		import client from 'api-client';

		export default {
		name: 'app',
		@@ -20,11 +25,11 @@ export default {
		Main
		},
		computed: mapState({
		model: state => state.model
		model: state => state.model,
		input: state => state.input,
		loading: state => state.loading
		}),
		mounted: function() {
		this.$store.commit('fetchGroupsModel');

		var self = this;
		document.addEventListener('apiError', function (event) {
		self.$bvToast.toast(event.message, {
		@@ -32,12 +37,21 @@ export default {
		variant: 'danger',
		solid: true
		});
		})
		});
		document.addEventListener('loading', function (event) {
		self.$store.commit('setLoading', event.value);
		});

		// retrieve the initial model
		client.fetchHomePageModel(this.input)
		.then(model => {
		this.$store.commit('updateHomePageModel', model);
		});
		}
		}
		</script>

		<style>
		<style scoped>
		#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		@@ -45,4 +59,23 @@ export default {
		text-align: center;
		color: #2c3e50;
		}

		#loading {
		font-size: 40px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 0.7);
		z-index: 1000;
		}

		#spinner-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		}
		</style>

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

+30 −6

Original line number	Diff line number	Diff line
		const BASE_API_URL = "http://localhost:8081/"
		const BASE_API_URL = process.env.VUE_APP_API_BASE_URL;

		function apiRequest(url, data) {
		loading(true);
		return new Promise((resolve, reject) => {
		fetch(url, data)
		.then(response => {
		loading(false);
		if([200, 201, 204, 400].includes(response.status)) { // valid status codes
		resolve(response.json());
		} else {
		@@ -11,6 +13,7 @@ function apiRequest(url, data) {
		}
		})
		.catch(error => {
		loading(false);
		dispatchApiErrorEvent(error);
		});
		});
		@@ -29,14 +32,35 @@ function dispatchApiErrorEvent(error) {
		document.dispatchEvent(event);
		}

		/* For loading animation */
		function loading(value) {
		let event = new CustomEvent('loading');
		event.value = value;
		document.dispatchEvent(event);
		}

		export default {
		fetchGroupsModel (input) {
		fetchHomePageModel (input) {
		let url = BASE_API_URL
		+ 'home?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',
		}
		});
		},
		fetchPanel (input) {
		let url = BASE_API_URL
		+ 'groups?groupId=' + input.selectedGroupId
		+ '&tab=' + input.selectedTab
		+ input.selectedTab
		+ '?groupId=' + input.selectedGroupId
		+ '&paginatorPageSize=' + input.paginatorPageSize
		+ '&paginatorPage=' + input.paginatorPage
		+ '&page=' + input.page;
		+ '&paginatorPage=' + input.paginatorPage;
		return apiRequest(url, {
		method: 'GET',
		cache: 'no-cache',

gms-ui/src/components/GroupsBreadcrumb.vue

+14 −3

Original line number	Diff line number	Diff line
		@@ -11,6 +11,7 @@

		<script>
		import { mapState } from 'vuex';
		import client from 'api-client';

		function buildItems(values) {
		let groups = [];
		@@ -22,7 +23,9 @@ function buildItems(values) {
		}

		// Activate the last item
		if(groups.length > 0) {
		groups[groups.length - 1].active = true;
		}

		return groups;
		}
		@@ -31,12 +34,20 @@ export default {
		name: 'GroupsBreadcrumb',
		computed: mapState({
		model: state => state.model,
		input: state => state.input,
		groups: state => buildItems(state.model.breadcrumbs)
		}),
		methods: {
		changeBreadcrumb: function(groupId) {
		this.$store.state.input.selectedGroupId = groupId;
		this.$store.commit('fetchGroupsModel');
		this.input.selectedGroupId = groupId;
		if(this.input.selectedTab === 'groups') {
		client.fetchPanel(this.input)
		.then(model => {
		this.$store.commit('updateGroupsPanel', model);
		});
		} else {
		this.$store.commit('setTabIndex', 0);
		}
		}
		}
		}

gms-ui/src/components/GroupsPanel.vue

+5 −1

Original line number	Diff line number	Diff line
		@@ -56,6 +56,7 @@
		import RenameGroupModal from './modals/RenameGroupModal.vue';
		import ConfirmRemoveGroupModal from './modals/ConfirmRemoveGroupModal.vue';
		import { mapState, mapActions } from 'vuex';
		import client from 'api-client';

		export default {
		name: 'GroupsPanel',
		@@ -80,7 +81,10 @@ export default {
		methods: {
		openGroup: function(group) {
		this.$store.state.input.selectedGroupId = group.groupId;
		this.$store.commit('fetchGroupsModel');
		client.fetchPanel(this.input)
		.then(model => {
		this.$store.commit('updateGroupsPanel', model);
		});
		},
		openRenameGroupModal: function(group) {
		this.$refs.renameGroupModal.openRenameGroupModal(group);