Skip to content

Commit d42a076

Browse files
frozenheliumfrozenhelium
committed
feat(ui-improvements): add more predefined columns for table
1 parent 52f51d9 commit d42a076

File tree

24 files changed

+221
-86
lines changed

24 files changed

+221
-86
lines changed

‎app/src/components/Navbar/CountryDropdown/index.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -152,37 +152,41 @@ function CountryDropdown() {
152152
className={styles.regionDetailContent}
153153
withHeaderBorder
154154
withContentOverflow
155-
heading={(
156-
<DropdownMenuItem
157-
type="link"
158-
to="regionsLayout"
159-
urlParams={{ regionId: region.key }}
160-
withLinkIcon
161-
colorVariant="primary"
162-
styleVariant="filled"
163-
withoutFullWidth
164-
spacing="sm"
155+
headerDescription={(
156+
<ListView
157+
withWrap
158+
withSpaceBetweenContents
165159
>
166-
{/* FIXME: use translation */}
167-
{`${region.value} Region`}
168-
</DropdownMenuItem>
169-
)}
170-
headingLevel={4}
171-
headerActions={(
172-
<TextInput
173-
name={undefined}
174-
placeholder={strings.countryDropdownSearchPlaceholder}
175-
value={countrySearch}
176-
onChange={setCountrySearch}
177-
icons={<SearchLineIcon />}
178-
/>
160+
<DropdownMenuItem
161+
type="link"
162+
to="regionsLayout"
163+
urlParams={{ regionId: region.key }}
164+
withLinkIcon
165+
colorVariant="primary"
166+
styleVariant="filled"
167+
withoutFullWidth
168+
spacing="sm"
169+
>
170+
{/* FIXME: use translation */}
171+
{`${region.value} Region`}
172+
</DropdownMenuItem>
173+
<TextInput
174+
name={undefined}
175+
placeholder={strings
176+
.countryDropdownSearchPlaceholder}
177+
value={countrySearch}
178+
onChange={setCountrySearch}
179+
icons={<SearchLineIcon />}
180+
/>
181+
</ListView>
179182
)}
180183
withPadding
181184
>
182185
<ListView
183186
layout="grid"
184-
spacing="sm"
185-
numPreferredGridColumns={3}
187+
spacing="xs"
188+
numPreferredGridColumns={4}
189+
minGridColumnSize="10rem"
186190
>
187191
{/* TODO: use RawList */}
188192
{countriesInSelectedRegion?.map(
@@ -193,10 +197,10 @@ function CountryDropdown() {
193197
to="countriesLayout"
194198
urlParams={{ countryId: id }}
195199
styleVariant="action"
196-
withLinkIcon
197200
spacing="sm"
198201
withoutFullWidth
199202
withoutPadding
203+
textSize="sm"
200204
>
201205
{name}
202206
</DropdownMenuItem>

‎app/src/components/Navbar/CountryDropdown/styles.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
flex-direction: row;
44
max-width: 64rem;
55
min-height: 16rem;
6+
max-height: 70vh;
67
overflow: auto;
78

89
.region-list {
9-
flex-basis: 10rem;
10+
flex-basis: 9rem;
1011
flex-shrink: 0;
1112
padding: var(--go-ui-spacing-md) 0 0 var(--go-ui-spacing-md);
1213
}

‎app/src/components/domain/AppealsTable/i18n.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
"appealsTableStartDate": "Start Date",
55
"appealsTableStartDateAfter": "Start After",
66
"appealsTableStartDateBefore": "Start Before",
7-
"appealsTableType": "Appeal Type",
8-
"appealsTableCode": "Appeal Code",
7+
"appealsTableType": "Type",
8+
"appealsTableCode": "Code",
99
"appealsTableOperation": "Active Operation",
1010
"appealsTableDisasterType": "Disaster Type",
11-
"appealsTableRequestedAmount": "Funding Requirements",
12-
"appealsTableFundedAmount": "Funding Coverage",
11+
"appealsTableRequestedAmount": "Requested",
12+
"appealsTableFundedAmount": "Funding",
1313
"appealsTableCountry": "Country",
1414
"appealsTableFilterTypePlaceholder": "All Appeal Types",
1515
"appealsTableFilterDisastersPlaceholder": "All Disaster Types",
1616
"appealsTableClearFilters": "Clear Filters",
1717
"appealsTableFilterDistrictPlaceholder": "All Provinces",
1818
"appealsTableProvinces": "Provinces"
1919
}
20-
}
20+
}

‎app/src/components/domain/AppealsTable/index.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { SortContext } from '@ifrc-go/ui/contexts';
1515
import { useTranslation } from '@ifrc-go/ui/hooks';
1616
import {
1717
createDateColumn,
18-
createNumberColumn,
1918
createProgressColumn,
2019
createStringColumn,
2120
getPercentage,
@@ -31,7 +30,12 @@ import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput'
3130
import DistrictSearchMultiSelectInput, { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
3231
import useGlobalEnums from '#hooks/domain/useGlobalEnums';
3332
import useFilterState from '#hooks/useFilterState';
34-
import { createLinkColumn } from '#utils/domain/tableHelpers';
33+
import {
34+
createBudgetColumn,
35+
createCountryColumn,
36+
createDisasterTypeColumn,
37+
createEventColumn,
38+
} from '#utils/domain/tableHelpers';
3539
import type {
3640
GoApiResponse,
3741
GoApiUrlQuery,
@@ -148,11 +152,9 @@ function AppealsTable(props: Props) {
148152
'code',
149153
strings.appealsTableCode,
150154
(item) => item.code,
151-
{
152-
columnClassName: styles.code,
153-
},
155+
{ columnClassName: styles.code },
154156
),
155-
createLinkColumn<AppealListItem, string>(
157+
createEventColumn<AppealListItem, string>(
156158
'operation',
157159
strings.appealsTableOperation,
158160
(item) => item.name,
@@ -161,20 +163,17 @@ function AppealsTable(props: Props) {
161163
urlParams: { emergencyId: item.event },
162164
}),
163165
),
164-
createStringColumn<AppealListItem, string>(
166+
createDisasterTypeColumn<AppealListItem, string>(
165167
'dtype',
166168
strings.appealsTableDisasterType,
167169
(item) => item.dtype?.name,
168170
{ sortable: true },
169171
),
170-
createNumberColumn<AppealListItem, string>(
172+
createBudgetColumn<AppealListItem, string>(
171173
'amount_requested',
172174
strings.appealsTableRequestedAmount,
173175
(item) => item.amount_requested,
174-
{
175-
sortable: true,
176-
suffix: ' CHF',
177-
},
176+
{ sortable: true },
178177
),
179178
createProgressColumn<AppealListItem, string>(
180179
'amount_funded',
@@ -188,7 +187,7 @@ function AppealsTable(props: Props) {
188187
{ sortable: true },
189188
),
190189
variant !== 'country'
191-
? createLinkColumn<AppealListItem, string>(
190+
? createCountryColumn<AppealListItem, string>(
192191
'country',
193192
strings.appealsTableCountry,
194193
(item) => item.country?.name,

‎app/src/components/domain/AppealsTable/styles.module.css‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,13 @@
11
.appeals-table {
2-
.filter-actions {
3-
align-self: end;
4-
}
5-
62
.table {
7-
.start-date {
8-
width: 0%;
9-
min-width: 9rem;
10-
}
11-
123
.appeal-type {
134
width: 0%;
5+
min-width: 6rem;
146
}
157

168
.code {
179
width: 0%;
10+
min-width: 6rem;
1811
}
1912
}
2013
}

‎app/src/utils/domain/tableHelpers/index.ts‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ import {
66
type ReducedListDisplayProps,
77
type SortDirection,
88
type TableActionsProps,
9+
NumberOutputProps,
910
} from '@ifrc-go/ui';
10-
import { numericIdSelector } from '@ifrc-go/ui/utils';
11+
import { createNumberColumn, createStringColumn, numericIdSelector } from '@ifrc-go/ui/utils';
1112
import { _cs } from '@togglecorp/fujs';
1213

1314
import Link, { type Props as LinkProps } from '#components/Link';
@@ -19,6 +20,7 @@ import type { Props as RegionLinkProps } from '../RegionLink';
1920
import RegionLink from '../RegionLink';
2021

2122
import styles from './styles.module.css';
23+
import { CellProps } from '../../../../../packages/ui/dist/components/Table/Cell';
2224

2325
type Options<D, K, CompProps, HeaderProps> = {
2426
sortable?: boolean,
@@ -176,3 +178,76 @@ export function createRegionListColumn<DATUM, KEY>(
176178

177179
return item;
178180
}
181+
182+
export function createCountryColumn<D, K>(
183+
id: string,
184+
title: string,
185+
accessor: (item: D) => React.ReactNode,
186+
rendererParams: (item: D) => LinkProps,
187+
options?: Options<D, K, LinkProps, HeaderCellProps>,
188+
) {
189+
return createLinkColumn<D, K>(
190+
id,
191+
title,
192+
accessor,
193+
rendererParams,
194+
{
195+
...options,
196+
columnClassName: _cs(styles.country, options?.columnClassName),
197+
},
198+
);
199+
}
200+
201+
export function createEventColumn<D, K>(
202+
id: string,
203+
title: string,
204+
accessor: (item: D) => React.ReactNode,
205+
rendererParams: (item: D) => LinkProps,
206+
options?: Options<D, K, LinkProps, HeaderCellProps>,
207+
) {
208+
return createLinkColumn<D, K>(
209+
id,
210+
title,
211+
accessor,
212+
rendererParams,
213+
{
214+
...options,
215+
columnClassName: _cs(styles.event, options?.columnClassName),
216+
},
217+
);
218+
}
219+
220+
export function createDisasterTypeColumn<D, K extends string | number>(
221+
id: string,
222+
title: string,
223+
accessor: (item: D) => string | undefined | null,
224+
options?: Options<D, K, CellProps<string>, HeaderCellProps>,
225+
) {
226+
return createStringColumn<D, K>(
227+
id,
228+
title,
229+
accessor,
230+
{
231+
...options,
232+
columnClassName: _cs(styles.disasterType, options?.columnClassName),
233+
},
234+
);
235+
}
236+
237+
export function createBudgetColumn<D, K extends string | number>(
238+
id: string,
239+
title: string,
240+
accessor: (item: D) => number | undefined | null,
241+
options?: Options<D, K, NumberOutputProps, HeaderCellProps>,
242+
) {
243+
return createNumberColumn<D, K>(
244+
id,
245+
title,
246+
accessor,
247+
{
248+
suffix: ' CHF',
249+
...options,
250+
columnClassName: _cs(styles.budget, options?.columnClassName),
251+
},
252+
);
253+
}

‎app/src/utils/domain/tableHelpers/styles.module.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
11
.country-list {
22
min-width: 8rem;
33
}
4+
5+
.country {
6+
min-width: 8rem;
7+
}
8+
9+
.event {
10+
min-width: 10rem;
11+
}
12+
13+
.disaster-type {
14+
min-width: 8rem;
15+
}
16+
17+
.budget {
18+
min-width: 8rem;
19+
}

‎app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,6 @@ function OngoingEruDeployments() {
230230
startDate: item.start_date,
231231
endDate: item.end_date,
232232
}),
233-
{ columnClassName: styles.timeline },
234233
),
235234
createEmptyColumn<EruListItem, number>(),
236235
]),

‎app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,6 @@
1515
width: 10rem;
1616
}
1717

18-
.timeline {
19-
width: 22rem;
20-
}
21-
2218
.actions {
2319
width: 3rem;
2420
}

‎app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,6 @@ function OngoingRapidResponseDeployments() {
235235
startDate: item.start_date,
236236
endDate: item.end_date,
237237
}),
238-
{ columnClassName: styles.timeline },
239238
),
240239
createEmptyColumn<Personnel, number>(),
241240
]),

0 commit comments

Comments
 (0)