mirror of
https://github.com/balzack/databag.git
synced 2025-04-21 00:55:16 +00:00
added listing page for adding contacts
This commit is contained in:
Roland Osborne
parent
979288d1fc
commit
8401a2295a
@ -12,6 +12,7 @@ import { Channels } from './channels/Channels';
|
||||
import { Cards } from './cards/Cards';
|
||||
import { Contact } from './contact/Contact';
|
||||
import { Profile } from './profile/Profile';
|
||||
import { Listing } from './listing/Listing';
|
||||
import { Account } from './account/Account';
|
||||
import { Welcome } from './welcome/Welcome';
|
||||
import { BottomNav } from './bottomNav/BottomNav';
|
||||
@ -40,6 +41,13 @@ export function Session() {
|
||||
actions.openAccount();
|
||||
actions.closeCards();
|
||||
actions.closeContact();
|
||||
actions.closeListing();
|
||||
}
|
||||
|
||||
const closeCards = () => {
|
||||
actions.closeCards();
|
||||
actions.closeContact();
|
||||
actions.closeListing();
|
||||
}
|
||||
|
||||
const openCards = () => {
|
||||
@ -48,7 +56,7 @@ export function Session() {
|
||||
actions.closeAccount();
|
||||
}
|
||||
|
||||
console.log("STATE", state);
|
||||
console.log(state);
|
||||
|
||||
return (
|
||||
<SessionWrapper>
|
||||
@ -68,7 +76,7 @@ console.log("STATE", state);
|
||||
)}
|
||||
{ state.contact && (
|
||||
<div class="reframe">
|
||||
<Contact guid={state.contactGuid} />
|
||||
<Contact close={actions.closeContact} guid={state.contactGuid} node={state.contactNode} />
|
||||
</div>
|
||||
)}
|
||||
{ state.profile && (
|
||||
@ -86,7 +94,11 @@ console.log("STATE", state);
|
||||
)}
|
||||
{ state.cards && (
|
||||
<div class="reframe">
|
||||
<Cards close={actions.closeCards} />
|
||||
<Cards closeCards={closeCards} openContact={actions.openContact} openListing={actions.openListing} />
|
||||
<Drawer title="Basic Drawer" placement="bottom" closable={false} visible={state.listing}
|
||||
onClose={actions.closeListing} getContainer={false} height={'80%'} style={{ position: 'absolute', overflow: 'hidden' }}>
|
||||
<Listing openContact={actions.openContact} />
|
||||
</Drawer>
|
||||
</div>
|
||||
)}
|
||||
{ (state.profile || state.account) && (
|
||||
@ -117,13 +129,17 @@ console.log("STATE", state);
|
||||
<Details cardId={state.cardId} conversationId={state.conversationId} />
|
||||
)}
|
||||
</Drawer>
|
||||
<Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20}>
|
||||
<Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20} push={state.contact}>
|
||||
{ state.cards && (
|
||||
<Cards close={actions.closeCards} />
|
||||
<Cards closeCards={closeCards} openContact={actions.openContact} openListing={actions.openListing} />
|
||||
)}
|
||||
<Drawer title="Basic Drawer" placement="bottom" closable={false} visible={state.listing}
|
||||
onClose={actions.closeListing} getContainer={false} height={'80%'} style={{ overflow: 'hidden', position: 'absolute' }}>
|
||||
<Listing openContact={actions.openContact} />
|
||||
</Drawer>
|
||||
<Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
|
||||
{ state.contact && (
|
||||
<Contact guid={state.contactGuid} />
|
||||
<Contact close={actions.closeContact} guid={state.contactGuid} node={state.contactNode} />
|
||||
)}
|
||||
</Drawer>
|
||||
</Drawer>
|
||||
@ -153,12 +169,17 @@ console.log("STATE", state);
|
||||
)}
|
||||
{ state.cards && (
|
||||
<div class="reframe">
|
||||
<Cards close={actions.closeCards} />
|
||||
<Cards openContact={actions.openContact} openListing={actions.openListing} />
|
||||
</div>
|
||||
)}
|
||||
{ state.listing && (
|
||||
<div class="reframe">
|
||||
<Listing openContact={actions.openContact} />
|
||||
</div>
|
||||
)}
|
||||
{ state.contact && (
|
||||
<div class="reframe">
|
||||
<Contact guid={state.contactGuid} />
|
||||
<Contact close={actions.closeContact} guid={state.contactGuid} node={state.contactNode} />
|
||||
</div>
|
||||
)}
|
||||
{ (state.profile || state.account) && (
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Input, List } from 'antd';
|
||||
import { Drawer, Input, List } from 'antd';
|
||||
import { CardsWrapper } from './Cards.styled';
|
||||
import { SortAscendingOutlined, DoubleRightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
import { useCards } from './useCards.hook';
|
||||
import { CardItem } from './cardItem/CardItem';
|
||||
|
||||
export function Cards({ close }) {
|
||||
export function Cards({ closeCards, openContact, openListing }) {
|
||||
|
||||
const { state, actions } = useCards();
|
||||
|
||||
@ -35,7 +35,7 @@ export function Cards({ close }) {
|
||||
)}
|
||||
{ state.display !== 'small' && (
|
||||
<div class="inline">
|
||||
<div class="dismiss" onClick={close} >
|
||||
<div class="dismiss" onClick={closeCards} >
|
||||
<DoubleRightOutlined />
|
||||
</div>
|
||||
</div>
|
||||
@ -44,18 +44,18 @@ export function Cards({ close }) {
|
||||
<div class="view">
|
||||
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
|
||||
renderItem={item => (
|
||||
<CardItem item={item} />
|
||||
<CardItem item={item} open={openContact} />
|
||||
)} />
|
||||
</div>
|
||||
{ state.display !== 'small' && (
|
||||
<div class="bar">
|
||||
<div class="add">
|
||||
<div class="add" onClick={openListing}>
|
||||
<UserOutlined />
|
||||
<div class="label">New Contact</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardsWrapper>
|
||||
</CardsWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ import { Logo } from 'logo/Logo';
|
||||
import { Tooltip } from 'antd';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
export function CardItem({ item }) {
|
||||
export function CardItem({ item, open }) {
|
||||
|
||||
const { state, actions } = useCardItem(item);
|
||||
const profile = item?.data?.cardProfile;
|
||||
@ -21,7 +21,7 @@ export function CardItem({ item }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<CardItemWrapper>
|
||||
<CardItemWrapper onClick={() => open(profile.guid, profile.node)}>
|
||||
<Logo url={state.logo} width={32} height={32} radius={8} />
|
||||
<div class="details">
|
||||
<div class="name">{ profile?.name }</div>
|
||||
|
||||
@ -10,8 +10,8 @@ export function useCards() {
|
||||
sorted: false,
|
||||
display: null,
|
||||
cards: [],
|
||||
busy: false }
|
||||
);
|
||||
busy: false
|
||||
});
|
||||
|
||||
const card = useContext(CardContext);
|
||||
const viewport = useContext(ViewportContext);
|
||||
@ -55,7 +55,7 @@ export function useCards() {
|
||||
const aUpdated = a?.data?.cardDetail?.statusUpdated;
|
||||
const bUpdated = b?.data?.cardDetail?.statusUpdated;
|
||||
|
||||
if ((aUpdated && !bUpdated) || aUpdated && bUpdated && aUpdated > bUpdated) {
|
||||
if ((aUpdated && !bUpdated) || (aUpdated && bUpdated && aUpdated > bUpdated)) {
|
||||
return -1;
|
||||
}
|
||||
return 1;
|
||||
|
||||
@ -49,8 +49,8 @@ export const ChannelsWrapper = styled.div`
|
||||
justify-content: center;
|
||||
background-color: ${Colors.formBackground};
|
||||
border-top: 1px solid ${Colors.divider};
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
export function Contact() {
|
||||
return <div>CONTACT</div>
|
||||
import { ContactWrapper } from './Contact.styled';
|
||||
|
||||
export function Contact({ close, guid, node }) {
|
||||
return <ContactWrapper />;
|
||||
}
|
||||
|
||||
|
||||
11
net/web/src/session/contact/Contact.styled.js
Normal file
11
net/web/src/session/contact/Contact.styled.js
Normal file
@ -0,0 +1,11 @@
|
||||
import styled from 'styled-components';
|
||||
import Colors from 'constants/Colors';
|
||||
|
||||
export const ContactWrapper = styled.div`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${Colors.profileForm};
|
||||
`
|
||||
|
||||
4
net/web/src/session/listing/Listing.jsx
Normal file
4
net/web/src/session/listing/Listing.jsx
Normal file
@ -0,0 +1,4 @@
|
||||
export function Listing({ openContact }) {
|
||||
return <div onClick={() => openContact('asdf', 'qwer')}>LISTING</div>
|
||||
}
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
import { useContext } from 'react';
|
||||
import { Button, Checkbox } from 'antd';
|
||||
import { AppContext } from 'context/AppContext';
|
||||
import { ViewportContext } from 'context/ViewportContext';
|
||||
import { Checkbox } from 'antd';
|
||||
import { ProfileWrapper } from './Profile.styled';
|
||||
import { useProfile } from './useProfile.hook';
|
||||
import { Logo } from 'logo/Logo';
|
||||
|
||||
@ -6,9 +6,13 @@ export function useSession() {
|
||||
|
||||
const [state, setState] = useState({
|
||||
cardUpdated: false,
|
||||
contactGuid: null,
|
||||
contactNode: null,
|
||||
listingNode: null,
|
||||
conversation: false,
|
||||
details: false,
|
||||
cards: false,
|
||||
listing: false,
|
||||
contact: false,
|
||||
profile: false,
|
||||
account: false,
|
||||
@ -58,6 +62,15 @@ export function useSession() {
|
||||
closeCards: () => {
|
||||
updateState({ cards: false });
|
||||
},
|
||||
openListing: (listingNode) => {
|
||||
updateState({ listing: true, listingNode });
|
||||
},
|
||||
closeListing: () => {
|
||||
updateState({ listing: false });
|
||||
},
|
||||
openContact: (contactGuid, contactNode) => {
|
||||
updateState({ contact: true, contactGuid, contactNode });
|
||||
},
|
||||
closeContact: () => {
|
||||
updateState({ contact: false });
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user