Skip to content

Commit

Permalink
fix(forms) Update styles of submit/confirm button and fix num input bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@chriscollins3456
chriscollins3456 committed Feb 7, 2024
1 parent a3ef587 commit e6df919
Show file tree
Hide file tree
Showing 8 changed files with 163 additions and 122 deletions.
2 changes: 0 additions & 2 deletions datahub-web-react/src/app/entity/shared/containers/profile/sidebar/FormInfo/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,6 @@ export function getCompletedPrompts(entityData: GenericEntityProperties | null)
completedPrompts = completedPrompts.concat(
forms?.completedForms?.flatMap((form) => (form.completedPrompts ? form.completedPrompts : [])) || [],
);
console.log('entityData', entityData);
console.log('getCompletedPrompts', completedPrompts);
return completedPrompts;
}

Expand Down
8 changes: 5 additions & 3 deletions ...ct/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/MultiSelectInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ export default function MultiSelectInput({
allowedValues,
selectedValues,
}: Props) {
return allowedValues.length > 5 ? (
const shouldShowSelectDropdown = allowedValues.length > 5;

return shouldShowSelectDropdown ? (
<Select
style={DROPDOWN_STYLE as any}
placeholder="Select"
Expand All @@ -65,7 +67,7 @@ export default function MultiSelectInput({
onChange={(value) => updateSelectedValues(value)}
/>
) : (
<>
<div>
{allowedValues.map((allowedValue) => (
<StyledCheckbox
key={getStructuredPropertyValue(allowedValue.value)}
Expand All @@ -77,6 +79,6 @@ export default function MultiSelectInput({
{allowedValue.description && <ValueDescription description={allowedValue.description} />}
</StyledCheckbox>
))}
</>
</div>
);
}
4 changes: 2 additions & 2 deletions ...src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/MultipleStringInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default function MultipleStringInput({ selectedValues, updateSelectedValu
}

return (
<>
<div>
{selectedValues.length > 1 &&
selectedValues.map((selectedValue, index) => {
const key = `${index}`;
Expand All @@ -78,6 +78,6 @@ export default function MultipleStringInput({ selectedValues, updateSelectedValu
<StyledButton type="link" onClick={addNewValue}>
+ Add More
</StyledButton>
</>
</div>
);
}
8 changes: 7 additions & 1 deletion ...b-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/NumberInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,11 @@ export default function NumberInput({ selectedValues, updateSelectedValues }: Pr
updateSelectedValues([number]);
}

return <StyledInput type="number" value={selectedValues[0] || null} onChange={updateInput} />;
return (
<StyledInput
type="number"
value={selectedValues[0] !== undefined ? selectedValues[0] : null}
onChange={updateInput}
/>
);
}
180 changes: 76 additions & 104 deletions ...pp/entity/shared/entityForm/prompts/StructuredPropertyPrompt/StructuredPropertyPrompt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Button } from 'antd';
import React from 'react';
import styled from 'styled-components';
import {
EntityType,
FormPrompt,
PropertyCardinality,
SchemaField,
Expand All @@ -17,20 +16,9 @@ import RichTextInput from './RichTextInput';
import DateInput from './DateInput';
import NumberInput from './NumberInput';
import UrnInput from './UrnInput/UrnInput';
import { useEntityData } from '../../../EntityContext';
import {
findCompletedFieldPrompt,
findPromptAssociation,
getCompletedPrompts,
getIncompletePrompts,
isFieldPromptComplete,
isPromptComplete,
} from '../../../containers/profile/sidebar/FormInfo/utils';
import { useEntityRegistry } from '../../../../../useEntityRegistry';
import { getTimeFromNow } from '../../../../../shared/time/timeUtils';
import CompletedPromptAuditStamp from './CompletedPromptAuditStamp';
import { applyOpacity } from '../../../../../shared/styleUtils';
import { useUserContext } from '../../../../../context/useUserContext';
import usePromptCompletionInfo from '../usePromptCompletionInfo';

const PromptWrapper = styled.div<{ displayBulkStyles?: boolean }>`
display: flex;
Expand Down Expand Up @@ -67,11 +55,11 @@ export const PromptSubTitle = styled.div`

const InputSection = styled.div`
margin-top: 8px;
display: flex;
`;

const StyledButton = styled(Button)`
align-self: end;
margin-left: 8px;
margin-top: 16px;
&:focus {
box-shadow: 0 0 3px 2px ${(props) => applyOpacity(props.theme.styles['primary-color'] || '', 50)};
Expand All @@ -80,6 +68,7 @@ const StyledButton = styled(Button)`

const PromptInputWrapper = styled.div`
flex: 1;
margin-right: 8px;
`;

interface Props {
Expand All @@ -98,110 +87,93 @@ export default function StructuredPropertyPrompt({
optimisticCompletedTimestamp,
}: Props) {
const {
isSaveVisible,
hasEditedPrompt,
selectedValues,
selectSingleValue,
toggleSelectedValue,
submitStructuredPropertyResponse,
updateSelectedValues,
} = useStructuredPropertyPrompt({ prompt, submitResponse, field });
const { entityData } = useEntityData();
const { user } = useUserContext();
const entityRegistry = useEntityRegistry();
const completedPrompts = getCompletedPrompts(entityData);
const incompletePrompts = getIncompletePrompts(entityData);
const promptAssociation = findPromptAssociation(prompt, completedPrompts.concat(incompletePrompts));
const completedFieldPrompt = findCompletedFieldPrompt(field, promptAssociation);
const { isComplete, completedByName, completedByTime } = usePromptCompletionInfo({
prompt,
field,
optimisticCompletedTimestamp,
});

const structuredProperty = prompt.structuredPropertyParams?.structuredProperty;
if (!structuredProperty) return null;

const { displayName, description, allowedValues, cardinality, valueType } = structuredProperty.definition;

function getCompletedByName() {
let actor = completedFieldPrompt?.lastModified?.actor || promptAssociation?.lastModified?.actor;
if (optimisticCompletedTimestamp) {
actor = user;
}
return actor ? entityRegistry.getDisplayName(EntityType.CorpUser, actor) : '';
}

function getCompletedByRelativeTime() {
let completedTimestamp = completedFieldPrompt?.lastModified?.time || promptAssociation?.lastModified?.time;
if (optimisticCompletedTimestamp) {
completedTimestamp = optimisticCompletedTimestamp;
}
return completedTimestamp ? getTimeFromNow(completedTimestamp) : '';
}
const showSaveButton = hasEditedPrompt && selectedValues.length > 0;
const showConfirmButton = !hasEditedPrompt && !isComplete && selectedValues.length > 0;

return (
<PromptWrapper>
<PromptInputWrapper>
<PromptTitle>
{promptNumber !== undefined && <>{promptNumber}. </>}
{displayName}
{prompt.required && <RequiredText>required</RequiredText>}
</PromptTitle>
{description && <PromptSubTitle>{description}</PromptSubTitle>}
<InputSection>
{allowedValues && allowedValues.length > 0 && (
<>
{cardinality === PropertyCardinality.Single && (
<SingleSelectInput
allowedValues={allowedValues}
selectedValues={selectedValues}
selectSingleValue={selectSingleValue}
/>
)}
{cardinality === PropertyCardinality.Multiple && (
<MultiSelectInput
allowedValues={allowedValues}
selectedValues={selectedValues}
toggleSelectedValue={toggleSelectedValue}
updateSelectedValues={updateSelectedValues}
/>
)}
</>
)}
{!allowedValues && valueType.info.type === StdDataType.String && (
<StringInput
selectedValues={selectedValues}
cardinality={cardinality}
updateSelectedValues={updateSelectedValues}
/>
)}
{!allowedValues && valueType.info.type === StdDataType.RichText && (
<RichTextInput selectedValues={selectedValues} updateSelectedValues={updateSelectedValues} />
)}
{!allowedValues && valueType.info.type === StdDataType.Date && (
<DateInput selectedValues={selectedValues} updateSelectedValues={updateSelectedValues} />
)}
{!allowedValues && valueType.info.type === StdDataType.Number && (
<NumberInput selectedValues={selectedValues} updateSelectedValues={updateSelectedValues} />
)}
{!allowedValues && valueType.info.type === StdDataType.Urn && (
<UrnInput
structuredProperty={structuredProperty}
selectedValues={selectedValues}
updateSelectedValues={updateSelectedValues}
/>
)}
</InputSection>
</PromptInputWrapper>
{isSaveVisible && selectedValues.length > 0 && (
<>
<PromptWrapper>
<PromptInputWrapper>
<PromptTitle>
{promptNumber !== undefined && <>{promptNumber}. </>}
{displayName}
{prompt.required && <RequiredText>required</RequiredText>}
</PromptTitle>
{description && <PromptSubTitle>{description}</PromptSubTitle>}
<InputSection>
{allowedValues && allowedValues.length > 0 && (
<>
{cardinality === PropertyCardinality.Single && (
<SingleSelectInput
allowedValues={allowedValues}
selectedValues={selectedValues}
selectSingleValue={selectSingleValue}
/>
)}
{cardinality === PropertyCardinality.Multiple && (
<MultiSelectInput
allowedValues={allowedValues}
selectedValues={selectedValues}
toggleSelectedValue={toggleSelectedValue}
updateSelectedValues={updateSelectedValues}
/>
)}
</>
)}
{!allowedValues && valueType.info.type === StdDataType.String && (
<StringInput
selectedValues={selectedValues}
cardinality={cardinality}
updateSelectedValues={updateSelectedValues}
/>
)}
{!allowedValues && valueType.info.type === StdDataType.RichText && (
<RichTextInput
selectedValues={selectedValues}
updateSelectedValues={updateSelectedValues}
/>
)}
{!allowedValues && valueType.info.type === StdDataType.Date && (
<DateInput selectedValues={selectedValues} updateSelectedValues={updateSelectedValues} />
)}
{!allowedValues && valueType.info.type === StdDataType.Number && (
<NumberInput selectedValues={selectedValues} updateSelectedValues={updateSelectedValues} />
)}
{!allowedValues && valueType.info.type === StdDataType.Urn && (
<UrnInput
structuredProperty={structuredProperty}
selectedValues={selectedValues}
updateSelectedValues={updateSelectedValues}
/>
)}
</InputSection>
</PromptInputWrapper>
{isComplete && !hasEditedPrompt && (
<CompletedPromptAuditStamp completedByName={completedByName} completedByTime={completedByTime} />
)}
</PromptWrapper>
{(showSaveButton || showConfirmButton) && (
<StyledButton type="primary" onClick={submitStructuredPropertyResponse}>
Save
{showSaveButton ? 'Save' : 'Confirm'}
</StyledButton>
)}
{(isPromptComplete(prompt, completedPrompts) ||
isFieldPromptComplete(field, promptAssociation) ||
optimisticCompletedTimestamp) &&
!isSaveVisible && (
<CompletedPromptAuditStamp
completedByName={getCompletedByName()}
completedByTime={getCompletedByRelativeTime()}
/>
)}
</PromptWrapper>
</>
);
}
17 changes: 9 additions & 8 deletions .../entity/shared/entityForm/prompts/StructuredPropertyPrompt/useStructuredPropertyPrompt.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { getInitialValues } from './utils';
import usePrevious from '../../../../../shared/usePrevious';
import { useGetEntityWithSchema } from '../../../tabs/Dataset/Schema/useGetEntitySchema';
import { FormView, useEntityFormContext } from '../../EntityFormContext';
import { SCHEMA_FIELD_PROMPT_TYPES } from '../../constants';

interface Props {
prompt: FormPrompt;
Expand All @@ -13,10 +14,10 @@ interface Props {
}

export default function useStructuredPropertyPrompt({ prompt, submitResponse, field }: Props) {
const { refetch: refetchSchema } = useGetEntityWithSchema();
const { refetch: refetchSchema } = useGetEntityWithSchema(!SCHEMA_FIELD_PROMPT_TYPES.includes(prompt.type));
const { refetch, entityData } = useEntityContext();
const { selectedPromptId, formView } = useEntityFormContext();
const [isSaveVisible, setIsSaveVisible] = useState(false);
const [hasEditedPrompt, setHasEditedPrompt] = useState(false);
const initialValues = useMemo(
() => (formView === FormView.BY_ENTITY ? getInitialValues(prompt, entityData, field) : []),
[formView, entityData, prompt, field],
Expand All @@ -35,19 +36,19 @@ export default function useStructuredPropertyPrompt({ prompt, submitResponse, fi
const previousSelectedPromptId = usePrevious(selectedPromptId);
useEffect(() => {
if (selectedPromptId !== previousSelectedPromptId) {
setIsSaveVisible(false);
setHasEditedPrompt(false);
setSelectedValues(initialValues || []);
}
}, [previousSelectedPromptId, selectedPromptId, initialValues]);

// respond to prompts
function selectSingleValue(value: string | number) {
setIsSaveVisible(true);
setHasEditedPrompt(true);
setSelectedValues([value as string]);
}

function toggleSelectedValue(value: string | number) {
setIsSaveVisible(true);
setHasEditedPrompt(true);
if (selectedValues.includes(value)) {
setSelectedValues((prev) => prev.filter((v) => v !== value));
} else {
Expand All @@ -57,7 +58,7 @@ export default function useStructuredPropertyPrompt({ prompt, submitResponse, fi

function updateSelectedValues(values: any[]) {
setSelectedValues(values);
setIsSaveVisible(true);
setHasEditedPrompt(true);
}

// submit structured property prompt
Expand All @@ -80,7 +81,7 @@ export default function useStructuredPropertyPrompt({ prompt, submitResponse, fi
},
() => {
refetch();
setIsSaveVisible(false);
setHasEditedPrompt(false);
if (field) {
refetchSchema();
}
Expand All @@ -89,7 +90,7 @@ export default function useStructuredPropertyPrompt({ prompt, submitResponse, fi
}

return {
isSaveVisible,
hasEditedPrompt,
selectedValues,
selectSingleValue,
toggleSelectedValue,
Expand Down
Loading

0 comments on commit e6df919

Please sign in to comment.