-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FKS-990-frontend-legg-til-mulighet-for-a-forvalte-application-category (
#150) * Add simple settings page and form for application category * Change url, add menuitem and fix basepath error * Get all application categories in resours admin form * Rename url to NO and export paths * Give error if name is duplicate and simplify typed response from fetch * Fix names of constants * Edit text * Edit text 2
- Loading branch information
Showing
15 changed files
with
691 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
108 changes: 108 additions & 0 deletions
108
app/components/resource/settings/ApplicationCategoryTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
import {Box, Button, Dropdown, HStack, Link, SortState, Table, VStack} from "@navikt/ds-react"; | ||
import {MenuElipsisHorizontalCircleIcon, PlusCircleIcon} from "@navikt/aksel-icons"; | ||
import React, {useMemo, useState} from "react"; | ||
import {IKodeverkApplicationCategory} from "~/data/types"; | ||
import {Outlet, useNavigate} from "@remix-run/react"; | ||
import { | ||
getApplicationCategoryDeleteUrl, | ||
getApplicationCategoryEditUrl, | ||
SETTINGS_APPLICATION_CATEGORY_CREATE | ||
} from "~/data/constants"; | ||
|
||
type ApplicationCategoryTableProps = { | ||
applicationCategories: IKodeverkApplicationCategory[] | ||
basePath?: string | ||
} | ||
|
||
export const ApplicationCategoryTable = ({applicationCategories, basePath}: ApplicationCategoryTableProps) => { | ||
const navigate = useNavigate() | ||
const [sort, setSort] = useState<SortState | undefined>(); | ||
|
||
const handleSortByName = () => { | ||
setSort( | ||
sort?.direction === "descending" ? undefined : { | ||
orderBy: "name", | ||
direction: sort?.direction === "ascending" ? "descending" : "ascending" | ||
} | ||
); | ||
}; | ||
|
||
const sortedApplicationCategories = useMemo(() => { | ||
return applicationCategories.sort((a, b) => { | ||
if (sort?.direction === "ascending") { | ||
return a.name.localeCompare(b.name); | ||
} | ||
if (sort?.direction === "descending") { | ||
return b.name.localeCompare(a.name); | ||
} | ||
return 0; | ||
}) | ||
}, [applicationCategories, sort]); | ||
|
||
return ( | ||
<VStack> | ||
<Outlet/> | ||
<Table | ||
sort={sort} | ||
onSortChange={handleSortByName} | ||
> | ||
<Table.Header> | ||
<Table.Row> | ||
<Table.ColumnHeader scope="col" sortable sortKey="name">Navn</Table.ColumnHeader> | ||
<Table.ColumnHeader scope="col">Beskrivelse</Table.ColumnHeader> | ||
<Table.ColumnHeader scope="col" align="right"> | ||
Handlinger | ||
</Table.ColumnHeader> | ||
</Table.Row> | ||
</Table.Header> | ||
|
||
<Table.Body> | ||
{sortedApplicationCategories.map(({id, name, description}) => ( | ||
<Table.Row key={id}> | ||
<Table.HeaderCell scope="row" className="nowrap">{name}</Table.HeaderCell> | ||
<Table.DataCell textSize={"small"}>{description}</Table.DataCell> | ||
<Table.DataCell align="right"> | ||
<Dropdown> | ||
<HStack justify="end"> | ||
<Button | ||
as={Dropdown.Toggle} | ||
icon={<MenuElipsisHorizontalCircleIcon title="Meny"/>} | ||
size="small" | ||
variant="tertiary" | ||
/> | ||
</HStack> | ||
<Dropdown.Menu> | ||
<Dropdown.Menu.GroupedList> | ||
<Dropdown.Menu.GroupedList.Item | ||
onClick={() => navigate(getApplicationCategoryEditUrl(id))} | ||
> | ||
Rediger | ||
</Dropdown.Menu.GroupedList.Item> | ||
<Dropdown.Menu.GroupedList.Item | ||
onClick={() => navigate(getApplicationCategoryDeleteUrl(id))} | ||
|
||
> | ||
Slett | ||
</Dropdown.Menu.GroupedList.Item> | ||
</Dropdown.Menu.GroupedList> | ||
</Dropdown.Menu> | ||
</Dropdown> | ||
</Table.DataCell> | ||
</Table.Row> | ||
))} | ||
</Table.Body> | ||
</Table> | ||
<Box paddingBlock={"4"}> | ||
<Button | ||
as={Link} | ||
underline={false} | ||
variant={"tertiary"} | ||
icon={<PlusCircleIcon aria-hidden/>} | ||
href={`${basePath}${SETTINGS_APPLICATION_CATEGORY_CREATE}`} | ||
> | ||
Legg til ny kategori | ||
</Button> | ||
</Box> | ||
</VStack> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import {BodyShort, Box, Heading, VStack} from "@navikt/ds-react"; | ||
|
||
type CustomLinkPanelProps = { | ||
title: string; | ||
description?: string; | ||
link: string; | ||
} | ||
export const CustomLink = ({title, description, link}: CustomLinkPanelProps) => { | ||
return ( | ||
<Box | ||
as={"a"} | ||
padding="4" | ||
// background="surface-action-subtle" | ||
borderRadius="large" | ||
href={link} | ||
className={"custom-link"} | ||
|
||
> | ||
<VStack> | ||
<Heading size="small"> | ||
{title} | ||
</Heading> | ||
{description && <BodyShort size="small">{description}</BodyShort>} | ||
</VStack> | ||
</Box> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import {HGrid} from "@navikt/ds-react"; | ||
import {ReactNode} from "react"; | ||
|
||
interface CustomLinkPanelProps { | ||
children: ReactNode; | ||
} | ||
|
||
export const CustomLinkPanel = ({children}: CustomLinkPanelProps) => | ||
<HGrid gap="6" columns={{xs: 1, md: 2}}> | ||
{children} | ||
</HGrid> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
export const SETTINGS = "/innstillinger" | ||
|
||
export const SETTINGS_APPLICATION_CATEGORY = "/innstillinger/applikasjonskategori" | ||
export const SETTINGS_APPLICATION_CATEGORY_CREATE = "/innstillinger/applikasjonskategori/rediger" | ||
export const getApplicationCategoryEditUrl = (id: number): string => `/innstillinger/applikasjonskategori/${id}/rediger`; | ||
export const getApplicationCategoryDeleteUrl = (id: number): string => `/innstillinger/applikasjonskategori/${id}/slett`; | ||
|
||
export const SETTINGS_USER_TYPES = "/innstillinger/user-types" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
import {BASE_PATH, RESOURCE_API_URL} from "../../environment"; | ||
import logger from "~/logging/logger"; | ||
import {IKodeverkApplicationCategory} from "~/data/types"; | ||
|
||
export const fetchApplicationCategories = async (request: Request): Promise<IKodeverkApplicationCategory[]> => { | ||
const response = await fetch(`${RESOURCE_API_URL}${BASE_PATH}/api/resources/kodeverk/applikasjonskategori/v1`, { | ||
headers: request.headers | ||
}); | ||
|
||
if (response.ok) { | ||
return response.json(); | ||
} | ||
|
||
if (response.status === 403) { | ||
throw new Error("Det ser ut som om du mangler rettigheter i løsningen"); | ||
} | ||
if (response.status === 401) { | ||
throw new Error("Påloggingen din er utløpt"); | ||
} | ||
throw new Error("En feil oppstod under henting av applikasjonskategorier"); | ||
} | ||
|
||
export const fetchApplicationCategory = async (request: Request, id: string): Promise<IKodeverkApplicationCategory> => { | ||
const response = await fetch(`${RESOURCE_API_URL}${BASE_PATH}/api/resources/kodeverk/applikasjonskategori/v1/${id}`, { | ||
headers: request.headers | ||
}); | ||
|
||
if (response.ok) { | ||
return response.json(); | ||
} | ||
|
||
if (response.status === 403) { | ||
throw new Error("Det ser ut som om du mangler rettigheter i løsningen") | ||
} | ||
if (response.status === 401) { | ||
throw new Error("Påloggingen din er utløpt") | ||
} | ||
throw new Error("En feil oppstod under henting av applikasjonskategorien") | ||
} | ||
|
||
export const createApplicationCategory = async ( | ||
token: string | null, | ||
name: string, | ||
description: string | ||
) => { | ||
|
||
const url = `${RESOURCE_API_URL}${BASE_PATH}/api/resources/kodeverk/applikasjonskategori/v1` | ||
|
||
logger.info("POST New kodeverk - app. category to url:", url, " with body ", JSON.stringify({ | ||
name: name, | ||
description: description, | ||
})); | ||
|
||
return await fetch(url, { | ||
headers: { | ||
Authorization: token ?? "", | ||
'content-type': 'application/json' | ||
}, | ||
method: 'POST', | ||
body: JSON.stringify({ | ||
name: name, | ||
description: description, | ||
}) | ||
|
||
}) | ||
} | ||
|
||
export const editApplicationCategory = async ( | ||
token: string | null, | ||
id: string, | ||
name: string, | ||
description: string | ||
) => { | ||
|
||
const url = `${RESOURCE_API_URL}${BASE_PATH}/api/resources/kodeverk/applikasjonskategori/v1` | ||
|
||
logger.info("PUT kodeverk - app. category to url:", url, " with body ", JSON.stringify({ | ||
id: id, | ||
name: name, | ||
description: description, | ||
})); | ||
|
||
return await fetch(url, { | ||
headers: { | ||
Authorization: token ?? "", | ||
'content-type': 'application/json' | ||
}, | ||
method: 'PUT', | ||
body: JSON.stringify({ | ||
id: id, | ||
name: name, | ||
description: description, | ||
}) | ||
|
||
}) | ||
} | ||
|
||
export const deleteApplicationCategory = async ( | ||
token: string | null, | ||
id: string | ||
) => { | ||
|
||
const url = `${RESOURCE_API_URL}${BASE_PATH}/api/resources/kodeverk/applikasjonskategori/v1/${id}` | ||
|
||
logger.info("DELETE kodeverk - app. category to url:", url); | ||
|
||
return await fetch(url, { | ||
headers: { | ||
Authorization: token ?? "", | ||
'content-type': 'application/json' | ||
}, | ||
method: 'DELETE' | ||
|
||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import {Heading, VStack} from "@navikt/ds-react"; | ||
import {CustomLink} from "~/components/resource/settings/CustomLink"; | ||
import {CustomLinkPanel} from "~/components/resource/settings/CustomLinkPanel"; | ||
import {BASE_PATH} from "../../environment"; | ||
import {json} from "@remix-run/node"; | ||
import {useLoaderData} from "@remix-run/react"; | ||
import {SETTINGS_APPLICATION_CATEGORY, SETTINGS_USER_TYPES} from "~/data/constants"; | ||
|
||
export async function loader() { | ||
return json({ | ||
basePath: BASE_PATH === "/" ? "" : BASE_PATH | ||
}) | ||
} | ||
|
||
|
||
export default function ResourcesSettings() { | ||
const loaderData = useLoaderData<typeof loader>() | ||
const basePath = loaderData.basePath | ||
|
||
return ( | ||
<VStack className={"content"} gap="4"> | ||
<Heading className={"heading"} level="1" size="xlarge">Ressursinnstillinger</Heading> | ||
|
||
<CustomLinkPanel> | ||
<CustomLink | ||
title={"Brukertyper"} | ||
description={"Endre navn på brukertyper som kan tildeles ressursen."} | ||
link={`${basePath}${SETTINGS_USER_TYPES}`} | ||
/> | ||
<CustomLink | ||
title={"Applikasjonskategori"} | ||
description={"Innstillinger for applikasjonskategorier som kan brukes for å gruppere og beskrive ressurser."} | ||
link={`${basePath}${SETTINGS_APPLICATION_CATEGORY}`} | ||
/> | ||
</CustomLinkPanel> | ||
</VStack> | ||
); | ||
} |
Oops, something went wrong.