Skip to content

Commit f0e4564

Browse files
sjschlapbachsjschlapbach
authored
enhance(apps/frontend-manage): update activity view to show essential information for every activity type (#4743)
1 parent c187f76 commit f0e4564

49 files changed

Lines changed: 692 additions & 791 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/auth/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"@klicker-uzh/prisma": "workspace:*",
99
"@klicker-uzh/shared-components": "workspace:*",
1010
"@next-auth/prisma-adapter": "1.0.7",
11-
"@uzh-bf/design-system": "3.0.8",
11+
"@uzh-bf/design-system": "3.0.9",
1212
"axios": "1.7.7",
1313
"bcryptjs": "2.4.3",
1414
"js-cookie": "3.0.5",

‎apps/backend-docker/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"@types/passport": "^1.0.16",
5757
"@types/passport-jwt": "^4.0.1",
5858
"@types/ws": "^8.5.12",
59-
"@uzh-bf/design-system": "3.0.8",
59+
"@uzh-bf/design-system": "3.0.9",
6060
"axios": "~1.7.7",
6161
"cross-env": "~7.0.3",
6262
"dotenv": "~16.4.5",

‎apps/docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"@mdx-js/react": "~3.1.0",
2323
"@tailwindcss/typography": "~0.5.15",
2424
"@types/react": "^18.3.11",
25-
"@uzh-bf/design-system": "3.0.8",
25+
"@uzh-bf/design-system": "3.0.9",
2626
"autoprefixer": "~10.4.20",
2727
"cross-env": "~7.0.3",
2828
"docusaurus-plugin-matomo": "~0.0.8",

‎apps/frontend-control/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@klicker-uzh/prisma": "workspace:*",
1818
"@klicker-uzh/shared-components": "workspace:*",
1919
"@socialgouv/matomo-next": "1.9.1",
20-
"@uzh-bf/design-system": "3.0.8",
20+
"@uzh-bf/design-system": "3.0.9",
2121
"cross-env": "7.0.3",
2222
"dayjs": "1.11.13",
2323
"deepmerge": "4.3.1",

‎apps/frontend-manage/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@socialgouv/matomo-next": "1.9.1",
2222
"@tanstack/react-table": "8.20.5",
2323
"@uidotdev/usehooks": "2.4.1",
24-
"@uzh-bf/design-system": "3.0.8",
24+
"@uzh-bf/design-system": "3.0.9",
2525
"dayjs": "1.11.13",
2626
"deepmerge": "4.3.1",
2727
"formik": "2.4.6",

‎apps/frontend-manage/src/components/activities/overview/ActivityActionButton.tsx‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎apps/frontend-manage/src/components/activities/overview/ActivityActions.tsx‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
33
import { ActivityType } from '@klicker-uzh/graphql/dist/ops'
4-
import { Dropdown } from '@uzh-bf/design-system'
4+
import { Button, Dropdown } from '@uzh-bf/design-system'
55
import { ActivityAction } from '../actions/useAvailableActions'
6-
import ActivityActionButton from './ActivityActionButton'
76

87
function ActivityActions({
98
availableActions,
@@ -17,27 +16,31 @@ function ActivityActions({
1716
activityType: ActivityType
1817
}) {
1918
return (
20-
<div className="flex flex-row items-center gap-2">
21-
{availableActions.slice(0, 3).map((action) => {
19+
<div className="-mr-1 -mt-1 flex flex-row items-end gap-1">
20+
{availableActions.slice(0, 1).map((action) => {
2221
return (
23-
<ActivityActionButton
22+
<Button
23+
basic
2424
key={`activity-${activityType}-${activityId}-${action.id}`}
25-
icon={action.icon}
26-
tooltip={action.label}
27-
onClick={action.onClick}
2825
disabled={action.disabled}
26+
onClick={action.onClick}
27+
className={{
28+
root: 'text-primary-100 hover:text-primary-100 h-8 text-sm',
29+
}}
2930
data={action.data}
30-
className={action.className}
31-
/>
31+
>
32+
<Button.Icon icon={action.icon} />
33+
<Button.Label>{action.label}</Button.Label>
34+
</Button>
3235
)
3336
})}
3437

35-
{availableActions.length > 3 && (
38+
{availableActions.length > 1 && (
3639
<Dropdown
37-
items={availableActions.slice(3).map((action) => ({
40+
items={availableActions.slice(1).map((action) => ({
3841
label: (
3942
<div
40-
className={`flex cursor-pointer items-center rounded px-1.5 py-0.5 hover:bg-gray-100 ${
43+
className={`flex cursor-pointer items-center rounded px-1.5 py-0.5 ${
4144
action.className ?? ''
4245
}`}
4346
>
@@ -51,16 +54,12 @@ function ActivityActions({
5154
onClick: action.onClick,
5255
data: action.data,
5356
}))}
54-
trigger={
55-
<ActivityActionButton
56-
icon={faEllipsis}
57-
onClick={() => {}}
58-
data={{ cy: `actions-${activityType}-${activityName}` }}
59-
/>
60-
}
57+
trigger={<FontAwesomeIcon icon={faEllipsis} />}
58+
data={{ cy: `actions-${activityType}-${activityName}` }}
6159
className={{
6260
viewport: 'z-20', // ensure that dropdown is shown above other elements on course overview
6361
item: 'py-0.5 text-sm',
62+
trigger: 'h-8 w-8 border-none text-sm',
6463
}}
6564
/>
6665
)}

‎apps/frontend-manage/src/components/activities/overview/ActivityListEntry.tsx‎

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
faCheckCircle,
33
faClock,
4+
faHourglassHalf,
45
faPenToSquare,
56
} from '@fortawesome/free-regular-svg-icons'
67
import {
@@ -94,7 +95,7 @@ function ActivityListEntry({
9495
<>
9596
<div
9697
className={twMerge(
97-
'border-uzh-grey-60 flex flex-row items-center justify-between rounded-md border border-solid px-4 py-3 shadow-sm transition-all hover:shadow-md',
98+
'border-uzh-grey-60 flex flex-row items-start justify-between rounded-md border border-solid px-4 py-3 shadow-sm transition-all hover:shadow-md',
9899
highlighted && 'border-primary-100 bg-orange-50'
99100
)}
100101
data-cy={`activity-${activity.type}-${activity.name}`}
@@ -144,9 +145,42 @@ function ActivityListEntry({
144145
</div>
145146
<div className="flex h-[1.4rem] flex-row items-center gap-4 text-gray-500">
146147
<div className="ml-[1.65rem] text-sm">
147-
{t('manage.activities.lastModifiedAt', {
148-
date: dayjs(activity.updatedAt).format('DD.MM.YYYY HH:mm'),
149-
})}
148+
{activity.automaticPublicationAt &&
149+
activity.status === PublicationStatus.Scheduled ? (
150+
<div className="flex flex-row items-center gap-1.5">
151+
<FontAwesomeIcon icon={faClock} />
152+
<span>
153+
{t('manage.activities.automaticPublicationAt', {
154+
date: dayjs(activity.automaticPublicationAt).format(
155+
'DD.MM.YYYY HH:mm'
156+
),
157+
})}
158+
</span>
159+
</div>
160+
) : null}
161+
{activity.scheduledStartAt && activity.scheduledEndAt ? (
162+
<div className="flex flex-row items-center gap-1.5">
163+
<FontAwesomeIcon icon={faHourglassHalf} />
164+
<span>
165+
{t('manage.activities.availability', {
166+
startDate: dayjs(activity.scheduledStartAt).format(
167+
'DD.MM.YYYY HH:mm'
168+
),
169+
endDate: dayjs(activity.scheduledEndAt).format(
170+
'DD.MM.YYYY HH:mm'
171+
),
172+
})}
173+
</span>
174+
</div>
175+
) : null}
176+
{!(
177+
activity.automaticPublicationAt &&
178+
activity.status === PublicationStatus.Scheduled
179+
) && !activity.scheduledStartAt
180+
? t('manage.activities.lastModifiedAt', {
181+
date: dayjs(activity.updatedAt).format('DD.MM.YYYY HH:mm'),
182+
})
183+
: null}
150184
</div>
151185
<SharingTypeBadge
152186
sharingType={activity.sharingType}

‎apps/frontend-manage/src/components/catalog/actions/CatalogObjectItem.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ import {
1818
ObjectType,
1919
UserProfileDocument,
2020
} from '@klicker-uzh/graphql/dist/ops'
21-
import ForwardRefButton from '@klicker-uzh/shared-components/src/ForwardRefButton'
22-
import { Button, Dropdown, toast } from '@uzh-bf/design-system'
21+
import { Dropdown, toast } from '@uzh-bf/design-system'
2322
import { useTranslations } from 'next-intl'
2423
import { useRouter } from 'next/router'
2524
import { useState } from 'react'
@@ -194,17 +193,13 @@ function CatalogObjectItem({
194193
{dropdownItems.length > 0 ? (
195194
<Dropdown
196195
items={dropdownItems}
197-
trigger={
198-
<ForwardRefButton
199-
basic
200-
className={{
201-
root: 'rounded-full p-1.5 text-gray-500 hover:bg-gray-100',
202-
}}
203-
>
204-
<Button.Icon withoutLabel icon={faEllipsisVertical} />
205-
</ForwardRefButton>
206-
}
207-
className={{ viewport: 'z-20', item: 'py-0.5 text-sm' }}
196+
trigger={<FontAwesomeIcon icon={faEllipsisVertical} />}
197+
className={{
198+
viewport: 'z-20',
199+
item: 'py-0.5 text-sm',
200+
trigger:
201+
'h-7 w-7 rounded-full border-none bg-transparent text-gray-500 hover:bg-gray-100',
202+
}}
208203
data={{ cy: `actions-dropdown-${object.name}` }}
209204
/>
210205
) : null}

‎apps/frontend-manage/src/components/catalog/administration/CatalogCollectionListItem.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ import {
1010
ObjectAccess,
1111
ObjectType,
1212
} from '@klicker-uzh/graphql/dist/ops'
13-
import ForwardRefButton from '@klicker-uzh/shared-components/src/ForwardRefButton'
14-
import { Button, Dropdown, toast } from '@uzh-bf/design-system'
13+
import { Dropdown, toast } from '@uzh-bf/design-system'
1514
import { useTranslations } from 'next-intl'
1615
import { useRouter } from 'next/router'
1716
import { useState } from 'react'
@@ -134,17 +133,13 @@ function CatalogCollectionListItem({
134133
{dropdownItems.length > 0 ? (
135134
<Dropdown
136135
items={dropdownItems}
137-
trigger={
138-
<ForwardRefButton
139-
basic
140-
className={{
141-
root: 'rounded-full p-1.5 text-gray-500 hover:bg-gray-100',
142-
}}
143-
>
144-
<Button.Icon withoutLabel icon={faEllipsisVertical} />
145-
</ForwardRefButton>
146-
}
147-
className={{ viewport: 'z-20', item: 'py-0.5 text-sm' }}
136+
trigger={<FontAwesomeIcon icon={faEllipsisVertical} />}
137+
className={{
138+
viewport: 'z-20',
139+
item: 'py-0.5 text-sm',
140+
trigger:
141+
'h-7 w-7 rounded-full border-none bg-transparent text-gray-500 hover:bg-gray-100',
142+
}}
148143
data={{ cy: `catalog-collection-${collection.name}-actions` }}
149144
/>
150145
) : null}

0 commit comments

Comments
 (0)