Merge branch 'feature/design-wishlist' into dev
This commit is contained in:
Pavel Gnedov
commit
54a7e19b4f
16 changed files with 281 additions and 50 deletions
1
frontend/public/images/anchor BLUE.svg
Normal file
1
frontend/public/images/anchor BLUE.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 704 B |
|
|
@ -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';
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
|
@ -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 {}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</div>
|
||||
<div className={Css.tagsContainer}>
|
||||
<TagsNs.Tags params={{ tags: props.store.styledTags }}/>
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.reset {
|
||||
all: initial;
|
||||
}
|
||||
|
||||
.modal {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -52,29 +52,31 @@ export const IssueDetailsDialog = observer((props: Props): JSX.Element => {
|
|||
props.store.hide();
|
||||
};
|
||||
return (
|
||||
<div className={Css.modal} style={props.store.displayStyle} onClick={onCloseClick}>
|
||||
<div className={Css.modalContent}>
|
||||
<h1>
|
||||
<button onClick={onCloseClick}>close</button>
|
||||
<button onClick={onUpdateClick}>force update</button>
|
||||
<IssueHrefNs.IssueHref
|
||||
id={props.store.issue?.id || -1}
|
||||
subject={props.store.issue?.subject || ''}
|
||||
tracker={props.store.issue?.tracker?.name || ''}
|
||||
url={props.store.issue?.url?.url || ''}
|
||||
/>
|
||||
</h1>
|
||||
<hr/>
|
||||
<div>
|
||||
<h2>Описание:</h2>
|
||||
<pre>
|
||||
{props.store.issue.description}
|
||||
</pre>
|
||||
</div>
|
||||
<hr/>
|
||||
<div>
|
||||
<h2>Комментарии:</h2>
|
||||
<Comments details={props.store.issue.journals || []} issue={props.store.issue}/>
|
||||
<div className={Css.reset}>
|
||||
<div className={Css.modal} style={props.store.displayStyle} onClick={onCloseClick}>
|
||||
<div className={Css.modalContent}>
|
||||
<h1>
|
||||
<button onClick={onCloseClick}>close</button>
|
||||
<button onClick={onUpdateClick}>force update</button>
|
||||
<IssueHrefNs.IssueHref
|
||||
id={props.store.issue?.id || -1}
|
||||
subject={props.store.issue?.subject || ''}
|
||||
tracker={props.store.issue?.tracker?.name || ''}
|
||||
url={props.store.issue?.url?.url || ''}
|
||||
/>
|
||||
</h1>
|
||||
<hr/>
|
||||
<div>
|
||||
<h2>Описание:</h2>
|
||||
<pre>
|
||||
{props.store.issue.description}
|
||||
</pre>
|
||||
</div>
|
||||
<hr/>
|
||||
<div>
|
||||
<h2>Комментарии:</h2>
|
||||
<Comments details={props.store.issue.journals || []} issue={props.store.issue}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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
11
frontend/src/utils/spent-hours-to-fixed.ts
Normal 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))}`;
|
||||
};
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue