Create GroupEdit
Ramzan
4 years ago
parent
2505650708
commit
6ab60f24ef
@ -0,0 +1,288 @@
|
|||||||
|
// SPDX-FileCopyrightText: © 2017 EteSync Authors
|
||||||
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import Button from "@material-ui/core/Button";
|
||||||
|
import TextField from "@material-ui/core/TextField";
|
||||||
|
import Select from "@material-ui/core/Select";
|
||||||
|
import MenuItem from "@material-ui/core/MenuItem";
|
||||||
|
import FormControl from "@material-ui/core/FormControl";
|
||||||
|
import InputLabel from "@material-ui/core/InputLabel";
|
||||||
|
import * as colors from "@material-ui/core/colors";
|
||||||
|
|
||||||
|
import IconDelete from "@material-ui/icons/Delete";
|
||||||
|
import IconCancel from "@material-ui/icons/Clear";
|
||||||
|
import IconSave from "@material-ui/icons/Save";
|
||||||
|
|
||||||
|
import ConfirmationDialog from "../widgets/ConfirmationDialog";
|
||||||
|
|
||||||
|
import { CachedCollection } from "../Pim/helpers";
|
||||||
|
|
||||||
|
import * as uuid from "uuid";
|
||||||
|
import * as ICAL from "ical.js";
|
||||||
|
|
||||||
|
import { ContactType } from "../pim-types";
|
||||||
|
|
||||||
|
import { History } from "history";
|
||||||
|
|
||||||
|
class ValueType {
|
||||||
|
public type: string;
|
||||||
|
public value: string;
|
||||||
|
|
||||||
|
constructor(type?: string, value?: string) {
|
||||||
|
this.type = type ? type : "home";
|
||||||
|
this.value = value ? value : "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PropsType {
|
||||||
|
collections: CachedCollection[];
|
||||||
|
initialCollection?: string;
|
||||||
|
item?: ContactType;
|
||||||
|
onSave: (contact: ContactType, collectionUid: string, originalContact?: ContactType) => Promise<void>;
|
||||||
|
onDelete: (contact: ContactType, collectionUid: string) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
history: History<any>;
|
||||||
|
allGroups: ContactType[];
|
||||||
|
}
|
||||||
|
|
||||||
|
class GroupEdit extends React.PureComponent<PropsType> {
|
||||||
|
public state: {
|
||||||
|
uid: string;
|
||||||
|
fn: string;
|
||||||
|
collectionUid: string;
|
||||||
|
showDeleteDialog: boolean;
|
||||||
|
collectionGroups: {};
|
||||||
|
showError: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(props: PropsType) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
uid: "",
|
||||||
|
fn: "",
|
||||||
|
collectionUid: "",
|
||||||
|
showDeleteDialog: false,
|
||||||
|
collectionGroups: {},
|
||||||
|
showError: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.props.item !== undefined) {
|
||||||
|
const group = this.props.item;
|
||||||
|
this.state.uid = group.uid;
|
||||||
|
this.state.fn = group.fn;
|
||||||
|
} else {
|
||||||
|
this.state.uid = uuid.v4();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.initialCollection) {
|
||||||
|
this.state.collectionUid = props.initialCollection;
|
||||||
|
} else if (props.collections[0]) {
|
||||||
|
this.state.collectionUid = props.collections[0].collection.uid;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.state.collectionGroups = this.getCollectionGroups(this.state.collectionUid);
|
||||||
|
|
||||||
|
this.onSubmit = this.onSubmit.bind(this);
|
||||||
|
this.getCollectionGroups = this.getCollectionGroups.bind(this);
|
||||||
|
this.handleChange = this.handleChange.bind(this);
|
||||||
|
this.handleCollectionChange = this.handleCollectionChange.bind(this);
|
||||||
|
this.handleInputChange = this.handleInputChange.bind(this);
|
||||||
|
this.handleValueTypeChange = this.handleValueTypeChange.bind(this);
|
||||||
|
this.addValueType = this.addValueType.bind(this);
|
||||||
|
this.removeValueType = this.removeValueType.bind(this);
|
||||||
|
this.onDeleteRequest = this.onDeleteRequest.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
public addValueType(name: string, _type?: string) {
|
||||||
|
const type = _type ? _type : "home";
|
||||||
|
this.setState((prevState) => {
|
||||||
|
const newArray = prevState[name].slice(0);
|
||||||
|
newArray.push(new ValueType(type));
|
||||||
|
return {
|
||||||
|
...prevState,
|
||||||
|
[name]: newArray,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public removeValueType(name: string, idx: number) {
|
||||||
|
this.setState((prevState) => {
|
||||||
|
const newArray = prevState[name].slice(0);
|
||||||
|
newArray.splice(idx, 1);
|
||||||
|
return {
|
||||||
|
...prevState,
|
||||||
|
[name]: newArray,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public handleValueTypeChange(name: string, idx: number, value: ValueType) {
|
||||||
|
this.setState((prevState) => {
|
||||||
|
const newArray = prevState[name].slice(0);
|
||||||
|
newArray[idx] = value;
|
||||||
|
return {
|
||||||
|
...prevState,
|
||||||
|
[name]: newArray,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public handleChange(name: string, value: string) {
|
||||||
|
this.setState({
|
||||||
|
[name]: value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public getCollectionGroups(collectionUid: string) {
|
||||||
|
const groups = {};
|
||||||
|
this.props.allGroups.forEach((group) => {
|
||||||
|
if (collectionUid === group.collectionUid) {
|
||||||
|
groups[group.fn] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return groups;
|
||||||
|
}
|
||||||
|
|
||||||
|
public handleCollectionChange(contact: any) {
|
||||||
|
const name = contact.target.name;
|
||||||
|
const collectionUid: string = contact.target.value;
|
||||||
|
this.handleChange(name, collectionUid);
|
||||||
|
this.setState({ "collectionGroups": this.getCollectionGroups(collectionUid) });
|
||||||
|
}
|
||||||
|
|
||||||
|
public handleInputChange(contact: any) {
|
||||||
|
const name = contact.target.name;
|
||||||
|
const value = contact.target.value;
|
||||||
|
this.handleChange(name, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
public onSubmit(e: React.FormEvent<any>) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const nameUsed = this.state.fn in this.state.collectionGroups;
|
||||||
|
if ((this.props.item && this.state.fn !== this.props.item.fn && nameUsed) || (!this.props.item && nameUsed)) {
|
||||||
|
this.setState({ showError: true });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const group = (this.props.item) ?
|
||||||
|
this.props.item.clone()
|
||||||
|
:
|
||||||
|
new ContactType(new ICAL.Component(["vcard", [], []]))
|
||||||
|
;
|
||||||
|
|
||||||
|
const comp = group.comp;
|
||||||
|
comp.updatePropertyWithValue("prodid", "-//iCal.js EteSync Web");
|
||||||
|
comp.updatePropertyWithValue("version", "4.0");
|
||||||
|
comp.updatePropertyWithValue("uid", this.state.uid);
|
||||||
|
comp.updatePropertyWithValue("rev", ICAL.Time.now());
|
||||||
|
comp.updatePropertyWithValue("kind", "group");
|
||||||
|
comp.updatePropertyWithValue("fn", this.state.fn.trim());
|
||||||
|
|
||||||
|
this.props.onSave(group, this.state.collectionUid, this.props.item)
|
||||||
|
.then(() => {
|
||||||
|
this.props.history.goBack();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public onDeleteRequest() {
|
||||||
|
this.setState({
|
||||||
|
showDeleteDialog: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const styles = {
|
||||||
|
form: {
|
||||||
|
},
|
||||||
|
fullWidth: {
|
||||||
|
width: "100%",
|
||||||
|
boxSizing: "border-box" as any,
|
||||||
|
},
|
||||||
|
submit: {
|
||||||
|
marginTop: 40,
|
||||||
|
marginBottom: 20,
|
||||||
|
textAlign: "right" as any,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<h2>
|
||||||
|
{this.props.item ? "Edit Group" : "New Group"}
|
||||||
|
</h2>
|
||||||
|
<form style={styles.form} onSubmit={this.onSubmit}>
|
||||||
|
<FormControl disabled={this.props.item !== undefined} style={styles.fullWidth}>
|
||||||
|
<InputLabel>
|
||||||
|
Saving to
|
||||||
|
</InputLabel>
|
||||||
|
<Select
|
||||||
|
name="collectionUid"
|
||||||
|
value={this.state.collectionUid}
|
||||||
|
onChange={this.handleCollectionChange}
|
||||||
|
>
|
||||||
|
{this.props.collections.map((x) => (
|
||||||
|
<MenuItem key={x.collection.uid} value={x.collection.uid}>{x.metadata.name}</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
name="fn"
|
||||||
|
placeholder="Name"
|
||||||
|
error={this.state.showError}
|
||||||
|
helperText="Group names must be unique"
|
||||||
|
style={{ marginTop: "2rem", ...styles.fullWidth }}
|
||||||
|
value={this.state.fn}
|
||||||
|
onChange={this.handleInputChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div style={styles.submit}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={this.props.onCancel}
|
||||||
|
>
|
||||||
|
<IconCancel style={{ marginRight: 8 }} />
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{this.props.item &&
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
style={{ marginLeft: 15, backgroundColor: colors.red[500], color: "white" }}
|
||||||
|
onClick={this.onDeleteRequest}
|
||||||
|
>
|
||||||
|
<IconDelete style={{ marginRight: 8 }} />
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
color="secondary"
|
||||||
|
style={{ marginLeft: 15 }}
|
||||||
|
disabled={this.state.fn.length === 0}
|
||||||
|
>
|
||||||
|
<IconSave style={{ marginRight: 8 }} />
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<ConfirmationDialog
|
||||||
|
title="Delete Confirmation"
|
||||||
|
labelOk="Delete"
|
||||||
|
open={this.state.showDeleteDialog}
|
||||||
|
onOk={() => this.props.onDelete(this.props.item!, this.props.initialCollection!)}
|
||||||
|
onCancel={() => this.setState({ showDeleteDialog: false })}
|
||||||
|
>
|
||||||
|
Are you sure you would like to delete this group?
|
||||||
|
</ConfirmationDialog>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GroupEdit;
|
||||||
Loading…
Reference in New Issue