feat: hassu 990 suunnitelmakortit

deployment/localstack/docker-compose-m1.yml

@@ -0,0 +1,14 @@
+version: "3.8"
+services:
+  localstack:
+    image: localstack/localstack:0.14.1
+    ports:
+      - "4566-4584:4566-4584"
+      - "${PORT_WEB_UI-8080}:${PORT_WEB_UI-8080}"
+    environment:
+      - SERVICES=dynamodb,sts,cloudformation,ssm,s3,iam,kms,events,lambda
+      - DEFAULT_REGION=eu-west-1
+      - DEBUG=1
+      - DATA_DIR=${DATA_DIR- }
+      - PORT_WEB_UI=${PORT_WEB_UI- }
+      - DOCKER_HOST="unix:///var/run/docker.sock"

package.json

@@ -177,6 +177,7 @@
     "lint:tsc": "tsc --project tsconfig.json",
     "lint": "npm-run-all --aggregate-output --parallel lint:*",
     "localstack": "docker-compose -f deployment/localstack/docker-compose.yml up -d && cross-env ENVIRONMENT=localstack TS_NODE_PROJECT=\"./tsconfig.cdk.json\" cdklocal bootstrap --template deployment/localstack/localstack-bootstrap.yml && cross-env HASSU_HOTSWAP=true ENVIRONMENT=localstack TS_NODE_PROJECT=\"./tsconfig.cdk.json\" cdklocal deploy database --require-approval never",
+    "localstack-m1": "docker-compose -f deployment/localstack/docker-compose-m1.yml up -d && cross-env ENVIRONMENT=localstack TS_NODE_PROJECT=\"./tsconfig.cdk.json\" cdklocal bootstrap --template deployment/localstack/localstack-bootstrap.yml && cross-env HASSU_HOTSWAP=true ENVIRONMENT=localstack TS_NODE_PROJECT=\"./tsconfig.cdk.json\" cdklocal deploy database --require-approval never",
     "postlocalstack": "./deployment/bin/setupLocalStack.sh",
     "localstack:stop": "docker-compose -f deployment/localstack/docker-compose.yml down",
     "setupenvironment": "ts-node --project=tsconfig.cdk.json deployment/bin/setupEnvironment.ts",

src/components/kansalaisenEtusivu/Hakutulokset.tsx

@@ -1,42 +1,72 @@
-import { ProjektiHakutulosJulkinen } from "@services/api";
-import { experimental_sx as sx, styled } from "@mui/material";
+import { ProjektiHakutulosJulkinen, Status } from "@services/api";
+import { ProjektinTila, Suunnitelmatyyppi, OtsikkoLinkki, OtsikkoLinkkiMobiili, HakutulosListaItem, HakutulosLista, ProjektinTilaMobiili, Kuvaus } from "./TyylitellytKomponentit";
+import useTranslation from "next-translate/useTranslation";
+import { formatDate } from "../../util/dateUtils";
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 type Props = {
   hakutulos: ProjektiHakutulosJulkinen | undefined;
   ladataan: boolean | undefined | null;
 };
+
+
+
+function getSivuTilanPerusteella(tila: Status | null | undefined) {
+  if (!tila) {
+    return "";
+  }
+  switch (tila) {
+    case Status.ALOITUSKUULUTUS:
+      return "aloituskuulutus";
+    case Status.SUUNNITTELU:
+        return "suunnitteluvaihe";
+    case Status.NAHTAVILLAOLO:
+      return "nahtavillaolo";
+    case Status.HYVAKSYMISMENETTELYSSA:
+      return "hyvaksymismenettelyssa";
+    case Status.HYVAKSYTTY:
+      return "hyvaksymispaatos";
+    default:
+      return "";
+  }
+}
+
 export default function Hakutulokset({ hakutulos, ladataan }: Props) {
+  const theme = useTheme();
+  const desktop = useMediaQuery(theme.breakpoints.up('lg'));
+  const { t } = useTranslation();
+
   if (!hakutulos && ladataan) {
     return <>Ladataan...</>;
   }
 
   return (
     <HakutulosLista className="Hakutulokset">
-      {hakutulos?.tulokset?.map((tulos) => (
-        <HakutulosListaItem key={tulos.oid}>{tulos.oid}</HakutulosListaItem>
-      ))}
+      {hakutulos?.tulokset?.map((tulos) => {
+
+        if (desktop) {
+          return (
+            <HakutulosListaItem key={tulos.oid}>
+              <OtsikkoLinkki href={`suunnitelma/${tulos.oid}/${getSivuTilanPerusteella(tulos.vaihe)}`}>{tulos.nimi}</OtsikkoLinkki>
+              <Suunnitelmatyyppi>{t(`projekti:projekti-tyyppi.${tulos.projektiTyyppi}`)}</Suunnitelmatyyppi>
+              <ProjektinTila>{t(`projekti:projekti-status.${tulos.vaihe}`)}</ProjektinTila>
+              <Kuvaus>{tulos.hankkeenKuvaus}</Kuvaus>
+              {t("projekti:ui-otsikot.paivitetty")}{" "}{formatDate(tulos.paivitetty)}
+            </HakutulosListaItem>
+          );
+        }
+
+        return (
+          <HakutulosListaItem key={tulos.oid}>
+            <OtsikkoLinkkiMobiili href={`suunnitelma/${tulos.oid}/${getSivuTilanPerusteella(tulos.vaihe)}`}>{tulos.nimi}</OtsikkoLinkkiMobiili>
+            <ProjektinTilaMobiili>{t(`projekti:projekti-status.${tulos.vaihe}`)}</ProjektinTilaMobiili>
+            {t("projekti:ui-otsikot.paivitetty")}{" "}{formatDate(tulos.paivitetty)}
+          </HakutulosListaItem>
+        ); 
+      })}
     </HakutulosLista>
   );
 }
 
