edit mode

client/src/common/components/eventTimes/EventTimes.jsx

@@ -6,6 +6,7 @@ export default function EventTimes(props) {
 
   return (
     <>
+      <DelayValue delay={delay} />
       <EditableTimer
         name='timeStart'
         updateValues={updateValues}
@@ -18,7 +19,6 @@ export default function EventTimes(props) {
         time={timeEnd}
         delay={delay}
       />
-      <DelayValue delay={delay} />
     </>
   );
 }

client/src/common/input/EditableTimer.jsx

@@ -6,7 +6,7 @@ import style from './EditableTimer.module.css';
 export default function EditableTimer(props) {
   const { name, updateValues, time, delay } = props;
   const [value, setValue] = useState('');
-  const [showValue, setShowValue] = useState('');
+  const [editing, setEditing] = useState(false);
 
   // prepare time fields
   useEffect(() => {
@@ -14,41 +14,34 @@ export default function EditableTimer(props) {
   }, [time, delay]);
 
   const handleSubmit = (submitedVal) => {
-    console.log('edit: on submit');
-
-    if (submitedVal === value) return;
-
-    updateValues(name, timeToDate(submitedVal));
     setValue(addAndFormat(time, delay));
+    setEditing(false);
+
+    const newTime = timeToDate(submitedVal);
+
+    // No need to update if it hasnt changed
+    if (newTime === value) return;
+    updateValues(name, newTime);
   };
 
   const showNormal = () => {
-    console.log('edit: on edit');
+    if (!editing) setValue(dateToTime(time));
-    setValue(dateToTime(time));
   };
 
   const handleChange = (submitedVal) => {
-    console.log('edit: change handler', submitedVal);
+    setEditing(true);
     setValue(submitedVal);
   };
 
-  const handleBlur = () => {
-    console.log('edit: onBlur');
-    setValue(addAndFormat(time, delay));
-  };
-
   return (
     <div className={style.time}>
       <Editable
-        // submitOnBlur={false}
+        onEdit={() => showNormal}
-        // onEdit={showNormal}
         onSubmit={(v) => handleSubmit(v)}
         onChange={(v) => handleChange(v)}
-        onBlur={(v) => handleBlur(v)}
         value={value}
         placeholder='--:--'
-        style={{ textAlign: 'center' }}
+        className={delay > 0 ? style.delayedEditable : style.editable}
-        className={delay > 0 && style.delayedEditable}
       >
         <EditablePreview />
         <EditableInput type='time' min='00:00' max='23:59' />

client/src/common/input/EditableTimer.module.css

@@ -6,6 +6,11 @@
   height: fit-content;
 }
 
+.editable,
+.delayedEditable {
+  text-align: center;
+}
+
 .delayedEditable {
   background-color: #ecc94b22;
 }
@@ -19,3 +24,4 @@
   text-align: center;
   border: 1px solid #0001;
 }
+

client/src/features/editors/list/Block.module.css

@@ -53,7 +53,7 @@
   padding-left: 1em;
 
   display: grid;
-  grid-template-columns: auto auto 3em 1fr auto;
+  grid-template-columns: 3em auto auto 1fr auto;
   justify-content: center;
   align-content: center;
   align-items: baseline;