28 fix required field render bug (#39)

* Fixed unused variable issues, version bump

* Added workaround for required field rendering bug

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@final-hill/cathedral",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "Requirements management system",
     "keywords": [],
     "private": true,

src/data/LocalStorageRepository.mts

@@ -28,7 +28,7 @@ export class LocalStorageRepository<E extends Entity> extends Repository<E> {
         );
     }
 
-    getAll(filter: (entity: E) => boolean = entity => true): Promise<E[]> {
+    getAll(filter: (entity: E) => boolean = _ => true): Promise<E[]> {
         const data = localStorage.getItem(this._storageKey),
             json: E[] = data ? JSON.parse(data) : [],
             result = json.filter(filter).map(this._fromJSON);

src/domain/Entity.mts

@@ -15,16 +15,16 @@ export interface EntityJson {
  * An entity is an object that is not defined by its attributes,
  * but rather by a thread of continuity represented by its identity (id).
  */
-export abstract class Entity {
+export class Entity {
     static emptyId: Uuid = '00000000-0000-0000-0000-000000000000';
 
     /**
      * Creates an instance of the object from a JSON representation.
      * @param json - The JSON representation of the object.
      * @returns The object.
      */
-    static fromJSON(json: EntityJson): Entity {
-        throw new Error('Method not implemented.');
+    static fromJSON({ id }: EntityJson): Entity {
+        return new Entity({ id });
     }
 
     #id: Uuid;

src/domain/Requirement.mts

@@ -31,8 +31,8 @@ export abstract class Requirement extends Entity {
      * @param args - The arguments to the property.
      * @returns True if the property is satisfied, false otherwise.
      */
-    property(...args: any[]): boolean {
-        throw new Error('Method not implemented.');
+    property(..._args: any[]): boolean {
+        return false;
     }
 
     override toJSON(): RequirementJson {

src/presentation/components/BreadCrumb.mts

@@ -22,7 +22,7 @@ export class Breadcrumb extends Component {
     }
 
     constructor(properties: Properties<Breadcrumb>) {
-        super({});
+        super(properties);
         self.navigation.addEventListener('navigate', this);
     }
 

src/presentation/components/DataTable.mts

@@ -129,7 +129,7 @@ export class DataTable<T extends Entity> extends Component {
         const form = e.target as HTMLFormElement,
             formData = new FormData(form),
             item = Object.fromEntries(formData.entries()) as Properties<T>;
-        this._cancelEdit(e);
+        this._cancelEdit();
         this.onUpdate?.(item);
     }
 
@@ -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()
                 ]),
@@ -211,10 +211,9 @@ export class DataTable<T extends Entity> extends Component {
     /**
      * Hide all edit items in the table and then swap the row
      * from edit mode to view mode.
-     * @param e - The event that triggered the cancel.
      * @returns void
      */
-    protected _cancelEdit(e: Event) {
+    protected _cancelEdit() {
         const root = this.shadowRoot,
             viewData = root.querySelectorAll<HTMLElement>('.view-data'),
             editData = root.querySelectorAll<HTMLInputElement>('.edit-data');
@@ -248,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('*') : ''
                 ]))
         );
 
@@ -336,7 +336,7 @@ export class DataTable<T extends Entity> extends Component {
                     }, 'Save'),
                     button({
                         className: 'edit-data cancel-button',
-                        onclick: e => this._cancelEdit(e),
+                        onclick: () => this._cancelEdit(),
                         hidden: true,
                         [renderIf]: Boolean(this.onUpdate)
                     }, 'Cancel')

src/presentation/components/FeatherIcon.mts

@@ -51,7 +51,7 @@ export class FeatherIcon extends Component {
     get icon(): FeatherIconName { return this.getAttribute('icon') as FeatherIconName; }
     set icon(value: FeatherIconName) { this.setAttribute('icon', value); }
 
-    onIconChanged(oldValue: FeatherIconName, newValue: FeatherIconName) {
+    onIconChanged(_oldValue: FeatherIconName, newValue: FeatherIconName) {
         this.shadowRoot.querySelector('use')!.setAttribute('href', `${svgPath}#${newValue}`);
     }
 }

src/presentation/components/MiniCard.mts

@@ -64,21 +64,21 @@ export class MiniCard extends Component {
     override get title() { return this.getAttribute('title')!; }
     override set title(value) { this.setAttribute('title', value); }
 
-    onTitleChanged(oldValue: string, newValue: string) {
+    onTitleChanged(_oldValue: string, newValue: string) {
         this.shadowRoot.querySelector('span')!.textContent = newValue;
     }
 
     get href() { return this.getAttribute('href')!; }
     set href(value) { this.setAttribute('href', value); }
 
-    onHrefChanged(oldValue: string, newValue: string) {
+    onHrefChanged(_oldValue: string, newValue: string) {
         this.shadowRoot.querySelector('a')!.setAttribute('href', newValue);
     }
 
     get icon() { return this.getAttribute('icon')!; }
     set icon(value) { this.setAttribute('icon', value); }
 
-    onIconChanged(oldValue: FeatherIconName, newValue: FeatherIconName) {
+    onIconChanged(_oldValue: FeatherIconName, newValue: FeatherIconName) {
         this.shadowRoot.querySelector<FeatherIcon>('x-feather-icon')!.setAttribute('icon', newValue);
     }
 }

src/presentation/components/PegsCard.mts

@@ -71,28 +71,28 @@ export class PegsCard extends Component {
     get allowDelete() { return this.getAttribute('allow-delete') === 'true'; }
     set allowDelete(value) { this.setAttribute('allow-delete', value.toString()); }
 
-    onAllowDeleteChanged(oldValue: string, newValue: string) {
+    onAllowDeleteChanged(_oldValue: string, newValue: string) {
         this.shadowRoot.querySelector('button')!.hidden = newValue !== 'true';
     }
 
     get description() { return this.getAttribute('description') ?? ''; }
     set description(value) { this.setAttribute('description', value); }
 
-    onDescriptionChanged(oldValue: string, newValue: string) {
+    onDescriptionChanged(_oldValue: string, newValue: string) {
         this.shadowRoot.querySelector('p')!.textContent = newValue;
     }
 
     get heading() { return this.getAttribute('heading') ?? ''; }
     set heading(value) { this.setAttribute('heading', value); }
 
-    onHeadingChanged(oldValue: string, newValue: string) {
+    onHeadingChanged(_oldValue: string, newValue: string) {
         this.shadowRoot.querySelector('.title a')!.textContent = newValue;
     }
 
     get href() { return this.getAttribute('href') ?? ''; }
     set href(value) { this.setAttribute('href', value); }
 
-    onHrefChanged(oldValue: string, newValue: string) {
+    onHrefChanged(_oldValue: string, newValue: string) {
         this.shadowRoot.querySelector('a')!.href = newValue;
     }
 

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
@@ -100,7 +100,7 @@ export class NewEnvironment extends Page {
         self.navigation.navigate(`/environments/${environment.slug()}`);
     }
 
-    onReset(e: Event) {
+    onReset() {
         self.navigation.navigate('/goals');
     }
 }

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
@@ -103,7 +103,7 @@ export class NewGoals extends Page {
         self.navigation.navigate(`/goals/${goals.slug()}`);
     }
 
-    onReset(e: Event) {
+    onReset() {
         self.navigation.navigate('/goals');
     }
 }

src/presentation/themes.mts

@@ -6,7 +6,7 @@
  */
 type Theme = Record<string, Partial<CSSStyleDeclaration>>;
 
-export const formTheme: Record<string, Partial<CSSStyleDeclaration>> = {
+export const formTheme: Theme = {
     'button': {
         backgroundColor: 'var(--site-dark-bg)',
         borderRadius: 'var(--border-radius)',
@@ -40,9 +40,8 @@ export const formTheme: Record<string, Partial<CSSStyleDeclaration>> = {
         backgroundColor: 'transparent',
         color: 'var(--font-color)',
     },
-    '.required::after': {
-        content: ' *',
+    '.required > span': {
         color: 'var(--btn-danger-color)',
-        display: 'inline-block'
+        paddingLeft: '0.25em'
     }
 };

tsconfig.json

@@ -13,6 +13,8 @@
         "moduleResolution": "NodeNext",
         "outDir": "dist",
         "noImplicitOverride": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
         "paths": {
             "~/*": [
                 "./src/*"