TaskModal: Checklist component extracted (#12287)
* wip: checklist component extracted * fixing icons: Trash can - Delete Little X - Remove Big X - Close Block - Block * remove checklist code from taskModal and replace with the component + fix styles * save checklist item on blur * remove console.info * fix pr comments + empty checklist item + icon
This commit is contained in:
negue
@@ -0,0 +1,46 @@
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import CheckList from './checklist.vue';
|
||||
|
||||
const stories = storiesOf('CheckList', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('simple', () => ({
|
||||
components: { CheckList },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px; background: white">
|
||||
<check-list :items.sync="checklist">
|
||||
|
||||
</check-list>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
Data: <br/>
|
||||
{{ checklist }}
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
checklist: [
|
||||
{
|
||||
id: 'c0890cd2-3c69-4889-bf2c-b63ac0ee6628',
|
||||
text: 'first',
|
||||
completed: false,
|
||||
},
|
||||
{
|
||||
id: '5b913020-b340-4099-9a53-afcd27dc5637',
|
||||
text: 'second',
|
||||
completed: true,
|
||||
},
|
||||
{
|
||||
id: '77b52a8e-4a0e-4717-9650-55fb5462b42f',
|
||||
text: 'third',
|
||||
completed: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div class="checklist-component">
|
||||
<label v-once class="mb-1">{{ $t('checklist') }}</label>
|
||||
<br>
|
||||
<draggable
|
||||
v-model="checklist"
|
||||
:options="{
|
||||
handle: '.grippy',
|
||||
filter: '.task-dropdown',
|
||||
disabled: disabled,
|
||||
}"
|
||||
@update="updateChecklist"
|
||||
>
|
||||
<div
|
||||
v-for="(item, $index) in checklist"
|
||||
:key="item.id"
|
||||
class="inline-edit-input-group checklist-group input-group"
|
||||
>
|
||||
<span
|
||||
class="grippy"
|
||||
v-html="icons.grip"
|
||||
v-if="!disabled"
|
||||
>
|
||||
</span>
|
||||
|
||||
<checkbox :checked.sync="item.completed"
|
||||
:disabled="disabled"
|
||||
class="input-group-prepend"
|
||||
:class="{'cursor-auto': disabled}"
|
||||
:id="`checklist-${item.id}`"/>
|
||||
|
||||
<input
|
||||
v-model="item.text"
|
||||
class="inline-edit-input checklist-item form-control"
|
||||
type="text"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<span
|
||||
class="input-group-append"
|
||||
v-if="!disabled"
|
||||
@click="removeChecklistItem($index)"
|
||||
>
|
||||
<div v-once
|
||||
class="svg-icon destroy-icon"
|
||||
v-html="icons.destroy"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</draggable>
|
||||
<div
|
||||
class="inline-edit-input-group checklist-group input-group new-checklist"
|
||||
v-if="!disabled"
|
||||
>
|
||||
<span class="input-group-prepend new-icon"
|
||||
v-once
|
||||
v-html="icons.positive">
|
||||
</span>
|
||||
|
||||
<input
|
||||
v-model="newChecklistItem"
|
||||
class="inline-edit-input checklist-item form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newChecklistItem')"
|
||||
@keypress.enter="setHasPossibilityOfIMEConversion(false)"
|
||||
@keyup.enter="addChecklistItem($event, true)"
|
||||
@blur="addChecklistItem($event, false)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import clone from 'lodash/clone';
|
||||
import draggable from 'vuedraggable';
|
||||
import uuid from 'uuid';
|
||||
|
||||
import positiveIcon from '@/assets/svg/positive.svg';
|
||||
import deleteIcon from '@/assets/svg/delete.svg';
|
||||
import chevronIcon from '@/assets/svg/chevron.svg';
|
||||
import gripIcon from '@/assets/svg/grip.svg';
|
||||
import checkbox from '@/components/ui/checkbox';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
checkbox,
|
||||
},
|
||||
name: 'checklist',
|
||||
data () {
|
||||
return {
|
||||
checklist: this.items,
|
||||
hasPossibilityOfIMEConversion: true,
|
||||
newChecklistItem: null,
|
||||
icons: Object.freeze({
|
||||
positive: positiveIcon,
|
||||
destroy: deleteIcon,
|
||||
chevron: chevronIcon,
|
||||
grip: gripIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateChecklist () {
|
||||
this.$emit('update:items', this.checklist);
|
||||
},
|
||||
setHasPossibilityOfIMEConversion (bool) {
|
||||
this.hasPossibilityOfIMEConversion = bool;
|
||||
},
|
||||
addChecklistItem (e, checkIME) {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const newChecklistItemText = (this.newChecklistItem || '').trim();
|
||||
|
||||
if ((checkIME && this.hasPossibilityOfIMEConversion)
|
||||
|| !newChecklistItemText) {
|
||||
return;
|
||||
}
|
||||
|
||||
const checkListItem = {
|
||||
id: uuid.v4(),
|
||||
text: newChecklistItemText,
|
||||
completed: false,
|
||||
};
|
||||
this.checklist.push(checkListItem);
|
||||
this.newChecklistItem = null;
|
||||
this.setHasPossibilityOfIMEConversion(true);
|
||||
this.updateChecklist();
|
||||
},
|
||||
removeChecklistItem (i) {
|
||||
this.checklist.splice(i, 1);
|
||||
this.updateChecklist();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.checklist-component {
|
||||
|
||||
.checklist-group {
|
||||
height: 2rem;
|
||||
border-top: 1px solid $gray-500;
|
||||
|
||||
&.new-checklist {
|
||||
border-bottom: 1px solid $gray-500;
|
||||
}
|
||||
|
||||
.inline-edit-input {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
margin-left: 0.375rem;
|
||||
margin-top: 0.475rem;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
&:not(.new-icon) {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
&.new-icon {
|
||||
margin-left: 0.688rem;
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-append,
|
||||
.input-group-prepend {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
padding: 0;
|
||||
margin-left: 0.75rem;
|
||||
margin-top: 0.188rem;
|
||||
margin-bottom: 0.25rem;
|
||||
height: 1.5rem;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.71;
|
||||
letter-spacing: normal;
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
.new-icon {
|
||||
cursor: default;
|
||||
|
||||
svg {
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
object-fit: contain;
|
||||
fill: $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.grippy {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
width: 0.625rem;
|
||||
height: 1rem;
|
||||
object-fit: contain;
|
||||
color: $gray-200;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
margin-bottom: 0px;
|
||||
border-radius: 0px;
|
||||
border: none !important;
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.checklist-group {
|
||||
.grippy {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.destroy-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: text;
|
||||
|
||||
.destroy-icon {
|
||||
display: inline-block;
|
||||
color: $gray-200;
|
||||
|
||||
&:hover {
|
||||
color: $maroon-50;
|
||||
}
|
||||
}
|
||||
|
||||
.grippy {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
height: 1.5rem;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.71;
|
||||
letter-spacing: normal;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -126,43 +126,7 @@
|
||||
v-if="checklistEnabled"
|
||||
class="option mt-0"
|
||||
>
|
||||
<label v-once>{{ $t('checklist') }}</label>
|
||||
<br>
|
||||
<draggable
|
||||
v-model="checklist"
|
||||
:options="{handle: '.grippy', filter: '.task-dropdown'}"
|
||||
@update="sortedChecklist"
|
||||
>
|
||||
<div
|
||||
v-for="(item, $index) in checklist"
|
||||
:key="item.id"
|
||||
class="inline-edit-input-group checklist-group input-group"
|
||||
>
|
||||
<span class="grippy"></span>
|
||||
<input
|
||||
v-model="item.text"
|
||||
class="inline-edit-input checklist-item form-control"
|
||||
type="text"
|
||||
>
|
||||
<span
|
||||
class="input-group-append"
|
||||
@click="removeChecklistItem($index)"
|
||||
>
|
||||
<div
|
||||
class="svg-icon destroy-icon"
|
||||
v-html="icons.destroy"
|
||||
></div>
|
||||
</span>
|
||||
</div>
|
||||
</draggable>
|
||||
<input
|
||||
v-model="newChecklistItem"
|
||||
class="inline-edit-input checklist-item form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newChecklistItem')"
|
||||
@keypress.enter="setHasPossibilityOfIMEConversion(false)"
|
||||
@keyup.enter="addChecklistItem($event)"
|
||||
>
|
||||
<checklist :items.sync="task.checklist" />
|
||||
</div>
|
||||
<div
|
||||
v-if="task.type === 'habit'"
|
||||
@@ -1015,72 +979,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-group {
|
||||
border-top: 1px solid $gray-500;
|
||||
|
||||
.input-group-append {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// From: https://codepen.io/zachariab/pen/wkrbc
|
||||
span.grippy {
|
||||
content: '....';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
line-height: 5px;
|
||||
padding: 3px 4px;
|
||||
cursor: move;
|
||||
vertical-align: middle;
|
||||
margin-top: .5em;
|
||||
margin-right: .3em;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
color: $gray-300;
|
||||
text-shadow: 1px 0 1px black;
|
||||
}
|
||||
|
||||
span.grippy::after {
|
||||
content: '.. .. .. ..';
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
margin-bottom: 0px;
|
||||
border-radius: 0px;
|
||||
border: none !important;
|
||||
padding-left: 36px;
|
||||
|
||||
&:last-child {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left 10px;
|
||||
border-top: 1px solid $gray-500 !important;
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
background-size: 10px 10px;
|
||||
background-image: url(~@/assets/svg/for-css/positive.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-group {
|
||||
.destroy-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: text;
|
||||
.destroy-icon {
|
||||
display: inline-block;
|
||||
color: $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-task-btn, .cancel-task-btn {
|
||||
.delete-task-btn, .cancel-task-btn {
|
||||
cursor: pointer;
|
||||
&:hover, &:focus, &:active {
|
||||
text-decoration: underline;
|
||||
@@ -1243,12 +1142,11 @@
|
||||
import clone from 'lodash/clone';
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
import moment from 'moment';
|
||||
import uuid from 'uuid';
|
||||
import draggable from 'vuedraggable';
|
||||
import toggleSwitch from '@/components/ui/toggleSwitch';
|
||||
import markdownDirective from '@/directives/markdown';
|
||||
import { mapGetters, mapActions, mapState } from '@/libs/store';
|
||||
import TagsPopup from './tagsPopup';
|
||||
import checklist from './modal-controls/checklist';
|
||||
|
||||
import informationIcon from '@/assets/svg/information.svg';
|
||||
import difficultyTrivialIcon from '@/assets/svg/difficulty-trivial.svg';
|
||||
@@ -1268,7 +1166,7 @@ export default {
|
||||
TagsPopup,
|
||||
Datepicker,
|
||||
toggleSwitch,
|
||||
draggable,
|
||||
checklist,
|
||||
},
|
||||
directives: {
|
||||
markdown: markdownDirective,
|
||||
@@ -1300,7 +1198,6 @@ export default {
|
||||
members: [],
|
||||
memberNamesById: {},
|
||||
assignedMembers: [],
|
||||
checklist: [],
|
||||
showAdvancedOptions: false,
|
||||
attributesStrings: {
|
||||
str: 'strength',
|
||||
@@ -1309,7 +1206,6 @@ export default {
|
||||
per: 'perception',
|
||||
},
|
||||
calendarHighlights: { dates: [new Date()] },
|
||||
hasPossibilityOfIMEConversion: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -1486,34 +1382,6 @@ export default {
|
||||
toggleTagSelect () {
|
||||
this.showTagsSelect = !this.showTagsSelect;
|
||||
},
|
||||
sortedChecklist (data) {
|
||||
const sorting = clone(this.task.checklist);
|
||||
const movingItem = sorting[data.oldIndex];
|
||||
sorting.splice(data.oldIndex, 1);
|
||||
sorting.splice(data.newIndex, 0, movingItem);
|
||||
this.task.checklist = sorting;
|
||||
},
|
||||
setHasPossibilityOfIMEConversion (bool) {
|
||||
this.hasPossibilityOfIMEConversion = bool;
|
||||
},
|
||||
addChecklistItem (e) {
|
||||
if (e) e.preventDefault();
|
||||
if (this.hasPossibilityOfIMEConversion) return;
|
||||
const checkListItem = {
|
||||
id: uuid.v4(),
|
||||
text: this.newChecklistItem,
|
||||
completed: false,
|
||||
};
|
||||
this.task.checklist.push(checkListItem);
|
||||
// @TODO: managing checklist separately to help with sorting on the UI
|
||||
this.checklist.push(checkListItem);
|
||||
this.newChecklistItem = null;
|
||||
this.setHasPossibilityOfIMEConversion(true);
|
||||
},
|
||||
removeChecklistItem (i) {
|
||||
this.task.checklist.splice(i, 1);
|
||||
this.checklist = clone(this.task.checklist);
|
||||
},
|
||||
weekdaysMin (dayNumber) {
|
||||
return moment.weekdaysMin(dayNumber);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user