From 36e71df8eb45dee826558a35cbbc3ccabb4a54c5 Mon Sep 17 00:00:00 2001 From: Hao Sun Date: Wed, 27 Oct 2021 10:04:29 +0800 Subject: [PATCH 1/4] * support to limit kanban board width. --- www/js/zui/kanban/min.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/js/zui/kanban/min.js b/www/js/zui/kanban/min.js index ca1bfda77b..dc6f1fe559 100644 --- a/www/js/zui/kanban/min.js +++ b/www/js/zui/kanban/min.js @@ -1,7 +1,7 @@ /*! - * ZUI: ZUI Kanban View - v1.9.2 - 2021-10-26 + * ZUI: ZUI Kanban View - v1.9.2 - 2021-10-27 * http://openzui.com * GitHub: https://github.com/easysoft/zui.git * Copyright (c) 2021 cnezsoft.com; Licensed MIT */ -!function(a){"use strict";var n="zui.kanban",e="object"==typeof CSS&&CSS.supports("display","flex"),t=function(o,i){var d=this;d.name=n,d.$=a(o).addClass("kanban"),d.options=i=a.extend({},t.DEFAULTS,this.$.data(),i),d.data=i.data||[],d.render(d.data);var s=function(n){if(i.onAction){var e=a(this);i.onAction(e.data("action"),e,n,d)}};if(d.$.on("click",".action",s).on("dblclick",".action-dbc",s),"auto"===i.droppable&&(i.droppable=!i.readonly),i.droppable){var r={selector:".kanban-item",target:'.kanban-lane-col:not([data-type="EMPTY"])',drop:function(a){"function"==typeof i.droppable?i.droppable(a):i.onAction&&i.onAction("dropItem",a.element,a,d)}};"object"==typeof i.droppable&&a.extend(r,i.droppable),d.$.droppable(r)}e&&i.useFlex||a(window).on("resize",function(){d.adjustSize()}),i.useFlex&&e||d.$.addClass("not-use-flex"),i.onCreate&&i.onCreate(d)};t.prototype.render=function(a){var n=this;a&&(n.data=a),n.data&&!Array.isArray(n.data)&&(n.data=[n.data]);var t=n.data||[];n.options.beforeRender&&n.options.beforeRender(n,t),n.$.toggleClass("kanban-readonly",!!n.options.readonly).toggleClass("kanban-no-lane-name",!!n.options.noLaneName),n.$.children(".kanban-board").addClass("kanban-expired");for(var o=0;o-1){var o=this.data[t];n=a.extend(o,n),this.data[t]=n}else this.data.push(n)}n.id||(n.id=a.zui.uuid());var i=this,d=i.$,s=d.children('.kanban-board[data-id="'+n.id+'"]');s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(d),e||s.addClass("no-flex")),i.renderKanbanHeader(n,s),s.children(".kanban-lane").addClass("kanban-expired");for(var r=n.lanes||[],l=0;l .kanban-lane-items .kanban-item').length,b=s.find('.kanban-header-col[data-id="'+c+'"] > .title > .count');i.options.countRender?i.options.countRender(b,p,n.columns[l],i):b.text(p||(i.options.showZeroCount?0:""))}i.adjustKanbanSize(n,s),i.options.onRenderKanban&&i.options.onRenderKanban(s,n,i)},t.prototype.renderKanbanHeader=function(n,t){var o=this;t=t||o.$.children('.kanban-board[data-id="'+n.id+'"]');var i=t.children(".kanban-header");i.length||(i=a('
').prependTo(t),e||i.addClass("clearfix")),i.children(".kanban-col").addClass("kanban-expired");for(var d=n.columns,s={},r=!1,l=0;l','
','
','','',t.options.showCount?'':"","
","
",'
',"
",""].join("")).appendTo(e)),o.data("col",n),o.attr("data-type",n.type).attr("data-subs-count",n.subs.length);var i=o.children(".kanban-header-col");i.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var d=i.find(".title>.text").text(n.name);n.color&&d.css("color",n.color),t.options.showCount&&i.find(".title>.count").text(n.count||(t.options.showZeroCount?0:"")),t.options.onRenderHeaderCol&&t.options.onRenderHeaderCol(o,n,e)},t.prototype.renderHeaderCol=function(n,e,t){var o=this;if(n.parentType&&t){var i=e.children('.kanban-header-parent-col[data-id="'+t.id+'"]');i.attr("data-subs-count",t.subs.length),o.options.useFlex&&i.css("flex",t.subs.length+" 1 0%"),e=i.children(".kanban-header-sub-cols")}var d=e.children('.kanban-header-col[data-id="'+n.id+'"]'),s="ADD"===n.id;if(d.length)d.removeClass("kanban-expired"),s&&d.appendTo(e);else{d=a(['
',"<"+(s?"a":"div")+' class="title">','','',o.options.showCount?'':"","","
"].join("")).appendTo(e),s?d.children(".title").addClass("action").attr("data-action","addCol"):(d.children(".title").addClass("action-dbc").attr("data-action","editCol"),o.options.readonly||d.append(['
','',"
"].join("")));var r=o.options.minColWidth;r&&d.css("min-width",r)}d.data("col",n),d.attr("data-type",n.type),d.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var l=d.find(".title>.text").text(n.name);n.color&&l.css("color",n.color),o.options.showCount&&d.find(".title>.count").text(n.count||(o.options.showZeroCount?0:"")),o.options.onRenderHeaderCol&&o.options.onRenderHeaderCol(d,n,e)},t.prototype.renderLane=function(n,t,o,i){var d=this;o=o||d.$.children('.kanban-board[data-id="'+n.kanban+'"]');var s=o.children('.kanban-lane[data-id="'+n.id+'"]');if(s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(o),e||s.addClass("clearfix")),s.data("lane",n),!d.options.noLaneName){var r=s.children('.kanban-lane-name[data-id="'+n.id+'"]');r.length||(r=a('
').appendTo(s)),r.empty().attr("title",n.name).append(a('').text(n.name)),n.color&&r.css("background-color",n.color),d.options.onRenderLaneName&&d.options.onRenderLaneName(r,n,o,t)}s.children(".kanban-col,.kanban-sub-lanes").addClass("kanban-expired"),s.toggleClass("has-sub-lane",!!n.subLanes),n.subLanes?d.renderSubLanes(n,t,s):d.renderLaneItems(t,n.items,s,n,i),d.options.readonly||d.renderLaneCol({id:"EMPTY",type:"EMPTY"},s),s.children(".kanban-expired").remove()},t.prototype.renderSubLanes=function(n,e,t){var o=this,i=t.children('.kanban-sub-lanes[data-id="'+n.id+'"]');i.length?i.removeClass("kanban-expired"):i=a('
').appendTo(t),i.children(".kanban-sub-lane").addClass("kanban-expired");for(var d=0;d').appendTo(o),e||d.addClass("clearfix")),d.children(".kanban-col").addClass("kanban-expired"),this.renderLaneItems(t,n.items,d,n,i),d.children(".kanban-expired").remove()},t.prototype.renderLaneItems=function(a,n,e,t,o){for(var i=this,d=0;d').appendTo(e),"EMPTY"!==n.id&&(o.append('
'),t.options.readonly||o.append(['
','","
"].join("")));var i=t.options;i.minColWidth&&o.css("min-width",i.minColWidth),i.maxColHeight&&o.find(".kanban-lane-items").css("max-height",i.maxColHeight),i.laneItemsClass&&o.find(".kanban-lane-items").addClass(i.laneItemsClass),i.laneColClass&&o.addClass(i.laneColClass)}return"EMPTY"===n.id&&o.appendTo(e),o.attr("data-type",n.type),o},t.prototype.renderLaneItem=function(n,e,t,o,i){var d=e.children('.kanban-item[data-id="'+n.id+'"]');if(d.length?d.removeClass("kanban-expired"):d=a('
').appendTo(e),this.options.itemRender)this.options.itemRender(n,d,t,o,i);else{var s=d.find(".title");s.length||(s=a('
').appendTo(d)),s.text(n.name||n.title)}return d},t.prototype.adjustKanbanSize=function(n,t){for(var o=this,i=n.columns,d=o.options.noLaneName?0:o.options.laneNameWidth,s=o.options.readonly?0:1,r=0;r-1){var o=this.data[t];n=a.extend(o,n),this.data[t]=n}else this.data.push(n)}n.id||(n.id=a.zui.uuid());var i=this,d=i.$,s=d.children('.kanban-board[data-id="'+n.id+'"]');s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(d),e||s.addClass("no-flex")),i.renderKanbanHeader(n,s),s.children(".kanban-lane").addClass("kanban-expired");for(var r=n.lanes||[],l=0;l .kanban-lane-items .kanban-item').length,h=s.find('.kanban-header-col[data-id="'+c+'"] > .title > .count');i.options.countRender?i.options.countRender(h,p,n.columns[l],i):h.text(p||(i.options.showZeroCount?0:""))}i.adjustKanbanSize(n,s),i.options.onRenderKanban&&i.options.onRenderKanban(s,n,i)},t.prototype.renderKanbanHeader=function(n,t){var o=this;t=t||o.$.children('.kanban-board[data-id="'+n.id+'"]');var i=t.children(".kanban-header");i.length||(i=a('
').prependTo(t),e||i.addClass("clearfix")),i.children(".kanban-col").addClass("kanban-expired");for(var d=n.columns,s={},r=!1,l=0;l','
','
','','',t.options.showCount?'':"","
","
",'
',"
",""].join("")).appendTo(e)),o.data("col",n),o.attr("data-type",n.type).attr("data-subs-count",n.subs.length);var i=o.children(".kanban-header-col");i.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var d=i.find(".title>.text").text(n.name);n.color&&d.css("color",n.color),t.options.showCount&&i.find(".title>.count").text(n.count||(t.options.showZeroCount?0:"")),t.options.onRenderHeaderCol&&t.options.onRenderHeaderCol(o,n,e)},t.prototype.renderHeaderCol=function(n,e,t){var o=this;if(n.parentType&&t){var i=e.children('.kanban-header-parent-col[data-id="'+t.id+'"]');i.attr("data-subs-count",t.subs.length),o.options.useFlex&&i.css("flex",t.subs.length+" 1 0%"),e=i.children(".kanban-header-sub-cols")}var d=e.children('.kanban-header-col[data-id="'+n.id+'"]'),s="ADD"===n.id;if(d.length)d.removeClass("kanban-expired"),s&&d.appendTo(e);else{d=a(['
',"<"+(s?"a":"div")+' class="title">','','',o.options.showCount?'':"","","
"].join("")).appendTo(e),s?d.children(".title").addClass("action").attr("data-action","addCol"):(d.children(".title").addClass("action-dbc").attr("data-action","editCol"),o.options.readonly||d.append(['
','',"
"].join("")));var r=o.options.minColWidth;r&&d.css("min-width",r);var l=o.options.maxColWidth;l&&d.css("max-width",o.options.maxColWidth)}d.data("col",n),d.attr("data-type",n.type),d.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var c=d.find(".title>.text").text(n.name);n.color&&c.css("color",n.color),o.options.showCount&&d.find(".title>.count").text(n.count||(o.options.showZeroCount?0:"")),o.options.onRenderHeaderCol&&o.options.onRenderHeaderCol(d,n,e)},t.prototype.renderLane=function(n,t,o,i){var d=this;o=o||d.$.children('.kanban-board[data-id="'+n.kanban+'"]');var s=o.children('.kanban-lane[data-id="'+n.id+'"]');if(s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(o),e||s.addClass("clearfix")),s.data("lane",n),!d.options.noLaneName){var r=s.children('.kanban-lane-name[data-id="'+n.id+'"]');r.length||(r=a('
').appendTo(s)),r.empty().attr("title",n.name).append(a('').text(n.name)),n.color&&r.css("background-color",n.color),d.options.onRenderLaneName&&d.options.onRenderLaneName(r,n,o,t)}s.children(".kanban-col,.kanban-sub-lanes").addClass("kanban-expired"),s.toggleClass("has-sub-lane",!!n.subLanes),n.subLanes?d.renderSubLanes(n,t,s):d.renderLaneItems(t,n.items,s,n,i),d.options.readonly||d.renderLaneCol({id:"EMPTY",type:"EMPTY"},s),s.children(".kanban-expired").remove()},t.prototype.renderSubLanes=function(n,e,t){var o=this,i=t.children('.kanban-sub-lanes[data-id="'+n.id+'"]');i.length?i.removeClass("kanban-expired"):i=a('
').appendTo(t),i.children(".kanban-sub-lane").addClass("kanban-expired");for(var d=0;d').appendTo(o),e||d.addClass("clearfix")),d.children(".kanban-col").addClass("kanban-expired"),this.renderLaneItems(t,n.items,d,n,i),d.children(".kanban-expired").remove()},t.prototype.renderLaneItems=function(a,n,e,t,o){for(var i=this,d=0;d').appendTo(e),"EMPTY"!==n.id&&(o.append('
'),t.options.readonly||o.append(['
','","
"].join("")));var i=t.options;i.minColWidth&&o.css("min-width",i.minColWidth),i.maxColWidth&&o.css("max-width",i.maxColWidth),i.maxColHeight&&o.find(".kanban-lane-items").css("max-height",i.maxColHeight),i.laneItemsClass&&o.find(".kanban-lane-items").addClass(i.laneItemsClass),i.laneColClass&&o.addClass(i.laneColClass)}return"EMPTY"===n.id&&o.appendTo(e),o.attr("data-type",n.type),o},t.prototype.renderLaneItem=function(n,e,t,o,i){var d=e.children('.kanban-item[data-id="'+n.id+'"]');if(d.length?d.removeClass("kanban-expired"):d=a('
').appendTo(e),d.data("item",n),this.options.itemRender)this.options.itemRender(n,d,t,o,i);else{var s=d.find(".title");s.length||(s=a('
').appendTo(d)),s.text(n.name||n.title)}return d},t.prototype.adjustKanbanSize=function(n,t){for(var o=this,i=n.columns,d=o.options.noLaneName?0:o.options.laneNameWidth,s=o.options.readonly?0:1,r=0;r Date: Wed, 27 Oct 2021 13:52:27 +0800 Subject: [PATCH 2/4] * adjust layout for kanban page. --- module/execution/css/kanban.css | 6 +----- www/js/zui/kanban/min.js | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/module/execution/css/kanban.css b/module/execution/css/kanban.css index ea21b9413e..0ca809f2c3 100644 --- a/module/execution/css/kanban.css +++ b/module/execution/css/kanban.css @@ -1,8 +1,4 @@ -#header {position: fixed; top: 0; left: 0; right: 0; z-index: 10;} -#mainMenu {position: fixed; padding: 10px 15px; top: 60px; left: 0; right: 0; background-color: #efefef; z-index: 0;} -#main {padding-bottom: 0; padding-top: 50px;} -#main > .container {max-width: none!important; padding: 0} -#kanbanContainer {border-radius: 0; margin: 48px 0 0 0;} +#main > .container {max-width: 1960px!important; padding: 0 10px} .kanban + .kanban {margin-top: 15px} .kanban-item > .title { display: block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis} diff --git a/www/js/zui/kanban/min.js b/www/js/zui/kanban/min.js index dc6f1fe559..bbb4a890c3 100644 --- a/www/js/zui/kanban/min.js +++ b/www/js/zui/kanban/min.js @@ -4,4 +4,4 @@ * GitHub: https://github.com/easysoft/zui.git * Copyright (c) 2021 cnezsoft.com; Licensed MIT */ -!function(a){"use strict";var n="zui.kanban",e="object"==typeof CSS&&CSS.supports("display","flex"),t=function(o,i){var d=this;d.name=n,d.$=a(o).addClass("kanban"),d.options=i=a.extend({},t.DEFAULTS,this.$.data(),i),d.data=i.data||[],d.render(d.data);var s=function(n){if(i.onAction){var e=a(this);i.onAction(e.data("action"),e,n,d)}};if(d.$.on("click",".action",s).on("dblclick",".action-dbc",s),"auto"===i.droppable&&(i.droppable=!i.readonly),i.droppable){var r={selector:".kanban-item",target:'.kanban-lane-col:not([data-type="EMPTY"])',drop:function(a){"function"==typeof i.droppable?i.droppable(a):i.onAction&&i.onAction("dropItem",a.element,a,d)}};"object"==typeof i.droppable&&a.extend(r,i.droppable),d.$.droppable(r)}e&&i.useFlex||a(window).on("resize",function(){d.adjustSize()}),i.useFlex&&e||d.$.addClass("not-use-flex"),i.onCreate&&i.onCreate(d)};t.prototype.render=function(a){var n=this;a&&(n.data=a),n.data&&!Array.isArray(n.data)&&(n.data=[n.data]);var t=n.data||[];n.options.beforeRender&&n.options.beforeRender(n,t),n.$.toggleClass("kanban-readonly",!!n.options.readonly).toggleClass("kanban-no-lane-name",!!n.options.noLaneName),n.$.children(".kanban-board").addClass("kanban-expired");for(var o=0;o-1){var o=this.data[t];n=a.extend(o,n),this.data[t]=n}else this.data.push(n)}n.id||(n.id=a.zui.uuid());var i=this,d=i.$,s=d.children('.kanban-board[data-id="'+n.id+'"]');s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(d),e||s.addClass("no-flex")),i.renderKanbanHeader(n,s),s.children(".kanban-lane").addClass("kanban-expired");for(var r=n.lanes||[],l=0;l .kanban-lane-items .kanban-item').length,h=s.find('.kanban-header-col[data-id="'+c+'"] > .title > .count');i.options.countRender?i.options.countRender(h,p,n.columns[l],i):h.text(p||(i.options.showZeroCount?0:""))}i.adjustKanbanSize(n,s),i.options.onRenderKanban&&i.options.onRenderKanban(s,n,i)},t.prototype.renderKanbanHeader=function(n,t){var o=this;t=t||o.$.children('.kanban-board[data-id="'+n.id+'"]');var i=t.children(".kanban-header");i.length||(i=a('
').prependTo(t),e||i.addClass("clearfix")),i.children(".kanban-col").addClass("kanban-expired");for(var d=n.columns,s={},r=!1,l=0;l','
','
','','',t.options.showCount?'':"","
","
",'
',"
",""].join("")).appendTo(e)),o.data("col",n),o.attr("data-type",n.type).attr("data-subs-count",n.subs.length);var i=o.children(".kanban-header-col");i.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var d=i.find(".title>.text").text(n.name);n.color&&d.css("color",n.color),t.options.showCount&&i.find(".title>.count").text(n.count||(t.options.showZeroCount?0:"")),t.options.onRenderHeaderCol&&t.options.onRenderHeaderCol(o,n,e)},t.prototype.renderHeaderCol=function(n,e,t){var o=this;if(n.parentType&&t){var i=e.children('.kanban-header-parent-col[data-id="'+t.id+'"]');i.attr("data-subs-count",t.subs.length),o.options.useFlex&&i.css("flex",t.subs.length+" 1 0%"),e=i.children(".kanban-header-sub-cols")}var d=e.children('.kanban-header-col[data-id="'+n.id+'"]'),s="ADD"===n.id;if(d.length)d.removeClass("kanban-expired"),s&&d.appendTo(e);else{d=a(['
',"<"+(s?"a":"div")+' class="title">','','',o.options.showCount?'':"","","
"].join("")).appendTo(e),s?d.children(".title").addClass("action").attr("data-action","addCol"):(d.children(".title").addClass("action-dbc").attr("data-action","editCol"),o.options.readonly||d.append(['
','',"
"].join("")));var r=o.options.minColWidth;r&&d.css("min-width",r);var l=o.options.maxColWidth;l&&d.css("max-width",o.options.maxColWidth)}d.data("col",n),d.attr("data-type",n.type),d.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var c=d.find(".title>.text").text(n.name);n.color&&c.css("color",n.color),o.options.showCount&&d.find(".title>.count").text(n.count||(o.options.showZeroCount?0:"")),o.options.onRenderHeaderCol&&o.options.onRenderHeaderCol(d,n,e)},t.prototype.renderLane=function(n,t,o,i){var d=this;o=o||d.$.children('.kanban-board[data-id="'+n.kanban+'"]');var s=o.children('.kanban-lane[data-id="'+n.id+'"]');if(s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(o),e||s.addClass("clearfix")),s.data("lane",n),!d.options.noLaneName){var r=s.children('.kanban-lane-name[data-id="'+n.id+'"]');r.length||(r=a('
').appendTo(s)),r.empty().attr("title",n.name).append(a('').text(n.name)),n.color&&r.css("background-color",n.color),d.options.onRenderLaneName&&d.options.onRenderLaneName(r,n,o,t)}s.children(".kanban-col,.kanban-sub-lanes").addClass("kanban-expired"),s.toggleClass("has-sub-lane",!!n.subLanes),n.subLanes?d.renderSubLanes(n,t,s):d.renderLaneItems(t,n.items,s,n,i),d.options.readonly||d.renderLaneCol({id:"EMPTY",type:"EMPTY"},s),s.children(".kanban-expired").remove()},t.prototype.renderSubLanes=function(n,e,t){var o=this,i=t.children('.kanban-sub-lanes[data-id="'+n.id+'"]');i.length?i.removeClass("kanban-expired"):i=a('
').appendTo(t),i.children(".kanban-sub-lane").addClass("kanban-expired");for(var d=0;d').appendTo(o),e||d.addClass("clearfix")),d.children(".kanban-col").addClass("kanban-expired"),this.renderLaneItems(t,n.items,d,n,i),d.children(".kanban-expired").remove()},t.prototype.renderLaneItems=function(a,n,e,t,o){for(var i=this,d=0;d').appendTo(e),"EMPTY"!==n.id&&(o.append('
'),t.options.readonly||o.append(['
','","
"].join("")));var i=t.options;i.minColWidth&&o.css("min-width",i.minColWidth),i.maxColWidth&&o.css("max-width",i.maxColWidth),i.maxColHeight&&o.find(".kanban-lane-items").css("max-height",i.maxColHeight),i.laneItemsClass&&o.find(".kanban-lane-items").addClass(i.laneItemsClass),i.laneColClass&&o.addClass(i.laneColClass)}return"EMPTY"===n.id&&o.appendTo(e),o.attr("data-type",n.type),o},t.prototype.renderLaneItem=function(n,e,t,o,i){var d=e.children('.kanban-item[data-id="'+n.id+'"]');if(d.length?d.removeClass("kanban-expired"):d=a('
').appendTo(e),d.data("item",n),this.options.itemRender)this.options.itemRender(n,d,t,o,i);else{var s=d.find(".title");s.length||(s=a('
').appendTo(d)),s.text(n.name||n.title)}return d},t.prototype.adjustKanbanSize=function(n,t){for(var o=this,i=n.columns,d=o.options.noLaneName?0:o.options.laneNameWidth,s=o.options.readonly?0:1,r=0;r-1){var o=this.data[t];n=a.extend(o,n),this.data[t]=n}else this.data.push(n)}n.id||(n.id=a.zui.uuid());var i=this,d=i.$,s=d.children('.kanban-board[data-id="'+n.id+'"]');s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(d),e||s.addClass("no-flex")),i.renderKanbanHeader(n,s),s.children(".kanban-lane").addClass("kanban-expired");for(var r=n.lanes||[],l=0;l .kanban-lane-items .kanban-item').length,h=s.find('.kanban-header-col[data-id="'+c+'"] > .title > .count');i.options.countRender?i.options.countRender(h,p,n.columns[l],i):h.text(p||(i.options.showZeroCount?0:""))}i.adjustKanbanSize(n,s),i.options.onRenderKanban&&i.options.onRenderKanban(s,n,i)},t.prototype.renderKanbanHeader=function(n,t){var o=this;t=t||o.$.children('.kanban-board[data-id="'+n.id+'"]');var i=t.children(".kanban-header");i.length||(i=a('
').prependTo(t),e||i.addClass("clearfix")),i.children(".kanban-col").addClass("kanban-expired");for(var d=n.columns,s={},r=!1,l=0;l','
','
','','',t.options.showCount?'':"","
","
",'
',"
",""].join("")).appendTo(e)),o.data("col",n),o.attr("data-type",n.type).attr("data-subs-count",n.subs.length);var i=o.children(".kanban-header-col");i.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var d=i.find(".title>.text").text(n.name);n.color&&d.css("color",n.color),t.options.showCount&&i.find(".title>.count").text(n.count||(t.options.showZeroCount?0:"")),t.options.onRenderHeaderCol&&t.options.onRenderHeaderCol(o,n,e)},t.prototype.renderHeaderCol=function(n,e,t){var o=this;if(n.parentType&&t){var i=e.children('.kanban-header-parent-col[data-id="'+t.id+'"]');i.attr("data-subs-count",t.subs.length),o.options.useFlex&&i.css("flex",t.subs.length+" 1 0%"),e=i.children(".kanban-header-sub-cols")}var d=e.children('.kanban-header-col[data-id="'+n.id+'"]'),s="ADD"===n.id;if(d.length)d.removeClass("kanban-expired"),s&&d.appendTo(e);else{d=a(['
',"<"+(s?"a":"div")+' class="title">','','',o.options.showCount?'':"","","
"].join("")).appendTo(e),s?d.children(".title").addClass("action").attr("data-action","addCol"):(d.children(".title").addClass("action-dbc").attr("data-action","editCol"),o.options.readonly||d.append(['
','',"
"].join("")));var r=o.options.minColWidth;r&&d.css("min-width",r);var l=o.options.maxColWidth;l&&d.css("max-width",o.options.maxColWidth)}d.data("col",n),d.attr("data-type",n.type),d.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var c=d.find(".title>.text").text(n.name);n.color&&c.css("color",n.color),o.options.showCount&&d.find(".title>.count").text(n.count||(o.options.showZeroCount?0:"")),o.options.onRenderHeaderCol&&o.options.onRenderHeaderCol(d,n,e)},t.prototype.renderLane=function(n,t,o,i){var d=this;o=o||d.$.children('.kanban-board[data-id="'+n.kanban+'"]');var s=o.children('.kanban-lane[data-id="'+n.id+'"]');if(s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(o),e||s.addClass("clearfix")),s.data("lane",n),!d.options.noLaneName){var r=s.children('.kanban-lane-name[data-id="'+n.id+'"]');r.length||(r=a('
').appendTo(s)),r.empty().attr("title",n.name).append(a('').text(n.name)),n.color&&r.css("background-color",n.color),d.options.onRenderLaneName&&d.options.onRenderLaneName(r,n,o,t)}s.children(".kanban-col,.kanban-sub-lanes").addClass("kanban-expired"),s.toggleClass("has-sub-lane",!!n.subLanes),n.subLanes?d.renderSubLanes(n,t,s):d.renderLaneItems(t,n.items,s,n,i),d.options.readonly||d.renderLaneCol({id:"EMPTY",type:"EMPTY"},s),s.children(".kanban-expired").remove()},t.prototype.renderSubLanes=function(n,e,t){var o=this,i=t.children('.kanban-sub-lanes[data-id="'+n.id+'"]');i.length?i.removeClass("kanban-expired"):i=a('
').appendTo(t),i.children(".kanban-sub-lane").addClass("kanban-expired");for(var d=0;d').appendTo(o),e||d.addClass("clearfix")),d.children(".kanban-col").addClass("kanban-expired"),this.renderLaneItems(t,n.items,d,n,i),d.children(".kanban-expired").remove()},t.prototype.renderLaneItems=function(a,n,e,t,o){for(var i=this,d=0;d').appendTo(e),"EMPTY"!==n.id&&(o.append('
'),t.options.readonly||o.append(['
','","
"].join("")));var i=t.options;i.minColWidth&&o.css("min-width",i.minColWidth),i.maxColWidth&&o.css("max-width",i.maxColWidth),i.maxColHeight&&o.find(".kanban-lane-items").css("max-height",i.maxColHeight),i.laneItemsClass&&o.find(".kanban-lane-items").addClass(i.laneItemsClass),i.laneColClass&&o.addClass(i.laneColClass)}return"EMPTY"===n.id&&o.appendTo(e),o.attr("data-type",n.type),o},t.prototype.renderLaneItem=function(n,e,t,o,i){var d=e.children('.kanban-item[data-id="'+n.id+'"]');if(d.length?d.removeClass("kanban-expired"):d=a('
').appendTo(e),d.data("item",n),this.options.itemRender)this.options.itemRender(n,d,t,o,i);else{var s=d.find(".title");s.length||(s=a('
').appendTo(d)),s.text(n.name||n.title)}return d},t.prototype.adjustKanbanSize=function(n,t){for(var o=this,i=n.columns,d=o.options.noLaneName?0:o.options.laneNameWidth,s=o.options.readonly?0:1,r=0;r Date: Wed, 27 Oct 2021 14:08:22 +0800 Subject: [PATCH 3/4] * support for d-n-d in kanban. --- module/execution/js/kanban.js | 105 ++++++++++++++++++++++++++++++---- www/js/zui/kanban/min.css | 2 +- 2 files changed, 96 insertions(+), 11 deletions(-) diff --git a/module/execution/js/kanban.js b/module/execution/js/kanban.js index 4182db4c6c..03d3c35903 100644 --- a/module/execution/js/kanban.js +++ b/module/execution/js/kanban.js @@ -450,7 +450,7 @@ function renderTaskItem(item, $item, col) var $title = $item.find('.title'); if(!$title.length) { - $title = $(' ') + $title = $(' ') .attr('href', $.createLink('task', 'view', 'taskID=' + item.id)); $title.appendTo($item); } @@ -464,7 +464,7 @@ function renderTaskItem(item, $item, col) $infos.html( [ '#' + item.id + '', - '' + item.pri + '', + '' + item.pri + '', item.estimate ? '' + item.estimate + 'h' : '', ].join('')); if(item.assignedTo) $infos.append(renderUserAvatar(item.assignedTo)); @@ -474,7 +474,7 @@ function renderTaskItem(item, $item, col) return $item; } - +  /* Add column renderer/ 添加特定列类型或列条目类型渲染方法 */ addColumnRenderer('story', renderStoryItem); addColumnRenderer('bug', renderBugItem); @@ -519,10 +519,88 @@ function createKanban(kanbanID, data, options) var $kanban = $('#kanban-' + kanbanID); if($kanban.length) return updateKanban(kanbanID, data); - $kanban = $('
').appendTo('#kanbans'); + $kanban = $('
').appendTo('#kanbans'); $kanban.kanban($.extend({data: data}, options)); } +window.kanbanDropRules = +{ + story: + { + blacklog: true, + ready: ['blacklog', 'dev-doing'], + 'dev-doing': ['dev-done'], + 'dev-done': ['test-doing'], + 'test-doing': ['test-done'], + 'test-done': ['accepted'], + 'accepted': ['published'], + 'published': false, + } +} + +/** + * Find drop columns + * @param {JQuery} $element Drag element + * @param {JQuery} $root Dnd root element + */ +function findDropColumns($element, $root) +{ + var $col = $element.closest('.kanban-col'); + var col = $col.data(); + var kanbanID = $root.data('id'); + var kanbanRules = window.kanbanDropRules ? window.kanbanDropRules[kanbanID] : null; + + if(!kanbanRules) return $root.find('.kanban-lane-col:not([data-type="' + col.type + '"])'); + + var colRules = kanbanRules[col.type]; + var lane = $col.closest('.kanban-lane').data('lane'); + return $root.find('.kanban-lane-col').filter(function() + { + if(!colRules) return false; + if(colRules === true) return true; + + var $newCol = $(this); + var newCol = $newCol.data(); + if(newCol.id === col.id) return false; + + var $newLane = $newCol.closest('.kanban-lane'); + var newLane = $newLane.data('lane'); + var canDropHere = colRules.indexOf(newCol.type) > -1 && newLane.id === lane.id; + if(canDropHere) $newCol.addClass('can-drop-here'); + return canDropHere; + }); +} + +/** + * Handle finish drop task + * @param {Object} event Event object + * @returns {void} + */ +function handleFinishDrop(event) +{ + var $item = $(event.element); // The drag item + var $dragCol = $item.closest('.kanban-lane-col'); + var $dropCol = $(event.target); + + /* Get d-n-d(drag and drop) infos 获取拖放操作相关信息 */ + var item = $item.data('item'); + var fromColType = $dragCol.data('type'); + var toColType = $dropCol.data('type'); + var kanbanID = $item.closest('.kanban').data('id'); + + /* TODO: Save d-n-d infos to server 将拖放操作信息提交到服务器 */ + console.log('TODO: Save d-n-d infos to server 将拖放操作信息提交到服务器', {item, fromColType, toColType, kanbanID}); + + /* + // TODO: The server must return a updated kanban data 服务器返回更新后的看板数据 + + // 调用 updateKanban 更新看板数据 + updateKanban(kanbanID, newKanbanData); + */ + + $('#kanbans').find('.can-drop-here').removeClass('can-drop-here'); +} + /* Overload kanban default options */ $.extend($.fn.kanban.Constructor.DEFAULTS, { @@ -543,12 +621,19 @@ $(function() /* Common options 用于初始化看板的通用选项 */　 var commonOptions = { - maxColHeight: 'auto', - minColWidth: 240, - droppable: true, - showCount: true, - showZeroCount: true, - countRender: renderColumnCount + maxColHeight: 'auto', + minColWidth: 240, + maxColWidth: 240, + showCount: true, + showZeroCount: true, + fluidBoardWidth: true, + countRender: renderColumnCount, + droppable: + { + target: findDropColumns, + finish: handleFinishDrop, + mouseButton: 'left' + } }; /* Create story kanban 创建需求看板 */ diff --git a/www/js/zui/kanban/min.css b/www/js/zui/kanban/min.css index 530c038cd1..ca2b5a9ace 100644 --- a/www/js/zui/kanban/min.css +++ b/www/js/zui/kanban/min.css @@ -1,5 +1,5 @@ /*! - * ZUI: ZUI Kanban View - v1.9.2 - 2021-10-26 + * ZUI: ZUI Kanban View - v1.9.2 - 2021-10-27 * http://openzui.com * GitHub: https://github.com/easysoft/zui.git * Copyright (c) 2021 cnezsoft.com; Licensed MIT From b4631b3665a1e696f4018ac9b317b599334a4562 Mon Sep 17 00:00:00 2001 From: Hao Sun Date: Wed, 27 Oct 2021 14:28:03 +0800 Subject: [PATCH 4/4] * add drag and drop animation to kanban. --- www/js/zui/kanban/min.css | 2 +- www/js/zui/kanban/min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/www/js/zui/kanban/min.css b/www/js/zui/kanban/min.css index ca2b5a9ace..4af7426fa8 100644 --- a/www/js/zui/kanban/min.css +++ b/www/js/zui/kanban/min.css @@ -3,4 +3,4 @@ * http://openzui.com * GitHub: https://github.com/easysoft/zui.git * Copyright (c) 2021 cnezsoft.com; Licensed MIT - */.kanban{min-height:300px}.kanban-header,.kanban-lane,.kanban-sub-lane{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;flex-direction:row;background-color:#f1f3f5;border-bottom:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.kanban-header{padding-left:20px;background-color:rgba(0,0,0,.07)}.kanban-no-lane-name .kanban-header{padding-left:0}.kanban-col{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.not-use-flex .kanban-col{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.no-flex .kanban-col{float:left}.kanban-col+.kanban-col{border-left:2px solid #fff}.kanban-header-col{position:relative;height:32px}.kanban-header-col>.title{display:block;height:32px;margin:0 32px;line-height:32px;text-align:center}.kanban-header-col>.title>.text{display:inline-block;max-width:100px;margin:0 5px;overflow:hidden;text-overflow:'';white-space:nowrap}.kanban-header-col>.title>.count,.kanban-header-col>.title>.icon{position:relative;top:-12px}.kanban-header-col>.title>.count{color:#8b91a2}.kanban-header-col[data-id=ADD]>.title{margin:6px;opacity:.7}.kanban-header-col[data-id=ADD]>.actions{display:none}.kanban-header-col>.actions{position:absolute;top:0;right:0}.kanban-header-col>.actions>.btn{min-width:32px}.kanban-header-col>.actions>.btn>.icon{opacity:.5}.kanban-header-has-parent>.kanban-header-col{height:64px;padding:16px 0}.kanban-header-parent-col{padding:0!important}.kanban-header-parent-col>.kanban-header-col{height:32px;padding:0}.kanban-header-sub-cols{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:-1px;margin-left:-2px;flex-direction:row;border-top:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row}.kanban-header-sub-cols>.kanban-col{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.no-flex .kanban-header-sub-cols{display:table;table-layout:fixed}.no-flex .kanban-header-sub-cols>.kanban-col{width:50%}.kanban-lane{min-height:100px}.kanban-lane+.kanban-lane{margin-top:3px}.no-flex .kanban-lane{position:relative;padding-left:20px}.kanban-lane-name{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:20px;overflow:hidden;color:#fff;text-align:center;background-color:#3dc6fd;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.kanban-lane-name>.text{position:absolute;top:5px;right:1px;bottom:5px;display:block;overflow:hidden;line-height:20px;text-align:center;white-space:normal;-webkit-writing-mode:tb-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.no-flex .kanban-lane-name{position:absolute;top:0;bottom:0;left:0}.kanban-header+.kanban-lane>.kanban-lane-name{margin-top:-33px}.kanban-header.kanban-header-has-parent+.kanban-lane>.kanban-lane-name{margin-top:-65px}.kanban-sub-lanes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column}.kanban-sub-lanes.no-sub-lane{background-color:#f1f3f5}.kanban-sub-lane{-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto}.kanban-lane-col.drop-to{outline:3px solid rgba(255,190,57,.25);outline-offset:-3px}.kanban-lane-col.drop-to .kanban-lane-actions>.btn{background-color:rgba(255,190,57,.25);border:1px dotted #ff9800}.kanban-lane-col.drop-to .kanban-lane-actions>.btn>span{opacity:0}.kanban-lane-col[data-type=EMPTY]{background-color:#fff}.kanban-lane-items{max-height:300px;padding:0 10px 10px;overflow:auto}.kanban-size-inited .kanban-lane-items{max-height:100%!important}.kanban-lane-actions{padding:10px 15px}.kanban-item{padding:10px;margin-top:10px;background:#fff;border:1px solid #fff;border-radius:4px;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .2s;-o-transition:box-shadow .2s,-o-transform .2s;transition:-webkit-box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,transform .2s;transition:box-shadow .2s,transform .2s,-webkit-box-shadow .2s,-webkit-transform .2s,-o-transform .2s}.kanban-item.drag-from{background-color:#aaa;opacity:.2}.kanban-item:hover{border-color:rgba(0,0,0,.1);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.09);box-shadow:0 4px 10px 0 rgba(0,0,0,.09)}.kanban-item.drag-shadow{border-color:rgba(0,0,0,.2);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.09),0 4px 20px 0 rgba(0,0,0,.5);box-shadow:0 4px 10px 0 rgba(0,0,0,.09),0 4px 20px 0 rgba(0,0,0,.5);-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)} \ No newline at end of file + */.kanban{min-height:300px}.kanban-header,.kanban-lane,.kanban-sub-lane{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;flex-direction:row;background-color:#f1f3f5;border-bottom:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.kanban-header{padding-left:20px;background-color:rgba(0,0,0,.07)}.kanban-no-lane-name .kanban-header{padding-left:0}.kanban-col{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.not-use-flex .kanban-col{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.no-flex .kanban-col{float:left}.kanban-col+.kanban-col{border-left:2px solid #fff}.kanban-header-col{position:relative;height:32px}.kanban-header-col>.title{display:block;height:32px;margin:0 32px;line-height:32px;text-align:center}.kanban-header-col>.title>.text{display:inline-block;max-width:100px;margin:0 5px;overflow:hidden;text-overflow:'';white-space:nowrap}.kanban-header-col>.title>.count,.kanban-header-col>.title>.icon{position:relative;top:-12px}.kanban-header-col>.title>.count{color:#8b91a2}.kanban-header-col[data-id=ADD]>.title{margin:6px;opacity:.7}.kanban-header-col[data-id=ADD]>.actions{display:none}.kanban-header-col>.actions{position:absolute;top:0;right:0}.kanban-header-col>.actions>.btn{min-width:32px}.kanban-header-col>.actions>.btn>.icon{opacity:.5}.kanban-header-has-parent>.kanban-header-col{height:64px;padding:16px 0}.kanban-header-parent-col{padding:0!important}.kanban-header-parent-col>.kanban-header-col{height:32px;padding:0}.kanban-header-sub-cols{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:-1px;margin-left:-2px;flex-direction:row;border-top:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row}.kanban-header-sub-cols>.kanban-col{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.no-flex .kanban-header-sub-cols{display:table;table-layout:fixed}.no-flex .kanban-header-sub-cols>.kanban-col{width:50%}.kanban-lane{min-height:100px}.kanban-lane+.kanban-lane{margin-top:3px}.no-flex .kanban-lane{position:relative;padding-left:20px}.kanban-lane-name{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:20px;overflow:hidden;color:#fff;text-align:center;background-color:#3dc6fd;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.kanban-lane-name>.text{position:absolute;top:5px;right:1px;bottom:5px;display:block;overflow:hidden;line-height:20px;text-align:center;white-space:normal;-webkit-writing-mode:tb-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.no-flex .kanban-lane-name{position:absolute;top:0;bottom:0;left:0}.kanban-header+.kanban-lane>.kanban-lane-name{margin-top:-33px}.kanban-header.kanban-header-has-parent+.kanban-lane>.kanban-lane-name{margin-top:-65px}.kanban-sub-lanes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column}.kanban-sub-lanes.no-sub-lane{background-color:#f1f3f5}.kanban-sub-lane{-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto}.kanban-lane-col.drop-to{outline:3px solid rgba(255,190,57,.25);outline-offset:-3px}.kanban-lane-col.drop-to .kanban-lane-actions>.btn{background-color:rgba(255,190,57,.25);border:1px dotted #ff9800}.kanban-lane-col.drop-to .kanban-lane-actions>.btn>span{opacity:0}.kanban-lane-col[data-type=EMPTY]{background-color:#fff}.kanban-lane-items{max-height:300px;padding:0 10px 10px;overflow:auto}.kanban-size-inited .kanban-lane-items{max-height:100%!important}.kanban-lane-actions{padding:10px 15px}.kanban-item{padding:10px;margin-top:10px;background:#fff;border:1px solid #fff;border-radius:4px;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .2s;-o-transition:box-shadow .2s,-o-transform .2s;transition:-webkit-box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,transform .2s;transition:box-shadow .2s,transform .2s,-webkit-box-shadow .2s,-webkit-transform .2s,-o-transform .2s}.kanban-item.drag-from{background-color:#aaa;opacity:.2}.kanban-item:hover{border-color:rgba(0,0,0,.1);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.09);box-shadow:0 4px 10px 0 rgba(0,0,0,.09)}.kanban-item.drag-shadow{border-color:rgba(0,0,0,.2);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.05),0 4px 20px 0 rgba(0,0,0,.3);box-shadow:0 4px 10px 0 rgba(0,0,0,.05),0 4px 20px 0 rgba(0,0,0,.3);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .4s!important;-o-transition:box-shadow .2s,-o-transform .4s!important;transition:-webkit-box-shadow .2s,-webkit-transform .4s!important;transition:box-shadow .2s,transform .4s!important;transition:box-shadow .2s,transform .4s,-webkit-box-shadow .2s,-webkit-transform .4s,-o-transform .4s!important}.kanban-item.drag-shadow.in{-webkit-transform:scale(1.1) rotate(5deg);-ms-transform:scale(1.1) rotate(5deg);-o-transform:scale(1.1) rotate(5deg);transform:scale(1.1) rotate(5deg)}.kanban-dragging{cursor:move} \ No newline at end of file diff --git a/www/js/zui/kanban/min.js b/www/js/zui/kanban/min.js index bbb4a890c3..3547a6532c 100644 --- a/www/js/zui/kanban/min.js +++ b/www/js/zui/kanban/min.js @@ -4,4 +4,4 @@ * GitHub: https://github.com/easysoft/zui.git * Copyright (c) 2021 cnezsoft.com; Licensed MIT */ -!function(a){"use strict";var n="zui.kanban",e="object"==typeof CSS&&CSS.supports("display","flex"),t=function(o,i){var d=this;d.name=n,d.$=a(o).addClass("kanban"),d.options=i=a.extend({},t.DEFAULTS,this.$.data(),i),d.data=i.data||[],d.render(d.data);var s=function(n){if(i.onAction){var e=a(this);i.onAction(e.data("action"),e,n,d)}};if(d.$.on("click",".action",s).on("dblclick",".action-dbc",s),"auto"===i.droppable&&(i.droppable=!i.readonly),i.droppable){var r={selector:".kanban-item",target:'.kanban-lane-col:not([data-type="EMPTY"])',drop:function(a){"function"==typeof i.droppable?i.droppable(a):i.onAction&&i.onAction("dropItem",a.element,a,d)}};"object"==typeof i.droppable&&a.extend(r,i.droppable),d.$.droppable(r)}e&&i.useFlex||a(window).on("resize",function(){d.adjustSize()}),i.useFlex&&e||d.$.addClass("not-use-flex"),i.onCreate&&i.onCreate(d)};t.prototype.render=function(a){var n=this;a&&(n.data=a),n.data&&!Array.isArray(n.data)&&(n.data=[n.data]);var t=n.data||[];n.options.beforeRender&&n.options.beforeRender(n,t),n.$.toggleClass("kanban-readonly",!!n.options.readonly).toggleClass("kanban-no-lane-name",!!n.options.noLaneName),n.$.children(".kanban-board").addClass("kanban-expired");for(var o=0;o-1){var o=this.data[t];n=a.extend(o,n),this.data[t]=n}else this.data.push(n)}n.id||(n.id=a.zui.uuid());var i=this,d=i.$,s=d.children('.kanban-board[data-id="'+n.id+'"]');s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(d),e||s.addClass("no-flex")),i.renderKanbanHeader(n,s),s.children(".kanban-lane").addClass("kanban-expired");for(var r=n.lanes||[],l=0;l .kanban-lane-items .kanban-item').length,h=s.find('.kanban-header-col[data-id="'+c+'"] > .title > .count');i.options.countRender?i.options.countRender(h,p,n.columns[l],i):h.text(p||(i.options.showZeroCount?0:""))}i.adjustKanbanSize(n,s),i.options.onRenderKanban&&i.options.onRenderKanban(s,n,i)},t.prototype.renderKanbanHeader=function(n,t){var o=this;t=t||o.$.children('.kanban-board[data-id="'+n.id+'"]');var i=t.children(".kanban-header");i.length||(i=a('
').prependTo(t),e||i.addClass("clearfix")),i.children(".kanban-col").addClass("kanban-expired");for(var d=n.columns,s={},r=!1,l=0;l','
','
','','',t.options.showCount?'':"","
","
",'
',"
",""].join("")).appendTo(e)),o.data("col",n),o.attr("data-type",n.type).attr("data-subs-count",n.subs.length);var i=o.children(".kanban-header-col");i.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var d=i.find(".title>.text").text(n.name);n.color&&d.css("color",n.color),t.options.showCount&&i.find(".title>.count").text(n.count||(t.options.showZeroCount?0:"")),t.options.onRenderHeaderCol&&t.options.onRenderHeaderCol(o,n,e)},t.prototype.renderHeaderCol=function(n,e,t){var o=this;if(n.parentType&&t){var i=e.children('.kanban-header-parent-col[data-id="'+t.id+'"]');i.attr("data-subs-count",t.subs.length),o.options.useFlex&&i.css("flex",t.subs.length+" 1 0%"),e=i.children(".kanban-header-sub-cols")}var d=e.children('.kanban-header-col[data-id="'+n.id+'"]'),s="ADD"===n.id;if(d.length)d.removeClass("kanban-expired"),s&&d.appendTo(e);else{d=a(['
',"<"+(s?"a":"div")+' class="title">','','',o.options.showCount?'':"","","
"].join("")).appendTo(e),s?d.children(".title").addClass("action").attr("data-action","addCol"):(d.children(".title").addClass("action-dbc").attr("data-action","editCol"),o.options.readonly||d.append(['
','',"
"].join("")));var r=o.options.minColWidth;r&&d.css("min-width",r);var l=o.options.maxColWidth;l&&d.css("max-width",o.options.maxColWidth)}d.data("col",n),d.attr("data-type",n.type),d.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var c=d.find(".title>.text").text(n.name);n.color&&c.css("color",n.color),o.options.showCount&&d.find(".title>.count").text(n.count||(o.options.showZeroCount?0:"")),o.options.onRenderHeaderCol&&o.options.onRenderHeaderCol(d,n,e)},t.prototype.renderLane=function(n,t,o,i){var d=this;o=o||d.$.children('.kanban-board[data-id="'+n.kanban+'"]');var s=o.children('.kanban-lane[data-id="'+n.id+'"]');if(s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(o),e||s.addClass("clearfix")),s.data("lane",n),!d.options.noLaneName){var r=s.children('.kanban-lane-name[data-id="'+n.id+'"]');r.length||(r=a('
').appendTo(s)),r.empty().attr("title",n.name).append(a('').text(n.name)),n.color&&r.css("background-color",n.color),d.options.onRenderLaneName&&d.options.onRenderLaneName(r,n,o,t)}s.children(".kanban-col,.kanban-sub-lanes").addClass("kanban-expired"),s.toggleClass("has-sub-lane",!!n.subLanes),n.subLanes?d.renderSubLanes(n,t,s):d.renderLaneItems(t,n.items,s,n,i),d.options.readonly||d.renderLaneCol({id:"EMPTY",type:"EMPTY"},s),s.children(".kanban-expired").remove()},t.prototype.renderSubLanes=function(n,e,t){var o=this,i=t.children('.kanban-sub-lanes[data-id="'+n.id+'"]');i.length?i.removeClass("kanban-expired"):i=a('
').appendTo(t),i.children(".kanban-sub-lane").addClass("kanban-expired");for(var d=0;d').appendTo(o),e||d.addClass("clearfix")),d.children(".kanban-col").addClass("kanban-expired"),this.renderLaneItems(t,n.items,d,n,i),d.children(".kanban-expired").remove()},t.prototype.renderLaneItems=function(a,n,e,t,o){for(var i=this,d=0;d').appendTo(e),"EMPTY"!==n.id&&(o.append('
'),t.options.readonly||o.append(['
','","
"].join("")));var i=t.options;i.minColWidth&&o.css("min-width",i.minColWidth),i.maxColWidth&&o.css("max-width",i.maxColWidth),i.maxColHeight&&o.find(".kanban-lane-items").css("max-height",i.maxColHeight),i.laneItemsClass&&o.find(".kanban-lane-items").addClass(i.laneItemsClass),i.laneColClass&&o.addClass(i.laneColClass)}return"EMPTY"===n.id&&o.appendTo(e),o.attr("data-type",n.type),o},t.prototype.renderLaneItem=function(n,e,t,o,i){var d=e.children('.kanban-item[data-id="'+n.id+'"]');if(d.length?d.removeClass("kanban-expired"):d=a('
').appendTo(e),d.data("item",n),this.options.itemRender)this.options.itemRender(n,d,t,o,i);else{var s=d.find(".title");s.length||(s=a('
').appendTo(d)),s.text(n.name||n.title)}return d},t.prototype.adjustKanbanSize=function(n,t){for(var o=this,i=n.columns,d=o.options.noLaneName?0:o.options.laneNameWidth,s=o.options.readonly?0:1,r=0;r-1){var o=this.data[t];n=a.extend(o,n),this.data[t]=n}else this.data.push(n)}n.id||(n.id=a.zui.uuid());var i=this,d=i.$,s=d.children('.kanban-board[data-id="'+n.id+'"]');s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(d),e||s.addClass("no-flex")),i.renderKanbanHeader(n,s),s.children(".kanban-lane").addClass("kanban-expired");for(var r=n.lanes||[],l=0;l .kanban-lane-items .kanban-item').length,h=s.find('.kanban-header-col[data-id="'+c+'"] > .title > .count');i.options.countRender?i.options.countRender(h,p,n.columns[l],i):h.text(p||(i.options.showZeroCount?0:""))}i.adjustKanbanSize(n,s),i.options.onRenderKanban&&i.options.onRenderKanban(s,n,i)},t.prototype.renderKanbanHeader=function(n,t){var o=this;t=t||o.$.children('.kanban-board[data-id="'+n.id+'"]');var i=t.children(".kanban-header");i.length||(i=a('
').prependTo(t),e||i.addClass("clearfix")),i.children(".kanban-col").addClass("kanban-expired");for(var d=n.columns,s={},r=!1,l=0;l','
','
','','',t.options.showCount?'':"","
","
",'
',"
",""].join("")).appendTo(e)),o.data("col",n),o.attr("data-type",n.type).attr("data-subs-count",n.subs.length);var i=o.children(".kanban-header-col");i.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var d=i.find(".title>.text").text(n.name);n.color&&d.css("color",n.color),t.options.showCount&&i.find(".title>.count").text(n.count||(t.options.showZeroCount?0:"")),t.options.onRenderHeaderCol&&t.options.onRenderHeaderCol(o,n,e)},t.prototype.renderHeaderCol=function(n,e,t){var o=this;if(n.parentType&&t){var i=e.children('.kanban-header-parent-col[data-id="'+t.id+'"]');i.attr("data-subs-count",t.subs.length),o.options.useFlex&&i.css("flex",t.subs.length+" 1 0%"),e=i.children(".kanban-header-sub-cols")}var d=e.children('.kanban-header-col[data-id="'+n.id+'"]'),s="ADD"===n.id;if(d.length)d.removeClass("kanban-expired"),s&&d.appendTo(e);else{d=a(['
',"<"+(s?"a":"div")+' class="title">','','',o.options.showCount?'':"","","
"].join("")).appendTo(e),s?d.children(".title").addClass("action").attr("data-action","addCol"):(d.children(".title").addClass("action-dbc").attr("data-action","editCol"),o.options.readonly||d.append(['
','',"
"].join("")));var r=o.options.minColWidth;r&&d.css("min-width",r);var l=o.options.maxColWidth;l&&d.css("max-width",o.options.maxColWidth)}d.data("col",n),d.attr("data-type",n.type),d.find(".title>.icon").attr("class","icon icon-"+(n.icon||""));var c=d.find(".title>.text").text(n.name);n.color&&c.css("color",n.color),o.options.showCount&&d.find(".title>.count").text(n.count||(o.options.showZeroCount?0:"")),o.options.onRenderHeaderCol&&o.options.onRenderHeaderCol(d,n,e)},t.prototype.renderLane=function(n,t,o,i){var d=this;o=o||d.$.children('.kanban-board[data-id="'+n.kanban+'"]');var s=o.children('.kanban-lane[data-id="'+n.id+'"]');if(s.length?s.removeClass("kanban-expired"):(s=a('
').appendTo(o),e||s.addClass("clearfix")),s.data("lane",n),!d.options.noLaneName){var r=s.children('.kanban-lane-name[data-id="'+n.id+'"]');r.length||(r=a('
').appendTo(s)),r.empty().attr("title",n.name).append(a('').text(n.name)),n.color&&r.css("background-color",n.color),d.options.onRenderLaneName&&d.options.onRenderLaneName(r,n,o,t)}s.children(".kanban-col,.kanban-sub-lanes").addClass("kanban-expired"),s.toggleClass("has-sub-lane",!!n.subLanes),n.subLanes?d.renderSubLanes(n,t,s):d.renderLaneItems(t,n.items,s,n,i),d.options.readonly||d.renderLaneCol({id:"EMPTY",type:"EMPTY"},s),s.children(".kanban-expired").remove()},t.prototype.renderSubLanes=function(n,e,t){var o=this,i=t.children('.kanban-sub-lanes[data-id="'+n.id+'"]');i.length?i.removeClass("kanban-expired"):i=a('
').appendTo(t),i.children(".kanban-sub-lane").addClass("kanban-expired");for(var d=0;d').appendTo(o),e||d.addClass("clearfix")),d.children(".kanban-col").addClass("kanban-expired"),this.renderLaneItems(t,n.items,d,n,i),d.children(".kanban-expired").remove()},t.prototype.renderLaneItems=function(a,n,e,t,o){for(var i=this,d=0;d').appendTo(e),"EMPTY"!==n.id&&(o.append('
'),t.options.readonly||o.append(['
','","
"].join("")));var i=t.options;i.minColWidth&&o.css("min-width",i.minColWidth),i.maxColWidth&&o.css("max-width",i.maxColWidth),i.maxColHeight&&o.find(".kanban-lane-items").css("max-height",i.maxColHeight),i.laneItemsClass&&o.find(".kanban-lane-items").addClass(i.laneItemsClass),i.laneColClass&&o.addClass(i.laneColClass)}return"EMPTY"===n.id&&o.appendTo(e),o.attr("data-type",n.type),o},t.prototype.renderLaneItem=function(n,e,t,o,i){var d=e.children('.kanban-item[data-id="'+n.id+'"]');if(d.length?d.removeClass("kanban-expired"):d=a('
').appendTo(e),d.data("item",n),this.options.itemRender)this.options.itemRender(n,d,t,o,i);else{var s=d.find(".title");s.length||(s=a('
').appendTo(d)),s.text(n.name||n.title)}return d},t.prototype.adjustKanbanSize=function(n,t){for(var o=this,i=n.columns,d=o.options.noLaneName?0:o.options.laneNameWidth,s=o.options.readonly?0:1,r=0;r