diff --git a/react/css/example/index.css b/react/css/example/index.css index ba83612fe67..f58df382f1e 100644 --- a/react/css/example/index.css +++ b/react/css/example/index.css @@ -1,5 +1,5 @@ /*! - * @egovernments/digit-ui-css - 1.2.176 + * @egovernments/digit-ui-css - 1.8.2-coreui.4 * * Copyright (c) 2024 Jagankumar * @@ -9421,21 +9421,21 @@ body { .typography.heading-m { font-size: 1.5rem; } } -.typography.heading-m, .typography.heading-s, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .checkbox-wrap .input-emp:checked + .digit-toggle-label, .checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-wrap .input-emp:checked + .digit-toggle-label, .digit-checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label { +.typography.heading-m, .typography.heading-s, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .checkbox-wrap .input-emp:checked + .digit-toggle-label, .checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-wrap .input-emp:checked + .digit-toggle-label, .digit-checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label { font-family: Roboto; font-style: normal; font-weight: 700; } @media (max-width: 30rem) { - .typography.heading-s, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .checkbox-wrap .input-emp:checked + .digit-toggle-label, .checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-wrap .input-emp:checked + .digit-toggle-label, .digit-checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label { + .typography.heading-s, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .checkbox-wrap .input-emp:checked + .digit-toggle-label, .checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-wrap .input-emp:checked + .digit-toggle-label, .digit-checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label { font-size: 1rem; } } @media (min-width: 30.063rem) and (max-width: 47.938rem) { - .typography.heading-s, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .checkbox-wrap .input-emp:checked + .digit-toggle-label, .checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-wrap .input-emp:checked + .digit-toggle-label, .digit-checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label { + .typography.heading-s, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .checkbox-wrap .input-emp:checked + .digit-toggle-label, .checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-wrap .input-emp:checked + .digit-toggle-label, .digit-checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label { font-size: 1rem; } } @media (min-width: 48rem) { - .typography.heading-s, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .checkbox-wrap .input-emp:checked + .digit-toggle-label, .checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-wrap .input-emp:checked + .digit-toggle-label, .digit-checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label { + .typography.heading-s, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .checkbox-wrap .input-emp:checked + .digit-toggle-label, .checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-wrap .input-emp:checked + .digit-toggle-label, .digit-checkbox-wrap .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label { font-size: 1rem; } } .typography.heading-xs { @@ -9499,21 +9499,21 @@ body { .typography.body-l { font-size: 1.25rem; } } -.typography.body-l, .typography.body-s, .digit-checkbox-wrap .label, .digit-radio-wrap label, .digit-header.label { +.typography.body-l, .typography.body-s, .digit-checkbox-wrap .label, .digit-radio-wrap label, .digit-header.label, .digit-stepper-container .digit-stepper-content .stepper-label, .timeline-date { font-family: Roboto; font-style: normal; font-weight: 400; } @media (max-width: 30rem) { - .typography.body-s, .digit-checkbox-wrap .label, .digit-radio-wrap label, .digit-header.label { + .typography.body-s, .digit-checkbox-wrap .label, .digit-radio-wrap label, .digit-header.label, .digit-stepper-container .digit-stepper-content .stepper-label, .timeline-date { font-size: .875rem; } } @media (min-width: 30.063rem) and (max-width: 47.938rem) { - .typography.body-s, .digit-checkbox-wrap .label, .digit-radio-wrap label, .digit-header.label { + .typography.body-s, .digit-checkbox-wrap .label, .digit-radio-wrap label, .digit-header.label, .digit-stepper-container .digit-stepper-content .stepper-label, .timeline-date { font-size: 1rem; } } @media (min-width: 48rem) { - .typography.body-s, .digit-checkbox-wrap .label, .digit-radio-wrap label, .digit-header.label { + .typography.body-s, .digit-checkbox-wrap .label, .digit-radio-wrap label, .digit-header.label, .digit-stepper-container .digit-stepper-content .stepper-label, .timeline-date { font-size: 1rem; } } @media (max-width: 30rem) { @@ -9545,12 +9545,12 @@ body { .typography.label { font-size: 1rem; } } -.typography.link, .digit-button-link h2, .digit-button-link:hover h2 { +.typography.link, .digit-button-link h2, .digit-button-link:hover h2, .details-btn { font-weight: 400; text-decoration: underline; font-size: 1rem; } -.typography.button, .digit-button-label, .digit-button-default h2, .digit-button-primary h2, .digit-button-secondary h2, .digit-button-teritiary h2, .typography.link, .digit-button-link h2, .digit-button-link:hover h2 { +.typography.button, .digit-button-label, .digit-button-default h2, .digit-button-primary h2, .digit-button-secondary h2, .digit-button-teritiary h2, .typography.link, .digit-button-link h2, .digit-button-link:hover h2, .details-btn { font-family: Roboto; font-style: normal; } @@ -9825,9 +9825,6 @@ ol, ul { display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; max-width: 100%; grid-gap: .5rem; gap: .5rem; } @@ -9843,6 +9840,11 @@ ol, ul { width: 1.25rem; height: 1.25rem; } +.icon-label-container:not(.link) { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .digit-button-label { line-height: 1.5rem; text-align: center; @@ -10012,7 +10014,7 @@ ol, ul { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - padding: .5rem 1.5rem; + padding: .5rem; grid-gap: .5rem; gap: .5rem; min-width: 6.5625rem; @@ -10048,13 +10050,14 @@ ol, ul { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - padding: .5rem 1.5rem; + padding: .5rem; grid-gap: .5rem; gap: .5rem; min-width: 4.875rem; min-height: 2.1875rem; } .digit-button-link .digit-button-label { - line-height: 1.188rem; } + line-height: 1.188rem; + text-align: left; } .digit-button-link:focus { outline: 2px solid transparent; outline-offset: 2px; } @@ -10063,13 +10066,17 @@ ol, ul { color: #f47738; color: rgba(244, 119, 56, var(--text-opacity)); margin: 0; - height: 1.188rem; } + height: auto; + white-space: normal; + word-break: break-word; } .digit-button-link:hover h2 { --text-opacity:1; color: #f47738; color: rgba(244, 119, 56, var(--text-opacity)); margin: 0; - height: 1.188rem; } + height: auto; + white-space: normal; + word-break: break-word; } .digit-button-link.disabled { opacity: .5; } .digit-button-link.disabled h2 { @@ -10912,9 +10919,6 @@ ol, ul { .digit-header { font-weight: 700; margin-bottom: 16px; } - @media (max-width: 480px) { - .digit-header { - margin-left: 60px; } } .digit-header.label { margin: 0 0 .25rem; } @@ -10939,7 +10943,7 @@ ol, ul { .digit-header-wrap .digit-header-end { margin-left: auto; } } -.digit-info-banner-wrap { +.digit-infobanner-wrap { margin: 8px; padding: 16px; display: -webkit-box; @@ -10955,20 +10959,17 @@ ol, ul { grid-gap: .5rem; gap: .5rem; background-color: #c7e0f1; } - .digit-info-banner-wrap div { + .digit-infobanner-wrap div { display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; grid-gap: .5rem; gap: .5rem; min-height: 1.5rem; } - .digit-info-banner-wrap div svg { + .digit-infobanner-wrap div svg { -ms-flex-negative: 0; flex-shrink: 0; } - .digit-info-banner-wrap h2 { + .digit-infobanner-wrap h2 { width: 100%; max-width: 100%; overflow: hidden; @@ -10976,13 +10977,14 @@ ol, ul { color: #0b0c0c; font-size: 1rem; line-height: 1.172rem; - text-overflow: ellipsis; - margin: .165rem 0 0; } - .digit-info-banner-wrap h2, .digit-info-banner-wrap p { + margin: .164rem 0; + white-space: normal; + word-break: break-word; } + .digit-infobanner-wrap h2, .digit-infobanner-wrap p { text-align: left; font-family: Roboto; letter-spacing: 0; } - .digit-info-banner-wrap p { + .digit-infobanner-wrap p { white-space: pre-line; font-weight: 400; color: #505a5f; @@ -10990,46 +10992,46 @@ ol, ul { font-size: .875rem; line-height: 1.25rem; margin: 0; } - .digit-info-banner-wrap.digit-core-variant { + .digit-infobanner-wrap.digit-core-variant { margin: 2rem 0; padding: .625rem; background-color: #ffe2b5; border-radius: .25rem; } - .digit-info-banner-wrap.success { + .digit-infobanner-wrap.success { background-color: #bad6c9; } - .digit-info-banner-wrap.warning { + .digit-infobanner-wrap.warning { background-color: #f8e5c8; } - .digit-info-banner-wrap.error { + .digit-infobanner-wrap.error { background-color: #efc7c1; } @media (min-width: 30.063rem) and (max-width: 47.938rem) { - .digit-info-banner-wrap { + .digit-infobanner-wrap { max-width: 44.5rem; min-width: 22.5rem; } } @media (max-width: 30rem) { - .digit-info-banner-wrap { + .digit-infobanner-wrap { max-width: 21.5rem; min-width: 15rem; } } @media (min-width: 48rem) { - .digit-info-banner-wrap { + .digit-infobanner-wrap { max-width: 87rem; min-width: 25rem; } } - .digit-info-banner-wrap.inline { + .digit-infobanner-wrap.inline { -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } - .digit-info-banner-wrap.column, .digit-info-banner-wrap.inline { + .digit-infobanner-wrap.column, .digit-infobanner-wrap.inline { -webkit-box-direction: normal; } - .digit-info-banner-wrap.column { + .digit-infobanner-wrap.column { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; } - .digit-info-banner-wrap .additional-elements-inline { + .digit-infobanner-wrap .additional-elements-inline { -ms-flex-wrap: wrap; flex-wrap: wrap; } - .digit-info-banner-wrap .additional-elements-column, .digit-info-banner-wrap .additional-elements-inline { + .digit-infobanner-wrap .additional-elements-column, .digit-infobanner-wrap .additional-elements-inline { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -11038,15 +11040,15 @@ ol, ul { align-items: flex-start; grid-gap: .5rem; gap: .5rem; } - .digit-info-banner-wrap .additional-elements-column { + .digit-infobanner-wrap .additional-elements-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } - .digit-info-banner-wrap .additional-elements-column .individualElement { + .digit-infobanner-wrap .additional-elements-column .individualElement { width: 100%; max-width: 100%; } - .digit-info-banner-wrap img { + .digit-infobanner-wrap img { max-width: 100%; } .digit-key-note-pair { @@ -11361,7 +11363,7 @@ ol, ul { -ms-flex-pack: end; justify-content: flex-end; } } -.digit-multi-select-dropdown-wrap { +.digit-multiselectdropdown-wrap { margin-bottom: .625rem; position: relative; font-size: 16px; @@ -11371,19 +11373,19 @@ ol, ul { color: rgba(11, 12, 12, var(--text-opacity)); width: 100%; } @media (min-width: 30.063rem) and (max-width: 47.938rem) { - .digit-multi-select-dropdown-wrap { + .digit-multiselectdropdown-wrap { max-width: 27.5rem; min-width: 12.5rem; } } @media (max-width: 30rem) { - .digit-multi-select-dropdown-wrap { + .digit-multiselectdropdown-wrap { max-width: 20.5rem; min-width: 9.75rem; width: 100%; } } @media (min-width: 48rem) { - .digit-multi-select-dropdown-wrap { + .digit-multiselectdropdown-wrap { max-width: 37.5rem; min-width: 12.5rem; } } - .digit-multi-select-dropdown-wrap .digit-master, .digit-multi-select-dropdown-wrap .digit-master-active { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master, .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active { position: relative; height: 2.5rem; width: 100%; @@ -11391,7 +11393,7 @@ ol, ul { background-color: #fff; background-color: rgba(255, 255, 255, var(--bg-opacity)); border: .063rem solid #505a5f; } - .digit-multi-select-dropdown-wrap .digit-master input[type=text], .digit-multi-select-dropdown-wrap .digit-master .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-multi-select-dropdown-wrap .digit-master .input-emp[type=text], .digit-multi-select-dropdown-wrap .digit-master .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .digit-master .input-emp[type=text], .digit-multi-select-dropdown-wrap .digit-master-active input[type=text], .digit-multi-select-dropdown-wrap .digit-master-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-multi-select-dropdown-wrap .digit-master-active .input-emp[type=text], .digit-multi-select-dropdown-wrap .digit-master-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .digit-master-active .input-emp[type=text] { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master input[type=text], .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .input-emp[type=text], .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .input-emp[type=text], .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active input[type=text], .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .input-emp[type=text], .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .input-emp[type=text] { position: absolute; top: 0; left: 0; @@ -11404,10 +11406,10 @@ ol, ul { font-weight: 400; line-height: 1.5rem; letter-spacing: 0; } - .digit-multi-select-dropdown-wrap .digit-master input[type=text]:focus, .digit-multi-select-dropdown-wrap .digit-master .checkbox-wrap .input-emp[type=text]:focus, .checkbox-wrap .digit-multi-select-dropdown-wrap .digit-master .input-emp[type=text]:focus, .digit-multi-select-dropdown-wrap .digit-master .digit-checkbox-wrap .input-emp[type=text]:focus, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .digit-master .input-emp[type=text]:focus, .digit-multi-select-dropdown-wrap .digit-master-active input[type=text]:focus, .digit-multi-select-dropdown-wrap .digit-master-active .checkbox-wrap .input-emp[type=text]:focus, .checkbox-wrap .digit-multi-select-dropdown-wrap .digit-master-active .input-emp[type=text]:focus, .digit-multi-select-dropdown-wrap .digit-master-active .digit-checkbox-wrap .input-emp[type=text]:focus, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .digit-master-active .input-emp[type=text]:focus { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master input[type=text]:focus, .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .checkbox-wrap .input-emp[type=text]:focus, .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .input-emp[type=text]:focus, .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .digit-checkbox-wrap .input-emp[type=text]:focus, .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .input-emp[type=text]:focus, .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active input[type=text]:focus, .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .checkbox-wrap .input-emp[type=text]:focus, .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .input-emp[type=text]:focus, .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .digit-checkbox-wrap .input-emp[type=text]:focus, .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .input-emp[type=text]:focus { outline: 2px solid transparent; outline-offset: 2px; } - .digit-multi-select-dropdown-wrap .digit-master .digit-label, .digit-multi-select-dropdown-wrap .digit-master-active .digit-label { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .digit-multiselectdropdown-label, .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .digit-multiselectdropdown-label { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -11417,16 +11419,16 @@ ol, ul { padding: 8px; width: 100%; height: 100%; } - .digit-multi-select-dropdown-wrap .digit-master .digit-label svg, .digit-multi-select-dropdown-wrap .digit-master-active .digit-label svg { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .digit-multiselectdropdown-label svg, .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .digit-multiselectdropdown-label svg { height: 1.5rem; width: 1.5rem; } - .digit-multi-select-dropdown-wrap .digit-master.disabled { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master.disabled { pointer-events: none !important; border: 0.063rem solid #d6d5d4 !important; color: #d6d5d4 !important; } - .digit-multi-select-dropdown-wrap .digit-master-active { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active { border: .063rem solid #f47738; } - .digit-multi-select-dropdown-wrap .digit-server { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-server { top: 2.5rem; position: absolute; z-index: 20; @@ -11439,18 +11441,18 @@ ol, ul { -webkit-box-shadow: 0 0.063rem 0.275rem 0 rgba(0, 0, 0, 0.14902); box-shadow: 0 0.063rem 0.275rem 0 rgba(0, 0, 0, 0.14902); width: 100% !important; } - .digit-multi-select-dropdown-wrap .digit-server::-webkit-scrollbar-track { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-server::-webkit-scrollbar-track { background-color: #f5f5f5; border-radius: .625rem; } - .digit-multi-select-dropdown-wrap .digit-server::-webkit-scrollbar { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-server::-webkit-scrollbar { width: .625rem; background-color: #f5f5f5; } - .digit-multi-select-dropdown-wrap .digit-server::-webkit-scrollbar-thumb { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-server::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: .625rem; } - .digit-multi-select-dropdown-wrap .digit-server::-webkit-scrollbar-thumb:hover { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-server::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; } - .digit-multi-select-dropdown-wrap .digit-nested-category { + .digit-multiselectdropdown-wrap .digit-nested-category { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -11464,16 +11466,16 @@ ol, ul { padding: 1rem .625rem; grid-gap: .625rem; gap: .625rem; } - .digit-multi-select-dropdown-wrap .digit-nested-category:not(:first-child) { + .digit-multiselectdropdown-wrap .digit-nested-category:not(:first-child) { margin-top: 1rem; } - .digit-multi-select-dropdown-wrap .digit-category-name { + .digit-multiselectdropdown-wrap .digit-category-name { font-weight: 700; color: #505a5f; font-family: Roboto; font-size: 1rem; font-style: normal; line-height: normal; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -11488,48 +11490,48 @@ ol, ul { -ms-flex-align: center; align-items: center; min-height: 2.438rem; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .option-des-container { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .option-des-container { width: 100%; max-width: 100%; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; margin: .594rem 0; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .option-des-container .svg { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .option-des-container .svg { -ms-flex-negative: 0; flex-shrink: 0; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedmultiselect { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedmultiselect { position: relative; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedmultiselect:before { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedmultiselect:before { content: ""; position: absolute; bottom: 0; left: .625rem; right: .625rem; border-bottom: .063rem solid #d6d5d4; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedmultiselect:active:before, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedmultiselect:hover:before { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedmultiselect:active:before, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedmultiselect:hover:before { border-bottom: none; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem:not(.nestedmultiselect):not(.checked):not(:active):not(:hover):nth-of-type(2n) { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:not(.nestedmultiselect):not(.checked):not(:active):not(:hover):nth-of-type(2n) { background: #fafafa; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem:hover { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:hover { background: #fffaf7; border: .031rem solid #f47738; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem:active, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem:active:hover { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover { background: #f47738; border: .031rem solid #f47738; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem:active p, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem:active:hover p { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover p { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.188rem; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem input, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .checkbox-wrap .input-emp, .checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem input, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .checkbox-wrap .input-emp, .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp { min-height: 2.438rem; position: absolute; min-width: 100%; opacity: 0; z-index: 20; cursor: pointer; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem p { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem p { width: 100%; overflow: hidden; white-space: nowrap; @@ -11540,29 +11542,29 @@ ol, ul { line-height: 1.125rem; color: #0b0c0c; margin: .063rem 0; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.checked { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked { background: #f47738; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.checked p { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked p { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.188rem; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-custom-checkbox-emp { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .digit-multiselectdropodwn-custom-checkbox { height: 1.25rem; width: 1.25rem; border: .063rem solid #505a5f; margin: .594rem .75rem .594rem .625rem; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-custom-checkbox svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .digit-custom-checkbox-emp svg, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-custom-checkbox-emp svg { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .digit-multiselectdropodwn-custom-checkbox svg { opacity: 0; z-index: 10; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem input:active ~ .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .checkbox-wrap .input-emp:active ~ .digit-custom-checkbox, .checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:active ~ .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .input-emp:active ~ .digit-custom-checkbox, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:active ~ .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap input:active ~ .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem input:active ~ .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .checkbox-wrap .input-emp:active ~ .digit-custom-checkbox-emp, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .input-emp:active ~ .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:active ~ .digit-custom-checkbox-emp, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem input:checked ~ .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .checkbox-wrap .input-emp:checked ~ .digit-custom-checkbox, .checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:checked ~ .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .input-emp:checked ~ .digit-custom-checkbox, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:checked ~ .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap input:checked ~ .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem input:checked ~ .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .checkbox-wrap .input-emp:checked ~ .digit-custom-checkbox-emp, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .input-emp:checked ~ .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:checked ~ .digit-custom-checkbox-emp { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem input:active ~ .digit-multiselectdropodwn-custom-checkbox, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .checkbox-wrap .input-emp:active ~ .digit-multiselectdropodwn-custom-checkbox, .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp:active ~ .digit-multiselectdropodwn-custom-checkbox, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .digit-checkbox-wrap .input-emp:active ~ .digit-multiselectdropodwn-custom-checkbox, .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp:active ~ .digit-multiselectdropodwn-custom-checkbox, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem input:checked ~ .digit-multiselectdropodwn-custom-checkbox, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .checkbox-wrap .input-emp:checked ~ .digit-multiselectdropodwn-custom-checkbox, .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp:checked ~ .digit-multiselectdropodwn-custom-checkbox, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .digit-checkbox-wrap .input-emp:checked ~ .digit-multiselectdropodwn-custom-checkbox, .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp:checked ~ .digit-multiselectdropodwn-custom-checkbox { border: .125rem solid #fff; background-color: #f47738; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem input:active ~ .digit-custom-checkbox svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .checkbox-wrap .input-emp:active ~ .digit-custom-checkbox svg, .checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:active ~ .digit-custom-checkbox svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .input-emp:active ~ .digit-custom-checkbox svg, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:active ~ .digit-custom-checkbox svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap input:active ~ .digit-custom-checkbox-emp svg, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem input:active ~ .digit-custom-checkbox-emp svg, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .checkbox-wrap .input-emp:active ~ .digit-custom-checkbox-emp svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .input-emp:active ~ .digit-custom-checkbox-emp svg, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:active ~ .digit-custom-checkbox-emp svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem input:checked ~ .digit-custom-checkbox svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .checkbox-wrap .input-emp:checked ~ .digit-custom-checkbox svg, .checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:checked ~ .digit-custom-checkbox svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .input-emp:checked ~ .digit-custom-checkbox svg, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:checked ~ .digit-custom-checkbox svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap input:checked ~ .digit-custom-checkbox-emp svg, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem input:checked ~ .digit-custom-checkbox-emp svg, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .checkbox-wrap .input-emp:checked ~ .digit-custom-checkbox-emp svg, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .digit-checkbox-wrap .input-emp:checked ~ .digit-custom-checkbox-emp svg, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem .input-emp:checked ~ .digit-custom-checkbox-emp svg { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem input:active ~ .digit-multiselectdropodwn-custom-checkbox svg, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .checkbox-wrap .input-emp:active ~ .digit-multiselectdropodwn-custom-checkbox svg, .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp:active ~ .digit-multiselectdropodwn-custom-checkbox svg, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .digit-checkbox-wrap .input-emp:active ~ .digit-multiselectdropodwn-custom-checkbox svg, .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp:active ~ .digit-multiselectdropodwn-custom-checkbox svg, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem input:checked ~ .digit-multiselectdropodwn-custom-checkbox svg, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .checkbox-wrap .input-emp:checked ~ .digit-multiselectdropodwn-custom-checkbox svg, .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp:checked ~ .digit-multiselectdropodwn-custom-checkbox svg, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .digit-checkbox-wrap .input-emp:checked ~ .digit-multiselectdropodwn-custom-checkbox svg, .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem .input-emp:checked ~ .digit-multiselectdropodwn-custom-checkbox svg { opacity: 1; width: 1rem; height: 1rem; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect { padding: .5rem 1rem; grid-gap: .75rem; gap: .75rem; @@ -11570,9 +11572,9 @@ ol, ul { -ms-flex-align: start !important; align-items: flex-start !important; min-height: 4.75rem; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect input, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .checkbox-wrap .input-emp, .checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .input-emp, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .input-emp { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect input, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect .checkbox-wrap .input-emp, .checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect .input-emp, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect .input-emp { min-height: 3.75rem; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .option-des-container { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect .option-des-container { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -11588,38 +11590,38 @@ ol, ul { align-items: flex-start; width: 100% !important; margin: 0; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .option-des-container p { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect .option-des-container p { color: #505a5f; font-size: 1rem; line-height: 1.5rem; padding: 0; margin-bottom: 0; margin-top: 0; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .option-des-container .option-description { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect .option-des-container .option-description { color: #505a5f; font-family: Roboto; font-size: .75rem; font-style: normal; font-weight: 400; line-height: 1.125rem; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .option-des-container .svg { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect .option-des-container .svg { -ms-flex-negative: 0; flex-shrink: 0; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .digit-checkbox-wrap .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect .digit-custom-checkbox-emp { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect .digit-multiselectdropodwn-custom-checkbox { margin: .125rem 0 0; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect.checked .option-description, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect.checked p, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect:active .option-description, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect:active p { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .option-description, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .option-description, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active p { color: #fff; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect.checked p, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect:active p { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active p { font-weight: 700; font-size: 1rem; line-height: 1.188rem; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect.checked .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect.checked .digit-checkbox-wrap .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect.checked .digit-custom-checkbox-emp, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect:active .digit-custom-checkbox, .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect:active .digit-checkbox-wrap .digit-custom-checkbox-emp, .digit-checkbox-wrap .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect:active .digit-custom-checkbox-emp { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .digit-multiselectdropodwn-custom-checkbox, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .digit-multiselectdropodwn-custom-checkbox { margin-top: 0; } - .digit-multi-select-dropdown-wrap .multiselect-dropodwn-menuitem.nestedtextmultiselect:active { + .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active { background: #f47738; } - .digit-multi-select-dropdown-wrap .digit-cursorPointer { + .digit-multiselectdropdown-wrap .digit-cursorPointer { cursor: pointer; } - .digit-multi-select-dropdown-wrap .digit-master .digit-label p, .digit-multi-select-dropdown-wrap .digit-master-active .digit-label p { + .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master .digit-multiselectdropdown-label p, .digit-multiselectdropdown-wrap .digit-multiselectdropdown-master-active .digit-multiselectdropdown-label p { white-space: pre; margin: auto auto auto 0; padding-left: 1%; @@ -11737,11 +11739,11 @@ ol, ul { .digit-radio-wrap { line-height: 2.5rem; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - grid-gap: "3rem"; - gap: "3rem"; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; margin-bottom: .5rem; } @media (max-width: 30rem) { .digit-radio-wrap { @@ -11769,11 +11771,11 @@ ol, ul { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; grid-gap: .5rem; - gap: .5rem; } + gap: .5rem; + -webkit-box-align: self-start; + -ms-flex-align: self-start; + align-items: self-start; } .digit-radio-wrap .radio-option-container.disabled .digit-radio-btn-checkmark { border: .063rem solid #b1b4b6; background-color: #fafafa; } @@ -11783,12 +11785,17 @@ ol, ul { border: .125rem solid #b1b4b6; } .digit-radio-wrap .radio-option-container.disabled label, .digit-radio-wrap .radio-option-container.preselected label { color: #b1b4b6; } + .digit-radio-wrap .radio-option-container label:only-child { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } .digit-radio-wrap .digit-radio-btn { opacity: 0; position: absolute; cursor: pointer; - height: 2.5rem; - width: 2.5rem; } + height: 1.5rem; + width: 1.5rem; + margin: 0; } .digit-radio-wrap .digit-radio-btn-checkmark { height: 1.5rem; width: 1.5rem; @@ -11799,7 +11806,9 @@ ol, ul { display: block; } .digit-radio-wrap label { line-height: 1.172rem; - color: #0b0c0c; } + color: #0b0c0c; + word-wrap: anywhere; + margin-top: .25rem; } .digit-radio-wrap .digit-radio-btn-checkmark:after { content: ""; } .digit-radio-wrap .digit-radio-btn-wrap input:checked ~ .digit-radio-btn-checkmark, .digit-radio-wrap .digit-radio-btn-wrap .checkbox-wrap .input-emp:checked ~ .digit-radio-btn-checkmark, .checkbox-wrap .digit-radio-wrap .digit-radio-btn-wrap .input-emp:checked ~ .digit-radio-btn-checkmark, .digit-radio-wrap .digit-radio-btn-wrap .digit-checkbox-wrap .input-emp:checked ~ .digit-radio-btn-checkmark, .digit-checkbox-wrap .digit-radio-wrap .digit-radio-btn-wrap .input-emp:checked ~ .digit-radio-btn-checkmark { @@ -12003,11 +12012,11 @@ ol, ul { width: 100% !important; margin-bottom: 15px; } } -.digit-employee-select-wrap { +.digit-dropdown-employee-select-wrap { width: 100%; position: relative; max-width: 37.5rem; } - .digit-employee-select-wrap .digit-select { + .digit-dropdown-employee-select-wrap .digit-dropdown-select { position: relative; display: block; width: 100%; @@ -12016,13 +12025,13 @@ ol, ul { background-color: #fff; background-color: rgba(255, 255, 255, var(--bg-opacity)); border: .063rem solid #505a5f; } - .digit-employee-select-wrap .digit-select.digit-field-error { + .digit-dropdown-employee-select-wrap .digit-dropdown-select.digit-field-error { border: .063rem solid #d4351c; } - .digit-employee-select-wrap .digit-select.disabled { + .digit-dropdown-employee-select-wrap .digit-dropdown-select.disabled { pointer-events: none !important; border: 0.063rem solid #d6d5d4 !important; color: #d6d5d4 !important; } - .digit-employee-select-wrap .digit-select input[type=text], .digit-employee-select-wrap .digit-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-employee-select-wrap .digit-select .input-emp[type=text], .digit-employee-select-wrap .digit-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-employee-select-wrap .digit-select .input-emp[type=text] { + .digit-dropdown-employee-select-wrap .digit-dropdown-select input[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select .input-emp[type=text] { width: calc(100% - 2rem); background-color: initial; position: absolute; @@ -12036,33 +12045,33 @@ ol, ul { padding-top: .5rem; padding-bottom: .5rem; padding-left: .75rem; } - .digit-employee-select-wrap .digit-select input[type=text], .digit-employee-select-wrap .digit-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-employee-select-wrap .digit-select .input-emp[type=text], .digit-employee-select-wrap .digit-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-employee-select-wrap .digit-select .input-emp[type=text], .digit-employee-select-wrap .digit-select p { + .digit-dropdown-employee-select-wrap .digit-dropdown-select input[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select p { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } - .digit-employee-select-wrap .digit-select p { + .digit-dropdown-employee-select-wrap .digit-dropdown-select p { padding-top: .563rem; font-size: 16px; line-height: 20px; float: left; margin-left: 8px; } - .digit-employee-select-wrap .digit-select img, .digit-employee-select-wrap .digit-select svg { + .digit-dropdown-employee-select-wrap .digit-dropdown-select img, .digit-dropdown-employee-select-wrap .digit-dropdown-select svg { float: right; height: 1.5rem; width: 1.5rem; margin-top: 8px; margin-right: 8px; } - .digit-employee-select-wrap .digit-select svg { + .digit-dropdown-employee-select-wrap .digit-dropdown-select svg { position: absolute; right: 0; margin-bottom: 8px; } - .digit-employee-select-wrap .digit-select-active { + .digit-dropdown-employee-select-wrap .digit-dropdown-select-active { position: relative; display: block; width: 100%; height: 2.5rem; border: .063rem solid #f47738; } - .digit-employee-select-wrap .digit-select-active input[type=text], .digit-employee-select-wrap .digit-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-employee-select-wrap .digit-select-active .input-emp[type=text], .digit-employee-select-wrap .digit-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-employee-select-wrap .digit-select-active .input-emp[type=text] { + .digit-dropdown-employee-select-wrap .digit-dropdown-select-active input[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .input-emp[type=text] { width: calc(100% - 2rem); background-color: initial; position: absolute; @@ -12076,27 +12085,27 @@ ol, ul { padding-top: .5rem; padding-bottom: .5rem; padding-left: .75rem; } - .digit-employee-select-wrap .digit-select-active input[type=text], .digit-employee-select-wrap .digit-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-employee-select-wrap .digit-select-active .input-emp[type=text], .digit-employee-select-wrap .digit-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-employee-select-wrap .digit-select-active .input-emp[type=text], .digit-employee-select-wrap .digit-select-active p { + .digit-dropdown-employee-select-wrap .digit-dropdown-select-active input[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select-active p { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } - .digit-employee-select-wrap .digit-select-active p { + .digit-dropdown-employee-select-wrap .digit-dropdown-select-active p { font-size: 16px; line-height: 20px; float: left; margin-left: 8px; padding-top: .563rem; } - .digit-employee-select-wrap .digit-select-active img, .digit-employee-select-wrap .digit-select-active svg { + .digit-dropdown-employee-select-wrap .digit-dropdown-select-active img, .digit-dropdown-employee-select-wrap .digit-dropdown-select-active svg { float: right; height: 1.5rem; width: 1.5rem; margin-top: 8px; margin-right: 8px; } - .digit-employee-select-wrap .digit-select-active svg { + .digit-dropdown-employee-select-wrap .digit-dropdown-select-active svg { position: absolute; right: 0; margin-bottom: 8px; } - .digit-employee-select-wrap .digit-options-card { + .digit-dropdown-employee-select-wrap .digit-options-card { width: 100% !important; -webkit-box-shadow: 0 0.063rem 0.275rem 0 rgba(0, 0, 0, 0.14902); box-shadow: 0 0.063rem 0.275rem 0 rgba(0, 0, 0, 0.14902); @@ -12109,7 +12118,7 @@ ol, ul { max-width: 100%; overflow-y: auto; overflow-x: hidden; } - .digit-employee-select-wrap .digit-options-card p { + .digit-dropdown-employee-select-wrap .digit-options-card p { padding-top: .875rem; width: 100%; height: 3rem; @@ -12119,11 +12128,11 @@ ol, ul { color: rgba(11, 12, 12, var(--text-opacity)); font-size: 16px; line-height: 20px; } - .digit-employee-select-wrap .digit-options-card p:hover { + .digit-dropdown-employee-select-wrap .digit-options-card p:hover { --bg-opacity:1; background-color: #eee; background-color: rgba(238, 238, 238, var(--bg-opacity)); } - .digit-employee-select-wrap .digit-select.notSearchable, .digit-employee-select-wrap .digit-select.treedropdown, .digit-employee-select-wrap .digit-select-active.notSearchable, .digit-employee-select-wrap .digit-select-active.treedropdown { + .digit-dropdown-employee-select-wrap .digit-dropdown-select.notSearchable, .digit-dropdown-employee-select-wrap .digit-dropdown-select.treedropdown, .digit-dropdown-employee-select-wrap .digit-dropdown-select-active.notSearchable, .digit-dropdown-employee-select-wrap .digit-dropdown-select-active.treedropdown { cursor: pointer; } .digit-options-card::-webkit-scrollbar-track { @@ -12268,34 +12277,34 @@ ol, ul { align-items: center; color: #505a5f !important; } -.digit-employee-select-wrap--elipses { +.digit-dropdown-employee-select-wrap--elipses { overflow: hidden; white-space: nowrap; width: 85% !important; text-overflow: ellipsis; } - .digit-employee-select-wrap--elipses.notSearchable, .digit-employee-select-wrap--elipses.treedropdown { + .digit-dropdown-employee-select-wrap--elipses.notSearchable, .digit-dropdown-employee-select-wrap--elipses.treedropdown { pointer-events: none; } -.digit-select-wrap { +.digit-dropdown-select-wrap { margin-bottom: 24px; position: relative; --bg-opacity:1; background-color: #fff; background-color: rgba(255, 255, 255, var(--bg-opacity)); } @media (min-width: 30.063rem) and (max-width: 47.938rem) { - .digit-select-wrap { + .digit-dropdown-select-wrap { max-width: 27.5rem; min-width: 12.5rem; } } @media (max-width: 30rem) { - .digit-select-wrap { + .digit-dropdown-select-wrap { max-width: 20.5rem; min-width: 9.75rem; width: 100%; } } @media (min-width: 48rem) { - .digit-select-wrap { + .digit-dropdown-select-wrap { max-width: 37.5rem; min-width: 12.5rem; } } - .digit-select-wrap .digit-select { + .digit-dropdown-select-wrap .digit-dropdown-select { position: relative; display: block; width: 100%; @@ -12304,7 +12313,7 @@ ol, ul { background-color: #fff; background-color: rgba(255, 255, 255, var(--bg-opacity)); border: .063rem solid #505a5f; } - .digit-select-wrap .digit-select input[type=text], .digit-select-wrap .digit-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-select-wrap .digit-select .input-emp[type=text], .digit-select-wrap .digit-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-select-wrap .digit-select .input-emp[type=text] { + .digit-dropdown-select-wrap .digit-dropdown-select input[type=text], .digit-dropdown-select-wrap .digit-dropdown-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select .input-emp[type=text], .digit-dropdown-select-wrap .digit-dropdown-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select .input-emp[type=text] { width: calc(100% - 2rem); background-color: initial; position: absolute; @@ -12321,11 +12330,11 @@ ol, ul { padding-top: .5rem; padding-bottom: .5rem; padding-left: .75rem; } - .digit-select-wrap .digit-select.disabled { + .digit-dropdown-select-wrap .digit-dropdown-select.disabled { pointer-events: none !important; border: 0.063rem solid #d6d5d4 !important; color: #d6d5d4 !important; } - .digit-select-wrap .digit-select p { + .digit-dropdown-select-wrap .digit-dropdown-select p { padding-top: .563rem; font-size: 16px; line-height: 20px; @@ -12334,23 +12343,23 @@ ol, ul { color: rgba(11, 12, 12, var(--text-opacity)); float: left; margin-left: 8px; } - .digit-select-wrap .digit-select img, .digit-select-wrap .digit-select svg { + .digit-dropdown-select-wrap .digit-dropdown-select img, .digit-dropdown-select-wrap .digit-dropdown-select svg { float: right; height: 1.5rem; width: 1.5rem; margin-top: 8px; margin-right: 8px; } - .digit-select-wrap .digit-select svg { + .digit-dropdown-select-wrap .digit-dropdown-select svg { position: absolute; right: 0; margin-bottom: 8px; } - .digit-select-wrap .digit-select-active { + .digit-dropdown-select-wrap .digit-dropdown-select-active { position: relative; display: block; width: 100%; height: 2.5rem; border: .063rem solid #f47738; } - .digit-select-wrap .digit-select-active input[type=text], .digit-select-wrap .digit-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-select-wrap .digit-select-active .input-emp[type=text], .digit-select-wrap .digit-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-select-wrap .digit-select-active .input-emp[type=text] { + .digit-dropdown-select-wrap .digit-dropdown-select-active input[type=text], .digit-dropdown-select-wrap .digit-dropdown-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-select-wrap .digit-dropdown-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select-active .input-emp[type=text] { width: calc(100% - 2rem); background-color: initial; position: absolute; @@ -12364,29 +12373,29 @@ ol, ul { padding-top: .5rem; padding-bottom: .5rem; padding-left: .75rem; } - .digit-select-wrap .digit-select-active input[type=text], .digit-select-wrap .digit-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-select-wrap .digit-select-active .input-emp[type=text], .digit-select-wrap .digit-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-select-wrap .digit-select-active .input-emp[type=text], .digit-select-wrap .digit-select-active p { + .digit-dropdown-select-wrap .digit-dropdown-select-active input[type=text], .digit-dropdown-select-wrap .digit-dropdown-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-select-wrap .digit-dropdown-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-select-wrap .digit-dropdown-select-active p { --text-opacity:1; color: #0b0c0c; color: rgba(11, 12, 12, var(--text-opacity)); } - .digit-select-wrap .digit-select-active p { + .digit-dropdown-select-wrap .digit-dropdown-select-active p { font-size: 16px; line-height: 20px; float: left; margin-left: 8px; padding-top: .563rem; } - .digit-select-wrap .digit-select-active img, .digit-select-wrap .digit-select-active svg { + .digit-dropdown-select-wrap .digit-dropdown-select-active img, .digit-dropdown-select-wrap .digit-dropdown-select-active svg { float: right; height: 1.5rem; width: 1.5rem; margin-top: 8px; margin-right: 8px; } - .digit-select-wrap .digit-select-active svg { + .digit-dropdown-select-wrap .digit-dropdown-select-active svg { position: absolute; right: 0; margin-bottom: 8px; } - .digit-select-wrap .digit-select.notSearchable, .digit-select-wrap .digit-select.treedropdown, .digit-select-wrap .digit-select-active.notSearchable, .digit-select-wrap .digit-select-active.treedropdown { + .digit-dropdown-select-wrap .digit-dropdown-select.notSearchable, .digit-dropdown-select-wrap .digit-dropdown-select.treedropdown, .digit-dropdown-select-wrap .digit-dropdown-select-active.notSearchable, .digit-dropdown-select-wrap .digit-dropdown-select-active.treedropdown { cursor: pointer; } - .digit-select-wrap .digit-options-card { + .digit-dropdown-select-wrap .digit-options-card { width: 100% !important; -webkit-box-shadow: 0 0.063rem 0.275rem 0 rgba(0, 0, 0, 0.14902); box-shadow: 0 0.063rem 0.275rem 0 rgba(0, 0, 0, 0.14902); @@ -12398,7 +12407,7 @@ ol, ul { overflow-y: auto; overflow-x: hidden; max-height: 25vmax; } - .digit-select-wrap .digit-options-card p { + .digit-dropdown-select-wrap .digit-options-card p { padding-top: .875rem; width: 100%; height: 3rem; @@ -12408,7 +12417,7 @@ ol, ul { color: rgba(11, 12, 12, var(--text-opacity)); font-size: 16px; line-height: 20px; } - .digit-select-wrap .digit-options-card p:hover { + .digit-dropdown-select-wrap .digit-options-card p:hover { --bg-opacity:1; background-color: #eee; background-color: rgba(238, 238, 238, var(--bg-opacity)); } @@ -12552,12 +12561,12 @@ ol, ul { color: #505a5f; } .digit-card-textarea.error, .digit-employee-card-textarea.error { border: .094rem solid #d4351c; } + .digit-card-textarea:hover, .digit-employee-card-textarea:hover { + overflow-y: auto; } .digit-card-textarea.resize-smart, .digit-employee-card-textarea.resize-smart { min-height: 6rem; overflow: hidden; resize: none; } - .digit-card-textarea:hover, .digit-employee-card-textarea:hover { - overflow-y: auto; } textarea::-webkit-scrollbar { width: .625rem; @@ -12595,6 +12604,9 @@ textarea::-webkit-scrollbar-thumb:hover { border: .094rem solid #f47738; overflow-y: auto; } +.digit-card-textarea.resize-smart:focus, .digit-card-textarea.resize-smart:hover, .digit-employee-card-textarea.resize-smart:focus, .digit-employee-card-textarea.resize-smart:hover { + overflow: hidden; } + .digit-text-input { position: relative; width: 100%; } @@ -12646,7 +12658,7 @@ textarea::-webkit-scrollbar-thumb:hover { visibility: visible; -webkit-filter: invert(85%) sepia(0) saturate(337%) hue-rotate(50deg) brightness(99%) contrast(99%); filter: invert(85%) sepia(0) saturate(337%) hue-rotate(50deg) brightness(99%) contrast(99%); } - .digit-text-input input[type=date]:disabled::-webkit-datetime-edit, .digit-text-input .checkbox-wrap .input-emp[type=date]:disabled::-webkit-datetime-edit, .checkbox-wrap .digit-text-input .input-emp[type=date]:disabled::-webkit-datetime-edit, .digit-text-input .digit-checkbox-wrap .input-emp[type=date]:disabled::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input .input-emp[type=date]:disabled::-webkit-datetime-edit, .digit-text-input input[type=date]:in-range::-webkit-datetime-edit, .digit-text-input .checkbox-wrap .input-emp[type=date]:in-range::-webkit-datetime-edit, .checkbox-wrap .digit-text-input .input-emp[type=date]:in-range::-webkit-datetime-edit, .digit-text-input .digit-checkbox-wrap .input-emp[type=date]:in-range::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input .input-emp[type=date]:in-range::-webkit-datetime-edit, .digit-text-input input[type=search]::-webkit-search-cancel-button, .digit-text-input .checkbox-wrap .input-emp[type=search]::-webkit-search-cancel-button, .checkbox-wrap .digit-text-input .input-emp[type=search]::-webkit-search-cancel-button, .digit-text-input .digit-checkbox-wrap .input-emp[type=search]::-webkit-search-cancel-button, .digit-checkbox-wrap .digit-text-input .input-emp[type=search]::-webkit-search-cancel-button, .digit-text-input input[type=search]::-webkit-search-clear-button, .digit-text-input .checkbox-wrap .input-emp[type=search]::-webkit-search-clear-button, .checkbox-wrap .digit-text-input .input-emp[type=search]::-webkit-search-clear-button, .digit-text-input .digit-checkbox-wrap .input-emp[type=search]::-webkit-search-clear-button, .digit-checkbox-wrap .digit-text-input .input-emp[type=search]::-webkit-search-clear-button, .digit-text-input input[type=time]:disabled::-webkit-datetime-edit, .digit-text-input .checkbox-wrap .input-emp[type=time]:disabled::-webkit-datetime-edit, .checkbox-wrap .digit-text-input .input-emp[type=time]:disabled::-webkit-datetime-edit, .digit-text-input .digit-checkbox-wrap .input-emp[type=time]:disabled::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input .input-emp[type=time]:disabled::-webkit-datetime-edit, .digit-text-input input[type=time]:in-range::-webkit-datetime-edit, .digit-text-input .checkbox-wrap .input-emp[type=time]:in-range::-webkit-datetime-edit, .checkbox-wrap .digit-text-input .input-emp[type=time]:in-range::-webkit-datetime-edit, .digit-text-input .digit-checkbox-wrap .input-emp[type=time]:in-range::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input .input-emp[type=time]:in-range::-webkit-datetime-edit { + .digit-text-input input[type=date]:disabled::-webkit-datetime-edit, .digit-text-input .checkbox-wrap .input-emp[type=date]:disabled::-webkit-datetime-edit, .checkbox-wrap .digit-text-input .input-emp[type=date]:disabled::-webkit-datetime-edit, .digit-text-input .digit-checkbox-wrap .input-emp[type=date]:disabled::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input .input-emp[type=date]:disabled::-webkit-datetime-edit, .digit-text-input input[type=date][value=""]::-webkit-datetime-edit, .digit-text-input .checkbox-wrap .input-emp[type=date][value=""]::-webkit-datetime-edit, .checkbox-wrap .digit-text-input .input-emp[type=date][value=""]::-webkit-datetime-edit, .digit-text-input .digit-checkbox-wrap .input-emp[type=date][value=""]::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input .input-emp[type=date][value=""]::-webkit-datetime-edit, .digit-text-input input[type=search]::-webkit-search-cancel-button, .digit-text-input .checkbox-wrap .input-emp[type=search]::-webkit-search-cancel-button, .checkbox-wrap .digit-text-input .input-emp[type=search]::-webkit-search-cancel-button, .digit-text-input .digit-checkbox-wrap .input-emp[type=search]::-webkit-search-cancel-button, .digit-checkbox-wrap .digit-text-input .input-emp[type=search]::-webkit-search-cancel-button, .digit-text-input input[type=search]::-webkit-search-clear-button, .digit-text-input .checkbox-wrap .input-emp[type=search]::-webkit-search-clear-button, .checkbox-wrap .digit-text-input .input-emp[type=search]::-webkit-search-clear-button, .digit-text-input .digit-checkbox-wrap .input-emp[type=search]::-webkit-search-clear-button, .digit-checkbox-wrap .digit-text-input .input-emp[type=search]::-webkit-search-clear-button, .digit-text-input input[type=time]:disabled::-webkit-datetime-edit, .digit-text-input .checkbox-wrap .input-emp[type=time]:disabled::-webkit-datetime-edit, .checkbox-wrap .digit-text-input .input-emp[type=time]:disabled::-webkit-datetime-edit, .digit-text-input .digit-checkbox-wrap .input-emp[type=time]:disabled::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input .input-emp[type=time]:disabled::-webkit-datetime-edit, .digit-text-input input[type=time][value=""]::-webkit-datetime-edit, .digit-text-input .checkbox-wrap .input-emp[type=time][value=""]::-webkit-datetime-edit, .checkbox-wrap .digit-text-input .input-emp[type=time][value=""]::-webkit-datetime-edit, .digit-text-input .digit-checkbox-wrap .input-emp[type=time][value=""]::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input .input-emp[type=time][value=""]::-webkit-datetime-edit { display: none; } .digit-text-input ::-webkit-input-placeholder { content: attr(placeholder); @@ -12762,30 +12774,6 @@ textarea::-webkit-scrollbar-thumb:hover { border-right-style: hidden; } .digit-text-input.error.prefix input, .digit-text-input.error.prefix .checkbox-wrap .input-emp, .checkbox-wrap .digit-text-input.error.prefix .input-emp, .digit-text-input.error.prefix .digit-checkbox-wrap .input-emp, .digit-checkbox-wrap .digit-text-input.error.prefix .input-emp { border-left-style: hidden; } - .digit-text-input.editableTime input[type=time]:disabled::-webkit-datetime-edit, .digit-text-input.editableTime .checkbox-wrap .input-emp[type=time]:disabled::-webkit-datetime-edit, .checkbox-wrap .digit-text-input.editableTime .input-emp[type=time]:disabled::-webkit-datetime-edit, .digit-text-input.editableTime .digit-checkbox-wrap .input-emp[type=time]:disabled::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input.editableTime .input-emp[type=time]:disabled::-webkit-datetime-edit, .digit-text-input.editableTime input[type=time]:in-range::-webkit-datetime-edit, .digit-text-input.editableTime .checkbox-wrap .input-emp[type=time]:in-range::-webkit-datetime-edit, .checkbox-wrap .digit-text-input.editableTime .input-emp[type=time]:in-range::-webkit-datetime-edit, .digit-text-input.editableTime .digit-checkbox-wrap .input-emp[type=time]:in-range::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input.editableTime .input-emp[type=time]:in-range::-webkit-datetime-edit { - display: block !important; } - .digit-text-input.editableTime input[type=time][value=""]:not(:-moz-placeholder-shown):before, .digit-text-input.editableTime .checkbox-wrap .input-emp[type=time][value=""]:not(:-moz-placeholder-shown):before, .checkbox-wrap .digit-text-input.editableTime .input-emp[type=time][value=""]:not(:-moz-placeholder-shown):before, .digit-text-input.editableTime .digit-checkbox-wrap .input-emp[type=time][value=""]:not(:-moz-placeholder-shown):before, .digit-checkbox-wrap .digit-text-input.editableTime .input-emp[type=time][value=""]:not(:-moz-placeholder-shown):before { - display: none !important; } - .digit-text-input.editableTime input[type=time][value=""]:not(:-ms-input-placeholder):before, .digit-text-input.editableTime .checkbox-wrap .input-emp[type=time][value=""]:not(:-ms-input-placeholder):before, .checkbox-wrap .digit-text-input.editableTime .input-emp[type=time][value=""]:not(:-ms-input-placeholder):before, .digit-text-input.editableTime .digit-checkbox-wrap .input-emp[type=time][value=""]:not(:-ms-input-placeholder):before, .digit-checkbox-wrap .digit-text-input.editableTime .input-emp[type=time][value=""]:not(:-ms-input-placeholder):before { - display: none !important; } - .digit-text-input.editableTime input[type="time"][value=""]:not(:-moz-placeholder-shown)::before, .digit-text-input.editableTime .checkbox-wrap .input-emp[type="time"][value=""]:not(:-moz-placeholder-shown)::before, .checkbox-wrap .digit-text-input.editableTime .input-emp[type="time"][value=""]:not(:-moz-placeholder-shown)::before, .digit-text-input.editableTime .digit-checkbox-wrap .input-emp[type="time"][value=""]:not(:-moz-placeholder-shown)::before, .digit-checkbox-wrap .digit-text-input.editableTime .input-emp[type="time"][value=""]:not(:-moz-placeholder-shown)::before { - display: none !important; } - .digit-text-input.editableTime input[type="time"][value=""]:not(:-ms-input-placeholder)::before, .digit-text-input.editableTime .checkbox-wrap .input-emp[type="time"][value=""]:not(:-ms-input-placeholder)::before, .checkbox-wrap .digit-text-input.editableTime .input-emp[type="time"][value=""]:not(:-ms-input-placeholder)::before, .digit-text-input.editableTime .digit-checkbox-wrap .input-emp[type="time"][value=""]:not(:-ms-input-placeholder)::before, .digit-checkbox-wrap .digit-text-input.editableTime .input-emp[type="time"][value=""]:not(:-ms-input-placeholder)::before { - display: none !important; } - .digit-text-input.editableTime input[type=time][value=""]:not(:placeholder-shown):before, .digit-text-input.editableTime .checkbox-wrap .input-emp[type=time][value=""]:not(:placeholder-shown):before, .checkbox-wrap .digit-text-input.editableTime .input-emp[type=time][value=""]:not(:placeholder-shown):before, .digit-text-input.editableTime .digit-checkbox-wrap .input-emp[type=time][value=""]:not(:placeholder-shown):before, .digit-checkbox-wrap .digit-text-input.editableTime .input-emp[type=time][value=""]:not(:placeholder-shown):before { - display: none !important; } - .digit-text-input.editableDate input[type=date]:disabled::-webkit-datetime-edit, .digit-text-input.editableDate .checkbox-wrap .input-emp[type=date]:disabled::-webkit-datetime-edit, .checkbox-wrap .digit-text-input.editableDate .input-emp[type=date]:disabled::-webkit-datetime-edit, .digit-text-input.editableDate .digit-checkbox-wrap .input-emp[type=date]:disabled::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input.editableDate .input-emp[type=date]:disabled::-webkit-datetime-edit, .digit-text-input.editableDate input[type=date]:in-range::-webkit-datetime-edit, .digit-text-input.editableDate .checkbox-wrap .input-emp[type=date]:in-range::-webkit-datetime-edit, .checkbox-wrap .digit-text-input.editableDate .input-emp[type=date]:in-range::-webkit-datetime-edit, .digit-text-input.editableDate .digit-checkbox-wrap .input-emp[type=date]:in-range::-webkit-datetime-edit, .digit-checkbox-wrap .digit-text-input.editableDate .input-emp[type=date]:in-range::-webkit-datetime-edit { - display: block !important; } - .digit-text-input.editableDate input[type=date][value=""]:not(:-moz-placeholder-shown):before, .digit-text-input.editableDate .checkbox-wrap .input-emp[type=date][value=""]:not(:-moz-placeholder-shown):before, .checkbox-wrap .digit-text-input.editableDate .input-emp[type=date][value=""]:not(:-moz-placeholder-shown):before, .digit-text-input.editableDate .digit-checkbox-wrap .input-emp[type=date][value=""]:not(:-moz-placeholder-shown):before, .digit-checkbox-wrap .digit-text-input.editableDate .input-emp[type=date][value=""]:not(:-moz-placeholder-shown):before { - display: none !important; } - .digit-text-input.editableDate input[type=date][value=""]:not(:-ms-input-placeholder):before, .digit-text-input.editableDate .checkbox-wrap .input-emp[type=date][value=""]:not(:-ms-input-placeholder):before, .checkbox-wrap .digit-text-input.editableDate .input-emp[type=date][value=""]:not(:-ms-input-placeholder):before, .digit-text-input.editableDate .digit-checkbox-wrap .input-emp[type=date][value=""]:not(:-ms-input-placeholder):before, .digit-checkbox-wrap .digit-text-input.editableDate .input-emp[type=date][value=""]:not(:-ms-input-placeholder):before { - display: none !important; } - .digit-text-input.editableDate input[type="date"][value=""]:not(:-moz-placeholder-shown)::before, .digit-text-input.editableDate .checkbox-wrap .input-emp[type="date"][value=""]:not(:-moz-placeholder-shown)::before, .checkbox-wrap .digit-text-input.editableDate .input-emp[type="date"][value=""]:not(:-moz-placeholder-shown)::before, .digit-text-input.editableDate .digit-checkbox-wrap .input-emp[type="date"][value=""]:not(:-moz-placeholder-shown)::before, .digit-checkbox-wrap .digit-text-input.editableDate .input-emp[type="date"][value=""]:not(:-moz-placeholder-shown)::before { - display: none !important; } - .digit-text-input.editableDate input[type="date"][value=""]:not(:-ms-input-placeholder)::before, .digit-text-input.editableDate .checkbox-wrap .input-emp[type="date"][value=""]:not(:-ms-input-placeholder)::before, .checkbox-wrap .digit-text-input.editableDate .input-emp[type="date"][value=""]:not(:-ms-input-placeholder)::before, .digit-text-input.editableDate .digit-checkbox-wrap .input-emp[type="date"][value=""]:not(:-ms-input-placeholder)::before, .digit-checkbox-wrap .digit-text-input.editableDate .input-emp[type="date"][value=""]:not(:-ms-input-placeholder)::before { - display: none !important; } - .digit-text-input.editableDate input[type=date][value=""]:not(:placeholder-shown):before, .digit-text-input.editableDate .checkbox-wrap .input-emp[type=date][value=""]:not(:placeholder-shown):before, .checkbox-wrap .digit-text-input.editableDate .input-emp[type=date][value=""]:not(:placeholder-shown):before, .digit-text-input.editableDate .digit-checkbox-wrap .input-emp[type=date][value=""]:not(:placeholder-shown):before, .digit-checkbox-wrap .digit-text-input.editableDate .input-emp[type=date][value=""]:not(:placeholder-shown):before { - display: none !important; } .digit-card-input { outline: 2px solid transparent; @@ -14225,41 +14213,34 @@ video::-webkit-media-controls-panel { .digit-stepper-container .digit-stepper-content span { text-align: center; color: #fff; } - .digit-stepper-container .digit-stepper-content .secondary-color { + .digit-stepper-container .digit-stepper-content .stepper-label { text-align: center; - font-weight: 400; color: #505a5f; - font-family: Roboto; - font-size: 1rem; line-height: 1.5rem; letter-spacing: 0; height: 1.5rem; } @media (max-width: 30rem) { - .digit-stepper-container .digit-stepper-content .secondary-color { - font-size: .875rem; + .digit-stepper-container .digit-stepper-content .stepper-label { line-height: 1.25rem; } } - .digit-stepper-container .digit-stepper-content .secondary-color.text-done { + .digit-stepper-container .digit-stepper-content .stepper-label.completed { color: #0b0c0c; } - .digit-stepper-container .digit-stepper-content .secondary-color.text-active { + .digit-stepper-container .digit-stepper-content .stepper-label.current { color: #0b0c0c; - font-weight: 700; line-height: 1.172rem; } - @media (max-width: 30rem) { - .digit-stepper-container .digit-stepper-content .secondary-color.text-active { - font-size: 1rem; } } .digit-stepper-container .digit-stepper-content.vertical { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } - .digit-stepper-container .circle, .digit-stepper-container .digit-stepper-content { + .digit-stepper-container .digit-stepper-content, .digit-stepper-container .stepper-circle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } - .digit-stepper-container .circle { + .digit-stepper-container .stepper-circle { + text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; @@ -14270,14 +14251,14 @@ video::-webkit-media-controls-panel { border-radius: 50%; margin-top: .25rem; } @media (max-width: 30rem) { - .digit-stepper-container .circle { + .digit-stepper-container .stepper-circle { width: 1.5rem; height: 1.5rem; } } .digit-stepper-container .active { font-weight: 700; background-color: #f47738; border-color: #f47738; } - .digit-stepper-container .line { + .digit-stepper-container .stepper-connect { position: absolute; top: 1.25rem; left: calc(50% + .5rem); @@ -14286,22 +14267,22 @@ video::-webkit-media-controls-panel { z-index: -1; height: .25rem; } @media (min-width: 30.063rem) and (max-width: 47.938rem) { - .digit-stepper-container .line { + .digit-stepper-container .stepper-connect { min-width: 6.313rem; max-width: 39.438rem; } } @media (max-width: 30rem) { - .digit-stepper-container .line { + .digit-stepper-container .stepper-connect { min-width: 4.313rem; max-width: 16.875rem; top: .875rem; } } @media (min-width: 48rem) { - .digit-stepper-container .line { + .digit-stepper-container .stepper-connect { min-width: 5.313rem; max-width: 82.688rem; } } - .digit-stepper-container .line.active { + .digit-stepper-container .stepper-connect.active { background-color: #f47738; border-color: #f47738; } - .digit-stepper-container .line.vertical { + .digit-stepper-container .stepper-connect.vertical { top: calc(50% + .5rem); bottom: calc(-50% + .5rem); left: -3rem; @@ -14309,35 +14290,179 @@ video::-webkit-media-controls-panel { height: auto; -webkit-transform: rotate(90deg); transform: rotate(90deg); } - .digit-stepper-container .line.vertical.active { + .digit-stepper-container .stepper-connect.vertical.active { background-color: initial; border-color: #f47738; } - .digit-stepper-container .digit-stepper-content:hover .circle.active { + .digit-stepper-container .digit-stepper-content:hover .stepper-circle.active { outline: 0.25rem solid rgba(244, 119, 56, 0.12157); } - .digit-stepper-container .digit-stepper-content:hover .text-done { - color: #0b0c0c; - font-weight: 700; - line-height: 1.188rem; } - @media (max-width: 30rem) { - .digit-stepper-container .digit-stepper-content:hover .text-done { - font-size: 1rem; - line-height: 1.172rem; } } + .digit-stepper-container .digit-stepper-content:hover .stepper-label { + font-size: 1rem; + line-height: 1.5rem; } .digit-stepper-container::-webkit-scrollbar-track { background-color: #f5f5f5; border-radius: .313rem; } .digit-stepper-container::-webkit-scrollbar { - width: .625rem; + width: .313rem; + height: .625rem; background-color: #f5f5f5; } .digit-stepper-container::-webkit-scrollbar-thumb { background-color: #c1c1c1; - border-radius: .625rem; } + border-radius: .313rem; } .digit-stepper-container::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; } +.digit-timeline-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + grid-gap: 1rem; + gap: 1rem; } + +.timeline-circle { + position: relative; + -ms-flex-negative: 0; + flex-shrink: 0; + width: 2rem; + height: 2rem; + border-radius: 50%; } + @media (max-width: 30rem) { + .timeline-circle { + width: 1.5rem; + height: 1.5rem; } } + +.timeline-content, .timeline-info { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + grid-gap: .5rem; + gap: .5rem; } + +@media (max-width: 30rem) { + .timeline-info { + grid-gap: .25rem; + gap: .25rem; } } + +.timeline-divider { + border: .063rem solid #d6d5d4; } + +.timeline-label { + white-space: normal; + height: auto; + text-align: left; + line-height: 1.172rem; + color: #0b0c0c; + word-break: break-word; + padding-top: .414rem; } + @media (max-width: 30rem) { + .timeline-label { + padding-top: .164rem; } } + +.timeline-date { + text-align: left; + color: #505a5f; + line-height: 1.5rem; } + @media (max-width: 30rem) { + .timeline-date { + line-height: 1.25rem; } } + +.timeline-toggle-details { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + grid-gap: .25rem; + gap: .25rem; } + +.timeline-additional-elements-inline { + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +.timeline-additional-elements-column, .timeline-additional-elements-inline { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + grid-gap: 1rem; + gap: 1rem; } + +.timeline-additional-elements-column { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + .timeline-additional-elements-column .timeline-individual-element { + width: 100%; + max-width: 100%; } + +img { + max-width: 100%; } + +.details-btn { + text-align: left; + background-color: initial; + border: none; + color: #f47738; + padding: 0; + line-height: 1.172rem; } + @media (max-width: 30rem) { + .details-btn { + line-height: 1.5rem; } } + +.timeline-circle, .timeline-circle.upcoming { + background-color: #b1b4b6; } + +.timeline-circle.inprogress { + background-color: initial; + border: .125rem solid #f47738; } + +.timeline-circle.inprogress:after { + position: absolute; + width: 1rem; + height: 1rem; + content: ""; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + border-radius: 50%; + background-color: #f47738; } + @media (max-width: 30rem) { + .timeline-circle.inprogress:after { + width: .75rem; + height: .75rem; } } + +.timeline-circle.completed { + background-color: #f47738; } + .timeline-circle.completed .check-icon { + width: 1.5rem; + height: 1.5rem; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } + @media (max-width: 30rem) { + .timeline-circle.completed .check-icon { + width: 1.125rem; + height: 1.125rem; } } + .bread-crumb.workbench-bredcrumb a { color: #f47738; } @@ -14775,7 +14900,7 @@ button:hover { .light-primary-bg { background-color: #feefe7; } -.light-text-color-primary, .digit-action-bar-wrap, .horizontal-nav, .inbox-search-links-container .header, .inbox-search-links-container .header .text, .search-wrapper, .search-wrapper .popup-label, .search-wrapper .popup-label .header, .search-wrapper .filter-header-wrapper, .search-wrapper .filter-header-wrapper .label, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent.inbox, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent.inbox .links .text, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent .section, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent .section.filter, .digit-app-container form .digit-card h2, .digit-back-button, .h1, .link-label:hover, .digit-bread-crumb--item .last, .digit-checkpoint-comments-wrap h4, .digit-header, .digit-employee-select-wrap .digit-select input[type=text], .digit-employee-select-wrap .digit-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-employee-select-wrap .digit-select .input-emp[type=text], .digit-employee-select-wrap .digit-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-employee-select-wrap .digit-select .input-emp[type=text], .digit-employee-select-wrap .digit-select p, .digit-employee-select-wrap .digit-select-active input[type=text], .digit-employee-select-wrap .digit-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-employee-select-wrap .digit-select-active .input-emp[type=text], .digit-employee-select-wrap .digit-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-employee-select-wrap .digit-select-active .input-emp[type=text], .digit-employee-select-wrap .digit-select-active p, .digit-employee-select-wrap .digit-options-card p, .digit-select-wrap .digit-select input[type=text], .digit-select-wrap .digit-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-select-wrap .digit-select .input-emp[type=text], .digit-select-wrap .digit-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-select-wrap .digit-select .input-emp[type=text], .digit-select-wrap .digit-select p, .digit-select-wrap .digit-select-active input[type=text], .digit-select-wrap .digit-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-select-wrap .digit-select-active .input-emp[type=text], .digit-select-wrap .digit-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-select-wrap .digit-select-active .input-emp[type=text], .digit-select-wrap .digit-select-active p, .digit-select-wrap .digit-options-card p, .digit-card .digit-card-text span, .digit-docsDescription, .digit-employee-card .digit-card-text span { +.light-text-color-primary, .digit-action-bar-wrap, .horizontal-nav, .inbox-search-links-container .header, .inbox-search-links-container .header .text, .search-wrapper, .search-wrapper .popup-label, .search-wrapper .popup-label .header, .search-wrapper .filter-header-wrapper, .search-wrapper .filter-header-wrapper .label, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent.inbox, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent.inbox .links .text, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent .section, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent .section.filter, .digit-app-container form .digit-card h2, .digit-back-button, .h1, .link-label:hover, .digit-bread-crumb--item .last, .digit-checkpoint-comments-wrap h4, .digit-header, .digit-dropdown-employee-select-wrap .digit-dropdown-select input[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select p, .digit-dropdown-employee-select-wrap .digit-dropdown-select-active input[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-employee-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-employee-select-wrap .digit-dropdown-select-active p, .digit-dropdown-employee-select-wrap .digit-options-card p, .digit-dropdown-select-wrap .digit-dropdown-select input[type=text], .digit-dropdown-select-wrap .digit-dropdown-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select .input-emp[type=text], .digit-dropdown-select-wrap .digit-dropdown-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select .input-emp[type=text], .digit-dropdown-select-wrap .digit-dropdown-select p, .digit-dropdown-select-wrap .digit-dropdown-select-active input[type=text], .digit-dropdown-select-wrap .digit-dropdown-select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-select-wrap .digit-dropdown-select-active .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-dropdown-select-wrap .digit-dropdown-select-active .input-emp[type=text], .digit-dropdown-select-wrap .digit-dropdown-select-active p, .digit-dropdown-select-wrap .digit-options-card p, .digit-card .digit-card-text span, .digit-docsDescription, .digit-employee-card .digit-card-text span { color: #0b0c0c; } .light-text-color-secondary, .digit-bread-crumb, .digit-checkpoint-done header p, .digit-checkpoint header p, .digit-checkpoint-comments-wrap p, .digit-card .digit-card-caption, .digit-card .digit-card-text, .digit-card .digit-card-label-desc, .digit-employee-card .digit-card-caption, .digit-employee-card .digit-card-text, .digit-employee-card .card-label-desc { @@ -14784,7 +14909,7 @@ button:hover { .light-text-color-disabled, .employee-card-input:disabled, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .all-input-field-wrapper .form-control:disabled, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label input:disabled[type=checkbox], .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .checkbox-wrap .input-emp:disabled[type=checkbox], .checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:disabled[type=checkbox], .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .digit-checkbox-wrap .input-emp:disabled[type=checkbox], .digit-checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:disabled[type=checkbox] { color: #b1b4b6; } -.light-background, .digit-action-bar-wrap .digit-menu-wrap, .digit-action-bar-wrap .digit-menu-wrap div:hover, .digit-action-bar-wrap-registry .digit-menu-wrap, .digit-action-bar-wrap-registry .digit-menu-wrap div:hover, .horizontal-nav .menu-item .icon, .digit-app-container, .body-container, .digit-field-container .component-in-front, .employee-card-input--front, .citizen-card-input--front, .digit-screen-loader, .digit-mobile-number-container .digit-citizen-card-input--front, .digit-employee-select-wrap .digit-options-card p:hover, .card-emp, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-object { +.light-background, .digit-action-bar-wrap .digit-menu-wrap, .digit-action-bar-wrap .digit-menu-wrap div:hover, .digit-action-bar-wrap-registry .digit-menu-wrap, .digit-action-bar-wrap-registry .digit-menu-wrap div:hover, .horizontal-nav .menu-item .icon, .digit-app-container, .body-container, .digit-field-container .component-in-front, .employee-card-input--front, .citizen-card-input--front, .digit-screen-loader, .digit-mobile-number-container .digit-citizen-card-input--front, .digit-dropdown-employee-select-wrap .digit-options-card p:hover, .card-emp, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-object { background-color: #eee; } .light-paper-primary, .digit-action-bar-wrap, .horizontal-nav, .inbox-search-links-container, .search-wrapper, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent.inbox .links, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent.search .search-wrapper, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent .section, .inbox-search-wrapper .inbox-search-component-wrapper .sections-parent .section.filter, .digit-card, .digit-employee-card { @@ -14807,7 +14932,7 @@ button:hover { .light-header-sidenav { color: #0b4b66; } -.light-input-border, .digit-back-button, .digit-break-line, .digit-checkbox-wrap input, .digit-checkbox-wrap .input-emp, .digit-date-picker .digit-employee-card-input, .digit-field-container .component-in-front, .card-date-input, .text-input input:hover, .text-input .checkbox-wrap .input-emp:hover, .checkbox-wrap .text-input .input-emp:hover, .text-input .digit-checkbox-wrap .input-emp:hover, .digit-checkbox-wrap .text-input .input-emp:hover, .employee-card-input-error, .card-input-error, .employee-card-input, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .all-input-field-wrapper .form-control, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label input[type=checkbox], .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .checkbox-wrap .input-emp[type=checkbox], .checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp[type=checkbox], .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .digit-checkbox-wrap .input-emp[type=checkbox], .digit-checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp[type=checkbox], .employee-card-input:disabled, .card-textarea, .employee-card-textarea, .citizen-card-input, .break-line, .digit-mobile-number-container .digit-employee-card-input-error, .digit-radio-wrap .digit-radio-btn-checkmark, .digit-employee-select-wrap .digit-select, .digit-employee-select-wrap .digit-select input[type=text], .digit-employee-select-wrap .digit-select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .digit-employee-select-wrap .digit-select .input-emp[type=text], .digit-employee-select-wrap .digit-select .digit-checkbox-wrap .input-emp[type=text], .digit-checkbox-wrap .digit-employee-select-wrap .digit-select .input-emp[type=text], .digit-select-wrap .digit-select, .digit-employee-card-input-error, .digit-card-input-error, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label input:checked, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .checkbox-wrap .input-emp:checked, .checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:checked, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .digit-checkbox-wrap .input-emp:checked, .digit-checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:checked, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label input:hover, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .checkbox-wrap .input-emp:hover, .checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:hover, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .digit-checkbox-wrap .input-emp:hover, .digit-checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:hover { +.light-input-border, .digit-back-button, .digit-break-line, .digit-checkbox-wrap input, .digit-checkbox-wrap .input-emp, .digit-date-picker .digit-employee-card-input, .digit-field-container .component-in-front, .card-date-input, .text-input input:hover, .text-input .checkbox-wrap .input-emp:hover, .checkbox-wrap .text-input .input-emp:hover, .text-input .digit-checkbox-wrap .input-emp:hover, .digit-checkbox-wrap .text-input .input-emp:hover, .employee-card-input-error, .card-input-error, .employee-card-input, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field .all-input-field-wrapper .form-control, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label input[type=checkbox], .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .checkbox-wrap .input-emp[type=checkbox], .checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp[type=checkbox], .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .digit-checkbox-wrap .input-emp[type=checkbox], .digit-checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp[type=checkbox], .employee-card-input:disabled, .card-textarea, .employee-card-textarea, .citizen-card-input, .break-line, .digit-mobile-number-container .digit-employee-card-input-error, .digit-radio-wrap .digit-radio-btn-checkmark, .digit-dropdown-employee-select-wrap .digit-dropdown-select, .digit-dropdown-select-wrap .digit-dropdown-select, .digit-employee-card-input-error, .digit-card-input-error, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label input:checked, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .checkbox-wrap .input-emp:checked, .checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:checked, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .digit-checkbox-wrap .input-emp:checked, .digit-checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:checked, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label input:hover, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .checkbox-wrap .input-emp:hover, .checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:hover, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .digit-checkbox-wrap .input-emp:hover, .digit-checkbox-wrap .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-boolean .checkbox label .input-emp:hover { border-color: #505a5f; } .alert-error, .digit-error-message, .employee-card-input-error, .card-input-error, .digit-mobile-number-container .digit-employee-card-input-error, .digit-validation-error, .digit-card .digit-card-label-error, .digit-employee-card .card-label-error, .digit-card-label-error, .workbench .workbench-create-form form #digit_root .field-wrapper .form-group.field.field-error.has-error.has-danger .control-label { diff --git a/react/example/.eslintcache b/react/example/.eslintcache new file mode 100644 index 00000000000..a35ab81dc68 --- /dev/null +++ b/react/example/.eslintcache @@ -0,0 +1 @@ +[{"/home/hridya/DIGIT-UI-LIBRARIES/react/example/src/index.js":"1","/home/hridya/DIGIT-UI-LIBRARIES/react/example/src/App.js":"2","/home/hridya/DIGIT-UI-LIBRARIES/react/example/src/UICustomizations.js":"3","/home/hridya/Downloads/DIGIT-UI-LIBRARIES/react/example/src/index.js":"4","/home/hridya/Downloads/DIGIT-UI-LIBRARIES/react/example/src/App.js":"5","/home/hridya/Downloads/DIGIT-UI-LIBRARIES/react/example/src/UICustomizations.js":"6"},{"size":1759,"mtime":1711455656130,"results":"7","hashOfConfig":"8"},{"size":2960,"mtime":1711455656130,"results":"9","hashOfConfig":"8"},{"size":23463,"mtime":1711455656130,"results":"10","hashOfConfig":"8"},{"size":1759,"mtime":1712739664466,"results":"11","hashOfConfig":"12"},{"size":2960,"mtime":1712739664466,"results":"13","hashOfConfig":"12"},{"size":23463,"mtime":1712739664466,"results":"14","hashOfConfig":"12"},{"filePath":"15","messages":"16","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"5pkp7b",{"filePath":"17","messages":"18","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"21"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1ir5t1m",{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"21"},"/home/hridya/DIGIT-UI-LIBRARIES/react/example/src/index.js",[],"/home/hridya/DIGIT-UI-LIBRARIES/react/example/src/App.js",[],"/home/hridya/DIGIT-UI-LIBRARIES/react/example/src/UICustomizations.js",["28","29","30"],"import { Link } from \"react-router-dom\";\nimport _ from \"lodash\";\nimport { Amount} from \"@egovernments/digit-ui-components\";\n\n\n//create functions here based on module name set in mdms(eg->SearchProjectConfig)\n//how to call these -> Digit?.Customizations?.[masterName]?.[moduleName]\n// these functions will act as middlewares\nvar Digit = window.Digit || {};\n\nconst businessServiceMap = {\n \"muster roll\": \"MR\",\n};\n\nconst inboxModuleNameMap = {\n \"muster-roll-approval\": \"muster-roll-service\",\n};\n\nexport const UICustomizations = {\n businessServiceMap,\n updatePayload: (applicationDetails, data, action, businessService) => {\n if (businessService === businessServiceMap.estimate) {\n const workflow = {\n comment: data.comments,\n documents: data?.documents?.map((document) => {\n return {\n documentType: action?.action + \" DOC\",\n fileName: document?.[1]?.file?.name,\n fileStoreId: document?.[1]?.fileStoreId?.fileStoreId,\n documentUid: document?.[1]?.fileStoreId?.fileStoreId,\n tenantId: document?.[1]?.fileStoreId?.tenantId,\n };\n }),\n assignees: data?.assignees?.uuid ? [data?.assignees?.uuid] : null,\n action: action.action,\n };\n //filtering out the data\n Object.keys(workflow).forEach((key, index) => {\n if (!workflow[key] || workflow[key]?.length === 0) delete workflow[key];\n });\n\n return {\n estimate: applicationDetails,\n workflow,\n };\n }\n if (businessService === businessServiceMap.contract) {\n const workflow = {\n comment: data?.comments,\n documents: data?.documents?.map((document) => {\n return {\n documentType: action?.action + \" DOC\",\n fileName: document?.[1]?.file?.name,\n fileStoreId: document?.[1]?.fileStoreId?.fileStoreId,\n documentUid: document?.[1]?.fileStoreId?.fileStoreId,\n tenantId: document?.[1]?.fileStoreId?.tenantId,\n };\n }),\n assignees: data?.assignees?.uuid ? [data?.assignees?.uuid] : null,\n action: action.action,\n };\n //filtering out the data\n Object.keys(workflow).forEach((key, index) => {\n if (!workflow[key] || workflow[key]?.length === 0) delete workflow[key];\n });\n\n return {\n contract: applicationDetails,\n workflow,\n };\n }\n if (businessService === businessServiceMap?.[\"muster roll\"]) {\n const workflow = {\n comment: data?.comments,\n documents: data?.documents?.map((document) => {\n return {\n documentType: action?.action + \" DOC\",\n fileName: document?.[1]?.file?.name,\n fileStoreId: document?.[1]?.fileStoreId?.fileStoreId,\n documentUid: document?.[1]?.fileStoreId?.fileStoreId,\n tenantId: document?.[1]?.fileStoreId?.tenantId,\n };\n }),\n assignees: data?.assignees?.uuid ? [data?.assignees?.uuid] : null,\n action: action.action,\n };\n //filtering out the data\n Object.keys(workflow).forEach((key, index) => {\n if (!workflow[key] || workflow[key]?.length === 0) delete workflow[key];\n });\n\n return {\n musterRoll: applicationDetails,\n workflow,\n };\n }\n if (businessService === businessServiceMap?.[\"works.purchase\"]) {\n const workflow = {\n comment: data.comments,\n documents: data?.documents?.map((document) => {\n return {\n documentType: action?.action + \" DOC\",\n fileName: document?.[1]?.file?.name,\n fileStoreId: document?.[1]?.fileStoreId?.fileStoreId,\n documentUid: document?.[1]?.fileStoreId?.fileStoreId,\n tenantId: document?.[1]?.fileStoreId?.tenantId,\n };\n }),\n assignees: data?.assignees?.uuid ? [data?.assignees?.uuid] : null,\n action: action.action,\n };\n //filtering out the data\n Object.keys(workflow).forEach((key, index) => {\n if (!workflow[key] || workflow[key]?.length === 0) delete workflow[key];\n });\n\n const additionalFieldsToSet = {\n projectId: applicationDetails.additionalDetails.projectId,\n invoiceDate: applicationDetails.billDate,\n invoiceNumber: applicationDetails.referenceId.split(\"_\")?.[1],\n contractNumber: applicationDetails.referenceId.split(\"_\")?.[0],\n documents: applicationDetails.additionalDetails.documents,\n };\n return {\n bill: { ...applicationDetails, ...additionalFieldsToSet },\n workflow,\n };\n }\n },\n enableModalSubmit: (businessService, action, setModalSubmit, data) => {\n if (businessService === businessServiceMap?.[\"muster roll\"] && action.action === \"APPROVE\") {\n setModalSubmit(data?.acceptTerms);\n }\n },\n enableHrmsSearch: (businessService, action) => {\n if (businessService === businessServiceMap.estimate) {\n return action.action.includes(\"TECHNICALSANCTION\") || action.action.includes(\"VERIFYANDFORWARD\");\n }\n if (businessService === businessServiceMap.contract) {\n return action.action.includes(\"VERIFY_AND_FORWARD\");\n }\n if (businessService === businessServiceMap?.[\"muster roll\"]) {\n return action.action.includes(\"VERIFY\");\n }\n if (businessService === businessServiceMap?.[\"works.purchase\"]) {\n return action.action.includes(\"VERIFY_AND_FORWARD\");\n }\n return false;\n },\n getBusinessService: (moduleCode) => {\n if (moduleCode?.includes(\"estimate\")) {\n return businessServiceMap?.estimate;\n } else if (moduleCode?.includes(\"contract\")) {\n return businessServiceMap?.contract;\n } else if (moduleCode?.includes(\"muster roll\")) {\n return businessServiceMap?.[\"muster roll\"];\n } else if (moduleCode?.includes(\"works.purchase\")) {\n return businessServiceMap?.[\"works.purchase\"];\n } else if (moduleCode?.includes(\"works.wages\")) {\n return businessServiceMap?.[\"works.wages\"];\n } else if (moduleCode?.includes(\"works.supervision\")) {\n return businessServiceMap?.[\"works.supervision\"];\n } else {\n return businessServiceMap;\n }\n },\n getInboxModuleName: (moduleCode) => {\n if (moduleCode?.includes(\"estimate\")) {\n return inboxModuleNameMap?.estimate;\n } else if (moduleCode?.includes(\"contract\")) {\n return inboxModuleNameMap?.contracts;\n } else if (moduleCode?.includes(\"attendence\")) {\n return inboxModuleNameMap?.attendencemgmt;\n } else {\n return inboxModuleNameMap;\n }\n },\n\n AttendanceInboxConfig: {\n preProcess: (data) => {\n //set tenantId\n data.body.inbox.tenantId = Digit.ULBService.getCurrentTenantId();\n data.body.inbox.processSearchCriteria.tenantId = Digit.ULBService.getCurrentTenantId();\n\n const musterRollNumber = data?.body?.inbox?.moduleSearchCriteria?.musterRollNumber?.trim();\n if (musterRollNumber) data.body.inbox.moduleSearchCriteria.musterRollNumber = musterRollNumber;\n\n const attendanceRegisterName = data?.body?.inbox?.moduleSearchCriteria?.attendanceRegisterName?.trim();\n if (attendanceRegisterName) data.body.inbox.moduleSearchCriteria.attendanceRegisterName = attendanceRegisterName;\n\n // deleting them for now(assignee-> need clarity from pintu,ward-> static for now,not implemented BE side)\n const assignee = _.clone(data.body.inbox.moduleSearchCriteria.assignee);\n delete data.body.inbox.moduleSearchCriteria.assignee;\n if (assignee?.code === \"ASSIGNED_TO_ME\") {\n data.body.inbox.moduleSearchCriteria.assignee = Digit.UserService.getUser().info.uuid;\n }\n\n //cloning locality and workflow states to format them\n // let locality = _.clone(data.body.inbox.moduleSearchCriteria.locality ? data.body.inbox.moduleSearchCriteria.locality : []);\n\n let selectedOrg = _.clone(data.body.inbox.moduleSearchCriteria.orgId ? data.body.inbox.moduleSearchCriteria.orgId : null);\n delete data.body.inbox.moduleSearchCriteria.orgId;\n if (selectedOrg) {\n data.body.inbox.moduleSearchCriteria.orgId = selectedOrg?.[0]?.applicationNumber;\n }\n\n // let selectedWard = _.clone(data.body.inbox.moduleSearchCriteria.ward ? data.body.inbox.moduleSearchCriteria.ward : null);\n // delete data.body.inbox.moduleSearchCriteria.ward;\n // if(selectedWard) {\n // data.body.inbox.moduleSearchCriteria.ward = selectedWard?.[0]?.code;\n // }\n\n let states = _.clone(data.body.inbox.moduleSearchCriteria.state ? data.body.inbox.moduleSearchCriteria.state : []);\n let ward = _.clone(data.body.inbox.moduleSearchCriteria.ward ? data.body.inbox.moduleSearchCriteria.ward : []);\n // delete data.body.inbox.moduleSearchCriteria.locality;\n delete data.body.inbox.moduleSearchCriteria.state;\n delete data.body.inbox.moduleSearchCriteria.ward;\n\n // locality = locality?.map((row) => row?.code);\n states = Object.keys(states)?.filter((key) => states[key]);\n ward = ward?.map((row) => row?.code);\n\n // //adding formatted data to these keys\n // if (locality.length > 0) data.body.inbox.moduleSearchCriteria.locality = locality;\n if (states.length > 0) data.body.inbox.moduleSearchCriteria.status = states;\n if (ward.length > 0) data.body.inbox.moduleSearchCriteria.ward = ward;\n const projectType = _.clone(data.body.inbox.moduleSearchCriteria.projectType ? data.body.inbox.moduleSearchCriteria.projectType : {});\n if (projectType?.code) data.body.inbox.moduleSearchCriteria.projectType = projectType.code;\n\n //adding tenantId to moduleSearchCriteria\n data.body.inbox.moduleSearchCriteria.tenantId = Digit.ULBService.getCurrentTenantId();\n\n //setting limit and offset becoz somehow they are not getting set in muster inbox\n data.body.inbox.limit = data.state.tableForm.limit;\n data.body.inbox.offset = data.state.tableForm.offset;\n delete data.state;\n return data;\n },\n postProcess: (responseArray, uiConfig) => {\n const statusOptions = responseArray?.statusMap\n ?.filter((item) => item.applicationstatus)\n ?.map((item) => ({ code: item.applicationstatus, i18nKey: `COMMON_MASTERS_${item.applicationstatus}` }));\n if (uiConfig?.type === \"filter\") {\n let fieldConfig = uiConfig?.fields?.filter((item) => item.type === \"dropdown\" && item.populators.name === \"musterRollStatus\");\n if (fieldConfig.length) {\n fieldConfig[0].populators.options = statusOptions;\n }\n }\n },\n additionalCustomizations: (row, key, column, value, t, searchResult) => {\n if (key === \"ATM_MUSTER_ROLL_ID\") {\n return (\n \n \n {String(value ? (column.translate ? t(column.prefix ? `${column.prefix}${value}` : value) : value) : t(\"ES_COMMON_NA\"))}\n \n \n );\n }\n if (key === \"ATM_ATTENDANCE_WEEK\") {\n const week = `${Digit.DateUtils.ConvertTimestampToDate(value?.startDate, \"dd/MM/yyyy\")}-${Digit.DateUtils.ConvertTimestampToDate(\n value?.endDate,\n \"dd/MM/yyyy\"\n )}`;\n return
{week}
;\n }\n if (key === \"ATM_NO_OF_INDIVIDUALS\") {\n return
{value?.length}
;\n }\n if (key === \"ATM_AMOUNT_IN_RS\") {\n return {value ? Digit.Utils.dss.formatterWithoutRound(value, \"number\") : t(\"ES_COMMON_NA\")};\n }\n if (key === \"ATM_SLA\") {\n return parseInt(value) > 0 ? (\n {t(value) || \"\"}\n ) : (\n {t(value) || \"\"}\n );\n }\n if (key === \"COMMON_WORKFLOW_STATES\") {\n return {t(`WF_MUSTOR_${value}`)};\n }\n //added this in case we change the key and not updated here , it'll throw that nothing was returned from cell error if that case is not handled here. To prevent that error putting this default\n return {t(`CASE_NOT_HANDLED`)};\n },\n MobileDetailsOnClick: (row, tenantId) => {\n let link;\n Object.keys(row).map((key) => {\n if (key === \"ATM_MUSTER_ROLL_ID\")\n link = `/${window.contextPath}/employee/attendencemgmt/view-attendance?tenantId=${tenantId}&musterRollNumber=${row[key]}`;\n });\n return link;\n },\n populateReqCriteria: () => {\n const tenantId = Digit.ULBService.getCurrentTenantId();\n return {\n url: \"/org-services/organisation/v1/_search\",\n params: { limit: 50, offset: 0 },\n body: {\n SearchCriteria: {\n tenantId: tenantId,\n functions: {\n type: \"CBO\",\n },\n },\n },\n config: {\n enabled: true,\n select: (data) => {\n return data?.organisations;\n },\n },\n };\n },\n },\n SearchWageSeekerConfig: {\n customValidationCheck: (data) => {\n //checking both to and from date are present\n const { createdFrom, createdTo } = data;\n if ((createdFrom === \"\" && createdTo !== \"\") || (createdFrom !== \"\" && createdTo === \"\"))\n return { warning: true, label: \"ES_COMMON_ENTER_DATE_RANGE\" };\n\n return false;\n },\n preProcess: (data) => {\n data.params = { ...data.params, tenantId: Digit.ULBService.getCurrentTenantId() };\n\n let requestBody = { ...data.body.Individual };\n const pathConfig = {\n name: \"name.givenName\",\n };\n const dateConfig = {\n createdFrom: \"daystart\",\n createdTo: \"dayend\",\n };\n const selectConfig = {\n wardCode: \"wardCode[0].code\",\n socialCategory: \"socialCategory.code\",\n };\n const textConfig = [\"name\", \"individualId\"];\n let Individual = Object.keys(requestBody)\n .map((key) => {\n if (selectConfig[key]) {\n requestBody[key] = _.get(requestBody, selectConfig[key], null);\n } else if (typeof requestBody[key] == \"object\") {\n requestBody[key] = requestBody[key]?.code;\n } else if (textConfig?.includes(key)) {\n requestBody[key] = requestBody[key]?.trim();\n }\n return key;\n })\n .filter((key) => requestBody[key])\n .reduce((acc, curr) => {\n if (pathConfig[curr]) {\n _.set(acc, pathConfig[curr], requestBody[curr]);\n } else if (dateConfig[curr] && dateConfig[curr]?.includes(\"day\")) {\n _.set(acc, curr, Digit.Utils.date.convertDateToEpoch(requestBody[curr], dateConfig[curr]));\n } else {\n _.set(acc, curr, requestBody[curr]);\n }\n return acc;\n }, {});\n\n data.body.Individual = { ...Individual };\n return data;\n },\n additionalCustomizations: (row, key, column, value, t, searchResult) => {\n //here we can add multiple conditions\n //like if a cell is link then we return link\n //first we can identify which column it belongs to then we can return relevant result\n switch (key) {\n case \"MASTERS_WAGESEEKER_ID\":\n return (\n \n \n {String(value ? (column.translate ? t(column.prefix ? `${column.prefix}${value}` : value) : value) : t(\"ES_COMMON_NA\"))}\n \n \n );\n\n case \"MASTERS_SOCIAL_CATEGORY\":\n return value ? {String(t(`MASTERS_${value}`))} : t(\"ES_COMMON_NA\");\n\n case \"CORE_COMMON_PROFILE_CITY\":\n return value ? {String(t(Digit.Utils.locale.getCityLocale(value)))} : t(\"ES_COMMON_NA\");\n\n case \"MASTERS_WARD\":\n return value ? (\n {String(t(Digit.Utils.locale.getMohallaLocale(value, row?.tenantId)))}\n ) : (\n t(\"ES_COMMON_NA\")\n );\n\n case \"MASTERS_LOCALITY\":\n return value ? (\n {String(t(Digit.Utils.locale.getMohallaLocale(value, row?.tenantId)))}\n ) : (\n t(\"ES_COMMON_NA\")\n );\n default:\n return t(\"ES_COMMON_NA\");\n }\n },\n MobileDetailsOnClick: (row, tenantId) => {\n let link;\n Object.keys(row).map((key) => {\n if (key === \"MASTERS_WAGESEEKER_ID\")\n link = `/${window.contextPath}/employee/masters/view-wageseeker?tenantId=${tenantId}&wageseekerId=${row[key]}`;\n });\n return link;\n },\n additionalValidations: (type, data, keys) => {\n if (type === \"date\") {\n return data[keys.start] && data[keys.end] ? () => new Date(data[keys.start]).getTime() <= new Date(data[keys.end]).getTime() : true;\n }\n },\n },\n SearchWMSProjectConfig: {\n preProcess: (data) => {\n const createdFrom = Digit.Utils.pt.convertDateToEpoch(data.body.inbox.moduleSearchCriteria?.createdFrom, \"daystart\");\n const createdTo = Digit.Utils.pt.convertDateToEpoch(data.body.inbox.moduleSearchCriteria?.createdTo);\n const projectType = data.body.inbox.moduleSearchCriteria?.projectType?.code;\n const boundary = data.body.inbox.moduleSearchCriteria?.boundary?.[0]?.code;\n data.params = { ...data.params, tenantId: Digit.ULBService.getCurrentTenantId(), includeAncestors: true };\n let projectName = data.body.inbox.moduleSearchCriteria?.projectName?.trim();\n let projectNumber = data.body.inbox.moduleSearchCriteria?.projectNumber?.trim();\n delete data.body.inbox.moduleSearchCriteria?.createdFrom;\n delete data.body.inbox.moduleSearchCriteria?.ward;\n delete data.body.inbox.moduleSearchCriteria?.createdTo;\n data.body.inbox.tenantId = Digit.ULBService.getCurrentTenantId();\n data.body.inbox.moduleSearchCriteria = {\n ...data.body.inbox.moduleSearchCriteria,\n tenantId: Digit.ULBService.getCurrentTenantId(),\n projectNumber,\n projectType,\n projectName,\n boundary,\n createdFrom,\n createdTo,\n };\n\n return data;\n },\n postProcess: (responseArray) => {\n const listOfUuids = responseArray?.map((row) => row.auditDetails.createdBy);\n const uniqueUuids = listOfUuids?.filter(function (item, i, ar) {\n return ar.indexOf(item) === i;\n });\n const tenantId = Digit.ULBService.getCurrentTenantId();\n const reqCriteria = {\n url: \"/user/_search\",\n params: {},\n body: { tenantId, pageSize: 100, uuid: [...uniqueUuids] },\n config: {\n enabled: responseArray?.length > 0 ? true : false,\n select: (data) => {\n const usersResponse = data?.user;\n responseArray?.forEach((row) => {\n const uuid = row?.auditDetails?.createdBy;\n const user = usersResponse?.filter((user) => user.uuid === uuid);\n row.createdBy = user?.[0].name;\n });\n return responseArray;\n },\n },\n };\n const { isLoading: isPostProcessLoading, data: combinedResponse, isFetching: isPostProcessFetching } = Digit.Hooks.useCustomAPIHook(\n reqCriteria\n );\n\n return {\n isPostProcessFetching,\n isPostProcessLoading,\n combinedResponse,\n };\n },\n customValidationCheck: (data) => {\n //checking both to and from date are present\n const { createdFrom, createdTo } = data;\n if (createdTo !== \"\" && createdFrom === \"\") return { warning: true, label: \"ES_COMMON_ENTER_DATE_RANGE\" };\n else if (createdTo === \"\" && createdFrom !== \"\") return { warning: true, label: \"ES_COMMON_ENTER_DATE_RANGE\" };\n\n return false;\n },\n additionalCustomizations: (row, key, column, value, t, searchResult) => {\n //here we can add multiple conditions\n //like if a cell is link then we return link\n //first we can identify which column it belongs to then we can return relevant result\n switch (key) {\n case \"WORKS_PROJECT_ID\":\n return (\n \n \n {String(value ? (column.translate ? t(column.prefix ? `${column.prefix}${value}` : value) : value) : t(\"ES_COMMON_NA\"))}\n \n \n );\n\n case \"WORKS_PARENT_PROJECT_ID\":\n return value ? (\n \n \n {String(value ? value : t(\"ES_COMMON_NA\"))}\n \n \n ) : (\n t(\"ES_COMMON_NA\")\n );\n\n case \"WORKS_PROJECT_NAME\": {\n let currentProject = searchResult?.filter((result) => result?.businessObject?.id === row?.businessObject?.id)[0];\n return (\n
\n \n {String(t(value))}\n \n {/* check condtion - if length greater than 20 */}\n \n {currentProject?.businessObject?.description}\n \n
\n );\n }\n\n case \"PROJECT_ESTIMATED_COST_IN_RS\":\n return ;\n\n case \"ES_COMMON_LOCATION\": {\n let currentProject = searchResult?.filter((result) => result?.businessObject.id === row?.businessObject.id)[0].businessObject;\n const headerLocale = Digit.Utils.locale.getTransformedLocale(row?.businessObject.tenantId);\n if (currentProject) {\n let locality = currentProject?.address?.boundary ? t(`${headerLocale}_ADMIN_${currentProject?.address?.boundary}`) : \"\";\n let ward = currentProject?.additionalDetails?.ward ? t(`${headerLocale}_ADMIN_${currentProject?.additionalDetails?.ward}`) : \"\";\n let city = currentProject?.address?.city\n ? t(`TENANT_TENANTS_${Digit.Utils.locale.getTransformedLocale(currentProject?.address?.city)}`)\n : \"\";\n return

