@steroidsjs/bootstrap 3.0.0-beta.107 → 3.0.0-beta.108

package/content/CalendarSystem/WeekGrid/views/WeekHour/WeekHour.scss

@@ -1,14 +1,104 @@
 @use "style/variables";
+@use "../../../../../scss/mixins";
 
 .WeekHour {
-    &__expand-button {
-        font-size: variables.$font-size-xs;
-        font-weight: variables.$font-weight-sm;
-        line-height: variables.$line-height-xs;
-        text-align: center;
-       
-        .ButtonView__text { 
-            color: #312C3A;
+    height: max-content;
+
+    &__hour {
+        $rootHour: &;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 1px;
+        min-height: 80px;
+        
+        &-event {
+            position: relative;
+            padding: 4px 8px;
+            overflow: hidden;
+            border-radius: 4px;
+            max-height: 78px;
+
+            &:nth-child(n+4) {
+                display: none;
+            }
+
+            &-title {
+                font-size: variables.$font-size-sm;
+                font-weight: variables.$font-weight-sm;
+                line-height: variables.$line-height-sm;
+                color: #312c3a;
+
+                padding-right: 36px;
+            }
+
+            &-time {
+                top: 4px;
+                right: 8px;
+                position: absolute;
+                display: inline-block;
+                font-size: variables.$font-size-xs;
+                font-weight: variables.$font-weight-sm;
+                line-height: variables.$line-height-xs;
+            }
+        }
+
+        &_hasOneEvent {
+            #{$rootHour}-event-title {
+                -webkit-line-clamp: 4; /* Число отображаемых строк */
+                display: -webkit-box; /* Включаем флексбоксы */
+                -webkit-box-orient: vertical; /* Вертикальная ориентация */
+                overflow: hidden;
+            }
+
+            #{$rootHour}-event {
+                max-height: 78px;
+            }
+        }
+
+        &_hasTwoEvents {
+            #{$rootHour}-event-title {
+                -webkit-line-clamp: 2; /* Число отображаемых строк */
+                display: -webkit-box; /* Включаем флексбоксы */
+                -webkit-box-orient: vertical; /* Вертикальная ориентация */
+                overflow: hidden;
+            }
+
+            #{$rootHour}-event {
+                max-height: 38px;
+            }
         }
+
+        &_hasTreeEvents {
+            #{$rootHour}-event-title {
+                -webkit-line-clamp: 1; /* Число отображаемых строк */
+                display: -webkit-box; /* Включаем флексбоксы */
+                -webkit-box-orient: vertical; /* Вертикальная ориентация */
+                overflow: hidden;
+            }
+
+            #{$rootHour}-event {
+                max-height: 26px;
+                padding: 0 8px;
+            }
+
+            #{$rootHour}-event-time {
+                top: 0;
+                right: 8px;
+            }
+        }
+
+        &_isExpanded #{$rootHour}-event  { 
+            &:nth-child(n+4) {
+                display: block;
+            }
+        }
+    }
+
+    &__expand-button {
+        @include mixins.expand-button();
+    }
+
+    &__tooltip {
+        @include mixins.calendar-tooltip();
     }
 }

package/content/Kanban/KanbanView.scss

@@ -8,4 +8,5 @@
   margin-top: 10px;
   white-space: nowrap;
   padding: 10px 20px;
+  overflow-x: auto;
 }

package/content/Kanban/views/KanbanColumn/KanbanColumnView.js

@@ -23,14 +23,14 @@ function KanbanColumnView(props) {
     var Draggable = props.draggableComponent;
     var Droppable = props.droppableComponent;
     var _a = props.column, id = _a.id, title = _a.title, tasks = _a.tasks;
-    return (react_1["default"].createElement(Draggable, { draggableId: id, index: props.columnIndex }, function (providedDraggable) { return (react_1["default"].createElement("div", __assign({ className: bem.block() }, providedDraggable.draggableProps, { ref: providedDraggable.innerRef }),
+    return (react_1["default"].createElement(Draggable, { draggableId: id.toString(), index: props.columnIndex }, function (providedDraggable) { return (react_1["default"].createElement("div", __assign({ className: bem.block() }, providedDraggable.draggableProps, { ref: providedDraggable.innerRef }),
         react_1["default"].createElement("div", __assign({ className: bem.element('header') }, providedDraggable.dragHandleProps),
             react_1["default"].createElement(typography_1.Title, { className: bem.element('title'), content: title, type: 'h3' },
                 react_1["default"].createElement("span", { className: bem.element('tasks-count') }, tasks.length))),
-        react_1["default"].createElement(Droppable, { droppableId: id, type: "task" }, function (providedDroppable) { return (react_1["default"].createElement("div", __assign({ className: bem.element('content'), ref: providedDroppable.innerRef }, providedDroppable.droppableProps),
-            tasks.map(function (task, taskIndex) { return (props.renderTask(task, taskIndex)); }),
+        react_1["default"].createElement(Droppable, { droppableId: id.toString(), type: "task" }, function (providedDroppable) { return (react_1["default"].createElement("div", __assign({ className: bem.element('content'), ref: providedDroppable.innerRef }, providedDroppable.droppableProps),
+            tasks.map(function (task, taskIndex) { return (props.renderTask(task, props.column.id, taskIndex)); }),
             providedDroppable.placeholder)); }),
         react_1["default"].createElement("div", { className: bem.element('button') },
-            react_1["default"].createElement(form_1.Button, { size: "sm", color: 'basic', icon: "add", block: true })))); }));
+            react_1["default"].createElement(form_1.Button, { size: "sm", color: 'basic', icon: "add", onClick: function () { return props.onOpenCreateTaskModal(props.column.id); }, block: true })))); }));
 }
 exports["default"] = KanbanColumnView;

package/content/Kanban/views/KanbanColumn/KanbanColumnView.scss

@@ -1,8 +1,19 @@
 @use "../../../../scss/variables";
 @use "../../../../scss/mixins";
 
+:root {
+  --kanban-background-color: #fff;
+  --add-task-icon-color: #323232;
+}
+
+html[data-theme="dark"] {
+  --kanban-background-color: #333646;
+  --add-task-icon-color: #fff;
+}
+
 $sidebar-scroll-thumb-color: var(--sidebar-scroll-thumb-color);
 $sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
+$add-task-icon-color: var(--add-task-icon-color);
 
 .KanbanColumnView {
   white-space: normal;
@@ -53,7 +64,12 @@ $sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
     padding-right: 8px;
 
     .ButtonView {
+      margin-top: 1em;
       background-color: variables.$light-gray;
+
+      svg path {
+        stroke: $add-task-icon-color;
+      }
     }
   }
 }

package/content/Kanban/views/KanbanModal/KanbanModalView.d.ts

@@ -0,0 +1,2 @@
+import { IKanbanModalViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
+export default function KanbanModalView(props: IKanbanModalViewProps): JSX.Element;

package/content/Kanban/views/KanbanModal/KanbanModalView.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal/Modal"));
+var enums_1 = require("@steroidsjs/core/ui/content/Kanban/enums");
+var hooks_1 = require("@steroidsjs/core/hooks");
+var CreateOrEditTaskModalContent_1 = __importDefault(require("./views/CreateOrEditTaskModalContent"));
+var TaskDetailsModalContent_1 = __importDefault(require("./views/TaskDetailsModalContent"));
+function KanbanModalView(props) {
+    var bem = (0, hooks_1.useBem)('KanbanModalView');
+    var renderModalContent = (0, react_1.useCallback)(function (modalType) {
+        switch (modalType) {
+            case enums_1.KanbanModalTypeEnum.CREATE:
+                return (react_1["default"].createElement(CreateOrEditTaskModalContent_1["default"], { bem: bem, formId: props.formId, columns: props.columns, columnId: props.columnId, tags: props.tags, assigners: props.assigners, submitButtonLabel: __('Создать'), onSubmit: props.onSubmit }));
+            case enums_1.KanbanModalTypeEnum.DETAILS:
+                return (react_1["default"].createElement(TaskDetailsModalContent_1["default"], { bem: bem, task: props.task }));
+            case enums_1.KanbanModalTypeEnum.EDIT:
+                return (react_1["default"].createElement(CreateOrEditTaskModalContent_1["default"], { bem: bem, formId: props.formId, task: props.task, columns: props.columns, columnId: props.columnId, tags: props.tags, assigners: props.assigners, submitButtonLabel: __('Сохранить'), onSubmit: props.onSubmit }));
+            default:
+                return null;
+        }
+    }, [bem, props.assigners, props.columnId, props.columns, props.formId, props.onSubmit, props.tags, props.task]);
+    var renderModalButton = (0, react_1.useCallback)(function (modalType) { return modalType !== enums_1.KanbanModalTypeEnum.CREATE
+        ? [{
+                icon: enums_1.KanbanModalTypeEnum.getModalIconByType(modalType),
+                onClick: props.onToggleModalType
+            }]
+        : null; }, [props.modalType]);
+    return (react_1["default"].createElement(Modal_1["default"], { className: bem.block(), title: props.title, onClose: props.onClose, size: "lg", buttons: renderModalButton(props.modalType) }, renderModalContent(props.modalType)));
+}
+exports["default"] = KanbanModalView;

package/content/Kanban/views/KanbanModal/KanbanModalView.scss

@@ -0,0 +1,199 @@
+@use "../../../../scss/variables";
+
+:root {
+  --badge-background-color: #f8f8f8;
+  --badge-text-color: variables.$static-text-color;
+}
+
+html[data-theme="dark"] {
+  --badge-background-color: #4b4e5e;
+  --badge-text-color: variables.$white;
+}
+
+$badge-background-color: var(--badge-background-color);
+$badge-text-color: var(--badge-text-color);
+
+.KanbanModalView {
+  min-width: 536px;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    &_radio {
+      height: 46px;
+    }
+
+    &_tags {
+      display: flex;
+      flex-flow: row wrap;
+      gap: 4px;
+    }
+  }
+
+  &__label {
+    flex: 1;
+    margin: 0;
+  }
+
+  &__right {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 24px;
+
+    &_column {
+      flex-flow: column nowrap;
+      gap: 16px;
+    }
+  }
+
+  &__assigner {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 24px;
+    max-width: 488px;
+    width: 100%;
+    padding-top: 16px;
+    word-break: break-all;
+  }
+
+  &__data {
+    flex: 4;
+  }
+
+  &__form-content {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 16px;
+    padding-top: 24px;
+    font-size: 14px;
+
+    .FieldLayoutView {
+      flex: 2;
+      margin: 0;
+    }
+  }
+
+  &__right {
+    flex: 5;
+
+    .RadioFieldView {
+      display: flex;
+    }
+  }
+
+  &__sub-right {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 8px;
+
+    .FieldLayoutView {
+      min-width: 140px;
+      flex: 1;
+    }
+  }
+
+  &__button {
+    margin-top: 24px;
+  }
+
+  .DropDownItemView {
+    &__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__img {
+      img {
+        object-fit: cover;
+      }
+    }
+  }
+
+  .ModalView {
+    &__header {
+      align-items: flex-start;
+      padding-bottom: 0 !important;
+    }
+
+    &__title {
+      max-width: 440px;
+      font-size: 18px;
+      line-height: 24px;
+    }
+
+    &__content {
+      padding-top: 0 !important;
+    }
+
+    &__footer {
+      padding-top: 0 !important;
+      justify-content: flex-end;
+
+      .ButtonView {
+        width: 46px;
+        height: 46px;
+
+        background-color: variables.$secondary;
+
+        &__label {
+          width: 24px;
+          height: 24px;
+          flex-shrink: 0;
+        }
+      }
+
+      svg {
+        width: 24px;
+        height: 24px;
+        path {
+          stroke: #fff;
+        }
+      }
+    }
+  }
+
+  .BadgeView {
+    &_light-gray {
+      background-color: $badge-background-color;
+      color: $badge-text-color;
+    }
+  }
+
+  .TextView {
+    margin: 0;
+  }
+
+  .DropDownFieldView__icon-close {
+    z-index: 0;
+  }
+
+  .RadioListFieldView_horizontal {
+    gap: 24px;
+  }
+}
+
+.ModalView {
+  overflow-y: auto;
+}
+
+.KanbanModalView:has(.TaskTags) .KanbanModalView {
+  &__row_tags-field {
+    align-items: flex-start;
+  }
+}
+
+.KanbanModalView:has(.ModalView__footer) .ModalView {
+  &__content {
+    padding-bottom: 0 !important;
+  }
+}

package/content/Kanban/views/KanbanModal/index.d.ts

@@ -0,0 +1,2 @@
+import KanbanModalView from './KanbanModalView';
+export default KanbanModalView;

package/content/Kanban/views/KanbanModal/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var KanbanModalView_1 = __importDefault(require("./KanbanModalView"));
+exports["default"] = KanbanModalView_1["default"];

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/CreateOrEditTaskModalContentView.d.ts

@@ -0,0 +1,2 @@
+import { ICreateOrEditTaskModalContentViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
+export default function CreateOrEditTaskModalContentView(props: ICreateOrEditTaskModalContentViewProps): JSX.Element;

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/CreateOrEditTaskModalContentView.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var KanbanPrioritiesEnum_1 = __importDefault(require("@steroidsjs/core/ui/content/Kanban/enums/KanbanPrioritiesEnum"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var content_1 = require("@steroidsjs/core/ui/content");
+var TagsSelector_1 = __importDefault(require("./views/TagsSelector"));
+var Label_1 = __importDefault(require("./views/Label"));
+function CreateOrEditTaskModalContentView(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var columns = (0, react_1.useMemo)(function () { return (props.columns.map(function (column) { return ({
+        id: column.id,
+        label: column.title
+    }); })); }, [props.columns]);
+    var prioritiesFields = (0, react_1.useMemo)(function () { return KanbanPrioritiesEnum_1["default"].getPrioritiesArray()
+        .map(function (priority) { return ({
+        id: priority.id,
+        label: react_1["default"].createElement(content_1.Badge, { size: "md", roundingStyle: "squarer", message: KanbanPrioritiesEnum_1["default"].getLabel(priority.type), type: KanbanPrioritiesEnum_1["default"].getColorByType(priority.type) })
+    }); }); }, []);
+    return (react_1["default"].createElement(form_1.Form, { formId: props.formId, className: props.bem.element('form'), initialValues: props.task
+            ? {
+                columnId: props.columnId || '',
+                title: props.task.title || '',
+                description: props.task.description || '',
+                fullDescription: props.task.fullDescription || '',
+                tags: ((_a = props.task.tags) === null || _a === void 0 ? void 0 : _a.map(function (tag) { return tag.id; })) || [],
+                priority: ((_b = props.task.priority) === null || _b === void 0 ? void 0 : _b.id) || null,
+                assigner: ((_c = props.task.assigner) === null || _c === void 0 ? void 0 : _c.id) || null
+            }
+            : {}, onSubmit: function (data) {
+            var _a;
+            props.onSubmit((_a = props.task) === null || _a === void 0 ? void 0 : _a.id, data, props.columnId);
+        }, useRedux: true },
+        react_1["default"].createElement("div", { className: props.bem.element('form-content') },
+            react_1["default"].createElement("div", { className: props.bem.element('row') },
+                react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Заголовок') }),
+                react_1["default"].createElement("div", { className: props.bem.element('right') },
+                    react_1["default"].createElement(form_1.InputField, { attribute: "title", size: "md", showClear: true, required: true, outline: true }),
+                    react_1["default"].createElement("div", { className: props.bem.element('sub-right') },
+                        react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Переместить в') }),
+                        react_1["default"].createElement(form_1.DropDownField, { attribute: 'columnId', selectedIds: [props.columnId], items: columns, size: "md", outline: true })))),
+            react_1["default"].createElement("div", { className: props.bem.element('row') },
+                react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Описание') }),
+                react_1["default"].createElement("div", { className: props.bem.element('right', 'column') },
+                    react_1["default"].createElement(form_1.InputField, { attribute: "description", size: "md", showClear: true }))),
+            react_1["default"].createElement("div", { className: props.bem.element('row') },
+                react_1["default"].createElement("div", { className: props.bem.element('label') }),
+                react_1["default"].createElement("div", { className: props.bem.element('right', 'column') },
+                    react_1["default"].createElement(form_1.HtmlField, { attribute: "fullDescription", size: "md" }))),
+            !!((_d = props.tags) === null || _d === void 0 ? void 0 : _d.length) && (react_1["default"].createElement("div", { className: props.bem.element('row', 'tags-field') },
+                react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Добавить теги') }),
+                react_1["default"].createElement("div", { className: props.bem.element('right', 'column') },
+                    react_1["default"].createElement(TagsSelector_1["default"], { tags: props.tags, formId: props.formId })))),
+            react_1["default"].createElement("div", { className: props.bem.element('row') },
+                react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Исполнители') }),
+                react_1["default"].createElement("div", { className: props.bem.element('right') },
+                    react_1["default"].createElement(form_1.DropDownField, { attribute: 'assigner', selectedIds: ((_f = (_e = props.task) === null || _e === void 0 ? void 0 : _e.assigner) === null || _f === void 0 ? void 0 : _f.id) && [props.task.assigner.id], items: props.assigners, showReset: true, outline: true }))),
+            react_1["default"].createElement("div", { className: props.bem.element('row', 'radio') },
+                react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Приоритет') }),
+                react_1["default"].createElement("div", { className: props.bem.element('right') },
+                    react_1["default"].createElement(form_1.RadioListField, { attribute: 'priority', items: prioritiesFields, selectedIds: [
+                            (_j = (_h = (_g = props.task) === null || _g === void 0 ? void 0 : _g.priority) === null || _h === void 0 ? void 0 : _h.id) !== null && _j !== void 0 ? _j : KanbanPrioritiesEnum_1["default"].getDefaultSelectedPriorityId(),
+                        ], multiple: false, orientation: 'horizontal' }))),
+            react_1["default"].createElement("div", { className: props.bem.element('button') },
+                react_1["default"].createElement(form_1.Button, { type: "submit", label: props.submitButtonLabel, size: "md" })))));
+}
+exports["default"] = CreateOrEditTaskModalContentView;

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/index.d.ts

@@ -0,0 +1,2 @@
+import CreateOrEditTaskModalContentView from './CreateOrEditTaskModalContentView';
+export default CreateOrEditTaskModalContentView;

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var CreateOrEditTaskModalContentView_1 = __importDefault(require("./CreateOrEditTaskModalContentView"));
+exports["default"] = CreateOrEditTaskModalContentView_1["default"];

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/Label/Label.d.ts

@@ -0,0 +1,6 @@
+interface ILabelProps {
+    content: string;
+    className: string;
+}
+export default function Label(props: ILabelProps): JSX.Element;
+export {};

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/Label/Label.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var typography_1 = require("@steroidsjs/core/ui/typography");
+function Label(props) {
+    return (react_1["default"].createElement(typography_1.Text, { className: props.className, type: 'body2', content: props.content, color: "light-dark" }));
+}
+exports["default"] = Label;

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/Label/index.d.ts

@@ -0,0 +1,2 @@
+import Label from './Label';
+export default Label;

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/Label/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Label_1 = __importDefault(require("./Label"));
+exports["default"] = Label_1["default"];

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/TagsSelector.d.ts

@@ -0,0 +1,8 @@
+import { ITaskTag } from '@steroidsjs/core/ui/content/Kanban/Kanban';
+import './TagsSelector.scss';
+interface ITagsSelectorProps {
+    tags?: ITaskTag[];
+    formId?: string;
+}
+export default function TagsSelector(props: ITagsSelectorProps): JSX.Element;
+export {};

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/TagsSelector.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/reducers/form");
+var form_2 = require("@steroidsjs/core/ui/form");
+var TaskTags_1 = __importDefault(require("../../../../../TaskTags"));
+require("./TagsSelector.scss");
+function TagsSelector(props) {
+    var bem = (0, hooks_1.useBem)('TagsSelector');
+    var selectedTags = (0, hooks_1.useSelector)(function (state) { return (0, form_1.getFormValues)(state, props.formId); }).tags;
+    var taskTags = (0, react_1.useMemo)(function () { return (props.tags.filter(function (tag) { return selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.includes(tag.id); })); }, [props.tags, selectedTags]);
+    var tagsList = (0, react_1.useMemo)(function () { return (props.tags.map(function (tag) { return ({
+        id: tag.id,
+        label: tag.message,
+        contentType: 'icon',
+        contentSrc: react_1["default"].createElement("div", { className: bem.element('tag-color', tag.type) })
+    }); })); }, [bem, props.tags]);
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        !!(selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.length) && (react_1["default"].createElement(TaskTags_1["default"], { tags: taskTags })),
+        react_1["default"].createElement(form_2.DropDownField, { attribute: "tags", placeholder: __('Выберите теги'), multiple: true, items: tagsList, selectedIds: selectedTags, autoComplete: true, outline: true })));
+}
+exports["default"] = TagsSelector;