|
|
<template lang="pug"> div(v-cloak="") messages(v-bind:messages="messages")
div.columns.is-multiline div.column.is-12 a.button.is-primary(v-on:click="createLabel()") New label
div.column.is-12(v-if="newLabel") div.box div.columns.is-multiline div.column.is-12 div.tags.has-addons.mb0 span.tag.is-medium(v-bind:style="{ \ color: newLabel.text_color, \ backgroundColor: newLabel.background_color \ }") {{ newLabel.text }}
span.tag is-medium kbd {{ shortcutKey(newLabel) | simpleShortcut }}
div.column div.field label.label Label name div.control input.input( type="text" placeholder="Text input" v-model="newLabel.text" )
div.column div.field label.label Shortcut div.field.has-addons p.control span.select select(v-model="newLabel.prefix_key") option(value="") option(value="ctrl") Ctrl option(value="shift") Shift option(value="ctrl shift") Ctrl + Shift
div.control div.select select(v-model="newLabel.suffix_key") option(disabled="", value="") key option(v-for="ch in shortKeys", v-bind:key="ch") {{ ch }}
div.column div.field label.label Color div.field.has-addons div.control a.button( v-bind:style="{ \ color: newLabel.text_color, \ backgroundColor: newLabel.background_color \ }" v-on:click="setColor(newLabel)" ) span.icon.is-small i.fas.fa-sync-alt
div.control.is-expanded input.input( type="text" placeholder="Text input" v-model="newLabel.background_color" )
div.column div.field label.label div.field.is-grouped p.control a.button.is-light(v-on:click="cancelCreate()") Cancel
p.control a.button.is-primary(v-on:click="addLabel()") Create label
div.card header.card-header p.card-header-title {{ labels.length }} labels
a.card-header-icon(href="#", aria-label="more options") span.icon i.fas.fa-angle-down(aria-hidden="true")
div.card-content div.mb10(v-for="label in labels", v-bind:key="label.id") div.level.is-mobile.mb0 div.level-left div.level-item p.subtitle.is-5 div.tags.has-addons.mb0 span.tag.is-medium(v-bind:style="{ \ color: label.text_color, \ backgroundColor: label.background_color \ }") {{ label.text }}
span.tag.is-medium kbd {{ shortcutKey(label) | simpleShortcut }}
div.level-right p.level-item div.field.is-grouped p.control a.button.is-text(v-on:click="editLabel(label)") span.icon.is-small i.fas.fa-pencil-alt span Edit
p.control a.button.is-text(v-on:click="removeLabel(label)") span.icon.is-small i.fas.fa-trash span Delete
div.columns(v-show="label === editedLabel") div.column div.field label.label Label name div.control input.input( type="text" placeholder="Text input" v-model="label.text" )
div.column div.field label.label Shortcut div.field.has-addons p.control span.select select(v-model="label.prefix_key") option(value="") option(value="ctrl") Ctrl option(value="shift") Shift option(value="ctrl shift") Ctrl + Shift
div.control div.select select(v-model="label.suffix_key") option(disabled="", value="") key option(v-for="ch in shortKeys", v-bind:key="ch") {{ ch }}
div.column div.field label.label Color div.field.has-addons div.control a.button.has-text-white( v-bind:style="{ backgroundColor: label.background_color }" v-on:click="setColor(label)" ) span.icon.is-small i.fas.fa-sync-alt
div.control.is-expanded input.input( type="text" placeholder="Text input" v-model="label.background_color" )
div.column div.field label.label div.field.is-grouped p.control a.button.is-light(v-on:click="cancelEdit(label)") Cancel
p.control a.button.is-primary(v-on:click="doneEdit(label)") Save changes</template>
<script>import HTTP from './http';import Messages from './messages.vue';import { simpleShortcut } from './filter';
export default { components: { Messages },
filters: { simpleShortcut },
data: () => ({ labels: [], newLabel: null, editedLabel: null, messages: [], shortKeys: 'abcdefghijklmnopqrstuvwxyz', }),
created() { HTTP.get('labels').then((response) => { this.labels = response.data; this.sortLabels(); }); },
methods: { generateColor() { const color = Math.floor(Math.random() * 0xFFFFFF).toString(16); const randomColor = '#' + ('000000' + color).slice(-6); return randomColor; },
blackOrWhite(hexcolor) { const r = parseInt(hexcolor.substr(1, 2), 16); const g = parseInt(hexcolor.substr(3, 2), 16); const b = parseInt(hexcolor.substr(5, 2), 16); return ((((r * 299) + (g * 587) + (b * 114)) / 1000) < 128) ? '#ffffff' : '#000000'; },
setColor(label) { const bgColor = this.generateColor(); const textColor = this.blackOrWhite(bgColor); label.background_color = bgColor; label.text_color = textColor; },
shortcutKey(label) { let shortcut = label.suffix_key; if (label.prefix_key) { shortcut = `${label.prefix_key} ${shortcut}`; } return shortcut; },
sortLabels() { return this.labels.sort((a, b) => ((a.text < b.text) ? -1 : 1)); },
addLabel() { HTTP.post('labels', this.newLabel) .then((response) => { this.cancelCreate(); this.labels.push(response.data); this.sortLabels(); this.messages = []; }) .catch((error) => { console.log(error); // eslint-disable-line no-console
this.messages.push('You cannot use same label name or shortcut key.'); }); },
removeLabel(label) { const labelId = label.id; HTTP.delete(`labels/${labelId}`).then(() => { const index = this.labels.indexOf(label); this.labels.splice(index, 1); }); },
createLabel() { this.newLabel = { text: '', prefix_key: null, suffix_key: null, background_color: '#209cee', text_color: '#ffffff', }; },
cancelCreate() { this.newLabel = null; },
editLabel(label) { this.beforeEditCache = Object.assign({}, label); this.editedLabel = label; },
doneEdit(label) { if (!this.editedLabel) { return; } this.editedLabel = null; label.text = label.text.trim(); if (!label.text) { this.removeLabel(label); } HTTP.patch(`labels/${label.id}`, label) .then(() => { this.sortLabels(); this.messages = []; }) .catch((error) => { console.log(error); // eslint-disable-line no-console
this.messages.push('You cannot use same label name or shortcut key.'); }); },
cancelEdit(label) { this.editedLabel = null; Object.assign(label, this.beforeEditCache); }, },};</script>
|
