From 95d685f3b072ac888ff0bc5aa41527f89fa48d87 Mon Sep 17 00:00:00 2001
From: Hege Aalvik <hegeaal@gmail.com>
Date: Fri, 29 Sep 2023 15:08:07 +0200
Subject: [PATCH] fix: css fix

---
 .../codes-editor/codes-editor.module.css      |   9 +
 .../components/codes-editor/index.tsx         | 193 +++++++++---------
 2 files changed, 104 insertions(+), 98 deletions(-)

diff --git a/apps/catalog-admin/components/codes-editor/codes-editor.module.css b/apps/catalog-admin/components/codes-editor/codes-editor.module.css
index e56c28ca8..b82747e83 100644
--- a/apps/catalog-admin/components/codes-editor/codes-editor.module.css
+++ b/apps/catalog-admin/components/codes-editor/codes-editor.module.css
@@ -68,6 +68,11 @@
   cursor: pointer;
 }
 
+.buttonRow {
+  display: flex;
+  gap: 20px;
+}
+
 .toggleButton {
   background: none;
   border: none;
@@ -84,6 +89,10 @@
   border-top-right-radius: 7px;
 }
 
+.codeListEditor {
+  padding-bottom: 20px;
+}
+
 .headerText {
   padding-top: 20px;
   width: 100px;
diff --git a/apps/catalog-admin/components/codes-editor/index.tsx b/apps/catalog-admin/components/codes-editor/index.tsx
index 162370ded..0e374633d 100644
--- a/apps/catalog-admin/components/codes-editor/index.tsx
+++ b/apps/catalog-admin/components/codes-editor/index.tsx
@@ -76,11 +76,6 @@ export const CodesEditor = ({ codeList: dbCodeList }: Props) => {
   };
 
   const updateAndAddCode = (code: Code, codeList?: CodeList) => {
-    if (code.name.nb === '') {
-      window.alert(localization.alert.codeMustHaveName);
-      return;
-    }
-
     const codeListId = codeList?.id || '0';
     const existingCodes = updatedCodes[codeListId] ? [...updatedCodes[codeListId]] : [];
     const index = existingCodes.findIndex((c) => c.id === code.id);
@@ -152,7 +147,7 @@ export const CodesEditor = ({ codeList: dbCodeList }: Props) => {
   }
 
   function FolderIcon({ node }: { node: NodeApi<TreeNode> }) {
-    if (node.isLeaf) return <span style={{ width: '20px' }}></span>;
+    if (node.isLeaf) return <span></span>;
     return (
       <span>
         <button
@@ -213,105 +208,107 @@ export const CodesEditor = ({ codeList: dbCodeList }: Props) => {
 
   return (
     <>
-      <InfoCard className={styles.codeTree}>
-        <InfoCard.Item>
-          <div>
-            <Tree<TreeNode>
-              data={convertCodeListToTreeNodes(codes)}
-              idAccessor={(node) => node.value}
-              selectionFollowsFocus={false}
-              padding={15}
-              rowHeight={30}
-              height={441}
-              width={453}
-              onActivate={handleOnClick}
-              disableEdit
-            >
-              {Node}
-            </Tree>
-            <FdsButton
-              onClick={() => {
-                createNewCode();
-                setIsEditViewOpen(true);
-              }}
-              variant='outline'
-            >
-              {localization.catalogAdmin.createCode}
-            </FdsButton>
-          </div>
-        </InfoCard.Item>
-      </InfoCard>
-      {isEditViewOpen && (
-        <InfoCard>
-          <div className={styles.header}>
-            <p className={styles.headerText}>{localization.catalogAdmin.editCode}</p>
-            <XMarkIcon
-              fontSize='1.5rem'
-              className={styles.xmark}
-              title={localization.catalogAdmin.closeEdit}
-              onClick={() => setIsEditViewOpen(false)}
-            />
-          </div>
-          <div className={styles.codeId}>ID: {selectedCode?.id}</div>
-          <InfoCard.Item className='editorSpacing'>
-            <div className='editorSpacing'>
-              <Textfield
-                label={localization.catalogAdmin.codeName.nb}
-                value={selectedCode?.name?.nb}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  updateCodeName('nb', event.target.value);
-                }}
-              />
-            </div>
-            <div className='editorSpacing'>
-              <Textfield
-                label={localization.catalogAdmin.codeName.nn}
-                value={selectedCode?.name?.nn}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  updateCodeName('nn', event.target.value);
-                }}
-              />
-            </div>
-            <div className='editorSpacing'>
-              <Textfield
-                label={localization.catalogAdmin.codeName.en}
-                value={selectedCode?.name?.en}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  updateCodeName('en', event.target.value);
-                }}
-              />
-            </div>
-            <div className='editorSpacing'>
-              <Select
-                label={localization.catalogAdmin.parentCode}
-                options={codes ? availableParentCodes(codes, selectedCode?.id) : []}
-                value={`${selectedCode?.parentID}`}
-                onChange={updateCodeParent}
-              />
-            </div>
-
-            <div className='editorButtons'>
-              <Button
-                onClick={() => {
-                  updateAndAddCode(selectedCode, currentCodeList);
-                  setIsEditViewOpen(false);
-                }}
+      <div className={styles.editorContainer}>
+        <InfoCard className={styles.codeTree}>
+          <InfoCard.Item>
+            <div>
+              <Tree<TreeNode>
+                data={convertCodeListToTreeNodes(codes)}
+                idAccessor={(node) => node.value}
+                selectionFollowsFocus={false}
+                padding={15}
+                rowHeight={30}
+                height={441}
+                width={453}
+                onActivate={handleOnClick}
+                disableEdit
               >
-                {localization.ok}
-              </Button>
-              <Button
-                color='danger'
+                {Node}
+              </Tree>
+              <FdsButton
                 onClick={() => {
-                  removeCode(selectedCode.id, currentCodeList);
-                  setIsEditViewOpen(false);
+                  createNewCode();
+                  setIsEditViewOpen(true);
                 }}
+                variant='outline'
               >
-                {localization.button.removeFromCodeList}
-              </Button>
+                {localization.catalogAdmin.createCode}
+              </FdsButton>
             </div>
           </InfoCard.Item>
         </InfoCard>
-      )}
+        {isEditViewOpen && (
+          <InfoCard>
+            <div className={styles.header}>
+              <p className={styles.headerText}>{localization.catalogAdmin.editCode}</p>
+              <XMarkIcon
+                fontSize='1.5rem'
+                className={styles.xmark}
+                title={localization.catalogAdmin.closeEdit}
+                onClick={() => setIsEditViewOpen(false)}
+              />
+            </div>
+            <div className={styles.codeId}>ID: {selectedCode?.id}</div>
+            <InfoCard.Item className={styles.codeListEditor}>
+              <div className={styles.codeListEditor}>
+                <Textfield
+                  label={localization.catalogAdmin.codeName.nb}
+                  value={selectedCode?.name?.nb}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    updateCodeName('nb', event.target.value);
+                  }}
+                />
+              </div>
+              <div className={styles.codeListEditor}>
+                <Textfield
+                  label={localization.catalogAdmin.codeName.nn}
+                  value={selectedCode?.name?.nn}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    updateCodeName('nn', event.target.value);
+                  }}
+                />
+              </div>
+              <div className={styles.codeListEditor}>
+                <Textfield
+                  label={localization.catalogAdmin.codeName.en}
+                  value={selectedCode?.name?.en}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    updateCodeName('en', event.target.value);
+                  }}
+                />
+              </div>
+              <div className={styles.codeListEditor}>
+                <Select
+                  label={localization.catalogAdmin.parentCode}
+                  options={codes ? availableParentCodes(codes, selectedCode?.id) : []}
+                  value={`${selectedCode?.parentID}`}
+                  onChange={updateCodeParent}
+                />
+              </div>
+
+              <div className={styles.buttonRow}>
+                <Button
+                  onClick={() => {
+                    updateAndAddCode(selectedCode, currentCodeList);
+                    setIsEditViewOpen(false);
+                  }}
+                >
+                  {localization.ok}
+                </Button>
+                <Button
+                  color='danger'
+                  onClick={() => {
+                    removeCode(selectedCode.id, currentCodeList);
+                    setIsEditViewOpen(false);
+                  }}
+                >
+                  {localization.button.removeFromCodeList}
+                </Button>
+              </div>
+            </InfoCard.Item>
+          </InfoCard>
+        )}
+      </div>
     </>
   );
 };