-const HakutulosLista = styled("ol")(
-  sx({
-    width: "100%",
-    marginLeft: 0,
-    listStyle: "none",
-    borderRight: "1px solid #F7F7F7",
-  })
-);
-
-const HakutulosListaItem = styled("li")(() =>
-  sx({
-    "&:nth-of-type(odd)": {
-      backgroundColor: "#F7F7F7",
-    },
-    "&:nth-of-type(even)": {
-      backgroundColor: "white",
-    },
-    borderBottom: "solid 2px #49c2f1",
-    padding: 7,
-  })
-);
+

src/components/kansalaisenEtusivu/TyylitellytKomponentit.tsx

@@ -0,0 +1,98 @@
+import { experimental_sx as sx, styled } from "@mui/material";
+import Link from "@components/HassuLink";
+
+const Tagi = styled('div')(
+  sx({
+    backgroundColor: "white",
+    color: "#0063AF",
+    border: "1px solid #0063AF",
+    textAlign: "center",
+    display: "inline-block",
+    padding: "5 5 10 10",
+    marginTop: "1em",
+    marginRight: "1em"
+  })
+)
+
+export const Suunnitelmatyyppi = styled(Tagi)(
+  sx({
+    width: "150px"
+  })
+)
+
+export const ProjektinTila = styled(Tagi)(
+  sx({
+    width: "200px"
+  })
+)
+
+export const ProjektinTilaMobiili = styled('div')(
+  sx({
+    fontWeight: "bold",
+    marginTop: "1em",
+    paddingBottom: "1em"
+  })
+)
+
+export const VuorovaikutusTilaisuus = styled(Tagi)(
+  sx({
+    width: "200px"
+  })
+)
+
+export const OtsikkoLinkki = styled(Link)(
+  sx({
+    color: "#0063AF",
+    fontWeight: "bold",
+    fontSize: 24,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    position: "relative",
+    display: "block"
+  })
+)
+
+export const OtsikkoLinkkiMobiili = styled(Link)(
+  sx({
+    color: "#0063AF",
+    fontWeight: "bold",
+    fontSize: 24,
+    position: "relative",
+    display: "block"
+  })
+)
+
+export const HakutulosLista = styled("ol")(
+  sx({
+    width: "100%",
+    marginLeft: 0,
+    listStyle: "none",
+    borderRight: "1px solid #F7F7F7",
+  })
+);
+
+export const HakutulosListaItem = styled("li")(() =>
+  sx({
+    "&:nth-of-type(odd)": {
+      backgroundColor: "#F7F7F7",
+    },
+    "&:nth-of-type(even)": {
+      backgroundColor: "white",
+    },
+    borderBottom: "solid 2px #49c2f1",
+    padding: 7,
+  })
+);
+
+export const Kuvaus = styled("div")(
+  sx({
+    marginTop: "1em",
+    marginBottom: "1em",
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: '-webkit-box',
+    WebkitLineClamp: '2',
+    WebkitBoxOrient: 'vertical',
+  })
+)

src/locales/fi/projekti.json

@@ -77,6 +77,14 @@
     "LAINVOIMA": "Lainvoima",
     "ARKISTOITU": "Arkistoitu"
   },
