fix: fixed dots position/created Qualifications/Vintage components

Chia-Network · Dec 28, 2021 · 0a5a200 · 0a5a200
1 parent d17399f
commit 0a5a200
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 116 deletions.
diff --git a/src/components/blocks/DataTable.js b/src/components/blocks/DataTable.js
@@ -96,7 +96,6 @@ const DataTable = withTheme(({ headings, data, actions }) => {
   const [edit, setEdit] = useState(false);
   const appStore = useSelector(state => state.app);
 
-
   const handlePageClick = page => {
     setPage(page);
   };
@@ -150,28 +149,44 @@ const DataTable = withTheme(({ headings, data, actions }) => {
               )}
             </tr>
           </THead>
-          <tbody style={{ position: 'relative'}}>
+          <tbody style={{ position: 'relative' }}>
             {paginatedData[currentPage].map((record, index) => (
               <>
-                <Tr
-                  index={index}
-                  selectedTheme={appStore.theme}
-                  key={index}>
+                <Tr index={index} selectedTheme={appStore.theme} key={index}>
                   {Object.keys(record).map((key, index) => (
-                    <Td  onClick={() => setRecord(record)} selectedTheme={appStore.theme} key={index}>
+                    <Td
+                      onClick={() => setRecord(record)}
+                      selectedTheme={appStore.theme}
+                      key={index}>
                       <TableCellText>
                         {record[key] && record[key].toString()}
                       </TableCellText>
-
                     </Td>
-
                   ))}
-
-                  {actions && <Td style={{cursor: "pointer"}} onClick={() => {
-                     setEdit(true);
-                     setEditRecord(record)
-                  }}electedTheme={appStore.theme}>{actions &&<div><EllipseIcon height={"5"} width={"5"}/> <EllipseIcon height={"5"} width={"5"}/> <EllipseIcon height={"5"} width={"5"}/></div>}</Td>}
-
+
+                  {actions && (
+                    <Td
+                      style={{ cursor: 'pointer' }}
+                      onClick={() => {
+                        setEdit(true);
+                        setEditRecord(record);
+                      }}
+                      electedTheme={appStore.theme}>
+                      {actions && (
+                        <div
+                          style={{
+                            transform: 'rotate(0.25turn)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-evenly',
+                          }}>
+                          <EllipseIcon height={'5'} width={'5'} />{' '}
+                          <EllipseIcon height={'5'} width={'5'} />{' '}
+                          <EllipseIcon height={'5'} width={'5'} />
+                        </div>
+                      )}
+                    </Td>
+                  )}
                 </Tr>
               </>
             ))}
@@ -186,11 +201,17 @@ const DataTable = withTheme(({ headings, data, actions }) => {
           showLast
         />
       </StyledPaginationContainer>
-     
-        <TableDrawer getRecord={getRecord} onClose={() => setRecord(null)} />
-     
+
+      <TableDrawer getRecord={getRecord} onClose={() => setRecord(null)} />
+
       {edit && (
-       <EditUnitsForm  onClose={() => {setEdit(false); setEditRecord(null)}} data={editRecord}/>
+        <EditUnitsForm
+          onClose={() => {
+            setEdit(false);
+            setEditRecord(null);
+          }}
+          data={editRecord}
+        />
       )}
     </div>
   );

diff --git a/src/components/forms/CreateUnitsForm.js b/src/components/forms/CreateUnitsForm.js
@@ -7,17 +7,14 @@ import {
   StandardInput,
   InputSizeEnum,
   InputStateEnum,
-  CreateQualificationsForm,
-  ComponentRepeater,
-  AddIcon,
-  CloseIcon,
-  CreateVintageForm,
   Tabs,
   Tab,
   TabPanel,
   Modal,
   Body,
 } from '..';
+import QualificationsRepeater from './QualificationsRepeater';
+import VintageRepeater from './VintageRepeater';
 //import { postNewUnits } from '../../store/actions/climateWarehouseActions';
 
 const StyledLabelContainer = styled('div')`
@@ -402,52 +399,16 @@ const CreateUnitsForm = ({ onClose }) => {
                 </div>
               </TabPanel>
               <TabPanel value={tabValue} index={1}>
-                <div style={{ padding: '20px 30px' }}>
-                  <ComponentRepeater
-                    maxRepetitions={100}
-                    values={newQualifications}
-                    updateValues={setNewQualifications}
-                    initialValue={{
-                      label: '',
-                      creditingPeriodStartDate: '',
-                      creditingPeriodEndDate: '',
-                      validityStartDate: '',
-                      validityEndDate: '',
-                      unityQuantity: '',
-                      qualificationLink: '',
-                    }}
-                    component={<CreateQualificationsForm />}
-                    addIcon={
-                      <AddIcon height={14} width={14} fill={'#1890FF'} />
-                    }
-                    removeIcon={
-                      <CloseIcon height={12} width={12} fill={'#1890FF'} />
-                    }
-                  />
-                </div>
+                <QualificationsRepeater
+                  qualificationsState={newQualifications}
+                  newQualificationsState={setNewQualifications}
+                />
               </TabPanel>
               <TabPanel value={tabValue} index={2}>
-                <div style={{ padding: '20px 30px' }}>
-                  <ComponentRepeater
-                    maxRepetitions={1}
-                    values={newVintage}
-                    updateValues={setNewVintage}
-                    initialValue={{
-                      vintageStartDate: '',
-                      vintageEndDate: '',
-                      verificationApproach: '',
-                      verificationDate: '',
-                      verificationBody: '',
-                    }}
-                    component={<CreateVintageForm />}
-                    addIcon={
-                      <AddIcon height={14} width={14} fill={'#1890FF'} />
-                    }
-                    removeIcon={
-                      <CloseIcon height={12} width={12} fill={'#1890FF'} />
-                    }
-                  />
-                </div>
+                <VintageRepeater
+                  vintageState={newVintage}
+                  newVintageState={setNewVintage}
+                />
               </TabPanel>
             </div>
           </div>

diff --git a/src/components/forms/EditUnitsForm.js b/src/components/forms/EditUnitsForm.js
@@ -3,11 +3,6 @@ import React, { useState, useEffect } from 'react';
 //import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import {
-  CreateQualificationsForm,
-  ComponentRepeater,
-  AddIcon,
-  CloseIcon,
-  CreateVintageForm,
   StandardInput,
   InputSizeEnum,
   InputStateEnum,
@@ -17,6 +12,8 @@ import {
   Tab,
   TabPanel
 } from '..';
+import QualificationsRepeater from './QualificationsRepeater';
+import VintageRepeater from './VintageRepeater';
 //import { updateUnitsRecord } from '../../store/actions/climateWarehouseActions';
 
 
@@ -446,50 +443,13 @@ const EditUnitsForm = ({ data, onClose }) => {
                 </div>
               </TabPanel>
               <TabPanel value={tabValue} index={1}>
-                <div style={{ padding: '20px 30px' }}>
-                  <ComponentRepeater
-                    values={qualification}
-                    updateValues={setQualificationsRepeaterValues}
-                    initialValue={{
-                      label: '',
-                      creditingPeriodStartDate: '',
-                      creditingPeriodEndDate: '',
-                      validityStartDate: '',
-                      validityEndDate: '',
-                      unityQuantity: '',
-                      qualificationLink: '',
-                    }}
-                    component={<CreateQualificationsForm />}
-                    addIcon={
-                      <AddIcon height={14} width={14} fill={'#1890FF'} />
-                    }
-                    removeIcon={
-                      <CloseIcon height={12} width={12} fill={'#1890FF'} />
-                    }
-                  />
-                </div>
+                <QualificationsRepeater
+                  qualificationsState={qualification}
+                  newQualificationsState={setQualificationsRepeaterValues}
+                />
               </TabPanel>
               <TabPanel value={tabValue} index={2}>
-                <div style={{ padding: '20px 30px' }}>
-                  <ComponentRepeater
-                    values={vintage}
-                    updateValues={setVintage}
-                    initialValue={{
-                      vintageStartDate: '',
-                      vintageEndDate: '',
-                      verificationApproach: '',
-                      verificationDate: '',
-                      verificationBody: '',
-                    }}
-                    component={<CreateVintageForm />}
-                    addIcon={
-                      <AddIcon height={14} width={14} fill={'#1890FF'} />
-                    }
-                    removeIcon={
-                      <CloseIcon height={12} width={12} fill={'#1890FF'} />
-                    }
-                  />
-                </div>
+                <VintageRepeater vintageState={vintage} newVintageState={setVintage}/>
               </TabPanel>
             </div>
           </div>

diff --git a/src/components/forms/QualificationsRepeater.js b/src/components/forms/QualificationsRepeater.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { AddIcon, CloseIcon } from '..';
+import { CreateQualificationsForm } from './CreateQualificationsForm';
+import { ComponentRepeater } from '..';
+
+function QualificationsRepeater({qualificationsState, newQualificationsState}) {
+    return (
+      <div style={{ padding: '20px 30px' }}>
+        <ComponentRepeater
+          maxRepetitions={100}
+          values={qualificationsState}
+          updateValues={newQualificationsState}
+          initialValue={{
+            label: '',
+            creditingPeriodStartDate: '',
+            creditingPeriodEndDate: '',
+            validityStartDate: '',
+            validityEndDate: '',
+            unityQuantity: '',
+            qualificationLink: '',
+          }}
+          component={<CreateQualificationsForm />}
+          addIcon={<AddIcon height={14} width={14} fill={'#1890FF'} />}
+          removeIcon={<CloseIcon height={12} width={12} fill={'#1890FF'} />}
+        />
+      </div>
+    );
+}
+
+export default QualificationsRepeater
diff --git a/src/components/forms/VintageRepeater.js b/src/components/forms/VintageRepeater.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { AddIcon, CloseIcon } from '..';
+import { CreateVintageForm } from './CreateVintageForm';
+import { ComponentRepeater } from '..';
+
+function VintageRepeater({vintageState, newVintageState}) {
+  return (
+    <div style={{ padding: '20px 30px' }}>
+      <ComponentRepeater
+        maxRepetitions={1}
+        values={vintageState}
+        updateValues={newVintageState}
+        initialValue={{
+          vintageStartDate: '',
+          vintageEndDate: '',
+          verificationApproach: '',
+          verificationDate: '',
+          verificationBody: '',
+        }}
+        component={<CreateVintageForm />}
+        addIcon={<AddIcon height={14} width={14} fill={'#1890FF'} />}
+        removeIcon={<CloseIcon height={12} width={12} fill={'#1890FF'} />}
+      />
+    </div>
+  );
+}
+
+export default VintageRepeater;
diff --git a/src/components/forms/index.js b/src/components/forms/index.js
@@ -1,4 +1,6 @@
 export * from './CreateProjectForm';
 export * from './CreateUnitsForm';
 export * from './CreateQualificationsForm';
-export * from './CreateVintageForm';
+export * from './CreateVintageForm';
+export * from './QualificationsRepeater';
+export * from './VintageRepeater';