Web: Client: Data Import: add props to configure SelectUsersStep

This commit is contained in:
Vladimir Khvan 2024-06-13 16:19:54 +05:00
parent 77ad2dadc2
commit cbf24ea33b
2 changed files with 51 additions and 28 deletions

View File

@ -45,8 +45,14 @@ import {
InjectedSelectUsersStepProps, InjectedSelectUsersStepProps,
} from "../../types"; } from "../../types";
const REFRESH_TIMEOUT = 100;
const PAGING_BREAKPOINT = 25;
const SelectUsersStep = (props: SelectUsersStepProps) => { const SelectUsersStep = (props: SelectUsersStepProps) => {
const { const {
canDisable,
shouldSetUsers,
t, t,
incrementStep, incrementStep,
decrementStep, decrementStep,
@ -55,6 +61,8 @@ const SelectUsersStep = (props: SelectUsersStepProps) => {
setSearchValue, setSearchValue,
checkedUsers, checkedUsers,
users, users,
areCheckedUsersEmpty,
setResultUsers,
quotaCharacteristics, quotaCharacteristics,
} = props as InjectedSelectUsersStepProps; } = props as InjectedSelectUsersStepProps;
@ -100,19 +108,35 @@ const SelectUsersStep = (props: SelectUsersStepProps) => {
checkedUsers.withEmail.filter((user) => !user.isDuplicate).length + checkedUsers.withEmail.filter((user) => !user.isDuplicate).length +
checkedUsers.withoutEmail.length; checkedUsers.withoutEmail.length;
const handleStepIncrement = shouldSetUsers
? () => {
setResultUsers();
incrementStep();
}
: incrementStep;
const Buttons = (
<SaveCancelButtons
className="save-cancel-buttons"
onSaveClick={handleStepIncrement}
onCancelClick={decrementStep}
saveButtonLabel={t("Settings:NextStep")}
cancelButtonLabel={t("Common:Back")}
showReminder
displaySettings
saveButtonDisabled={
canDisable &&
(areCheckedUsersEmpty ||
(quota.max ? totalUsedUsers > quota.max : false))
}
/>
);
return ( return (
<Wrapper> <Wrapper>
{withEmailUsers.length > 0 ? ( {withEmailUsers.length > 0 ? (
<> <>
<SaveCancelButtons {Buttons}
className="save-cancel-buttons"
onSaveClick={incrementStep}
onCancelClick={decrementStep}
saveButtonLabel={t("Settings:NextStep")}
cancelButtonLabel={t("Common:Back")}
showReminder
displaySettings
/>
{quota.max && ( {quota.max && (
<UsersInfoBlock <UsersInfoBlock
@ -129,20 +153,21 @@ const SelectUsersStep = (props: SelectUsersStepProps) => {
placeholder={t("Common:Search")} placeholder={t("Common:Search")}
value={searchValue} value={searchValue}
onChange={onChangeInput} onChange={onChangeInput}
refreshTimeout={100} refreshTimeout={REFRESH_TIMEOUT}
onClearSearch={onClearSearchInput} onClearSearch={onClearSearchInput}
size={InputSize.base} size={InputSize.base}
/> />
<AccountsTable t={t} accountsData={filteredAccounts} /> <AccountsTable t={t} accountsData={filteredAccounts} />
{withEmailUsers.length > 25 && filteredAccounts.length > 0 && ( {withEmailUsers.length > PAGING_BREAKPOINT &&
<AccountsPaging filteredAccounts.length > 0 && (
t={t} <AccountsPaging
numberOfItems={withEmailUsers.length} t={t}
setDataPortion={handleDataChange} numberOfItems={withEmailUsers.length}
/> setDataPortion={handleDataChange}
)} />
)}
</> </>
) : ( ) : (
<Text fontWeight={600} lineHeight="20px" className="mb-17"> <Text fontWeight={600} lineHeight="20px" className="mb-17">
@ -150,17 +175,7 @@ const SelectUsersStep = (props: SelectUsersStepProps) => {
</Text> </Text>
)} )}
{filteredAccounts.length > 0 && ( {filteredAccounts.length > 0 && Buttons}
<SaveCancelButtons
className="save-cancel-buttons"
onSaveClick={incrementStep}
onCancelClick={decrementStep}
saveButtonLabel={t("Settings:NextStep")}
cancelButtonLabel={t("Common:Back")}
showReminder
displaySettings
/>
)}
</Wrapper> </Wrapper>
); );
}; };
@ -175,6 +190,8 @@ export default inject<TStore>(({ importAccountsStore, currentQuotaStore }) => {
setSearchValue, setSearchValue,
cancelMigration, cancelMigration,
checkedUsers, checkedUsers,
areCheckedUsersEmpty,
setResultUsers,
} = importAccountsStore; } = importAccountsStore;
const { quotaCharacteristics } = currentQuotaStore; const { quotaCharacteristics } = currentQuotaStore;
@ -188,6 +205,8 @@ export default inject<TStore>(({ importAccountsStore, currentQuotaStore }) => {
setSearchValue, setSearchValue,
cancelMigration, cancelMigration,
checkedUsers, checkedUsers,
areCheckedUsersEmpty,
setResultUsers,
quotaCharacteristics, quotaCharacteristics,
}; };

View File

@ -112,6 +112,8 @@ export type TQuota = TPaymentFeature;
export interface SelectUsersStepProps { export interface SelectUsersStepProps {
t: TFunciton; t: TFunciton;
canDisable: boolean;
shouldSetUsers: boolean;
} }
export interface InjectedSelectUsersStepProps extends SelectUsersStepProps { export interface InjectedSelectUsersStepProps extends SelectUsersStepProps {
@ -123,6 +125,8 @@ export interface InjectedSelectUsersStepProps extends SelectUsersStepProps {
cancelMigration: TStore["importAccountsStore"]["cancelMigration"]; cancelMigration: TStore["importAccountsStore"]["cancelMigration"];
checkedUsers: TStore["importAccountsStore"]["checkedUsers"]; checkedUsers: TStore["importAccountsStore"]["checkedUsers"];
users: TStore["importAccountsStore"]["users"]; users: TStore["importAccountsStore"]["users"];
areCheckedUsersEmpty: TStore["importAccountsStore"]["areCheckedUsersEmpty"];
setResultUsers: TStore["importAccountsStore"]["setResultUsers"];
quotaCharacteristics: TStore["currentQuotaStore"]["quotaCharacteristics"]; quotaCharacteristics: TStore["currentQuotaStore"]["quotaCharacteristics"];
} }