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

constructor/components/Канбан-доска/Канбан-доска.css

@@ -21,7 +21,7 @@
   justify-content: flex-start;
   align-items: center;
   flex: 1;
-  min-width: 200px;
+  min-width: 240px;
   border-left: 1px dashed var(--gray);
   border-right: 1px dashed var(--gray);
 }
@@ -84,7 +84,7 @@
 
 .column-card {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   min-height: 100px;
   height: fit-content;
   width: 100%;
@@ -96,6 +96,19 @@
   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 {
   color: #333;
   font-size: 12px;
@@ -196,3 +209,64 @@
 .board-context-menu ul .uk-disabled a {
   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);
+}

constructor/components/Канбан-доска/Канбан-доска.js

@@ -35,6 +35,9 @@ const KanbanBoard = {
 
   stringLength: 50,
 
+  isDelete: false,
+  selectedItems: [],
+
   getNextFieldNumber: function(url) {
     let p = url.substring(url.indexOf('?') + 1).split('&');
     p = p.map(x => {
@@ -247,8 +250,10 @@ const KanbanBoard = {
   },
 
   contextMenu: function(el, dataRow){
-    let isDelete = false;
-    if(this.rights.indexOf('rr_delete') !== -1 && dataRow.status != 'STATE_NOT_FINISHED') isDelete = true;
+    this.isDelete = false;
+    if(this.rights.indexOf('rr_delete') !== -1 && dataRow.status != 'STATE_NOT_FINISHED') {
+      this.isDelete = true;
+    }
 
     el.on('contextmenu', event => {
       $('.board-context-menu').remove();
@@ -266,9 +271,9 @@ const KanbanBoard = {
           })
         )
         .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 => {
-            isDelete ? this.removeRegistryRow(dataRow.dataUUID, e) : false;
+            this.isDelete ? this.removeRegistryRow(dataRow.dataUUID, e) : false;
           })
         )
       )
@@ -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){
     const {dataUUID, documentID, fieldValue, fieldKey} = item;
     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-documentid', documentID);
     cardContainer.attr('data-parentcolumnid', columnID);
     cardContainer.attr('draggable', true);
 
+    cardContainer.append(cardData, cardAction);
+
+    cardAction.append(checkboxContainer);
+
     for(let i = 0; i < this.fields.length; i++) {
       const {title, code, type, prefix = '₸'} = this.fields[i];
       if(!fieldValue.hasOwnProperty(code)) continue;
 
       switch (type) {
-        case 'title': cardContainer.append(this.getTitleBlock(fieldValue[code], dataUUID)); break;
-        case 'sum': cardContainer.append(this.getSumBlock(fieldValue[code], prefix)); break;
-        case 'reglink': cardContainer.append(this.getReglinkBlock(title, code, fieldValue, fieldKey)); break;
-        case 'user': cardContainer.append(this.getUserBlock(title, fieldValue[code])); break;
-        default: cardContainer.append(this.getDefaultBlock(title, fieldValue[code])); break;
+        case 'title': cardData.append(this.getTitleBlock(fieldValue[code], dataUUID)); break;
+        case 'sum': cardData.append(this.getSumBlock(fieldValue[code], prefix)); break;
+        case 'reglink': cardData.append(this.getReglinkBlock(title, code, fieldValue, fieldKey)); break;
+        case 'user': cardData.append(this.getUserBlock(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}));
 
     this.contextMenu(cardContainer, item);
@@ -476,7 +517,7 @@ const KanbanBoard = {
 
         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();
 
         Cons.hideLoader();
@@ -514,7 +555,7 @@ compContainer.off()
   KanbanBoard.render();
 }).on('filterRegistryRows', e => {
   if(!e.hasOwnProperty('eventParam')) return;
-  const {filterSearchUrl} = e.eventParam;
+  const {filterSearchUrl = null} = e.eventParam;
   KanbanBoard.filterSearchUrl = filterSearchUrl;
   KanbanBoard.reset();
   KanbanBoard.render();