kanban starred

client/res/templates/record/kanban-item.tpl

@@ -1,4 +1,4 @@
-<div class="panel panel-default">
+<div class="panel panel-default {{#if isStarred}} starred {{~/if}} ">
     <div class="panel-body">
         {{#each layoutDataList}}
         <div>

client/src/views/record/kanban-item.js

@@ -36,6 +36,7 @@ class KanbanRecordItem extends View {
         return {
             layoutDataList: this.layoutDataList,
             rowActionsDisabled: this.rowActionsDisabled,
+            isStarred: this.hasStars && this.model.attributes.isStarred,
         };
     }
 
@@ -43,6 +44,7 @@ class KanbanRecordItem extends View {
         this.itemLayout = this.options.itemLayout;
         this.rowActionsView = this.options.rowActionsView;
         this.rowActionsDisabled = this.options.rowActionsDisabled;
+        this.hasStars = this.options.hasStars;
 
         this.layoutDataList = [];
 

client/src/views/record/kanban.js

@@ -433,6 +433,12 @@ class KanbanRecordView extends ListRecordView {
         this.wait(
             this.getHelper().processSetupHandlers(this, 'record/kanban')
         );
+
+        /**
+         * @private
+         * @type {boolean}
+         */
+        this.hasStars = this.getMetadata().get(`scopes.${this.entityType}.stars`) || false;
     }
 
     afterRender() {
@@ -1026,6 +1032,7 @@ class KanbanRecordView extends ListRecordView {
             moveOverRowAction: this.moveOverRowAction,
             additionalRowActionList: this._additionalRowActionList,
             scope: this.scope,
+            hasStars: this.hasStars,
         }, callback);
     }
 

frontend/less/espo/custom.less

@@ -1411,6 +1411,27 @@ section {
     }
 }
 
+.list-kanban {
+    .panel.starred {
+        > .panel-body {
+            position: relative;
+
+            &::before {
+                content: " ";
+                inset: 0;
+                position: absolute;
+                left: 0;
+                top: calc(50% - var(--8px));
+                height: var(--16px);
+                width: var(--3px);
+                background-color: var(--brand-warning);
+                border-top-right-radius: var(--2px);
+                border-bottom-right-radius: var(--2px);
+            }
+        }
+    }
+}
+
 .list > {
     table > tbody,
     ul.list-group {