JournalEdit: add ColorPicker and imporve validation

Fixes #75

src/Journals/JournalEdit.tsx

@@ -16,6 +16,8 @@ import ConfirmationDialog from '../widgets/ConfirmationDialog';
 
 import * as EteSync from 'etesync';
 import { SyncInfo } from '../SyncGate';
+import ColorPicker from '../widgets/ColorPicker';
+import { defaultColor, colorHtmlToInt, colorIntToHtml } from '../journal-processors';
 
 interface PropsType {
   syncInfo: SyncInfo;
@@ -25,13 +27,23 @@ interface PropsType {
   onCancel: () => void;
 }
 
+interface FormErrors {
+  displayName?: string;
+  color?: string;
+}
+
 export default function JournalEdit(props: PropsType) {
+  const [errors, setErrors] = React.useState<FormErrors>({});
   const [showDeleteDialog, setShowDeleteDialog] = React.useState(false);
   const [info, setInfo] = React.useState<EteSync.CollectionInfo>();
+  const [selectedColor, setSelectedColor] = React.useState('');
 
   React.useEffect(() => {
     if (props.item !== undefined) {
       setInfo(props.item);
+      if (props.item.color) {
+        setSelectedColor(colorIntToHtml(props.item.color));
+      }
     } else {
       setInfo({
         uid: EteSync.genUid(),
@@ -48,10 +60,28 @@ export default function JournalEdit(props: PropsType) {
 
   function onSubmit(e: React.FormEvent<any>) {
     e.preventDefault();
+    const saveErrors: FormErrors = {};
+    const fieldRequired = 'This field is required!';
 
     const { onSave } = props;
-    const item = new EteSync.CollectionInfo(info);
 
+    const displayName = info?.displayName;
+    const color = colorHtmlToInt(selectedColor);
+
+    if (!displayName) {
+      saveErrors.displayName = fieldRequired;
+    }
+
+    if (selectedColor && !color) {
+      saveErrors.color = 'Must be of the form #RRGGBB or #RRGGBBAA or empty';
+    }
+
+    if (Object.keys(saveErrors).length > 0) {
+      setErrors(saveErrors);
+      return;
+    }
+
+    const item = new EteSync.CollectionInfo({ ...info, color: color });
     onSave(item, props.item);
   }
 
@@ -79,6 +109,20 @@ export default function JournalEdit(props: PropsType) {
     CALENDAR: 'Calendar',
     TASKS: 'Task List',
   };
+  let collectionColorBox: React.ReactNode;
+  switch (info.type) {
+    case 'CALENDAR':
+    case 'TASKS':
+      collectionColorBox = (
+        <ColorPicker
+          defaultColor={defaultColor}
+          color={selectedColor}
+          onChange={(color: string) => setSelectedColor(color)}
+          error={errors.color}
+        />
+      );
+      break;
+  }
 
   return (
     <>
@@ -108,6 +152,8 @@ export default function JournalEdit(props: PropsType) {
             onChange={(event: React.ChangeEvent<{ value: string }>) => setInfo({ ...info, displayName: event.target.value })}
             style={styles.fullWidth}
             margin="normal"
+            error={!!errors.displayName}
+            helperText={errors.displayName}
           />
           <TextField
             name="description"
@@ -117,6 +163,7 @@ export default function JournalEdit(props: PropsType) {
             style={styles.fullWidth}
             margin="normal"
           />
+          {collectionColorBox}
 
           <div style={styles.submit}>
             <Button