FE: Added Vuex for central state management + minor changes (923e85e4) · Commits · IA2 / GMS

gms-ui/package-lock.json

+11 −6

Original line number	Diff line number	Diff line
		@@ -7219,15 +7219,15 @@
		}
		},
		"lodash": {
		"version": "4.17.11",
		"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
		"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
		"version": "4.17.15",
		"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
		"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
		"dev": true
		},
		"lodash.defaultsdeep": {
		"version": "4.6.0",
		"resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.0.tgz",
		"integrity": "sha1-vsECT4WxvZbL6kBbI8FK1kQ6b4E=",
		"version": "4.6.1",
		"resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz",
		"integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
		"dev": true
		},
		"lodash.kebabcase": {
		@@ -11810,6 +11810,11 @@
		"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
		"dev": true
		},
		"vuex": {
		"version": "3.1.1",
		"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
		"integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
		},
		"watchpack": {
		"version": "1.6.0",
		"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

+2 −1

Original line number	Diff line number	Diff line
		@@ -13,7 +13,8 @@
		"@fortawesome/vue-fontawesome": "^0.1.6",
		"bootstrap-vue": "^2.0.0-rc.19",
		"core-js": "^2.6.5",
		"vue": "^2.6.10"
		"vue": "^2.6.10",
		"vuex": "^3.1.1"
		},
		"devDependencies": {
		"@babel/polyfill": "^7.4.4",

+8 −12

Original line number	Diff line number	Diff line
		@@ -2,15 +2,15 @@
		<div id="app" v-if="model">
		<TopMenu v-bind:user="model.user" />
		<div class="container">
		<Main v-bind:model="model" />
		<Main />
		</div>
		</div>
		</template>

		<script>
		import TopMenu from './components/TopMenu.vue'
		import Main from './components/Main.vue'
		import client from 'api-client'
		import TopMenu from './components/TopMenu.vue';
		import Main from './components/Main.vue';
		import { mapState } from 'vuex';

		export default {
		name: 'app',
		@@ -18,15 +18,11 @@ export default {
		TopMenu,
		Main
		},
		data: function() {
		return {
		model: null
		}
		},
		computed: mapState({
		model: state => state.model
		}),
		mounted: function() {
		client
		.fetchMainModel()
		.then(model => this.$data.model = model);
		this.$store.commit('fetchGroupsModel');
		}
		}
		</script>

+3 −2

Original line number	Diff line number	Diff line
		const BASE_API_URL = "http://localhost:8081/"

		export default {
		fetchMainModel () {
		return fetch(BASE_API_URL + 'groups?groupId=ROOT&tab=groups&paginatorPageSize=20&paginatorPage=1', {
		fetchGroupsModel (input) {
		let url = BASE_API_URL + 'groups?groupId=' + input.selectedGroupId + '&tab=' + input.selectedTab + '&paginatorPageSize=' + input.paginatorPageSize + '&paginatorPage=' + input.paginatorPage;
		return fetch(url, {
		method: 'GET',
		cache: 'no-cache',
		credentials: 'include',

+25 −32

Original line number	Diff line number	Diff line
		@@ -2,23 +2,19 @@
		<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
		<li class="breadcrumb-item" v-for="group in groups" v-bind:class="{ active: group.active }">
		<a href="#" v-on:click="changeBreadcrumb(group.id)" v-if="!group.active">{{group.name}}</a>
		<span v-if="group.active">{{group.name}}</span>
		<a href="#" v-on:click="changeBreadcrumb(group.groupId)" v-if="!group.active">{{group.groupName}}</a>
		<span v-if="group.active">{{group.groupName}}</span>
		</li>
		</ol>
		</nav>
		</template>

		<script>
		import { mapState } from 'vuex';

		function buildItems(values) {
		let groups = [];

		groups.push({
		name: 'Root',
		id: null,
		active: false
		});

		for(let i = 0; i < values.length; i++) {
		let group = values[i];
		group.active = false;
		@@ -33,17 +29,14 @@

		export default {
		name: 'GroupsBreadcrumb',
		props: {
		values: Array
		},
		data() {
		return {
		groups: buildItems(this.values)
		};
		},
		computed: mapState({
		model: state => state.model,
		groups: state => buildItems(state.model.breadcrumbs)
		}),
		methods: {
		changeBreadcrumb: function(groupId) {
		console.log('changeBreadcrumb', groupId);
		this.$store.state.input.selectedGroupId = groupId;
		this.$store.commit('fetchGroupsModel');
		}
		}
		}