Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(j-s): ActiveCases table refactoring #15474

Merged
merged 17 commits into from
Jul 15, 2024
Merged

chore(j-s): ActiveCases table refactoring #15474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
587e412
Fix sideStepper for cases in WAITING_FOR_CANCELLATION state
oddsson Jul 8, 2024
b8ea6ee
Merge branch 'main' of github.com:island-is/island.is
oddsson Jul 9, 2024
bb09ab6
Remove unused code
oddsson Jul 9, 2024
ea4e2d8
Remove unused css
oddsson Jul 9, 2024
3e9b8c5
Use Table component for ActiveCases
oddsson Jul 9, 2024
463adcf
Refactoring
oddsson Jul 9, 2024
9494842
Remove unused code
oddsson Jul 9, 2024
6f0bdad
Styling
oddsson Jul 9, 2024
da1426d
Add nicer animations
oddsson Jul 9, 2024
01ec195
Add better animations
oddsson Jul 9, 2024
7c561b9
Refactoring
oddsson Jul 9, 2024
8b8fe82
Remove debug code
oddsson Jul 9, 2024
9a6e9eb
Add ability to remove cases
oddsson Jul 9, 2024
9769df4
Merge branch 'main' of github.com:island-is/island.is into j-s/table_…
oddsson Jul 9, 2024
f298551
Fix tests
oddsson Jul 9, 2024
26a6a28
Merge branch 'main' of github.com:island-is/island.is into j-s/table_…
oddsson Jul 9, 2024
85c7921
Merge branch 'main' into j-s/table_refacotring
kodiakhq[bot] Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...ts/AccordionItems/IndictmentsCaseFilesAccordionItem/IndictmentsCaseFilesAccordionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ const CaseFile: FC<CaseFileProps> = (props) => {
<Icon icon="menu" color="blue400" />
</Box>
<Box width="full">
<AnimatePresence initial={false} exitBeforeEnter>
<AnimatePresence initial={false} mode="wait">
{isEditing ? (
<motion.div
initial={{ y: 10, opacity: 0 }}
Expand Down
2 changes: 1 addition & 1 deletion apps/judicial-system/web/src/components/Table/PastCasesTable/PastCasesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ const PastCasesTable: FC<Props> = ({ cases, loading = false, testid }) => {
appealCaseNumber={column.appealCaseNumber}
/>
</td>
<td className={cn(styles.td, styles.largeColumn)}>
<td className={styles.largeColumn}>
<DefendantInfo defendants={column.defendants} />
</td>
<td>
Expand Down
40 changes: 7 additions & 33 deletions apps/judicial-system/web/src/components/Table/Table.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,9 @@ import { globalStyle, style } from '@vanilla-extract/css'

import { theme } from '@island.is/island-ui/theme'

export const header = style({
background: theme.color.blue100,
})

export const table = style({
borderSpacing: 0,
borderCollapse: 'collapse',
overflow: 'hidden',

// Needed for Safari.
width: '100%',
Expand Down Expand Up @@ -46,30 +41,14 @@ export const largeColumn = style({
},
},
})
export const blockColumn = style({
display: 'block',
overflow: 'hidden',
textOverflow: 'ellipsis',
})

export const deleteButtonContainer = style({
maxWidth: '0',
height: '100%',
padding: 0,
transform: 'translate3d(2px, 0px, 0px)',
})

export const td = style({
selectors: {
[`&:not(${deleteButtonContainer})`]: {
padding: `${theme.spacing[2]}px ${theme.spacing[3]}px`,
},
'&.secondLast': {
marginLeft: 'auto',
height: '100%',
padding: 0,
},
},
export const smallContainer = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '34px',
height: '34px',
marginLeft: 'auto',
})

globalStyle(`${table} td, th`, {
Expand All @@ -83,11 +62,6 @@ globalStyle(`${table} td, th`, {
textAlign: 'left',
})

export const expandLabel = style({
color: theme.color.blue400,
cursor: 'pointer',
})

export const row = style({
cursor: 'pointer',
})
Expand Down
42 changes: 29 additions & 13 deletions apps/judicial-system/web/src/components/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React, {
import { useIntl } from 'react-intl'
import { useLocalStorage } from 'react-use'
import parseISO from 'date-fns/parseISO'
import { AnimatePresence } from 'framer-motion'
import { AnimatePresence, motion } from 'framer-motion'

import { Box, Text } from '@island.is/island-ui/core'
import { theme } from '@island.is/island-ui/theme'
Expand Down Expand Up @@ -126,7 +126,7 @@ const Table: FC<TableProps> = (props) => {
}
}, [data, sortConfig])

return width < theme.breakpoints.md ? (
return width < theme.breakpoints.lg ? (
<>
{data.map((theCase: CaseListEntry) => (
<Box marginTop={2} key={theCase.id}>
Expand Down Expand Up @@ -205,30 +205,46 @@ const Table: FC<TableProps> = (props) => {
data-testid="tableRow"
>
{columns.map((td) => (
<td key={`${td}-${columns.indexOf(td)}`} className={styles.td}>
{td.cell(row)}
</td>
<td key={`${td}-${columns.indexOf(td)}`}>{td.cell(row)}</td>
))}
{generateContextMenuItems && (
<td className={styles.td}>
<td width="4%">
{generateContextMenuItems(row).length > 0 && (
<AnimatePresence exitBeforeEnter initial={false}>
<AnimatePresence initial={false} mode="popLayout">
{isOpeningCaseId === row.id && showLoading ? (
<Box padding={1}>
<motion.div
className={styles.smallContainer}
key={row.id}
initial={{ opacity: 0, y: 5 }}
animate={{ opacity: 1, y: 1 }}
exit={{
opacity: 0,
y: 5,
}}
transition={{ type: 'spring' }}
>
<LoadingIndicator />
</Box>
</motion.div>
) : (
<ContextMenu
menuLabel={`Valmynd fyrir mál ${row.courtCaseNumber}`}
items={generateContextMenuItems(row)}
disclosure={
<IconButton
icon="ellipsisVertical"
colorScheme="transparent"
<motion.div
className={styles.smallContainer}
key={row.id}
initial={{ opacity: 1 }}
animate={{ opacity: 1, y: 1 }}
exit={{ opacity: 0, y: 5 }}
onClick={(evt) => {
evt.stopPropagation()
}}
/>
>
<IconButton
icon="ellipsisVertical"
colorScheme="transparent"
/>
</motion.div>
}
/>
)}
Expand Down
72 changes: 36 additions & 36 deletions apps/judicial-system/web/src/components/Table/TableSkeleton/TableSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,122 +52,122 @@ const TableSkeleton = () => {
</thead>
<tbody>
<tr className={styles.tableRowContainer}>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
</tr>
<tr className={styles.tableRowContainer}>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
</tr>
<tr className={styles.tableRowContainer}>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
</tr>
<tr className={styles.tableRowContainer}>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
</tr>
<tr className={styles.tableRowContainer}>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
</tr>
<tr className={styles.tableRowContainer}>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
<td className={styles.td}>
<td>
<SkeletonLoader width={104} height={32} borderRadius="standard" />
</td>
</tr>
Expand Down
10 changes: 0 additions & 10 deletions apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.strings.ts
View file
Open in desktop

This file was deleted.

Loading
Loading