imbric-theme 0.4.5 → 0.4.6

package/molecules/CardServices/CardServices.js

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import ReactTooltip from 'react-tooltip'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 import Label from '../../atoms/Label'
 import Icon from '../../atoms/Icon'
@@ -8,7 +9,6 @@ import styles from './CardServices.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-
 export const handleClick = ({ onClick }) => (event) => {
   onClick(event)
 }
@@ -24,15 +24,40 @@ export const CardServices = ({
   txtUserService,
   txtRefService,
   txtUserNumberService,
+  onClickUserView,
+  txtTootipUserView,
   onClickReturnOrder,
-  
+  txtTootipReturnOrder,
+  onClickRepeatOrder,
+  txtTootipRepeatOrder,
+  onClickEdit,
+  txtTootipEdit,
+  onClickTrash,
+  txtTootipTrash,
+  selectCard,
+  statusService,
 }) => {
+
+  // STATE TOOLTIP
+  const [isToolTipMounted, setIsToolTipMounted] = useState(false)
+
+  // TOOLTIP
+  const handleMouseEnter = () => {
+    setIsToolTipMounted(true)
+  }
+  const handleMouseLeave = () => {
+    setIsToolTipMounted(false)
+  }
+
+
   return (
     <div
       onClick={onClick && handleClick({ onClick })}
-      className={getStyles('card-services', {
-        'is-clickable': isClickable,
-      })}
+      className={getStyles('card-services',
+        { 'is-clickable': isClickable, },
+        { 'selectCard': selectCard },
+        // { 'flip-out-hor-bottom': selectCard }
+      )}
     >
 
       <div>
@@ -178,82 +203,165 @@ export const CardServices = ({
         </div>
 
       </div>
-      {/* <Vertical size="xs" /> */}
 
       <div className={getStyles('card-content-action')}>
 
         <div className={getStyles('card-subcontent-action')}>
 
-          <Icon
-            name="userView"
-            onClick={function noRefCheck() { }}
-            size="sm"
-          />
+          <span
+            data-tip
+            data-for='userView'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Icon
+            color="highlight"
+              id='userViewIcon'
+              isClickable
+              name="userView"
+              onClick={onClickUserView}
+              size="sm"
+              className={getStyles('icon-view')}
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='userView' type='error'>
+              <span>{txtTootipUserView}</span>
+            </ReactTooltip>
+          ) : null}
 
         </div>
 
-
-
         <div className={getStyles('card-subcontent-action')}>
 
-          <Icon
-            name="returnOrder"
-            onClick={onClickReturnOrder}
-            size="sm"
-          />
+          <span
+            data-tip
+            data-for='returnOrder'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Icon
+            color="highlight"
+              id='returnOrderIcon'
+              isClickable
+              name="returnOrder"
+              onClick={onClickReturnOrder}
+              size="sm"
+              className={getStyles('icon-view')}
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='returnOrder' type='error'>
+              <span>{txtTootipReturnOrder}</span>
+            </ReactTooltip>
+          ) : null}
 
         </div>
 
-
-
         <div className={getStyles('card-subcontent-action')}>
 
-          <Icon
-            name="repeatOrder"
-            onClick={function noRefCheck() { }}
-            size="sm"
-          />
-
-        </div>
+          <span
+            data-tip
+            data-for='repeatOrder'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Icon
+            color="highlight"
+              id='repeatOrderIcon'
+              isClickable
+              name="repeatOrder"
+              onClick={onClickRepeatOrder}
+              size="sm"
+              className={getStyles('icon-view')}
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='repeatOrder' type='error'>
+              <span>{txtTootipRepeatOrder}</span>
+            </ReactTooltip>
+          ) : null}
 
 
+        </div>
 
         <div className={getStyles('card-subcontent-action')}>
 
-          <Icon
-            name="edit"
-            onClick={function noRefCheck() { }}
-            size="sm"
-          />
-
-        </div>
+          <span
+            data-tip
+            data-for='edit'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Icon
+            color="highlight"
+              id='editIcon'
+              isClickable
+              name="edit"
+              onClick={onClickEdit}
+              size="sm"
+              className={getStyles('icon-view')}
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='edit' type='error'>
+              <span>{txtTootipEdit}</span>
+            </ReactTooltip>
+          ) : null}
 
 
+        </div>
 
         <div className={getStyles('card-subcontent-action')}>
 
-          <Icon
-            name="trash"
-            onClick={function noRefCheck() { }}
-            size="sm"
-          />
+          <span
+            data-tip
+            data-for='trash'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Icon
+            color="highlight"
+              id='trashIcon'
+              isClickable
+              name="trash"
+              onClick={onClickTrash}
+              size="sm"
+              className={getStyles('icon-view-delete')}
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='trash' type='error'>
+              <span>{txtTootipTrash}</span>
+            </ReactTooltip>
+          ) : null}
 
         </div>
 
