OPHJOD-1176: Fetch koski jakolinkki data

Opetushallitus · Jan 15, 2025 · e15137d · e15137d
1 parent a71fe7d
commit e15137d
Show file tree

Hide file tree

Showing 6 changed files with 499 additions and 42 deletions.
diff --git a/src/api/schema.d.ts b/src/api/schema.d.ts
@@ -486,6 +486,23 @@ export interface paths {
     patch?: never;
     trace?: never;
   };
+  '/api/integraatiot/koski': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Try to import data from koski link */
+    get: operations['integraatioGetKoskiData'];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
   '/api/ammatit': {
     parameters: {
       query?: never;
@@ -1974,6 +1991,28 @@ export interface operations {
       };
     };
   };
+  integraatioGetKoskiData: {
+    parameters: {
+      query: {
+        jakolinkki: string;
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': components['schemas']['KoulutusDto'][];
+        };
+      };
+    };
+  };
   ammattiFind: {
     parameters: {
       query?: {

diff --git a/src/components/ExperienceTable/ExperienceTable.tsx b/src/components/ExperienceTable/ExperienceTable.tsx
@@ -12,6 +12,13 @@ interface ExperienceTableProps {
   onRowClick?: (row: ExperienceTableRowData) => void;
   onNestedRowClick?: (row: ExperienceTableRowData) => void;
   onAddNestedRowClick?: (row: ExperienceTableRowData) => void;
+  hideOsaamiset?: boolean;
+  rowActionElement?: React.ReactNode;
+  useConfirm?: boolean;
+  confirmTitle?: string;
+  confirmRowDescription?: string;
+  confirmSubRowDescription?: string;
+  actionLabel?: string;
 }
 
 export const ExperienceTable = ({
@@ -23,6 +30,13 @@ export const ExperienceTable = ({
   onRowClick,
   onNestedRowClick,
   onAddNestedRowClick,
+  hideOsaamiset,
+  rowActionElement,
+  useConfirm,
+  confirmTitle,
+  confirmRowDescription,
+  confirmSubRowDescription,
+  actionLabel,
 }: ExperienceTableProps) => {
   const { t } = useTranslation();
   const { sm } = useMediaQueries();
@@ -47,9 +61,11 @@ export const ExperienceTable = ({
                   <th scope="col" className="pr-7 pb-3">
                     {t('ended')}
                   </th>
-                  <th scope="col" className={`pb-3 ${onNestedRowClick ? 'pr-7' : 'pr-5'}`.trim()}>
-                    {t('competences')}
-                  </th>
+                  {!hideOsaamiset && (
+                    <th scope="col" className={`pb-3 ${onNestedRowClick ? 'pr-7' : 'pr-5'}`.trim()}>
+                      {t('competences')}
+                    </th>
+                  )}
                 </>
               )}
             </tr>
@@ -62,6 +78,12 @@ export const ExperienceTable = ({
                   row={row}
                   onRowClick={onRowClick}
                   className="bg-white border-spacing-x-2"
+                  hideOsaamiset={hideOsaamiset}
+                  rowActionElement={rowActionElement}
+                  useConfirm={useConfirm}
+                  confirmTitle={confirmTitle}
+                  confirmDescription={confirmRowDescription}
+                  actionLabel={actionLabel}
                 />
                 {row.subrows?.map((subrow, i) => (
                   <ExperienceTableRow
@@ -71,6 +93,12 @@ export const ExperienceTable = ({
                     onRowClick={onNestedRowClick}
                     className={i % 2 !== 0 ? 'bg-white bg-opacity-60' : 'bg-bg-gray'}
                     nested
+                    hideOsaamiset={hideOsaamiset}
+                    rowActionElement={rowActionElement}
+                    useConfirm={useConfirm}
+                    confirmTitle={confirmTitle}
+                    confirmDescription={confirmSubRowDescription}
+                    actionLabel={actionLabel}
                   />
                 ))}
                 {onAddNestedRowClick && addNewNestedLabel && (
@@ -99,7 +127,17 @@ export const ExperienceTable = ({
               </tr>
             )}
             {uncategorizedRows.map((row) => (
-              <ExperienceTableRow key={row.key} row={row} onRowClick={onRowClick} />
+              <ExperienceTableRow
+                key={row.key}
+                row={row}
+                onRowClick={onRowClick}
+                hideOsaamiset={hideOsaamiset}
+                rowActionElement={rowActionElement}
+                useConfirm={useConfirm}
+                confirmTitle={confirmTitle}
+                confirmDescription={confirmRowDescription}
+                actionLabel={actionLabel}
+              />
             ))}
           </tbody>
         </table>

diff --git a/src/components/ExperienceTable/ExperienceTableRow.tsx b/src/components/ExperienceTable/ExperienceTableRow.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { formatDate, getLocalizedText, sortByProperty } from '@/utils';
-import { Tag, useMediaQueries } from '@jod/design-system';
+import { ConfirmDialog, Tag, useMediaQueries } from '@jod/design-system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdEdit, MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
@@ -26,23 +26,41 @@ interface ExperienceTableRowProps {
   last?: boolean;
   onRowClick?: (row: ExperienceTableRowData) => void;
   className?: string;
+  hideOsaamiset?: boolean;
+  rowActionElement?: React.ReactNode;
+  useConfirm?: boolean;
+  confirmTitle?: string;
+  confirmDescription?: string;
+  actionLabel?: string;
 }
 
 const Title = ({ nested, row }: { nested?: boolean; row: ExperienceTableRowData }) => {
   const { i18n } = useTranslation();
 
   return nested ? (
     <p className="pl-5 pr-7 pt-2 text-body-sm font-bold sm:font-normal sm:text-body-md sm:py-2 hyphens-auto">
-      {row.nimi[i18n.language]}
+      {row?.nimi[i18n.language]}
     </p>
   ) : (
     <p className="pl-5 pr-7 pt-2 text-heading-4 sm:text-heading-3 sm:pt-1 sm:pb-[3px] hyphens-auto">
-      {row.nimi[i18n.language]}
+      {row?.nimi[i18n.language]}
     </p>
   );
 };
 
-export const ExperienceTableRow = ({ row, nested, last = false, className, onRowClick }: ExperienceTableRowProps) => {
+export const ExperienceTableRow = ({
+  row,
+  nested,
+  last = false,
+  className,
+  onRowClick,
+  hideOsaamiset,
+  rowActionElement,
+  useConfirm,
+  confirmTitle,
+  confirmDescription,
+  actionLabel,
+}: ExperienceTableRowProps) => {
   const {
     t,
     i18n: { language },
@@ -59,6 +77,43 @@ export const ExperienceTableRow = ({ row, nested, last = false, className, onRow
     [row.osaamiset, language],
   );
 
+  const rowAction = (
+    onRowClick: (row: ExperienceTableRowData) => void,
+    row: ExperienceTableRowData,
+    useConfirm: boolean | undefined,
+    rowActionElement: React.ReactNode | undefined,
+    confirmTitle?: string,
+    confirmDescription?: string,
+    actionLabel?: string,
+  ) => {
+    return (
+      <ConfirmDialog
+        title={confirmTitle || ''}
+        onConfirm={() => onRowClick(row)}
+        confirmText={t('delete')}
+        cancelText={t('cancel')}
+        variant="destructive"
+        description={confirmDescription || ''}
+      >
+        {(showDialog: () => void) => (
+          <button
+            aria-label={actionLabel || t('edit')}
+            onClick={() => {
+              if (useConfirm) {
+                showDialog();
+              } else {
+                onRowClick(row);
+              }
+            }}
+            className="flex size-7 items-center justify-center"
+          >
+            {rowActionElement || <MdEdit size={24} className="fill-[#006DB3]" />}
+          </button>
+        )}
+      </ConfirmDialog>
+    );
+  };
+
   return nested ? (
     <>
       <tr key={row.key} className={className}>
@@ -70,7 +125,7 @@ export const ExperienceTableRow = ({ row, nested, last = false, className, onRow
             </div>
           )}
         </td>
-        {!sm && (
+        {!hideOsaamiset && !sm && (
           <td className="text-nowrap text-body-sm">
             {onRowClick && row.osaamiset.length > 0 ? (
               <button
@@ -90,31 +145,27 @@ export const ExperienceTableRow = ({ row, nested, last = false, className, onRow
           <>
             <td className="text-body-md pr-7">{!row.hideRowDetails && formatDate(row.alkuPvm)}</td>
             <td className="text-body-md pr-7">{!row.hideRowDetails && row.loppuPvm && formatDate(row.loppuPvm)}</td>
-            <td className={`text-body-md ${onRowClick ? 'pr-7' : 'pr-5'}`.trim()}>
-              {onRowClick && row.osaamiset.length > 0 ? (
-                <button
-                  aria-label={t(isOpen ? 'close' : 'open')}
-                  onClick={() => setIsOpen(!isOpen)}
-                  className="flex gap-x-2 items-center text-nowrap"
-                >
-                  {isOpen ? <MdKeyboardArrowUp size={24} /> : <MdKeyboardArrowDown size={24} />}
-                  {osaamisetCountTotal}
-                </button>
-              ) : (
-                <span className={`text-nowrap ${onRowClick ? 'pl-[28px]' : ''}`.trim()}>{osaamisetCountTotal}</span>
-              )}
-            </td>
+            {!hideOsaamiset && (
+              <td className={`text-body-md ${onRowClick ? 'pr-7' : 'pr-5'}`.trim()}>
+                {onRowClick && row.osaamiset.length > 0 ? (
+                  <button
+                    aria-label={t(isOpen ? 'close' : 'open')}
+                    onClick={() => setIsOpen(!isOpen)}
+                    className="flex gap-x-2 items-center text-nowrap"
+                  >
+                    {isOpen ? <MdKeyboardArrowUp size={24} /> : <MdKeyboardArrowDown size={24} />}
+                    {osaamisetCountTotal}
+                  </button>
+                ) : (
+                  <span className={`text-nowrap ${onRowClick ? 'pl-[28px]' : ''}`.trim()}>{osaamisetCountTotal}</span>
+                )}
+              </td>
+            )}
           </>
         )}
         {onRowClick && (
           <td>
-            <button
-              aria-label={t('edit')}
-              onClick={() => onRowClick(row)}
-              className="flex size-7 items-center justify-center"
-            >
-              <MdEdit size={24} className="fill-[#006DB3]" />
-            </button>
+            {rowAction(onRowClick, row, useConfirm, rowActionElement, confirmTitle, confirmDescription, actionLabel)}
           </td>
         )}
       </tr>
@@ -148,7 +199,7 @@ export const ExperienceTableRow = ({ row, nested, last = false, className, onRow
           </div>
         )}
       </td>
-      {!sm && (
+      {!hideOsaamiset && !sm && (
         <td>
           <span className="text-body-sm text-nowrap pl-[28px] pr-7">{osaamisetCountTotal}</span>
         </td>
@@ -159,20 +210,16 @@ export const ExperienceTableRow = ({ row, nested, last = false, className, onRow
             {formatDate(row.alkuPvm)}
           </td>
           {row.loppuPvm && <td className="text-body-md pr-7">{formatDate(row.loppuPvm)}</td>}
-          <td className={`text-body-md text-nowrap ${onRowClick ? 'pr-7 pl-[28px]' : 'pr-5'.trim()}`}>
-            {osaamisetCountTotal}
-          </td>
+          {!hideOsaamiset && (
+            <td className={`text-body-md text-nowrap ${onRowClick ? 'pr-7 pl-[28px]' : 'pr-5'.trim()}`}>
+              {osaamisetCountTotal}
+            </td>
+          )}
         </>
       )}
       {onRowClick && (
         <td>
-          <button
-            aria-label={t('edit')}
-            onClick={() => onRowClick(row)}
-            className="flex size-7 items-center justify-center"
-          >
-            <MdEdit size={24} className="fill-[#006DB3]" />
-          </button>
+          {rowAction(onRowClick, row, useConfirm, rowActionElement, confirmTitle, confirmDescription, actionLabel)}
         </td>
       )}
     </tr>

diff --git a/src/i18n/fi/translation.json b/src/i18n/fi/translation.json
@@ -68,6 +68,20 @@
     "identify-competences": "Tunnista osaamisia",
     "name-of-degree-or-education": "Tutkinnon tai koulutuksen nimi"
   },
+  "education-import": {
+    "share-link": "Opintopolun jakolinkki",
+    "invalid-share-link": "Tarkasta opintopolun jakolinkki",
+    "data-header": "Opintopolusta löytyneet koulutukset",
+    "data-info": "Voit poistaa listasta ne koulutukset, joita et halua tuoda omaan osaamisprofiiliisi.",
+    "data-loading": "Ladataan tietoja opintopolusta...",
+    "data-load-failed": "Tietojen lataaminen epäonnistui",
+    "data-load-retry": "Yritä uudelleen",
+    "data-hint": "Käy luomassa Opintopolku-palvelussa jakolinkki ja liitä se tälle sivulle.",
+    "confirm-delete-title": "En halua lisätä tätä tietoa omaan osaamisprofiilini",
+    "confirm-delete-oppilaitos": "Oletko varma, että et halua lisätä tätä oppilaitosta ja siellä suoritettuja kolutuksia omaan osaamisprofiiliisi?",
+    "confirm-delete-education": "Oletko varma, että et halua lisätä tätä koulutusta/ tutkintoa omaan osaamisprofiiliisi?",
+    "education-or-degree": "Oppilaitos / tutkinto"
+  },
   "education-opportunities": "Koulutusmahdollisuudet",
   "education-opportunity": {
     "specific-professional-competences": {