Preload labels and use locally stored in vuex

src/views/labels/ListLabels.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="{ 'is-loading': labelService.loading}" class="loader-container">
+	<div :class="{ 'is-loading': loading}" class="loader-container">
 		<x-button
 			:to="{name:'labels.create'}"
 			class="is-pulled-right"
@@ -76,7 +76,7 @@
 						<div class="field has-addons">
 							<div class="control is-expanded">
 								<x-button
-									:loading="labelService.loading"
+									:loading="loading"
 									class="is-fullwidth"
 									@click="editLabelSubmit()"
 								>
@@ -101,11 +101,11 @@
 <script>
 import {mapState} from 'vuex'
 
-import LabelService from '../../services/label'
 import LabelModel from '../../models/label'
 import ColorPicker from '../../components/input/colorPicker'
 import LoadingComponent from '../../components/misc/loading'
 import ErrorComponent from '../../components/misc/error'
+import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
 export default {
 	name: 'ListLabels',
@@ -120,15 +120,12 @@ export default {
 	},
 	data() {
 		return {
-			labelService: LabelService,
-			labels: [],
 			labelEditLabel: LabelModel,
 			isLabelEdit: false,
 			editorActive: false,
 		}
 	},
 	created() {
-		this.labelService = new LabelService()
 		this.labelEditLabel = new LabelModel()
 		this.loadLabels()
 	},
@@ -137,43 +134,19 @@ export default {
 	},
 	computed: mapState({
 		userInfo: state => state.auth.info,
+		labels: state => state.labels.labels,
+		loading: state => state[LOADING] && state[LOADING_MODULE] === 'labels',
 	}),
 	methods: {
 		loadLabels() {
-			const getAllLabels = (page = 1) => {
-				return this.labelService.getAll({}, {}, page)
-					.then(labels => {
-						if (page < this.labelService.totalPages) {
-							return getAllLabels(page + 1)
-								.then(nextLabels => {
-									return labels.concat(nextLabels)
-								})
-						} else {
-							return labels
-						}
-					})
-					.catch(e => {
-						return Promise.reject(e)
-					})
-			}
-
-			getAllLabels()
-				.then(r => {
-					this.$set(this, 'labels', r)
-				})
+			this.$store.dispatch('labels/loadAllLabels')
 				.catch(e => {
 					this.error(e, this)
 				})
 		},
 		deleteLabel(label) {
-			this.labelService.delete(label)
+			this.$store.dispatch('labels/deleteLabel', label)
 				.then(() => {
-					// Remove the label from the list
-					for (const l in this.labels) {
-						if (this.labels[l].id === label.id) {
-							this.labels.splice(l, 1)
-						}
-					}
 					this.success({message: 'The label was successfully deleted.'}, this)
 				})
 				.catch(e => {
@@ -181,13 +154,8 @@ export default {
 				})
 		},
 		editLabelSubmit() {
-			this.labelService.update(this.labelEditLabel)
-				.then(r => {
-					for (const l in this.labels) {
-						if (this.labels[l].id === r.id) {
-							this.$set(this.labels, l, r)
-						}
-					}
+			this.$store.dispatch('labels/updateLabel', this.labelEditLabel)
+				.then(() => {
 					this.success({message: 'The label was successfully updated.'}, this)
 				})
 				.catch(e => {

src/views/labels/NewLabel.vue

@@ -8,10 +8,10 @@
 			<label class="label" for="labelTitle">Label Title</label>
 			<div
 				class="control is-expanded"
-				:class="{ 'is-loading': labelService.loading }"
+				:class="{ 'is-loading': loading }"
 			>
 				<input
-					:class="{ disabled: labelService.loading }"
+					:class="{ disabled: loading }"
 					class="input"
 					placeholder="The label title goes here..."
 					type="text"
@@ -28,7 +28,7 @@
 		<div class="field">
 			<label class="label">Color</label>
 			<div class="control">
-				<color-picker v-model="label.hexColor" />
+				<color-picker v-model="label.hexColor"/>
 			</div>
 		</div>
 	</create-edit>
@@ -36,17 +36,16 @@
 
 <script>
 import labelModel from '../../models/label'
-import labelService from '../../services/label'
 import LabelModel from '../../models/label'
-import LabelService from '../../services/label'
 import CreateEdit from '@/components/misc/create-edit'
 import ColorPicker from '../../components/input/colorPicker'
+import {mapState} from 'vuex'
+import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
 export default {
 	name: 'NewLabel',
 	data() {
 		return {
-			labelService: labelService,
 			label: labelModel,
 			showError: false,
 		}
@@ -56,12 +55,14 @@ export default {
 		ColorPicker,
 	},
 	created() {
-		this.labelService = new LabelService()
 		this.label = new LabelModel()
 	},
 	mounted() {
 		this.setTitle('Create a new label')
 	},
+	computed: mapState({
+		loading: state => state[LOADING] && state[LOADING_MODULE] === 'labels',
+	}),
 	methods: {
 		newLabel() {
 			if (this.label.title === '') {
@@ -70,17 +71,13 @@ export default {
 			}
 			this.showError = false
 
-			this.labelService
-				.create(this.label)
-				.then((response) => {
+			this.$store.dispatch('labels/createLabel', this.label)
+				.then(r => {
 					this.$router.push({
 						name: 'labels.index',
-						params: { id: response.id },
+						params: {id: r.id},
 					})
-					this.success(
-						{ message: 'The label was successfully created.' },
-						this
-					)
+					this.success({message: 'The label was successfully created.'}, this)
 				})
 				.catch((e) => {
 					this.error(e, this)