{`${locality ? locality + \", \" : \"\"}${ward ? ward + \", \" : \"\"}${city}`}

;\n }\n return

{\"NA\"}

;\n }\n\n default:\n return t(\"ES_COMMON_NA\");\n }\n },\n additionalValidations: (type, data, keys) => {\n if (type === \"date\") {\n return data[keys.start] && data[keys.end] ? () => new Date(data[keys.start]).getTime() <= new Date(data[keys.end]).getTime() : true;\n }\n },\n MobileDetailsOnClick: (row, tenantId) => {\n let link;\n Object.keys(row).map((key) => {\n if (key === \"WORKS_PROJECT_ID\")\n link = `/${window.contextPath}/employee/project/project-details?tenantId=${tenantId}&projectNumber=${row[key]}`;\n });\n return link;\n },\n }\n};\n","/home/hridya/Downloads/DIGIT-UI-LIBRARIES/react/example/src/index.js",[],"/home/hridya/Downloads/DIGIT-UI-LIBRARIES/react/example/src/App.js",[],"/home/hridya/Downloads/DIGIT-UI-LIBRARIES/react/example/src/UICustomizations.js",["31","32","33"],{"ruleId":"34","severity":1,"message":"35","line":292,"column":34,"nodeType":"36","messageId":"37","endLine":292,"endColumn":36},{"ruleId":"34","severity":1,"message":"35","line":410,"column":34,"nodeType":"36","messageId":"37","endLine":410,"endColumn":36},{"ruleId":"34","severity":1,"message":"35","line":557,"column":34,"nodeType":"36","messageId":"37","endLine":557,"endColumn":36},{"ruleId":"34","severity":1,"message":"35","line":292,"column":34,"nodeType":"36","messageId":"37","endLine":292,"endColumn":36},{"ruleId":"34","severity":1,"message":"35","line":410,"column":34,"nodeType":"36","messageId":"37","endLine":410,"endColumn":36},{"ruleId":"34","severity":1,"message":"35","line":557,"column":34,"nodeType":"36","messageId":"37","endLine":557,"endColumn":36},"array-callback-return","Array.prototype.map() expects a return value from arrow function.","ArrowFunctionExpression","expectedInside"] \ No newline at end of file diff --git a/react/example/package.json b/react/example/package.json index 798387e0b04..4a503b957ef 100644 --- a/react/example/package.json +++ b/react/example/package.json @@ -10,13 +10,13 @@ "build": "webpack --mode production" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.5", + "@egovernments/digit-ui-components": "0.0.1-beta.1", "@egovernments/digit-ui-libraries": "1.8.2-beta.1", "@egovernments/digit-ui-module-common": "1.7.10", "@egovernments/digit-ui-module-core": "1.8.1-beta.6", "@egovernments/digit-ui-module-project": "0.3.4", "@egovernments/digit-ui-module-sample": "0.0.1", - "@egovernments/digit-ui-react-components": "1.7.10", + "@egovernments/digit-ui-react-components": "1.8.1-beta.10", "@egovernments/digit-ui-svg-components": "1.0.4", "http-proxy-middleware": "^1.0.5", "react": "17.0.2", diff --git a/react/example/public/index.html b/react/example/public/index.html index d47943ae598..1959e72ec84 100644 --- a/react/example/public/index.html +++ b/react/example/public/index.html @@ -18,7 +18,7 @@ - + diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json index 89fd49580d5..278d897b9a0 100644 --- a/react/modules/Project/package.json +++ b/react/modules/Project/package.json @@ -18,8 +18,8 @@ "react-router-dom": "5.3.0" }, "dependencies": { - "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.5", + "@egovernments/digit-ui-react-components": "1.8.1-beta.10", + "@egovernments/digit-ui-components": "0.0.1-beta.1", "lodash": "^4.17.21", "react": "17.0.2", "react-date-range": "^1.4.0", diff --git a/react/modules/Project/src/pages/employee/ProjectSearch/index.js b/react/modules/Project/src/pages/employee/ProjectSearch/index.js index 9970f9999db..01f96fd2cff 100644 --- a/react/modules/Project/src/pages/employee/ProjectSearch/index.js +++ b/react/modules/Project/src/pages/employee/ProjectSearch/index.js @@ -1,6 +1,7 @@ import React, { useEffect, useMemo } from "react"; import { useTranslation } from "react-i18next"; -import {InboxSearchComposer, Loader, Button ,AddFilled} from "@egovernments/digit-ui-components"; +import {Loader, Button ,AddFilled} from "@egovernments/digit-ui-components"; +import InboxSearchComposerV2 from "../../../../../../ui-components/src/hoc/InboxSearchComposerV2"; import { Header } from "@egovernments/digit-ui-react-components"; import { useHistory, useLocation } from "react-router-dom"; import searchConfigMUKTA from "../../../configs/searchConfigMUKTA"; @@ -68,7 +69,7 @@ const ProjectSearch = () => { )}
- +
); diff --git a/react/modules/Project/src/pages/employee/ProjectSearchAndInbox/index.js b/react/modules/Project/src/pages/employee/ProjectSearchAndInbox/index.js index 076251584a8..8800be16935 100644 --- a/react/modules/Project/src/pages/employee/ProjectSearchAndInbox/index.js +++ b/react/modules/Project/src/pages/employee/ProjectSearchAndInbox/index.js @@ -1,6 +1,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import { Header, Loader,InboxSearchComposer} from "@egovernments/digit-ui-components"; +import { Header, Loader} from "@egovernments/digit-ui-components"; +import InboxSearchComposerV2 from "../../../../../../ui-components/src/hoc/InboxSearchComposerV2"; import inboxConfig from "../../../configs/InboxConfig"; const ProjectSearchAndInboxComponent = () => { @@ -25,7 +26,7 @@ const ProjectSearchAndInboxComponent = () => {
{t(configs?.label)}
- +
); diff --git a/react/modules/Project/src/pages/employee/ProjectWMSSearch/index.js b/react/modules/Project/src/pages/employee/ProjectWMSSearch/index.js index 2ae36e466d3..220a244fcfb 100644 --- a/react/modules/Project/src/pages/employee/ProjectWMSSearch/index.js +++ b/react/modules/Project/src/pages/employee/ProjectWMSSearch/index.js @@ -1,6 +1,7 @@ import React, { useEffect, useMemo } from "react"; import { useTranslation } from "react-i18next"; -import { Button, Loader ,InboxSearchComposer } from "@egovernments/digit-ui-components"; +import { Button, Loader } from "@egovernments/digit-ui-components"; +import InboxSearchComposerV2 from "../../../../../../ui-components/src/hoc/InboxSearchComposerV2"; import { Header } from "@egovernments/digit-ui-react-components"; import { useHistory, useLocation } from "react-router-dom"; import searchWMSProjectConfig from "../../../configs/searchWMSProjectConfig"; @@ -71,7 +72,7 @@ const ProjectWMSSearch = () => { )}
- +
); diff --git a/react/modules/core/package.json b/react/modules/core/package.json index 6e4c3cf38f1..7c92848bd12 100644 --- a/react/modules/core/package.json +++ b/react/modules/core/package.json @@ -14,8 +14,8 @@ "prepublish": "yarn build" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.5", - "@egovernments/digit-ui-react-components": "1.8.1-beta.4", + "@egovernments/digit-ui-components": "0.0.1-beta.1", + "@egovernments/digit-ui-react-components": "1.8.1-beta.10", "react": "17.0.2", "react-dom": "17.0.2", "react-i18next": "11.16.2", diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json index 18ab0b25375..cf2e5c0429c 100644 --- a/react/modules/sample/package.json +++ b/react/modules/sample/package.json @@ -18,8 +18,8 @@ "react-router-dom": "5.3.0" }, "dependencies": { - "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.5", + "@egovernments/digit-ui-react-components": "1.8.1-beta.10", + "@egovernments/digit-ui-components": "0.0.1-beta.1", "react": "17.0.2", "react-date-range": "^1.4.0", "react-dom": "17.0.2", diff --git a/react/package.json b/react/package.json index 50f78e61a76..18c6db87a61 100644 --- a/react/package.json +++ b/react/package.json @@ -75,9 +75,9 @@ "@egovernments/digit-ui-module-core": "1.8.1-beta.6", "@egovernments/digit-ui-module-project": "0.3.4", "@egovernments/digit-ui-module-sample": "0.0.1", - "@egovernments/digit-ui-react-components": "1.7.10", + "@egovernments/digit-ui-react-components": "1.8.1-beta.10", "@egovernments/digit-ui-svg-components": "1.0.4", - "@egovernments/digit-ui-components": "0.0.1-beta.5", + "@egovernments/digit-ui-components": "0.0.1-beta.1", "babel-loader": "8.1.0", "clean-webpack-plugin": "4.0.0", "css-loader": "5.2.6", diff --git a/react/ui-components/package.json b/react/ui-components/package.json index 574e7c64271..5bc08f6a783 100644 --- a/react/ui-components/package.json +++ b/react/ui-components/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-components", - "version": "0.0.1-beta.5", + "version": "0.0.1-beta.1", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", diff --git a/react/ui-components/src/atoms/CheckBox.js b/react/ui-components/src/atoms/CheckBox.js index 923694f0d31..3c0f988329a 100644 --- a/react/ui-components/src/atoms/CheckBox.js +++ b/react/ui-components/src/atoms/CheckBox.js @@ -1,91 +1,64 @@ -import React, { Fragment } from "react"; -import { SVG } from "./SVG"; -import StringManipulator from "./StringManipulator"; +import React from "react"; +import { CheckSvg } from "./svgindex"; import PropTypes from "prop-types"; -import { useTranslation } from "react-i18next"; -const CheckBox = ({ - onChange, - label, - value, - disabled, - ref, - checked, - inputRef, - pageType, - style, - index, - isLabelFirst, - customLabelMarkup, - ...props -}) => { - const { t } = useTranslation(); - const userType = pageType || window?.Digit?.SessionStorage.get("userType"); - let styles = props.styles; - - const sentenceCaseLabel = StringManipulator("toSentenceCase", label); - - return ( -
- {isLabelFirst ? ( -

- {customLabelMarkup ? ( - <> - {t("COMMON_CERTIFY_ONE")} -
- - {t("ES_COMMON_NOTE")} - {t("COMMON_CERTIFY_TWO")} - - - ) : ( - sentenceCaseLabel - )} +const CheckBox = ({ onChange, label, value, disable, ref, checked, inputRef, pageType, style, index, isLabelFirst, ...props }) => { + const userType = pageType || Digit.SessionStorage.get("userType"); + let wrkflwStyle = props.styles; + if (isLabelFirst) { + return ( +

+

{index+1}.

+

+ {label}

- ) : null} -
+
-

- -

+ type="checkbox" + className={userType === "employee" ? "input-emp" : ""} + onChange={onChange} + style={{ cursor: "pointer", left: "90%" }} + value={value || label} + {...props} + ref={inputRef} + disabled={disable} + checked={checked} + /> +

+ +

+
- {!isLabelFirst ? ( -

- {customLabelMarkup ? ( - <> - {t("COMMON_CERTIFY_ONE")} -
- - {t("ES_COMMON_NOTE")} - {t("COMMON_CERTIFY_TWO")} - - - ) : ( - sentenceCaseLabel - )} + ); + } else { + return ( +

+
+ +

+ {/* */} + +

+
+

+ {label}

- ) : null} -
- ); +
+ ); + } + }; - CheckBox.propTypes = { /** * CheckBox content @@ -101,16 +74,5 @@ CheckBox.propTypes = { ref: PropTypes.func, userType: PropTypes.string, }; - -CheckBox.defaultProps = { - label: "Default", - isLabelFirst: false, - onChange: () => console.log("CLICK"), - value: "", - checked: false, - ref: "ww", - // pageType: "EMPLOYEE", - index: 0, -}; - -export default CheckBox; +CheckBox.defaultProps = {}; +export default CheckBox; \ No newline at end of file diff --git a/react/ui-components/src/atoms/HorizontalNavV2.js b/react/ui-components/src/atoms/HorizontalNavV2.js new file mode 100644 index 00000000000..2bfe8223a58 --- /dev/null +++ b/react/ui-components/src/atoms/HorizontalNavV2.js @@ -0,0 +1,56 @@ +import React, {useState} from 'react' +import { useTranslation } from 'react-i18next' +import BreakLine from './BreakLine' +const HorizontalNavV2 = ({ configNavItems, activeLink, setActiveLink, showNav = false, children, customStyle = {}, customClassName = "", inFormComposer = true, navClassName = "", navStyles = {},fromSearchComp=false,horizontalLine=false }) => { + const { t } = useTranslation() + const setActive = (item) => { + setActiveLink(item) + } + + const MenuItem = ({ item }) => { + let itemComponent = item.code; + + const Item = () => ( + +
{t(itemComponent)}
+ + ); + + return ( + + ); + }; + + if(fromSearchComp) { + return ( +
+ {showNav &&
+ {configNavItems?.map((item, index) => ( +
setActive(item)}> + +
+ ))} +
+ } + {/* Commenting out for now due to horizontal line coming in every inbox as well */} + {horizontalLine && } + {children} +
+ ) + } + return ( +
+ {showNav &&
+ {configNavItems?.map((item, index) => ( +
setActive(item)}> + +
+ ))} +
+ } + {children} +
+ ) +} + +export default HorizontalNavV2 \ No newline at end of file diff --git a/react/ui-components/src/atoms/InboxSearchLinks.js b/react/ui-components/src/atoms/InboxSearchLinks.js index eefbd2318ad..013f59f31e9 100644 --- a/react/ui-components/src/atoms/InboxSearchLinks.js +++ b/react/ui-components/src/atoms/InboxSearchLinks.js @@ -1,12 +1,9 @@ import React, { useState, useEffect } from "react" import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; -// import { PropertyHouse, BioMetricIcon,WorksMgmtIcon} from "./svgindex"; - const getIconComponent = (iconName="")=>{ - return require("@egovernments/digit-ui-svg-components")?.[iconName]; + return require("@egovernments/digit-ui-react-components")?.[iconName]; } - const InboxSearchLinks = ({headerText, links, businessService, customClass="", logoIcon}) => { const { t } = useTranslation(); @@ -39,5 +36,4 @@ const InboxSearchLinks = ({headerText, links, businessService, customClass="", l ) } - -export default InboxSearchLinks; \ No newline at end of file +export default InboxSearchLinks; diff --git a/react/ui-components/src/atoms/MultiSelectDropdown.js b/react/ui-components/src/atoms/MultiSelectDropdown.js index ee4e69e6ae2..d2c13d32c87 100644 --- a/react/ui-components/src/atoms/MultiSelectDropdown.js +++ b/react/ui-components/src/atoms/MultiSelectDropdown.js @@ -1,27 +1,8 @@ import React, { useEffect, useReducer, useRef, useState } from "react"; -import PropTypes from "prop-types"; +import { ArrowDown, CheckSvg } from "./svgindex"; import { useTranslation } from "react-i18next"; -import RemoveableTag from "./RemoveableTag"; -import { SVG } from "./SVG"; -import Button from "./Button"; -import TreeSelect from "./TreeSelect"; -const MultiSelectDropdown = ({ - options, - optionsKey, - selected = [], - onSelect, - defaultLabel = "", - defaultUnit = "", - BlockNumber = 1, - isOBPSMultiple = false, - props, - isPropsNeeded = false, - ServerStyle = {}, - config, - disabled, - variant, -}) => { +const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, defaultLabel = "", defaultUnit = "", BlockNumber = 1, isOBPSMultiple = false, props = {}, isPropsNeeded = false, ServerStyle = {}, isSurvey = false, placeholder, disable = false }) => { const [active, setActive] = useState(false); const [searchQuery, setSearchQuery] = useState(); const [optionIndex, setOptionIndex] = useState(-1); @@ -31,14 +12,9 @@ const MultiSelectDropdown = ({ function reducer(state, action) { switch (action.type) { case "ADD_TO_SELECTED_EVENT_QUEUE": - return [...state, { code: action.payload?.[1]?.code, propsData: action.payload }]; + return [...state, { [optionsKey]: action.payload?.[1]?.[optionsKey], propsData: action.payload }]; case "REMOVE_FROM_SELECTED_EVENT_QUEUE": - const newState = state.filter((e) => e?.code !== action.payload?.[1]?.code); - onSelect( - newState.map((e) => e.propsData), - props - ); // Update the form state here - return newState; + return state.filter(e => e?.[optionsKey] !== action.payload?.[1]?.[optionsKey]); case "REPLACE_COMPLETE_STATE": return action.payload; default: @@ -48,19 +24,17 @@ const MultiSelectDropdown = ({ useEffect(() => { dispatch({ type: "REPLACE_COMPLETE_STATE", payload: fnToSelectOptionThroughProvidedSelection(selected) }); - }, [selected?.length]); + }, [selected?.length, selected?.[0]?.code]); function fnToSelectOptionThroughProvidedSelection(selected) { - return selected?.map((e) => ({ code: e?.code, propsData: [null, e] })); + return selected?.map(e => ({ [optionsKey]: e?.[optionsKey], propsData: [null, e] })); } + const [alreadyQueuedSelectedState, dispatch] = useReducer(reducer, selected, fnToSelectOptionThroughProvidedSelection); useEffect(() => { if (!active) { - onSelect( - alreadyQueuedSelectedState?.map((e) => e.propsData), - props - ); + onSelect(alreadyQueuedSelectedState?.map(e => e.propsData), props); } }, [active]); @@ -68,92 +42,23 @@ const MultiSelectDropdown = ({ setActive(false); } - window?.Digit?.Hooks.useClickOutside(dropdownRef, handleOutsideClickAndSubmitSimultaneously, active, { capture: true }); + Digit.Hooks.useClickOutside(dropdownRef, handleOutsideClickAndSubmitSimultaneously, active, { capture: true }); + const filtOptns = - searchQuery?.length > 0 - ? options?.filter( - (option) => - t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase()) - .toLowerCase() - .indexOf(searchQuery.toLowerCase()) >= 0 - ) - : options; + searchQuery?.length > 0 ? options.filter((option) => t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase()).toLowerCase().indexOf(searchQuery.toLowerCase()) >= 0) : options; function onSearch(e) { setSearchQuery(e.target.value); } function onSelectToAddToQueue(...props) { - if (variant === "treemultiselect") { - const currentoptions = props[0]; - currentoptions?.forEach((option) => { - const isAlreadySelected = alreadyQueuedSelectedState.some((selectedOption) => selectedOption.code === option.code); - if (!isAlreadySelected) { - dispatch({ type: "ADD_TO_SELECTED_EVENT_QUEUE", payload: [null, option] }); - } else { - dispatch({ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE", payload: [null, option] }); - const parentOption = findParentOption(option, options); - if (parentOption) { - dispatch({ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE", payload: [null, parentOption] }); - } - } - }); - } else { - const isChecked = arguments[0].target.checked; - isChecked - ? dispatch({ type: "ADD_TO_SELECTED_EVENT_QUEUE", payload: arguments }) - : dispatch({ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE", payload: arguments }); - } + const isChecked = arguments[0].target.checked; + isChecked ? dispatch({ type: "ADD_TO_SELECTED_EVENT_QUEUE", payload: arguments }) : dispatch({ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE", payload: arguments }); } - const IconRender = (iconReq, isActive,isSelected) => { - const iconFill = isActive || isSelected ? "#FFFFFF" : "#505A5F"; - try { - const components = require("@egovernments/digit-ui-svg-components"); - const DynamicIcon = components?.[iconReq]; - if (DynamicIcon) { - const svgElement = DynamicIcon({ - width: "1.25rem", - height: "1.25rem", - fill: iconFill, - className: "", - }); - return svgElement; - } else { - console.log("Icon not Found"); - return null; - } - } catch (error) { - console.error("Error in fetching icon"); - return null; - } - }; - const handleClearAll = () => { - dispatch({ type: "REPLACE_COMPLETE_STATE", payload: [] }); - onSelect([], props); - }; - - const replaceDotWithColon = (inputString) => { - if (inputString) { - const updatedInputString = inputString.replace(/\./g, ": "); - return updatedInputString; - } - }; - - const countFinalChildOptions = (totalselectedOptions) => { - let count = 0; - totalselectedOptions?.forEach((option) => { - if (!option.propsData[1]?.options) { - count += 1; - } - }); - return count; - }; - - /* Custom function to scroll and select in the dropdowns while using key up and down */ const keyChange = (e) => { if (e.key == "ArrowDown") { - setOptionIndex((state) => (state + 1 == filtOptns.length ? 0 : state + 1)); + setOptionIndex(state => state + 1 == filtOptns.length ? 0 : state + 1); if (optionIndex + 1 == filtOptns.length) { e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollTo?.(0, 0); } else { @@ -161,7 +66,7 @@ const MultiSelectDropdown = ({ } e.preventDefault(); } else if (e.key == "ArrowUp") { - setOptionIndex((state) => (state !== 0 ? state - 1 : filtOptns.length - 1)); + setOptionIndex(state => state !== 0 ? state - 1 : filtOptns.length - 1); if (optionIndex === 0) { e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollTo?.(100000, 100000); } else { @@ -173,218 +78,49 @@ const MultiSelectDropdown = ({ } }; - const filteredOptions = - searchQuery?.length > 0 - ? options?.filter( - (option) => - t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase()) - .toLowerCase() - .indexOf(searchQuery.toLowerCase()) >= 0 - ) - : options; - - const flattenOptions = (options) => { - let flattened = []; - options?.forEach((option) => { - if (option.options) { - flattened.push(option); - flattened = flattened.concat(option.options); - } else { - flattened.push(option); - } - }); - return flattened; - }; - - const flattenedOptions = flattenOptions(filteredOptions); - - function findParentOption(childOption, options) { - for (const option of options) { - if (option.options && option.options.some((child) => child.code === childOption.code)) { - return option; - } - if (option.options) { - const parentOption = findParentOption(childOption, option.options); - if (parentOption) { - return parentOption; - } - } - } - return null; - } - - const MenuItem = ({ option, index }) => { - const [isActive, setIsActive] = useState(false); - return ( -
selectedOption.code === option.code) ? "checked" : "" - }`} - onMouseDown={() => setIsActive(true)} - onMouseUp={() => setIsActive(false)} - onMouseLeave={() => setIsActive(false)} - style={ - index === optionIndex && !alreadyQueuedSelectedState.find((selectedOption) => selectedOption.code === option.code) - ? { opacity: 1, backgroundColor: "#FFFAF7", border: "0.5px solid #F47738" } - : {} - } - > - selectedOption.code === option.code) ? true : false} - onChange={(e) => { - isPropsNeeded - ? onSelectToAddToQueue(e, option, props) - : isOBPSMultiple - ? onSelectToAddToQueue(e, option, BlockNumber) - : onSelectToAddToQueue(e, option); - }} - className={`digit-multi-select-dropdown-menuitem ${variant ? variant : ""}`} - /> -
- -
-
-
- {config?.showIcon && - option?.icon && - IconRender( - option?.icon, - isActive, - alreadyQueuedSelectedState.find((selectedOption) => selectedOption.code === option.code) ? true : false - )} -

{t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey])}

-
- {variant === "nestedtextmultiselect" && option.description &&
{option.description}
} -
+ const MenuItem = ({ option, index }) => ( +
+ selectedOption[optionsKey] === option[optionsKey]) ? true : false} + onChange={(e) => isPropsNeeded ? onSelectToAddToQueue(e, option, props) : isOBPSMultiple ? onSelectToAddToQueue(e, option, BlockNumber) : onSelectToAddToQueue(e, option)} + style={{ minWidth: "24px", width: "100%" }} + disabled={option.isDisabled || false} + /> +
+
- ); - }; +

{t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey])}

+
+ ); const Menu = () => { - const optionsToRender = variant === "nestedmultiselect" ? flattenedOptions : filteredOptions; - - if (!optionsToRender) { - return null; - } - - return optionsToRender?.map((option, index) => { - if (option.options) { - return ( -
-
{option.name}
-
- ); - } else { - return ; - } - }); + const filteredOptions = + searchQuery?.length > 0 ? options.filter((option) => t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase()).toLowerCase().indexOf(searchQuery.toLowerCase()) >= 0) : options; + return filteredOptions?.map((option, index) => ); }; return ( -
-
-
- setActive(true)} - value={searchQuery} - onChange={onSearch} - /> -
- {variant === "treemultiselect" ? ( -

- {alreadyQueuedSelectedState.length > 0 - ? `${countFinalChildOptions(alreadyQueuedSelectedState)} ${defaultUnit} Selected` - : defaultLabel} -

- ) : ( -

{alreadyQueuedSelectedState.length > 0 ? `${alreadyQueuedSelectedState.length} ${defaultUnit} Selected` : defaultLabel}

- )} - -
-
- {active ? ( -
- {variant === "treemultiselect" ? ( - - ) : ( - - )} -
- ) : null} +
+
+ setActive(true)} value={searchQuery} onChange={onSearch} placeholder={t(placeholder)} /> +
+

{alreadyQueuedSelectedState.length > 0 ? `${isSurvey ? alreadyQueuedSelectedState?.filter((ob) => ob?.i18nKey !== undefined).length : alreadyQueuedSelectedState.length} ${defaultUnit}` : defaultLabel}

+
- {config?.isDropdownWithChip ? ( -
- {alreadyQueuedSelectedState.length > 0 && - alreadyQueuedSelectedState.map((value, index) => { - if (!value.propsData[1]?.options) { - const translatedText = t(value.code); - const replacedText = replaceDotWithColon(translatedText); - return ( - 64 ? `${replacedText.slice(0, 64)}...` : replacedText} - onClick={ - variant === "treemultiselect" - ? () => onSelectToAddToQueue([value]) - : isPropsNeeded - ? (e) => onSelectToAddToQueue(e, value, props) - : (e) => onSelectToAddToQueue(e, value) - } - className="multiselectdropdown-tag" - /> - ); - } - return null; - })} - {alreadyQueuedSelectedState.length > 0 && ( -
- ) : null} + {active ? + ( +
+ +
+ ) : null + }
); }; -MultiSelectDropdown.propTypes = { - options: PropTypes.array.isRequired, - optionsKey: PropTypes.string.isRequired, - selected: PropTypes.array, - onSelect: PropTypes.func.isRequired, - defaultLabel: PropTypes.string, - defaultUnit: PropTypes.string, - BlockNumber: PropTypes.number, - isOBPSMultiple: PropTypes.bool, - props: PropTypes.object, - isPropsNeeded: PropTypes.bool, - ServerStyle: PropTypes.object, - config: PropTypes.object, -}; - export default MultiSelectDropdown; diff --git a/react/ui-components/src/atoms/RemovableTagNew.js b/react/ui-components/src/atoms/RemovableTagNew.js new file mode 100644 index 00000000000..bd82400338a --- /dev/null +++ b/react/ui-components/src/atoms/RemovableTagNew.js @@ -0,0 +1,14 @@ +import React from "react"; +import { Close } from "./svgindex"; + +const RemoveableTagNew = ({ text={}, onClick, extraStyles,disabled = false }) => ( +
+ {`${text?.label} :`} + {text?.value} + + + +
+); + +export default RemoveableTagNew; \ No newline at end of file diff --git a/react/ui-components/src/atoms/SearchComponent.js b/react/ui-components/src/atoms/SearchComponent.js index 13d3f8e6d49..e8e4c844485 100644 --- a/react/ui-components/src/atoms/SearchComponent.js +++ b/react/ui-components/src/atoms/SearchComponent.js @@ -1,104 +1,99 @@ -import React, { useContext, useEffect, useState } from "react"; -import { useForm } from "react-hook-form"; +import React, { useContext, useEffect, useState, useMemo } from "react"; +import { useForm, useWatch } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { InboxContext } from "../hoc/InboxSearchComposerContext"; import RenderFormFields from "../molecules/RenderFormFields"; -import Header from "../atoms/Header"; -import LinkLabel from "../atoms/LinkLabel"; import SubmitBar from "../atoms/SubmitBar"; import Toast from "../atoms/Toast"; -import { FilterIcon, RefreshIcon } from "../atoms/svgindex"; +import { FilterIcon, RefreshIcon } from "./svgindex"; +import HorizontalNavV2 from "./HorizontalNavV2"; -const SearchComponent = ({ uiConfig, header = "", screenType = "search", fullConfig, data }) => { +const setUIConf = (uiConfig) => { + if (uiConfig.additionalTabs) + return [{ uiConfig }, ...uiConfig?.additionalTabs]; + return [{ uiConfig }]; +}; + +const SearchComponent = ({ uiConfig, header = "", screenType = "search", fullConfig, data, activeLink, setActiveLink, browserSession }) => { + const [navConfig, setNavConfig] = useState(uiConfig?.configNavItems); + const [allUiConfigs, setAllUiConfigs] = useState(setUIConf(uiConfig)); const { t } = useTranslation(); - const { state, dispatch } = useContext(InboxContext) - const [showToast, setShowToast] = useState(null) + const { state, dispatch } = useContext(InboxContext); + const [showToast, setShowToast] = useState(null); let updatedFields = []; - const { apiDetails } = fullConfig + const { apiDetails } = fullConfig; + const [session, setSession, clearSession] = browserSession || []; if (fullConfig?.postProcessResult) { - //conditions can be added while calling postprocess function to pass different params - Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.postProcess(data, uiConfig) + Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.postProcess(data, uiConfig); } - const { - register, - handleSubmit, - setValue, - getValues, - reset, - watch, - trigger, - control, - formState, - errors, - setError, - clearErrors, - unregister, - } = useForm({ + const defValuesFromSession = uiConfig?.type === "search" ? session?.searchForm : session?.filterForm; + + const { register, handleSubmit, unregister } = useForm({ defaultValues: uiConfig?.defaultValues, }); - const formData = watch(); + + const formData = useWatch(); + const checkKeyDown = (e) => { const keyCode = e.keyCode ? e.keyCode : e.key ? e.key : e.which; if (keyCode === 13) { - // e.preventDefault(); + updatedFields = Object.values(formState?.dirtyFields); } }; useEffect(() => { - updatedFields = Object.values(formState?.dirtyFields) - }, [formState]) - - const onSubmit = (data, e) => { + clearSearch(); + }, [activeLink]); - e?.preventDefault?.(); - //here -> added a custom validator function, if required add in UICustomizations - const isAnyError = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.customValidationCheck ? Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.customValidationCheck(data) : false + const onSubmit = (data) => { + const isAnyError = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.customValidationCheck ? Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.customValidationCheck(data) : false; if (isAnyError) { - setShowToast(isAnyError) - setTimeout(closeToast, 3000) - return + setShowToast(isAnyError); + setTimeout(closeToast, 3000); + return; } - - if (updatedFields.length >= uiConfig?.minReqFields) { - // here based on screenType call respective dispatch fn + if (updatedFields?.length >= (activeLink ? allUiConfigs?.filter(uiConf => activeLink?.name === uiConf.uiConfig.navLink)?.[0]?.uiConfig?.minReqFields : uiConfig?.minReqFields)) { dispatch({ type: uiConfig?.type === "filter" ? "filterForm" : "searchForm", state: { ...data } - }) + }); + dispatch({ + type: "tableForm", + state: { limit: 10, offset: 0 } + }); } else { - setShowToast({ warning: true, label: t("ES_COMMON_MIN_SEARCH_CRITERIA_MSG") }) + setShowToast({ warning: true, label: t("ES_COMMON_MIN_SEARCH_CRITERIA_MSG") }); setTimeout(closeToast, 3000); } - } + }; const clearSearch = () => { - reset(uiConfig?.defaultValues) + reset(uiConfig?.defaultValues); dispatch({ - type: "clearSearchForm", + type: uiConfig?.type === "filter" ? "clearFilterForm" : "clearSearchForm", state: { ...uiConfig?.defaultValues } - //need to pass form with empty strings - }) + }); dispatch({ - type: "clearTableForm" - }) - } + type: "tableForm", + state: { limit: 10, offset: 0 } + }); + }; + + const setDefaultValues = () => { + reset({ ...uiConfig?.defaultValues, ...defValuesFromSession }); + }; + + useEffect(() => { + setDefaultValues(); + }, [session]); const closeToast = () => { setShowToast(null); - } - - const handleFilterRefresh = () => { - reset(uiConfig?.defaultValues) - dispatch({ - type: "clearFilterForm", - state: { ...uiConfig?.defaultValues } - //need to pass form with empty strings - }) - } + }; const renderHeader = () => { switch (uiConfig?.type) { @@ -106,27 +101,25 @@ const SearchComponent = ({ uiConfig, header = "", screenType = "search", fullCon return (
-
{t(header)}
-
- ) + ); } default: { - return
{t(header)}
+ return
{t(header)}
; } } - } + }; return ( - + 0 ? navConfig : []} showNav={navConfig?.length > 0} activeLink={activeLink} setActiveLink={setActiveLink} fromSearchComp={true} horizontalLine={uiConfig?.horizontalLine}>
{header && renderHeader()}
checkKeyDown(e)}>
{uiConfig?.showFormInstruction &&

{t(uiConfig?.showFormInstruction)}

} -
+
activeLink?.name === uiConf.uiConfig.navLink)?.[0]?.uiConfig?.fields : uiConfig?.fields} control={control} formData={formData} errors={errors} @@ -141,11 +134,7 @@ const SearchComponent = ({ uiConfig, header = "", screenType = "search", fullCon />
{uiConfig?.secondaryLabel && {t(uiConfig?.secondaryLabel)}} - {uiConfig?.isPopUp && uiConfig?.primaryLabel && { - handleSubmit(onSubmit)(e); - // onSubmit(formData, e) - }} disabled={false} />} - {!uiConfig?.isPopUp && uiConfig?.primaryLabel && } + {uiConfig?.primaryLabel && }
@@ -158,8 +147,8 @@ const SearchComponent = ({ uiConfig, header = "", screenType = "search", fullCon onClose={closeToast} /> }
- - ) -} + + ); +}; -export default SearchComponent \ No newline at end of file +export default SearchComponent; diff --git a/react/ui-components/src/atoms/SubmitBar.js b/react/ui-components/src/atoms/SubmitBar.js index 1f4cd1fc6a8..6e94d4b8aba 100644 --- a/react/ui-components/src/atoms/SubmitBar.js +++ b/react/ui-components/src/atoms/SubmitBar.js @@ -6,13 +6,13 @@ const SubmitBar = forwardRef((props, ref) => { ); }); diff --git a/react/ui-components/src/atoms/Table.js b/react/ui-components/src/atoms/Table.js index b5a56e547ef..50db10d1d67 100644 --- a/react/ui-components/src/atoms/Table.js +++ b/react/ui-components/src/atoms/Table.js @@ -1,30 +1,24 @@ -import { useGlobalFilter, usePagination, useRowSelect, useSortBy, useTable } from "react-table"; -import React, { useEffect, useState, useRef, forwardRef } from "react"; -import { ArrowBack, ArrowForward, ArrowToFirst, ArrowToLast, SortDown, SortUp, DoubleTickIcon } from "../atoms/svgindex" -import CheckBox from "./CheckBox"; -import ActionBar from "./ActionBar"; -import Toast from "./Toast"; -import Button from "./Button"; +import React, { useEffect, useRef } from 'react'; +import { + useGlobalFilter, + usePagination, + useRowSelect, + useSortBy, + useTable, +} from 'react-table'; +import { + ArrowBack, + ArrowForward, + ArrowToFirst, + ArrowToLast, + SortDown, + SortUp, +} from './svgindex'; const noop = () => {}; - -const IndeterminateCheckbox = forwardRef(({ indeterminate, ...rest }, ref) => { - const defaultRef = useRef(); - const resolvedRef = ref || defaultRef; - - useEffect(() => { - resolvedRef.current.indeterminate = indeterminate; - }, [resolvedRef, indeterminate]); - - return ( - - - - ); -}); - const Table = ({ - className = "table", + + className = 'table', t, data, columns, @@ -33,7 +27,7 @@ const Table = ({ pageSizeLimit = 10, disableSort = true, autoSort = false, - initSortId = "", + initSortId = '', onSearch = false, manualPagination = true, totalRecords, @@ -47,14 +41,12 @@ const Table = ({ isPaginationRequired = true, sortParams = [], showAutoSerialNo = false, - customTableWrapperClassName = "", + customTableWrapperClassName = '', styles = {}, tableTopComponent, tableRef, isReportTable = false, - showCheckBox = false, - actionLabel = "CS_COMMON_DOWNLOAD", - tableSelectionHandler = () => {}, + inboxStyles, }) => { const { getTableProps, @@ -72,13 +64,18 @@ const Table = ({ previousPage, setPageSize, setGlobalFilter, - state: { pageIndex, pageSize, sortBy, globalFilter, selectedRowIds }, + state: { pageIndex, pageSize, sortBy, globalFilter }, } = useTable( { columns, data, - initialState: { pageIndex: currentPage, pageSize: pageSizeLimit, sortBy: autoSort ? [{ id: initSortId, desc: false }] : sortParams }, - pageCount: totalRecords > 0 ? Math.ceil(totalRecords / pageSizeLimit) : -1, + initialState: { + pageIndex: currentPage, + pageSize: pageSizeLimit, + sortBy: autoSort ? [{ id: initSortId, desc: false }] : sortParams, + }, + pageCount: + totalRecords > 0 ? Math.ceil(totalRecords / pageSizeLimit) : -1, manualPagination: manualPagination, disableMultiSort: false, disableSortBy: disableSort, @@ -87,7 +84,7 @@ const Table = ({ autoResetSortBy: false, disableSortRemove: true, disableGlobalFilter: onSearch === false ? true : false, - globalFilter: globalSearch || "text", + globalFilter: globalSearch || 'text', useControlledState: (state) => { return React.useMemo(() => ({ ...state, @@ -98,176 +95,181 @@ const Table = ({ useGlobalFilter, useSortBy, usePagination, - useRowSelect, - (hooks) => { - if (showCheckBox) { - hooks.visibleColumns.push((columns) => [ - { - id: "selection", - Header: ({ getToggleAllPageRowsSelectedProps }) => ( -
- -
- ), - Cell: ({ row }) => ( -
- -
- ), - }, - ...columns, - ]); - } - } + useRowSelect ); - let isTotalColSpanRendered = false; - const [toast, setToast] = useState({ show: false, label: "", error: false }); - useEffect(() => { onSort(sortBy); }, [onSort, sortBy]); - useEffect(() => setGlobalFilter(onSearch), [onSearch, setGlobalFilter, data]); - - const handleSelection = async () => { - const selectedRows = rows?.filter((ele) => Object.keys(selectedRowIds)?.includes(ele?.id)); - const response = await tableSelectionHandler(selectedRows, t); - setToast({ show: true, label: t(response?.label), error: !response?.isSuccess }); - }; - - const handleToastClose = () => { - setToast({ show: false, label: "", error: false }); - }; - - useEffect(() => { - if (toast?.show) { - setTimeout(() => { - handleToastClose(); - }, 3000); - } - }, [toast?.show]); - - //note -> adding data prop in dependency array to trigger filter whenever state of the table changes - //use case -> without this if we enter string to search and then click on it's attendence checkbox or skill selector for that matter then the global filtering resets and whole table is shown + useEffect(() => setGlobalFilter(onSearch), [onSearch, setGlobalFilter]); + const tref = useRef(); return ( - - {tableTopComponent ? tableTopComponent : null} - - - {headerGroups.map((headerGroup) => ( - - {showAutoSerialNo && ( - - )} - {headerGroup.headers.map((column) => ( - - ))} - - ))} - - - {page.map((row, i) => { - // rows.slice(0, 10).map((row, i) => { - prepareRow(row); - return ( - - {showAutoSerialNo && } - {row.cells.map((cell) => { - return ( - - ); - })} +
+ + {tableTopComponent ? tableTopComponent : null} +
- {showAutoSerialNo && typeof showAutoSerialNo == "string" ? t(showAutoSerialNo) : t("TB_SNO")} - - {column.render("Header")} - {column.isSorted ? column.isSortedDesc ? : : ""} -
{i + 1} - {cell.attachment_link ? ( - - {cell.render("Cell")} - - ) : ( - {cell.render("Cell")} - )} -
+ + {headerGroups.map((headerGroup) => ( + + {showAutoSerialNo && ( + + )} + {headerGroup.headers.map((column) => ( + + ))} - ); - })} - -
+ {showAutoSerialNo && typeof showAutoSerialNo == 'string' + ? t(showAutoSerialNo) + : t('TB_SNO')} + + {column.render('Header')} + + {column.isSorted ? ( + column.isSortedDesc ? ( + + ) : ( + + ) + ) : ( + '' + )} + +
- - {isPaginationRequired && ( -
- {`${t("CS_COMMON_ROWS_PER_PAGE")} :`} - setPageSize(Number(e.target.value)) + } > - {[10, 20, 30, 40, 50].map((pageSize) => ( - - ))} - - - - {pageIndex * pageSize + 1} - {"-"} - {manualPagination - ? (currentPage + 1) * pageSizeLimit > totalRecords - ? totalRecords - : (currentPage + 1) * pageSizeLimit - : pageIndex * pageSize + page?.length}{" "} - {/* {(pageIndex + 1) * pageSizeLimit > rows.length ? rows.length : (pageIndex + 1) * pageSizeLimit}{" "} */} - {totalRecords ? `of ${manualPagination ? totalRecords : rows.length}` : ""} - {" "} - - {/* to go to first and last page we need to do a manual pagination , it can be updated later*/} - {!manualPagination && pageIndex != 0 && gotoPage(0)} className={"cp"} />} - {canPreviousPage && manualPagination && onFirstPage && manualPagination && onFirstPage()} className={"cp"} />} - {canPreviousPage && (manualPagination ? onPrevPage() : previousPage())} className={"cp"} />} - {canNextPage && (manualPagination ? onNextPage() : nextPage())} className={"cp"} />} - {!manualPagination && pageIndex != pageCount - 1 && gotoPage(pageCount - 1)} className={"cp"} />} - {rows.length == pageSizeLimit && canNextPage && manualPagination && onLastPage && ( - manualPagination && onLastPage()} className={"cp"} /> - )} - {/* to go to first and last page we need to do a manual pagination , it can be updated later*/} -
- )} - {Object.keys(selectedRowIds)?.length > 0 && ( - - - -

{`${Object.keys(selectedRowIds)?.length} ${t( - "COMMON_SELECTED" - )}`}

- -
+ )} + + ); + }; + export default Table; \ No newline at end of file diff --git a/react/ui-components/src/atoms/UploadFile.js b/react/ui-components/src/atoms/UploadFile.js index 41bc423fee9..21dacd618c7 100644 --- a/react/ui-components/src/atoms/UploadFile.js +++ b/react/ui-components/src/atoms/UploadFile.js @@ -1,26 +1,122 @@ import React, { useEffect, useRef, useState, Fragment } from "react"; -import PropTypes from "prop-types"; import ButtonSelector from "./ButtonSelector"; +import { Close } from "./svgindex"; import { useTranslation } from "react-i18next"; import RemoveableTag from "./RemoveableTag"; -import ErrorMessage from "./ErrorMessage"; const getRandomId = () => { return Math.floor((Math.random() || 1) * 139); }; +const getCitizenStyles = (value) => { + let citizenStyles = {}; + if (value === "propertyCreate") { + citizenStyles = { + textStyles: { + whiteSpace: "nowrap", + width: "100%", + overflow: "hidden", + textOverflow: "ellipsis", + width: "80%" + }, + tagStyles: { + width: "90%", + flexWrap: "nowrap", + }, + inputStyles: { + width: "44%", + minHeight: "2rem", + maxHeight: "3rem", + top: "20%" + }, + buttonStyles: { + height: "auto", + minHeight: "2rem", + width: "40%", + maxHeight: "3rem" + }, + tagContainerStyles: { + width: "60%", + display: "flex", + marginTop: "0px" + }, + closeIconStyles: { + width : "20px" + }, + containerStyles: { + padding: "10px", + marginTop: "0px" + }, + }; + } else if (value === "IP") { + citizenStyles = { + textStyles: { + whiteSpace: "nowrap", + maxWidth: "250px", + overflow: "hidden", + textOverflow: "ellipsis", + }, + tagStyles: { + marginLeft:"-30px" + }, + inputStyles: {}, + closeIconStyles: { + position:"absolute", + marginTop:"-12px" + }, + buttonStyles: {}, + tagContainerStyles: {}, + }; + } else if (value === "OBPS") { + citizenStyles = { + containerStyles: { + display: "flex", + justifyContent: "flex-start", + alignItems: "center", + flexWrap: "wrap", + margin: "0px", + padding: "0px" + }, + tagContainerStyles: { + margin: "0px", + padding: "0px", + width: "46%" + }, + tagStyles: { + height: "auto", + padding: "8px", + margin: 0, + width: "100%", + margin: "5px" + }, + textStyles: { + wordBreak: "break-word", + height: "auto", + lineHeight: "16px", + overflow: "hidden", + maxHeight: "34px" + }, + inputStyles: { + width: "43%", + minHeight: "42px", + maxHeight: "42px", + top: "5px", + left: "5px" + }, + buttonStyles: { + height: "auto", + }, + }; + } + return citizenStyles; +}; + const UploadFile = (props) => { - const { t } = useTranslation(); - const inpRef = useRef(); const [hasFile, setHasFile] = useState(false); - const [prevSate, setprevSate] = useState(null); - const user_type = window?.Digit?.SessionStorage.get("userType"); - const handleChange = () => { - if (inpRef.current.files[0]) { - setHasFile(true); - setprevSate(inpRef.current.files[0]); - } else setHasFile(false); - }; + const inpRef = useRef(null); + const { t } = useTranslation(); + + const extraStyles = getCitizenStyles("OBPS"); const handleDelete = () => { inpRef.current.value = ""; @@ -28,7 +124,7 @@ const UploadFile = (props) => { }; const handleEmpty = () => { - if (inpRef.current.files.length <= 0 && prevSate !== null) { + if (inpRef.current.files.length <= 0 && prevState !== null) { inpRef.current.value = ""; props.onDelete(); } @@ -40,44 +136,48 @@ const UploadFile = (props) => { } useEffect(() => handleEmpty(), [inpRef?.current?.files]); - useEffect(() => handleChange(), [props.message]); const showHint = props?.showHint || false; return ( - {showHint &&

{t(props?.hintText)}

} -
-
+ {showHint &&

{t(props?.hintText)}

} +
+
{props?.uploadedFiles?.map((file, index) => { const fileDetailsData = file[1]; return ( -
- 64 ? `${file[0].slice(0, 64)} ...` : file[0]} - onClick={(e) => props?.removeTargetedFile(fileDetailsData, e)} - /> +
+ props?.removeTargetedFile(fileDetailsData, e)} />
); })} - {props?.uploadedFiles.length === 0 &&

{props.message}

} + {!hasFile || props.error ? ( +

{props.message}

+ ) : ( +
+
+ + {(typeof inpRef.current.files[0]?.name !== "undefined") && !(props?.file) ? inpRef.current.files[0]?.name : props.file?.name} + + handleDelete()} style={extraStyles ? extraStyles?.closeIconStyles : null}> + + +
+
+ )}
{ disabled={props.disabled} onChange={(e) => props.onUpload(e)} onClick={(event) => { - if (!props?.enableButton) { - event.preventDefault(); - } else { - const { target = {} } = event || {}; - target.value = ""; - } + const { target = {} } = event || {}; + target.value = ""; }} />
- {props.iserror && } - {props?.showHintBelow &&

{t(props?.hintText)}

} + {props.iserror &&

{props.iserror}

} + {props?.showHintBelow &&

{t(props?.hintText)}

} ); }; -UploadFile.propTypes = { - hintText: PropTypes.string, - customClass: PropTypes.string, - uploadedFiles: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))), - enableButton: PropTypes.bool, - showHint: PropTypes.bool, - buttonType: PropTypes.string, - onUpload: PropTypes.func.isRequired, - removeTargetedFile: PropTypes.func.isRequired, - onDelete: PropTypes.func, - iserror: PropTypes.string, - showHintBelow: PropTypes.bool, - message: PropTypes.string, - disabled: PropTypes.bool, - inputStyles: PropTypes.object, - multiple: PropTypes.bool, - accept: PropTypes.string, - id: PropTypes.string, -}; export default UploadFile; diff --git a/react/ui-components/src/hoc/InboxSearchComposer.js b/react/ui-components/src/hoc/InboxSearchComposer.js index fbe0f9ae59b..1e31ed62d55 100644 --- a/react/ui-components/src/hoc/InboxSearchComposer.js +++ b/react/ui-components/src/hoc/InboxSearchComposer.js @@ -1,6 +1,6 @@ -import React, { useEffect, useReducer, useState, useMemo } from "react"; +import React, { useEffect, useReducer, useState,useMemo } from "react"; import Toast from "../atoms/Toast"; -import ResultsTable from "./ResultsTable"; +import ResultsTable from "./ResultsTable" import reducer, { initialInboxState } from "./InboxSearchComposerReducer"; import InboxSearchLinks from "../atoms/InboxSearchLinks"; import { InboxContext } from "./InboxSearchComposerContext"; @@ -10,278 +10,274 @@ import SearchAction from "../molecules/SearchAction"; import FilterAction from "../molecules/FilterAction"; import MobileSearchComponent from "./MobileView/MobileSearchComponent"; import MobileSearchResults from "./MobileView/MobileSearchResults"; -import MediaQuery from "react-responsive"; +import MediaQuery from 'react-responsive'; import _ from "lodash"; import Header from "../atoms/Header"; import { useTranslation } from "react-i18next"; +const InboxSearchComposer = ({configs,headerLabel,additionalConfig,onFormValueChange=()=>{},showTab,tabData,onTabChange}) => { + const { t } = useTranslation(); -const InboxSearchComposer = ({ configs, headerLabel, additionalConfig, onFormValueChange = () => {} }) => { - const { t } = useTranslation(); - - const [enable, setEnable] = useState(false); - const [state, dispatch] = useReducer(reducer, initialInboxState); - const [showToast, setShowToast] = useState(false); - //for mobile view - const [type, setType] = useState(""); - const [popup, setPopup] = useState(false); - - const apiDetails = configs?.apiDetails; - - const mobileSearchSession = Digit.Hooks.useSessionStorage("MOBILE_SEARCH_MODAL_FORM", {}); - const [sessionFormData, setSessionFormData, clearSessionFormData] = mobileSearchSession; - - //for mobile view - useEffect(() => { - if (type) setPopup(true); - }, [type]); - - useEffect(() => { - clearSessionFormData(); - }, []); - - useEffect(() => { - //here if jsonpaths for search & table are same then searchform gets overridden - - if (Object.keys(state.searchForm)?.length >= 0) { - const result = { ..._.get(apiDetails, apiDetails?.searchFormJsonPath, {}), ...state.searchForm }; - Object.keys(result).forEach((key) => { - if (!result[key]) delete result[key]; - }); - _.set(apiDetails, apiDetails?.searchFormJsonPath, result); + const [enable, setEnable] = useState(false); + + const [state, dispatch] = useReducer(reducer, initialInboxState); + const [showToast, setShowToast] = useState(false); + //for mobile view + const [type, setType] = useState(""); + const [popup, setPopup] = useState(false); + + const [apiDetails, setApiDetails] = useState(configs?.apiDetails); + useEffect(()=>{ + setApiDetails(configs?.apiDetails) + },[configs]) + const mobileSearchSession = Digit.Hooks.useSessionStorage("MOBILE_SEARCH_MODAL_FORM", + {} + ); + const [sessionFormData, setSessionFormData, clearSessionFormData] = mobileSearchSession; + //for mobile view + useEffect(() => { + if (type) setPopup(true); + }, [type]); + + useEffect(()=>{ + clearSessionFormData(); + },[]); + + useEffect(() => { + //here if jsonpaths for search & table are same then searchform gets overridden + + if (Object.keys(state.searchForm)?.length >= 0) { + const result = { ..._.get(apiDetails, apiDetails?.searchFormJsonPath, {}), ...state.searchForm } + Object.keys(result).forEach(key => { + if (!result[key]) delete result[key] + }); + _.set(apiDetails, apiDetails?.searchFormJsonPath, result) + } + if (Object.keys(state.filterForm)?.length >= 0) { + const result = { ..._.get(apiDetails, apiDetails?.filterFormJsonPath, {}), ...state.filterForm } + Object.keys(result).forEach(key => { + if (!result[key] || result[key]?.length===0) delete result[key] + }); + _.set(apiDetails, apiDetails?.filterFormJsonPath, result) + } + + if(Object.keys(state.tableForm)?.length >= 0) { + _.set(apiDetails, apiDetails?.tableFormJsonPath, { ..._.get(apiDetails, apiDetails?.tableFormJsonPath, {}),...state.tableForm }) + } + const searchFormParamCount = Object.keys(state.searchForm).reduce((count,key)=>state.searchForm[key]===""?count:count+1,0) + const filterFormParamCount = Object.keys(state.filterForm).reduce((count, key) => state.filterForm[key] === "" ? count : count + 1, 0) + + if (Object.keys(state.tableForm)?.length > 0 && (searchFormParamCount >= apiDetails?.minParametersForSearchForm || filterFormParamCount >= apiDetails?.minParametersForFilterForm)){ + setEnable(true) + } + if(configs?.type === 'inbox' || configs?.type === 'download') setEnable(true) + },[state]) + + useEffect(() => { + onFormValueChange(state) + }, [state]) + + let requestCriteria = { + url:configs?.apiDetails?.serviceName, + params:configs?.apiDetails?.requestParam, + body:configs?.apiDetails?.requestBody, + config: { + enabled: enable, + }, + state + }; + //clear the reducer state when user moves away from inbox screen(it already resets when component unmounts)(keeping this code here for reference) + // useEffect(() => { + // return () => { + // if (!window.location.href.includes("/inbox")) { + + // dispatch({ + // type: "clearSearchForm", + // state: configs?.sections?.search?.uiConfig?.defaultValues + // //need to pass form with empty strings + // }) + // dispatch({ + // type: "clearFilterForm", + // state: configs?.sections?.filter?.uiConfig?.defaultValues + // //need to pass form with empty strings + // }) + // } + // }; + // }, [location]); + + const updatedReqCriteria = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.preProcess ? Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.preProcess(requestCriteria,configs.additionalDetails) : requestCriteria + + if(configs.customHookName){ + var { isLoading, data, revalidate,isFetching,refetch,error } = eval(`Digit.Hooks.${configs.customHookName}(updatedReqCriteria)`); } - if (Object.keys(state.filterForm)?.length >= 0) { - const result = { ..._.get(apiDetails, apiDetails?.filterFormJsonPath, {}), ...state.filterForm }; - Object.keys(result).forEach((key) => { - if (!result[key] || result[key]?.length === 0) delete result[key]; - }); - _.set(apiDetails, apiDetails?.filterFormJsonPath, result); + else { + var { isLoading, data, revalidate,isFetching,error } = Digit.Hooks.useCustomAPIHook(updatedReqCriteria); + } - - if (Object.keys(state.tableForm)?.length >= 0) { - _.set(apiDetails, apiDetails?.tableFormJsonPath, { ..._.get(apiDetails, apiDetails?.tableFormJsonPath, {}), ...state.tableForm }); - } - const searchFormParamCount = Object.keys(state.searchForm).reduce((count, key) => (state.searchForm[key] === "" ? count : count + 1), 0); - const filterFormParamCount = Object.keys(state.filterForm).reduce((count, key) => (state.filterForm[key] === "" ? count : count + 1), 0); - - if ( - Object.keys(state.tableForm)?.length > 0 && - (searchFormParamCount >= apiDetails?.minParametersForSearchForm || filterFormParamCount >= apiDetails?.minParametersForFilterForm) - ) { - setEnable(true); - } - - if (configs?.type === "inbox" || configs?.type === "download") setEnable(true); - }, [state]); - - useEffect(() => { - onFormValueChange(state); - }, [state]); - - let requestCriteria = { - url: configs?.apiDetails?.serviceName, - params: configs?.apiDetails?.requestParam, - body: configs?.apiDetails?.requestBody, - config: { - enabled: enable, - }, - state, - }; - - //clear the reducer state when user moves away from inbox screen(it already resets when component unmounts)(keeping this code here for reference) - // useEffect(() => { - // return () => { - // if (!window.location.href.includes("/inbox")) { - - // dispatch({ - // type: "clearSearchForm", - // state: configs?.sections?.search?.uiConfig?.defaultValues - // //need to pass form with empty strings - // }) - // dispatch({ - // type: "clearFilterForm", - // state: configs?.sections?.filter?.uiConfig?.defaultValues - // //need to pass form with empty strings - // }) - // } - // }; - // }, [location]); - - const updatedReqCriteria = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.preProcess - ? Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.preProcess(requestCriteria, configs.additionalDetails) - : requestCriteria; - - if (configs.customHookName) { - var { isLoading, data, revalidate, isFetching, refetch, error } = eval(`Digit.Hooks.${configs.customHookName}(updatedReqCriteria)`); - } else { - var { isLoading, data, revalidate, isFetching, error } = Digit.Hooks.useCustomAPIHook(updatedReqCriteria); - } - - const closeToast = () => { - setTimeout(() => { - setShowToast(null); - }, 5000); - }; - - useEffect(() => { - if (error) { - setShowToast({ label: error?.message, isError: true }); - closeToast(); + const closeToast = () => { + setTimeout(() => { + setShowToast(null); + }, 5000); + }; + useEffect(() => { + if(error){ + setShowToast({ label:error?.message, isError: true }); + closeToast() + } + }, [error]) + + + useEffect(() => { + if(additionalConfig?.search?.callRefetch) { + refetch() + additionalConfig?.search?.setCallRefetch(false) + } + }, [additionalConfig?.search?.callRefetch]) + + useEffect(() => { + return () => { + revalidate(); + setEnable(false); + }; + }) + //for mobile view + const handlePopupClose = () => { + setPopup(false); + setType(""); } - }, [error]); - - useEffect(() => { - if (additionalConfig?.search?.callRefetch) { - refetch(); - additionalConfig?.search?.setCallRefetch(false); - } - }, [additionalConfig?.search?.callRefetch]); - - useEffect(() => { - return () => { - revalidate(); - setEnable(false); - }; - }); - - //for mobile view - const handlePopupClose = () => { - setPopup(false); - setType(""); - }; - - return ( - - {headerLabel &&
{t(headerLabel)}
} -
-
- {configs?.sections?.links?.show && ( -
- -
- )} - {configs?.type === "search" && configs?.sections?.search?.show && ( -
- -
- )} - {configs?.type === "search" && configs?.sections?.filter?.show && ( -
- -
- )} - {configs?.type === "inbox" && configs?.sections?.search?.show && ( - -
- -
- - )} - {configs?.type === "inbox" && configs?.sections?.filter?.show && ( - -
- -
- - )} - {configs?.type === "inbox" && ( - -
- {configs?.sections?.search?.show && ( - { - setType("SEARCH"); - setPopup(true); - }} - /> - )} - {configs?.sections?.filter?.show && ( - { - setType("FILTER"); - setPopup(true); - }} - /> - )} -
- - )} - {configs?.sections?.searchResult?.show && ( -
0 - ? !(isLoading || isFetching) - ? { overflowX: "auto" } - : {} - : {} - } - > - - - - - - -
- )} - {popup && ( - + return ( + + {headerLabel&&
{ t(headerLabel)}
} +
+
+ { + configs?.sections?.links?.show && +
+ +
+ } + { + configs?.type === 'search' && configs?.sections?.search?.show && +
+ +
+ } + { + configs?.type === 'search' && configs?.sections?.filter?.show && +
+ +
+ } + { + configs?.type === 'inbox' && configs?.sections?.search?.show && + +
+ +
+ + } + { + configs?.type === 'inbox' && configs?.sections?.filter?.show && + +
+ +
+ + } + { configs?.type === 'inbox' && +
+ { + configs?.sections?.search?.show && ( + { + setType("SEARCH"); + setPopup(true); + }} + /> + )} + {configs?.sections?.filter?.show && ( + { + setType("FILTER"); + setPopup(true); + }} + /> + )} +
+ + } + { + configs?.sections?.searchResult?.show && +
0 ? (!(isLoading || isFetching) ?{ overflowX: "auto" }: {}) : { }} > + + {/* configs?.sections?.searchResult?.show && +
0 ? (!(isLoading || isFetching) ?{ overflowX: "scroll", borderRadius : "4px" }: {}) : { }} > */} + + + + + +
+ } + {popup && ( + {type === "FILTER" && (
- + />
)} {/* {type === "SORT" && ( @@ -291,26 +287,27 @@ const InboxSearchComposer = ({ configs, headerLabel, additionalConfig, onFormVal )} */} {type === "SEARCH" && (
- + />
)} )} -
-
{/* One can use this Parent to add additional sub parents to render more sections */}
-
- {showToast && setShowToast(null)}>} - - ); -}; - -export default InboxSearchComposer; +
+
+ {/* One can use this Parent to add additional sub parents to render more sections */} +
+
+ {showToast && setShowToast(null)}>} + + ) +} +export default InboxSearchComposer; \ No newline at end of file diff --git a/react/ui-components/src/hoc/InboxSearchComposerReducer.js b/react/ui-components/src/hoc/InboxSearchComposerReducer.js index 20d79410962..250c90d3227 100644 --- a/react/ui-components/src/hoc/InboxSearchComposerReducer.js +++ b/react/ui-components/src/hoc/InboxSearchComposerReducer.js @@ -1,39 +1,88 @@ -export const initialInboxState = { - searchForm:{ +import _ from 'lodash'; - }, - filterForm:{ +function removeObjectFromArray(array, key, value) { + // Find the index of the object with the specified key and value + const indexToRemove = array.findIndex((obj) => obj[key] === value); - }, - tableForm:{ - limit: 10, - offset: 0, - } -}; + // If the object is found, remove it from the array + if (indexToRemove !== -1) { + array.splice(indexToRemove, 1); + } -const reducer = (state, action) => { + // Return the modified array + return array; +} +export const initialInboxState = { + searchForm: {}, + filterForm: {}, + tableForm: { + limit: 10, + offset: 0, + }, + }; + + const reducer = (state, action) => { switch (action.type) { - case "searchForm": - const {state:updatedSearchStateSearchForm} = action - return {...state, searchForm: {...state.searchForm,...updatedSearchStateSearchForm}}; - case "filterForm": - const { state: updatedSearchStateFilterForm } = action - return { ...state, filterForm: { ...state.filterForm, ...updatedSearchStateFilterForm } }; - case "tableForm": - const updatedTableState = action.state - return { ...state, tableForm: {...state.tableForm,...updatedTableState} }; - case "clearSearchForm": - return {...state,searchForm:action.state} - case "clearTableForm": - return {...state,tableForm:{ - limit: 10, - offset: 0, - }} - case "clearFilterForm": - return {...state,filterForm:action.state} - default: + case 'searchForm': + const { state: updatedSearchStateSearchForm } = action; + return { + ...state, + searchForm: { ...state.searchForm, ...updatedSearchStateSearchForm }, + }; + case 'filterForm': + const { state: updatedSearchStateFilterForm } = action; + return { + ...state, + filterForm: { ...state.filterForm, ...updatedSearchStateFilterForm }, + }; + case 'tableForm': + const updatedTableState = action.state; + return { + ...state, + tableForm: { ...state.tableForm, ...updatedTableState }, + }; + case 'clearSearchForm': + return { ...state, searchForm: action.state }; + case 'clearFilterForm': + return { ...state, filterForm: action.state }; + case 'jsonPath': + const { + tag: { removableTagConf }, + } = action; + const stateObj = _.cloneDeep(state); + switch (removableTagConf?.type) { + case 'multi': + _.set( + stateObj, + removableTagConf?.sessionJsonPath, + removeObjectFromArray( + _.get(state, removableTagConf?.sessionJsonPath), + removableTagConf?.deleteRef, + removableTagConf?.value?.[removableTagConf?.deleteRef] + ) + ); + return stateObj; + case 'single': + _.set(stateObj, removableTagConf?.sessionJsonPath, ''); + return stateObj; + + case 'dateRange': + _.set(stateObj, removableTagConf?.sessionJsonPath, ''); + return stateObj; + case 'workflowStatusFilter': + //if we are here then we have dynamic ids to delete from state + _.set(stateObj,`${removableTagConf?.sessionJsonPath}.${removableTagConf?.dynamicId}`, false) + return stateObj + default: + break; + } + case 'obj': + const {updatedState} = action + return updatedState + + default: return state; - } -} - -export default reducer; \ No newline at end of file + } + }; + + export default reducer; \ No newline at end of file diff --git a/react/ui-components/src/hoc/InboxSearchComposerV2.js b/react/ui-components/src/hoc/InboxSearchComposerV2.js new file mode 100644 index 00000000000..64ee22846c7 --- /dev/null +++ b/react/ui-components/src/hoc/InboxSearchComposerV2.js @@ -0,0 +1,372 @@ +import React, { useEffect, useReducer, useState } from "react"; +import ResultsTable from './ResultsTable'; +import reducer, { initialInboxState } from "./InboxSearchComposerReducer"; +import InboxSearchLinks from "../atoms/InboxSearchLinks"; +import { InboxContext } from "./InboxSearchComposerContext"; +import SearchComponent from "../atoms/SearchComponent"; +import PopUp from "../atoms/PopUp"; +import SearchAction from "../molecules/SearchAction"; +import FilterAction from "../molecules/FilterAction"; +import MobileSearchComponent from "./MobileView/MobileSearchComponent"; +import MediaQuery from 'react-responsive'; +import _ from "lodash"; +import { useTranslation } from "react-i18next"; +import MobileSearchResultsv1 from './MobileView/MobilSearchResultsV1'; +import RemovableTags from "./RemovableTags"; + +function isFalsyOrEmpty(input) { + if (input === false) { + return true; + } + + if(!input) { + return true; + } + + if (Array.isArray(input) && input.length === 0) { + return true; + } + + if (typeof input === 'object' && Object.keys(input).length === 0) { + return true; + } + + return false; + } + +const InboxSearchComposerV2 = ({configs,scrollPosition,browserSession}) => { + + + const [session,setSession,clearSession] = browserSession || [] + + const {t} = useTranslation() + const presets = Digit.Hooks.useQueryParams(); + // if(Object.keys(presets).length > 0) configs = Digit.Utils.configUpdater(configs) + + const [enable, setEnable] = useState(false); + const [state, dispatch] = useReducer(reducer, initialInboxState); + + //for mobile view + const [type, setType] = useState(""); + const [popup, setPopup] = useState(false); + + const apiDetails = configs?.apiDetails + + const [activeLink,setActiveLink] = useState(configs?.sections?.search?.uiConfig?.configNavItems?.filter(row=>row.activeByDefault)?.[0]) + + //for mobile view + useEffect(() => { + if (type) setPopup(true); + }, [type]); + + useEffect(() => { + //here if jsonpaths for search & table are same then searchform gets overridden + + if (Object.keys(state.searchForm)?.length >= 0) { + const result = { ..._.get(apiDetails, apiDetails?.searchFormJsonPath, {}), ...state.searchForm } + Object.keys(result).forEach(key => { + if (!result[key]) delete result[key] + }); + _.set(apiDetails, apiDetails?.searchFormJsonPath, result) + } + if (Object.keys(state.filterForm)?.length >= 0) { + const result = { ..._.get(apiDetails, apiDetails?.filterFormJsonPath, {}), ...state.filterForm } + Object.keys(result).forEach(key => { + if (!result[key] || result[key]?.length===0) delete result[key] + }); + _.set(apiDetails, apiDetails?.filterFormJsonPath, result) + } + + if(Object.keys(state.tableForm)?.length >= 0) { + _.set(apiDetails, apiDetails?.tableFormJsonPath, { ..._.get(apiDetails, apiDetails?.tableFormJsonPath, {}),...state.tableForm }) + } + const searchFormParamCount = Object.keys(state.searchForm).reduce((count,key)=>isFalsyOrEmpty(state.searchForm[key])?count:count+1,0) + const filterFormParamCount = Object.keys(state.filterForm).reduce((count, key) =>isFalsyOrEmpty(state.filterForm[key]) ? count : count + 1, 0) + + if (Object.keys(state.tableForm)?.length > 0 && (searchFormParamCount >= ( activeLink ?activeLink?.minParametersForSearchForm : apiDetails?.minParametersForSearchForm) || filterFormParamCount >= apiDetails?.minParametersForFilterForm)){ + setEnable(true) + } + + if(configs?.type === 'inbox' || configs?.type === 'download') setEnable(true) + + },[state]) + + //adding this effect in case of screen refresh + useEffect(() => { + if(_.isEqual(state, initialInboxState)){ + dispatch({ + type:"obj", + updatedState:Object?.keys(session)?.length > 0 ? session : initialInboxState + }) + } + },[]) + + //adding another effect to sync session with state, the component invoking InboxSearchComposer will be passing session as prop + useEffect(() => { + // if(_.isEqual(state, initialInboxState)){ + // return + // } + // if(_.isEqual(state, session)){ + // return + // } + setSession(() => state) + // if(!_.isEqual(state, session)){ + // // setSession(()=>{ + // // return { + // // ...state + // // } + // // }) + // setSession(state) + // } + + },[state]) + + + + let requestCriteria = { + url:configs?.apiDetails?.serviceName, + params:configs?.apiDetails?.requestParam, + body:configs?.apiDetails?.requestBody, + config: { + enabled: enable, + }, + state + }; + + const updatedReqCriteria = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.preProcess ? Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.preProcess(requestCriteria,configs?.sections?.search?.uiConfig?.defaultValues,activeLink?.name) : requestCriteria + + + const { isLoading, data, revalidate,isFetching } = Digit.Hooks.useCustomAPIHook(updatedReqCriteria); + + + useEffect(() => { + return () => { + revalidate(); + setEnable(false); + // if(!location.pathname.includes("tqm") && Digit.Utils.tqm.isUlbAdminLoggedIn()){ + // sessionStorage.removeItem("Digit.TQM_INBOX_SESSION") + // } + }; + }); + + //for mobile view + const handlePopupClose = () => { + setPopup(false); + setType(""); + }; + + let fieldsForRemovableTags = [] + if((configs?.type === 'inbox' || configs?.type === 'search') && (configs?.showAsRemovableTagsInMobile)){ + if(configs?.sections?.search?.uiConfig?.fields) { + fieldsForRemovableTags = configs?.sections?.search?.uiConfig?.fields + } + if(configs?.sections?.filter?.uiConfig?.fields) { + fieldsForRemovableTags = [...fieldsForRemovableTags,...configs?.sections?.filter?.uiConfig?.fields] + } + } + + useEffect(() => { + // Implement to scroll if scroll persistent is enabled + window.scrollTo(0, scrollPosition) + }) + + return ( + + {/*
{t(configs?.label)}
*/} +
+
+ { + configs?.sections?.links?.show && + +
+ +
+ + } + { + configs?.type === 'search' && configs?.sections?.search?.show && + +
+ +
+ + } + { + configs?.type === 'search' && configs?.sections?.filter?.show && + +
+ +
+ + + } + { + configs?.type === 'inbox' && configs?.sections?.search?.show && + +
+ +
+ + } + { + configs?.type === 'inbox' && configs?.sections?.filter?.show && + +
+ +
+ + } + { (configs?.type === 'inbox' || configs?.type === 'search') && + +
+ { + configs?.sections?.search?.show && ( + { + setType("SEARCH"); + setPopup(true); + }} + /> + )} + {configs?.sections?.filter?.show && ( + { + setType("FILTER"); + setPopup(true); + }} + /> + )} +
+ + } + { + (configs?.type === 'inbox' || configs?.type === 'search') && (configs?.showAsRemovableTagsInMobile) && + + + + } + { + configs?.sections?.searchResult?.show && +
0 ? (!(isLoading || isFetching) ?{ overflowX: "auto" }: {}) : { }} > + + {/* configs?.sections?.searchResult?.show && +
0 ? (!(isLoading || isFetching) ?{ overflowX: "scroll", borderRadius : "4px" }: {}) : { }} > */} + + + + + {/* */} + + +
+ } + {popup && ( + + {type === "FILTER" && ( +
+ +
+ )} + {/* {type === "SORT" && ( +
+ {} +
+ )} */} + {type === "SEARCH" && ( +
+ +
+ )} + + )} +
+
+ {/* One can use this Parent to add additional sub parents to render more sections */} +
+
+ + ) +} + +export default InboxSearchComposerV2; \ No newline at end of file diff --git a/react/ui-components/src/hoc/MobileView/MobilSearchResultsV1.js b/react/ui-components/src/hoc/MobileView/MobilSearchResultsV1.js new file mode 100644 index 00000000000..14a572e121c --- /dev/null +++ b/react/ui-components/src/hoc/MobileView/MobilSearchResultsV1.js @@ -0,0 +1,91 @@ +import React, { useMemo, useContext, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import DetailsCard from '../../molecules/DetailsCard'; +import { Link } from 'react-router-dom'; +import NoResultsFound from '../../atoms/NoResultsFound'; +import { Loader } from '../../atoms/Loader'; +import _ from 'lodash'; +import { useHistory } from 'react-router-dom'; +const convertRowToDetailCardData = (row,config,t,apiDetails,searchResult) => { + const resultantObj = { + apiResponse:{...row,hidden:true} + } + + config.columns.map((column,idx) => { + resultantObj[t(column.label)] = column.additionalCustomization ? Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.additionalCustomizations(row,column?.label,column, _.get(row,column.jsonPath,""),t, searchResult) : String(_.get(row,column.jsonPath,"") ? column.translate? t(Digit.Utils.locale.getTransformedLocale(column.prefix?`${column.prefix}${_.get(row,column.jsonPath,"")}`:_.get(row,column.jsonPath,""))) : _.get(row,column.jsonPath,"") : t("ES_COMMON_NA")); + }) + + return resultantObj + } + + const convertDataForDetailsCard = (config,searchResult,t,apiDetails) => { + //map over columns and generate data accordingly + + const result = searchResult?.map((row,idx) => { + return convertRowToDetailCardData(row,config,t,apiDetails,searchResult) + } ) + + return result + } + + const MobileSearchResultsv1 = ({ + config, + data, + isLoading, + isFetching, + fullConfig, + }) => { + const { t } = useTranslation(); + const history = useHistory() + const { apiDetails } = fullConfig; + const resultsKey = config.resultsJsonPath; + + let searchResult = _.get(data, resultsKey, []); + + //for sample result + // let searchResult = _.get(sampleSearchResult, resultsKey, []); + + searchResult = searchResult?.length > 0 ? searchResult : []; + // searchResult = searchResult?.reverse(); + + const tenantId = Digit.ULBService.getCurrentTenantId(); + + const RenderResult = () => { + const dataForDetailsCard = convertDataForDetailsCard(config,searchResult,t,apiDetails) + const propsForDetailsCard = { + t, + data:dataForDetailsCard, + showActionBar:config?.showActionBarMobileCard, // to show action button on detail card + submitButtonLabel:config?.actionButtonLabelMobileCard, + handleDetailCardClick:(obj)=>{ //fn when action button on card is clicked + const linkToPushTo = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.onCardActionClick(obj) + history.push(linkToPushTo) + }, + handleSelect:(obj)=>{ + const linkToPushTo = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.onCardClick(obj) + history.push(linkToPushTo) + // Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.onCardActionClick(obj) + }, //fn when card container is clicked + mode:"tqm", + apiDetails, + } + + return + } + + if (isLoading || isFetching) { + return ; + } + + if (searchResult?.length === 0) { + return ( ); + } + + return ( + + + + ); + }; + + export default MobileSearchResultsv1; \ No newline at end of file diff --git a/react/ui-components/src/hoc/MobileView/MobileSearchComponent.js b/react/ui-components/src/hoc/MobileView/MobileSearchComponent.js index 510fb13db6d..0422457ce25 100644 --- a/react/ui-components/src/hoc/MobileView/MobileSearchComponent.js +++ b/react/ui-components/src/hoc/MobileView/MobileSearchComponent.js @@ -2,184 +2,159 @@ import React, { useContext, useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { InboxContext } from "../InboxSearchComposerContext"; -import { FilterIcon, SearchIcon, CloseSvg, RefreshIcon } from "../../atoms/svgindex" +import { FilterIcon, SearchIcon, CloseSvg, RefreshIcon, DownloadImgIcon, SortSvg } from "../../atoms/svgindex"; import ActionBar from "../../atoms/ActionBar"; import SubmitBar from "../../atoms/SubmitBar"; import LinkLabel from "../../atoms/LinkLabel"; import RenderFormFields from "../../molecules/RenderFormFields"; -import Toast from "../../atoms/Toast"; +import Toast from "../../atoms/Toast"; import _ from "lodash"; +import Button from "../../atoms/Button"; -const MobileSearchComponent = ({ uiConfig, modalType, header = "", screenType = "search", fullConfig, data, onClose, defaultValues }) => { - const { t } = useTranslation(); - const { state, dispatch } = useContext(InboxContext) - const [showToast,setShowToast] = useState(null) - let updatedFields = []; - const {apiDetails} = fullConfig +const MobileSearchComponent = ({ uiConfig, modalType, header = "", screenType = "search", fullConfig, data, onClose, defaultValues, browserSession }) => { + const { t } = useTranslation(); + const { state, dispatch } = useContext(InboxContext); + const [showToast, setShowToast] = useState(null); + let updatedFields = []; + const { apiDetails } = fullConfig; + const [session, setSession, clearSession] = browserSession || []; - if (fullConfig?.postProcessResult){ - //conditions can be added while calling postprocess function to pass different params - Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.postProcess(data, uiConfig) - } + const defValuesFromSession = uiConfig?.typeMobile === "filter" ? session?.searchForm : session?.filterForm; - //define session for modal form - const mobileSearchSession = Digit.Hooks.useSessionStorage("MOBILE_SEARCH_MODAL_FORM", - defaultValues - ); - const [sessionFormData, setSessionFormData, clearSessionFormData] = mobileSearchSession; + const { + register, + setError, + clearErrors, + handleSubmit, + control, + watch, + setValue, + getValues, + formState: { errors } + } = useForm({ + defaultValues: { ...uiConfig?.defaultValues, ...defValuesFromSession } + }); - const { - register, - handleSubmit, - setValue, - getValues, - reset, - watch, - control, - formState, - errors, - setError, - clearErrors, - } = useForm({ - defaultValues: sessionFormData, - }); - const formData = watch(); - const checkKeyDown = (e) => { - const keyCode = e.keyCode ? e.keyCode : e.key ? e.key : e.which; - if (keyCode === 13) { - e.preventDefault(); - } - }; - - useEffect(() => { - updatedFields = Object.values(formState?.dirtyFields) - }, [formState]); - - - //on form value change, update session data with form data - useEffect(()=>{ - if (!_.isEqual(sessionFormData, formData)) { - const difference = _.pickBy(sessionFormData, (v, k) => !_.isEqual(formData[k], v)); - setSessionFormData({ ...sessionFormData, ...formData }); - } - },[formData]); - - useEffect(()=>{ - clearSessionFormData(); - },[]); - - const onSubmit = (data) => { - onClose?.() - if(updatedFields.length >= uiConfig?.minReqFields) { - // here based on screenType call respective dispatch fn - dispatch({ - type: modalType === "SEARCH" ? "searchForm" : "filterForm", - state: { - ...data + const checkKeyDown = (e) => { + const keyCode = e.keyCode ? e.keyCode : e.key ? e.key : e.which; + if (keyCode === 13) { + // Handle enter key press } - }) - } else { - setShowToast({ warning: true, label: t("ES_COMMON_MIN_SEARCH_CRITERIA_MSG") }) - setTimeout(closeToast, 3000); - } - } + }; - const clearSearch = () => { - clearSessionFormData(); - reset(uiConfig?.defaultValues) - dispatch({ - type: "clearSearchForm", - state: { ...uiConfig?.defaultValues } - //need to pass form with empty strings - }) - } - - const closeToast = () => { - setShowToast(null); - } + const onSubmit = (data) => { + onClose?.(); + }; -const renderHeader = () => { - switch(uiConfig?.type) { - case "filter" : { - return ( -
- - - {t("ES_COMMON_FILTER_BY")}: - - - - - -
- ) - } - case "search" : { - return ( -
- - - {t("ES_COMMON_SEARCH_BY")} - - - - -
- ) - } - default : { - return ( -
- - - {t("ES_COMMON_SEARCH_BY")} - - - - -
- ) - } - } -} + const clearSearch = () => { + reset(uiConfig?.defaultValues); + dispatch({ + type: uiConfig?.type === "filter" ? "clearFilterForm" : "clearSearchForm", + state: { ...uiConfig?.defaultValues } + }); + }; - return ( - -
-
{renderHeader()}
- checkKeyDown(e)}> -
- - -
- { uiConfig?.secondaryLabel && {t(uiConfig?.secondaryLabel)} } - { uiConfig?.primaryLabel && } -
- -
- - { showToast && + const renderHeader = () => { + switch (uiConfig?.typeMobile) { + case "filter": { + return ( +
+ + + {t(`${uiConfig?.headerLabel || "TQM_INBOX_SORTBY"}`)} + + + + + +
+ ); + } + case "sort": { + return ( +
+ + + {t(`${uiConfig?.headerLabel || "TQM_INBOX_SORTBY"}`)} + + + + + +
+ ); + } + case "search": { + return ( +
+ + + {t(`${uiConfig?.headerLabel || "TQM_INBOX_SORTBY"}`)} + + + + +
+ ); + } + default: + return null; } -
- - ) + }; + + return ( + +
+
{renderHeader()}
+
checkKeyDown(e)}> +
+ + +
+ {uiConfig?.secondaryLabel && ( +
+ +
+
+ {showToast && ( + + )} +
+ + ); }; -export default MobileSearchComponent; \ No newline at end of file +export default MobileSearchComponent; diff --git a/react/ui-components/src/hoc/MobileView/MobileSearchResults.js b/react/ui-components/src/hoc/MobileView/MobileSearchResults.js deleted file mode 100644 index db7a122a6c6..00000000000 --- a/react/ui-components/src/hoc/MobileView/MobileSearchResults.js +++ /dev/null @@ -1,193 +0,0 @@ -import React, { useMemo, useContext, useEffect } from 'react' -import { useForm } from "react-hook-form"; -import { useTranslation } from 'react-i18next'; -import { Details } from "../../molecules/DetailsCard"; -import { Link } from "react-router-dom"; -import NoResultsFound from "../../atoms/NoResultsFound"; -import { Loader } from "../../atoms/Loader"; -import _ from "lodash"; -import { InboxContext } from '../InboxSearchComposerContext'; -import Table from "../../atoms/Table"; - -const MobileSearchResults = ({ config, data, isLoading, isFetching,fullConfig }) => { - const {apiDetails} = fullConfig - const { t } = useTranslation(); - const resultsKey = config.resultsJsonPath - //let searchResult = data?.[resultsKey]?.length>0 ? data?.[resultsKey] : [] - //searchResult = searchResult.reverse() - //const tenantId = Digit.ULBService.getCurrentTenantId(); - - let searchResult = _.get(data,resultsKey,[]) - searchResult = searchResult?.length>0 ? searchResult : [] - searchResult = searchResult.reverse(); - const tenantId = Digit.ULBService.getCurrentTenantId(); - const headerLocale = Digit.Utils.locale.getTransformedLocale(tenantId); - //reversing reason -> for some reason if we enable sorting on columns results from the api are reversed and shown, for now -> reversing the results(max size 50 so not a performance issue) - - // if (fullConfig?.postProcessResult){ - // var { isPostProcessFetching, - // isPostProcessLoading, - // combinedResponse } = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.postProcess(searchResult) - - // if(combinedResponse?.length > 0){ - // searchResult = combinedResponse - // } - // } - - const {state,dispatch} = useContext(InboxContext) - - const { - register, - handleSubmit, - setValue, - getValues, - reset, - watch, - trigger, - control, - formState, - errors, - setError, - clearErrors, - unregister, -} = useForm({ - defaultValues: { - offset: 0, - limit: 10, - }, -}); - - useEffect(() => { - register("offset", 0); - register("limit", 10); - }, [register]); - - function onPageSizeChange(e) { - setValue("limit", Number(e.target.value)); - handleSubmit(onSubmit)(); - } - - function nextPage() { - setValue("offset", getValues("offset") + getValues("limit")); - handleSubmit(onSubmit)(); - } - - function previousPage() { - const offsetValue = getValues("offset") - getValues("limit") - setValue("offset", offsetValue>0 ? offsetValue : 0); - handleSubmit(onSubmit)(); - } - - const onSubmit = (data) => { - //here update the reducer state - //call a dispatch to update table's part of the state and update offset, limit - // this will in turn make the api call and give search results and table will be rendered acc to the new data - dispatch({ - type:"tableForm", - state:{...data} - }) - - } - - const columns = [ - { - Header: "", - accessor: "_searchResults", - id : "_searchResults" - } - ] - - const propsMobileInboxCards = useMemo(() => { - if (isLoading) { - return []; - } - let cardData = searchResult.map((details) => { - let mapping = {}; - let additionalCustomization = {}; - let cols = config?.columns; - for(let columnIndex = 0; columnIndex { - return { - _searchResults : -
- {Object.keys(row.mapping).map(key => { - let toRender; - if(row.additionalCustomization[key]){ - toRender = ( -
{}} - row={row.mapping} />) - } - else { - toRender = row.mapping[key]? ( -
{}} - row={row.mapping} /> - ) : ( -
{}} - row={row.mapping} /> ) - } - return toRender - })} -
- } - }) - - function RenderResult() { - if (searchResult?.length === 0) { - return ( ); - } - - if (isLoading || isFetching ) return - if(!data) return <> - return
- { - return { - style: {width : "200vw"}, - }; - }} - disableSort={config?.enableColumnSort ? false : true} - autoSort={config?.enableColumnSort ? true : false} - // globalSearch={config?.enableGlobalSearch ? filterValue : undefined} - // onSearch={config?.enableGlobalSearch ? searchQuery : undefined} - /> - - } - - if (isLoading) - { return } - return ( - - - - ); -}; - -export default MobileSearchResults; diff --git a/react/ui-components/src/hoc/RemovableTags.js b/react/ui-components/src/hoc/RemovableTags.js new file mode 100644 index 00000000000..cccbd69e6e4 --- /dev/null +++ b/react/ui-components/src/hoc/RemovableTags.js @@ -0,0 +1,160 @@ +import React, { useState, useEffect, useContext } from 'react'; +import RemoveableTagNew from "../atoms/RemovableTagNew"; +import { useTranslation } from 'react-i18next'; +import { Loader } from '../atoms/Loader'; +import { InboxContext } from './InboxSearchComposerContext'; +import _ from "lodash"; + +const generateTagsFromFields = (fields, sessionData, t,data) => { + //filetering the fields + + const fieldsToShow = fields + ?.filter((row) => row?.removableTagConf) + ?.map((row) => row?.removableTagConf); + + const crumbs = []; + fieldsToShow?.forEach((field, idx) => { + //one field can have multiple crumbs + // we need to fill + + //setting the text + const value = _.get(sessionData, field.sessionJsonPath, ''); + if (!value || value?.length === 0) { + return; + } + + //convert this to switch case and write a separate fn for it + switch (field?.type) { + case 'multi': + value?.forEach((val) => { + crumbs?.push({ + label: t(field.label) || '', + value: `${t( + Digit.Utils.locale.getTransformedLocale( + _.get(val, field.valueJsonPath, '') + ) + )}`, + removableTagConf: { + ...field, + value: val, + }, + }); + }); + break; + case 'single': + if(_.get(value, field.valueJsonPath, '')){ + crumbs?.push({ + label: t(field.label) || '', + value: `${t( + Digit.Utils.locale.getTransformedLocale( + _.get(value, field.valueJsonPath, '') + ) + )}`, + removableTagConf: { ...field, value }, + }); + }else if(typeof value === "string" && value){ + crumbs?.push({ + label: t(field.label) || '', + value: `${t( + Digit.Utils.locale.getTransformedLocale( + value + ) + )}`, + removableTagConf: { ...field, value }, + }); + } + break; + case 'dateRange': + if(_.get(value, field.valueJsonPath, '')){ + crumbs?.push({ + label: t(field.label) || '', + value: _.get(value, field.valueJsonPath, ''), + removableTagConf: { ...field, value }, + }); + } + break; + case 'workflowStatusFilter': + if(!data || !value || Object?.keys(value)?.length===0){ + return + } + const statusIds = Object?.keys(value)?.map(key => value[key] ? key : false)?.filter(val => val) + const statusObj = data?.statusMap?.map(status => { + if(statusIds?.includes(status?.statusid)){ + return { + ...status + } + }else { + return false + } + })?.filter(val => val) + statusObj?.forEach(obj => { + crumbs?.push({ + label: t(field.label) || '', + value: field?.valuePrefix ? t(Digit.Utils.locale.getTransformedLocale(`${field.valuePrefix}${obj?.applicationstatus}`)):t(Digit.Utils.locale.getTransformedLocale(obj?.applicationstatus)) , + removableTagConf: { ...field, dynamicId:obj.statusid }, + }); + }) + break; + default: + break; + } +}); + +return crumbs; +}; + +const RemovableTags = ({ config, browserSession, fields,data, ...props }) => { + const { t } = useTranslation(); + const [sessionData, setSessionData, clearSessionData] = browserSession; + + const [removableTags, setRemovableTags] = useState([]); + const { state, dispatch } = useContext(InboxContext); + + //sessionData will be the single source of truth for showing removable tags + //on click of tags we'll call dispatch and update the state which in turns updates the browser session + + // On onclick of removable tag you need to update the state accordingly so that browser session gets updated accordingly + // map over fields in search and filter section + // for each field, refer field.removableTagConf + + //an effect for generating selected filter tags + useEffect(() => { + setRemovableTags(generateTagsFromFields(fields, sessionData, t,data)); + return () => {}; + }, [fields, sessionData,data]); + + + // function to handle deletion of tags + //flow -> onClick -> Update state(dispatch with jsonPath) -> session gets updated automatically due to effect in parent + const handleCrumbDeletion = (tag) => { + dispatch( + { + type:"jsonPath", + tag + } + ) + }; + + if (removableTags?.length === 0) { + return null; + } + + return ( +
+ {removableTags?.map((tag, index) => { + return ( + { + handleCrumbDeletion(tag); + }} + /> + ); + })} +
+ ); + +}; + +export default RemovableTags; \ No newline at end of file diff --git a/react/ui-components/src/hoc/ResultsTable.js b/react/ui-components/src/hoc/ResultsTable.js index 652821fc3e7..aaa240d52e4 100644 --- a/react/ui-components/src/hoc/ResultsTable.js +++ b/react/ui-components/src/hoc/ResultsTable.js @@ -1,65 +1,51 @@ import React, { useMemo, useCallback, useState, useEffect, Fragment,useContext } from 'react' import { useTranslation } from 'react-i18next'; -import Table from '../atoms/Table'; +//import Table from '../../atoms/Table' import TextInput from '../atoms/TextInput' import { useForm, Controller } from "react-hook-form"; import _ from "lodash"; -import { InboxContext } from './InboxSearchComposerContext'; + import { InboxContext } from './InboxSearchComposerContext'; import { Loader } from '../atoms/Loader'; import NoResultsFound from '../atoms/NoResultsFound'; -import { InfoIcon,EditIcon } from "../atoms/svgindex"; - - -const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fullConfig,revalidate,additionalConfig }) => { +import { InfoIcon } from "../atoms/svgindex"; +const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fullConfig,revalidate,type,activeLink,browserSession }) => { const {apiDetails} = fullConfig const { t } = useTranslation(); const resultsKey = config.resultsJsonPath - + const [showResultsTable,setShowResultsTable] = useState(true) + const [session,setSession,clearSession] = browserSession || [] // let searchResult = data?.[resultsKey]?.length>0 ? data?.[resultsKey] : [] let searchResult = _.get(data,resultsKey,[]) searchResult = searchResult?.length>0 ? searchResult : [] searchResult = searchResult.reverse(); const tenantId = Digit.ULBService.getCurrentTenantId(); const headerLocale = Digit.Utils.locale.getTransformedLocale(tenantId); + const {state,dispatch} = useContext(InboxContext) - //reversing reason -> for some reason if we enable sorting on columns results from the api are reversed and shown, for now -> reversing the results(max size 50 so not a performance issue) - - // if (fullConfig?.postProcessResult){ - // var { isPostProcessFetching, - // isPostProcessLoading, - // combinedResponse } = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.postProcess(searchResult) + //here I am just checking state.searchForm has all empty keys or not(when clicked on clear search) + useEffect(() => { + if(apiDetails?.minParametersForSearchForm !== 0 && Object.keys(state.searchForm).length > 0 && !Object.keys(state.searchForm).some(key => state.searchForm[key]!=="") && type==="search" && activeLink?.minParametersForSearchForm !== 0){ + setShowResultsTable(false) + } + // else{ + // setShowResultsTable(true) + // } + return ()=>{ + setShowResultsTable(true) + } + }, [state]) - // if(combinedResponse?.length > 0){ - // searchResult = combinedResponse - // } - // } - - - - const {state,dispatch} = useContext(InboxContext) - const tableColumns = useMemo(() => { //test if accessor can take jsonPath value only and then check sort and global search work properly return config?.columns?.map(column => { - - if(column?.svg) { - // const icon = Digit.ComponentRegistryService.getComponent(column.svg); - return { - Header: t(column?.label) || t("ES_COMMON_NA"), - accessor:column.jsonPath, - Cell: ({ value, col, row }) => { - return
additionalConfig?.resultsTable?.onClickSvg(row)}>
- } - } - } - if (column.additionalCustomization){ return { Header: t(column?.label) || t("ES_COMMON_NA"), accessor:column.jsonPath, headerAlign: column?.headerAlign, + disableSortBy:column?.disableSortBy ? column?.disableSortBy :false, Cell: ({ value, col, row }) => { return Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.additionalCustomizations(row.original,column?.label,column, value,t, searchResult); } @@ -69,13 +55,14 @@ const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fu Header: t(column?.label) || t("ES_COMMON_NA"), accessor: column.jsonPath, headerAlign: column?.headerAlign, + disableSortBy:column?.disableSortBy ? column?.disableSortBy :false, Cell: ({ value, col, row }) => { - return String(value ? column.translate? t(column.prefix?`${column.prefix}${value}`:value) : value : column?.dontShowNA ? " " : t("ES_COMMON_NA")); + return String(value ? column.translate? t(Digit.Utils.locale.getTransformedLocale(column.prefix?`${column.prefix}${value}`:value)) : value : t("ES_COMMON_NA")); } } }) }, [config, searchResult]) - + const defaultValuesFromSession = session?.tableForm ? {...session?.tableForm} : {limit:10,offset:0} const { register, handleSubmit, @@ -91,80 +78,77 @@ const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fu clearErrors, unregister, } = useForm({ - defaultValues: { - offset: 0, - limit: 10, - }, + defaultValues: defaultValuesFromSession }); - - const isMobile = window.Digit.Utils.browser.isMobile(); - const [searchQuery, onSearch] = useState(""); - const filterValue = useCallback((rows, id, filterValue = "") => { - - return rows.filter((row) => { - const res = Object.keys(row?.values).find((key) => { - if (typeof row?.values?.[key] === "object") { - return Object.keys(row?.values?.[key]).find((id) => { - if (id === "insight") { - return String(Math.abs(row?.values?.[key]?.[id]) + "%") - .toLowerCase() - .startsWith(filterValue?.toLowerCase()); - } - return String(row?.values?.[key]?.[id])?.toLowerCase().includes(filterValue?.toLowerCase()); - }); - } - return ( - String(row?.values?.[key]).toLowerCase()?.includes(filterValue?.toLowerCase()) || - String(t(row?.values?.[key])).toLowerCase()?.includes(filterValue?.toLowerCase()) - ); - }); - return res; - }); - }, []); - - useEffect(() => { - register("offset", 0); - register("limit", 10); - }, [register]); - - useEffect(() => { - setValue("offset",state.tableForm.offset) - setValue("limit",state.tableForm.limit) + //call this fn whenever session gets updated + const setDefaultValues = () => { + reset(defaultValuesFromSession) + } + + //adding this effect because simply setting session to default values is not working + useEffect(() => { + setDefaultValues() + }, [session]) + + const isMobile = window.Digit.Utils.browser.isMobile(); + const [searchQuery, onSearch] = useState(""); + + const filterValue = useCallback((rows, id, filterValue = "") => { + return rows.filter((row) => { + const res = Object.keys(row?.values).find((key) => { + if (typeof row?.values?.[key] === "object") { + return Object.keys(row?.values?.[key]).find((id) => { + if (id === "insight") { + return String(Math.abs(row?.values?.[key]?.[id]) + "%") + .toLowerCase() + .startsWith(filterValue?.toLowerCase()); + } + return String(row?.values?.[key]?.[id])?.toLowerCase().includes(filterValue?.toLowerCase()); + }); + } + return ( + String(row?.values?.[key]).toLowerCase()?.includes(filterValue?.toLowerCase()) || + String(t(row?.values?.[key])).toLowerCase()?.includes(filterValue?.toLowerCase()) + ); + }); + return res; + }); + }, []); + + useEffect(() => { + register("offset",session?.tableForm?.offset || 0); + register("limit",session?.tableForm?.limit || 10); +}, [register]); +function onPageSizeChange(e) { + setValue("limit", Number(e.target.value)); + handleSubmit(onSubmit)(); +} +function nextPage() { + setValue("offset", getValues("offset") + getValues("limit")); + handleSubmit(onSubmit)(); +} +function previousPage() { + const offsetValue = getValues("offset") - getValues("limit") + setValue("offset", offsetValue>0 ? offsetValue : 0); + handleSubmit(onSubmit)(); +} +const onSubmit = (data) => { + //here update the reducer state + //call a dispatch to update table's part of the state and update offset, limit + // this will in turn make the api call and give search results and table will be rendered acc to the new data + + dispatch({ + type:"tableForm", + state:{...data} }) +} - function onPageSizeChange(e) { - setValue("limit", Number(e.target.value)); - handleSubmit(onSubmit)(); - } - - function nextPage() { - setValue("offset", getValues("offset") + getValues("limit")); - handleSubmit(onSubmit)(); - } - function previousPage() { - const offsetValue = getValues("offset") - getValues("limit") - setValue("offset", offsetValue>0 ? offsetValue : 0); - handleSubmit(onSubmit)(); - } - - const onSubmit = (data) => { - //here update the reducer state - //call a dispatch to update table's part of the state and update offset, limit - // this will in turn make the api call and give search results and table will be rendered acc to the new data - - dispatch({ - type:"tableForm", - state:{...data} - }) - - } - - - if (isLoading || isFetching ) return - if(!data) return <> - if (searchResult?.length === 0) return +if (isLoading || isFetching ) return +if(!data) return <> +if(!showResultsTable) return <> +if (searchResult?.length === 0) return return (
{config?.enableGlobalSearch &&
@@ -179,24 +163,23 @@ const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fu {searchResult?.length > 0 &&
{ return { style: { @@ -206,12 +189,9 @@ const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fu }, }; }} - onClickRow={additionalConfig?.resultsTable?.onClickRow} - rowClassName={config.rowClassName} - noColumnBorder={config?.noColumnBorder} - />} + />} ) } +export default ResultsTable -export default ResultsTable \ No newline at end of file diff --git a/react/ui-components/src/hoc/index.js b/react/ui-components/src/hoc/index.js index ec8ee36621c..44117ca6aa0 100644 --- a/react/ui-components/src/hoc/index.js +++ b/react/ui-components/src/hoc/index.js @@ -9,6 +9,6 @@ import ResultsTable from "./ResultsTable"; import reducer from "./InboxSearchComposerReducer"; import { initialInboxState } from "./InboxSearchComposerReducer"; import { InboxContext } from "./InboxSearchComposerContext"; -import InboxSearchComposer from "./InboxSearchComposer"; -export { FieldComposer, FieldController, Fields, FormComposerV2, Modal, UploadFileComposer ,FieldV1, InboxSearchComposer,ResultsTable,reducer,initialInboxState,InboxContext}; + +export { FieldComposer, FieldController, Fields, FormComposerV2, Modal, UploadFileComposer ,FieldV1, ResultsTable,reducer,initialInboxState,InboxContext}; diff --git a/react/ui-components/src/index.js b/react/ui-components/src/index.js index 31b5e5a44b6..3358f7d1897 100644 --- a/react/ui-components/src/index.js +++ b/react/ui-components/src/index.js @@ -206,8 +206,8 @@ import { import { Phone } from "./atoms/svgindex"; import { DownloadBtnCommon } from "./atoms/svgindex"; -import { FieldComposer, FieldController, Fields, FormComposerV2, Modal, UploadFileComposer, FieldV1, InboxSearchComposer, ResultsTable } from "./hoc"; - +import { FieldComposer, FieldController, Fields, FormComposerV2, Modal, UploadFileComposer, FieldV1, ResultsTable } from "./hoc"; +import InboxSearchComposerV2 from "./hoc/InboxSearchComposerV2"; import { ApiDropdown, CustomDropdown, @@ -242,6 +242,7 @@ export { BreakLine, Button, Card, + InboxSearchComposerV2, CardBasedOptions, CardCaption, CardHeader, @@ -316,7 +317,6 @@ export { StringManipulator, InboxSearchLinks, SearchComponent, - InboxSearchComposer, ResultsTable, LinkLabel, RoundedLabel, diff --git a/react/ui-components/src/molecules/ApiCheckboxes.js b/react/ui-components/src/molecules/ApiCheckboxes.js new file mode 100644 index 00000000000..e0739bb7b40 --- /dev/null +++ b/react/ui-components/src/molecules/ApiCheckboxes.js @@ -0,0 +1,46 @@ +import React, { Fragment, useState, useEffect } from "react"; +import { Loader } from "../atoms/Loader"; +import { useTranslation } from "react-i18next"; +import _ from "lodash"; +import CheckBox from "../atoms/CheckBox"; +import CardLabel from "../atoms/CardLabel"; + +const ApiCheckboxes = ({ populators, formData, props }) => { + //based on the reqCriteria and populators we will render options in checkboxes + + const [options, setOptions] = useState([]); + const { t } = useTranslation(); + + const reqCriteria = Digit?.Customizations?.[populators?.masterName]?.[populators?.moduleName]?.[populators?.customfn](populators) + + const { isLoading: isApiLoading, data: apiData, revalidate, isFetching: isApiFetching } = Digit.Hooks.useCustomAPIHook(reqCriteria); + + useEffect(() => { + setOptions(apiData); + }, [apiData]); + + if (isApiLoading) return ; + + return ( + <> + {options?.map((row,idx) => { + return ( + { + const obj = { + ...props.value, + [e.target.value]: e.target.checked, + }; + props.onChange(obj); + }} + value={row?.[populators?.optionsKey]} + checked={formData?.[populators.name]?.[row?.[populators?.optionsKey]]} + label={t(row?.[populators?.labelKey])} + /> + ); + })} + + ); +}; + +export default ApiCheckboxes; \ No newline at end of file diff --git a/react/ui-components/src/molecules/ApiDropdown.js b/react/ui-components/src/molecules/ApiDropdown.js index bc65d388d4c..08fe0302ea7 100644 --- a/react/ui-components/src/molecules/ApiDropdown.js +++ b/react/ui-components/src/molecules/ApiDropdown.js @@ -1,26 +1,24 @@ import React, { Fragment, useState, useEffect } from "react"; -import PropTypes from "prop-types"; import MultiSelectDropdown from "../atoms/MultiSelectDropdown"; import Dropdown from "../atoms/Dropdown"; import { Loader } from "../atoms/Loader"; import { useTranslation } from "react-i18next"; import _ from "lodash"; - const ApiDropdown = ({ populators, formData, props, inputRef, errors }) => { + //based on type (ward/locality) we will render dropdowns respectively + //here we will render two types of dropdown based on allowMultiSelect boolean + // for singleSelect render const [options, setOptions] = useState([]); const { t } = useTranslation(); + const reqCriteria = Digit?.Customizations?.[populators?.masterName]?.[populators?.moduleName]?.[populators?.customfn](populators) - const reqCriteria = Digit?.Customizations?.[populators?.masterName]?.[populators?.moduleName]?.[populators?.customfn](); - - const { isLoading: isApiLoading, data: apiData, revalidate, isFetching: isApiFetching } = window?.Digit?.Hooks.useCustomAPIHook(reqCriteria); + const { isLoading: isApiLoading, data: apiData, revalidate, isFetching: isApiFetching } = Digit.Hooks.useCustomAPIHook(reqCriteria); useEffect(() => { setOptions(apiData); }, [apiData]); - if (isApiLoading) return ; - return ( <> {populators.allowMultiSelect && ( @@ -40,9 +38,10 @@ const ApiDropdown = ({ populators, formData, props, inputRef, errors }) => { ); }} selected={props?.value} - defaultLabel={t(populators?.defaultText)} - defaultUnit={t(populators?.selectedText)} + defaultLabel={t(populators?.defaultText) } + defaultUnit={t(populators?.selectedText) || t("COMMON_SELECTED")} config={populators} + /> )} @@ -67,31 +66,4 @@ const ApiDropdown = ({ populators, formData, props, inputRef, errors }) => { ); }; - -ApiDropdown.propTypes = { - populators: PropTypes.shape({ - allowMultiSelect: PropTypes.bool.isRequired, - masterName: PropTypes.string, - moduleName: PropTypes.string, - customfn: PropTypes.string, - optionsKey: PropTypes.string, - defaultText: PropTypes.string, - selectedText: PropTypes.string, - name: PropTypes.string, - defaultValue: PropTypes.string, - optionsCustomStyle: PropTypes.object, - }).isRequired, - formData: PropTypes.object, - props: PropTypes.shape({ - isApiLoading: PropTypes.bool, - options: PropTypes.array, - className: PropTypes.string, - style: PropTypes.object, - value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), - onChange: PropTypes.func, - }).isRequired, - inputRef: PropTypes.object, - errors: PropTypes.object, -}; - -export default ApiDropdown; +export default ApiDropdown; \ No newline at end of file diff --git a/react/ui-components/src/molecules/CustomDropdown.js b/react/ui-components/src/molecules/CustomDropdown.js index 195e1cc3f7d..0424f2bf974 100644 --- a/react/ui-components/src/molecules/CustomDropdown.js +++ b/react/ui-components/src/molecules/CustomDropdown.js @@ -1,136 +1,111 @@ import _ from "lodash"; -import React from "react"; -import PropTypes from "prop-types"; +import React, { useEffect, useState } from "react"; import { Loader } from "../atoms/Loader"; import RadioButtons from "../atoms/RadioButtons"; import Dropdown from "../atoms/Dropdown"; -import Toggle from "../atoms/Toggle"; -import { createFunction } from "./techMolecules/createFunction"; - -const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyle, disabled, type, additionalWrapperClass = "",variant }) => { +import MultiSelectDropdown from "../atoms/MultiSelectDropdown"; +const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyle, disable, type, additionalWrapperClass = "",mdmsv2=false,props}) => { const master = { name: config?.mdmsConfig?.masterName }; if (config?.mdmsConfig?.filter) { master["filter"] = config?.mdmsConfig?.filter; } - - const { isLoading, data } = window?.Digit?.Hooks.useCustomMDMS(Digit?.ULBService?.getStateId(), config?.mdmsConfig?.moduleName, [master], { + const { isLoading, data } = Digit.Hooks.useCustomMDMS(Digit.ULBService.getStateId(), config?.mdmsConfig?.moduleName, [master], { select: config?.mdmsConfig?.select - ? createFunction(config?.mdmsConfig?.select) - : (data) => { + ? Digit.Utils.createFunction(config?.mdmsConfig?.select) + : (data) => { const optionsData = _.get(data, `${config?.mdmsConfig?.moduleName}.${config?.mdmsConfig?.masterName}`, []); return optionsData .filter((opt) => (opt?.hasOwnProperty("active") ? opt.active : true)) .map((opt) => ({ ...opt, name: `${config?.mdmsConfig?.localePrefix}_${Digit.Utils.locale.getTransformedLocale(opt.code)}` })); }, - enabled: config?.mdmsConfig ? true : false, - }); + enabled: (config?.mdmsConfig || config?.mdmsv2) ? true : false, +},mdmsv2); +if (isLoading) { + return ; +} +if(config?.optionsDisable && config?.options && config?.defaultOptions){ + config?.options?.forEach(obj1 => obj1.isDisabled = config?.defaultOptions.some(obj2 => obj2.type === obj1.code)); +} - if (isLoading) { - return ; - } +return ( + + {/* + + {t(label)} + {config.required ? " * " : null} + */} - const renderField = () => { - switch (type) { - case "radio": - return ( - + { - onChange(e, config.name); + props?.onChange + ? props.onChange( + e + ?.map((row) => { + return row?.[1] ? row[1] : null; + }) + .filter((e) => e) + ) + : onChange( + e + ?.map((row) => { + return row?.[1] ? row[1] : null; + }) + .filter((e) => e) + ); }} - disabled={disabled} - selectedOption={value} - defaultValue={value} - t={t} - errorStyle={errorStyle} - additionalWrapperClass={additionalWrapperClass} - innerStyles={config?.innerStyles} + selected={props?.value || value} + defaultLabel={t(config?.defaultText) } + defaultUnit={t(config?.selectedText) || t("COMMON_SELECTED")} + config={config} + disable={disable} + optionsDisable={config?.optionsDisable} /> - ); - case "dropdown": - case "radioordropdown": - case "select": - return ( - { - onChange(e, config.name); - }} - disabled={disabled} - selected={value || config.defaultValue} - defaultValue={value || config.defaultValue} - t={t} - errorStyle={errorStyle} - optionCardStyles={config?.optionsCustomStyle} - showIcon={config?.showIcon} - variant={variant} - isSearchable={config?.isSearchable} - /> - ); - case "toggle": - return ( - { - onChange(e, config.name); - }} - disabled={disabled} - selectedOption={value} - defaultValue={value} - t={t} - errorStyle={errorStyle} - additionalWrapperClass={additionalWrapperClass} - innerStyles={config?.innerStyles} - /> - ); - default: - return null; + : type === "radio" ? ( + { + onChange(e, config.name); + }} + disable={disable} + selectedOption={value} + defaultValue={value} + t={t} + errorStyle={errorStyle} + additionalWrapperClass={additionalWrapperClass} + innerStyles={config?.innerStyles} + /> + ) : ( + { + onChange(e, config.name); + }} + disable={disable} + selected={value || config.defaultValue} + defaultValue={value || config.defaultValue} + t={t} + errorStyle={errorStyle} + optionCardStyles={config?.optionsCustomStyle} + /> + ) } - }; - return {renderField()}; + +); }; - -CustomDropdown.propTypes = { - t: PropTypes.func.isRequired, - config: PropTypes.shape({ - mdmsConfig: PropTypes.shape({ - masterName: PropTypes.string, - moduleName: PropTypes.string, - filter: PropTypes.object, - select: PropTypes.string, - localePrefix: PropTypes.string, - }), - name: PropTypes.string, - optionsKey: PropTypes.string, - styles: PropTypes.object, - innerStyles: PropTypes.object, - options: PropTypes.array, - defaultValue: PropTypes.string, - optionsCustomStyle: PropTypes.object, - required: PropTypes.bool, - }), - inputRef: PropTypes.object, - label: PropTypes.string, - onChange: PropTypes.func, - value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), - errorStyle: PropTypes.object, - disabled: PropTypes.bool, - type: PropTypes.string, - additionalWrapperClass: PropTypes.string, -}; - -export default CustomDropdown; +export default CustomDropdown; \ No newline at end of file diff --git a/react/ui-components/src/molecules/DateRangeNew.js b/react/ui-components/src/molecules/DateRangeNew.js index 30d22a64900..6e34f86991c 100644 --- a/react/ui-components/src/molecules/DateRangeNew.js +++ b/react/ui-components/src/molecules/DateRangeNew.js @@ -1,23 +1,23 @@ import React, { Fragment, useEffect, useMemo, useRef, useState } from "react"; -import { Calender } from "../atoms/svgindex"; +// import { ArrowDown, Modal, ButtonSelector, Calender } from "@egovernments/digit-ui-react-components"; +import ButtonSelector from "../atoms/ButtonSelector"; +import { ArrowDown, Calender } from "../atoms/svgindex"; +import Modal from "../hoc/Modal"; import { DateRange, createStaticRanges } from "react-date-range"; import { format, addMonths, addHours, startOfToday, endOfToday, endOfYesterday, addMinutes, addSeconds, isEqual, subYears, startOfYesterday, startOfWeek, endOfWeek, startOfYear, endOfYear, startOfMonth, endOfMonth, startOfQuarter, endOfQuarter } from "date-fns"; - function isEndDateFocused(focusNumber) { return focusNumber === 1; } - function isStartDateFocused(focusNumber) { return focusNumber === 0; } - -const DateRangeNew = ({ values, onFilterChange, t, labelClass, label, customStyles, inputRef}) => { +const DateRangeNew = ({populators, values, onFilterChange, t, labelClass, label, customStyles, inputRef}) => { const [isModalOpen, setIsModalOpen] = useState(false); const [focusedRange, setFocusedRange] = useState([0, 0]); const [selectionRange, setSelectionRange] = useState({ ...values, - startDate: values?.startDate, - endDate: values?.endDate + startDate: typeof values?.startDate === "string" ? new Date(values?.startDate) : values?.startDate, + endDate: typeof values?.endDate === "string" ? new Date(values?.endDate) : values?.endDate }); const wrapperRef = useRef(inputRef); @@ -32,17 +32,15 @@ const DateRangeNew = ({ values, onFilterChange, t, labelClass, label, customStyl document.removeEventListener("mousedown", handleClickOutside); }; }, [wrapperRef]); - useEffect(() => { if (!isModalOpen && selectionRange?.startDate instanceof Date && selectionRange?.endDate instanceof Date) { const startDate = selectionRange?.startDate; const endDate = selectionRange?.endDate; const duration = getDuration(selectionRange?.startDate, selectionRange?.endDate); - const title = `${format(selectionRange?.startDate, "MMM d, yy")} - ${format(selectionRange?.endDate, "MMM d, yy")}`; + const title = `${format(selectionRange?.startDate, 'dd/MM/yyyy')} - ${format(selectionRange?.endDate, 'dd/MM/yyyy')}`; onFilterChange({ range: { startDate, endDate, duration, title }, requestDate: { startDate, endDate, duration, title } }); } }, [selectionRange, isModalOpen]); - const staticRanges = useMemo(() => { return createStaticRanges([ { @@ -96,7 +94,6 @@ const DateRangeNew = ({ values, onFilterChange, t, labelClass, label, customStyl } ]) }, []) - const getDuration = (startDate, endDate) => { let noOfDays = (new Date(endDate).getTime() - new Date(startDate).getTime()) / (1000 * 3600 * 24); if (noOfDays > 91) { @@ -109,7 +106,6 @@ const DateRangeNew = ({ values, onFilterChange, t, labelClass, label, customStyl return "day"; } }; - const handleSelect = (ranges) => { const { range1: selection } = ranges; const { startDate, endDate, title, duration } = selection; @@ -121,16 +117,13 @@ const DateRangeNew = ({ values, onFilterChange, t, labelClass, label, customStyl setIsModalOpen(false); } }; - const handleFocusChange = (focusedRange) => { const [rangeIndex, rangeStep] = focusedRange; setFocusedRange(focusedRange); }; - const handleClose = () => { setIsModalOpen(false); }; - return ( <>
{label}
@@ -140,25 +133,28 @@ const DateRangeNew = ({ values, onFilterChange, t, labelClass, label, customStyl setIsModalOpen((prevState) => !prevState)} /> {isModalOpen && ( -
- -
- )} - - - ); -}; - -export default DateRangeNew; +
+ +
+ )} + + + ); + }; + export default DateRangeNew; \ No newline at end of file diff --git a/react/ui-components/src/molecules/DetailsCard.js b/react/ui-components/src/molecules/DetailsCard.js index bfeace0c756..69bb394540e 100644 --- a/react/ui-components/src/molecules/DetailsCard.js +++ b/react/ui-components/src/molecules/DetailsCard.js @@ -2,39 +2,21 @@ import React from "react"; import PropTypes from "prop-types"; import { Link } from "react-router-dom"; import CitizenInfoLabel from "../atoms/CitizenInfoLabel"; +import ActionBar from "../atoms/ActionBar"; +import SubmitBar from "../atoms/SubmitBar"; import Button from "../atoms/Button"; -import ActionBar from "../atoms/ActionBar"; - -export const Details = ({ label, name, onClick }) => { +export const Details = ({ label, name, onClick}) => { return ( -
- +
+

{label}

 - {name} + {name}
); }; -const DetailsCard = ({ - data, - serviceRequestIdKey, - linkPrefix, - handleSelect, - selectedItems, - keyForSelected, - handleDetailCardClick, - isTwoDynamicPrefix = false, - getRedirectionLink, - handleClickEnabled = true, - t, - showActionBar = true, - showCitizenInfoLabel = false, - submitButtonLabel, - styleVariant = "", - redirectedLink, - subRedirectedLink, -}) => { +const DetailsCard = ({ data, serviceRequestIdKey, linkPrefix, handleSelect, selectedItems, keyForSelected, handleDetailCardClick, isTwoDynamicPrefix = false, getRedirectionLink, handleClickEnabled = true, t, showActionBar = true, showCitizenInfoLabel = false,submitButtonLabel,mode="default",apiDetails }) => { if (linkPrefix && serviceRequestIdKey) { return (
@@ -42,21 +24,22 @@ const DetailsCard = ({ return ( -
+
{Object.keys(object).map((name, index) => { if (name === "applicationNo" || name === "Vehicle Log") return null; return
; @@ -68,38 +51,89 @@ const DetailsCard = ({
); } - return (
{data.map((object, itemIndex) => { return ( -
handleClickEnabled && handleSelect(object)}> - {Object.keys(object) - .filter((rowEle) => !(typeof object[rowEle] == "object" && object[rowEle]?.hidden == true)) +
{ + e.stopPropagation() + handleClickEnabled && handleSelect(object) + }} + > + {Object.keys(object) + .filter( + (rowEle) => + !( + typeof object[rowEle] == 'object' && + object[rowEle]?.hidden == true + ) + ) .map((name, index) => { - return
handleClickEnabled && handleDetailCardClick(object)} />; + return ( +
{ + e.stopPropagation() + handleClickEnabled && handleSelect(object) + } + } + /> + ); })} {showCitizenInfoLabel ? ( - + ) : null} - {showActionBar ? ( - -
); })}
); }; - DetailsCard.propTypes = { data: PropTypes.array, }; - DetailsCard.defaultProps = { data: [], }; - -export default DetailsCard; +export default DetailsCard; \ No newline at end of file diff --git a/react/ui-components/src/molecules/FilterAction.js b/react/ui-components/src/molecules/FilterAction.js index 2dfa1824175..053425dcb00 100644 --- a/react/ui-components/src/molecules/FilterAction.js +++ b/react/ui-components/src/molecules/FilterAction.js @@ -1,11 +1,12 @@ import React from "react"; -import { FilterSvg } from "../atoms/svgindex"; -import { RoundedLabel } from "../atoms"; +import { FilterSvg,FilterIcon,SortSvg } from "../atoms/svgindex"; +import RoundedLabel from "../atoms/RoundedLabel"; const FilterAction = ({ text, handleActionClick, ...props }) => ( -
+
- {text} + + {text}
); diff --git a/react/ui-components/src/molecules/MultiUploadWrapper.js b/react/ui-components/src/molecules/MultiUploadWrapper.js index bcf3a02af51..ee428cb9270 100644 --- a/react/ui-components/src/molecules/MultiUploadWrapper.js +++ b/react/ui-components/src/molecules/MultiUploadWrapper.js @@ -1,178 +1,122 @@ -import React, { useEffect, useReducer, useState } from "react"; -import PropTypes from "prop-types"; -import UploadFile from "../atoms/UploadFile"; - +import React, { useEffect, useReducer, useState } from "react" +import UploadFile from "../atoms/UploadFile" const displayError = ({ t, error, name }, customErrorMsg) => ( - -
{customErrorMsg ? t(customErrorMsg) : t(error)}
-
{customErrorMsg ? "" : `${t("ES_COMMON_DOC_FILENAME")} : ${name} ...`}
- -); + +
{customErrorMsg ? t(customErrorMsg) : t(error)}
+
{customErrorMsg ? '' : `${t('ES_COMMON_DOC_FILENAME')} : ${name} ...`}
+ +) const fileValidationStatus = (file, regex, maxSize, t) => { - const status = { valid: true, name: file?.name?.substring(0, 15), error: "" }; - if (!file) return; - - if (!regex.test(file.type) && file.size / 1024 / 1024 > maxSize) { - status.valid = false; - status.error = t(`NOT_SUPPORTED_FILE_TYPE_AND_FILE_SIZE_EXCEEDED_5MB`); - } - - if (!regex.test(file.type)) { - status.valid = false; - status.error = t(`NOT_SUPPORTED_FILE_TYPE`); - } - - if (file.size / 1024 / 1024 > maxSize) { - status.valid = false; - status.error = t(`FILE_SIZE_EXCEEDED_5MB`); - } - - return status; -}; + + const status = { valid: true, name: file?.name?.substring(0, 15), error: '' }; + if (!file) return; + if (!regex.test(file.type) && (file.size / 1024 / 1024) > maxSize) { + status.valid = false; status.error = t(`NOT_SUPPORTED_FILE_TYPE_AND_FILE_SIZE_EXCEEDED_5MB`); + } + if (!regex.test(file.type)) { + status.valid = false; status.error = t(`NOT_SUPPORTED_FILE_TYPE`); + } + if ((file.size / 1024 / 1024) > maxSize) { + status.valid = false; status.error = t(`FILE_SIZE_EXCEEDED_5MB`); + } + return status; +} const checkIfAllValidFiles = (files, regex, maxSize, t, maxFilesAllowed, state) => { - if (!files.length || !regex || !maxSize) return [{}, false]; - - const uploadedFiles = state.length + 1; - if (maxFilesAllowed && (uploadedFiles > maxFilesAllowed || files.length > maxFilesAllowed)) - return [[{ valid: false, name: files[0]?.name?.substring(0, 15), error: t(`FILE_LIMIT_EXCEEDED`) }], true]; - - const messages = []; - let isInValidGroup = false; - for (let file of files) { - const fileStatus = fileValidationStatus(file, regex, maxSize, t); - if (!fileStatus.valid) { - isInValidGroup = true; + if (!files.length || !regex || !maxSize) return [{}, false]; + + // added another condition files.length > 0 , for when user uploads files more than maxFilesAllowed in one go the + const uploadedFiles = state.length + 1 + if ( maxFilesAllowed && (uploadedFiles > maxFilesAllowed || files.length > maxFilesAllowed)) return [[{ valid: false, name: files[0]?.name?.substring(0, 15), error: t(`FILE_LIMIT_EXCEEDED`)}],true] + const messages = []; + let isInValidGroup = false; + for (let file of files) { + const fileStatus = fileValidationStatus(file, regex, maxSize, t); + if (!fileStatus.valid) { + isInValidGroup = true; + } + messages.push(fileStatus); } - messages.push(fileStatus); - } - - return [messages, isInValidGroup]; -}; - -const MultiUploadWrapper = ({ - t, - module = "PGR", - tenantId = Digit.ULBService.getStateId(), - getFormState, - requestSpecifcFileRemoval, - extraStyleName = "", - setuploadedstate = [], - showHintBelow, - hintText, - allowedFileTypesRegex = /(.*?)(jpg|jpeg|webp|aif|png|image|pdf|msword|openxmlformats-officedocument)$/i, - allowedMaxSizeInMB = 10, - acceptFiles = "image/*, .jpg, .jpeg, .webp, .aif, .png, .image, .pdf, .msword, .openxmlformats-officedocument, .dxf", - maxFilesAllowed, - customClass = "", - customErrorMsg, - containerStyles, -}) => { - const FILES_UPLOADED = "FILES_UPLOADED"; - const TARGET_FILE_REMOVAL = "TARGET_FILE_REMOVAL"; + + return [messages, isInValidGroup]; +} +const MultiUploadWrapper = ({ t, module = "PGR", tenantId = Digit.ULBService.getStateId(), getFormState, requestSpecifcFileRemoval, extraStyleName = "", setuploadedstate = [], showHintBelow, hintText, allowedFileTypesRegex = /(.*?)(jpg|jpeg|webp|aif|png|image|pdf|msword|openxmlformats-officedocument)$/i, allowedMaxSizeInMB = 10, acceptFiles = "image/*, .jpg, .jpeg, .webp, .aif, .png, .image, .pdf, .msword, .openxmlformats-officedocument, .dxf", maxFilesAllowed, customClass="", customErrorMsg,containerStyles }) => { + const FILES_UPLOADED = "FILES_UPLOADED" + const TARGET_FILE_REMOVAL = "TARGET_FILE_REMOVAL" const [fileErrors, setFileErrors] = useState([]); - const [enableButton, setEnableButton] = useState(true); - + const [enableButton, setEnableButton] = useState(true) const uploadMultipleFiles = (state, payload) => { - const { files, fileStoreIds } = payload; - const filesData = Array.from(files); - const newUploads = filesData?.map((file, index) => [file.name, { file, fileStoreId: fileStoreIds[index] }]); - return [...state, ...newUploads]; - }; - + const { files, fileStoreIds } = payload; + const filesData = Array.from(files) + const newUploads = filesData?.map((file, index) => [file.name, { file, fileStoreId: fileStoreIds[index] }]) + return [...state, ...newUploads] + } const removeFile = (state, payload) => { - const __indexOfItemToDelete = state.findIndex((e) => e[1].fileStoreId.fileStoreId === payload.fileStoreId.fileStoreId); - const mutatedState = state.filter((e, index) => index !== __indexOfItemToDelete); - setFileErrors([]); - return [...mutatedState]; - }; - + const __indexOfItemToDelete = state.findIndex(e => e[1].fileStoreId.fileStoreId === payload.fileStoreId.fileStoreId) + const mutatedState = state.filter((e, index) => index !== __indexOfItemToDelete) + setFileErrors([]) + return [...mutatedState] + } const uploadReducer = (state, action) => { - switch (action.type) { - case FILES_UPLOADED: - return uploadMultipleFiles(state, action.payload); - case TARGET_FILE_REMOVAL: - return removeFile(state, action.payload); - default: - break; - } - }; - - const [state, dispatch] = useReducer(uploadReducer, [...setuploadedstate]); - + switch (action.type) { + case FILES_UPLOADED: + return uploadMultipleFiles(state, action.payload) + case TARGET_FILE_REMOVAL: + return removeFile(state, action.payload) + default: + break; + } + } + const [state, dispatch] = useReducer(uploadReducer, [...setuploadedstate]) + const onUploadMultipleFiles = async (e) => { - setEnableButton(false); - setFileErrors([]); - const files = Array.from(e.target.files); - - if (!files.length) return; - const [validationMsg, error] = checkIfAllValidFiles(files, allowedFileTypesRegex, allowedMaxSizeInMB, t, maxFilesAllowed, state); - - if (!error) { - try { - const { data: { files: fileStoreIds } = {} } = await Digit.UploadServices.MultipleFilesStorage(module, e.target.files, tenantId); - setEnableButton(true); - return dispatch({ type: FILES_UPLOADED, payload: { files: e.target.files, fileStoreIds } }); - } catch (err) { - setEnableButton(true); + setEnableButton(false) + setFileErrors([]) + const files = Array.from(e.target.files); + if (!files.length) return; + const [validationMsg, error] = checkIfAllValidFiles(files, allowedFileTypesRegex, allowedMaxSizeInMB, t, maxFilesAllowed, state); + + if (!error) { + try { + const { data: { files: fileStoreIds } = {} } = await Digit.UploadServices.MultipleFilesStorage(module, e.target.files, tenantId) + setEnableButton(true) + return dispatch({ type: FILES_UPLOADED, payload: { files: e.target.files, fileStoreIds } }) + } catch (err) { + setEnableButton(true) + } + } else { + setFileErrors(validationMsg) + setEnableButton(true) } - } else { - setFileErrors(validationMsg); - setEnableButton(true); - } - }; - - useEffect(() => getFormState(state), [state]); - + } + useEffect(() => getFormState(state), [state]) useEffect(() => { - requestSpecifcFileRemoval ? dispatch({ type: TARGET_FILE_REMOVAL, payload: requestSpecifcFileRemoval }) : null; - }, [requestSpecifcFileRemoval]); - + requestSpecifcFileRemoval ? dispatch({ type: TARGET_FILE_REMOVAL, payload: requestSpecifcFileRemoval }) : null + }, [requestSpecifcFileRemoval]) return ( -
- onUploadMultipleFiles(e)} - removeTargetedFile={(fileDetailsData) => dispatch({ type: TARGET_FILE_REMOVAL, payload: fileDetailsData })} - uploadedFiles={state} - multiple={true} - showHintBelow={showHintBelow} - hintText={hintText} - extraStyleName={extraStyleName} - onDelete={() => { - setFileErrors([]); - }} - accept={acceptFiles} - message={t(`WORKS_NO_FILE_SELECTED`)} - customClass={customClass} - enableButton={enableButton} - /> - - {fileErrors.length - ? fileErrors.map(({ valid, name, type, size, error }) => (valid ? null : displayError({ t, error, name }, customErrorMsg))) - : null} - -
- ); -}; - -MultiUploadWrapper.propTypes = { - t: PropTypes.func.isRequired, - module: PropTypes.string, - tenantId: PropTypes.string, - getFormState: PropTypes.func, - requestSpecifcFileRemoval: PropTypes.object, - extraStyleName: PropTypes.string, - setuploadedstate: PropTypes.array, - showHintBelow: PropTypes.bool, - hintText: PropTypes.string, - allowedFileTypesRegex: PropTypes.instanceOf(RegExp), - allowedMaxSizeInMB: PropTypes.number, - acceptFiles: PropTypes.string, - maxFilesAllowed: PropTypes.number, - customClass: PropTypes.string, - customErrorMsg: PropTypes.string, - containerStyles: PropTypes.object, -}; - -export default MultiUploadWrapper; +
+ onUploadMultipleFiles(e)} + removeTargetedFile={(fileDetailsData) => dispatch({ type: TARGET_FILE_REMOVAL, payload: fileDetailsData })} + uploadedFiles={state} + multiple={true} + showHintBelow={showHintBelow} + hintText={hintText} + extraStyleName={extraStyleName} + onDelete={() => { + setFileErrors([]) + }} + accept={acceptFiles} + + customClass={customClass} + enableButton={enableButton} + /> + + {fileErrors.length ? fileErrors.map(({ valid, name, type, size, error }) => ( + valid ? null : displayError({ t, error, name }, customErrorMsg) + )) : null} + +
) +} +export default MultiUploadWrapper \ No newline at end of file diff --git a/react/ui-components/src/molecules/RenderFormFields.js b/react/ui-components/src/molecules/RenderFormFields.js index b4d83757074..de263347bb4 100644 --- a/react/ui-components/src/molecules/RenderFormFields.js +++ b/react/ui-components/src/molecules/RenderFormFields.js @@ -1,346 +1,368 @@ -import React from "react"; +import React from 'react'; import { useTranslation } from "react-i18next"; import { Controller } from "react-hook-form"; import CardLabelError from "../atoms/CardLabelError"; -import LabelFieldPair from "../atoms/LabelFieldPair"; +import LabelFieldPair from '../atoms/LabelFieldPair'; import CardLabel from "../atoms/CardLabel"; import TextInput from "../atoms/TextInput"; import TextArea from "../atoms/TextArea"; -import CustomDropdown from "./CustomDropdown"; -import MobileNumber from "../atoms/MobileNumber"; -import DateRangeNew from "./DateRangeNew"; +import CustomDropdown from './CustomDropdown'; +import MobileNumber from '../atoms/MobileNumber'; +import DateRangeNew from './DateRangeNew'; import MultiUploadWrapper from "./MultiUploadWrapper"; -import MultiSelectDropdown from "../atoms/MultiSelectDropdown"; -import LocationDropdownWrapper from "./LocationDropdownWrapper"; -import WorkflowStatusFilter from "./WorkflowStatusFilter"; -import ApiDropdown from "./ApiDropdown"; -const RenderFormFields = ({ data, ...props }) => { +import MultiSelectDropdown from '../atoms/MultiSelectDropdown'; +import LocationDropdownWrapper from './LocationDropdownWrapper'; +import WorkflowStatusFilter from './WorkflowStatusFilter'; +import ApiDropdown from './ApiDropdown'; +import ApiCheckboxes from './ApiCheckboxes'; +const RenderFormFields = ({data,...props}) => { const { t } = useTranslation(); - const { fields, control, formData, errors, register, setValue, getValues, setError, clearErrors, apiDetails } = props; + const { fields, control, formData, errors, register, setValue, getValues, setError, clearErrors, apiDetails} = props - const fieldSelector = (type, populators, isMandatory, disable = false, component, config) => { - const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component; - let customValidations = config?.additionalValidation - ? Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.additionalValidations( - config?.additionalValidation?.type, - formData, - config?.additionalValidation?.keys - ) - : null; - const customRules = customValidations ? { validate: customValidations } : {}; - switch (type) { - case "date": - case "text": - case "number": - case "password": - case "time": - return ( - ( - { + const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component; + let customValidations = config?.additionalValidation ? Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.additionalValidations(config?.additionalValidation?.type, formData, config?.additionalValidation?.keys) : null + const customRules = customValidations ? { validate: customValidations} : {} + switch (type) { + case "date": + case "text": + case "number": + case "password": + case "time": + return ( + ( + + )} + name={populators.name} + rules={{required: isMandatory, ...populators.validation, ...customRules }} + control={control} + /> + ); + + case "textarea": + return ( + ( +