fix(concept:changeRequests): show message when empty list

Informasjonsforvaltning · Oct 19, 2023 · 9b99728 · 9b99728
1 parent 23cfdc7
commit 9b99728
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 51 deletions.
diff --git a/apps/concept-catalog/pages/[catalogId]/change-requests/change-requests-page.module.css b/apps/concept-catalog/pages/[catalogId]/change-requests/change-requests-page.module.css
@@ -45,3 +45,9 @@
   padding-top: 10px;
   padding-bottom: 37px;
 }
+
+.emptyListMessage {
+  display: flex;
+  padding: 4em 0em;
+  justify-content: center;
+}
diff --git a/apps/concept-catalog/pages/[catalogId]/change-requests/index.tsx b/apps/concept-catalog/pages/[catalogId]/change-requests/index.tsx
@@ -43,60 +43,66 @@ export const ChangeRequestsPage = ({ organization, changeRequests, conceptsWithC
         >
           {loc.changeRequest.changeRequest}
         </Heading>
-        <div className={styles.listWrapper}>
-          <ul className={styles.list}>
-            {changeRequests.map(({ id, title, catalogId, conceptId, timeForProposal, proposedBy, status }) => (
-              <li
-                key={id}
-                itemID={id}
-                className={styles.listItem}
-              >
-                <div className={styles.listContent}>
-                  <div>
-                    <Link
-                      href={
-                        validOrganizationNumber(catalogId) &&
-                        validUUID(id) &&
-                        changeRequests.find(({ id: changeRequestId }) => changeRequestId === id)
-                          ? `/${catalogId}/change-requests/${id}`
-                          : '#'
-                      }
-                    >
-                      <Heading
-                        level={3}
-                        size='xsmall'
-                        className={styles.heading}
+        {changeRequests.length > 0 ? (
+          <div className={styles.listWrapper}>
+            <ul className={styles.list}>
+              {changeRequests.map(({ id, title, catalogId, conceptId, timeForProposal, proposedBy, status }) => (
+                <li
+                  key={id}
+                  itemID={id}
+                  className={styles.listItem}
+                >
+                  <div className={styles.listContent}>
+                    <div>
+                      <Link
+                        href={
+                          validOrganizationNumber(catalogId) &&
+                          validUUID(id) &&
+                          changeRequests.find(({ id: changeRequestId }) => changeRequestId === id)
+                            ? `/${catalogId}/change-requests/${id}`
+                            : '#'
+                        }
                       >
-                        {title ||
-                          (conceptId && conceptsWithChangeRequest
-                            ? getTranslateText(
-                                conceptsWithChangeRequest?.hits?.find(
-                                  (concept) => concept.originaltBegrep === conceptId,
-                                )?.anbefaltTerm?.navn,
-                              )
-                            : loc.suggestionForNewConcept)}
-                      </Heading>
-                    </Link>
-                    <div className={styles.text}>
-                      <p>{convertTimestampToDateAndTime(timeForProposal)}</p>
-                      <p>
-                        {proposedBy.name
-                          .split(' ')
-                          .map((namePart) => capitalizeFirstLetter(namePart))
-                          .join(' ')}
-                      </p>
+                        <Heading
+                          level={3}
+                          size='xsmall'
+                          className={styles.heading}
+                        >
+                          {title ||
+                            (conceptId && conceptsWithChangeRequest
+                              ? getTranslateText(
+                                  conceptsWithChangeRequest?.hits?.find(
+                                    (concept) => concept.originaltBegrep === conceptId,
+                                  )?.anbefaltTerm?.navn,
+                                )
+                              : loc.suggestionForNewConcept)}
+                        </Heading>
+                      </Link>
+                      <div className={styles.text}>
+                        <p>{convertTimestampToDateAndTime(timeForProposal)}</p>
+                        <p>
+                          {proposedBy.name
+                            .split(' ')
+                            .map((namePart) => capitalizeFirstLetter(namePart))
+                            .join(' ')}
+                        </p>
+                      </div>
                     </div>
+                    {status && (
+                      <div className={styles.status}>
+                        <Tag>{status}</Tag>
+                      </div>
+                    )}
                   </div>
-                  {status && (
-                    <div className={styles.status}>
-                      <Tag>{status}</Tag>
-                    </div>
-                  )}
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <div className={styles.emptyListMessage}>
+            <p>Her var det ingen endringsforslag</p>
+          </div>
+        )}
       </div>
     </>
   );