-
-
         <div className={getStyles('card-subcontent-action')}>
 
           <Icon
+          className={getStyles(
+            { 'icon-view-status10': statusService === 10 || -30 },
+            { 'icon-view-status20': statusService === 20 },
+            // { 'icon-view-status30': statusService === 30 || -20 || -40 },
+          )}
             name="circleStatus"
-            onClick={function noRefCheck() { }}
             size="sm"
           />
 
         </div>
 
-
-
       </div>
 
       {/* {children} */}
@@ -272,7 +380,18 @@ CardServices.propTypes = {
   txtUserService: PropTypes.string,
   txtRefService: PropTypes.string,
   txtUserNumberService: PropTypes.string,
+  onClickUserView: PropTypes.func,
+  txtTootipUserView: PropTypes.string,
   onClickReturnOrder: PropTypes.func,
+  txtTootipReturnOrder: PropTypes.string,
+  onClickRepeatOrder: PropTypes.func,
+  txtTootipRepeatOrder: PropTypes.string,
+  onClickEdit: PropTypes.func,
+  txtTootipEdit: PropTypes.string,
+  onClickTrash: PropTypes.func,
+  txtTootipTrash: PropTypes.string,
+  selectCard: PropTypes.bool,
+  statusService: PropTypes.number,
 }
 
 CardServices.defaultProps = {
@@ -284,7 +403,18 @@ CardServices.defaultProps = {
   txtUserService: 'Alberto Alvarez',
   txtRefService: '1946980768',
   txtUserNumberService: 'WF3941',
+  onClickUserView: () => { },
+  txtTootipUserView: 'Ver detalle del servicio',
   onClickReturnOrder: () => { },
+  txtTootipReturnOrder: 'Crear retorno del servicio',
+  onClickRepeatOrder: () => { },
+  txtTootipRepeatOrder: 'Repetir servicio',
+  onClickEdit: () => { },
+  txtTootipEdit: 'Editar servicio (solo se puede editar 60min. antes)',
+  onClickTrash: () => { },
+  txtTootipTrash: 'Cancelar servicio',
+  selectCard: false,
+  statusService: 10,
 }
 
 export default withStyles(styles)(CardServices)

package/molecules/CardServices/CardServices.module.css

@@ -2,7 +2,7 @@
   /* display: flex; */
   width: 100%;
   align-items: center;
-  padding: 10px;
+  padding: 2px 10px;
   border: var(--border-width-thin) solid var(--color-base-transparent);
   border-radius: var(--card-border-radius);
   box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
@@ -11,13 +11,13 @@
   background-color: #fff;
   margin: 0;
   cursor: auto;
-  max-width: 450px;
-  min-width: 450px;
+  max-width: 360px;
+  min-width: 360px;
 
   align-items: center;
   align-content: center;
   justify-content: space-around;
-  margin-right: 10px;
+  margin-bottom: 10px;
   display: flex;
 
 }
