Skip to content

Commit

Permalink
Overviewpage is now quite close to the draft in issue #2 (#16)
Browse files Browse the repository at this point in the history 
* set new language keys and annotate OverviewPageContent.tsx

* add CollectionBar and ActionBar to OverviewPageContent

* remove punctuation mark from string in no_nb.json

* added/extended subtitle and additionalText as props of CollectionBar as child ActionBar has such props

* update OverviewPageContent.tsx with edit buttons subtitle and additional text
  • Loading branch information
@Torgeir333
Torgeir333 authored Sep 21, 2023
1 parent 9882945 commit 8eed446
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 86 deletions.
33 changes: 16 additions & 17 deletions frontend/src/components/CollectionBar/CollectionBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import {
ChevronRightDoubleCircleFillIcon,
FilesFillIcon,
ChevronRightDoubleIcon,
} from '@navikt/aksel-icons';
} from '@navikt/aksel-icons'; // Fix-me: should be non-filled icon
import { ReactComponent as Edit } from '@/assets/Edit.svg';

import { Button, Paragraph } from '@digdir/design-system-react';
import cn from 'classnames';
import { useNavigate } from 'react-router-dom';
Expand All @@ -13,7 +15,8 @@ import { ActionBar, type ActionBarProps } from '../ActionBar';

import classes from './CollectionBar.module.css';

