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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/content/CalendarSystem/MonthGrid/MonthGrid.js +2 -13
  2. package/content/CalendarSystem/MonthGrid/MonthGrid.scss +1 -91
  3. package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.d.ts +9 -0
  4. package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.js +57 -0
  5. package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.scss +125 -0
  6. package/content/CalendarSystem/MonthGrid/views/MonthDay/index.d.ts +2 -0
  7. package/content/CalendarSystem/MonthGrid/views/MonthDay/index.js +7 -0
  8. package/content/CalendarSystem/WeekGrid/WeekGrid.js +1 -1
  9. package/content/CalendarSystem/WeekGrid/WeekGrid.scss +5 -76
  10. package/content/CalendarSystem/WeekGrid/views/WeekHour/WeekHour.d.ts +0 -2
  11. package/content/CalendarSystem/WeekGrid/views/WeekHour/WeekHour.js +39 -15
  12. package/content/CalendarSystem/WeekGrid/views/WeekHour/WeekHour.scss +98 -8
  13. package/content/Kanban/KanbanView.d.ts +2 -0
  14. package/content/Kanban/KanbanView.js +29 -0
  15. package/content/Kanban/KanbanView.scss +12 -0
  16. package/content/Kanban/views/KanbanColumn/KanbanColumnView.d.ts +2 -0
  17. package/content/Kanban/views/KanbanColumn/KanbanColumnView.js +36 -0
  18. package/content/Kanban/views/KanbanColumn/KanbanColumnView.scss +75 -0
  19. package/content/Kanban/views/KanbanColumn/index.d.ts +2 -0
  20. package/content/Kanban/views/KanbanColumn/index.js +7 -0
  21. package/content/Kanban/views/KanbanModal/KanbanModalView.d.ts +2 -0
  22. package/content/Kanban/views/KanbanModal/KanbanModalView.js +57 -0
  23. package/content/Kanban/views/KanbanModal/KanbanModalView.scss +199 -0
  24. package/content/Kanban/views/KanbanModal/index.d.ts +2 -0
  25. package/content/Kanban/views/KanbanModal/index.js +7 -0
  26. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/CreateOrEditTaskModalContentView.d.ts +2 -0
  27. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/CreateOrEditTaskModalContentView.js +93 -0
  28. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/index.d.ts +2 -0
  29. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/index.js +7 -0
  30. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/Label/Label.d.ts +6 -0
  31. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/Label/Label.js +11 -0
  32. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/Label/index.d.ts +2 -0
  33. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/Label/index.js +7 -0
  34. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/TagsSelector.d.ts +8 -0
  35. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/TagsSelector.js +49 -0
  36. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/TagsSelector.scss +30 -0
  37. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/index.d.ts +2 -0
  38. package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/index.js +7 -0
  39. package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/TaskDetailsModalContentView.d.ts +2 -0
  40. package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/TaskDetailsModalContentView.js +53 -0
  41. package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/index.d.ts +2 -0
  42. package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/index.js +7 -0
  43. package/content/Kanban/views/KanbanTask/KanbanTaskView.d.ts +5 -0
  44. package/content/Kanban/views/KanbanTask/KanbanTaskView.js +66 -0
  45. package/content/Kanban/views/KanbanTask/KanbanTaskView.scss +110 -0
  46. package/content/Kanban/views/KanbanTask/index.d.ts +2 -0
  47. package/content/Kanban/views/KanbanTask/index.js +7 -0
  48. package/content/Kanban/views/TaskTags/TaskTags.d.ts +9 -0
  49. package/content/Kanban/views/TaskTags/TaskTags.js +14 -0
  50. package/content/Kanban/views/TaskTags/TaskTags.scss +7 -0
  51. package/content/Kanban/views/TaskTags/index.d.ts +2 -0
  52. package/content/Kanban/views/TaskTags/index.js +7 -0
  53. package/form/DropDownField/DropDownFieldView.scss +3 -2
  54. package/index.d.ts +12 -0
  55. package/index.js +12 -0
  56. package/index.scss +4 -0
  57. package/package.json +2 -2
  58. package/scss/mixins/button.scss +24 -8
  59. package/scss/mixins/index.scss +1 -0
  60. package/scss/mixins/tooltip.scss +23 -0
  61. package/scss/variables/common/colors.scss +5 -2
  62. package/scss/variables/common/typography.scss +13 -0
  63. package/utils/getFormattedExpandLabel.d.ts +1 -0
  64. package/utils/getFormattedExpandLabel.js +5 -0
