fix: Missing Architectural Element in table. Architectural Element mu…

…ltiselect. Small styling changes. (#294)
equinor · Jun 10, 2024 · c44c92b · c44c92b
1 parent 1b386c7
commit c44c92b
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 13 deletions.
diff --git a/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx b/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx
@@ -34,7 +34,7 @@ export const GdeSelect = ({
   );
 
   const ArchitecturalElement = GdeData.data.data.filter(
-    (g) => g.geologyGroup === 'Subenvironment',
+    (g) => g.geologyGroup === 'ArchitecturalElement',
   );
 
   return (
@@ -82,6 +82,7 @@ export const GdeSelect = ({
 
       <Autocomplete
         label="Architectural Element"
+        multiple
         options={ArchitecturalElement}
         optionLabel={(option) => option.identifier}
         onOptionsChange={(e: AutocompleteChanges<GeologicalStandardDto>) => {

diff --git a/...ositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.styled.ts b/...ositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.styled.ts
@@ -1,9 +1,18 @@
 import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
-
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
 
   row-gap: ${spacings.MEDIUM};
 `;
+
+export const ArcElCell = styled.div`
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+
+  > p {
+    padding-right: ${spacings.X_SMALL};
+  }
+`;
diff --git a/...ossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx b/...ossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
@@ -128,15 +128,23 @@ export const GrossDepositionEnviromentGroup = ({
                     />
                   </Button>
                 </Table.Cell>
-                <Table.Cell>{row.grossDepEnv.identifier}</Table.Cell>
-                <Table.Cell>{row.depEnv.identifier}</Table.Cell>
-                <Table.Cell>{row.subenv.identifier}</Table.Cell>
                 <Table.Cell>
-                  <div>
+                  <Styled.ArcElCell>
+                    {row.grossDepEnv.identifier}
+                  </Styled.ArcElCell>
+                </Table.Cell>
+                <Table.Cell>
+                  <Styled.ArcElCell>{row.depEnv.identifier}</Styled.ArcElCell>
+                </Table.Cell>
+                <Table.Cell>
+                  <Styled.ArcElCell>{row.subenv.identifier}</Styled.ArcElCell>
+                </Table.Cell>
+                <Table.Cell>
+                  <Styled.ArcElCell>
                     {row.architecturalElements.map((a) => (
-                      <p key={a.geologicalStandardId}>{a.identifier}</p>
+                      <p key={a.geologicalStandardId}>{a.identifier},</p>
                     ))}
-                  </div>
+                  </Styled.ArcElCell>
                 </Table.Cell>
               </Table.Row>
             ))}

diff --git a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.styled.ts b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.styled.ts
@@ -7,3 +7,13 @@ export const Wrapper = styled.div`
 
   row-gap: ${spacings.MEDIUM};
 `;
+
+export const StratColCell = styled.div`
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+
+  > p {
+    padding-right: ${spacings.X_SMALL};
+  }
+`;
diff --git a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx
@@ -50,20 +50,40 @@ export const StratigrapicGroups = ({
                 </Button>
               </Table.Cell>
               <Table.Cell>{row.country.identifier}</Table.Cell>
-              <Table.Cell>{row.field.identifier}</Table.Cell>
-              <Table.Cell>{row.stratColumn.identifier}</Table.Cell>
+              <Table.Cell>
+                <Styled.StratColCell>
+                  {row.field.identifier}
+                </Styled.StratColCell>
+              </Table.Cell>
+              <Table.Cell>
+                <Styled.StratColCell>
+                  {row.stratColumn.identifier}
+                </Styled.StratColCell>
+              </Table.Cell>
               {filterUnitLevel(row, 1).length > 0 ? (
-                <Table.Cell>{filterUnitLevel(row, 1)[0].identifier}</Table.Cell>
+                <Table.Cell>
+                  <Styled.StratColCell>
+                    {filterUnitLevel(row, 1)[0].identifier}
+                  </Styled.StratColCell>
+                </Table.Cell>
               ) : (
                 <Table.Cell>---</Table.Cell>
               )}
               {filterUnitLevel(row, 2).length > 0 ? (
-                <Table.Cell>{filterUnitLevel(row, 2)[0].identifier}</Table.Cell>
+                <Table.Cell>
+                  <Styled.StratColCell>
+                    {filterUnitLevel(row, 2)[0].identifier}
+                  </Styled.StratColCell>
+                </Table.Cell>
               ) : (
                 <Table.Cell>---</Table.Cell>
               )}
               {filterUnitLevel(row, 3).length > 0 ? (
-                <Table.Cell>{filterUnitLevel(row, 3)[0].identifier}</Table.Cell>
+                <Table.Cell>
+                  <Styled.StratColCell>
+                    {filterUnitLevel(row, 3)[0].identifier}
+                  </Styled.StratColCell>
+                </Table.Cell>
               ) : (
                 <Table.Cell>---</Table.Cell>
               )}