Skip to content

Commit

Permalink
fix(deal/ticket/task): first stage has recursive refresh on pipeline,…
Browse files Browse the repository at this point in the history
… click notification but couldn't open deal item

close #2062, close #2061, close #2060, close #2059
  • Loading branch information
munkhsaikhan authored Jun 17, 2020
1 parent 826f2dd commit 9855f26
Show file tree
Hide file tree
Showing 32 changed files with 644 additions and 502 deletions.
36 changes: 36 additions & 0 deletions ui/src/modules/boards/components/DragDisabler.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { colors } from 'modules/common/styles';
import { highlight } from 'modules/common/utils/animations';
import React from 'react';
import styled from 'styled-components';
import styledTS from 'styled-components-ts';

type Props = {
width?: string;
};

const Spin = styledTS<Props>(styled.div)`
position: absolute;
overflow: auto;
height: 100%;
width: ${props => props.width};
z-index: 99999;
display: ${'flex'};
`;

export const MainLoader = styledTS<Props>(styled.div)`
width: 100%;
height: 100%;
animation: ${highlight} 0.75s linear infinite;
border-top: 2px solid ${colors.borderDarker};
border-top-color: ${colors.colorSecondary};
`;

function DragDisabler({ width = '100%' }: Props) {
return (
<Spin width={width}>
<MainLoader width={width} />
</Spin>
);
}

export default DragDisabler;
26 changes: 3 additions & 23 deletions ui/src/modules/boards/components/stage/Stage.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { PIPELINE_UPDATE_STATUSES } from 'modules/boards/constants';
import {
ActionButton,
ActionList,
Expand Down Expand Up @@ -39,7 +38,6 @@ type Props = {
options: IOptions;
archiveItems: () => void;
archiveList: () => void;
onChangeRealTimeStageIds: (stageId: string) => void;
};
export default class Stage extends React.Component<Props, {}> {
private bodyRef;
Expand Down Expand Up @@ -80,25 +78,6 @@ export default class Stage extends React.Component<Props, {}> {
}, 1000);
}

componentDidUpdate(prevProps) {
const { current } = this.bodyRef;

if (!current) {
return;
}

const { stage, onChangeRealTimeStageIds } = this.props;
const pipelineUpdate = sessionStorage.getItem('pipelineUpdate');

if (
(pipelineUpdate === PIPELINE_UPDATE_STATUSES.START ||
pipelineUpdate === PIPELINE_UPDATE_STATUSES.NEW_REQUEST) &&
stage.itemsTotalCount !== prevProps.stage.itemsTotalCount
) {
onChangeRealTimeStageIds(stage._id);
}
}

