kanban-view-lib
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
36 lines • 10.7 kB
JavaScript
import { Component, Input } from '@angular/core';
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/drag-drop";
import * as i2 from "@angular/common";
export class KanbanViewComponent {
drop(event) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
else {
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
}
}
getTaskBorderClass(task) {
if (task.tags.includes('Bug')) {
return 'border-bug';
}
else if (task.tags.includes('Feature')) {
return 'border-feature';
}
else if (task.tags.includes('Story')) {
return 'border-story';
}
return 'border-default'; // Default color
}
}
KanbanViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
KanbanViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: KanbanViewComponent, selector: "lib-kanban-view", inputs: { items: "items" }, ngImport: i0, template: "<div cdkDropListGroup class=\"kanban-board\">\n <div class=\"kanban-column\" *ngFor=\"let list of items\">\n <h2 class=\"column-header\"> {{ list.name }}</h2>\n \n <div\n cdkDropList\n [cdkDropListData]=\"list.tasks\"\n class=\"task-list\"\n (cdkDropListDropped)=\"drop($event)\">\n \n <div class=\"task-card\" [ngClass]=\"getTaskBorderClass(task)\" *ngFor=\"let task of list.tasks\" cdkDrag>\n <h3>Task - {{ task.id }}</h3>\n <p>{{ task.title }}</p>\n <div class=\"task-tags\">\n <span *ngFor=\"let tag of task.tags\" class=\"tag\">{{ tag }}</span>\n </div>\n <div class=\"assignee\">\n <span class=\"avatar\">{{ task.assignee }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n ", styles: [".kanban-board{display:flex;gap:15px;overflow-x:auto}.kanban-column{background:#f4f4f4;border-radius:8px;padding:10px;width:250px;min-width:250px}.column-header{background:#ddd;padding:10px;border-radius:5px;text-align:center}.task-list{min-height:100px}.task-card{background:white;padding:10px;border-radius:5px;margin-bottom:10px;box-shadow:0 2px 4px #0000001a;border-left:5px solid #ddd}.task-tags{display:flex;gap:5px;margin-top:5px}.tag{background:lightgray;padding:3px 8px;border-radius:4px;font-size:12px}.assignee{display:flex;justify-content:flex-end;margin-top:10px}.avatar{background:#ccc;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}.border-bug{border-left-color:red}.border-feature{border-left-color:#00f}.border-story{border-left-color:green}.border-default{border-left-color:gray}\n"], dependencies: [{ kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-kanban-view', template: "<div cdkDropListGroup class=\"kanban-board\">\n <div class=\"kanban-column\" *ngFor=\"let list of items\">\n <h2 class=\"column-header\"> {{ list.name }}</h2>\n \n <div\n cdkDropList\n [cdkDropListData]=\"list.tasks\"\n class=\"task-list\"\n (cdkDropListDropped)=\"drop($event)\">\n \n <div class=\"task-card\" [ngClass]=\"getTaskBorderClass(task)\" *ngFor=\"let task of list.tasks\" cdkDrag>\n <h3>Task - {{ task.id }}</h3>\n <p>{{ task.title }}</p>\n <div class=\"task-tags\">\n <span *ngFor=\"let tag of task.tags\" class=\"tag\">{{ tag }}</span>\n </div>\n <div class=\"assignee\">\n <span class=\"avatar\">{{ task.assignee }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n ", styles: [".kanban-board{display:flex;gap:15px;overflow-x:auto}.kanban-column{background:#f4f4f4;border-radius:8px;padding:10px;width:250px;min-width:250px}.column-header{background:#ddd;padding:10px;border-radius:5px;text-align:center}.task-list{min-height:100px}.task-card{background:white;padding:10px;border-radius:5px;margin-bottom:10px;box-shadow:0 2px 4px #0000001a;border-left:5px solid #ddd}.task-tags{display:flex;gap:5px;margin-top:5px}.tag{background:lightgray;padding:3px 8px;border-radius:4px;font-size:12px}.assignee{display:flex;justify-content:flex-end;margin-top:10px}.avatar{background:#ccc;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}.border-bug{border-left-color:red}.border-feature{border-left-color:#00f}.border-story{border-left-color:green}.border-default{border-left-color:gray}\n"] }]
}], propDecorators: { items: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2FuYmFuLXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2FuYmFuLXZpZXctbGliL3NyYy9saWIva2FuYmFuLXZpZXcva2FuYmFuLXZpZXcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2FuYmFuLXZpZXctbGliL3NyYy9saWIva2FuYmFuLXZpZXcva2FuYmFuLXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFlLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7O0FBZXpGLE1BQU0sT0FBTyxtQkFBbUI7SUFJOUIsSUFBSSxDQUFDLEtBQTRCO1FBQy9CLElBQUksS0FBSyxDQUFDLGlCQUFpQixLQUFLLEtBQUssQ0FBQyxTQUFTLEVBQUU7WUFDL0MsZUFBZSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxhQUFhLEVBQUUsS0FBSyxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQ2hGO2FBQU07WUFDTCxpQkFBaUIsQ0FDZixLQUFLLENBQUMsaUJBQWlCLENBQUMsSUFBSSxFQUM1QixLQUFLLENBQUMsU0FBUyxDQUFDLElBQUksRUFDcEIsS0FBSyxDQUFDLGFBQWEsRUFDbkIsS0FBSyxDQUFDLFlBQVksQ0FDbkIsQ0FBQztTQUNIO0lBQ0gsQ0FBQztJQUVELGtCQUFrQixDQUFDLElBQVM7UUFDMUIsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUM3QixPQUFPLFlBQVksQ0FBQztTQUNyQjthQUFNLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLEVBQUU7WUFDeEMsT0FBTyxnQkFBZ0IsQ0FBQztTQUN6QjthQUFNLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEVBQUU7WUFDdEMsT0FBTyxjQUFjLENBQUM7U0FDdkI7UUFDRCxPQUFPLGdCQUFnQixDQUFDLENBQUMsZ0JBQWdCO0lBQzNDLENBQUM7O2lIQTFCVSxtQkFBbUI7cUdBQW5CLG1CQUFtQixtRkNoQmhDLDh6QkF1QkU7NEZEUFcsbUJBQW1CO2tCQUwvQixTQUFTOytCQUNFLGlCQUFpQjs4QkFNbEIsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2RrRHJhZ0Ryb3AsIG1vdmVJdGVtSW5BcnJheSwgdHJhbnNmZXJBcnJheUl0ZW0gfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcblxuaW50ZXJmYWNlIFRhc2sge1xuICBpZDogc3RyaW5nO1xuICB0aXRsZTogc3RyaW5nO1xuICBkZXNjcmlwdGlvbjogc3RyaW5nO1xuICB0YWdzOiBzdHJpbmdbXTtcbiAgYXNzaWduZWU6IHN0cmluZztcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWthbmJhbi12aWV3JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2thbmJhbi12aWV3LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4va2FuYmFuLXZpZXcuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIEthbmJhblZpZXdDb21wb25lbnQge1xuXG4gIEBJbnB1dCgpIGl0ZW1zOiBhbnk7XG5cbiAgZHJvcChldmVudDogQ2RrRHJhZ0Ryb3A8c3RyaW5nW10+KSB7XG4gICAgaWYgKGV2ZW50LnByZXZpb3VzQ29udGFpbmVyID09PSBldmVudC5jb250YWluZXIpIHtcbiAgICAgIG1vdmVJdGVtSW5BcnJheShldmVudC5jb250YWluZXIuZGF0YSwgZXZlbnQucHJldmlvdXNJbmRleCwgZXZlbnQuY3VycmVudEluZGV4KTtcbiAgICB9IGVsc2Uge1xuICAgICAgdHJhbnNmZXJBcnJheUl0ZW0oXG4gICAgICAgIGV2ZW50LnByZXZpb3VzQ29udGFpbmVyLmRhdGEsXG4gICAgICAgIGV2ZW50LmNvbnRhaW5lci5kYXRhLFxuICAgICAgICBldmVudC5wcmV2aW91c0luZGV4LFxuICAgICAgICBldmVudC5jdXJyZW50SW5kZXgsXG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIGdldFRhc2tCb3JkZXJDbGFzcyh0YXNrOiBhbnkpOiBzdHJpbmcge1xuICAgIGlmICh0YXNrLnRhZ3MuaW5jbHVkZXMoJ0J1ZycpKSB7XG4gICAgICByZXR1cm4gJ2JvcmRlci1idWcnO1xuICAgIH0gZWxzZSBpZiAodGFzay50YWdzLmluY2x1ZGVzKCdGZWF0dXJlJykpIHtcbiAgICAgIHJldHVybiAnYm9yZGVyLWZlYXR1cmUnO1xuICAgIH0gZWxzZSBpZiAodGFzay50YWdzLmluY2x1ZGVzKCdTdG9yeScpKSB7XG4gICAgICByZXR1cm4gJ2JvcmRlci1zdG9yeSc7XG4gICAgfVxuICAgIHJldHVybiAnYm9yZGVyLWRlZmF1bHQnOyAvLyBEZWZhdWx0IGNvbG9yXG4gIH1cblxuXG59XG4iLCI8ZGl2IGNka0Ryb3BMaXN0R3JvdXAgY2xhc3M9XCJrYW5iYW4tYm9hcmRcIj5cbiAgICA8ZGl2IGNsYXNzPVwia2FuYmFuLWNvbHVtblwiICpuZ0Zvcj1cImxldCBsaXN0IG9mIGl0ZW1zXCI+XG4gICAgICA8aDIgY2xhc3M9XCJjb2x1bW4taGVhZGVyXCI+IHt7IGxpc3QubmFtZSB9fTwvaDI+XG4gIFxuICAgICAgPGRpdlxuICAgICAgICBjZGtEcm9wTGlzdFxuICAgICAgICBbY2RrRHJvcExpc3REYXRhXT1cImxpc3QudGFza3NcIlxuICAgICAgICBjbGFzcz1cInRhc2stbGlzdFwiXG4gICAgICAgIChjZGtEcm9wTGlzdERyb3BwZWQpPVwiZHJvcCgkZXZlbnQpXCI+XG4gIFxuICAgICAgICA8ZGl2IGNsYXNzPVwidGFzay1jYXJkXCIgW25nQ2xhc3NdPVwiZ2V0VGFza0JvcmRlckNsYXNzKHRhc2spXCIgKm5nRm9yPVwibGV0IHRhc2sgb2YgbGlzdC50YXNrc1wiIGNka0RyYWc+XG4gICAgICAgICAgPGgzPlRhc2sgLSB7eyB0YXNrLmlkIH19PC9oMz5cbiAgICAgICAgICA8cD57eyB0YXNrLnRpdGxlIH19PC9wPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0YXNrLXRhZ3NcIj5cbiAgICAgICAgICAgIDxzcGFuICpuZ0Zvcj1cImxldCB0YWcgb2YgdGFzay50YWdzXCIgY2xhc3M9XCJ0YWdcIj57eyB0YWcgfX08L3NwYW4+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImFzc2lnbmVlXCI+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImF2YXRhclwiPnt7IHRhc2suYXNzaWduZWUgfX08L3NwYW4+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICAiXX0=