@@ -1,14 +1,104 @@
1
1
  @use "style/variables";
2
+ @use "../../../../../scss/mixins";
2
3
 
3
4
  .WeekHour {
4
- &__expand-button {
5
- font-size: variables.$font-size-xs;
6
- font-weight: variables.$font-weight-sm;
7
- line-height: variables.$line-height-xs;
8
- text-align: center;
9
-
10
- .ButtonView__text {
11
- color: #312C3A;
5
+ height: max-content;
6
+
7
+ &__hour {
8
+ $rootHour: &;
9
+ display: flex;
10
+ flex-flow: column nowrap;
11
+ gap: 1px;
12
+ min-height: 80px;
13
+
14
+ &-event {
15
+ position: relative;
16
+ padding: 4px 8px;
17
+ overflow: hidden;
18
+ border-radius: 4px;
19
+ max-height: 78px;
20
+
21
+ &:nth-child(n+4) {
22
+ display: none;
23
+ }
24
+
25
+ &-title {
26
+ font-size: variables.$font-size-sm;
27
+ font-weight: variables.$font-weight-sm;
28
+ line-height: variables.$line-height-sm;
29
+ color: #312c3a;
30
+
31
+ padding-right: 36px;
32
+ }
33
+
34
+ &-time {
35
+ top: 4px;
36
+ right: 8px;
37
+ position: absolute;
38
+ display: inline-block;
39
+ font-size: variables.$font-size-xs;
40
+ font-weight: variables.$font-weight-sm;
41
+ line-height: variables.$line-height-xs;
42
+ }
43
+ }
44
+
45
+ &_hasOneEvent {
46
+ #{$rootHour}-event-title {
47
+ -webkit-line-clamp: 4; /* Число отображаемых строк */
48
+ display: -webkit-box; /* Включаем флексбоксы */
49
+ -webkit-box-orient: vertical; /* Вертикальная ориентация */
50
+ overflow: hidden;
51
+ }
52
+
53
+ #{$rootHour}-event {
54
+ max-height: 78px;
55
+ }
56
+ }
57
+
58
+ &_hasTwoEvents {
59
+ #{$rootHour}-event-title {
60
+ -webkit-line-clamp: 2; /* Число отображаемых строк */
61
+ display: -webkit-box; /* Включаем флексбоксы */
62
+ -webkit-box-orient: vertical; /* Вертикальная ориентация */
63
+ overflow: hidden;
64
+ }
65
+
66
+ #{$rootHour}-event {
67
+ max-height: 38px;
68
+ }
12
69
  }
70
+
71
+ &_hasTreeEvents {
72
+ #{$rootHour}-event-title {
73
+ -webkit-line-clamp: 1; /* Число отображаемых строк */
74
+ display: -webkit-box; /* Включаем флексбоксы */
75
+ -webkit-box-orient: vertical; /* Вертикальная ориентация */
76
+ overflow: hidden;
77
+ }
78
+
79
+ #{$rootHour}-event {
80
+ max-height: 26px;
81
+ padding: 0 8px;
82
+ }
83
+
84
+ #{$rootHour}-event-time {
85
+ top: 0;
86
+ right: 8px;
87
+ }
88
+ }
89
+
90
+ &_isExpanded #{$rootHour}-event {
91
+ &:nth-child(n+4) {
92
+ display: block;
93
+ }
94
+ }
95
+ }
96
+
97
+ &__expand-button {
98
+ @include mixins.expand-button();
99
+ }
100
+
101
+ &__tooltip {
102
+ @include mixins.calendar-tooltip();
13
103
  }
14
104
  }
