From 13ba5b82402e1a1bb72df0ebf6d6f47109e9534f Mon Sep 17 00:00:00 2001
From: Michael Haufe <tno@thenewobjective.com>
Date: Mon, 4 Dec 2023 17:44:45 -0600
Subject: [PATCH] Added workaround for required field rendering bug

---
 src/domain/Requirement.mts                             | 4 +++-
 src/presentation/components/DataTable.mts              | 5 +++--
 src/presentation/pages/environments/NewEnvironment.mts | 2 +-
 src/presentation/pages/goals/NewGoals.mts              | 2 +-
 src/presentation/themes.mts                            | 5 ++---
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/domain/Requirement.mts b/src/domain/Requirement.mts
index 5a24fc44..91a74761 100644
--- a/src/domain/Requirement.mts
+++ b/src/domain/Requirement.mts
@@ -31,7 +31,9 @@ export abstract class Requirement extends Entity {
      * @param args - The arguments to the property.
      * @returns True if the property is satisfied, false otherwise.
      */
-    abstract property(...args: any[]): boolean;
+    property(..._args: any[]): boolean {
+        return false;
+    }
 
     override toJSON(): RequirementJson {
         return {
diff --git a/src/presentation/components/DataTable.mts b/src/presentation/components/DataTable.mts
index 5598c0bc..08e2f9f4 100644
--- a/src/presentation/components/DataTable.mts
+++ b/src/presentation/components/DataTable.mts
@@ -191,7 +191,7 @@ export class DataTable<T extends Entity> extends Component {
                 id: 'frmDataTableDelete'
             }),
             table([
-                caption({ className: 'required' }, ' Required'),
+                caption({ className: 'required' }, ['Required', span('*')]),
                 thead({ className: 'data-header' }, [
                     tr()
                 ]),
@@ -247,7 +247,8 @@ export class DataTable<T extends Entity> extends Component {
                     className: col.required ? 'required' : '',
                     hidden: col.formType == 'hidden'
                 }, [
-                    col.headerText
+                    col.headerText,
+                    col.required ? span('*') : ''
                 ]))
         );
 
diff --git a/src/presentation/pages/environments/NewEnvironment.mts b/src/presentation/pages/environments/NewEnvironment.mts
index 3d75b1cd..1736e4b2 100644
--- a/src/presentation/pages/environments/NewEnvironment.mts
+++ b/src/presentation/pages/environments/NewEnvironment.mts
@@ -31,7 +31,7 @@ export class NewEnvironment extends Page {
                 className: 'environment-form',
                 autocomplete: 'off'
             }, [
-                label({ htmlFor: 'name', className: 'required' }, 'Name'),
+                label({ htmlFor: 'name', className: 'required' }, ['Name', span('*')]),
                 this.#txtName = input({
                     type: 'text', name: 'name', id: 'name', required: true,
                     placeholder: 'Sample Environment', maxLength: Environment.maxNameLength
diff --git a/src/presentation/pages/goals/NewGoals.mts b/src/presentation/pages/goals/NewGoals.mts
index 7af8bd69..da308d5e 100644
--- a/src/presentation/pages/goals/NewGoals.mts
+++ b/src/presentation/pages/goals/NewGoals.mts
@@ -29,7 +29,7 @@ export class NewGoals extends Page {
                 className: 'goals-form',
                 autocomplete: 'off'
             }, [
-                label({ htmlFor: 'name', className: 'required' }, 'Name'),
+                label({ htmlFor: 'name', className: 'required' }, ['Name', span('*')]),
                 input({
                     type: 'text', name: 'name', id: 'name', required: true,
                     placeholder: 'My Goals', maxLength: Goals.maxNameLength
diff --git a/src/presentation/themes.mts b/src/presentation/themes.mts
index d634ab2c..2265ecc5 100644
--- a/src/presentation/themes.mts
+++ b/src/presentation/themes.mts
@@ -40,9 +40,8 @@ export const formTheme: Theme = {
         backgroundColor: 'transparent',
         color: 'var(--font-color)',
     },
-    '.required::after': {
-        content: ' *',
+    '.required > span': {
         color: 'var(--btn-danger-color)',
-        display: 'inline-block'
+        paddingLeft: '0.25em'
     }
 };
\ No newline at end of file