pavel/pinkmine
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/design-wishlist' into dev

Browse source
This commit is contained in:
Pavel Gnedov 2023-07-10 07:43:50 +07:00
commit 54a7e19b4f
16 changed files with 281 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/public/images/anchor BLUE.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.58 63.52"><defs><style>.a{fill:none;stroke:#135fab;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;}</style></defs><circle class="a" cx="27.79" cy="8.94" r="6.94"/><line class="a" x1="27.79" y1="15.89" x2="27.79" y2="61.52"/><line class="a" x1="27.79" y1="25.81" x2="41.68" y2="25.81"/><line class="a" x1="13.9" y1="25.81" x2="27.79" y2="25.81"/><path class="a" d="M76.08,41.4q-1.15,8.64-6,11.91c-4.52,3.07-9.11.76-13.89,4-3.66,2.46-5.21,6.66-6,9.92" transform="translate(-22.5 -5.68)"/><path class="a" d="M24.5,41.4Q25.66,50,30.45,53.31c4.52,3.07,9.11.76,13.89,4,3.66,2.46,5.21,6.66,5.95,9.92" transform="translate(-22.5 -5.68)"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 704 B

38
frontend/src/issues-list-board/issues-list-board.module.css
View file

@ -2,5 +2,41 @@
display: flex;
flex-direction: column;
width: 100%;
background-color: rgb(225, 225, 225);
}
.boardName {
display: flex;
flex-direction: row;
padding-left: 10px;
padding-right: 10px;
}
.anchorIcon {
width: 24px;
padding-left: 30px;
}
.boardName a {
display: flex;
}
.board {
line-height: 30px;
background-color: rgb(255, 255, 255);
margin: 0;
padding: 0;
color: rgba(0, 0, 0, 0.8);
font-size: 24px;
font-family: 'Inter', sans-serif;
font-style: normal;
line-height: 40px;
font-weight: 600;
font-size: 24px;
line-height: 30px;
}
.boardHeader {
color: #202020;
font-family: 'Source Code Pro';
}

11
frontend/src/issues-list-board/issues-list-board.tsx
View file

@ -21,11 +21,16 @@ export const IssuesListBoard = observer((props: Props): JSX.Element => {
title = <>{props.store.metainfo.title}</>;
}
return (
<>
<h1 id={props.store.metainfo.title}>{title} <a href={`#${props.store.metainfo.title}`}>#</a></h1>
<div className={Css.board}>
<div className={Css.boardName}>
<h2 className={Css.boardHeader} id={props.store.metainfo.title}>{title}</h2>
<a href={`#${props.store.metainfo.title}`}>
<img src="/images/anchor BLUE.svg" alt="anchor" className={Css.anchorIcon} />
</a>
</div>
<div className={Css.listContainer}>
{list}
</div>
</>
</div>
);
});

51
frontend/src/issues-list-board/issues-list-card.module.css
View file

@ -5,7 +5,56 @@
flex-direction: column;
}
.issueSubject {}
.relevanceColor {
width: 30px;
}
.todoBlock {
display: flex;
flex-direction: row;
padding-left: 10px;
padding-right: 10px;
}
.todoBlock:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.importantInformation {
width: 100%;
}
.timeBox {
color: #393838;
font-weight: 400;
font-size: 11px;
}
.positionInfo {
list-style-image: relative;
bottom: 3px;
right: 3px;
text-align: right;
float: right;
}
.priorityBox {
background-color: #FFFFFF;
border-radius: 2px;
padding: 2px 2px 3px 2px;
font-size: 10px;
line-height: 12px;
/* border: 0.5px solid #393838; */
color: #ffffff;
}
.issueSubject {
color: #202020;
text-decoration: none;
font-weight: 400;
font-size: 15px;
line-height: 18px;
}
.issueStatus {}

28
frontend/src/issues-list-board/issues-list-card.tsx
View file

