Commit 58bc7b18 authored by Samir Sadyhov's avatar Samir Sadyhov 🤔

канбан-доска - добавлен чекбокс в карточку

parent 90efcc95
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex: 1; flex: 1;
min-width: 200px; min-width: 240px;
border-left: 1px dashed var(--gray); border-left: 1px dashed var(--gray);
border-right: 1px dashed var(--gray); border-right: 1px dashed var(--gray);
} }
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
.column-card { .column-card {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
min-height: 100px; min-height: 100px;
height: fit-content; height: fit-content;
width: 100%; width: 100%;
...@@ -96,6 +96,19 @@ ...@@ -96,6 +96,19 @@
user-select: none; user-select: none;
} }
.card-data {
width: calc(100% - 30px);
}
.card-action {
width: 30px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
gap: 10px;
}
.column-card-block { .column-card-block {
color: #333; color: #333;
font-size: 12px; font-size: 12px;
...@@ -196,3 +209,64 @@ ...@@ -196,3 +209,64 @@
.board-context-menu ul .uk-disabled a { .board-context-menu ul .uk-disabled a {
color: #dedede; color: #dedede;
} }
.custom-checkbox {
display: block;
position: relative;
cursor: pointer;
height: 25px;
width: 25px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.custom-checkbox .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border: 1px solid #cfcfcf;
}
.custom-checkbox:hover input ~ .checkmark {
background-color: #ccc;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #2196F3;
border-color: #2196F3;
}
.custom-checkbox .checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 8px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
...@@ -35,6 +35,9 @@ const KanbanBoard = { ...@@ -35,6 +35,9 @@ const KanbanBoard = {
stringLength: 50, stringLength: 50,
isDelete: false,
selectedItems: [],
getNextFieldNumber: function(url) { getNextFieldNumber: function(url) {
let p = url.substring(url.indexOf('?') + 1).split('&'); let p = url.substring(url.indexOf('?') + 1).split('&');
p = p.map(x => { p = p.map(x => {
...@@ -247,8 +250,10 @@ const KanbanBoard = { ...@@ -247,8 +250,10 @@ const KanbanBoard = {
}, },
contextMenu: function(el, dataRow){ contextMenu: function(el, dataRow){
let isDelete = false; this.isDelete = false;
if(this.rights.indexOf('rr_delete') !== -1 && dataRow.status != 'STATE_NOT_FINISHED') isDelete = true; if(this.rights.indexOf('rr_delete') !== -1 && dataRow.status != 'STATE_NOT_FINISHED') {
this.isDelete = true;
}
el.on('contextmenu', event => { el.on('contextmenu', event => {
$('.board-context-menu').remove(); $('.board-context-menu').remove();
...@@ -266,9 +271,9 @@ const KanbanBoard = { ...@@ -266,9 +271,9 @@ const KanbanBoard = {
}) })
) )
.append('<li class="uk-nav-divider"></li>') .append('<li class="uk-nav-divider"></li>')
.append($(`<li ${isDelete ? '' : 'class="uk-disabled"'} ><a href="javascript:void(0);"><span class="uk-margin-small-right" uk-icon="icon: trash"></span>Удалить запись</a></li>`) .append($(`<li ${this.isDelete ? '' : 'class="uk-disabled"'} ><a href="javascript:void(0);"><span class="uk-margin-small-right" uk-icon="icon: trash"></span>Удалить запись</a></li>`)
.on('click', e => { .on('click', e => {
isDelete ? this.removeRegistryRow(dataRow.dataUUID, e) : false; this.isDelete ? this.removeRegistryRow(dataRow.dataUUID, e) : false;
}) })
) )
) )
...@@ -277,28 +282,64 @@ const KanbanBoard = { ...@@ -277,28 +282,64 @@ const KanbanBoard = {
}); });
}, },
getCheckbox: function(){
const checkboxContainer = $('<label>', {class: "custom-checkbox"});
const inputCheckbox = $(`<input type="checkbox">`);
const checkmark = $('<span>', {class: "checkmark"});
checkboxContainer.append(inputCheckbox, checkmark);
return {checkboxContainer, inputCheckbox};
},
getColumnCard: function(item, columnID){ getColumnCard: function(item, columnID){
const {dataUUID, documentID, fieldValue, fieldKey} = item; const {dataUUID, documentID, fieldValue, fieldKey} = item;
const cardContainer = $('<div>', {class: 'column-card', id: `card-${dataUUID}`}); const cardContainer = $('<div>', {class: 'column-card', id: `card-${dataUUID}`});
const cardData = $('<div>', {class: 'card-data'});
const cardAction = $('<div>', {class: 'card-action'});
const {checkboxContainer, inputCheckbox} = this.getCheckbox();
cardContainer.attr('data-uuid', dataUUID); cardContainer.attr('data-uuid', dataUUID);
cardContainer.attr('data-documentid', documentID); cardContainer.attr('data-documentid', documentID);
cardContainer.attr('data-parentcolumnid', columnID); cardContainer.attr('data-parentcolumnid', columnID);
cardContainer.attr('draggable', true); cardContainer.attr('draggable', true);
cardContainer.append(cardData, cardAction);
cardAction.append(checkboxContainer);
for(let i = 0; i < this.fields.length; i++) { for(let i = 0; i < this.fields.length; i++) {
const {title, code, type, prefix = ''} = this.fields[i]; const {title, code, type, prefix = ''} = this.fields[i];
if(!fieldValue.hasOwnProperty(code)) continue; if(!fieldValue.hasOwnProperty(code)) continue;
switch (type) { switch (type) {
case 'title': cardContainer.append(this.getTitleBlock(fieldValue[code], dataUUID)); break; case 'title': cardData.append(this.getTitleBlock(fieldValue[code], dataUUID)); break;
case 'sum': cardContainer.append(this.getSumBlock(fieldValue[code], prefix)); break; case 'sum': cardData.append(this.getSumBlock(fieldValue[code], prefix)); break;
case 'reglink': cardContainer.append(this.getReglinkBlock(title, code, fieldValue, fieldKey)); break; case 'reglink': cardData.append(this.getReglinkBlock(title, code, fieldValue, fieldKey)); break;
case 'user': cardContainer.append(this.getUserBlock(title, fieldValue[code])); break; case 'user': cardData.append(this.getUserBlock(title, fieldValue[code])); break;
default: cardContainer.append(this.getDefaultBlock(title, fieldValue[code])); break; default: cardData.append(this.getDefaultBlock(title, fieldValue[code])); break;
} }
} }
inputCheckbox.on('change', e => {
if(e.target.checked) {
if(this.selectedItems.indexOf(documentID) === -1) {
this.selectedItems.push(documentID);
}
} else {
let index = this.selectedItems.indexOf(documentID);
if(index !== -1) this.selectedItems.splice(index, 1);
}
if(this.selectedItems.length > 0) {
$('.action-menu-item').removeClass('uk-disabled');
if($('.action-menu-item.item-delete').length) {
if(!this.isDelete) $('.action-menu-item.item-delete').addClass('uk-disabled');
}
} else {
$('.action-menu-item').addClass('uk-disabled');
}
});
cardContainer.on("dragstart", event => this.drag({event, dataUUID, documentID})); cardContainer.on("dragstart", event => this.drag({event, dataUUID, documentID}));
this.contextMenu(cardContainer, item); this.contextMenu(cardContainer, item);
...@@ -476,7 +517,7 @@ const KanbanBoard = { ...@@ -476,7 +517,7 @@ const KanbanBoard = {
await this.getDictInfo(); await this.getDictInfo();
const saveParam = sessionStorage.getItem(`filterParam_${Cons.getCurrentPage().code}`); const saveParam = sessionStorage.getItem(`filterParam_${Cons.getCurrentPage().code}_${AS.OPTIONS.currentUser.userid}`);
if(!saveParam) this.render(); if(!saveParam) this.render();
Cons.hideLoader(); Cons.hideLoader();
...@@ -514,7 +555,7 @@ compContainer.off() ...@@ -514,7 +555,7 @@ compContainer.off()
KanbanBoard.render(); KanbanBoard.render();
}).on('filterRegistryRows', e => { }).on('filterRegistryRows', e => {
if(!e.hasOwnProperty('eventParam')) return; if(!e.hasOwnProperty('eventParam')) return;
const {filterSearchUrl} = e.eventParam; const {filterSearchUrl = null} = e.eventParam;
KanbanBoard.filterSearchUrl = filterSearchUrl; KanbanBoard.filterSearchUrl = filterSearchUrl;
KanbanBoard.reset(); KanbanBoard.reset();
KanbanBoard.render(); KanbanBoard.render();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment