#58 Custom Card Config Editor: refactor table. fix data sync between …

…editor and text
Zuehlke · Mar 18, 2023 · e65a835 · e65a835
1 parent 674700d
commit e65a835
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 42 deletions.
diff --git a/client/app/components/Settings/CardConfigEditor.js b/client/app/components/Settings/CardConfigEditor.js
@@ -20,14 +20,20 @@ import {
 export const CardConfigEditor = ({cardConfig, onSave, t}) => {
   const [validationError, setValidationError] = useState('');
   const [internalCC, setInternalCC] = useState(addIds(cardConfig));
-  const [internalCcString, setInternalCcString] = useState(JSON.stringify(cardConfig, null, 4));
+  const [internalCcString, setInternalCcString] = useState(
+    deriveInternalCcStringFromCC(cardConfig)
+  );
   const [showTextEditor, setShowTextEditor] = useState(false);
 
   useEffect(() => {
     setInternalCC(addIds(cardConfig));
-    setInternalCcString(JSON.stringify(cardConfig, null, 4));
+    setInternalCcString(deriveInternalCcStringFromCC(cardConfig));
   }, [cardConfig]);
 
+  function deriveInternalCcStringFromCC(cc) {
+    return JSON.stringify(stripIds(cc), null, 4);
+  }
+
   return (
     <StyledCadConfigEditor>
       <div className="pure-g">
@@ -54,32 +60,37 @@ export const CardConfigEditor = ({cardConfig, onSave, t}) => {
       {showTextEditor && <StyledTextarea value={internalCcString} onChange={onTextChange} />}
 
       {!showTextEditor && (
-        <StyledItems>
-          <StyledCCTableHeader>
-            <StyledCCTableCell>{t('label')}</StyledCCTableCell>
-            <StyledCCTableCell>{t('value')}</StyledCCTableCell>
-            <StyledCCTableCell style={{width: 'auto', minWidth: '160px', flexGrow: 1}}>
-              {t('color')}
-            </StyledCCTableCell>
-            <StyledCCTableCell style={{width: '25%'}}></StyledCCTableCell>
-          </StyledCCTableHeader>
-
-          {internalCC.map((ccItem, index) => (
-            <CardConfigEditorItem
-              key={ccItem.id}
-              item={ccItem}
-              isFirst={index === 0}
-              isLast={index === internalCC.length - 1}
-              onChange={onChangedItem.bind(undefined, index)}
-              onDelete={onDelete.bind(undefined, index)}
-              onUp={onUp.bind(undefined, index)}
-              onDown={onDown.bind(undefined, index)}
-            />
-          ))}
-          <AddItemButton className="pure-button" type="button" onClick={onAdd}>
-            <i className="icon-plus"></i> {t('addCard')}
-          </AddItemButton>
-        </StyledItems>
+        <React.Fragment>
+          <StyledItems>
+            <StyledCCTableHeader>
+              <StyledCCTableCell>{t('label')}</StyledCCTableCell>
+              <StyledCCTableCell>{t('value')}</StyledCCTableCell>
+              <StyledCCTableCell style={{width: 'auto', minWidth: '160px', flexGrow: 1}}>
+                {t('color')}
+              </StyledCCTableCell>
+              <StyledCCTableCell style={{width: '25%'}}></StyledCCTableCell>
+            </StyledCCTableHeader>
+
+            {internalCC.map((ccItem, index) => (
+              <CardConfigEditorItem
+                key={ccItem.id}
+                item={ccItem}
+                isFirst={index === 0}
+                isLast={index === internalCC.length - 1}
+                onChange={onChangedItem.bind(undefined, index)}
+                onDelete={onDelete.bind(undefined, index)}
+                onUp={onUp.bind(undefined, index)}
+                onDown={onDown.bind(undefined, index)}
+              />
+            ))}
+          </StyledItems>
+
+          <div className="pure-g">
+            <AddItemButton className="pure-button" type="button" onClick={onAdd}>
+              <i className="icon-plus"></i> {t('addCard')}
+            </AddItemButton>
+          </div>
+        </React.Fragment>
       )}
 
       {validationError && <ErrorMsg>{validationError}</ErrorMsg>}
@@ -123,6 +134,7 @@ export const CardConfigEditor = ({cardConfig, onSave, t}) => {
     }
 
     setInternalCC(cc);
+    setInternalCcString(deriveInternalCcStringFromCC(cc));
   }
 
   function onChangedItem(index, changedItem) {

diff --git a/client/app/components/Settings/CardConfigEditorItem.js b/client/app/components/Settings/CardConfigEditorItem.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {StyledCCTableCell, StyledColorBadge} from './_styled';
+import {StyledCCTableCell, StyledCCTableRow, StyledColorBadge} from './_styled';
 
 /**
  * one item in the editor. consists of three input fields for label,value,color as well as "move" and "delete" buttons
  */
 const CardConfigEditorItem = ({item, isLast, isFirst, onChange, onUp, onDown, onDelete}) => {
   return (
-    <React.Fragment>
+    <StyledCCTableRow>
       <StyledCCTableCell>
         <input type="text" defaultValue={item.label} onBlur={onValueChange.bind(this, 'label')} />
       </StyledCCTableCell>
@@ -20,11 +20,11 @@ const CardConfigEditorItem = ({item, isLast, isFirst, onChange, onUp, onDown, on
           onBlur={onValueChange.bind(this, 'value')}
         />
       </StyledCCTableCell>
-      <StyledCCTableCell style={{width: 'auto', flexGrow: 1}}>
+      <StyledCCTableCell style={{width: 'auto'}}>
         <StyledColorBadge color={item.color} />
         <input type="text" defaultValue={item.color} onBlur={onValueChange.bind(this, 'color')} />
       </StyledCCTableCell>
-      <StyledCCTableCell style={{width: '25%'}}>
+      <StyledCCTableCell>
         <button
           type="button"
           className="pure-button"
@@ -45,7 +45,7 @@ const CardConfigEditorItem = ({item, isLast, isFirst, onChange, onUp, onDown, on
           <i className="icon-trash"></i>
         </button>
       </StyledCCTableCell>
-    </React.Fragment>
+    </StyledCCTableRow>
   );
 
   function onValueChange(propName, e) {

diff --git a/client/app/components/Settings/RoomSettings.js b/client/app/components/Settings/RoomSettings.js
@@ -36,9 +36,9 @@ const RoomSettings = ({
 }) => {
   const {t} = useContext(L10nContext);
 
-  const [customCardConfigExpanded, setCustomCardConfigExpanded] = useState(false);
+  const [customCardConfigExpanded, setCustomCardConfigExpanded] = useState(true);
   React.useEffect(() => {
-    setCustomCardConfigExpanded(false);
+    setCustomCardConfigExpanded(true);
   }, [shown]);
 
   const [myRoomPassword, setMyRoomPassword] = useState(''); // we never [can] pre-set the pw.

diff --git a/client/app/components/Settings/_styled.js b/client/app/components/Settings/_styled.js
@@ -88,10 +88,8 @@ export const StyledExpandButton = styled.button`
 `;
 
 export const StyledItems = styled.div`
-  display: flex;
-  flex-wrap: wrap;
+  display: table;
   border: 1px solid #ccc;
-  margin-bottom: 8px;
 
   > div button {
     display: inline-block;
@@ -101,14 +99,18 @@ export const StyledItems = styled.div`
   }
 `;
 
+export const StyledCCTableRow = styled.div`
+  display: table-row;
+`;
+
 export const StyledCCTableCell = styled.div`
+  display: table-cell;
   position: relative;
   box-sizing: border-box;
-  flex-grow: 0;
   padding: 0.2em 0.2em;
   overflow: hidden;
   list-style: none;
-  width: 15%;
+  min-width: 15%;
 
   input[type='text'],
   input[type='number'] {
@@ -127,7 +129,7 @@ export const StyledCCTableCell = styled.div`
 
 export const StyledCCTableHeader = styled.div`
   width: 100%;
-  display: flex;
+  display: table-row;
   border-bottom: 1px solid #ccc;
 
   ${StyledCCTableCell} {
@@ -148,12 +150,18 @@ export const StyledTextarea = styled.textarea`
   width: 100%;
   font-family: monospace;
   min-height: 300px;
+  margin-bottom: 8px;
+  border: 1px solid #ccc;
 `;
 
 export const StyledCadConfigEditor = styled.div`
   .pure-u-1-2 {
     width: 49%;
   }
+
+  ${StyledItems} + .pure-g {
+    margin-bottom: 8px;
+  }
 `;
 
 export const ErrorMsg = styled.p`
@@ -166,6 +174,5 @@ export const AddItemButton = styled.button`
   width: 100%;
   margin: 0;
   padding: 3px;
-  display: inline-block;
   font-size: small;
 `;