VKT(Frontend): Foundations for PublicExaminerListing

frontend/packages/vkt/src/components/publicExaminerListing/PublicExaminerListing.tsx

@@ -0,0 +1,78 @@
+import { Paper, TableCell, TableHead, TableRow } from '@mui/material';
+import { useState } from 'react';
+import { CustomTable, H2, Text } from 'shared/components';
+import { useWindowProperties } from 'shared/hooks';
+
+import { LanguageFilter } from 'components/common/LanguageFilter';
+import { ExamLanguage } from 'enums/app';
+import { PublicExaminer } from 'interfaces/publicExaminer';
+
+const PublicExaminerListingHeader = () => {
+  const { isPhone } = useWindowProperties();
+
+  return (
+    <TableHead className="heading-text">
+      {!isPhone && (
+        <TableRow>
+          <TableCell>Tutkinnon vastaanottaja</TableCell>
+          <TableCell>Kieli</TableCell>
+          <TableCell>Paikkakunta</TableCell>
+          <TableCell>Tutkintopäivät</TableCell>
+          <TableCell>Toiminnot</TableCell>
+        </TableRow>
+      )}
+    </TableHead>
+  );
+};
+
+const mockExaminerData: Array<PublicExaminer> = [];
+
+const getRowDetails = ({
+  name,
+  language,
+  municipality,
+  examDates,
+}: PublicExaminer) => {
+  // TODO Rendering for mobile users
+  return (
+    <TableRow>
+      <TableCell>
+        <Text>{name}</Text>
+      </TableCell>
+      <TableCell>
+        <Text>{language}</Text>
+      </TableCell>
+      <TableCell>
+        <Text>{municipality}</Text>
+      </TableCell>
+      <TableCell>
+        <Text>{examDates.length > 0 ? 'dipdap' : 'Ei määritelty'}</Text>
+      </TableCell>
+      <TableCell>dsadad</TableCell>
+    </TableRow>
+  );
+};
+
+export const PublicExaminerListing = () => {
+  const [languageFilter, setLanguageFilter] = useState(ExamLanguage.ALL);
+
+  return (
+    <Paper elevation={3} className="public-examiner-listing">
+      <div className="columns">
+        <div className="grow">
+          <H2>Ota yhteyttä tutkinnon vastaanottajiin</H2>
+        </div>
+      </div>
+      <LanguageFilter
+        value={languageFilter}
+        onChange={(e) => setLanguageFilter(e.target.value as ExamLanguage)}
+      />
+      <CustomTable
+        className="table-layout-auto"
+        data={mockExaminerData}
+        getRowDetails={getRowDetails}
+        header={<PublicExaminerListingHeader />}
+      />
+    </Paper>
+  );
+};

frontend/packages/vkt/src/interfaces/publicExaminer.ts

@@ -0,0 +1,11 @@
+import { Dayjs } from "dayjs";
+import { WithId } from "shared/interfaces";
+
+import { ExamLanguage } from "enums/app";
+
+export interface PublicExaminer extends WithId {
+  name: string;
+  language: ExamLanguage;
+  municipality: Array<string>;
+  examDates: Array<Dayjs>;
+}

frontend/packages/vkt/src/pages/goodAndSatisfactoryLevel/PublicGoodAndSatisfactoryLevelLandingPage.tsx

@@ -1,7 +1,8 @@
 import { Box, Grid } from '@mui/material';
 import { FC } from 'react';
-import { H1, HeaderSeparator } from 'shared/components';
+import { H1, HeaderSeparator, Text } from 'shared/components';
 
+import { PublicExaminerListing } from 'components/publicExaminerListing/PublicExaminerListing';
 import { usePublicTranslation } from 'configs/i18n';
 
 export const PublicGoodAndSatisfactoryLevelLandingPage: FC = () => {
@@ -20,6 +21,14 @@ export const PublicGoodAndSatisfactoryLevelLandingPage: FC = () => {
         <Grid item className="public-homepage__grid-container__item-header">
           <H1 data-testid="public-homepage__title-heading">{t('title')}</H1>
           <HeaderSeparator />
+          <Text>
+            Jotain infotekstiä hyvän ja tyydyttävän taidon tutkinnoista. <br />
+            Mahdollisesti lyhyet ohjeet yhteydenottoon liittyen. <br />
+            Kenties linkki OPH:n sivuille.
+          </Text>
+        </Grid>
+        <Grid item className="public-homepage__grid-container__result-box">
+          <PublicExaminerListing />
         </Grid>
       </Grid>
     </Box>

frontend/packages/vkt/src/styles/components/publicExaminerListing/_public-examiner-listing.scss

@@ -0,0 +1,3 @@
+.public-examiner-listing {
+  padding: 3rem;
+}

frontend/packages/vkt/src/styles/styles.scss

@@ -17,6 +17,7 @@
 @import 'components/layouts/footer';
 @import 'components/layouts/session-header';
 @import 'components/publicEnrollment/public-enrollment';
+@import 'components/publicExaminerListing/public-examiner-listing';
 
 // Pages
 @import 'pages/accessibility-statement-page';