From f0e6a33430996d2d5f079fe5ef737e78bed643ce Mon Sep 17 00:00:00 2001
From: xeronimus <xeronimus@gmail.com>
Date: Tue, 28 Feb 2023 14:50:38 +0100
Subject: [PATCH] #58 add column headers to custom card config editor

---
 client/app/assets/i18n/de.json                     |  6 +++++-
 client/app/assets/i18n/en.json                     |  6 +++++-
 client/app/components/Settings/CardConfigEditor.js | 13 ++++++++++++-
 client/app/components/Settings/_styled.js          | 11 +++++++++++
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/client/app/assets/i18n/de.json b/client/app/assets/i18n/de.json
index 3e4a0d5f..4451a8d4 100644
--- a/client/app/assets/i18n/de.json
+++ b/client/app/assets/i18n/de.json
@@ -98,5 +98,9 @@
   "issueTrackingUrlExample": "https://my.jira.com/browse/{ISSUE}",
   "matrix": "Schätz-Matrix",
   "noStoriesForMatrix": "Es gibt noch keine geschätzten Stories in deinem Raum...",
-  "matrixIncludeTrashed": "Inklusive gelöschte Stories"
+  "matrixIncludeTrashed": "Inklusive gelöschte Stories",
+  "addCard": "Karte hinzufügen",
+  "value": "Wert",
+  "label": "Name",
+  "color": "Farbe"
 }
diff --git a/client/app/assets/i18n/en.json b/client/app/assets/i18n/en.json
index 79270d6f..7e8d5c03 100644
--- a/client/app/assets/i18n/en.json
+++ b/client/app/assets/i18n/en.json
@@ -98,5 +98,9 @@
   "issueTrackingUrlExample": "https://my.jira.com/browse/{ISSUE}",
   "matrix": "Estimation Matrix",
   "noStoriesForMatrix": "There are no estimated stories in your room, yet...",
-  "matrixIncludeTrashed": "Include trashed stories"
+  "matrixIncludeTrashed": "Include trashed stories",
+  "addCard": "Add Card",
+  "value": "Value",
+  "label": "Label",
+  "color": "Color"
 }
diff --git a/client/app/components/Settings/CardConfigEditor.js b/client/app/components/Settings/CardConfigEditor.js
index d8d39186..1caa7c7e 100644
--- a/client/app/components/Settings/CardConfigEditor.js
+++ b/client/app/components/Settings/CardConfigEditor.js
@@ -8,6 +8,8 @@ import {
   AddItemButton,
   ErrorMsg,
   StyledCadConfigEditor,
+  StyledCCTableCell,
+  StyledCCTableHeader,
   StyledItems,
   StyledTextarea
 } from './_styled';
@@ -53,6 +55,15 @@ export const CardConfigEditor = ({cardConfig, onSave, t}) => {
 
       {!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}
@@ -66,7 +77,7 @@ export const CardConfigEditor = ({cardConfig, onSave, t}) => {
             />
           ))}
           <AddItemButton className="pure-button" type="button" onClick={onAdd}>
-            <i className="icon-plus"></i> Add Card
+            <i className="icon-plus"></i> {t('addCard')}
           </AddItemButton>
         </StyledItems>
       )}
diff --git a/client/app/components/Settings/_styled.js b/client/app/components/Settings/_styled.js
index 120cefb1..4873ce0f 100644
--- a/client/app/components/Settings/_styled.js
+++ b/client/app/components/Settings/_styled.js
@@ -125,6 +125,17 @@ export const StyledCCTableCell = styled.div`
   }
 `;
 
+export const StyledCCTableHeader = styled.div`
+  width: 100%;
+  display: flex;
+  border-bottom: 1px solid #ccc;
+
+  ${StyledCCTableCell} {
+    background: #e6e6e6;
+    color: rgba(0, 0, 0, 0.8);
+  }
+`;
+
 export const StyledColorBadge = styled.span`
   display: inline-block;
   width: 12px;