From 51b0c96cf5071564b72b9dbda7bea8c1e8bd648e Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Thu, 23 Apr 2020 20:30:12 +0530 Subject: [PATCH 01/11] updated ui --- src/componets/MemberItem/MemberItem.js | 45 +++----------------- src/componets/MemberItem/MemberItem.style.js | 5 +-- 2 files changed, 6 insertions(+), 44 deletions(-) diff --git a/src/componets/MemberItem/MemberItem.js b/src/componets/MemberItem/MemberItem.js index 24513dd46..2133a4fae 100644 --- a/src/componets/MemberItem/MemberItem.js +++ b/src/componets/MemberItem/MemberItem.js @@ -21,30 +21,15 @@ class MemberItem extends Component { } render() { - const { classes, t, members, member, onChange, isSelected, isRoom, isAddMembers, isFullWidth, filter, - letterToShow, adminLabel, profile, fromContactDialog, getNameToShow, getUser, isCheckboxElem, + const { classes, t, members, member, onChange, isSelected, isRoom, isAddMembers, + letterToShow, adminLabel, profile, fromContactDialog, getNameToShow, isCheckboxElem } = this.props; let userOnlineStatus = false; - let settings = member.settings; - let note = ''; - if (member.tup === 'Contact' && member.status) { userOnlineStatus = checkUserStatus(member); } - if (member.tup === 'Member') { - const memberFromContacts = getUser(member.phone_id); - if (memberFromContacts && memberFromContacts.settings) { - settings = memberFromContacts.settings; - } - } - - if (settings && Array.isArray(settings)) { - const notes = settings.filter(el => el.key === 'CONTACT_NOTE')[0]; - note = notes ? notes.value ? notes.value : '' : ''; - } - const _members = members ? members : {}; const contactStatus = this.props.getStatus(member.phone_id); let tmp = member; @@ -74,7 +59,7 @@ class MemberItem extends Component { }
-

+

{displayName}

{member.nick && @@ -82,21 +67,11 @@ class MemberItem extends Component { {member.nick}

} - {member.description && filter && -

- {member.description} -

- } - {isAddMembers && isAlreadyMember && !note && + {isAddMembers && isAlreadyMember &&

{t('alreadyInGroup')}

} - {note && -

- {note} -

- }
{adminLabel && tmp.status === 'admin' &&

@@ -108,22 +83,13 @@ class MemberItem extends Component { {t('contact').toLowerCase()}

} - {/*} - checkedIcon={} - checked={isSelected || isAlreadyMember} - disabled={isAlreadyMember} - onChange={(e, value) => onChange(member, value)} - />*/} - {isCheckboxElem === false ? + { !isCheckboxElem ? } checkedIcon={} checked={isSelected || isAlreadyMember} disabled={isAlreadyMember} - /> : onChange(member, value)} /> } - ); } diff --git a/src/componets/MemberItem/MemberItem.style.js b/src/componets/MemberItem/MemberItem.style.js index 494369587..6ed76ac5e 100644 --- a/src/componets/MemberItem/MemberItem.style.js +++ b/src/componets/MemberItem/MemberItem.style.js @@ -26,9 +26,6 @@ export default theme => ({ color: theme.palette.themeColors.membersList.memberNameColor, //marginRight: 'auto' }, - memberLabelFullWidth: { - width: '100%', - }, usernameLabel: { //position: 'absolute', //top: 36, @@ -73,7 +70,7 @@ export default theme => ({ position: 'absolute', width: 8, height: 8, - left: 57, + left: 64, bottom: 10, borderRadius: '50%', zIndex: 2 -- GitLab From 4c2ba3e147eb35c70476ab7ecce2273c05063ab9 Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Thu, 23 Apr 2020 20:32:14 +0530 Subject: [PATCH 02/11] fix ui issue --- .../EventInvitation/InvitationScreen.js | 30 +++++++++++++++++-- .../EventInvitation/InvitationScreenStyle.js | 1 + 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/containers/EventInvitation/InvitationScreen.js b/src/containers/EventInvitation/InvitationScreen.js index 0d238b33c..e2c0dd85f 100644 --- a/src/containers/EventInvitation/InvitationScreen.js +++ b/src/containers/EventInvitation/InvitationScreen.js @@ -83,9 +83,9 @@ class InvitationScreen extends PureComponent { UNSAFE_componentWillReceiveProps(nextProps) { - console.log("nextProps"); - console.log(nextProps); - console.log(""); + // console.log("nextProps"); + // console.log(nextProps); + // console.log(""); this.setState({ eventProfileDetail: nextProps.eventProfileDetail @@ -122,6 +122,29 @@ class InvitationScreen extends PureComponent { }); } + if (nextProps.eventProfileDetailError !== null) { + + if (nextProps.eventProfileDetailError.data && nextProps.eventProfileDetailError.data.error) { + + this.setState({ + responseText: nextProps.eventProfileDetailError.data.error.message, + isEventSubmited: true + }); + + } else { + // this.props.actions.showToast({ + // text: this.props.t("eventSignup.updateInvitationErrorMsg"), + // duration: 2000, + // position: "bottom" + // }); + + this.setState({ + responseText: this.props.t("eventSignup.updateInvitationErrorMsg"), + isEventSubmited: true + }); + } + } + if (nextProps.updateInvitationResError !== null) { if (nextProps.updateInvitationResError.data && nextProps.updateInvitationResError.data.error) { @@ -443,6 +466,7 @@ const mapStateToProps = (state) => { return ({ eventProfileDetail: signupEventSelectors.getEventProfileDetail(state), + eventProfileDetailError: signupEventSelectors.getEventProfileDetailError(state), // isEventProfilePending: signupEventSelectors.getIsEventProfilePending(state), updateInvitationRes: signupEventSelectors.getUpdateInvitationRes(state), isUpdateEventInvitationPending: signupEventSelectors.getIsUpdateEventInvitationPending(state), diff --git a/src/containers/EventInvitation/InvitationScreenStyle.js b/src/containers/EventInvitation/InvitationScreenStyle.js index e7bd96fbd..8035c8c34 100644 --- a/src/containers/EventInvitation/InvitationScreenStyle.js +++ b/src/containers/EventInvitation/InvitationScreenStyle.js @@ -269,6 +269,7 @@ export default ( width:' fit-content', maxWidth: '100%', borderBottom:'none', + margin:"20px auto 0", '& tr': { display: "table-row", '& td': { -- GitLab From e0af6a6729983f5b9c6f839356c78d0594a54931 Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Thu, 23 Apr 2020 20:32:48 +0530 Subject: [PATCH 03/11] updated ui --- src/containers/MembersList/MembersList.js | 17 ++++++++++------- .../MembersList/MembersList.styles.js | 3 ++- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/containers/MembersList/MembersList.js b/src/containers/MembersList/MembersList.js index 58a3542ae..28964ace4 100644 --- a/src/containers/MembersList/MembersList.js +++ b/src/containers/MembersList/MembersList.js @@ -6,7 +6,7 @@ import stylesFunc from './MembersList.styles'; import { MemberItem } from '../../componets'; import { profileSelectors } from 'Resource/profile'; import { contactsSelectors } from 'Resource/contacts/index'; -import { userListSelectors } from '../../core/resource/userlist/index'; +import { ContextMenuProvider } from 'react-contexify'; import 'react-contexify/dist/ReactContexify.min.css'; const styles = theme => stylesFunc(theme); @@ -15,7 +15,6 @@ const mapStateToProps = state => { return { profile: profileSelectors.getUserProfile(state), getStatus: _phoneId => contactsSelectors.getContactStatusByPhoneId(state, _phoneId), - getUser: _phoneId => userListSelectors.getUserById(state, _phoneId), }; }; @@ -72,8 +71,8 @@ class MembersList extends Component { render() { const { - classes, contacts, members, selectMember, t, selectedMembers, showMemberDetails, isAddMembers, getUser, isFullWidth, - isRoom, fromDialog, fromContactDialog, fromCreateGroup, fromGroupCallEdit, adminLabel, profile, getStatus, filter, + classes, contacts, members, selectMember, t, selectedMembers, showMemberDetails, isAddMembers, + isRoom, fromDialog, fromContactDialog, fromCreateGroup, fromGroupCallEdit, adminLabel, profile, getStatus, filter, isCheckboxElem } = this.props; const letters = {}; @@ -88,10 +87,14 @@ class MembersList extends Component {
    {toLoopOver && toLoopOver.map(member => ( + // + isSelected={selectedMembers[isRoom ? member.id : member.phone_id] !== undefined} isAddMembers={isAddMembers} + onChange={selectMember} onClick={showMemberDetails} letterToShow={this.getLetterToShow(member, letters, isRoom)} + adminLabel={adminLabel} fromContactDialog={fromContactDialog} getStatus={getStatus} getNameToShow={this.getNameToShow} + isCheckboxElem={isCheckboxElem} + /> + // ))} {toLoopOver.length <= 0 && t &&
    diff --git a/src/containers/MembersList/MembersList.styles.js b/src/containers/MembersList/MembersList.styles.js index 05c20ddff..96a234181 100644 --- a/src/containers/MembersList/MembersList.styles.js +++ b/src/containers/MembersList/MembersList.styles.js @@ -11,7 +11,8 @@ export default theme => ({ }, list: { maxHeight: 'calc(100vh - 250px)', - maxWidth: 274 + paddingRight: '16px', + // maxWidth: 274 }, dialogList: { maxHeight: 'calc(100vh - 310px)', -- GitLab From 894fbfc8487a5262fbef48875766a4000bddbc65 Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Thu, 23 Apr 2020 20:33:27 +0530 Subject: [PATCH 04/11] updated function get event profile --- .../signupevent/SignupEventReducer.js | 12 ++++-- .../resource/signupevent/SignupEventSagas.js | 42 +++++++++++-------- .../signupevent/SignupEventSelectors.js | 2 + 3 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/core/resource/signupevent/SignupEventReducer.js b/src/core/resource/signupevent/SignupEventReducer.js index e839fc9fc..30f7f90d5 100644 --- a/src/core/resource/signupevent/SignupEventReducer.js +++ b/src/core/resource/signupevent/SignupEventReducer.js @@ -13,6 +13,7 @@ const initialState = { isEventProfilePending: false, // eventProfileRes: null, eventProfileDetail: null, + eventProfileDetailError: null, // participantsList: [], isEventHistoryPending: false, eventProfileData: null, @@ -107,6 +108,7 @@ const handleGetEventProfileRequest = state => { ...{ isEventProfilePending: true, eventProfileDetail: null, + eventProfileDetailError: null, updateInvitationRes: null, updateInvitationResError: null } @@ -124,14 +126,18 @@ const handleGetEventProfileSuccess = (state, payload) => { ...{ isEventProfilePending: false, eventProfileDetail: payload.eventProfileDetail, - // participantsList: payload.participantsList + eventProfileDetailError: null } }); } -const handleGetEventProfileError = state => ({ +const handleGetEventProfileError = (state, payload) => ({ ...state, - ...{ isEventProfilePending: false, eventProfileDetail: null } + ...{ + isEventProfilePending: false, + eventProfileDetail: null, + eventProfileDetailError: payload + } }); //getEventHistory diff --git a/src/core/resource/signupevent/SignupEventSagas.js b/src/core/resource/signupevent/SignupEventSagas.js index 58e67a9cf..64a763789 100644 --- a/src/core/resource/signupevent/SignupEventSagas.js +++ b/src/core/resource/signupevent/SignupEventSagas.js @@ -193,34 +193,42 @@ function* handleGetEventProfileRequest(payload) { console.log(accessToken); console.log(""); - const res = yield call(SignupEventService.getEventProfile, eventSignupManager, accountId, eventId, isParticipants, accessToken); - console.log('eventProfileRes', res); + try { + const res = yield call(SignupEventService.getEventProfile, eventSignupManager, accountId, eventId, isParticipants, accessToken); + + console.log('eventProfileRes', res); - if (res && res.error) { + if (res && res.error) { - const isExp = yield call(checkExpError, res, handleGetEventProfileRequest, action.payload); + const isExp = yield call(checkExpError, res, handleGetEventProfileRequest, action.payload); - if (res.data && res.data.error) { - console.log('[ERROR] -> getEventProfile', res.data.error.message); - } + if (res.data && res.data.error) { + console.log('[ERROR] -> getEventProfile', res.data.error.message); + } + + if (isExp) { + console.log('[ERROR] -> getEventProfile - Token expired'); + } + + yield put(actions.getEventProfileError(res)); - if (isExp) { - console.log('[ERROR] -> getEventProfile - Token expired'); } - return; - } else if (res && res.data && res.data.eventProfileData) { + if (res && res.data && res.data.eventProfileData) { - console.log('[RESULT] -> getEventProfile', res.data); + console.log('[RESULT] -> getEventProfile', res.data); - const { eventProfile, participantList } = res.data.eventProfileData; - eventProfileDetail = eventProfile; - participantsList = participantList; + const { eventProfile, participantList } = res.data.eventProfileData; + eventProfileDetail = eventProfile; + participantsList = participantList; - } + yield put(actions.getEventProfileSuccess({ eventProfileDetail, participantsList })); + } - yield put(actions.getEventProfileSuccess({ eventProfileDetail, participantsList })); + } catch(error){ + yield put(actions.getEventProfileError(error)); + } } } diff --git a/src/core/resource/signupevent/SignupEventSelectors.js b/src/core/resource/signupevent/SignupEventSelectors.js index 4600c7ebe..0fc7cf650 100644 --- a/src/core/resource/signupevent/SignupEventSelectors.js +++ b/src/core/resource/signupevent/SignupEventSelectors.js @@ -14,6 +14,7 @@ const getCreateEventSignupRes3 = state => state.signupEvent.createEventSignupRes const getEventProfileRes = state => state.signupEvent; const getEventProfileData = state => state.signupEvent.eventProfileData; const getEventProfileDetail = state => state.signupEvent.eventProfileDetail; +const getEventProfileDetailError = state => state.signupEvent.eventProfileDetailError; const getEventInvitationRes = state => state.signupEvent.eventInvitationDetatil; const getUpdateInvitationRes = state => state.signupEvent.updateInvitationRes; const getUpdateInvitationResError = state => state.signupEvent.updateInvitationResError; @@ -39,6 +40,7 @@ export default { getEventInvitationRes, getUpdateInvitationRes, getEventProfileDetail, + getEventProfileDetailError, getIsGetEventInvitationPending, getAccountsRes, getIsUpdateEventInvitationPending, -- GitLab From d15cdf2a4dcd0a10c9a272f8e249e8215bcdeeab Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Thu, 23 Apr 2020 20:33:56 +0530 Subject: [PATCH 05/11] fix log issue --- src/layouts/EventSignupHistory/EventSignupHistory.js | 6 +++--- src/layouts/EventSignupInvitation/EventSignupInvitation.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/layouts/EventSignupHistory/EventSignupHistory.js b/src/layouts/EventSignupHistory/EventSignupHistory.js index eaa3e0bef..b96552f9a 100644 --- a/src/layouts/EventSignupHistory/EventSignupHistory.js +++ b/src/layouts/EventSignupHistory/EventSignupHistory.js @@ -160,9 +160,9 @@ class EventSignupHistory extends Component { UNSAFE_componentWillReceiveProps(nextProps) { - console.log(""); - console.log("nextProps ", nextProps); - console.log(""); + // console.log(""); + // console.log("nextProps ", nextProps); + // console.log(""); this.setState({ eventHistoryRes: nextProps.eventHistoryRes, diff --git a/src/layouts/EventSignupInvitation/EventSignupInvitation.js b/src/layouts/EventSignupInvitation/EventSignupInvitation.js index 53400d06f..ee7cd5c6d 100644 --- a/src/layouts/EventSignupInvitation/EventSignupInvitation.js +++ b/src/layouts/EventSignupInvitation/EventSignupInvitation.js @@ -160,9 +160,9 @@ class EventSignupInvitation extends React.Component { UNSAFE_componentWillReceiveProps(nextProps) { - console.log("nextProps"); - console.log(nextProps); - console.log(""); + // console.log("nextProps"); + // console.log(nextProps); + // console.log(""); this.setState({ invitationDetails: nextProps.eventInvitationDetatil -- GitLab From 44f7d628b071cffd8e6b75b06676153aae7abd87 Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Thu, 23 Apr 2020 20:34:49 +0530 Subject: [PATCH 06/11] fixed some issues --- .../styles/EventSignupNew.styles.js | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/layouts/EventSignupNew/styles/EventSignupNew.styles.js b/src/layouts/EventSignupNew/styles/EventSignupNew.styles.js index e10916088..aa23b8866 100644 --- a/src/layouts/EventSignupNew/styles/EventSignupNew.styles.js +++ b/src/layouts/EventSignupNew/styles/EventSignupNew.styles.js @@ -26,7 +26,7 @@ export default (theme,backArrow, forwardArrow) => ({ } }, '& .react-datepicker-popper': { - width: '88%', + width: '78%', zIndex: 3, }, '& .react-datepicker__header': { @@ -223,7 +223,7 @@ export default (theme,backArrow, forwardArrow) => ({ textTransform: 'none', color: theme.palette.themeColors.scheduleMessage.textColor, transition: 'all 0.2s ease-out', - zIndex:'9', + zIndex:'0', }, // '&:before': { // top: 0, @@ -268,7 +268,8 @@ export default (theme,backArrow, forwardArrow) => ({ '&:after': {color:"#ffffffa3 !important"}, '& > .Select-control ': { backgroundColor:theme.palette.themeColors.disable.background, - cursor: 'not-allowed' + cursor: 'not-allowed', + zIndex:'-2', }, '& .Select-value':{ '& > .Select-value-label':{ @@ -375,7 +376,7 @@ export default (theme,backArrow, forwardArrow) => ({ textTransform: 'none', color: theme.palette.themeColors.scheduleMessage.textColor, transition: 'all 0.2s ease-out', - zIndex:'9', + zIndex:'-1', }, '&:before': { top: 0, @@ -400,7 +401,8 @@ export default (theme,backArrow, forwardArrow) => ({ '&:before, &:after': {color:"#ffffffa3 !important"}, '& > .Select-control ': { backgroundColor:theme.palette.themeColors.disable.background, - cursor: 'not-allowed' + cursor: 'not-allowed', + zIndex:'-2', }, '& .Select-value':{ '& > .Select-value-label':{ @@ -505,9 +507,9 @@ export default (theme,backArrow, forwardArrow) => ({ input: { width: '100%', '& textarea': { - maxHeight:'74px !important', - overflow: 'auto !important', - height:"auto !important", + // maxHeight:'74px !important', + // overflow: 'auto !important', + // height:"auto !important", scrollbarColor: theme.palette.themeColors.colors.scrolBarColor + ' rgb(0,0,0,0) !important', scrollbarWidth: 'thin !important', width: '100%', @@ -533,7 +535,7 @@ export default (theme,backArrow, forwardArrow) => ({ }, datePikerIcons: { position: 'relative', - zIndex: 1, + zIndex: -1, '& .left-icon': { position: 'absolute', top: -22, @@ -558,7 +560,8 @@ export default (theme,backArrow, forwardArrow) => ({ border: 'none', width: '100%', '& .react-datepicker__month-container': { - width: '100%' + width: '100%', + boxShadow:"0px 6px 20px 2px rgba(0,0,0,0.60)", } }, customDatePicker: { @@ -586,9 +589,13 @@ export default (theme,backArrow, forwardArrow) => ({ backgroundColor:theme.palette.themeColors.disable.background, color: "#ffffffa3", border:'none', - cursor: 'not-allowed' + cursor: 'not-allowed', + '&.datePikerIcons':{ + zIndex:'2' + } } }, + loadingSpinner:{position:'relative', zIndex:"999"}, eventSidebarWrap: { position: 'fixed', top: 129, -- GitLab From 570715e87c7722bb8d8bbc30fefe340940950b99 Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Fri, 24 Apr 2020 17:13:34 +0530 Subject: [PATCH 07/11] fix ui related issues --- src/componets/MemberItem/MemberItem.js | 45 ++++++++++++++++--- src/componets/MemberItem/MemberItem.style.js | 5 ++- .../SignupEventInvitationRightPanel.js | 1 - 3 files changed, 44 insertions(+), 7 deletions(-) diff --git a/src/componets/MemberItem/MemberItem.js b/src/componets/MemberItem/MemberItem.js index 2133a4fae..24513dd46 100644 --- a/src/componets/MemberItem/MemberItem.js +++ b/src/componets/MemberItem/MemberItem.js @@ -21,15 +21,30 @@ class MemberItem extends Component { } render() { - const { classes, t, members, member, onChange, isSelected, isRoom, isAddMembers, - letterToShow, adminLabel, profile, fromContactDialog, getNameToShow, isCheckboxElem + const { classes, t, members, member, onChange, isSelected, isRoom, isAddMembers, isFullWidth, filter, + letterToShow, adminLabel, profile, fromContactDialog, getNameToShow, getUser, isCheckboxElem, } = this.props; let userOnlineStatus = false; + let settings = member.settings; + let note = ''; + if (member.tup === 'Contact' && member.status) { userOnlineStatus = checkUserStatus(member); } + if (member.tup === 'Member') { + const memberFromContacts = getUser(member.phone_id); + if (memberFromContacts && memberFromContacts.settings) { + settings = memberFromContacts.settings; + } + } + + if (settings && Array.isArray(settings)) { + const notes = settings.filter(el => el.key === 'CONTACT_NOTE')[0]; + note = notes ? notes.value ? notes.value : '' : ''; + } + const _members = members ? members : {}; const contactStatus = this.props.getStatus(member.phone_id); let tmp = member; @@ -59,7 +74,7 @@ class MemberItem extends Component { }
    -

    +

    {displayName}

    {member.nick && @@ -67,11 +82,21 @@ class MemberItem extends Component { {member.nick}

    } - {isAddMembers && isAlreadyMember && + {member.description && filter && +

    + {member.description} +

    + } + {isAddMembers && isAlreadyMember && !note &&

    {t('alreadyInGroup')}

    } + {note && +

    + {note} +

    + }
    {adminLabel && tmp.status === 'admin' &&

    @@ -83,13 +108,22 @@ class MemberItem extends Component { {t('contact').toLowerCase()}

    } - { !isCheckboxElem ? + {/*} + checkedIcon={} + checked={isSelected || isAlreadyMember} + disabled={isAlreadyMember} + onChange={(e, value) => onChange(member, value)} + />*/} + {isCheckboxElem === false ? } checkedIcon={} checked={isSelected || isAlreadyMember} disabled={isAlreadyMember} + /> : onChange(member, value)} /> } +
    ); } diff --git a/src/componets/MemberItem/MemberItem.style.js b/src/componets/MemberItem/MemberItem.style.js index 6ed76ac5e..494369587 100644 --- a/src/componets/MemberItem/MemberItem.style.js +++ b/src/componets/MemberItem/MemberItem.style.js @@ -26,6 +26,9 @@ export default theme => ({ color: theme.palette.themeColors.membersList.memberNameColor, //marginRight: 'auto' }, + memberLabelFullWidth: { + width: '100%', + }, usernameLabel: { //position: 'absolute', //top: 36, @@ -70,7 +73,7 @@ export default theme => ({ position: 'absolute', width: 8, height: 8, - left: 64, + left: 57, bottom: 10, borderRadius: '50%', zIndex: 2 diff --git a/src/componets/SignupEventComponents/SignupEventInvitation/SignupEventInvitationRightPanel/SignupEventInvitationRightPanel.js b/src/componets/SignupEventComponents/SignupEventInvitation/SignupEventInvitationRightPanel/SignupEventInvitationRightPanel.js index b57e14262..856e1b405 100644 --- a/src/componets/SignupEventComponents/SignupEventInvitation/SignupEventInvitationRightPanel/SignupEventInvitationRightPanel.js +++ b/src/componets/SignupEventComponents/SignupEventInvitation/SignupEventInvitationRightPanel/SignupEventInvitationRightPanel.js @@ -84,7 +84,6 @@ class SignupEventInvitationRightPanel extends React.Component { return ( - {title} Start : {moment(startDate + " " + startTime).format("DD-MMM-YYYY hh:mm A")}
    End : {moment(endDate + " " + endTime).format("DD-MMM-YYYY hh:mm A")} -- GitLab From 2d47f2fc41477adf5e4633798557e54fc5e232c2 Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Fri, 24 Apr 2020 17:14:15 +0530 Subject: [PATCH 08/11] fix ui related issues --- src/containers/MembersList/MembersList.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/containers/MembersList/MembersList.js b/src/containers/MembersList/MembersList.js index 28964ace4..4c098d28c 100644 --- a/src/containers/MembersList/MembersList.js +++ b/src/containers/MembersList/MembersList.js @@ -6,7 +6,7 @@ import stylesFunc from './MembersList.styles'; import { MemberItem } from '../../componets'; import { profileSelectors } from 'Resource/profile'; import { contactsSelectors } from 'Resource/contacts/index'; -import { ContextMenuProvider } from 'react-contexify'; +import { userListSelectors } from '../../core/resource/userlist/index'; import 'react-contexify/dist/ReactContexify.min.css'; const styles = theme => stylesFunc(theme); @@ -15,6 +15,7 @@ const mapStateToProps = state => { return { profile: profileSelectors.getUserProfile(state), getStatus: _phoneId => contactsSelectors.getContactStatusByPhoneId(state, _phoneId), + getUser: _phoneId => userListSelectors.getUserById(state, _phoneId), }; }; @@ -71,7 +72,7 @@ class MembersList extends Component { render() { const { - classes, contacts, members, selectMember, t, selectedMembers, showMemberDetails, isAddMembers, + classes, contacts, members, selectMember, t, selectedMembers, showMemberDetails, isAddMembers, getUser, isFullWidth, isRoom, fromDialog, fromContactDialog, fromCreateGroup, fromGroupCallEdit, adminLabel, profile, getStatus, filter, isCheckboxElem } = this.props; @@ -87,14 +88,10 @@ class MembersList extends Component {
      {toLoopOver && toLoopOver.map(member => ( - // - // + isSelected={selectedMembers[isRoom ? member.id : member.phone_id] !== undefined} isAddMembers={isAddMembers} getUser={getUser} + onChange={selectMember} onClick={showMemberDetails} letterToShow={this.getLetterToShow(member, letters, isRoom)} isFullWidth={isFullWidth} + adminLabel={adminLabel} fromContactDialog={fromContactDialog} getStatus={getStatus} getNameToShow={this.getNameToShow} isCheckboxElem={isCheckboxElem} /> ))} {toLoopOver.length <= 0 && t &&
      -- GitLab From 9691b7c6c9605264f4b3767ca07ff872caa7777e Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Fri, 24 Apr 2020 17:14:52 +0530 Subject: [PATCH 09/11] fix new signup redirection issue --- src/layouts/EventSignupNew/EventSignupNew.js | 100 +++++++++++------- .../styles/EventSignupNew.styles.js | 7 +- .../subcomponents/DatePicker.js | 3 +- 3 files changed, 67 insertions(+), 43 deletions(-) diff --git a/src/layouts/EventSignupNew/EventSignupNew.js b/src/layouts/EventSignupNew/EventSignupNew.js index e7a9c87f0..69ffe5bc3 100644 --- a/src/layouts/EventSignupNew/EventSignupNew.js +++ b/src/layouts/EventSignupNew/EventSignupNew.js @@ -128,7 +128,7 @@ class EventSignupNew extends Component { } async componentDidMount() { - this.setDefaultState(); + this.setDefaulTimezone(); this.setDefaultStartTime(); this.setDefaultEndTime(); const { clearStore } = this.props.actions; @@ -154,6 +154,7 @@ class EventSignupNew extends Component { } ); } else { + //await this.props.navigateToSignupEvent( "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "" ); } } @@ -216,23 +217,22 @@ class EventSignupNew extends Component { displayCancelModal: true, pathToRedirect: redirectPath }); - return false; } - return null; }; toggleModal = () => { const { displayCancelModal } = this.state; this.setState({ displayCancelModal: !displayCancelModal }); }; - discardChanges = () => { + discardChanges = async () => { const { router } = this.props; const { pathToRedirect } = this.state; this.toggleModal(); - this.setState({ shouldLeave: true }, () => { + this.setState({ shouldLeave: true }, async () => { if (pathToRedirect) { + await this.setDefaultState(); router.push(pathToRedirect); } else { router.goBack(); @@ -240,6 +240,55 @@ class EventSignupNew extends Component { }); }; setDefaultState = () => { + this.setState({ + displayCancelModal: false, + historyPage: true, + calendar: "", + isTitleEmptyErr: false, + //add by Bheem + isLoader: false, + editMode: false, + editModeInternalUse: false, + isCreateEventPending: false, + isDisabledTimes: false, + eventTitle: "", + eventId: "", + eventTitle: "", + eventDesc: "", + eventAddFormStep: 1, + backBtnStep: 0, + isPublishTs: 0, + saveAndNxtBtn: false, + isSelectedParticipents: false, + isSchedule: false, + isReminder: false, + isMultiTimeSlot: false, + notifyOnUpdate: false, + showEventSaveModal: false, + showPublishModal: false, + showScheduleLaterModal: false, + showLocationModal: false, + displayCancelModal: false, + isNotifyAdmin: false, + historyPage: false, + timeslotTitle: "", + reminder: { value: "", label: "", ms: 0 }, + timezone: { value: "", label: "" }, + scheduleTimezone: { value: "", label: "" }, + location: { lat: "", lng: "", latitude: "", longitude: "", address: "" }, + inviteBy: "by_contacts", + inviteNumbers: [], + inviteEmails: [], + inviteUsers: [], + inviteUsersTmp: [], + timeSlotArr: [], + accountsDetails: this.props.accountsDetails + }); + this.setDefaulTimezone(); + this.setDefaultStartTime(); + this.setDefaultEndTime(); + }; + setDefaulTimezone = () => { const tz = this.getTimeZone(null); this.setState({ timezone: tz, @@ -1317,6 +1366,9 @@ class EventSignupNew extends Component { } }; nextStep = () => { + if(this.state.shouldLeave){ + return; + } let step = this.state.eventAddFormStep; step = step >= 3 ? step : step + 1; this.setState({ eventAddFormStep: step, isLoader: false }); @@ -1391,47 +1443,12 @@ class EventSignupNew extends Component { }; goToNewSignup = async () => { await this.setDefaultState(); - this.setDefaultStartTime(); - this.setDefaultEndTime(); this.setState({ displayCancelModal: false, historyPage: true, - calendar: "", - isLoader: false, editMode: false, editModeInternalUse: false, - isCreateEventPending: false, - eventTitle: "", - eventId: "", - eventTitle: "", - eventDesc: "", - eventAddFormStep: 1, - backBtnStep: 0, - saveAndNxtBtn: false, - publishedTs: 0, - isSelectedParticipents: false, - isSchedule: false, - isReminder: false, - isMultiTimeSlot: false, - notifyOnUpdate: false, - showEventSaveModal: false, - showPublishModal: false, - showScheduleLaterModal: false, - showLocationModal: false, - displayCancelModal: false, - isNotifyAdmin: false, - timeslotTitle: "", - reminder: { value: "", label: "", ms: 0 }, - timezone: { value: "", label: "" }, - scheduleTimezone: { value: "", label: "" }, - location: { lat: "", lng: "", latitude: "", longitude: "", address: "" }, - inviteBy: "by_contacts", - inviteNumbers: [], - inviteEmails: [], - inviteUsers: [], - inviteUsersTmp: [], - timeSlotArr: [], - accountsDetails: this.props.accountsDetails }, () => { + }, () => { browserHistory.push("/event/newsignup"); }); @@ -1848,6 +1865,7 @@ class EventSignupNew extends Component { locale={locale} isEdit={isEdit} isDisabled={isDisabledTimes} + className={'endDateTime'} /> ({ background: theme.palette.themeColors.exportCsvPanel.datePickerBackground, border: 'none', width: '100%', + '&.endDateTime':{ + position:'absolute', + overflow:'hidden', + top:'0', + }, '& .react-datepicker__month-container': { width: '100%', boxShadow:"0px 6px 20px 2px rgba(0,0,0,0.60)", @@ -1029,6 +1034,6 @@ export default (theme,backArrow, forwardArrow) => ({ color: theme.palette.themeColors.colors.text16, }, }, - + }); diff --git a/src/layouts/EventSignupNew/subcomponents/DatePicker.js b/src/layouts/EventSignupNew/subcomponents/DatePicker.js index 5f8a41a42..c302ccd13 100644 --- a/src/layouts/EventSignupNew/subcomponents/DatePicker.js +++ b/src/layouts/EventSignupNew/subcomponents/DatePicker.js @@ -28,7 +28,8 @@ class DatePicker extends Component { className={`${this.props.classes.customDatePicker} ${this.props.isDisabled ? 'disableField' : 'show'}`} forceShowMonthNavigation={true} - calendarClassName={this.props.classes.customDatePickerCalendar} + // calendarClassName={this.props.classes.customDatePickerCalendar} + calendarClassName={`${this.props.classes.customDatePickerCalendar} ${this.props.className ? this.props.className : ''}`} popperPlacement={this.props.isEdit ? 'top-start' : 'bottom-start'} disabled={this.props.isDisabled} /> -- GitLab From 320390e0d0dc08b9254aba139c8fc90a46c3b774 Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Fri, 24 Apr 2020 18:24:26 +0530 Subject: [PATCH 10/11] resolved table ui issue --- src/containers/EventInvitation/InvitationScreenStyle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/EventInvitation/InvitationScreenStyle.js b/src/containers/EventInvitation/InvitationScreenStyle.js index 8035c8c34..a2586c55a 100644 --- a/src/containers/EventInvitation/InvitationScreenStyle.js +++ b/src/containers/EventInvitation/InvitationScreenStyle.js @@ -265,7 +265,7 @@ export default ( color: theme.palette.themeColors.table.color, border: "1px solid #454d55", overflowX: 'auto', - display:'block', + // display:'block', width:' fit-content', maxWidth: '100%', borderBottom:'none', -- GitLab From 1c4d2e4b3bb60076c79ab33ff2659e4700109e43 Mon Sep 17 00:00:00 2001 From: Chetna Joshi Date: Fri, 24 Apr 2020 19:56:00 +0530 Subject: [PATCH 11/11] added custom class for event contact list --- src/containers/MembersList/MembersList.js | 121 ++++++++++++------ .../MembersList/MembersList.styles.js | 51 +++++--- 2 files changed, 120 insertions(+), 52 deletions(-) diff --git a/src/containers/MembersList/MembersList.js b/src/containers/MembersList/MembersList.js index 4c098d28c..c7e8c294e 100644 --- a/src/containers/MembersList/MembersList.js +++ b/src/containers/MembersList/MembersList.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import CustomScroll from 'react-custom-scrollbars'; import { connect } from 'react-redux'; import { withStyles } from '@material-ui/styles'; import stylesFunc from './MembersList.styles'; @@ -7,10 +6,10 @@ import { MemberItem } from '../../componets'; import { profileSelectors } from 'Resource/profile'; import { contactsSelectors } from 'Resource/contacts/index'; import { userListSelectors } from '../../core/resource/userlist/index'; +import { List, AutoSizer } from 'react-virtualized'; import 'react-contexify/dist/ReactContexify.min.css'; const styles = theme => stylesFunc(theme); - const mapStateToProps = state => { return { profile: profileSelectors.getUserProfile(state), @@ -23,7 +22,33 @@ class MembersList extends Component { constructor(props) { super(props); - this.state = { toLoopOver: [] }; + this.state = {}; + this.listRef = React.createRef(); + } + + componentDidUpdate(prevProps, prevState) { + if (prevProps.members && this.props.members) { + const prevCount = Object.keys(prevProps.members).length; + const currentCount = Object.keys(this.props.members).length; + if (prevCount !== currentCount) { + this.updateGrid(); + return; + } + } + + if (prevProps.selectedMembers && this.props.selectedMembers) { + const prevCount = Object.keys(prevProps.selectedMembers).length; + const currentCount = Object.keys(this.props.selectedMembers).length; + if (prevCount !== currentCount) { + this.updateGrid(); + } + } + } + + updateGrid = () => { + if (this.listRef && this.listRef.current) { + this.listRef.current.forceUpdateGrid(); + } } sortList = (contactsObj, isRoom) => { @@ -39,22 +64,16 @@ class MembersList extends Component { }); return list; - }; + } - getLetterToShow = (member, letters, isRoom) => { + getLetterToShow = (member, isRoom) => { let letter = this.getNameToShow(member, isRoom) .trim() .substring(0, 1) .toUpperCase(); - if (!letters[letter]) { - letters[letter] = letter; - } else { - letter = null; - } - return letter; - }; + } getNameToShow = (member, isRoom) => { const { name, alias, names, surnames } = member; @@ -68,43 +87,71 @@ class MembersList extends Component { } return `${names} ${surnames}`; - }; + } - render() { + renderMemberItem = ({ index, style }) => { const { - classes, contacts, members, selectMember, t, selectedMembers, showMemberDetails, isAddMembers, getUser, isFullWidth, - isRoom, fromDialog, fromContactDialog, fromCreateGroup, fromGroupCallEdit, adminLabel, profile, getStatus, filter, isCheckboxElem + members, selectMember, t, selectedMembers, showMemberDetails, isAddMembers, isFullWidth, + isRoom, fromContactDialog, adminLabel, profile, getStatus, filter, getUser, contacts, } = this.props; - const letters = {}; - let toLoopOver = contacts ? contacts : members; - - if (toLoopOver) { - toLoopOver = this.sortList(toLoopOver, isRoom); + const sortedLit = this.sortList(contacts ? contacts : members, isRoom); + const member = sortedLit[index]; + const prevMember = sortedLit[index - 1]; + const currentLetter = this.getLetterToShow(member, isRoom); + let letterToShow = null; + + if (prevMember) { + const prevLetter = this.getLetterToShow(prevMember, isRoom); + if (prevLetter !== currentLetter) { + letterToShow = currentLetter; + } + } else { + letterToShow = currentLetter; } + return ( +
      + +
      + ); + } + + render() { + const { classes, contacts, members, t, fromDialog, fromContactDialog, fromCreateGroup, fromGroupCallEdit } = this.props; + let list = contacts ? contacts : members; + const listLen = Object.keys(list).length; + + const isClass = isCheckboxElem !== undefined ? false : true; return (
      - -
        - {toLoopOver && toLoopOver.map(member => ( - - ))} - {toLoopOver.length <= 0 && t && -
        -

        {t('createGroup.noSearchResult')}

        -
        - } -
      -       +
      + {listLen > 0 && +
      + + {({ width, height }) => ( + + )} + +
      + } + {listLen === 0 && t && +
      +

      {t('createGroup.noSearchResult')}

      +
      + } +
      ); } } export default connect( - mapStateToProps + mapStateToProps, + null, )(withStyles(styles)(MembersList)); diff --git a/src/containers/MembersList/MembersList.styles.js b/src/containers/MembersList/MembersList.styles.js index 96a234181..f4ba371b4 100644 --- a/src/containers/MembersList/MembersList.styles.js +++ b/src/containers/MembersList/MembersList.styles.js @@ -1,34 +1,55 @@ export default theme => ({ wrapper: { - minWidth: '100%', borderTop: '1px solid ' + theme.palette.themeColors.colors.text11, marginTop: 17, + scrollbarColor: `${theme.palette.themeColors.colors.scrollColor} transparent !important`, + '& .box': { + overflowX: 'hidden !important', + overflowY: 'auto !important' + }, + '& *::-webkit-scrollbar': { + WebkitAppearance: 'none', + width: 12, + }, + '& *::-webkit-scrollbar-thumb': { + borderRadius: 10, + backgroundColor: theme.palette.themeColors.colors.scrollColor, + width: 12, + minHeight: 200, + boxShadow: 'none', + }, '& > div': { - position: 'absolute !important', - width: '95% !important', - height: '83% !important', - } + position: 'absolute', + width: '100%', + height: 'calc(100% - 130px)', + }, + }, + listWrap: { + height: '100%', + display: 'flex', + flexDirection: 'column', }, list: { + maxWidth: 293, + }, + ulList: { maxHeight: 'calc(100vh - 250px)', paddingRight: '16px', - // maxWidth: 274 }, dialogList: { - maxHeight: 'calc(100vh - 310px)', - maxWidth: '330px' - }, - marginList: { - marginRight: 20 + maxWidth: 360, }, callEditList: { - maxWidth: 260 + maxWidth: 275, + }, + marginList: { + marginRight: 20, }, noSearchResult: { textAlign: 'center', marginTop: 15, '& p': { - color: '#494949' - } - } + color: '#494949', + }, + }, }); \ No newline at end of file -- GitLab