Skip to content

Commit 7512633

Browse files
inimagainimaga
authored
Merge pull request Expensify#89421 from mukhrr/fix/84393
added `Avatar` column to Report table column selector
2 parents 338777e + be75ecd commit 7512633

17 files changed

Lines changed: 121 additions & 80 deletions

File tree

‎src/CONST/index.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7717,6 +7717,7 @@ const CONST = {
77177717
WITHDRAWAL_ID: this.TABLE_COLUMNS.WITHDRAWAL_ID,
77187718
},
77197719
EXPENSE_REPORT: {
7720+
AVATAR: this.TABLE_COLUMNS.AVATAR,
77207721
DATE: this.TABLE_COLUMNS.DATE,
77217722
SUBMITTED: this.TABLE_COLUMNS.SUBMITTED,
77227723
APPROVED: this.TABLE_COLUMNS.APPROVED,
@@ -7762,17 +7763,20 @@ const CONST = {
77627763
get GROUP_CUSTOM_COLUMNS() {
77637764
return {
77647765
FROM: {
7766+
AVATAR: this.TABLE_COLUMNS.AVATAR,
77657767
FROM: this.TABLE_COLUMNS.GROUP_FROM,
77667768
EXPENSES: this.TABLE_COLUMNS.GROUP_EXPENSES,
77677769
TOTAL: this.TABLE_COLUMNS.GROUP_TOTAL,
77687770
},
77697771
CARD: {
7772+
AVATAR: this.TABLE_COLUMNS.AVATAR,
77707773
CARD: this.TABLE_COLUMNS.GROUP_CARD,
77717774
FEED: this.TABLE_COLUMNS.GROUP_FEED,
77727775
EXPENSES: this.TABLE_COLUMNS.GROUP_EXPENSES,
77737776
TOTAL: this.TABLE_COLUMNS.GROUP_TOTAL,
77747777
},
77757778
WITHDRAWAL_ID: {
7779+
AVATAR: this.TABLE_COLUMNS.AVATAR,
77767780
WITHDRAWN: this.TABLE_COLUMNS.GROUP_WITHDRAWN,
77777781
WITHDRAWAL_STATUS: this.TABLE_COLUMNS.GROUP_WITHDRAWAL_STATUS,
77787782
BANK_ACCOUNT: this.TABLE_COLUMNS.GROUP_BANK_ACCOUNT,
@@ -7830,6 +7834,7 @@ const CONST = {
78307834
this.TABLE_COLUMNS.TOTAL_AMOUNT,
78317835
],
78327836
EXPENSE_REPORT: [
7837+
this.TABLE_COLUMNS.AVATAR,
78337838
this.TABLE_COLUMNS.DATE,
78347839
this.TABLE_COLUMNS.STATUS,
78357840
this.TABLE_COLUMNS.TITLE,
@@ -7846,9 +7851,10 @@ const CONST = {
78467851
},
78477852
get GROUP_DEFAULT_COLUMNS() {
78487853
return {
7849-
FROM: [this.TABLE_COLUMNS.GROUP_FROM, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
7850-
CARD: [this.TABLE_COLUMNS.GROUP_CARD, this.TABLE_COLUMNS.GROUP_FEED, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
7854+
FROM: [this.TABLE_COLUMNS.AVATAR, this.TABLE_COLUMNS.GROUP_FROM, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
7855+
CARD: [this.TABLE_COLUMNS.AVATAR, this.TABLE_COLUMNS.GROUP_CARD, this.TABLE_COLUMNS.GROUP_FEED, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
78517856
WITHDRAWAL_ID: [
7857+
this.TABLE_COLUMNS.AVATAR,
78527858
this.TABLE_COLUMNS.GROUP_WITHDRAWN,
78537859
this.TABLE_COLUMNS.GROUP_WITHDRAWAL_STATUS,
78547860
this.TABLE_COLUMNS.GROUP_BANK_ACCOUNT,

‎src/components/Search/SearchList/ListItem/CardListItemHeader.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,24 @@ function CardListItemHeader<TItem extends ListItem>({
7373
StyleUtils.getItemBackgroundColorStyle(!!cardItem.isSelected, !!isFocused, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.highlightBG;
7474

7575
const columnComponents = {
76+
[CONST.SEARCH.TABLE_COLUMNS.AVATAR]: (
77+
<View
78+
key={CONST.SEARCH.TABLE_COLUMNS.AVATAR}
79+
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}
80+
>
81+
<UserDetailsTooltip accountID={cardItem.accountID}>
82+
<View>
83+
<ReportActionAvatars
84+
subscriptCardFeed={cardItem.bank as CompanyCardFeed}
85+
subscriptAvatarBorderColor={backgroundColor}
86+
noRightMarginOnSubscriptContainer
87+
accountIDs={[cardItem.accountID]}
88+
size={CONST.AVATAR_SIZE.SMALL}
89+
/>
90+
</View>
91+
</UserDetailsTooltip>
92+
</View>
93+
),
7694
[CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD]: (
7795
<View
7896
key={CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD}
@@ -155,25 +173,7 @@ function CardListItemHeader<TItem extends ListItem>({
155173
</View>
156174
</View>
157175
)}
158-
{isLargeScreenWidth && (
159-
<>
160-
<View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}>
161-
<UserDetailsTooltip accountID={cardItem.accountID}>
162-
<View>
163-
<ReportActionAvatars
164-
subscriptCardFeed={cardItem.bank as CompanyCardFeed}
165-
subscriptAvatarBorderColor={backgroundColor}
166-
noRightMarginOnSubscriptContainer
167-
accountIDs={[cardItem.accountID]}
168-
size={CONST.AVATAR_SIZE.SMALL}
169-
/>
170-
</View>
171-
</UserDetailsTooltip>
172-
</View>
173-
174-
{columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
175-
</>
176-
)}
176+
{isLargeScreenWidth && columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
177177
</View>
178178
{!isLargeScreenWidth && (
179179
<View style={[styles.flexShrink0, styles.flexRow, styles.alignItemsCenter]}>

‎src/components/Search/SearchList/ListItem/ExpenseReportListItemRow.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,25 @@ function ExpenseReportListItemRow({
7474
const currency = item.currency ?? CONST.CURRENCY.USD;
7575
const {totalDisplaySpend = 0, nonReimbursableSpend = 0, reimbursableSpend = 0, isAllScanning: isScanning = false} = item;
7676

77+
// Calculate the correct border color for avatars based on hover and focus states
78+
const finalAvatarBorderColor =
79+
StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused || !!isHovered, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
80+
theme.highlightBG;
81+
7782
const columnComponents = {
83+
[CONST.SEARCH.TABLE_COLUMNS.AVATAR]: (
84+
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR), styles.alignItemsStretch]}>
85+
<SearchReportAvatar
86+
primaryAvatar={item.primaryAvatar}
87+
secondaryAvatar={item.secondaryAvatar}
88+
avatarType={item.avatarType}
89+
shouldShowTooltip={showTooltip}
90+
subscriptAvatarBorderColor={finalAvatarBorderColor}
91+
reportID={item.reportID}
92+
isLargeScreenWidth={isLargeScreenWidth}
93+
/>
94+
</View>
95+
),
7896
[CONST.SEARCH.TABLE_COLUMNS.DATE]: (
7997
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, {isDateColumnWide: item.shouldShowYear})]}>
8098
<DateCell
@@ -231,11 +249,6 @@ function ExpenseReportListItemRow({
231249
),
232250
};
233251

234-
// Calculate the correct border color for avatars based on hover and focus states
235-
const finalAvatarBorderColor =
236-
StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused || !!isHovered, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
237-
theme.highlightBG;
238-
239252
if (!isLargeScreenWidth) {
240253
const filteredTransactions = item.transactions?.filter((t) => t.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
241254
const expenseCount = (filteredTransactions?.length ? filteredTransactions.length : undefined) ?? item.transactionCount ?? 0;
@@ -304,18 +317,6 @@ function ExpenseReportListItemRow({
304317
sentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPENSE_REPORT_CHECKBOX}
305318
/>
306319
)}
307-
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR), styles.alignItemsStretch]}>
308-
<SearchReportAvatar
309-
primaryAvatar={item.primaryAvatar}
310-
secondaryAvatar={item.secondaryAvatar}
311-
avatarType={item.avatarType}
312-
shouldShowTooltip={showTooltip}
313-
subscriptAvatarBorderColor={finalAvatarBorderColor}
314-
reportID={item.reportID}
315-
isLargeScreenWidth={isLargeScreenWidth}
316-
/>
317-
</View>
318-
319320
{columns.map((column) => {
320321
const CellComponent = columnComponents[column as keyof typeof columnComponents];
321322
return <Fragment key={column}>{CellComponent}</Fragment>;

‎src/components/Search/SearchList/ListItem/MemberListItemHeader.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,24 @@ function MemberListItemHeader<TItem extends ListItem>({
6767
const formattedLogin = formatPhoneNumber(memberItem.login ?? '');
6868

6969
const columnComponents = {
70+
[CONST.SEARCH.TABLE_COLUMNS.AVATAR]: (
71+
<View
72+
key={CONST.SEARCH.TABLE_COLUMNS.AVATAR}
73+
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}
74+
>
75+
<UserDetailsTooltip accountID={memberItem.accountID}>
76+
<View>
77+
<Avatar
78+
source={memberItem.avatar}
79+
type={CONST.ICON_TYPE_AVATAR}
80+
name={formattedDisplayName}
81+
avatarID={memberItem.accountID}
82+
size={CONST.AVATAR_SIZE.SMALL}
83+
/>
84+
</View>
85+
</UserDetailsTooltip>
86+
</View>
87+
),
7088
[CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM]: (
7189
<View
7290
key={CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM}
@@ -143,25 +161,7 @@ function MemberListItemHeader<TItem extends ListItem>({
143161
</View>
144162
</View>
145163
)}
146-
{!!isLargeScreenWidth && (
147-
<>
148-
<View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}>
149-
<UserDetailsTooltip accountID={memberItem.accountID}>
150-
<View>
151-
<Avatar
152-
source={memberItem.avatar}
153-
type={CONST.ICON_TYPE_AVATAR}
154-
name={formattedDisplayName}
155-
avatarID={memberItem.accountID}
156-
size={CONST.AVATAR_SIZE.SMALL}
157-
/>
158-
</View>
159-
</UserDetailsTooltip>
160-
</View>
161-
162-
{columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
163-
</>
164-
)}
164+
{!!isLargeScreenWidth && columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
165165
</View>
166166
{!isLargeScreenWidth && (
167167
<View style={[styles.flexShrink0, styles.flexRow, styles.alignItemsCenter]}>

‎src/components/Search/SearchList/ListItem/WithdrawalIDListItemHeader.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,19 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({
102102
})();
103103

104104
const columnComponents = {
105+
[CONST.SEARCH.TABLE_COLUMNS.AVATAR]: (
106+
<View
107+
key={CONST.SEARCH.TABLE_COLUMNS.AVATAR}
108+
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}
109+
>
110+
<Icon
111+
src={icon}
112+
width={iconSize}
113+
height={iconSize}
114+
additionalStyles={iconStyles}
115+
/>
116+
</View>
117+
),
105118
[CONST.SEARCH.TABLE_COLUMNS.GROUP_BANK_ACCOUNT]: (
106119
<View
107120
key={CONST.SEARCH.TABLE_COLUMNS.BANK_ACCOUNT}
@@ -203,20 +216,7 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({
203216
</View>
204217
</View>
205218
)}
206-
{isLargeScreenWidth && (
207-
<>
208-
<View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}>
209-
<Icon
210-
src={icon}
211-
width={iconSize}
212-
height={iconSize}
213-
additionalStyles={iconStyles}
214-
/>
215-
</View>
216-
217-
{columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
218-
</>
219-
)}
219+
{isLargeScreenWidth && columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
220220
</View>
221221
{!isLargeScreenWidth && (
222222
<View style={[styles.flexShrink0, styles.flexRow, styles.alignItemsCenter]}>

‎src/languages/de.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,7 @@ const translations: TranslationDeepObject<typeof en> = {
493493
nextMonth: 'Nächster Monat',
494494
previousYear: 'Vorheriges Jahr',
495495
nextYear: 'Nächstes Jahr',
496+
avatar: 'Avatar',
496497
},
497498
socials: {
498499
podcast: 'Folgen Sie uns auf Podcast',

‎src/languages/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ const translations = {
183183
members: 'Members',
184184
invite: 'Invite',
185185
here: 'here',
186+
avatar: 'Avatar',
186187
date: 'Date',
187188
dob: 'Date of birth',
188189
currentYear: 'Current year',

‎src/languages/es.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ const translations: TranslationDeepObject<typeof en> = {
120120
members: 'Miembros',
121121
invite: 'Invitar',
122122
here: 'aquí',
123+
avatar: 'Avatar',
123124
date: 'Fecha',
124125
dob: 'Fecha de nacimiento',
125126
currentYear: 'Año actual',

‎src/languages/fr.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,7 @@ const translations: TranslationDeepObject<typeof en> = {
493493
nextMonth: 'Le mois prochain',
494494
previousYear: 'Année précédente',
495495
nextYear: 'L’an prochain',
496+
avatar: 'Avatar',
496497
},
497498
socials: {
498499
podcast: 'Suivez-nous sur Podcast',

‎src/languages/it.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,7 @@ const translations: TranslationDeepObject<typeof en> = {
493493
nextMonth: 'Il prossimo mese',
494494
previousYear: 'Anno precedente',
495495
nextYear: "L'anno prossimo",
496+
avatar: 'Avatar',
496497
},
497498
socials: {
498499
podcast: 'Seguici su Podcast',

0 commit comments

Comments
 (0)