Klikkbare feil (#17)
* ✨ Feilkort som ikke er expansioncards * 🚧 laget overlay med stort hvitt panel ved klikk av panel * 🐛 Kan avslutte popup-overlay-vinduet ved å hindre DOM bubbling https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli * ♻️ Delt opp feilkort og fullvisningskort i to komponenter ved bruk av useContext() * 📝 La til dokumentasjon for feilkortkomponentene * ⚰️ Forenklet cardscontainer komponentet ved å fjerne interface * 🐛 La tilbake interface, da fjerning av dette brekket applikasjon * ✨ Popup er byttet ut mot AkselModal * 🐛 Fikset scrolling, ved å tillate Modal i å kjøre cleanup code
This commit is contained in:
Markus A. R. Johansen
GitHub
parent
dee55dbeff
commit
755effe4da
3 changed files with 108 additions and 31 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import FeilCard from "./FeilCard";
|
||||
import { FeilKort } from "./FeilCard";
|
||||
import { Feilmelding } from "../interface.ts";
|
||||
|
||||
interface ICardsContainer {
|
||||
|
|
@ -10,19 +10,19 @@ interface ICardsContainer {
|
|||
* @returns grid med feilmeldinger
|
||||
*/
|
||||
const CardsContainer = (props: ICardsContainer) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{props.feilmeldinger.map((feilMelding) => (
|
||||
<FeilCard
|
||||
key={props.feilmeldinger.indexOf(feilMelding)}
|
||||
tittel={feilMelding.tittel}
|
||||
beskrivelse={feilMelding.beskrivelse}
|
||||
dato={new Date()}
|
||||
/>
|
||||
))}
|
||||
<FeilKort
|
||||
key={props.feilmeldinger.indexOf(feilMelding)}
|
||||
tittel={feilMelding.tittel}
|
||||
beskrivelse={feilMelding.beskrivelse}
|
||||
dato={new Date()}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,79 @@
|
|||
import "@navikt/ds-css";
|
||||
import { ExpansionCard, Tag } from "@navikt/ds-react";
|
||||
import { Heading, Modal, Tag } from "@navikt/ds-react";
|
||||
import { IFeilmelding } from "../interface";
|
||||
import FeilModal from "./FeilModal";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
/**
|
||||
* En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
|
||||
* @param tittel
|
||||
* @param beskrivelse
|
||||
* @param dato
|
||||
* @returns JSX komponent som beskriver innholdet i feilmeldinger.
|
||||
*/
|
||||
interface IFeilKort extends IFeilmelding {
|
||||
key: number
|
||||
}
|
||||
export const FeilKort = (props: IFeilKort) => {
|
||||
const [visModal, setVisModal] = useState<boolean>(false)
|
||||
|
||||
useEffect(() => {
|
||||
Modal.setAppElement(document.getElementById('root'));
|
||||
}, []);
|
||||
|
||||
return(
|
||||
<>
|
||||
<div
|
||||
key={props.key}
|
||||
className="
|
||||
bg-bg-default border border-border-default p-7 rounded-lg
|
||||
hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
|
||||
active:bg-surface-active"
|
||||
onClick={() => setVisModal(true)}
|
||||
>
|
||||
<FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={props.dato}/>
|
||||
</div>
|
||||
<FeilModal open={visModal} setOpen={setVisModal} >
|
||||
<FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={new Date()} />
|
||||
<div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
|
||||
{/* TODO: HER KOMMER CONTENT */}
|
||||
</FeilModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* FeilkortHeader er komponent som beskriver ikke-sensitiv informasjon om feilmeldingen og vises for alle på forsiden.
|
||||
* FeilkortHeaderen er en del av FeilKort-komponenten og FullvisningsKort-komponenten.
|
||||
* Midlertidig implementerer komponentet @requires IFeilmelding for props, men dette må endres når IFeilmelding utvides i fremtiden for støtte av flere typer feilmeldinger.
|
||||
* @param tittel
|
||||
* @param beskrivelse
|
||||
* @param haster
|
||||
* @param dato
|
||||
* @returns JSX komponent som skal vise nødvendig informasjon for å forstå en feil.
|
||||
*/
|
||||
export const FeilkortHeader = (props: IFeilmelding) => {
|
||||
return(
|
||||
<div className="flex justify-between flex-col">
|
||||
<div>
|
||||
<Heading size="medium">{props.tittel}</Heading>
|
||||
<p className="text-text-subtle mb-4">{props.dato.toDateString()}</p>
|
||||
<p>{props.beskrivelse}</p>
|
||||
</div>
|
||||
<TagBar haster={false}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
interface TagBarInterface {
|
||||
haster: boolean
|
||||
}
|
||||
|
||||
//typen på status er veldig wack heheheh, må fjerne any etterhvert men String fungerer ikke
|
||||
/**
|
||||
* Komponentet er en bar (vanrett linje) som inneholder to statusflagg: "arbeidsstatus" og "Haster".
|
||||
* Komponentet er en del av FeilKortHeader
|
||||
* @param haster
|
||||
*/
|
||||
const TagBar = (props: TagBarInterface) => {
|
||||
return (
|
||||
<div className="flex gap-8 mt-4">
|
||||
|
|
@ -16,21 +83,5 @@ const TagBar = (props: TagBarInterface) => {
|
|||
)
|
||||
}
|
||||
|
||||
const FeilCard = (props: IFeilmelding) => {
|
||||
return (
|
||||
<ExpansionCard aria-label="tekst">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
{props.beskrivelse}
|
||||
</ExpansionCard.Description>
|
||||
<TagBar haster={true}/>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
Hællæ
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default FeilCard;
|
||||
|
||||
|
|
|
|||
26
frontend/src/components/FeilModal.tsx
Normal file
26
frontend/src/components/FeilModal.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { Modal } from "@navikt/ds-react"
|
||||
import { Dispatch, SetStateAction } from "react"
|
||||
|
||||
|
||||
interface modalInterface {
|
||||
open: boolean
|
||||
setOpen: Dispatch<SetStateAction<boolean>>
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const FeilModal = (props: modalInterface) => {
|
||||
return(
|
||||
<Modal
|
||||
className="w-3/5"
|
||||
open={props.open}
|
||||
aria-label={" modal"}
|
||||
onClose={() => props.setOpen(false)}
|
||||
aria-labelledby="modal-heading"
|
||||
>
|
||||
<Modal.Content>
|
||||
{props.children}
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default FeilModal;
|
||||
Reference in a new issue