Cleanup code & make sure it has a common code style
This commit is contained in:
kolaente
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="loader-container content" :class="{ 'is-loading': labelService.loading}">
|
||||
<div :class="{ 'is-loading': labelService.loading}" class="loader-container content">
|
||||
<h1>Manage labels</h1>
|
||||
<p>
|
||||
Click on a label to edit it.
|
||||
@ -9,23 +9,23 @@
|
||||
<div class="columns">
|
||||
<div class="labels-list column">
|
||||
<span
|
||||
v-for="l in labels" :key="l.id"
|
||||
class="tag"
|
||||
:class="{'disabled': userInfo.id !== l.createdBy.id}"
|
||||
:style="{'background': l.hexColor, 'color': l.textColor}"
|
||||
:class="{'disabled': userInfo.id !== l.createdBy.id}" :key="l.id"
|
||||
:style="{'background': l.hexColor, 'color': l.textColor}"
|
||||
class="tag"
|
||||
v-for="l in labels"
|
||||
>
|
||||
<span
|
||||
v-if="userInfo.id !== l.createdBy.id"
|
||||
v-tooltip.bottom="'You are not allowed to edit this label because you dont own it.'">
|
||||
v-if="userInfo.id !== l.createdBy.id"
|
||||
v-tooltip.bottom="'You are not allowed to edit this label because you dont own it.'">
|
||||
{{ l.title }}
|
||||
</span>
|
||||
<a
|
||||
@click="editLabel(l)"
|
||||
:style="{'color': l.textColor}"
|
||||
v-else>
|
||||
:style="{'color': l.textColor}"
|
||||
@click="editLabel(l)"
|
||||
v-else>
|
||||
{{ l.title }}
|
||||
</a>
|
||||
<a class="delete is-small" @click="deleteLabel(l)" v-if="userInfo.id === l.createdBy.id"></a>
|
||||
<a @click="deleteLabel(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id"></a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-4" v-if="isLabelEdit">
|
||||
@ -34,7 +34,7 @@
|
||||
<span class="card-header-title">
|
||||
Edit Label
|
||||
</span>
|
||||
<a class="card-header-icon" @click="isLabelEdit = false">
|
||||
<a @click="isLabelEdit = false" class="card-header-icon">
|
||||
<span class="icon">
|
||||
<icon icon="times"/>
|
||||
</span>
|
||||
@ -46,20 +46,20 @@
|
||||
<label class="label">Title</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Label title"
|
||||
v-model="labelEditLabel.title"/>
|
||||
class="input"
|
||||
placeholder="Label title"
|
||||
type="text"
|
||||
v-model="labelEditLabel.title"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Description</label>
|
||||
<div class="control">
|
||||
<editor
|
||||
placeholder="Label description"
|
||||
v-model="labelEditLabel.description"
|
||||
:preview-is-default="false"
|
||||
v-if="editorActive"
|
||||
:preview-is-default="false"
|
||||
placeholder="Label description"
|
||||
v-if="editorActive"
|
||||
v-model="labelEditLabel.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -71,15 +71,15 @@
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<button type="submit" class="button is-fullwidth is-primary"
|
||||
:class="{ 'is-loading': labelService.loading}">
|
||||
<button :class="{ 'is-loading': labelService.loading}" class="button is-fullwidth is-primary"
|
||||
type="submit">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a
|
||||
class="button has-icon is-danger"
|
||||
@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}">
|
||||
@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}"
|
||||
class="button has-icon is-danger">
|
||||
<span class="icon">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
@ -95,116 +95,116 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
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 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'
|
||||
|
||||
export default {
|
||||
name: 'ListLabels',
|
||||
components: {
|
||||
ColorPicker,
|
||||
editor: () => ({
|
||||
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
|
||||
loading: LoadingComponent,
|
||||
error: ErrorComponent,
|
||||
timeout: 60000,
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelService: LabelService,
|
||||
labels: [],
|
||||
labelEditLabel: LabelModel,
|
||||
isLabelEdit: false,
|
||||
editorActive: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.labelService = new LabelService()
|
||||
this.labelEditLabel = new LabelModel()
|
||||
this.loadLabels()
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Labels')
|
||||
},
|
||||
computed: mapState({
|
||||
userInfo: state => state.auth.info
|
||||
export default {
|
||||
name: 'ListLabels',
|
||||
components: {
|
||||
ColorPicker,
|
||||
editor: () => ({
|
||||
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
|
||||
loading: LoadingComponent,
|
||||
error: ErrorComponent,
|
||||
timeout: 60000,
|
||||
}),
|
||||
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)
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteLabel(label) {
|
||||
this.labelService.delete(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 => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
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.success({message: 'The label was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
editLabel(label) {
|
||||
if (label.createdBy.id !== this.userInfo.id) {
|
||||
return
|
||||
}
|
||||
this.labelEditLabel = label
|
||||
this.isLabelEdit = true
|
||||
|
||||
// This makes the editor trigger its mounted function again which makes it forget every input
|
||||
// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
|
||||
// which made it impossible to detect change from the outside. Therefore the component would
|
||||
// not update if new content from the outside was made available.
|
||||
// See https://github.com/NikulinIlya/vue-easymde/issues/3
|
||||
this.editorActive = false
|
||||
this.$nextTick(() => this.editorActive = true)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelService: LabelService,
|
||||
labels: [],
|
||||
labelEditLabel: LabelModel,
|
||||
isLabelEdit: false,
|
||||
editorActive: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.labelService = new LabelService()
|
||||
this.labelEditLabel = new LabelModel()
|
||||
this.loadLabels()
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Labels')
|
||||
},
|
||||
computed: mapState({
|
||||
userInfo: state => state.auth.info,
|
||||
}),
|
||||
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)
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteLabel(label) {
|
||||
this.labelService.delete(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 => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
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.success({message: 'The label was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
editLabel(label) {
|
||||
if (label.createdBy.id !== this.userInfo.id) {
|
||||
return
|
||||
}
|
||||
this.labelEditLabel = label
|
||||
this.isLabelEdit = true
|
||||
|
||||
// This makes the editor trigger its mounted function again which makes it forget every input
|
||||
// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
|
||||
// which made it impossible to detect change from the outside. Therefore the component would
|
||||
// not update if new content from the outside was made available.
|
||||
// See https://github.com/NikulinIlya/vue-easymde/issues/3
|
||||
this.editorActive = false
|
||||
this.$nextTick(() => this.editorActive = true)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user