diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/metric_images/store')
5 files changed, 161 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/metric_images/store/actions.js b/app/assets/javascripts/vue_shared/components/metric_images/store/actions.js new file mode 100644 index 00000000000..832fb891838 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/metric_images/store/actions.js @@ -0,0 +1,85 @@ +import createFlash from '~/flash'; +import { s__ } from '~/locale'; +import * as types from './mutation_types'; + +export const fetchImagesFactory = (service) => async ({ state, commit }) => { + commit(types.REQUEST_METRIC_IMAGES); + const { modelIid, projectId } = state; + + try { + const response = await service.getMetricImages({ id: projectId, modelIid }); + commit(types.RECEIVE_METRIC_IMAGES_SUCCESS, response); + } catch (error) { + commit(types.RECEIVE_METRIC_IMAGES_ERROR); + createFlash({ message: s__('MetricImages|There was an issue loading metric images.') }); + } +}; + +export const uploadImageFactory = (service) => async ( + { state, commit }, + { files, url, urlText }, +) => { + commit(types.REQUEST_METRIC_UPLOAD); + + const { modelIid, projectId } = state; + + try { + const response = await service.uploadMetricImage({ + file: files.item(0), + id: projectId, + modelIid, + url, + urlText, + }); + commit(types.RECEIVE_METRIC_UPLOAD_SUCCESS, response); + } catch (error) { + commit(types.RECEIVE_METRIC_UPLOAD_ERROR); + createFlash({ message: s__('MetricImages|There was an issue uploading your image.') }); + } +}; + +export const updateImageFactory = (service) => async ( + { state, commit }, + { imageId, url, urlText }, +) => { + commit(types.REQUEST_METRIC_UPLOAD); + + const { modelIid, projectId } = state; + + try { + const response = await service.updateMetricImage({ + modelIid, + id: projectId, + imageId, + url, + urlText, + }); + commit(types.RECEIVE_METRIC_UPDATE_SUCCESS, response); + } catch (error) { + commit(types.RECEIVE_METRIC_UPLOAD_ERROR); + createFlash({ message: s__('MetricImages|There was an issue updating your image.') }); + } +}; + +export const deleteImageFactory = (service) => async ({ state, commit }, imageId) => { + const { modelIid, projectId } = state; + + try { + await service.deleteMetricImage({ imageId, id: projectId, modelIid }); + commit(types.RECEIVE_METRIC_DELETE_SUCCESS, imageId); + } catch (error) { + createFlash({ message: s__('MetricImages|There was an issue deleting the image.') }); + } +}; + +export const setInitialData = ({ commit }, data) => { + commit(types.SET_INITIAL_DATA, data); +}; + +export default (service) => ({ + fetchImages: fetchImagesFactory(service), + uploadImage: uploadImageFactory(service), + updateImage: updateImageFactory(service), + deleteImage: deleteImageFactory(service), + setInitialData, +}); diff --git a/app/assets/javascripts/vue_shared/components/metric_images/store/index.js b/app/assets/javascripts/vue_shared/components/metric_images/store/index.js new file mode 100644 index 00000000000..f13dde9a2bc --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/metric_images/store/index.js @@ -0,0 +1,14 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import actionsFactory from './actions'; +import mutations from './mutations'; +import createState from './state'; + +Vue.use(Vuex); + +export default (initialState, service) => + new Vuex.Store({ + actions: actionsFactory(service), + mutations, + state: createState(initialState), + }); diff --git a/app/assets/javascripts/vue_shared/components/metric_images/store/mutation_types.js b/app/assets/javascripts/vue_shared/components/metric_images/store/mutation_types.js new file mode 100644 index 00000000000..8f1b31217a2 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/metric_images/store/mutation_types.js @@ -0,0 +1,13 @@ +export const REQUEST_METRIC_IMAGES = 'REQUEST_METRIC_IMAGES'; +export const RECEIVE_METRIC_IMAGES_SUCCESS = 'RECEIVE_METRIC_IMAGES_SUCCESS'; +export const RECEIVE_METRIC_IMAGES_ERROR = 'RECEIVE_METRIC_IMAGES_ERROR'; + +export const REQUEST_METRIC_UPLOAD = 'REQUEST_METRIC_UPLOAD'; +export const RECEIVE_METRIC_UPLOAD_SUCCESS = 'RECEIVE_METRIC_UPLOAD_SUCCESS'; +export const RECEIVE_METRIC_UPLOAD_ERROR = 'RECEIVE_METRIC_UPLOAD_ERROR'; + +export const RECEIVE_METRIC_UPDATE_SUCCESS = 'RECEIVE_METRIC_UPDATE_SUCCESS'; + +export const RECEIVE_METRIC_DELETE_SUCCESS = 'RECEIVE_METRIC_DELETE_SUCCESS'; + +export const SET_INITIAL_DATA = 'SET_INITIAL_DATA'; diff --git a/app/assets/javascripts/vue_shared/components/metric_images/store/mutations.js b/app/assets/javascripts/vue_shared/components/metric_images/store/mutations.js new file mode 100644 index 00000000000..b42234b2829 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/metric_images/store/mutations.js @@ -0,0 +1,39 @@ +import * as types from './mutation_types'; + +export default { + [types.REQUEST_METRIC_IMAGES](state) { + state.isLoadingMetricImages = true; + }, + [types.RECEIVE_METRIC_IMAGES_SUCCESS](state, images) { + state.metricImages = images || []; + state.isLoadingMetricImages = false; + }, + [types.RECEIVE_METRIC_IMAGES_ERROR](state) { + state.isLoadingMetricImages = false; + }, + [types.REQUEST_METRIC_UPLOAD](state) { + state.isUploadingImage = true; + }, + [types.RECEIVE_METRIC_UPLOAD_SUCCESS](state, image) { + state.metricImages.push(image); + state.isUploadingImage = false; + }, + [types.RECEIVE_METRIC_UPLOAD_ERROR](state) { + state.isUploadingImage = false; + }, + [types.RECEIVE_METRIC_UPDATE_SUCCESS](state, image) { + state.isUploadingImage = false; + const metricIndex = state.metricImages.findIndex((img) => img.id === image.id); + if (metricIndex >= 0) { + state.metricImages.splice(metricIndex, 1, image); + } + }, + [types.RECEIVE_METRIC_DELETE_SUCCESS](state, imageId) { + const metricIndex = state.metricImages.findIndex((image) => image.id === imageId); + state.metricImages.splice(metricIndex, 1); + }, + [types.SET_INITIAL_DATA](state, { modelIid, projectId }) { + state.modelIid = modelIid; + state.projectId = projectId; + }, +}; diff --git a/app/assets/javascripts/vue_shared/components/metric_images/store/state.js b/app/assets/javascripts/vue_shared/components/metric_images/store/state.js new file mode 100644 index 00000000000..b734e5c87a6 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/metric_images/store/state.js @@ -0,0 +1,10 @@ +export default ({ modelIid, projectId } = {}) => ({ + // Initial state + modelIid, + projectId, + + // View state + metricImages: [], + isLoadingMetricImages: false, + isUploadingImage: false, +}); |