From 56c85fd97668315f7ecaf3450586d05ab675091c Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sun, 12 Apr 2020 23:50:20 +0200 Subject: [PATCH] feature/General --- .../Dashboard/Preferences/General.js | 367 ++++++++++++++++-- client/src/style/pages/preferences.scss | 66 +++- 2 files changed, 375 insertions(+), 58 deletions(-) diff --git a/client/src/containers/Dashboard/Preferences/General.js b/client/src/containers/Dashboard/Preferences/General.js index a7c3d9c75..b7031dc4e 100644 --- a/client/src/containers/Dashboard/Preferences/General.js +++ b/client/src/containers/Dashboard/Preferences/General.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useCallback, useMemo } from 'react'; import { useFormik } from 'formik'; import * as Yup from 'yup'; import { @@ -6,63 +6,350 @@ import { FormGroup, InputGroup, Intent, -} from "@blueprintjs/core"; -import {optionsMapToArray} from 'utils'; + MenuItem, + Classes, +} from '@blueprintjs/core'; -function GeneralPreferences({ +import { optionsMapToArray, momentFormatter } from 'utils'; +import { TimezonePicker } from '@blueprintjs/timezone'; +import { Select } from '@blueprintjs/select'; +import classNames from 'classnames'; +import ErrorMessage from 'components/ErrorMessage'; +import Icon from 'components/Icon'; -}) { +function GeneralPreferences(props) { + const [selectedItems, setSelectedItems] = useState({}); + const [disableItems, setDisableItems] = useState(false); + const [timeZone, setTimeZone] = useState(''); + + const businessLocation = [ + { id: 218, name: 'LIBYA', code: 'LY' }, + { id: 380, name: 'UKRAINE', code: 'UA' }, + { id: 212, name: 'Morocco', code: 'MA' }, + ]; + const languagesDisplay = [ + { name: 'EN', label: 'English' }, + { name: 'Arb', label: 'Arabic' }, + ]; + const currencies = [ + { id: 0, name: 'US Dollar', code: 'USD' }, + { id: 1, name: 'Euro', code: 'EUR' }, + { id: 2, name: 'Libyan Dinar ', code: 'LYD' }, + ]; + const fiscalYear = [ + { id: 0, name: 'January-July', label: 'January-July' }, + { id: 1, name: 'August-December', label: 'August-December' }, + ]; + const dateFormat = [ + { name: '04/11/2020', format: 'MM-DD-YY' }, + { name: '2020/03/21', format: 'YY/MM/DD' }, + { name: 'Apr 11, 2020', format: 'MMMM yyyy' }, + { name: 'Saturday, Apr 11, 2020', format: 'EEEE, MMM d, yyyy' }, + ]; const validationSchema = Yup.object().shape({ - organization_name: Yup.string().required(), - organization_industry: Yup.string().required(), + organization_name: Yup.string().required('required field'), + organization_industry: Yup.string().required('required field'), + business_location: Yup.string().required('required field'), + base_currency: Yup.string().required('required field'), + fiscal_year: Yup.string().required('required field'), + language: Yup.string().required('required field'), + time_zone: Yup.date().required('required field'), + date_format: Yup.date().required('required field'), }); const formik = useFormik({ enableReinitialize: true, - initialValues: { - }, + initialValues: {}, validationSchema: validationSchema, onSubmit: (values) => { - const options = optionsMapToArray(values).map(option => { - return {...option, group: 'general'}; + const options = optionsMapToArray(values).map((option) => { + return { ...option, group: 'general' }; }); - }, }); + const { errors, values, touched } = useMemo(() => formik, [formik]); + + const businessLocationItem = (item, { handleClick }) => ( + + ); + + const currencyItem = (item, { handleClick }) => ( + + ); + const fiscalYearItem = (item, { handleClick }) => ( + + ); + + const languageItem = (item, { handleClick }) => ( + + ); + + const data_Format = (item, { handleClick }) => ( + + ); + + const onItemsSelect = (filedName) => { + return (filed) => { + setSelectedItems({ + ...selectedItems, + [filedName]: filed, + }); + formik.setFieldValue(filedName, filed.name); + }; + }; + const getSelectedItemLabel = (filedName, defaultLabel) => { + return typeof selectedItems[filedName] !== 'undefined' + ? selectedItems[filedName].name + : defaultLabel; + }; + + const handleTimezoneChange = (timezone) => setTimeZone(timezone); return ( -
- +
+ + } + > + + - - + } + > + + - + } + intent={ + errors.business_location && + touched.business_location && + Intent.DANGER + } + > + + - - + } + intent={ + errors.base_currency && touched.base_currency && Intent.DANGER + } + > + + -
+ } + intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER} + > + + - - - ) + } + > + + + + } + > + + + + } + minimal={true} + > + + + +
+ + +
+ +
+ ); } -export default GeneralPreferences; \ No newline at end of file +export default GeneralPreferences; diff --git a/client/src/style/pages/preferences.scss b/client/src/style/pages/preferences.scss index 813ccf730..6682e11fe 100644 --- a/client/src/style/pages/preferences.scss +++ b/client/src/style/pages/preferences.scss @@ -1,28 +1,45 @@ - - -.dashboard-content--preferences{ +.dashboard-content--preferences { margin-left: 430px; + height: 700px; + width: 800px; + position: relative; } -.preferences{ - &__inside-content--tabable{ +.preferences { + &__inside-content--tabable { margin-left: -25px; margin-right: -25px; } - &__inside-content{ - .#{$ns}-tab-list{ - border-bottom: 1px solid #E5E5E5; + &__inside-content { + .#{$ns}-tab-list { + border-bottom: 1px solid #fd0000; padding-left: 15px; - .#{$ns}-tab{ + .#{$ns}-tab { font-weight: 300; } } - } + } + &-menu { + width: 240px; + } + &-button { + margin-right: 10px; + } + &__floating-footer { + // height: 50px; + position: fixed; + bottom: 0; + left: 220px; + right: 0; + background: #fff; + padding: 10px 18px; + border-top: 1px solid #ececec; + } } -.preferences__sidebar{ +.preferences__sidebar { background: #fdfdfd; position: fixed; left: 220px; @@ -30,30 +47,29 @@ max-width: 210px; height: 100%; - .sidebar-wrapper{ - + .sidebar-wrapper { } - &-head{ + &-head { display: flex; flex-direction: row; align-items: center; - border-bottom: 1px solid #E5E5E5; + border-bottom: 1px solid #e5e5e5; height: 70px; padding: 0 22px; - h2{ + h2 { font-size: 22px; font-weight: 200; margin: 0; } } - &-menu{ + &-menu { padding: 0; background: transparent; - .#{$ns}-menu-item{ + .#{$ns}-menu-item { padding: 10px 18px; font-size: 15px; font-weight: 300; @@ -61,3 +77,17 @@ } } } + +// Preference +//--------------------------------- +.preferences__inside-content--general { + .bp3-form-group { + margin: 25px 20px 20px; + .bp3-label { + min-width: 140px; + } + .bp3-form-content { + width: 250px; + } + } +}