Skip to content

Commit

Permalink
Add dynamic ideaPhaseBar + restructuring of components
Browse files Browse the repository at this point in the history
  • Loading branch information
Remi749 committed Nov 12, 2024
1 parent 0a463fe commit 9afb67f
Show file tree
Hide file tree
Showing 14 changed files with 318 additions and 216 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ export function useIdeaField(props: IIdeaFieldProps) {
const renderValueForField = () => {
let icon = TagMultipleFilled

if (props.model.internalName === 'GtIdeaRecommendation') {
if (
props.model.internalName === 'GtIdeaRecommendation' ||
props.model.internalName === 'GtIdeaDecision'
) {
props.model.type = 'TaxonomyFieldType'
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,33 @@
margin: 0;
overflow: hidden;
display: flex;
height: 100%;
height: 100vh;

.content {
flex: 1;
padding: 16px;
padding: 32px;
gap: 16px;
display: grid;
justify-content: flex-start;
align-items: flex-start;
height: fit-content;

.ideaHeader {
display: flex;
flex-direction: column;
gap: 16px;

.ideaPhases {
.toolbar {
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;

.hamburger {
position: absolute;
left: 32px;
}
}

.ideaTitle {
Expand All @@ -39,6 +47,13 @@
.ideaField {
margin: 0;
}

.status {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,14 @@ import styles from './IdeaModule.module.scss'
import { IdeaModuleContext } from './context'
import { IIdeaModuleProps } from './types'
import { useIdeaModule } from './useIdeaModule'
import {
Divider,
FluentProvider,
IdPrefixProvider,
Spinner,
Tab,
TabList,
Tooltip
} from '@fluentui/react-components'
import { customLightTheme, getFluentIcon, setUrlHash, UserMessage } from 'pp365-shared-library'
import {
Hamburger,
NavCategory,
NavCategoryItem,
NavDrawer,
NavDrawerBody,
NavDrawerHeader,
NavItem,
NavSectionHeader,
NavSubItem,
NavSubItemGroup,
NavDivider,
AppItemStatic
} from '@fluentui/react-nav-preview'
import {
Board20Filled,
Board20Regular,
NotePin20Filled,
NotePin20Regular,
Lightbulb20Filled,
Lightbulb20Regular,
bundleIcon
} from '@fluentui/react-icons'
import { Divider, FluentProvider, IdPrefixProvider, Spinner } from '@fluentui/react-components'
import { customLightTheme, UserMessage } from 'pp365-shared-library'
import { IdeaField } from './IdeaField'

const Dashboard = bundleIcon(Board20Filled, Board20Regular)
const Lightbulb = bundleIcon(Lightbulb20Filled, Lightbulb20Regular)
const JobPostings = bundleIcon(NotePin20Filled, NotePin20Regular)
import { IdeaPhaseBar } from './IdeaPhaseBar'
import { IdeaNav } from './IdeaNav'

export const IdeaModule: FC<IIdeaModuleProps> = (props) => {
const { state, setState, getSelectedIdea, fluentProviderId } = useIdeaModule(props)
const [isOpen, setIsOpen] = React.useState(true)

const renderHamburgerWithToolTip = () => {
return (
<Tooltip content='Navigation' relationship='label'>
<Hamburger onClick={() => setIsOpen(!isOpen)} />
</Tooltip>
)
}
const { state, setState, isOpen, renderHamburger, fluentProviderId } = useIdeaModule(props)

return (
<IdeaModuleContext.Provider value={{ props, state, setState }}>
Expand All @@ -62,73 +20,7 @@ export const IdeaModule: FC<IIdeaModuleProps> = (props) => {
<Spinner label='Laster inn idémodulen' size='extra-large' />
) : (
<div className={styles.ideaModule}>
<NavDrawer
defaultSelectedValue={state.selectedIdea?.item.Id.toString()}
// selectedCategoryValue={state.selectedIdea?.item.processing ? 'behandlingIdeer' : 'registreringIdeer'}
openCategories={['registreringIdeer', 'behandlingIdeer']}
open={isOpen}
type='inline'
size='small'
>
<NavDrawerHeader>
<Tooltip content='Navigation' relationship='label'>
{renderHamburgerWithToolTip()}
</Tooltip>
</NavDrawerHeader>
<NavDrawerBody>
<AppItemStatic icon={getFluentIcon('Lightbulb')}>Idémodul</AppItemStatic>
<NavItem href='#' icon={<Dashboard />} value='total'>
Totaloversikt
</NavItem>
<NavSectionHeader>Registrering</NavSectionHeader>
<NavItem href='#' icon={<Dashboard />} value='registrering'>
Oversikt
</NavItem>
<NavCategory value='registreringIdeer'>
<NavCategoryItem icon={<Lightbulb />}>Mine idéer</NavCategoryItem>
<NavSubItemGroup>
{state.ideas.data.items
.filter((idea) => !idea.processing)
.map((idea) => (
<NavSubItem
key={idea.Id.toString()}
value={idea.Id.toString()}
onClick={() => {
setUrlHash({ ideaId: idea.Id.toString() })
getSelectedIdea()
}}
>
{idea?.Title}
</NavSubItem>
))}
</NavSubItemGroup>
</NavCategory>
<NavDivider />
<NavSectionHeader>Behandling</NavSectionHeader>
<NavItem href='#' icon={<Dashboard />} value='behandling'>
Oversikt
</NavItem>
<NavCategory value='behandlingIdeer'>
<NavCategoryItem icon={<JobPostings />}>Mine idéer</NavCategoryItem>
<NavSubItemGroup>
{state.ideas.data.items
.filter((idea) => idea.processing)
.map((idea) => (
<NavSubItem
key={idea.Id.toString()}
value={idea.Id.toString()}
onClick={() => {
setUrlHash({ ideaId: idea.Id.toString() })
getSelectedIdea()
}}
>
{idea?.Title}
</NavSubItem>
))}
</NavSubItemGroup>
</NavCategory>
</NavDrawerBody>
</NavDrawer>
<IdeaNav />
<div className={styles.content}>
{state.error && (
<UserMessage
Expand All @@ -140,71 +32,10 @@ export const IdeaModule: FC<IIdeaModuleProps> = (props) => {
{state.selectedIdea ? (
<>
<div className={styles.ideaHeader}>
<TabList className={styles.ideaPhases} defaultSelectedValue='tab3'>
<Tab
icon={getFluentIcon('Lightbulb')}
value='tab1'
disabled
style={{ cursor: 'default' }}
>
Registrering av idé
</Tab>
<Tab
icon={getFluentIcon('ChevronRight')}
value={null}
disabled
style={{ cursor: 'default' }}
/>
<Tab
icon={getFluentIcon('CheckmarkCircle')}
value='tab2'
disabled
style={{ cursor: 'default' }}
>
Godkjent for behandling
</Tab>
<Tab
icon={getFluentIcon('ChevronRight')}
value={null}
disabled
style={{ cursor: 'default' }}
/>
<Tab
icon={getFluentIcon('Edit')}
value='tab3'
style={{ cursor: 'default' }}
>
Behandling av idé
</Tab>
<Tab
icon={getFluentIcon('ChevronRight')}
value={null}
disabled
style={{ cursor: 'default' }}
/>
<Tab
icon={getFluentIcon('CheckmarkCircle')}
value='tab4'
disabled
style={{ cursor: 'default' }}
>
Idé godkjent
</Tab>
<Tab
icon={getFluentIcon('ChevronRight')}
value={null}
disabled
style={{ cursor: 'default' }}
/>
<Tab
icon={getFluentIcon('BoxToolbox')}
value='tab5'
disabled
style={{ cursor: 'default' }}
>
Bestill prosjekt
</Tab>
</TabList>
<div className={styles.toolbar}>
<div className={styles.hamburger}>{!isOpen && renderHamburger()}</div>
<IdeaPhaseBar />
</div>
<h1 className={styles.ideaTitle}>{state.selectedIdea.item.Title}</h1>
</div>
<div className={styles.idea}>
Expand All @@ -222,7 +53,6 @@ export const IdeaModule: FC<IIdeaModuleProps> = (props) => {
) : (
<Spinner label='Laster inn idé' size='medium' />
)}
{!isOpen && renderHamburgerWithToolTip()}
</div>
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React, { FC } from 'react'
import {
NavCategory,
NavCategoryItem,
NavDrawer,
NavDrawerBody,
NavDrawerHeader,
NavItem,
NavSectionHeader,
NavSubItem,
NavSubItemGroup,
NavDivider,
AppItemStatic
} from '@fluentui/react-nav-preview'
import {
Board20Filled,
Board20Regular,
NotePin20Filled,
NotePin20Regular,
Lightbulb20Filled,
Lightbulb20Regular,
bundleIcon
} from '@fluentui/react-icons'
import { useIdeaModuleContext } from '../context'
import { Tooltip } from '@fluentui/react-components'
import { getFluentIcon, setUrlHash } from 'pp365-shared-library'
import { useIdeaModule } from '../useIdeaModule'

const Dashboard = bundleIcon(Board20Filled, Board20Regular)
const Lightbulb = bundleIcon(Lightbulb20Filled, Lightbulb20Regular)
const JobPostings = bundleIcon(NotePin20Filled, NotePin20Regular)

export const IdeaNav: FC = () => {
const context = useIdeaModuleContext()
const { getSelectedIdea, isOpen, renderHamburger } = useIdeaModule()

return (
<NavDrawer
defaultSelectedValue={context.state.selectedIdea?.item.Id.toString()}
// selectedCategoryValue={state.selectedIdea?.item.processing ? 'behandlingIdeer' : 'registreringIdeer'}
openCategories={['registreringIdeer', 'behandlingIdeer']}
open={isOpen}
type='inline'
size='small'
>
<NavDrawerHeader>
<Tooltip content='Navigation' relationship='label'>
{renderHamburger()}
</Tooltip>
</NavDrawerHeader>
<NavDrawerBody>
<AppItemStatic icon={getFluentIcon('Lightbulb')}>Idémodul</AppItemStatic>
<NavItem href='#' icon={<Dashboard />} value='total'>
Totaloversikt
</NavItem>
<NavSectionHeader>Registrering</NavSectionHeader>
<NavItem href='#' icon={<Dashboard />} value='registrering'>
Oversikt
</NavItem>
<NavCategory value='registreringIdeer'>
<NavCategoryItem icon={<Lightbulb />}>Mine idéer</NavCategoryItem>
<NavSubItemGroup>
{context.state.ideas.data.items
.filter((idea) => !idea.processing)
.map((idea) => (
<NavSubItem
key={idea.Id.toString()}
value={idea.Id.toString()}
onClick={() => {
setUrlHash({ ideaId: idea.Id.toString() })
getSelectedIdea()
}}
>
{idea?.Title}
</NavSubItem>
))}
</NavSubItemGroup>
</NavCategory>
<NavDivider />
<NavSectionHeader>Behandling</NavSectionHeader>
<NavItem href='#' icon={<Dashboard />} value='behandling'>
Oversikt
</NavItem>
<NavCategory value='behandlingIdeer'>
<NavCategoryItem icon={<JobPostings />}>Mine idéer</NavCategoryItem>
<NavSubItemGroup>
{context.state.ideas.data.items
.filter((idea) => idea.processing)
.map((idea) => (
<NavSubItem
key={idea.Id.toString()}
value={idea.Id.toString()}
onClick={() => {
setUrlHash({ ideaId: idea.Id.toString() })
getSelectedIdea()
}}
>
{idea?.Title}
</NavSubItem>
))}
</NavSubItemGroup>
</NavCategory>
</NavDrawerBody>
</NavDrawer>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './IdeaNav'
Loading

0 comments on commit 9afb67f

Please sign in to comment.