@@ -90,4 +90,116 @@
 .card-services.is-clickable:active,
 .card-services.is-draggable:active {
   box-shadow: var(--box-shadow-xs);
+}
+
+.selectCard {
+  border-top: 4px solid #39b54a;
+  border-bottom: 4px solid #00a3ff;
+  border-left: 1px solid #39b54a;
+  border-right: 1px solid #00a3ff;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background-position: 0 0, 100% 0;
+  background-repeat: no-repeat;
+  -webkit-background-size: 4px 100%;
+  -moz-background-size: 4px 100%;
+  background-size: 4px 100%;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
+  background-image: -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
+  background-image: -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
+  background-image: -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
+  background-image: linear-gradient(to bottom, #39b54a 0%, #00a3ff 100%), linear-gradient(to bottom, #39b54a 0%, #00a3ff 100%);
+}
+
+.flip-out-hor-bottom {
+	-webkit-animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+	        animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+
+.flip-in-hor-bottom {
+	-webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+/**
+ * ----------------------------------------
+ * animation flip-out-hor-bottom
+ * ----------------------------------------
+ */
+ @-webkit-keyframes flip-out-hor-bottom {
+  0% {
+    -webkit-transform: rotateX(0);
+            transform: rotateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotateX(-70deg);
+            transform: rotateX(-70deg);
+    opacity: 0;
+  }
+}
+@keyframes flip-out-hor-bottom {
+  0% {
+    -webkit-transform: rotateX(0);
+            transform: rotateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotateX(-70deg);
+            transform: rotateX(-70deg);
+    opacity: 0;
+  }
+}
+
+
+/**
+ * ----------------------------------------
+ * animation flip-in-hor-bottom
+ * ----------------------------------------
+ */
+ @-webkit-keyframes flip-in-hor-bottom {
+  0% {
+    -webkit-transform: rotateX(80deg);
+            transform: rotateX(80deg);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0);
+            transform: rotateX(0);
+    opacity: 1;
+  }
+}
+@keyframes flip-in-hor-bottom {
+  0% {
+    -webkit-transform: rotateX(80deg);
+            transform: rotateX(80deg);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0);
+            transform: rotateX(0);
+    opacity: 1;
+  }
+}
+
+
+.icon-view:hover svg path {
+  fill: var(--color-primary-muted);
+}
+
+.icon-view-delete:hover svg path {
+  fill: var(--color-secondary-muted);
+}
+
+.icon-view-status10 svg circle {
+  fill: #00a3ff;
+}
+
+.icon-view-status20 svg circle {
+  fill: #39b54a;
+}
+
+.icon-view-status30 svg circle {
+  fill: #8F12FE;
 }

package/molecules/ColumnTable/ColumnTable.js

@@ -51,9 +51,11 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
                 // setAccessor()
                 (<th
                   key={item.idInput}
-                  className={getStyles('column-table', {
-                    'column-uppercase': columnUppercase,
-                  })}>
+                  className={getStyles('column-table', 
+                  {'column-uppercase': columnUppercase},
+                  {'thacction': item.accessor === 'iconUrl' } ,
+                  {'thcheckbox': item.isCheckbox } 
+                    )}>
 
                   <span onClick={item.sortable ? () => handleSortingChange(item.accessor) : null}>
                     <Paragraph

package/molecules/ColumnTable/ColumnTable.module.css

@@ -21,4 +21,16 @@
   /* background-color: -webkit-linear-gradient(left, #25c481, #25b7c4);
   background-color: linear-gradient(to right, #25c481, #25b7c4); */
   border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.thacction {
+  max-width: 80px;
+  min-width: 80px;
+  width: 80px;
+}
+
+.thcheckbox {
+  max-width: 80px;
+  min-width: 80px;
+  width: 80px;
 }

package/molecules/Dropdown/Dropdown.js

@@ -16,13 +16,13 @@ export const Dropdown = ({
 }) => {
   return (
     <div
-      id={id}
       className={getStyles('dropdown', {
         'is-inline': isInline,
       })}
     >
       <Icon className="dropdown-icon" name="angleDown" background="transparent" />
       <select
+        id={id}
         className={getStyles('dropdown-select')}
         onChange={(event) => onChange(event?.currentTarget?.value)}
         value={value}

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,22 +90,27 @@ 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
                       :
 
 
@@ -93,7 +129,7 @@ export const RowTable = ({
 
                           ?
 
-                          <td className={getStyles('td')} key={[itemTd.accessor]}>
+                          <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor]}>
 
                             {itemTd.viewUserView ?
                               <>
@@ -118,7 +154,7 @@ export const RowTable = ({
                               </>
                               : null}
 
-                            {itemTd.viewListXLS ?
+                            {itemTd.viewListXLS && item.fileType === 'xls' ?
                               <>
                                 <Icon
                                   background="base"
@@ -129,7 +165,7 @@ export const RowTable = ({
                               </>
                               : null}
 
-                            {itemTd.viewListCSV ?
+                            {itemTd.viewListCSV && item.fileType === 'xml' ?
                               <>
                                 <Icon
                                   background="base"
@@ -140,7 +176,7 @@ export const RowTable = ({
                               </>
                               : null}
 
-                            {itemTd.viewListPDF ?
+                            {itemTd.viewListPDF && item.fileType === 'pdf' ?
                               <>
                                 <Icon
                                   background="base"
@@ -264,6 +300,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;

package/molecules/RowTable/constants.js

@@ -72,7 +72,8 @@ export const options = {
             authorizationBreakValue6: "U0193271095",
             authorizationBreakValue7: "FACILITIES",
             iconUrl: "https://resources.callcenter.cab/img/travelprograms/imbric_taxi_satin.png",
-            idCheckbox: 'checkbox1'
+            idCheckbox: 'checkbox1',
+            isSelected: true,
         },
         {
             id: 346248955,
@@ -140,6 +141,7 @@ export const options = {
             authorizationBreakValue7: "FACILITIES",
             iconUrl: "https://resources.callcenter.cab/img/travelprograms/imbric_taxi_satin.png",
             idCheckbox: 'checkbox2',
+            isSelected: true,
         },
         {
             id: 346248954,
@@ -206,7 +208,8 @@ export const options = {
             authorizationBreakValue6: "U0193271095",
             authorizationBreakValue7: "FACILITIES",
             iconUrl: "https://resources.callcenter.cab/img/travelprograms/imbric_taxi_satin.png",
-            idCheckbox: 'checkbox3'
+            idCheckbox: 'checkbox3',
+            isSelected: true,
         }
     ],