diff options
Diffstat (limited to 'app/assets/javascripts/environments/mixins')
-rw-r--r-- | app/assets/javascripts/environments/mixins/environments_mixin.js | 14 | ||||
-rw-r--r-- | app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js | 66 |
2 files changed, 73 insertions, 7 deletions
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js index 15a00c11ee6..d5caff1660a 100644 --- a/app/assets/javascripts/environments/mixins/environments_mixin.js +++ b/app/assets/javascripts/environments/mixins/environments_mixin.js @@ -3,18 +3,18 @@ */ import { isEqual, isFunction, omitBy } from 'lodash'; import Visibility from 'visibilityjs'; -import EnvironmentsStore from '../stores/environments_store'; -import Poll from '../../lib/utils/poll'; +import { deprecatedCreateFlash as Flash } from '../../flash'; import { getParameterByName } from '../../lib/utils/common_utils'; +import Poll from '../../lib/utils/poll'; import { s__ } from '../../locale'; -import { deprecatedCreateFlash as Flash } from '../../flash'; +import tabs from '../../vue_shared/components/navigation_tabs.vue'; +import tablePagination from '../../vue_shared/components/pagination/table_pagination.vue'; +import container from '../components/container.vue'; +import environmentTable from '../components/environments_table.vue'; import eventHub from '../event_hub'; import EnvironmentsService from '../services/environments_service'; -import tablePagination from '../../vue_shared/components/pagination/table_pagination.vue'; -import environmentTable from '../components/environments_table.vue'; -import tabs from '../../vue_shared/components/navigation_tabs.vue'; -import container from '../components/container.vue'; +import EnvironmentsStore from '../stores/environments_store'; export default { components: { diff --git a/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js b/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js new file mode 100644 index 00000000000..b62fe196a6f --- /dev/null +++ b/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js @@ -0,0 +1,66 @@ +/** + * API callbacks for pagination and tabs + * + * Components need to have `scope`, `page` and `requestData` + */ +import { validateParams } from '~/pipelines/utils'; +import { historyPushState, buildUrlWithCurrentLocation } from '../../lib/utils/common_utils'; + +export default { + methods: { + onChangeTab(scope) { + if (this.scope === scope) { + return; + } + + let params = { + scope, + page: '1', + }; + + params = this.onChangeWithFilter(params); + + this.updateContent(params); + }, + + onChangePage(page) { + /* URLS parameters are strings, we need to parse to match types */ + let params = { + page: Number(page).toString(), + }; + + if (this.scope) { + params.scope = this.scope; + } + + params = this.onChangeWithFilter(params); + + this.updateContent(params); + }, + + onChangeWithFilter(params) { + return { ...params, ...validateParams(this.requestData) }; + }, + + updateInternalState(parameters) { + // stop polling + this.poll.stop(); + + const queryString = Object.keys(parameters) + .map((parameter) => { + const value = parameters[parameter]; + // update internal state for UI + this[parameter] = value; + return `${parameter}=${encodeURIComponent(value)}`; + }) + .join('&'); + + // update polling parameters + this.requestData = parameters; + + historyPushState(buildUrlWithCurrentLocation(`?${queryString}`)); + + this.isLoading = true; + }, + }, +}; |