From 5095ed73653b80661111aa326cd6896521ac4401 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Fri, 23 Aug 2024 16:55:19 +0200 Subject: [PATCH] - added login page; - added file upload; - added faq item edit modal; --- .env | 2 +- environments/dev/dev.env | 2 +- package-lock.json | 1 + package.json | 1 + src/assets/scss/components/appForm.scss | 27 ++ src/assets/scss/components/appPage.scss | 14 +- src/assets/scss/components/formBuilder.scss | 26 +- src/assets/scss/components/layout.scss | 89 +++++ src/assets/scss/components/login.scss | 14 + src/assets/scss/components/misc.scss | 59 +++ .../scss/components/statsBigBadges.scss | 1 + src/assets/scss/theme.scss | 91 +---- .../FormField/components/Datepicker/index.js | 4 +- .../components/DatepickerRange/index.js | 15 +- .../FormField/components/Fileupload/index.js | 135 +++++-- .../FormField/components/Switch/index.js | 49 +++ .../FormField/components/TextInput/index.js | 6 +- src/components/FormField/index.js | 4 +- src/components/FormFieldRepeater/index.js | 16 +- .../FormFieldRepeaterCriteria/index.js | 13 +- src/components/FormFieldRepeaterFaq/index.js | 95 ++++- src/components/ProtectedRoute/index.js | 17 +- src/components/TopBarProfileMenu/index.js | 8 +- .../UnsavedChangesDetector/index.js | 34 ++ src/helpers/uniqid.js | 8 + .../Bandi/components/AllBandiTable/index.js | 2 +- .../components/BandoEditFormActions/index.js | 32 ++ .../components/BandoEditFormStep1/index.js | 209 +++++++++++ .../components/BandoEditFormStep2/index.js | 146 ++++++++ src/pages/BandoEdit/index.js | 354 +++++++----------- .../components/BuilderElement/index.js | 65 ---- .../components/FormBuilder/index.js | 73 ---- .../{BandoEditForms => BandoForms}/index.js | 4 +- .../components/BuilderElement/index.js | 92 +++++ .../components/BuilderElementItem/index.js | 37 ++ .../components/FormBuilder/index.js | 98 +++++ .../components/ItemTypes/index.js | 0 .../index.js | 59 ++- src/pages/BandoView/index.js | 6 +- .../components/LatestBandiTable/index.js | 2 +- .../LatestUsersActivityTable/index.js | 2 +- src/pages/Login/index.js | 109 +++++- src/routes.js | 8 +- src/service/authentication-service.js | 6 +- src/service/file-upload-service.js | 14 + src/service/network-service.js | 41 ++ src/store/actions.js | 8 + src/store/initial.js | 9 + src/store/selectors.js | 5 +- src/store/zustand-x-opts.js | 4 +- 50 files changed, 1540 insertions(+), 576 deletions(-) create mode 100644 src/assets/scss/components/layout.scss create mode 100644 src/assets/scss/components/login.scss create mode 100644 src/assets/scss/components/misc.scss create mode 100644 src/components/FormField/components/Switch/index.js create mode 100644 src/components/UnsavedChangesDetector/index.js create mode 100644 src/helpers/uniqid.js create mode 100644 src/pages/BandoEdit/components/BandoEditFormActions/index.js create mode 100644 src/pages/BandoEdit/components/BandoEditFormStep1/index.js create mode 100644 src/pages/BandoEdit/components/BandoEditFormStep2/index.js delete mode 100644 src/pages/BandoEditForm/components/BuilderElement/index.js delete mode 100644 src/pages/BandoEditForm/components/FormBuilder/index.js rename src/pages/{BandoEditForms => BandoForms}/index.js (95%) create mode 100644 src/pages/BandoFormsEdit/components/BuilderElement/index.js create mode 100644 src/pages/BandoFormsEdit/components/BuilderElementItem/index.js create mode 100644 src/pages/BandoFormsEdit/components/FormBuilder/index.js rename src/pages/{BandoEditForm => BandoFormsEdit}/components/ItemTypes/index.js (100%) rename src/pages/{BandoEditForm => BandoFormsEdit}/index.js (61%) create mode 100644 src/service/file-upload-service.js diff --git a/.env b/.env index 111c908..26fd054 100644 --- a/.env +++ b/.env @@ -1,3 +1,3 @@ REACT_APP_TAB_TITLE=Gepafin -REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1/ +REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1 REACT_APP_LOGO_FILENAME=logo.svg \ No newline at end of file diff --git a/environments/dev/dev.env b/environments/dev/dev.env index 111c908..26fd054 100644 --- a/environments/dev/dev.env +++ b/environments/dev/dev.env @@ -1,3 +1,3 @@ REACT_APP_TAB_TITLE=Gepafin -REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1/ +REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1 REACT_APP_LOGO_FILENAME=logo.svg \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index def2de4..25754b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@wordpress/i18n": "^5.5.0", "@wordpress/react-i18n": "^4.5.0", "dompurify": "3.1.6", + "fast-deep-equal": "^3.1.3", "html-react-parser": "5.1.12", "jwt-decode": "4.0.0", "klona": "2.0.6", diff --git a/package.json b/package.json index 86de8be..d9a6b0a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@wordpress/i18n": "^5.5.0", "@wordpress/react-i18n": "^4.5.0", "dompurify": "3.1.6", + "fast-deep-equal": "^3.1.3", "html-react-parser": "5.1.12", "jwt-decode": "4.0.0", "klona": "2.0.6", diff --git a/src/assets/scss/components/appForm.scss b/src/assets/scss/components/appForm.scss index 60f0dd4..a66d7ce 100644 --- a/src/assets/scss/components/appForm.scss +++ b/src/assets/scss/components/appForm.scss @@ -7,6 +7,7 @@ display: flex; flex-direction: column; gap: 14px; + padding: 5px 0; label { font-size: 14px; @@ -40,14 +41,32 @@ } } } + +.appForm__fileUploadItem { + display: flex; + justify-content: space-between; +} + +.appForm__fileUploadItemName { + +} + +.appForm__row { + display: flex; + gap: 7px; + align-items: center; +} + .appForm__oneCol { display: flex; flex-direction: column; + gap: 7px; label { font-weight: 400; } } + .appForm__twoCols { display: flex; gap: 1rem; @@ -99,4 +118,12 @@ .appForm__faqTabItem { display: flex; gap: 0.5rem; + align-items: center; + + .p-togglebutton[data-p-highlight="true"] { + .p-button:not(.p-button-danger) { + background: var(--menuitem-active-background); + border: 1px solid var(--menuitem-active-background); + } + } } \ No newline at end of file diff --git a/src/assets/scss/components/appPage.scss b/src/assets/scss/components/appPage.scss index 588ee27..bfa5513 100644 --- a/src/assets/scss/components/appPage.scss +++ b/src/assets/scss/components/appPage.scss @@ -1,6 +1,7 @@ .appPage { display: flex; flex-direction: column; + flex-grow: 2; h1 { color: var(--primary-color); @@ -26,6 +27,10 @@ } } +.appPageSection__table { + width: 100%; +} + .appTableHeader { display: flex; justify-content: space-between; @@ -65,12 +70,5 @@ .appPageSection__actions { display: flex; gap: 24px; - margin-bottom: 24px; -} - -.mb-2 { - margin-bottom: 4px; -} -.mb-8 { - margin-bottom: 16px; + padding: 24px 0 48px; } \ No newline at end of file diff --git a/src/assets/scss/components/formBuilder.scss b/src/assets/scss/components/formBuilder.scss index 61f9e31..5cf3f3d 100644 --- a/src/assets/scss/components/formBuilder.scss +++ b/src/assets/scss/components/formBuilder.scss @@ -32,6 +32,9 @@ .formBuilder__element { display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; padding: 10px 20px; border: 1px dashed var(--button-secondary-borderColor); font-size: 14px; @@ -61,14 +64,21 @@ list-style: none; padding: 0; margin: 0; +} +.formBuilder__elementItem { + display: flex; + padding: 10px 20px; + border: 1px dashed var(--button-secondary-borderColor); + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 21px; - li { - display: flex; - padding: 10px 20px; - border: 1px dashed var(--button-secondary-borderColor); - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 21px; + &:hover { + cursor: grab; } +} + +.formBuilder__elementSettings { + width: 40rem; } \ No newline at end of file diff --git a/src/assets/scss/components/layout.scss b/src/assets/scss/components/layout.scss new file mode 100644 index 0000000..92f3e9b --- /dev/null +++ b/src/assets/scss/components/layout.scss @@ -0,0 +1,89 @@ +html { + min-height: 100%; + display: flex; + flex-direction: column; +} + +body { + min-height: 100%; + display: flex; + flex-direction: column; + flex-grow: 1; + margin: 0; + font-family: 'Montserrat'; + + p, span, input, label:not(.p-error), textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button { + font-family: 'Montserrat'; + color: var(--global-textColor); + } +} + +#root, .wrapper { + min-height: 100%; + display: flex; + flex-direction: column; + flex-grow: 1; +} +.inner { + display: flex; + height: 100%; + min-height: 0; + flex-grow: 1; + + > aside { + flex: 0 0 320px; + border-right: 1px solid var(--menu-borderColor); + + ul { + display: flex; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; + + li a, li button { + display: flex; + padding: 10.5px 17.5px; + align-items: center; + gap: 7px; + width: 100%; + border: 0; + border-bottom: 1px solid var(--menu-borderColor); + color: var(--menuitem-color); + background-color: transparent; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 100%; + text-decoration: none; + + &:hover { + cursor: pointer; + } + + i { + color: var(--text-color-secondary); + } + + &.active { + color: var(--menuitem-active-color); + background-color: var(--menuitem-active-background); + + i { + color: white; + } + + span { + color: var(--menuitem-active-color); + } + } + } + } + } + + > main { + flex: 1 1 auto; + box-sizing: border-box; + padding: 0 24px 50px; + } +} \ No newline at end of file diff --git a/src/assets/scss/components/login.scss b/src/assets/scss/components/login.scss new file mode 100644 index 0000000..ad84979 --- /dev/null +++ b/src/assets/scss/components/login.scss @@ -0,0 +1,14 @@ +.appPageLogin { + display: flex; + justify-content: center; + align-items: center; +} + +.appPageLogin__wrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: 540px; + padding: 24px; +} \ No newline at end of file diff --git a/src/assets/scss/components/misc.scss b/src/assets/scss/components/misc.scss new file mode 100644 index 0000000..0b01490 --- /dev/null +++ b/src/assets/scss/components/misc.scss @@ -0,0 +1,59 @@ +.p-steps { + .p-highlight { + span.p-steps-number { + color: var(--menuitem-active-color); + } + } +} +.p-badge { + color: var(--menuitem-active-color); +} +.p-button:not(.p-button-outlined, .p-button-secondary), +.p-button:not(.p-button-outlined, .p-button-secondary) span { + color: var(--menuitem-active-color); +} +.p-fileupload-row { + .p-button-danger { + background-color: #f44336; + opacity: 0.8; + &:hover { + opacity: 1; + } + } +} +.p-tag { + .p-tag-value { + color: var(--menuitem-active-color); + } +} + +.p-paginator-page { + color: var(--menuitem-active-color); +} + +.p-datepicker-buttonbar .p-button { + color: var(--global-textColor); +} + +.p-message.p-message-error { + background: #ffdbdb; + border-left: 5px solid #C2504D; + + svg { + path { + fill: var(--global-textColor); + } + } +} + + + +.mb-2 { + margin-bottom: 4px; +} +.mb-8 { + margin-bottom: 16px; +} +.mr-8 { + margin-right: 16px; +} \ No newline at end of file diff --git a/src/assets/scss/components/statsBigBadges.scss b/src/assets/scss/components/statsBigBadges.scss index 70c01ea..102f51e 100644 --- a/src/assets/scss/components/statsBigBadges.scss +++ b/src/assets/scss/components/statsBigBadges.scss @@ -5,6 +5,7 @@ align-items: center; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 24px; + width: 100%; } .statsBigBadges__gridItem { diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss index b8c9f1c..190ee23 100644 --- a/src/assets/scss/theme.scss +++ b/src/assets/scss/theme.scss @@ -12,6 +12,7 @@ --card-borderColor-color: #EEC137; --button-secondary-borderColor: #C79807; --button-secondary-background: var(--menu-borderColor); + --global-textColor: #4B5563; --card-full-background-color-2: #EEC137; --card-full-background-color-3: #FA8E42; @@ -19,95 +20,13 @@ --card-full-background-color-1: #3B7C43; } -html { - min-height: 100%; - display: flex; - flex-direction: column; -} - -body { - min-height: 100%; - display: flex; - flex-direction: column; - flex-grow: 1; - margin: 0; - font-family: 'Montserrat'; - - p, span, input, label, textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button { - font-family: 'Montserrat'; - } -} - -#root, .wrapper { - min-height: 100%; - display: flex; - flex-direction: column; - flex-grow: 1; -} -.inner { - display: flex; - height: 100%; - min-height: 0; - flex-grow: 1; - - > aside { - flex: 0 0 320px; - border-right: 1px solid var(--menu-borderColor); - - ul { - display: flex; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; - - li a, li button { - display: flex; - padding: 10.5px 17.5px; - align-items: center; - gap: 7px; - width: 100%; - border: 0; - border-bottom: 1px solid var(--menu-borderColor); - color: var(--menuitem-color); - background-color: transparent; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 100%; - text-decoration: none; - - &:hover { - cursor: pointer; - } - - i { - color: var(--text-color-secondary); - } - - &.active { - color: var(--menuitem-active-color); - background-color: var(--menuitem-active-background); - - i { - color: white; - } - } - } - } - } - - > main { - flex: 1 1 auto; - box-sizing: border-box; - padding: 0 24px 50px; - } -} - +@import "./components/layout.scss"; @import "./components/topBar.scss"; @import "./components/appPage.scss"; @import "./components/statsBigBadges.scss"; @import "./components/bandoStatusTag.scss"; @import "./components/appForm.scss"; @import "./components/pageBando.scss"; -@import "./components/formBuilder.scss"; \ No newline at end of file +@import "./components/formBuilder.scss"; +@import "./components/misc.scss"; +@import "./components/login.scss"; \ No newline at end of file diff --git a/src/components/FormField/components/Datepicker/index.js b/src/components/FormField/components/Datepicker/index.js index 70c9981..0732b2e 100644 --- a/src/components/FormField/components/Datepicker/index.js +++ b/src/components/FormField/components/Datepicker/index.js @@ -9,7 +9,7 @@ const Datepicker = ({ label, control, errors, - defaultValue, + defaultValue = [], config = {}, infoText = null, minDate = null, @@ -27,7 +27,7 @@ const Datepicker = ({ rules={config} render={({ field, fieldState }) => ( field.onChange(e.value)} dateFormat="dd/mm/yy" mask="99/99/9999" diff --git a/src/components/FormField/components/DatepickerRange/index.js b/src/components/FormField/components/DatepickerRange/index.js index ac53c09..dc4987b 100644 --- a/src/components/FormField/components/DatepickerRange/index.js +++ b/src/components/FormField/components/DatepickerRange/index.js @@ -11,13 +11,15 @@ const DatepickerRange = ({ label, control, errors, - defaultValue, + defaultValue = [], config = {}, infoText = null, minDate = null, maxDate = null }) => { - const datesDefaultValue = !isNil(defaultValue) && !isEmpty(defaultValue) && defaultValue.length ? defaultValue.map(v => new Date(v)) : []; + const datesDefaultValue = !isNil(defaultValue) && defaultValue.length + ? defaultValue.map(v => new Date(v)) + : []; return ( <>