Merge pull request #385 from OpenCatalogi/feature/OP-113/extra-inform…

…atie REFACTOR ComponentDetail template to show actual data
OpenCatalogi · Nov 7, 2023 · 9fbb1dc · 9fbb1dc
2 parents e3f20d7 + d75e552
commit 9fbb1dc
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 46 deletions.
diff --git a/pwa/src/apiService/resources/components.ts b/pwa/src/apiService/resources/components.ts
@@ -11,7 +11,7 @@ export default class Component {
   }
 
   public getOne = async (id: string): Promise<any> => {
-    const { data } = await Send(this._instance, "GET", `/components/${id}`);
+    const { data } = await Send(this._instance, "GET", `/components/${id}?extend[]=all`);
 
     return data;
   };

diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -73,6 +73,9 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
       });
     });
 
+  const gemma = _getComponent.data?.embedded?.nl?.embedded?.gemma;
+  const legal = _getComponent.data?.embedded?.legal;
+
   if (_getComponent.isError) return <>Something went wrong...</>;
 
   const organisation = _getComponent?.data?.embedded?.url?.embedded?.organisation;
@@ -515,52 +518,84 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
             {...{ sizeKb }}
           />
 
-          <div>
-            <h2 className={styles.title}>Meer informatie</h2>
-
-            <Table>
-              <TableBody>
-                <TableRow>
-                  <TableCell className={styles.title}>Gemma</TableCell>
-                  <TableCell className={styles.description}>Op dit moment is er geen gemma data beschikbaar.</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell className={styles.title}>{t("Products")}</TableCell>
-                  <TableCell>
-                    {_getComponent.data.embedded?.nl?.upl &&
-                      _getComponent.data.embedded?.nl?.upl.map((product: string, idx: number) => (
-                        <span key={idx}>
-                          <Link
-                            target="_new"
-                            href="http://standaarden.overheid.nl/owms/terms/AangifteVertrekBuitenland"
-                          >
-                            <Icon>
-                              <IconExternalLink />
-                            </Icon>
-                            {product},{" "}
-                          </Link>
-                        </span>
-                      ))}
-                    {(!_getComponent.data.embedded?.nl?.upl || !_getComponent.data.embedded?.nl?.upl.length) && (
-                      <span className={styles.description}>Op dit moment zijn er geen producten beschikbaar.</span>
+          {gemma?.applicatiefunctie ||
+            gemma?.bedrijfsfuncties ||
+            gemma?.bedrijfsservices ||
+            gemma?.model ||
+            gemma?.referentiecomponenten?.length > 0 ||
+            legal?.license ||
+            (_getComponent.data.embedded?.nl?.upl?.length > 0 && (
+              <section>
+                <h2 className={styles.title}>Meer informatie</h2>
+
+                <Table>
+                  <TableBody>
+                    {gemma?.applicatiefunctie && (
+                      <TableRow>
+                        <TableCell className={styles.title}>Applicatiefunctie</TableCell>
+                        <TableCell className={styles.description}>{gemma.applicatiefunctie}</TableCell>
+                      </TableRow>
                     )}
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell className={styles.title}>Standaarden</TableCell>
-                  <TableCell className={styles.description}>
-                    Op dit moment zijn er geen standaarden beschikbaar.
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell className={styles.title}>Wet en regelgeving</TableCell>
-                  <TableCell className={styles.description}>
-                    Op dit moment zijn er geen wetten en regelgevingen beschikbaar.
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
+
+                    {gemma?.bedrijfsfuncties && (
+                      <TableRow>
+                        <TableCell className={styles.title}>Bedrijfsfuncties</TableCell>
+                        <TableCell className={styles.description}>{gemma.bedrijfsfuncties.join(", ")}</TableCell>
+                      </TableRow>
+                    )}
+
+                    {gemma?.bedrijfsservices && (
+                      <TableRow>
+                        <TableCell className={styles.title}>Bedrijfsservices</TableCell>
+                        <TableCell className={styles.description}>{gemma.bedrijfsservices.join(", ")}</TableCell>
+                      </TableRow>
+                    )}
+
+                    {gemma?.model && (
+                      <TableRow>
+                        <TableCell className={styles.title}>Model</TableCell>
+                        <TableCell className={styles.description}>{gemma.model}</TableCell>
+                      </TableRow>
+                    )}
+
+                    {gemma?.referentieComponenten?.length > 0 && (
+                      <TableRow>
+                        <TableCell className={styles.title}>Referentie componenten</TableCell>
+                        <TableCell className={styles.description}>{gemma.referentieComponenten.join(", ")}</TableCell>
+                      </TableRow>
+                    )}
+
+                    {legal?.license && (
+                      <TableRow>
+                        <TableCell className={styles.title}>Licentie</TableCell>
+                        <TableCell className={styles.description}>{legal.license}</TableCell>
+                      </TableRow>
+                    )}
+
+                    {_getComponent.data.embedded?.nl?.upl?.length > 0 && (
+                      <TableRow>
+                        <TableCell className={styles.title}>{t("Products")}</TableCell>
+                        <TableCell>
+                          {_getComponent.data.embedded?.nl?.upl.map((product: string, idx: number) => (
+                            <span key={idx}>
+                              <Link
+                                target="_new"
+                                href="http://standaarden.overheid.nl/owms/terms/AangifteVertrekBuitenland"
+                              >
+                                <Icon>
+                                  <IconExternalLink />
+                                </Icon>
+                                {product},{" "}
+                              </Link>
+                            </span>
+                          ))}
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </TableBody>
+                </Table>
+              </section>
+            ))}
         </>
       )}
       {_getComponent.isLoading && <Skeleton height="200px" />}