Contacts: Add edit button to group list items

master
Ramzan 4 years ago
parent 88be50f215
commit e0e21cfbce

@ -120,7 +120,7 @@ interface PropsType {
collections: CachedCollection[];
initialCollection?: string;
item?: ContactType;
group?: boolean;
newGroup?: boolean;
onSave: (contact: ContactType, collectionUid: string, originalContact?: ContactType) => Promise<void>;
onDelete: (contact: ContactType, collectionUid: string) => void;
onCancel: () => void;
@ -305,7 +305,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
comp.updatePropertyWithValue("version", "4.0");
comp.updatePropertyWithValue("uid", this.state.uid);
comp.updatePropertyWithValue("rev", ICAL.Time.now());
if (this.props.group) {
if (this.props.newGroup) {
comp.updatePropertyWithValue("kind", "group");
}
@ -356,7 +356,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
}
if (!this.props.group && !this.state.group) {
if (!this.props.newGroup && !this.state.group) {
setProperties("tel", this.state.phone);
setProperties("email", this.state.email);
setProperties("adr", this.state.address);
@ -399,7 +399,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
return (
<React.Fragment>
<h2>
{this.props.item ? this.state.group ? "Edit Group" : "Edit Contact" : this.props.group ? "New Group" : "New Contact"}
{this.props.item ? this.state.group ? "Edit Group" : "Edit Contact" : this.props.newGroup ? "New Group" : "New Contact"}
</h2>
<form style={styles.form} onSubmit={this.onSubmit}>
<FormControl disabled={this.props.item !== undefined} style={styles.fullWidth}>
@ -417,7 +417,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
</Select>
</FormControl>
{this.props.group || this.state.group ?
{this.props.newGroup || this.state.group ?
<TextField
name="firstName"
placeholder="Name"

@ -119,7 +119,7 @@ export default function ContactsMain() {
onDelete={onItemDelete}
onCancel={onCancel}
history={history}
group
newGroup
/>
</Route>
<Route
@ -176,7 +176,7 @@ export default function ContactsMain() {
onDelete={onItemDelete}
onCancel={onCancel}
history={history}
group
newGroup
/>
</Route>
<Route

@ -68,6 +68,7 @@ export default function SearchableAddressBook(props: PropsType) {
filterByGroup={filterByGroup}
setFilterByGroup={setFilterByGroup}
newGroup={props.onNewGroupClick}
editGroup={props.onItemClick}
/>
</Grid>

@ -3,6 +3,7 @@ import * as React from "react";
import InboxIcon from "@material-ui/icons/Inbox";
import LabelIcon from "@material-ui/icons/LabelOutlined";
import AddIcon from "@material-ui/icons/Add";
import EditIcon from "@material-ui/icons/EditOutlined";
import IconButton from "@material-ui/core/IconButton";
@ -15,19 +16,27 @@ interface ListItemPropsType {
primaryText: string;
filterByGroup: string | undefined;
setFilterByGroup: (group: string | undefined) => void;
editGroup: () => void;
}
function SidebarListItem(props: ListItemPropsType) {
const { name, icon, primaryText, filterByGroup } = props;
const { name, icon, primaryText, filterByGroup, editGroup } = props;
const handleClick = () => props.setFilterByGroup(name);
const selected = name === filterByGroup;
return (
<ListItem
onClick={handleClick}
selected={name === filterByGroup}
selected={selected}
leftIcon={icon}
primaryText={primaryText}
secondaryAction={name && selected &&
<IconButton onClick={editGroup}>
<EditIcon />
</IconButton>
}
/>
);
}
@ -37,10 +46,11 @@ interface PropsType {
filterByGroup: string | undefined;
setFilterByGroup: (group: string | undefined) => void;
newGroup: () => void;
editGroup: (group: ContactType) => void;
}
export default React.memo(function Sidebar(props: PropsType) {
const { groups, filterByGroup, setFilterByGroup, newGroup } = props;
const { groups, filterByGroup, setFilterByGroup, newGroup, editGroup } = props;
const groupList = [...groups].sort((a, b) => a.fn.localeCompare(b.fn)).map((group) => (
<SidebarListItem
@ -50,6 +60,7 @@ export default React.memo(function Sidebar(props: PropsType) {
icon={<LabelIcon />}
filterByGroup={filterByGroup}
setFilterByGroup={setFilterByGroup}
editGroup={() => editGroup(group)}
/>
));
@ -61,6 +72,7 @@ export default React.memo(function Sidebar(props: PropsType) {
icon={<InboxIcon />}
filterByGroup={filterByGroup}
setFilterByGroup={setFilterByGroup}
editGroup={newGroup}
/>
<div style={{ display: "flex", justifyContent: "space-between" }}>

@ -6,6 +6,7 @@ import * as React from "react";
import { createStyles, makeStyles } from "@material-ui/core/styles";
import MuiList from "@material-ui/core/List";
import MuiListItem from "@material-ui/core/ListItem";
import MuiListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import MuiListSubheader from "@material-ui/core/ListSubheader";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
@ -47,6 +48,7 @@ interface ListItemPropsType {
nestedItems?: React.ReactNode[];
selected?: boolean;
secondaryTextColor?: "initial" | "inherit" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error";
secondaryAction?: React.ReactNode;
}
export const ListItem = React.memo(function ListItem(_props: ListItemPropsType) {
@ -64,6 +66,7 @@ export const ListItem = React.memo(function ListItem(_props: ListItemPropsType)
nestedItems,
selected,
secondaryTextColor,
secondaryAction,
} = _props;
const extraProps = (onClick || href) ? {
@ -94,6 +97,11 @@ export const ListItem = React.memo(function ListItem(_props: ListItemPropsType)
{rightIcon}
</ListItemIcon>
)}
{secondaryAction && (
<MuiListItemSecondaryAction>
{secondaryAction}
</MuiListItemSecondaryAction>
)}
</MuiListItem>
{nestedItems && (
<List className={classes.nested} disablePadding>

Loading…
Cancel
Save