Skip to content

Commit

Permalink
Add query in piller list
Browse files Browse the repository at this point in the history
  • Loading branch information
@barshathakuri
barshathakuri committed Jul 18, 2024
1 parent 7c43428 commit f1d79b4
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 183 deletions.
6 changes: 0 additions & 6 deletions app/types/analysisModule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,6 @@ export interface AnalysisPillars {
filters?: PillarFilterItem[];
}

export interface AnalyticalStatementSummary {
id: string;
statement: string;
entriesCount: number;
}

export interface PillarSummary {
id: string;
title: string;
Expand Down
8 changes: 4 additions & 4 deletions app/views/AnalysisDashboard/Analysis/AnalysisCloneModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,9 @@ import {
createSubmitHandler,
} from '@togglecorp/toggle-form';

import { useRequest, useLazyRequest } from '#base/utils/restRequest';
import { useLazyRequest } from '#base/utils/restRequest';
import NonFieldError from '#components/NonFieldError';
import _ts from '#ts';
import { AnalysisElement } from '#types/analysisModule';

import styles from './styles.css';

Expand Down Expand Up @@ -85,11 +84,11 @@ function AnalysisCloneModal(props: Props) {
setFieldValue,
validate,
setError,
setValue,
} = useForm(schema, defaultFormValue);

const error = getErrorObject(riskyError);

/*
const {
pending: pendingAnalysisGet,
} = useRequest<AnalysisElement>({
Expand All @@ -103,6 +102,7 @@ function AnalysisCloneModal(props: Props) {
});
},
});
*/

const {
pending: pendingAnalysisClone,
Expand Down Expand Up @@ -132,7 +132,7 @@ function AnalysisCloneModal(props: Props) {
submit();
}, [triggerAnalysisClone, setError, validate]);

const pending = pendingAnalysisClone || pendingAnalysisGet;
const pending = pendingAnalysisClone;

return (
<Modal
Expand Down
30 changes: 12 additions & 18 deletions app/views/AnalysisDashboard/Analysis/AnalysisPillar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
Container,
Tag,
QuickActionConfirmButton,
PendingMessage,
TextOutput,
List,
} from '@the-deep/deep-ui';
Expand All @@ -15,29 +14,28 @@ import {
} from 'react-icons/io5';

import SmartButtonLikeLink from '#base/components/SmartButtonLikeLink';
import {
PillarSummary,
AnalyticalStatementSummary,
} from '#types';

import routes from '#base/configs/routes';
import { ProjectContext } from '#base/context/ProjectContext';
import { AnalysisSummaryQuery } from '#generated/types';
import { calcPercent } from '#utils/common';

import _ts from '#ts';
import styles from './styles.css';

const statementKeySelector = (d: AnalyticalStatementSummary) => d.id;
type PillarSummary = NonNullable<NonNullable<NonNullable<AnalysisSummaryQuery['project']>['analysisPillars']>['results']>[number];
type AnalyticalStatement = NonNullable<NonNullable<NonNullable<AnalysisSummaryQuery['project']>['analyticalStatements']>['results']>[number];

const statementKeySelector = (item: AnalyticalStatement) => Number(item.id);

export interface Props {
analysisId: number;
analysisId: string;
assigneeName?: string | null;
statements?: AnalyticalStatementSummary[] | null;
statements?: AnalyticalStatement[] | null;
title: string;
createdAt: string;
onDelete: (value: number) => void;
pillarId: PillarSummary['id'];
projectId: string;
pendingPillarDelete: boolean;
pillarId: PillarSummary['id']; projectId: string;
className?: string;
totalEntries: number;
analyzedEntries?: number;
Expand All @@ -52,7 +50,6 @@ function AnalysisPillar(props: Props) {
projectId,
analysisId,
createdAt,
pendingPillarDelete,
statements,
className,
totalEntries,
Expand All @@ -74,13 +71,11 @@ function AnalysisPillar(props: Props) {
statusLabel = _ts('analysis', 'noAnalysisTagLabel');
}

const disabled = pendingPillarDelete;

const onDeleteConfirmClick = useCallback(() => {
onDelete(Number(pillarId));
}, [onDelete, pillarId]);

const statementRendererParams = useCallback((_: number, data: AnalyticalStatementSummary) => ({
const statementRendererParams = useCallback((_: number, data: AnalyticalStatement) => ({
className: styles.statement,
valueContainerClassName: styles.statementText,
descriptionContainerClassName: styles.description,
Expand Down Expand Up @@ -114,7 +109,7 @@ function AnalysisPillar(props: Props) {
analysisId,
pillarAnalysisId: pillarId,
}}
disabled={disabled}
disabled={undefined}
variant="tertiary"
icons={(
<FiEdit2 />
Expand All @@ -128,7 +123,7 @@ function AnalysisPillar(props: Props) {
onConfirm={onDeleteConfirmClick}
title={_ts('analysis', 'deletePillarButtonTitle')}
message={_ts('analysis', 'deletePillarConfirmMessage')}
disabled={disabled}
disabled={undefined}
showConfirmationInitially={false}
variant="secondary"
>
Expand All @@ -147,7 +142,6 @@ function AnalysisPillar(props: Props) {
)}
contentClassName={styles.content}
>
{pendingPillarDelete && <PendingMessage />}
<div className={styles.leftContainer}>
<TextOutput
label={_ts('analysis', 'analyst')}
Expand Down
132 changes: 12 additions & 120 deletions app/views/AnalysisDashboard/Analysis/PillarList/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,20 @@
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import { gql, useMutation } from '@apollo/client';
import React, { useCallback, useState } from 'react';
import { _cs } from '@togglecorp/fujs';
import {
Pager,
Container,
ListView,
Kraken,
useAlert,
} from '@the-deep/deep-ui';

import { useRequest } from '#base/utils/restRequest';

import _ts from '#ts';
import {
MultiResponse,
} from '#types';

import { AnalysisSummaryQuery, DeletePillarMutation, DeletePillarMutationVariables } from '#generated/types';
import { AnalysisSummaryQuery } from '#generated/types';

import AnalysisPillar, { Props as PillarComponentProps } from '../AnalysisPillar';

import styles from './styles.css';

const DELETE_PILLAR = gql`
mutation DeletePillar(
$projectId: ID!,
$pillarId: ID!,
$analysisId: ID!,
) {
project(id: $projectId) {
analysisPillarUpdate(id: $pillarId, data: {analysis: $analysisId}) {
errors
ok
}
}
}
`;

type PillarSummary = NonNullable<NonNullable<NonNullable<AnalysisSummaryQuery['project']>['analysisPillars']>['results']>[number];

const MAX_ITEMS_PER_PAGE = 5;
Expand All @@ -45,132 +23,46 @@ const keySelector = (item: PillarSummary) => item.id;
interface Props {
className?: string;
createdAt: string;
modifiedAt: string;
activeProject: string;
onAnalysisPillarDelete: () => void;
analysisId: number;
analysisId: string;
totalEntries: number;
pillars: PillarSummary[] | null | undefined;
pillarsPending: boolean;
}

function AnalysisDetails(props: Props) {
const {
className,
createdAt,
modifiedAt,
activeProject,
onAnalysisPillarDelete,
analysisId,
totalEntries,
pillars,
pillarsPending,
} = props;

const [activePage, setActivePage] = useState(1);

const alert = useAlert();

const queryOptions = useMemo(() => ({
offset: (activePage - 1) * MAX_ITEMS_PER_PAGE,
limit: MAX_ITEMS_PER_PAGE,
}), [activePage]);

const {
pending: pillarPending,
response: pillarResponse,
retrigger: pillarGetTrigger,
} = useRequest<MultiResponse<PillarSummary>>(
{
url: `server://projects/${activeProject}/analysis/${analysisId}/pillars/summary/`,
method: 'GET',
query: queryOptions,
preserveResponse: true,
},
);

// NOTE: Whenever the details of the analysis is changed,
// the modifiedAt field from parent changes and we refetch all the pillar
// analysis of that analysis
useEffect(() => {
pillarGetTrigger();
}, [pillarGetTrigger, modifiedAt]);

const [
deleteAnalysis,
{
loading: deleteAnalysisPending,
},
] = useMutation<DeletePillarMutation, DeletePillarMutationVariables>(
DELETE_PILLAR,
{
onCompleted: (response) => {
if (response?.project?.analysisPillarUpdate?.ok) {
alert.show(
_ts('pillarAnalysis', 'pillarAnalysisDeleteSuccessful'),
{ variant: 'success' },
);
// getProjectAnalysis();
} else {
alert.show(
'Failed to delete pillar analysis.',
{
variant: 'error',
},
);
}
},
onError: () => {
alert.show(
'Failed to delete pillar analysis.',
{
variant: 'error',
},
);
},
},
);

/*
const {
pending: pendingPillarDelete,
trigger: triggerPillarDelete,
context: deletePillarId,
} = useLazyRequest<unknown, number>(
{
url: (ctx) => `server://projects/${activeProject}/analysis/${analysisId}/pillars/${ctx}/`,
method: 'DELETE',
onSuccess: () => {
onAnalysisPillarDelete();
pillarGetTrigger();
alert.show(
'Successfully deleted pillar analysis.',
{ variant: 'success' },
);
},
failureMessage: 'Failed to delete the pillar analysis.',
},
);
*/

const analysisPillarRendererParams = useCallback(
(_: string, data: PillarSummary): PillarComponentProps => ({
className: styles.pillar,
analysisId,
assigneeName: data.assignee?.displayName,
createdAt,
onDelete: triggerPillarDelete,
onDelete: onAnalysisPillarDelete,
statements: data.statements,
pillarId: data.id,
analyzedEntries: data.analyzedEntriesCount,
projectId: activeProject,
title: data.title,
pendingPillarDelete: pendingPillarDelete && data.id === deletePillarId,
totalEntries,
}), [
totalEntries,
triggerPillarDelete,
createdAt,
analysisId,
activeProject,
pendingPillarDelete,
deletePillarId,
],
);

Expand All @@ -179,10 +71,10 @@ function AnalysisDetails(props: Props) {
className={_cs(className, styles.container)}
spacing="none"
contentClassName={styles.content}
footerActions={((pillarResponse?.count ?? 0) / MAX_ITEMS_PER_PAGE) > 1 ? (
footerActions={((totalEntries ?? 0) / MAX_ITEMS_PER_PAGE) > 1 ? (
<Pager
activePage={activePage}
itemsCount={pillarResponse?.count ?? 0}
itemsCount={pillars?.length ?? 0}
maxItemsPerPage={MAX_ITEMS_PER_PAGE}
onActivePageChange={setActivePage}
itemsPerPageControlHidden
Expand All @@ -191,12 +83,12 @@ function AnalysisDetails(props: Props) {
>
<ListView
className={styles.pillarList}
data={pillarResponse?.results}
data={pillars}
keySelector={keySelector}
pending={pillarPending}
renderer={AnalysisPillar}
rendererParams={analysisPillarRendererParams}
filtered={false}
pending={pillarsPending}
errored={false}
emptyIcon={(
<Kraken
Expand Down
7 changes: 3 additions & 4 deletions app/views/AnalysisDashboard/Analysis/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ interface ComponentProps {
onAnalysisCloseSuccess: () => void;
teamLeadName?: string | null;
createdAt: string;
modifiedAt: string;
onDelete: (analysisId: string) => void;
pendingAnalysisDelete: boolean;
pillars?: PillarSummary[] | null | undefined;
Expand All @@ -128,7 +127,6 @@ const pillarSummaryKeySelector = (item: PillarSummary) => (item.id);
function Analysis(props: ComponentProps) {
const {
title,
modifiedAt,
className,
startDate,
endDate,
Expand Down Expand Up @@ -437,11 +435,12 @@ function Analysis(props: ComponentProps) {
{activeProject && (
<PillarAnalysisList
createdAt={createdAt}
analysisId={Number(analysisId)}
modifiedAt={modifiedAt}
analysisId={analysisId}
activeProject={activeProject}
onAnalysisPillarDelete={onAnalysisPillarDelete}
totalEntries={totalEntries}
pillars={pillars}
pillarsPending={pillarsPending}
/>
)}
</ExpandableContainer>
Expand Down
Loading

0 comments on commit f1d79b4

Please sign in to comment.