export interface CollectionBarProps extends Pick<ActionBarProps, 'color' | 'title'> {
// added/extended subtitle and additionalText as props of CollectionBar as child ActionBar has such props
export interface CollectionBarProps extends Pick<ActionBarProps, 'color' | 'title'| 'subtitle' | 'additionalText' > {
/** The list of selected objects */
collection: React.ReactNode[];

Expand All @@ -27,6 +30,8 @@ export interface CollectionBarProps extends Pick<ActionBarProps, 'color' | 'titl
export const CollectionBar = ({
color = 'neutral',
title,
subtitle,
additionalText,
collection,
compact = false,
proceedToPath,
Expand All @@ -43,38 +48,31 @@ export const CollectionBar = ({
return (
<>
<ActionBar
title={title}
subtitle={
compact && (
<span role='status'>{collection.length.toString() + ' ' + t('common.added')}</span>
)
}
title={ title }
subtitle={ subtitle }
additionalText={
!compact && (
<Paragraph
as={'span'}
role='status'
size='small'
className={cn(classes.counterText, classes[color])}
>
<FilesFillIcon
height={20}
width={20}
/>
{collection.length.toString() + ' ' + t('common.added')}
>
{additionalText}
</Paragraph>
)
}
actions={

!compact && (
<Button
variant='quiet'
size='small'
icon={<ChevronRightDoubleCircleFillIcon />}
icon={<Edit />}
color={color === 'dark' ? 'inverted' : undefined}
onClick={proceedClick}
>
{t('common.proceed')}
{t('authentication_dummy.auth_edit_button_systembruker')}
</Button>
)
}
Expand All @@ -83,12 +81,13 @@ export const CollectionBar = ({
>
<div className={cn(classes.content, { [classes.compact]: compact })}>{collection}</div>
</ActionBar>

{compact && (
<Button
className={classes.compactProceedButton}
variant='quiet'
size='small'
icon={<ChevronRightDoubleIcon />}
icon={<ChevronRightDoubleCircleFillIcon />}
iconPlacement='right'
onClick={proceedClick}
>
Expand Down
148 changes: 86 additions & 62 deletions frontend/src/features/overviewpage/components/OverviewPageContent/OverviewPageContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,30 @@ import {
import { resetDelegableApis } from '@/rtk/features/apiDelegation/delegableApi/delegableApiSlice';
import { useMediaQuery } from '@/resources/hooks';
import { ApiDelegationPath } from '@/routes/paths';
import { ErrorPanel } from '@/components';

import { LayoutState } from '../LayoutState';

import { OrgDelegationActionBar } from './OrgDelegationActionBar';
import classes from './OverviewPageContent.module.css';

import { ErrorPanel, CollectionBar, ActionBar } from '@/components';
import { MinusCircleIcon } from '@navikt/aksel-icons';
import { SingleRightPath } from '@/routes/paths'; // temporary, from ChooseServicePage



export interface OverviewPageContentInterface {
layout: LayoutState;
}

// I think layout is set to .Offered, as initial/default of (arrow) function component,
// there is only one version of OverviewPagecontent.tsx,
// but when parent OverviewPage component
// creates child <OverviewPageContent> layout is passed in as a prop
// <OverviewPageContent layout={LayoutState.Offered} />
// while in OverviewPage for received
// <OverviewPageContent layout={LayoutState.Received} />

export const OverviewPageContent = ({
layout = LayoutState.Offered,
}: OverviewPageContentInterface) => {
Expand Down Expand Up @@ -65,10 +78,13 @@ export const OverviewPageContent = ({
dispatch(resetDelegationRequests());
}, [overviewOrgs, error]);

// layout is set to .Offered above: .Received not really used in this page I believe
// odd duplication of OverviewPages with dual purpose... but OK
// where is layout used? Here it only set String texts...
switch (layout) {
case LayoutState.Offered:
fetchData = async () => await dispatch(fetchOverviewOrgsOffered());
overviewText = t('api_delegation.api_overview_text');
overviewText = t('authentication_dummy.auth_overview_text_administrere'); // h2 below, not in Small/mobile view
accessesHeader = t('api_delegation.you_have_delegated_accesses');
noDelegationsInfoText = t('api_delegation.no_offered_delegations');
break;
Expand Down Expand Up @@ -170,9 +186,40 @@ export const OverviewPageContent = ({
));
};

// From ChooseServicePage.tsx: used to show CollectionBar and selectedResourcesActionBars
const delegableChosenServices = useAppSelector((state) =>
state.singleRightsSlice.servicesWithStatus.filter((s) => s.status !== 'NotDelegable'),
);

// From ChooseServicePage.tsx: used to show CollectionBar with <ActionBar> below
const selectedResourcesActionBars = delegableChosenServices.map((resource, index) => (
<ActionBar
key={index}
title={resource.service?.title}
subtitle={resource.service?.resourceOwnerName}
size='small'
color='success'
actions={
<Button
variant='quiet'
size={isSm ? 'medium' : 'small'}
onClick={() => {
}}
icon={isSm && <MinusCircleIcon title={t('common.remove')} />}
>
{!isSm && t('common.remove')}
</Button>
}
></ActionBar>
));



return (
<div className={classes.overviewActionBarContainer}>

{!isSm && <h2 className={classes.pageContentText}>{overviewText}</h2>}

{layout === LayoutState.Offered && (
<div className={classes.delegateNewButton}>
<Button
Expand All @@ -182,70 +229,47 @@ export const OverviewPageContent = ({
fullWidth={isSm}
size='medium'
>
{t('api_delegation.delegate_new_org')}
{t('authentication_dummy.auth_new_system_user_opprett')}
</Button>

</div>
)}
<Panel
title={t('api_delegation.card_title')}
forceMobileLayout={isSm}
showIcon={!isSm}
>
{t('api_delegation.api_panel_content')}{' '}
<a
className={classes.link}
href='https://github.com/Altinn/altinn-authentication-frontend/issues/2'
target='_blank'
rel='noreferrer'
>
{'(se Runes issue #2) XXXX'}
</a>
</Panel>
<div className={classes.explanatoryContainer}>
{overviewOrgs.length > 0 && (
<>
{isSm ? (
<h3 className={classes.apiSubheading}>{accessesHeader}</h3>
) : (
<h2 className={classes.apiSubheading}>{accessesHeader}</h2>
)}
<div className={classes.editButton}>
{!isEditable ? (
<Button
variant='quiet'
icon={<Edit />}
onClick={handleSetIsEditable}
size='small'
>
{t('api_delegation.edit_accesses')}
</Button>
) : (
<Button
variant='quiet'
icon={<Error />}
onClick={handleSetIsEditable}
size='small'
>
{t('common.cancel')}
</Button>
)}
</div>
</>
)}
<div>
<br></br><br></br><br></br>
</div>
<>{activeDelegations()}</>
{isEditable && (
<div className={classes.saveSection}>
<Button
disabled={saveDisabled}
onClick={handleSave}
color='success'
fullWidth={isSm}
>
{t('api_delegation.save')}
</Button>
</div>
)}

{!isSm && <h2 className={classes.pageContentText}>
{'Du har tidligere opprettet disse systembrukerne'}
</h2>}


<CollectionBar
title='System lakselus rapportering'
subtitle='AQUA POWER'
color={selectedResourcesActionBars.length > 0 ? 'success' : 'neutral'}
collection={selectedResourcesActionBars}
compact={isSm}
proceedToPath={
'/' + SingleRightPath.DelegateSingleRights + '/' + SingleRightPath.ChooseRights
}
/>

<div>
<br></br>
</div>

<CollectionBar
title='Økonomisystem'
subtitle='VISMA ACCOUNTING'
additionalText='Delegert til Visma AS'
color={selectedResourcesActionBars.length > 0 ? 'success' : 'neutral'}
collection={selectedResourcesActionBars}
compact={isSm}
proceedToPath={
'/' + SingleRightPath.DelegateSingleRights + '/' + SingleRightPath.ChooseRights
}
/>

</div>
);
};
13 changes: 6 additions & 7 deletions frontend/src/localizations/no_nb.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,12 @@
"change_rights": "Endre rettigheter"
},
"authentication_dummy": {
"auth_title": "Systembrukere",
"auth_overview_text": "Her kan du administrere dine systembrukere.",
"auth_new_system_user": "Opprett ny systembruker",
"auth_card_title": "Du har tidligere opprettet disse systembrukerne",
"auth_api_panel_content": "Her skulle vært en liste over systembrukere"


"auth_title_systembrukere": "Systembrukere",
"auth_overview_text_administrere": "Her kan du administrere dine systembrukere",
"auth_new_system_user_opprett": "Opprett ny systembruker",
"auth_card_title_tidligere_opprettet": "Du har tidligere opprettet disse systembrukerne",
"auth_api_panel_content": "Her skulle vært en liste over systembrukere",
"auth_edit_button_systembruker": "Rediger systembruker"
},

"api_delegation": {
Expand Down

0 comments on commit 8eed446

Please sign in to comment.