Adds formula background styling to case card value cell.

Disables value editing when attribute has a formula
concord-consortium · Oct 2, 2024 · 49e3e54 · 49e3e54
1 parent 8896666
commit 49e3e54
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/v3/src/components/case-card/case-attr-view.scss b/v3/src/components/case-card/case-attr-view.scss
@@ -2,7 +2,7 @@
 
 .case-card-attr {
   height: 25px;
-  
+
   &:nth-child(2) {
     .case-card-attr-value {
       border-top: solid 1px #b2b2b2;
@@ -45,6 +45,11 @@
         text-align: left;
       }
 
+      &.formula-attr-value {
+        background-color: rgba(255, 255, 0, 0.2);
+        font-style: italic;
+      }
+
       span {
         border-radius: 0;
         display: inline-block;

diff --git a/v3/src/components/case-card/case-attr-view.tsx b/v3/src/components/case-card/case-attr-view.tsx
@@ -29,6 +29,7 @@ export const CaseAttrView = observer(function CaseAttrView (props: ICaseAttrView
   const { caseId, collection, attrId, unit, value, getDividerBounds, onSetContentElt } = props
   const cardModel = useCaseCardModel()
   const data = cardModel?.data
+  const attr = collection.getAttribute(attrId)
   const isCollectionSummarized = !!cardModel?.summarizedCollections.includes(collection.id)
   const displayValue = value ? String(value) : ""
   const showUnitWithValue = isFiniteNumber(Number(value)) && unit
@@ -63,16 +64,17 @@ export const CaseAttrView = observer(function CaseAttrView (props: ICaseAttrView
   const renderEditableOrSummaryValue = () => {
     if (isCollectionSummarized) {
       return (
-        <div className="case-card-attr-value-text static-summary">
+        <div className={clsx("case-card-attr-value-text", "static-summary", {"formula-attr-value": attr?.hasFormula})}>
           {displayValue}
         </div>
       )
     }
 
     return (
       <Editable
-        className="case-card-attr-value-text"
+        className={clsx("case-card-attr-value-text", {"formula-attr-value": attr?.hasFormula})}
         isPreviewFocusable={true}
+        isDisabled={attr?.hasFormula}
         onCancel={handleCancel}
         onChange={handleChangeValue}
         onEdit={() => setIsEditing(true)}