imbric-theme 0.4.5 → 0.4.8

package/molecules/RowTable/RowTable.js

@@ -9,6 +9,9 @@ import Moment from 'react-moment'
 import Icon from '../../atoms/Icon'
 import Picture from '../../atoms/Picture'
 import Check from '../../atoms/Check'
+import Toggle from '../../atoms/Toggle'
+
+
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
 export const RowTable = ({
@@ -31,7 +34,7 @@ export const RowTable = ({
 }) => {
 
 
-
+  const [loading, setLoading] = useState(false)
 
   // const handleEditStaff = (e, item) => {
   //   console.log(item)
@@ -39,17 +42,45 @@ export const RowTable = ({
   // }
 
 
-  // const handleClick = () => () => {
-  //   // onClick()
+  const handleClickCheckbox = (e, item) => {
 
-  //   isChecked ? setIsChecked(false) : setIsChecked(true)
 
-  // }
+    for (const iterator of slice) {
+
+      if (iterator.id === item.id) {
+        item.isSelected ? iterator.isSelected = false : iterator.isSelected = true
+
+        iterator.isSelected = item.isSelected
+      }
+
+    }
+
+    setLoading(true)
+
+    hola()
+
+    // return slice
+
+    // console.log(e, item)
+  }
+
+  const hola = () => {
+
+    setTimeout(() => {
+      setLoading(false)
+    }, 100)
+
+
+
+  }
+
 
 
   return (
     <div className={getStyles('tbl-content')}>
       <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
+
+
         <tbody>
           {slice.map((item, index) => (
 
@@ -59,203 +90,230 @@ export const RowTable = ({
                 itemTd.activeView ?
                   (
 
-
                     itemTd.isCheckbox
 
                       ?
-                      <td 
-                        className={getStyles('td', 'tdacction')}
-                        key={[itemTd.accessor]}
-                        onClick={(e) => {
-                          onClickCheckbox(e, item)
-                          // isChecked ? setIsChecked(false) : setIsChecked(true)
-                        }}>
-
-                        <Check id={item[itemTd.accessor]} isChecked={isCheckedCheckbox}
-
-                        />
-                      </td>
+                      !loading ? (
+                        <td
+                          className={getStyles('td', 'tdacction')}
+                          key={[itemTd.accessor]}
+                        >
+
+                          {/* <Check id={item[itemTd.accessor]} isChecked={item.isSelected} /> */}
+
+                          <Toggle
+                            id={item[itemTd.accessor]}
+                            checked={item.isSelected}
+                            label=""
+                            onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
+                          />
+
+                        </td>
+                      )
+                        : null
                       :
 
 
-                      itemTd.isPicture
+                      itemTd.isArrayObject
 
                         ?
-                        <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor]}>
-                          <Picture
-                            src={item[itemTd.accessor]}
-                            width={50}
-                          />
+
+                        <td className={getStyles('td')} key={[itemTd.accessor]}>
+
+                          {item[itemTd.accessor].map((itemTdObj, index, array) => (
+
+                            <span key={itemTdObj.id}>{itemTdObj[itemTd.subAccessor]}
+
+                              {array.length - 1 !== index ?
+                                <span>, </span> : null }
+
+                            </span>
+
+                          ))}
+
                         </td>
-                        :
 
-                        itemTd.subAccessor === 'action'
+                        :
 
-                          ?
 
-                          <td className={getStyles('td')} key={[itemTd.accessor]}>
-
-                            {itemTd.viewUserView ?
-                              <>
-                                <Icon
-                                  background="base"
-                                  name="userView"
-                                  onClick={(e) => { onClickActionUserView(e, item) }}
-                                />
-                                <Horizontal size="xs" />
-                              </>
-                              : null}
-
-
-                            {itemTd.viewListInvoice ?
-                              <>
-                                <Icon
-                                  background="base"
-                                  name="listInvoice"
-                                  onClick={(e) => { onClickActionListInvoice(e, item) }}
-                                />
-                                <Horizontal size="xs" />
-                              </>
-                              : null}
-
-                            {itemTd.viewListXLS ?
-                              <>
-                                <Icon
-                                  background="base"
-                                  name="listXLS"
-                                  onClick={(e) => { onClickActionListXLS(e, item) }}
-                                />
-                                <Horizontal size="xs" />
-                              </>
-                              : null}
-
-                            {itemTd.viewListCSV ?
-                              <>
-                                <Icon
-                                  background="base"
-                                  name="listCSV"
-                                  onClick={(e) => { onClickActionListCSV(e, item) }}
-                                />
-                                <Horizontal size="xs" />
-                              </>
-                              : null}
-
-                            {itemTd.viewListPDF ?
-                              <>
-                                <Icon
-                                  background="base"
-                                  name="listPDF"
-                                  onClick={(e) => { onClickActionListPDF(e, item) }}
-                                />
-                                <Horizontal size="xs" />
-                              </>
-                              : null}
-
-
-
-                            {itemTd.viewEdit ?
-                              <>
-                                <Icon
-                                  background="base"
-                                  name="edit"
-                                  onClick={(e) => { onClickActionEdit(e, item) }}
-                                />
-                                <Horizontal size="xs" />
-                              </>
-                              : null}
-
-                            {itemTd.viewEmailSend ?
-                              <>
-                                <Icon
-                                  background="base"
-                                  name="sendEmail"
-                                  // onClick={(e) => onClickEdit(e, item)}
-                                  onClick={e => { onClickActionSendEmail(e, item) }}
-                                />
-                                <Horizontal size="xs" />
-                              </>
-                              : null}
-
-                            {itemTd.viewTrash ?
-                              <>
-                                <Icon
-                                  background="base"
-                                  name="trash"
-                                  // onClick={(e) => onClickEdit(e, item)}
-                                  onClick={e => { onClickActionDelete(e, item) }}
-                                />
-                                <Horizontal size="xs" />
-                              </>
-                              : null}
+                        itemTd.isPicture
 
+                          ?
+                          <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor]}>
+                            <Picture
+                              src={item[itemTd.accessor]}
+                              width={50}
+                            />
                           </td>
-
                           :
 
-                          itemTd.subAccessor !== ''
+                          itemTd.subAccessor === 'action'
 
                             ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
+                            <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor]}>
+
+                              {itemTd.viewUserView ?
+                                <>
+                                  <Icon
+                                    background="base"
+                                    name="userView"
+                                    onClick={(e) => { onClickActionUserView(e, item) }}
+                                  />
+                                  <Horizontal size="xs" />
+                                </>
+                                : null}
+
+
+                              {itemTd.viewListInvoice ?
+                                <>
+                                  <Icon
+                                    background="base"
+                                    name="listInvoice"
+                                    onClick={(e) => { onClickActionListInvoice(e, item) }}
+                                  />
+                                  <Horizontal size="xs" />
+                                </>
+                                : null}
+
+                              {itemTd.viewListXLS && item.fileType === 'xls' ?
+                                <>
+                                  <Icon
+                                    background="base"
+                                    name="listXLS"
+                                    onClick={(e) => { onClickActionListXLS(e, item) }}
+                                  />
+                                  <Horizontal size="xs" />
+                                </>
+                                : null}
+
+                              {itemTd.viewListCSV && item.fileType === 'xml' ?
+                                <>
+                                  <Icon
+                                    background="base"
+                                    name="listCSV"
+                                    onClick={(e) => { onClickActionListCSV(e, item) }}
+                                  />
+                                  <Horizontal size="xs" />
+                                </>
+                                : null}
+
+                              {itemTd.viewListPDF && item.fileType === 'pdf' ?
+                                <>
+                                  <Icon
+                                    background="base"
+                                    name="listPDF"
+                                    onClick={(e) => { onClickActionListPDF(e, item) }}
+                                  />
+                                  <Horizontal size="xs" />
+                                </>
+                                : null}
+
+
+
+                              {itemTd.viewEdit ?
+                                <>
+                                  <Icon
+                                    background="base"
+                                    name="edit"
+                                    onClick={(e) => { onClickActionEdit(e, item) }}
+                                  />
+                                  <Horizontal size="xs" />
+                                </>
+                                : null}
+
+                              {itemTd.viewEmailSend ?
+                                <>
+                                  <Icon
+                                    background="base"
+                                    name="sendEmail"
+                                    // onClick={(e) => onClickEdit(e, item)}
+                                    onClick={e => { onClickActionSendEmail(e, item) }}
+                                  />
+                                  <Horizontal size="xs" />
+                                </>
+                                : null}
+
+                              {itemTd.viewTrash ?
+                                <>
+                                  <Icon
+                                    background="base"
+                                    name="trash"
+                                    // onClick={(e) => onClickEdit(e, item)}
+                                    onClick={e => { onClickActionDelete(e, item) }}
+                                  />
+                                  <Horizontal size="xs" />
+                                </>
+                                : null}
+
+                            </td>
 
                             :
 
-                            itemTd.typeFilter === 'date'
+                            itemTd.subAccessor !== ''
 
                               ?
 
-                              <td className={getStyles('td')} key={[itemTd.accessor]}>
-                                <Moment format="DD/MM/YYYY hh:mm:ss">
-                                  {item[itemTd.accessor]}
-                                </Moment>
-                              </td>
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
 
                               :
 
-                              itemTd.typeFilter === 'select'
+                              itemTd.typeFilter === 'date'
 
                                 ?
 
-                                itemTd.optionsSelect.map((itemSelect) => (
+                                <td className={getStyles('td')} key={[itemTd.accessor]}>
+                                  <Moment format="DD/MM/YYYY hh:mm:ss">
+                                    {item[itemTd.accessor]}
+                                  </Moment>
+                                </td>
 
+                                :
 
-                                  item[itemTd.accessor] === itemSelect.value ?
+                                itemTd.typeFilter === 'select'
 
-                                    <td className={getStyles('td')} key={[itemTd.accessor]}>
-                                      {itemSelect.label}
-                                    </td>
+                                  ?
 
-                                    :
+                                  itemTd.optionsSelect.map((itemSelect) => (
 
-                                    null
-                                ))
 
-                                :
+                                    item[itemTd.accessor] === itemSelect.value ?
 
-                                itemTd.typeFilter === 'number'
+                                      <td className={getStyles('td')} key={[itemTd.accessor]}>
+                                        {itemSelect.label}
+                                      </td>
 
-                                  ?
+                                      :
 
-                                  itemTd.subTypeFilter
+                                      null
+                                  ))
+
+                                  :
+
+                                  itemTd.typeFilter === 'number'
 
                                     ?
 
-                                    itemTd.characterExtra === 'km'
+                                    itemTd.subTypeFilter
+
                                       ?
-                                      <td className={getStyles('td')} key={[itemTd.accessor]}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+
+                                      itemTd.characterExtra === 'km'
+                                        ?
+                                        <td className={getStyles('td')} key={[itemTd.accessor]}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                        :
+                                        <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                       :
-                                      <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
-                                    :
-                                    <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                                      <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
-                                  :
+                                    :
 
-                                  itemTd.subTypeFilter
+                                    itemTd.subTypeFilter
 
-                                    ?
-                                    <td className={getStyles('td')} key={[itemTd.accessor]}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
-                                    :
-                                    <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                                      ?
+                                      <td className={getStyles('td')} key={[itemTd.accessor]}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                      :
+                                      <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
                   ) : null
               ))}
@@ -264,6 +322,7 @@ export const RowTable = ({
           ))}
         </tbody>
       </table>
+
     </div>
   )
 }

package/molecules/RowTable/RowTable.module.css

@@ -27,6 +27,10 @@
   width: 80px;
 }
 
+.tdacctionIcons {
+  text-align: right;
+}
+
 .tr-content:hover {
   background-color: #edf1fe;
   cursor: pointer;