Skip to content

Commit

Permalink
Merge pull request #34983 from rezkiy37/feature/33983-multiple-levels…
Browse files Browse the repository at this point in the history 
…-tags

Allow for multiple levels of tags on workspace
  • Loading branch information
@yuwenmemon
yuwenmemon authored Feb 15, 2024
2 parents 634fca1 + bc4adbe commit 2fe384c
Show file tree
Hide file tree
Showing 24 changed files with 376 additions and 230 deletions.
2 changes: 1 addition & 1 deletion src/ONYXKEYS.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,7 +436,7 @@ type OnyxCollectionValuesMapping = {
[ONYXKEYS.COLLECTION.POLICY]: OnyxTypes.Policy;
[ONYXKEYS.COLLECTION.POLICY_DRAFTS]: OnyxTypes.Policy;
[ONYXKEYS.COLLECTION.POLICY_CATEGORIES]: OnyxTypes.PolicyCategories;
[ONYXKEYS.COLLECTION.POLICY_TAGS]: OnyxTypes.PolicyTags;
[ONYXKEYS.COLLECTION.POLICY_TAGS]: OnyxTypes.PolicyTagList;
[ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMembers;
[ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS]: OnyxTypes.PolicyMember;
[ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES]: OnyxTypes.RecentlyUsedCategories;
Expand Down
16 changes: 9 additions & 7 deletions src/ROUTES.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,9 @@ const ROUTES = {
getRoute: (reportID: string) => `r/${reportID}/avatar` as const,
},
EDIT_REQUEST: {
route: 'r/:threadReportID/edit/:field',
getRoute: (threadReportID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${threadReportID}/edit/${field}` as const,
route: 'r/:threadReportID/edit/:field/:tagIndex?',
getRoute: (threadReportID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>, tagIndex?: number) =>
`r/${threadReportID}/edit/${field}${typeof tagIndex === 'number' ? `/${tagIndex}` : ''}` as const,
},
EDIT_CURRENCY_REQUEST: {
route: 'r/:threadReportID/edit/currency',
Expand Down Expand Up @@ -224,8 +225,9 @@ const ROUTES = {
getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}` as const,
},
EDIT_SPLIT_BILL: {
route: `r/:reportID/split/:reportActionID/edit/:field`,
getRoute: (reportID: string, reportActionID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${reportID}/split/${reportActionID}/edit/${field}` as const,
route: `r/:reportID/split/:reportActionID/edit/:field/:tagIndex?`,
getRoute: (reportID: string, reportActionID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>, tagIndex?: number) =>
`r/${reportID}/split/${reportActionID}/edit/${field}${typeof tagIndex === 'number' ? `/${tagIndex}` : ''}` as const,
},
EDIT_SPLIT_BILL_CURRENCY: {
route: 'r/:reportID/split/:reportActionID/edit/currency',
Expand Down Expand Up @@ -369,9 +371,9 @@ const ROUTES = {
getUrlWithBackToParam(`${action}/${iouType}/scan/${transactionID}/${reportID}`, backTo),
},
MONEY_REQUEST_STEP_TAG: {
route: ':action/:iouType/tag/:transactionID/:reportID',
getRoute: (action: ValueOf<typeof CONST.IOU.ACTION>, iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`${action}/${iouType}/tag/${transactionID}/${reportID}`, backTo),
route: ':action/:iouType/tag/:tagIndex/:transactionID/:reportID',
getRoute: (action: ValueOf<typeof CONST.IOU.ACTION>, iouType: ValueOf<typeof CONST.IOU.TYPE>, tagIndex: number, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`${action}/${iouType}/tag/${tagIndex}/${transactionID}/${reportID}`, backTo),
},
MONEY_REQUEST_STEP_WAYPOINT: {
route: ':action/:iouType/waypoint/:transactionID/:reportID/:pageIndex',
Expand Down
65 changes: 33 additions & 32 deletions src/components/MoneyRequestConfirmationList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,12 +241,10 @@ function MoneyRequestConfirmationList(props) {
const shouldShowDate = shouldShowAllFields && !isTypeSend && !isSplitWithScan;
const shouldShowMerchant = shouldShowAllFields && !isTypeSend && !props.isDistanceRequest && !isSplitWithScan;

// Fetches the first tag list of the policy
const policyTag = PolicyUtils.getTag(props.policyTags);
const policyTagList = lodashGet(policyTag, 'tags', {});
const policyTagListName = lodashGet(policyTag, 'name', translate('common.tag'));
const policyTagLists = useMemo(() => PolicyUtils.getTagLists(props.policyTags), [props.policyTags]);

// A flag for showing the tags field
const shouldShowTags = props.isPolicyExpenseChat && (props.iouTag || OptionsListUtils.hasEnabledOptions(_.values(policyTagList)));
const shouldShowTags = props.isPolicyExpenseChat && (props.iouTag || OptionsListUtils.hasEnabledTags(policyTagLists));

// A flag for showing tax fields - tax rate and tax amount
const shouldShowTax = props.isPolicyExpenseChat && lodashGet(props.policy, 'tax.trackingEnabled', props.policy.isTaxTrackingEnabled);
Expand Down Expand Up @@ -781,33 +779,36 @@ function MoneyRequestConfirmationList(props) {
rightLabel={canUseViolations && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''}
/>
)}
{shouldShowTags && (
<MenuItemWithTopDescription
shouldShowRightIcon={!props.isReadOnly}
title={PolicyUtils.getCleanedTagName(props.iouTag)}
description={policyTagListName}
numberOfLinesTitle={2}
onPress={() => {
if (props.isEditingSplitBill) {
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(
CONST.IOU.ACTION.EDIT,
CONST.IOU.TYPE.SPLIT,
props.transaction.transactionID,
props.reportID,
Navigation.getActiveRouteWithoutParams(),
),
);
return;
}
Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, props.reportID));
}}
style={[styles.moneyRequestMenuItem]}
disabled={didConfirm}
interactive={!props.isReadOnly}
rightLabel={canUseViolations && Boolean(props.policy.requiresTag) ? translate('common.required') : ''}
/>
)}
{shouldShowTags &&
_.map(policyTagLists, ({name}, index) => (
<MenuItemWithTopDescription
key={name}
shouldShowRightIcon={!props.isReadOnly}
title={TransactionUtils.getTag(transaction, index)}
description={name}
numberOfLinesTitle={2}
onPress={() => {
if (props.isEditingSplitBill) {
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(
CONST.IOU.ACTION.EDIT,
CONST.IOU.TYPE.SPLIT,
index,
props.transaction.transactionID,
props.reportID,
Navigation.getActiveRouteWithoutParams(),
),
);
return;
}
Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, props.reportID));
}}
style={[styles.moneyRequestMenuItem]}
disabled={didConfirm}
interactive={!props.isReadOnly}
rightLabel={canUseViolations && Boolean(props.policy.requiresTag) ? translate('common.required') : ''}
/>
))}

{shouldShowTax && (
<MenuItemWithTopDescription
Expand Down
26 changes: 9 additions & 17 deletions src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native';
import {format} from 'date-fns';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react';
import React, {Fragment, useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
Expand Down Expand Up @@ -80,9 +80,6 @@ const propTypes = {
/** IOU category */
iouCategory: PropTypes.string,

/** IOU tag */
iouTag: PropTypes.string,

/** IOU isBillable */
iouIsBillable: PropTypes.bool,

Expand Down Expand Up @@ -177,7 +174,6 @@ const defaultProps = {
onSelectParticipant: () => {},
iouType: CONST.IOU.TYPE.REQUEST,
iouCategory: '',
iouTag: '',
iouIsBillable: false,
onToggleBillable: () => {},
payeePersonalDetails: null,
Expand Down Expand Up @@ -217,7 +213,6 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
iouCurrencyCode,
iouIsBillable,
iouMerchant,
iouTag,
iouType,
isDistanceRequest,
isEditingSplitBill,
Expand Down Expand Up @@ -270,13 +265,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
const shouldShowDate = shouldShowSmartScanFields || isDistanceRequest;
const shouldShowMerchant = shouldShowSmartScanFields && !isDistanceRequest;

// Fetches the first tag list of the policy
const policyTag = PolicyUtils.getTag(policyTags);
const policyTagList = lodashGet(policyTag, 'tags', {});
const policyTagListName = lodashGet(policyTag, 'name', translate('common.tag'));
const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags), [policyTags]);

// A flag for showing the tags field
const shouldShowTags = isPolicyExpenseChat && OptionsListUtils.hasEnabledOptions(_.values(policyTagList));
const shouldShowTags = useMemo(() => isPolicyExpenseChat && OptionsListUtils.hasEnabledTags(policyTagLists), [isPolicyExpenseChat, policyTagLists]);

// A flag for showing tax rate
const shouldShowTax = isPolicyExpenseChat && policy && lodashGet(policy, 'tax.trackingEnabled', policy.isTaxTrackingEnabled);
Expand Down Expand Up @@ -765,17 +757,17 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
shouldShow: shouldShowCategories,
isSupplementary: !isCategoryRequired,
},
{
..._.map(policyTagLists, ({name}, index) => ({
item: (
<MenuItemWithTopDescription
key={translate('common.tag')}
key={name}
shouldShowRightIcon={!isReadOnly}
title={PolicyUtils.getCleanedTagName(iouTag)}
description={policyTagListName}
title={TransactionUtils.getTag(transaction, index)}
description={name}
numberOfLinesTitle={2}
onPress={() =>
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.CREATE, iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.CREATE, iouType, index, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
)
}
style={[styles.moneyRequestMenuItem]}
Expand All @@ -786,7 +778,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
),
shouldShow: shouldShowTags,
isSupplementary: !isTagRequired,
},
})),
{
item: (
<MenuItemWithTopDescription
Expand Down
Loading

0 comments on commit 2fe384c

Please sign in to comment.