background color

Author: RafaelGB

src/components/modals/columnSettings/handlers/selects/FormulaColumnOptionsHandler.ts

@@ -1,4 +1,3 @@
-import { ColumnOption } from "cdm/ComponentsModel";
 import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
 import { OptionSource } from "helpers/Constants";
 import { c } from "helpers/StylesHelper";
@@ -63,6 +62,14 @@ export class FormulaColumnOptionsHandler extends AbstractHandlerClass<ColumnSett
                 })
             );
             // TODO Show column options read-only
+            columnHandlerResponse.column.options.forEach((option) => {
+                const optionEl = containerEl.createDiv();
+                optionEl.style.backgroundColor = option.color;
+                optionEl.addClass(c("readable-options"));
+                optionEl.createDiv({ text: option.label });
+                optionEl.createDiv({ text: option.value });
+
+            });
         }
         return this.goNext(columnHandlerResponse);
     }

src/stateManagement/columns/handlers/AlterOptionToColumnAction.ts

@@ -1,6 +1,7 @@
 import { ColumnOption } from "cdm/ComponentsModel";
 import { TableColumn } from "cdm/FolderModel";
 import { ColumnsState, TableActionResponse } from "cdm/TableStateInterface";
+import { OptionSource } from "helpers/Constants";
 import { AbstractTableAction } from "stateManagement/AbstractTableAction";
 
 export default class AlterOptionToColumnHandlerAction extends AbstractTableAction<ColumnsState> {
@@ -10,6 +11,11 @@ export default class AlterOptionToColumnHandlerAction extends AbstractTableActio
             column: TableColumn,
             option: ColumnOption
         ) => {
+            if (OptionSource.FORMULA === column.config.formula_option_source) {
+                // End the execution if the option is from a formula
+                return;
+            }
+
             const { value } = option;
             // Wrap in a promise of a queue to avoid concurrency issues
             const columnIndex = get().columns.findIndex(

styles.css

@@ -773,6 +773,13 @@ div.database-plugin__td.data-input span:focus {
   margin-bottom: 10px;
 }
 
+.database-plugin__readable-options {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
 /**
 *  Row styles
 */