@ -7,11 +7,15 @@ import * as TagsNs from '../misc-components/tags';
import * as IssueHrefNs from '../misc-components/issue-href';
import * as IssueDetailsDialogNs from '../misc-components/issue-details-dialog';
import * as UnreadedFlagNs from '../misc-components/unreaded-flag';
import { SpentHoursToFixed } from '../utils/spent-hours-to-fixed';
import { getStyleObjectFromString } from '../utils/style';
export type Props = {
store: IIssueStore
};
export const defaultPriorityStyleKey = 'priorityStyle';
export const IssuesListCard = observer((props: Props): JSX.Element => {
const unreadedStore = UnreadedFlagNs.CreateStoreFromLocalStorage(props.store);
const detailsStore = IssueDetailsDialogNs.Store.create({
@ -19,12 +23,15 @@ export const IssuesListCard = observer((props: Props): JSX.Element => {
visible: false,
unreadedFlagStore: unreadedStore
});
const priorityStyle = getStyleObjectFromString(props.store[defaultPriorityStyleKey]);
const tagsNewLine = (props.store.styledTags && props.store.styledTags.length > 0) ? <br/> : null;
return (
<div className={Css.listItem} onClick={(e) => {e.stopPropagation(); detailsStore.show();}}>
<IssueDetailsDialogNs.IssueDetailsDialog store={detailsStore}/>
<div>
<UnreadedFlagNs.UnreadedFlag store={unreadedStore}/>
<TimePassedNs.TimePassed params={{ fromIssue: { issue: props.store, keyName: 'timePassedClass' } }}/>
<div className={Css.todoBlock} onClick={(e) => { e.stopPropagation(); detailsStore.show(); }}>
<IssueDetailsDialogNs.IssueDetailsDialog store={detailsStore} />
<div className={Css.relevanceColor}>
<TimePassedNs.TimePassed params={{ fromIssue: { issue: props.store, keyName: 'timePassedClass' } }} />
</div>
<div className={Css.importantInformation}>
<span className={Css.issueSubject}>
<IssueHrefNs.IssueHref
url={props.store.url?.url || ''}
@ -33,11 +40,14 @@ export const IssuesListCard = observer((props: Props): JSX.Element => {
id={props.store.id}
/>
</span>
<span className={Css.issueStatus}>| {props.store.status.name}</span>
<span className={Css.issueTime}>| {props.store.total_spent_hours} / {props.store.total_estimated_hours}</span>
<span> </span>
<span className={Css.timeBox}>{SpentHoursToFixed(props.store.total_spent_hours)} / {SpentHoursToFixed(props.store.total_estimated_hours)}</span>
{tagsNewLine}
<TagsNs.Tags params={{ tags: props.store.styledTags }} />
<div className={Css.positionInfo}>
<span className={Css.timeBox}>{props.store.status.name}</span><span> </span>
<span className={Css.priorityBox} style={priorityStyle}>{props.store.priority.name}</span>
</div>
<div className={Css.tagsContainer}>
<TagsNs.Tags params={{ tags: props.store.styledTags }}/>
</div>
</div>
);

4
frontend/src/misc-components/issue-details-dialog.module.css
View file

@ -1,3 +1,7 @@
.reset {
all: initial;
}
.modal {
z-index: 1000;
position: fixed;

2
frontend/src/misc-components/issue-details-dialog.tsx
View file

@ -52,6 +52,7 @@ export const IssueDetailsDialog = observer((props: Props): JSX.Element => {
props.store.hide();
};
return (
<div className={Css.reset}>
<div className={Css.modal} style={props.store.displayStyle} onClick={onCloseClick}>
<div className={Css.modalContent}>
<h1>
@ -78,6 +79,7 @@ export const IssueDetailsDialog = observer((props: Props): JSX.Element => {
</div>
</div>
</div>
</div>
);
});

9
frontend/src/misc-components/tags.tsx
View file

@ -14,13 +14,14 @@ export const Tags = (props: Props): JSX.Element => {
if (!props.params.tags) {
return (<></>);
}
const label = props.params.label || 'Tags';
let label = props.params.label || '';
if (label) label = `${label}: `;
const tags = props.params.tags.map((tag) => {
return <TagNs.Tag tag={tag.tag} style={tag.style} key={tag.tag}/>;
}) || [];
return (
<div>
{label}: {tags}
</div>
<>
{label}{tags}
</>
);
}

16
frontend/src/misc-components/time-passed.module.css
View file

@ -1,27 +1,27 @@
.timepassedDot {
height: 10px;
width: 10px;
background-color: #bbb;
height: 15px;
width: 15px;
background-color: #808080;
border-radius: 50%;
display: inline-block;
}
.timepassedDot.hot {
background-color: red;
background-color: #92201A;
}
.timepassedDot.warm {
background-color: orange;
background-color: #FA5E26;
}
.timepassedDot.comfort {
background-color: rgba(255, 255, 0, 0.4);
background-color: #FAD116;
}
.timepassedDot.breezy {
background-color: rgba(0, 255, 0, 0.4);
background-color: #117722;
}
.timepassedDot.cold {
background-color: rgba(0, 0, 255, 0.1);
background-color: #808080;
}

11
frontend/src/utils/spent-hours-to-fixed.ts Normal file
View file

@ -0,0 +1,11 @@
/**
* Форматирование чисел для вывода трудозатрат
* @param a
* @returns
*/
export const SpentHoursToFixed = (a: number|string|null|undefined): string => {
if (a === null || typeof a === 'undefined') return '-';
const res = (typeof a === 'number') ? a : Number(a);
if (!Number.isFinite(res)) return '-';
return `${parseFloat(res.toFixed(1))}`;
};

102
libs/event-emitter/src/issue-enhancers/priority-styles-enhancer.ts Normal file
View file

@ -0,0 +1,102 @@
import { Injectable } from '@nestjs/common';
import { RedmineTypes } from '../models/redmine-types';
import { IssueEnhancerInterface } from './issue-enhancer-interface';
export type StyleRule = {
default?: boolean;
priorityName?: string;
style?: string;
className?: string;
};
export const defaultRule: StyleRule = {
default: true,
style: 'background-color: gray; color: white;',
};
export const defaultKey = 'priorityStyle';
export function ValidateStyleRule(rule: StyleRule): boolean {
return (
// check default prop
(typeof rule.default === 'boolean' ||
typeof rule.default === 'undefined') &&
// check priority name prop
(rule.default ||
(!rule.default &&
typeof rule.priorityName === 'string' &&
rule.priorityName.length > 0)) &&
// check style or className props
((typeof rule.style === 'string' && rule.style.length > 0) ||
(typeof rule.className === 'string' && rule.className.length > 0))
);
}
export function HasDefaultRule(rules: StyleRule[]): boolean {
const hasDefaultRule = rules.find((rule) => rule.default);
return Boolean(hasDefaultRule);
}
@Injectable()
export class PriorityStylesEnhancer implements IssueEnhancerInterface {
name: string;
private rules: StyleRule[];
private targetKey: string;
constructor(rules?: StyleRule[], targetKey?: string) {
let validatedRules: StyleRule[] = [];
if (rules && rules.length > 0) {
validatedRules = rules.filter(ValidateStyleRule);
}
if (!HasDefaultRule(validatedRules)) {
validatedRules.push(defaultRule);
}
this.rules = validatedRules;
this.targetKey =
typeof targetKey === 'string' && targetKey.length > 0
? targetKey
: defaultKey;
}
async enhance(
issue: RedmineTypes.ExtendedIssue,
): Promise<RedmineTypes.ExtendedIssue> {
const priorityName = issue.priority.name;
const priorityRule = this.findPriorityRule(priorityName);
issue[this.targetKey] = priorityRule.style || priorityRule.className;
return issue;
}
private findPriorityRule(priority: string): StyleRule {
return (this.rules.find((r) => r.priorityName === priority) ||
this.rules.find((r) => r.default)) as StyleRule;
}
}
export type PrioritiesStyleParams = {
rules: StyleRule[];
targetKey: string;
};
export type ConfigWithPriorityStyles = {
priorities?: PrioritiesStyleParams;
[key: string]: any;
};
export function CreatePriorityStylesEnhancer(
cfg: ConfigWithPriorityStyles,
): PriorityStylesEnhancer {
let params: PrioritiesStyleParams;
if (cfg.priorities && cfg.priorities.rules && cfg.priorities.targetKey) {
params = cfg.priorities;
} else {
params = {
rules: [defaultRule],
targetKey: defaultKey,
};
}
return new PriorityStylesEnhancer(params.rules, params.targetKey);
}

2
libs/event-emitter/src/project-dashboard/widgets/list-issues-by-fields.widget.service.ts
View file

@ -13,6 +13,7 @@ import { TreeIssuesStore } from '@app/event-emitter/utils/tree-issues-store';
import { Injectable, Logger } from '@nestjs/common';
import nano from 'nano';
import { WidgetInterface } from '../widget-interface';
import * as PriorityStylesEnhancerNs from '@app/event-emitter/issue-enhancers/priority-styles-enhancer';
export namespace ListIssuesByFieldsWidgetNs {
export type Params = {
@ -66,6 +67,7 @@ export class ListIssuesByFieldsWidgetService
this.timePassedHighlightEnhancer,
this.issueUrlEnhancer,
TagStyledEnhancerNs.CreateTagStyledEnhancerForConfig(widgetParams),
PriorityStylesEnhancerNs.CreatePriorityStylesEnhancer(widgetParams),
]);
const grouped = store.groupByStatusWithExtra((issue) => {
return this.getGroupFromIssue(issue, widgetParams);

2
libs/event-emitter/src/project-dashboard/widgets/list-issues-by-users-like-jira.widget.service.ts
View file

@ -12,6 +12,7 @@ import { TreeIssuesStore } from '@app/event-emitter/utils/tree-issues-store';
import { Injectable, Logger } from '@nestjs/common';
import nano from 'nano';
import { WidgetInterface } from '../widget-interface';
import * as PriorityStylesEnhancerNs from '@app/event-emitter/issue-enhancers/priority-styles-enhancer';
export namespace ListIssuesByUsersLikeJiraWidgetNs {
export namespace Models {
@ -61,6 +62,7 @@ export class ListIssuesByUsersLikeJiraWidgetService
this.timePassedHighlightEnhancer,
this.issueUrlEnhancer,
TagStyledEnhancerNs.CreateTagStyledEnhancerForConfig(widgetParams),
PriorityStylesEnhancerNs.CreatePriorityStylesEnhancer(widgetParams),
]);
const grouped = store.groupByStatusWithExtraToMultipleStories((issue) => {
const users = [] as string[];

2
libs/event-emitter/src/project-dashboard/widgets/list-issues-by-users.widget.service.ts
View file

@ -13,6 +13,7 @@ import { TreeIssuesStore } from '@app/event-emitter/utils/tree-issues-store';
import { Injectable, Logger } from '@nestjs/common';
import nano from 'nano';
import { WidgetInterface } from '../widget-interface';
import * as PriorityStylesEnhancerNs from '@app/event-emitter/issue-enhancers/priority-styles-enhancer';
export namespace ListIssuesByUsersWidgetNs {
export namespace Models {
@ -73,6 +74,7 @@ export class ListIssuesByUsersWidgetService
this.timePassedHighlightEnhancer,
this.issueUrlEnhancer,
TagStyledEnhancerNs.CreateTagStyledEnhancerForConfig(widgetParams),
PriorityStylesEnhancerNs.CreatePriorityStylesEnhancer(widgetParams),
]);
const grouped = store.groupByStatusWithExtra((issue) => {
const res = this.getUserValueByKey(issue, widgetParams.userKey);

2
libs/event-emitter/src/project-dashboard/widgets/root-issue-subtrees.widget.service.ts
View file

@ -12,6 +12,7 @@ import {
} from '@app/event-emitter/utils/tree-issues-store';
import { Injectable } from '@nestjs/common';
import { WidgetInterface } from '../widget-interface';
import * as PriorityStylesEnhancerNs from '@app/event-emitter/issue-enhancers/priority-styles-enhancer';
export namespace RootIssueSubTreesWidgetNs {
export namespace Models {
@ -66,6 +67,7 @@ export class RootIssueSubTreesWidgetService
this.timePassedHighlightEnhancer,
this.issueUrlEnhancer,
TagStyledEnhancerNs.CreateTagStyledEnhancerForConfig(widgetParams),
PriorityStylesEnhancerNs.CreatePriorityStylesEnhancer(widgetParams),
]);
let stories: TreeIssuesStoreNs.Models.GetFlatStories.Result;
if (widgetParams.parentsAsGroups) {

2
src/dashboards/widgets/issues-by-tags.widget.service.ts
View file

@ -12,6 +12,7 @@ import { GetValueFromObjectByKey } from '@app/event-emitter/utils/get-value-from
import { TreeIssuesStore } from '@app/event-emitter/utils/tree-issues-store';
import { Injectable, Logger } from '@nestjs/common';
import nano from 'nano';
import * as PriorityStylesEnhancerNs from '@app/event-emitter/issue-enhancers/priority-styles-enhancer';
export namespace IssuesByTagsWidgetNs {
export type Params = {
@ -59,6 +60,7 @@ export class IssuesByTagsWidgetService
this.timePassedHighlightEnhancer,
this.issueUrlEnhancer,
TagStyledEnhancerNs.CreateTagStyledEnhancerForConfig(widgetParams),
PriorityStylesEnhancerNs.CreatePriorityStylesEnhancer(widgetParams),
]);
const grouped = store.groupByStatusWithExtraToMultipleStories((issue) => {
if (!issue || !widgetParams.tags || !widgetParams.tags.tagsKeyName) {