Added workaround for required field rendering bug

final-hill · Dec 4, 2023 · 13ba5b8 · 13ba5b8
1 parent c71ea20
commit 13ba5b8
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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'
     }
 };