+  "projekti-status-kansalaiselle": {
+    "ALOITUSKUULUTUS": "Aloituskuulutus",
+    "SUUNNITTELU": "Suunnittelussa",
+    "NAHTAVILLAOLO": "Suunnitelmat nähtävillä",
+    "HYVAKSYTTY": "Suunnitelma hyväksytty",
+    "HYVAKSYMISMENETTELYSSA": "Hyväksymismenettelyssä",
+    "LAINVOIMA": "Lainvoimainen"
+  },
   "ui-kuvatekstit": {
     "eu_aluerahoitus": "EU aluerahoitus"
   },
@@ -92,6 +100,7 @@
     "palautelomake": "Palautelomake"
   },
   "ui-otsikot": {
+    "valtion_liikennevaylien_suunnittelu": "Valtion liikenneväylien suunnittelu",
     "kuulutus_suunnitelman_alkamisesta": "Kuulutus suunnittelun aloittamisesta",
     "kuulutus_suunnitelman_hyvaksymisesta": "Kuulutus suunnitelman hyväksymisestä",
     "kuulutus_suunnitelman_nahtaville_asettamisesta": "Kuulutus suunnitelman nähtäville asettamisesta",

src/locales/sv/projekti.json

@@ -77,6 +77,14 @@
     "LAINVOIMA": "RUOTSIKSI Lainvoima",
     "ARKISTOITU": "RUOTSIKSI Arkistoitu"
   },
+  "projekti-status-kansalaiselle": {
+    "ALOITUSKUULUTUS": "RUOTSIKSI Aloituskuulutus",
+    "SUUNNITTELU": "RUOTSIKSI Suunnittelussa",
+    "NAHTAVILLAOLO": "RUOTSIKSI Suunnitelmat nähtävillä",
+    "HYVAKSYTTY": "RUOTSIKSI Suunnitelma hyväksytty",
+    "HYVAKSYMISMENETTELYSSA": "RUOTSIKSI Hyväksymismenettelyssä",
+    "LAINVOIMA": "RUOTSIKSI Lainvoimainen"
+  },
   "ui-kuvatekstit": {
     "eu_aluerahoitus": "RUOTSIKSI EU aluerahoitus"
   },
@@ -92,6 +100,7 @@
     "palautelomake": "RUOTSIKSI Palautelomake"
   },
   "ui-otsikot": {
+    "valtion_liikennevaylien_suunnittelu": "RUOTSIKSI Valtion liikenneväylien suunnittelu",
     "kuulutus_suunnitelman_alkamisesta": "RUOTSIKSI Kuulutus suunnittelun aloittamisesta",
     "kuulutus_suunnitelman_hyvaksymisesta": "RUOTSIKSI Kuulutus suunnitelman hyväksymisestä",
     "kuulutus_suunnitelman_nahtaville_asettamisesta": "RUOTSIKSI Kuulutus suunnitelman nähtäville asettamisesta",

src/pages/index.tsx

@@ -4,8 +4,7 @@ import useTranslation from "next-translate/useTranslation";
 import Hakulomake from "@components/kansalaisenEtusivu/Hakulomake";
 import Hakutulokset from "@components/kansalaisenEtusivu/Hakutulokset";
 import log from "loglevel";
-import HassuGrid from "@components/HassuGrid";
-import HassuGridItem from "@components/HassuGridItem";
+import { Grid } from "@mui/material";
 import OikeaLaita from "@components/kansalaisenEtusivu/OikeaLaita";
 
 const App = () => {
@@ -41,17 +40,17 @@ const App = () => {
   }, [setLadataan, setHakutulos]);
 
   return (
-    <HassuGrid cols={{ lg: 4 }}>
-      <HassuGridItem colSpan={{ lg: 3 }}>
-        <h2 className="mt-4">{t("common:valtion_liikennevaylien_suunnittelu")}</h2>
+    <Grid container spacing={0}>
+      <Grid className="pr-4" item lg={9} md={12}>
+        <h2 className="mt-4">{t("projekti:ui-otsikot.valtion_liikennevaylien_suunnittelu")}</h2>
         <p>Tekstiä</p>
         <Hakulomake /> {/* TODO/Toteuta: Insertoidaan hakulomakkeelle sen lähtöarvot */}
         <Hakutulokset hakutulos={hakutulos} ladataan={ladataan} />
-      </HassuGridItem>
-      <HassuGridItem>
+      </Grid>
+      <Grid item lg={3} md={12}>
         <OikeaLaita />
-      </HassuGridItem>
-    </HassuGrid>
+      </Grid>
+    </Grid>
   );
 };