shouldComponentUpdate(nextProps: Props) {
const { stage, index, length, items, loadingItems } = this.props;

Expand Down Expand Up @@ -126,7 +105,7 @@ export default class Stage extends React.Component<Props, {}> {
};

renderAddItemTrigger() {
const { options, stage, onAddItem } = this.props;
const { options, stage, onAddItem, items } = this.props;
const addText = options.texts.addText;

const trigger = (
Expand All @@ -142,7 +121,8 @@ export default class Stage extends React.Component<Props, {}> {
options,
showSelect: false,
callback: (item: IItem) => onAddItem(stage._id, item),
stageId: stage._id
stageId: stage._id,
aboveItemId: items.length > 0 ? items[items.length - 1]._id : ''
};

const content = props => <AddForm {...props} {...formProps} />;
Expand Down
79 changes: 59 additions & 20 deletions ui/src/modules/boards/containers/Board.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,69 @@
import gql from 'graphql-tag';
import * as compose from 'lodash.flowright';
import EmptyState from 'modules/common/components/EmptyState';
import { IRouterProps } from 'modules/common/types';
import { withProps } from 'modules/common/utils';
import React from 'react';
import { graphql } from 'react-apollo';
import { withRouter } from 'react-router-dom';
import { queries } from '../graphql';
import { RootBack, ScrolledContent } from '../styles/common';
import { IOptions, IPipeline } from '../types';
import { IOptions, PipelineDetailQueryResponse } from '../types';
import Pipeline from './Pipeline';
import withPipeline from './withPipeline';

type Props = {
queryParams: any;
options: IOptions;
pipeline: IPipeline;
};
pipelineDetailQuery: PipelineDetailQueryResponse;
} & WrapperProps &
IRouterProps;

const Board = (props: Props) => {
const { pipeline, queryParams, options } = props;
class Board extends React.Component<Props> {
render() {
const { pipelineDetailQuery, queryParams, options } = this.props;

return (
<RootBack style={{ backgroundColor: pipeline.bgColor }}>
<ScrolledContent>
<Pipeline
options={options}
pipeline={pipeline}
key={pipeline._id}
queryParams={queryParams}
if (!pipelineDetailQuery || !pipelineDetailQuery.pipelineDetail) {
return (
<EmptyState
image="/images/actions/18.svg"
text="Oh boy, looks like you need to get a head start on your board"
size="small"
light={true}
/>
</ScrolledContent>
</RootBack>
);
);
}

const pipeline = pipelineDetailQuery.pipelineDetail;

return (
<RootBack style={{ backgroundColor: pipeline.bgColor }}>
<ScrolledContent>
<Pipeline
options={options}
pipeline={pipeline}
key={pipeline._id}
queryParams={queryParams}
/>
</ScrolledContent>
</RootBack>
);
}
}

type WrapperProps = {
queryParams: any;
options: IOptions;
};

export default withPipeline(Board);
export default withProps<WrapperProps>(
compose(
graphql<WrapperProps, PipelineDetailQueryResponse, { _id?: string }>(
gql(queries.pipelineDetail),
{
name: 'pipelineDetailQuery',
skip: ({ queryParams }) => !queryParams.pipelineId,
options: ({ queryParams }) => ({
variables: { _id: queryParams && queryParams.pipelineId }
})
}
)
)(withRouter(Board))
);
92 changes: 92 additions & 0 deletions ui/src/modules/boards/containers/InvisibleItemInUrl.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import gql from 'graphql-tag';
import * as compose from 'lodash.flowright';
import { IRouterProps } from 'modules/common/types';
import { withProps } from 'modules/common/utils';
import routerUtils from 'modules/common/utils/router';
import React from 'react';
import { graphql } from 'react-apollo';
import { withRouter } from 'react-router-dom';
import { DetailQueryResponse, IOptions } from '../types';
import { EditForm } from './editForm';

type WrapperProps = {
itemId: string;
options: IOptions;
};

type FinalProps = WrapperProps &
IRouterProps & {
detailQuery: DetailQueryResponse;
};

class InvisibleItemInUrl extends React.PureComponent<FinalProps> {
beforePopupClose = () => {
const { history } = this.props;

routerUtils.removeParams(history, 'itemId');
};

render() {
const { options, itemId, detailQuery } = this.props;

if (detailQuery.loading) {
return null;
}

const item = detailQuery[options.queriesName.detailQuery];

if (!item) {
return null;
}

return (
<EditForm
itemId={itemId}
options={options}
isPopupVisible={true}
stageId={item.stageId}
hideHeader={true}
beforePopupClose={this.beforePopupClose}
/>
);
}
}

const withQuery = (props: WrapperProps) => {
const { options } = props;

return withProps<WrapperProps>(
compose(
graphql<WrapperProps, DetailQueryResponse, { _id: string }>(
gql(options.queries.detailQuery),
{
name: 'detailQuery',
options: ({ itemId }: { itemId: string }) => {
return {
variables: {
_id: itemId
},
fetchPolicy: 'network-only'
};
}
}
)
)(withRouter(InvisibleItemInUrl))
);
};

export default class WithData extends React.Component<WrapperProps> {
private withQuery;

constructor(props) {
super(props);

this.withQuery = withQuery(props);
}

render() {
const Component = this.withQuery;

return <Component {...this.props} />;
}
}
21 changes: 2 additions & 19 deletions ui/src/modules/boards/containers/Pipeline.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,12 @@ import * as compose from 'lodash.flowright';
import EmptyState from 'modules/common/components/EmptyState';
import Spinner from 'modules/common/components/Spinner';
import { IRouterProps } from 'modules/common/types';
import { router as routerUtils, withProps } from 'modules/common/utils';
import { withProps } from 'modules/common/utils';
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import { PIPELINE_UPDATE_STATUSES } from '../constants';
import { queries } from '../graphql';
import {
IItemMap,
Expand Down Expand Up @@ -60,19 +59,6 @@ class WithStages extends Component<WithStagesQueryProps> {
return Object.keys(obj).length;
}

afterFinish = () => {
const pipelineUpdate = sessionStorage.getItem('pipelineUpdate');

// if there is a newRequest
if (pipelineUpdate === PIPELINE_UPDATE_STATUSES.NEW_REQUEST) {
sessionStorage.setItem('pipelineUpdate', PIPELINE_UPDATE_STATUSES.START);

routerUtils.setParams(this.props.history, { key: Math.random() });
} else {
sessionStorage.setItem('pipelineUpdate', PIPELINE_UPDATE_STATUSES.END);
}
};

render() {
const {
initialItemMap,
Expand Down Expand Up @@ -103,7 +89,6 @@ class WithStages extends Component<WithStagesQueryProps> {
queryParams={queryParams}
options={options}
queryParamsChanged={this.queryParamsChanged}
afterFinish={this.afterFinish}
>
<PipelineConsumer>
{({
Expand All @@ -114,8 +99,7 @@ class WithStages extends Component<WithStagesQueryProps> {
scheduleStage,
onLoadStage,
onAddItem,
onRemoveItem,
onChangeRealTimeStageIds
onRemoveItem
}) => (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable
Expand Down Expand Up @@ -151,7 +135,6 @@ class WithStages extends Component<WithStagesQueryProps> {
onLoad={onLoadStage}
onAddItem={onAddItem}
onRemoveItem={onRemoveItem}
onChangeRealTimeStageIds={onChangeRealTimeStageIds}
/>
);
})}
Expand Down
Loading

0 comments on commit 9855f26

Please sign in to comment.