@@ -0,0 +1,2 @@
1
+ import { IKanbanViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
2
+ export default function KanbanView(props: IKanbanViewProps): JSX.Element;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ exports.__esModule = true;
17
+ var react_1 = __importDefault(require("react"));
18
+ var hooks_1 = require("@steroidsjs/core/hooks");
19
+ function KanbanView(props) {
20
+ var bem = (0, hooks_1.useBem)('KanbanView');
21
+ var Droppable = props.droppableComponent;
22
+ return (react_1["default"].createElement(Droppable, { droppableId: "all-columns", direction: "horizontal", type: "column" }, function (provided) {
23
+ var _a;
24
+ return (react_1["default"].createElement("div", __assign({ className: bem.block(), id: "task-board", ref: provided.innerRef }, provided.droppableProps, { style: props.style }), (_a = props.columns) === null || _a === void 0 ? void 0 :
25
+ _a.map(function (column, index) { return props.renderColumn(column, index); }),
26
+ provided.placeholder));
27
+ }));
28
+ }
29
+ exports["default"] = KanbanView;
@@ -0,0 +1,12 @@
1
+ .KanbanView {
2
+ display: flex;
3
+ justify-content: flex-start;
4
+ align-items: flex-start;
5
+ position: relative;
6
+ width: 100%;
7
+ height: 100%;
8
+ margin-top: 10px;
9
+ white-space: nowrap;
10
+ padding: 10px 20px;
11
+ overflow-x: auto;
12
+ }
@@ -0,0 +1,2 @@
1
+ import { IKanbanColumnViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
2
+ export default function KanbanColumnView(props: IKanbanColumnViewProps): JSX.Element;
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ exports.__esModule = true;
17
+ var react_1 = __importDefault(require("react"));
18
+ var hooks_1 = require("@steroidsjs/core/hooks");
19
+ var typography_1 = require("@steroidsjs/core/ui/typography");
20
+ var form_1 = require("@steroidsjs/core/ui/form");
21
+ function KanbanColumnView(props) {
22
+ var bem = (0, hooks_1.useBem)('KanbanColumnView');
23
+ var Draggable = props.draggableComponent;
24
+ var Droppable = props.droppableComponent;
25
+ var _a = props.column, id = _a.id, title = _a.title, tasks = _a.tasks;
26
+ 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 }),
27
+ react_1["default"].createElement("div", __assign({ className: bem.element('header') }, providedDraggable.dragHandleProps),
28
+ react_1["default"].createElement(typography_1.Title, { className: bem.element('title'), content: title, type: 'h3' },
29
+ react_1["default"].createElement("span", { className: bem.element('tasks-count') }, tasks.length))),
30
+ 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),
31
+ tasks.map(function (task, taskIndex) { return (props.renderTask(task, props.column.id, taskIndex)); }),
32
+ providedDroppable.placeholder)); }),
33
+ react_1["default"].createElement("div", { className: bem.element('button') },
34
+ react_1["default"].createElement(form_1.Button, { size: "sm", color: 'basic', icon: "add", onClick: function () { return props.onOpenCreateTaskModal(props.column.id); }, block: true })))); }));
35
+ }
36
+ exports["default"] = KanbanColumnView;
@@ -0,0 +1,75 @@
1
+ @use "../../../../scss/variables";
2
+ @use "../../../../scss/mixins";
3
+
4
+ :root {
5
+ --kanban-background-color: #fff;
6
+ --add-task-icon-color: #323232;
7
+ }
8
+
9
+ html[data-theme="dark"] {
10
+ --kanban-background-color: #333646;
11
+ --add-task-icon-color: #fff;
12
+ }
13
+
14
+ $sidebar-scroll-thumb-color: var(--sidebar-scroll-thumb-color);
15
+ $sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
16
+ $add-task-icon-color: var(--add-task-icon-color);
17
+
18
+ .KanbanColumnView {
19
+ white-space: normal;
20
+ min-width: 375px;
21
+ width: 375px;
22
+ margin-right: 8px;
23
+ padding: 16px 8px 16px 16px;
24
+ border: 1px solid variables.$element-border-color;
25
+ border-radius: 20px;
26
+ color: variables.$text-color;
27
+ background-color: variables.$element-background-color;
28
+
29
+ &__header {
30
+ display: flex;
31
+ font-size: 18px;
32
+ }
33
+
34
+ &__title {
35
+ margin-bottom: 16px;
36
+ }
37
+
38
+ &__tasks-count {
39
+ overflow-y: auto;
40
+ overflow-x: hidden;
41
+ margin-left: 8px;
42
+ color: variables.$element-placeholder-color;
43
+ }
44
+
45
+ &__content {
46
+ display: flex;
47
+ flex-direction: column;
48
+ min-height: 10px;
49
+ overflow: scroll;
50
+ overflow-x: hidden;
51
+
52
+ @include mixins.scrollWrapper(#{900px}, 8px, $sidebar-scroll-thumb-color, $sidebar-scroll-track-color);
53
+
54
+ &::-webkit-scrollbar {
55
+ width: 4px;
56
+ }
57
+
58
+ &::-webkit-scrollbar-track {
59
+ margin-bottom: 8px;
60
+ }
61
+ }
62
+
63
+ &__button {
64
+ padding-right: 8px;
65
+
66
+ .ButtonView {
67
+ margin-top: 1em;
68
+ background-color: variables.$light-gray;
69
+
70
+ svg path {
71
+ stroke: $add-task-icon-color;
72
+ }
73
+ }
74
+ }
75
+ }
@@ -0,0 +1,2 @@
1
+ import KanbanColumnView from './KanbanColumnView';
2
+ export default KanbanColumnView;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ exports.__esModule = true;
6
+ var KanbanColumnView_1 = __importDefault(require("./KanbanColumnView"));
7
+ exports["default"] = KanbanColumnView_1["default"];
@@ -0,0 +1,2 @@
1
+ import { IKanbanModalViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
2
+ export default function KanbanModalView(props: IKanbanModalViewProps): JSX.Element;
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ exports.__esModule = true;
29
+ var react_1 = __importStar(require("react"));
30
+ var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal/Modal"));
31
+ var enums_1 = require("@steroidsjs/core/ui/content/Kanban/enums");
32
+ var hooks_1 = require("@steroidsjs/core/hooks");
33
+ var CreateOrEditTaskModalContent_1 = __importDefault(require("./views/CreateOrEditTaskModalContent"));
34
+ var TaskDetailsModalContent_1 = __importDefault(require("./views/TaskDetailsModalContent"));
35
+ function KanbanModalView(props) {
36
+ var bem = (0, hooks_1.useBem)('KanbanModalView');
37
+ var renderModalContent = (0, react_1.useCallback)(function (modalType) {
38
+ switch (modalType) {
39
+ case enums_1.KanbanModalTypeEnum.CREATE:
40
+ 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 }));
41
+ case enums_1.KanbanModalTypeEnum.DETAILS:
42
+ return (react_1["default"].createElement(TaskDetailsModalContent_1["default"], { bem: bem, task: props.task }));
43
+ case enums_1.KanbanModalTypeEnum.EDIT:
44
+ 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 }));
45
+ default:
46
+ return null;
47
+ }
48
+ }, [bem, props.assigners, props.columnId, props.columns, props.formId, props.onSubmit, props.tags, props.task]);
49
+ var renderModalButton = (0, react_1.useCallback)(function (modalType) { return modalType !== enums_1.KanbanModalTypeEnum.CREATE
50
+ ? [{
51
+ icon: enums_1.KanbanModalTypeEnum.getModalIconByType(modalType),
52
+ onClick: props.onToggleModalType
53
+ }]
54
+ : null; }, [props.modalType]);
55
+ 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)));
56
+ }
57
+ exports["default"] = KanbanModalView;
@@ -0,0 +1,199 @@
1
+ @use "../../../../scss/variables";
2
+
3
+ :root {
4
+ --badge-background-color: #f8f8f8;
5
+ --badge-text-color: variables.$static-text-color;
6
+ }
7
+
8
+ html[data-theme="dark"] {
9
+ --badge-background-color: #4b4e5e;
10
+ --badge-text-color: variables.$white;
11
+ }
12
+
13
+ $badge-background-color: var(--badge-background-color);
14
+ $badge-text-color: var(--badge-text-color);
15
+
16
+ .KanbanModalView {
17
+ min-width: 536px;
18
+
19
+ &__row {
20
+ display: flex;
21
+ align-items: center;
22
+ gap: 16px;
23
+
24
+ &_radio {
25
+ height: 46px;
26
+ }
27
+
28
+ &_tags {
29
+ display: flex;
30
+ flex-flow: row wrap;
31
+ gap: 4px;
32
+ }
33
+ }
34
+
35
+ &__label {
36
+ flex: 1;
37
+ margin: 0;
38
+ }
39
+
40
+ &__right {
41
+ display: flex;
42
+ flex-flow: row nowrap;
43
+ gap: 24px;
44
+
45
+ &_column {
46
+ flex-flow: column nowrap;
47
+ gap: 16px;
48
+ }
49
+ }
50
+
51
+ &__assigner {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 8px;
55
+ }
56
+
57
+ &__content {
58
+ display: flex;
59
+ flex-flow: column nowrap;
60
+ gap: 24px;
61
+ max-width: 488px;
62
+ width: 100%;
63
+ padding-top: 16px;
64
+ word-break: break-all;
65
+ }
66
+
67
+ &__data {
68
+ flex: 4;
69
+ }
70
+
71
+ &__form-content {
72
+ display: flex;
73
+ flex-flow: column nowrap;
74
+ gap: 16px;
75
+ padding-top: 24px;
76
+ font-size: 14px;
77
+
78
+ .FieldLayoutView {
79
+ flex: 2;
80
+ margin: 0;
81
+ }
82
+ }
83
+
84
+ &__right {
85
+ flex: 5;
86
+
87
+ .RadioFieldView {
88
+ display: flex;
89
+ }
90
+ }
91
+
92
+ &__sub-right {
93
+ display: flex;
94
+ flex-flow: row nowrap;
95
+ align-items: center;
96
+ gap: 8px;
97
+
98
+ .FieldLayoutView {
99
+ min-width: 140px;
100
+ flex: 1;
101
+ }
102
+ }
103
+
104
+ &__button {
105
+ margin-top: 24px;
106
+ }
107
+
108
+ .DropDownItemView {
109
+ &__icon {
110
+ display: flex;
111
+ align-items: center;
112
+ justify-content: center;
113
+ }
114
+
115
+ &__img {
116
+ img {
117
+ object-fit: cover;
118
+ }
119
+ }
120
+ }
121
+
122
+ .ModalView {
123
+ &__header {
124
+ align-items: flex-start;
125
+ padding-bottom: 0 !important;
126
+ }
127
+
128
+ &__title {
129
+ max-width: 440px;
130
+ font-size: 18px;
131
+ line-height: 24px;
132
+ }
133
+
134
+ &__content {
135
+ padding-top: 0 !important;
136
+ }
137
+
138
+ &__footer {
139
+ padding-top: 0 !important;
140
+ justify-content: flex-end;
141
+
142
+ .ButtonView {
143
+ width: 46px;
144
+ height: 46px;
145
+
146
+ background-color: variables.$secondary;
147
+
148
+ &__label {
149
+ width: 24px;
150
+ height: 24px;
151
+ flex-shrink: 0;
152
+ }
153
+ }
154
+
155
+ svg {
156
+ width: 24px;
157
+ height: 24px;
158
+ path {
159
+ stroke: #fff;
160
+ }
161
+ }
162
+ }
163
+ }
164
+
165
+ .BadgeView {
166
+ &_light-gray {
167
+ background-color: $badge-background-color;
168
+ color: $badge-text-color;
169
+ }
170
+ }
171
+
172
+ .TextView {
173
+ margin: 0;
174
+ }
175
+
176
+ .DropDownFieldView__icon-close {
177
+ z-index: 0;
178
+ }
179
+
180
+ .RadioListFieldView_horizontal {
181
+ gap: 24px;
182
+ }
183
+ }
184
+
185
+ .ModalView {
186
+ overflow-y: auto;
187
+ }
188
+
189
+ .KanbanModalView:has(.TaskTags) .KanbanModalView {
190
+ &__row_tags-field {
191
+ align-items: flex-start;
192
+ }
193
+ }
194
+
195
+ .KanbanModalView:has(.ModalView__footer) .ModalView {
196
+ &__content {
197
+ padding-bottom: 0 !important;
198
+ }
199
+ }
@@ -0,0 +1,2 @@
1
+ import KanbanModalView from './KanbanModalView';
2
+ export default KanbanModalView;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ exports.__esModule = true;
6
+ var KanbanModalView_1 = __importDefault(require("./KanbanModalView"));
7
+ exports["default"] = KanbanModalView_1["default"];
@@ -0,0 +1,2 @@
1
+ import { ICreateOrEditTaskModalContentViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
2
+ export default function CreateOrEditTaskModalContentView(props: ICreateOrEditTaskModalContentViewProps): JSX.Element;
@@ -0,0 +1,93 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ exports.__esModule = true;
29
+ var react_1 = __importStar(require("react"));
30
+ var KanbanPrioritiesEnum_1 = __importDefault(require("@steroidsjs/core/ui/content/Kanban/enums/KanbanPrioritiesEnum"));
31
+ var form_1 = require("@steroidsjs/core/ui/form");
32
+ var content_1 = require("@steroidsjs/core/ui/content");
33
+ var TagsSelector_1 = __importDefault(require("./views/TagsSelector"));
34
+ var Label_1 = __importDefault(require("./views/Label"));
35
+ function CreateOrEditTaskModalContentView(props) {
36
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
37
+ var columns = (0, react_1.useMemo)(function () { return (props.columns.map(function (column) { return ({
38
+ id: column.id,
39
+ label: column.title
40
+ }); })); }, [props.columns]);
41
+ var prioritiesFields = (0, react_1.useMemo)(function () { return KanbanPrioritiesEnum_1["default"].getPrioritiesArray()
42
+ .map(function (priority) { return ({
43
+ id: priority.id,
44
+ 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) })
45
+ }); }); }, []);
46
+ return (react_1["default"].createElement(form_1.Form, { formId: props.formId, className: props.bem.element('form'), initialValues: props.task
47
+ ? {
48
+ columnId: props.columnId || '',
49
+ title: props.task.title || '',
50
+ description: props.task.description || '',
51
+ fullDescription: props.task.fullDescription || '',
52
+ tags: ((_a = props.task.tags) === null || _a === void 0 ? void 0 : _a.map(function (tag) { return tag.id; })) || [],
53
+ priority: ((_b = props.task.priority) === null || _b === void 0 ? void 0 : _b.id) || null,
54
+ assigner: ((_c = props.task.assigner) === null || _c === void 0 ? void 0 : _c.id) || null
55
+ }
56
+ : {}, onSubmit: function (data) {
57
+ var _a;
58
+ props.onSubmit((_a = props.task) === null || _a === void 0 ? void 0 : _a.id, data, props.columnId);
59
+ }, useRedux: true },
60
+ react_1["default"].createElement("div", { className: props.bem.element('form-content') },
61
+ react_1["default"].createElement("div", { className: props.bem.element('row') },
62
+ react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Заголовок') }),
63
+ react_1["default"].createElement("div", { className: props.bem.element('right') },
64
+ react_1["default"].createElement(form_1.InputField, { attribute: "title", size: "md", showClear: true, required: true, outline: true }),
65
+ react_1["default"].createElement("div", { className: props.bem.element('sub-right') },
66
+ react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Переместить в') }),
67
+ react_1["default"].createElement(form_1.DropDownField, { attribute: 'columnId', selectedIds: [props.columnId], items: columns, size: "md", outline: true })))),
68
+ react_1["default"].createElement("div", { className: props.bem.element('row') },
69
+ react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Описание') }),
70
+ react_1["default"].createElement("div", { className: props.bem.element('right', 'column') },
71
+ react_1["default"].createElement(form_1.InputField, { attribute: "description", size: "md", showClear: true }))),
72
+ react_1["default"].createElement("div", { className: props.bem.element('row') },
73
+ react_1["default"].createElement("div", { className: props.bem.element('label') }),
74
+ react_1["default"].createElement("div", { className: props.bem.element('right', 'column') },
75
+ react_1["default"].createElement(form_1.HtmlField, { attribute: "fullDescription", size: "md" }))),
76
+ !!((_d = props.tags) === null || _d === void 0 ? void 0 : _d.length) && (react_1["default"].createElement("div", { className: props.bem.element('row', 'tags-field') },
77
+ react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Добавить теги') }),
78
+ react_1["default"].createElement("div", { className: props.bem.element('right', 'column') },
79
+ react_1["default"].createElement(TagsSelector_1["default"], { tags: props.tags, formId: props.formId })))),
80
+ react_1["default"].createElement("div", { className: props.bem.element('row') },
81
+ react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Исполнители') }),
82
+ react_1["default"].createElement("div", { className: props.bem.element('right') },
83
+ 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 }))),
84
+ react_1["default"].createElement("div", { className: props.bem.element('row', 'radio') },
85
+ react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Приоритет') }),
86
+ react_1["default"].createElement("div", { className: props.bem.element('right') },
87
+ react_1["default"].createElement(form_1.RadioListField, { attribute: 'priority', items: prioritiesFields, selectedIds: [
88
+ (_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(),
89
+ ], multiple: false, orientation: 'horizontal' }))),
90
+ react_1["default"].createElement("div", { className: props.bem.element('button') },
91
+ react_1["default"].createElement(form_1.Button, { type: "submit", label: props.submitButtonLabel, size: "md" })))));
92
+ }
93
+ exports["default"] = CreateOrEditTaskModalContentView;
@@ -0,0 +1,2 @@
1
+ import CreateOrEditTaskModalContentView from './CreateOrEditTaskModalContentView';
2
+ export default CreateOrEditTaskModalContentView;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ exports.__esModule = true;
6
+ var CreateOrEditTaskModalContentView_1 = __importDefault(require("./CreateOrEditTaskModalContentView"));
7
+ exports["default"] = CreateOrEditTaskModalContentView_1["default"];