forked from vikunja/frontend
konrad
3874355953
Make sure no text from previous mounts is left in the editor text field Make preview not the default when rendering descrition settings Add option to show editor by default while still having the option to show preview Add option to show editor by default while still having the option to show preview Use editor component for edit labels Use editor component for edit team Use editor component for edit namespace Use editor component for edit list Use editor component for edit task Make sure we find all checkboxes Fix checking wrong checkbox Make finding and replacing checkboxes in a function actually work Add upading text with checked checkboxes Lazy load editor Remove preview since we have a better one Make easymde smaller by default Add image upload from comments Rename easymde component to editor Only show preview button if editing is currently active Make editor tabs look better when commenting Make comments meta look better Don't try to update if the value was initially set Use editor to render and edit comments Make preview optional Make tabs look better Don't switch to preview after editing Centralize attachment state Render markdown by default Fix title being "null" Fix loading attachment images Add standalone preview Fix callback url Add onsuccess callback Add file upload Fix date parsing once and for all Add more props for upload and such Fix editor border color Fix changing text after mounting Add link to guide Fix sizing of icons Add timeout for changes Add all easymde icons Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#183
204 lines
5.5 KiB
Vue
204 lines
5.5 KiB
Vue
<template>
|
|
<div class="loader-container content" :class="{ 'is-loading': labelService.loading}">
|
|
<h1>Manage labels</h1>
|
|
<p>
|
|
Click on a label to edit it.
|
|
You can edit all labels you created, you can use all labels which are associated with a task to whose list
|
|
you have access.
|
|
</p>
|
|
<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}"
|
|
>
|
|
<span
|
|
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>
|
|
{{ l.title }}
|
|
</a>
|
|
<a class="delete is-small" @click="deleteLabel(l)" v-if="userInfo.id === l.createdBy.id"></a>
|
|
</span>
|
|
</div>
|
|
<div class="column is-4" v-if="isLabelEdit">
|
|
<div class="card">
|
|
<header class="card-header">
|
|
<span class="card-header-title">
|
|
Edit Label
|
|
</span>
|
|
<a class="card-header-icon" @click="isLabelEdit = false">
|
|
<span class="icon">
|
|
<icon icon="times"/>
|
|
</span>
|
|
</a>
|
|
</header>
|
|
<div class="card-content">
|
|
<form @submit.prevent="editLabelSubmit()">
|
|
<div class="field">
|
|
<label class="label">Title</label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
placeholder="Label title"
|
|
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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Color</label>
|
|
<div class="control">
|
|
<color-picker v-model="labelEditLabel.hexColor"/>
|
|
</div>
|
|
</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}">
|
|
Save
|
|
</button>
|
|
</div>
|
|
<div class="control">
|
|
<a
|
|
class="button has-icon is-danger"
|
|
@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}">
|
|
<span class="icon">
|
|
<icon icon="trash-alt"/>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
|
|
import LabelService from '../../services/label'
|
|
import LabelModel from '../../models/label'
|
|
import ColorPicker from '../../components/input/colorPicker'
|
|
|
|
export default {
|
|
name: 'ListLabels',
|
|
components: {
|
|
ColorPicker,
|
|
editor: () => import(/* webpackPrefetch: true */ '../../components/input/editor'),
|
|
},
|
|
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>
|