15 define stakeholder map tab (#51)

* Implemented Tab control and Stakeholder map
final-hill · Dec 12, 2023 · 547ece4 · 547ece4
1 parent f6a6eaa
commit 547ece4
Show file tree

Hide file tree

Showing 30 changed files with 2,758 additions and 1,281 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     },
     "editor.formatOnSave": true,
     "git.pruneOnFetch": true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@final-hill/cathedral",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "Requirements management system",
     "keywords": [],
     "private": true,
@@ -46,6 +46,7 @@
     "dependencies": {
         "css-loader": "^6.8.1",
         "feather-icons": "^4.29.1",
+        "mermaid": "^10.6.1",
         "style-loader": "^3.3.3"
     }
 }
diff --git a/src/domain/Stakeholder.mts b/src/domain/Stakeholder.mts
@@ -14,7 +14,6 @@ export enum StakeholderSegmentation {
 }
 
 export enum StakeholderCategory {
-    Uncategorized = 'Uncategorized',
     KeyStakeholder = 'Key Stakeholder',
     ShadowInfluencer = 'Shadow Influencer',
     FellowTraveler = 'Fellow Traveler',

diff --git a/src/presentation/Application.mts b/src/presentation/Application.mts
@@ -20,7 +20,7 @@ export default class Application extends Container {
         });
     }
 
-    protected override _initHtml() {
+    protected override _initShadowHtml() {
         const { template, section, slot } = html;
 
         return template([
@@ -30,9 +30,9 @@ export default class Application extends Container {
         ]);
     }
 
-    protected override _initStyle() {
+    protected override _initShadowStyle() {
         return {
-            ...super._initStyle(),
+            ...super._initShadowStyle(),
             ':host': {
                 backgroundColor: 'var(--site-dark-bg)',
                 color: 'var(--font-color)',
@@ -122,9 +122,7 @@ export default class Application extends Container {
 
     onRoute(event: CustomEvent<typeof Page>) {
         const Cons = event.detail;
-        this.#currentPage?.dispatchEvent(new Event('unload'));
         this.#currentPage = new Cons({}, []);
-        this.shadowRoot.querySelector('slot')!.replaceChildren(this.#currentPage);
-        this.#currentPage.dispatchEvent(new Event('load'));
+        this.replaceChildren(this.#currentPage);
     }
 }
diff --git a/src/presentation/components/BreadCrumb.mts b/src/presentation/components/BreadCrumb.mts
@@ -20,9 +20,9 @@ export class Breadcrumb extends Component {
         self.navigation.addEventListener('navigate', this);
     }
 
-    protected override _initStyle() {
+    protected override _initShadowStyle() {
         return {
-            ...super._initStyle(),
+            ...super._initShadowStyle(),
             '.bread-crumb': {
                 backgroundColor: 'var(--content-bg)',
                 borderBottom: '1px solid var(--shadow-color)',
@@ -83,7 +83,7 @@ export class Breadcrumb extends Component {
         ];
     }
 
-    protected override _initHtml() {
+    protected override _initShadowHtml() {
         const { nav, ul, template } = html;
 
         return template(nav({ className: 'bread-crumb' }, ul({ className: 'crumbs' },

diff --git a/src/presentation/components/Component.mts b/src/presentation/components/Component.mts
@@ -1,5 +1,6 @@
 import type { Properties } from '~/types/Properties.mjs';
 import { HandleEvent } from '../HandleEvent.mjs';
+import type { Theme } from '~/types/Theme.mjs';
 
 export abstract class Component extends HandleEvent(HTMLElement) {
     static get observedAttributes(): string[] {
@@ -12,8 +13,8 @@ export abstract class Component extends HandleEvent(HTMLElement) {
         if (!this.shadowRoot) {
             const shadowRoot = this.attachShadow({ mode: 'open' }),
                 sheet = new CSSStyleSheet(),
-                template = this._initHtml(),
-                rules = this._initStyle(),
+                template = this._initShadowHtml(),
+                rules = this._initShadowStyle(),
                 styleElement = document.createElement('style');
 
             // Convert the rules object into a CSSStyleSheet
@@ -37,7 +38,6 @@ export abstract class Component extends HandleEvent(HTMLElement) {
                 template.content.cloneNode(true)
             );
 
-            // Set the component's properties
             Object.assign(this, properties);
         }
     }
@@ -51,15 +51,15 @@ export abstract class Component extends HandleEvent(HTMLElement) {
      * A document fragment that contains the HTML for the component
      * @returns The HTML template
      */
-    protected _initHtml(): HTMLTemplateElement {
+    protected _initShadowHtml(): HTMLTemplateElement {
         return document.createElement('template');
     }
 
     /**
      * An object literal that contains the CSS style declarations for the component
      * @returns The CSS rules
      */
-    protected _initStyle(): Record<string, Partial<CSSStyleDeclaration>> {
+    protected _initShadowStyle(): Theme {
         return {
             ':host': {
                 boxSizing: 'border-box'

diff --git a/src/presentation/components/Container.mts b/src/presentation/components/Container.mts
@@ -1,20 +1,40 @@
 import type { Properties } from '~/types/Properties.mjs';
 import html from '../lib/html.mjs';
 import { Component } from './index.mjs';
+import type { Theme } from '~/types/Theme.mjs';
 
 export abstract class Container extends Component {
-    constructor(properties: Properties<Container>, children: (Element | string)[]) {
+    constructor(properties: Properties<Container>, children: (Element | string)[] = []) {
         super(properties);
 
-        const slot = this.shadowRoot?.querySelector('slot');
-
-        if (!slot)
-            throw new Error('Container must have a slot');
+        this.append(...children);
+    }
 
-        slot.append(...children);
+    protected override _initShadowStyle(): Theme {
+        return {
+            ...super._initShadowStyle(),
+            '::-webkit-scrollbar': {
+                appearance: 'none'
+            },
+            '::-webkit-scrollbar:vertical': {
+                width: '15px'
+            },
+            '::-webkit-scrollbar:horizontal': {
+                height: '15px'
+            },
+            '::-webkit-scrollbar-thumb': {
+                backgroundColor: 'var(--shadow-color)',
+                borderRadius: 'var(--border-radius)',
+                border: '2px solid var(--content-bg)',
+            },
+            '::-webkit-scrollbar-track': {
+                borderRadius: 'var(--border-radius)',
+                backgroundColor: 'var(--site-dark-bg)'
+            }
+        };
     }
 
-    protected override _initHtml() {
+    protected override _initShadowHtml() {
         const { template, slot } = html;
 
         return template(slot());

diff --git a/src/presentation/components/DataTable.mts b/src/presentation/components/DataTable.mts
@@ -1,8 +1,9 @@
 import type { Properties } from '~/types/Properties.mjs';
 import type { Entity } from '~/domain/Entity.mjs';
-import { formTheme } from '~/presentation/themes.mjs';
 import html, { renderIf } from '../lib/html.mjs';
 import { Component } from './Component.mjs';
+import buttonTheme from '../theme/buttonTheme.mjs';
+import formTheme from '../theme/formTheme.mjs';
 
 export interface DataColumn {
     formType?: 'text' | 'hidden' | 'select';
@@ -17,8 +18,8 @@ export type DataColumns<T extends Entity> =
     & { [K in keyof Properties<T>]: DataColumn };
 
 export interface DataTableOptions<T extends Entity> {
-    columns: DataColumns<T>;
-    select: () => Promise<T[]>;
+    columns?: DataColumns<T>;
+    select?: () => Promise<T[]>;
     onCreate?: (item: Omit<Properties<T>, 'id'>) => Promise<void>;
     onUpdate?: (item: Properties<T>) => Promise<void>;
     onDelete?: (id: T['id']) => Promise<void>;
@@ -48,13 +49,13 @@ export class DataTable<T extends Entity> extends Component {
     constructor({ columns, select, onCreate, onDelete, onUpdate }: DataTableOptions<T>) {
         super({});
 
-        Object.entries(columns).forEach(([key, value]) => {
+        Object.entries(columns ?? {}).forEach(([key, value]) => {
             if (value.formType == 'select' && !value.options)
                 throw new Error(`When formType is "select", options must be specified for column "${key}".`);
         });
 
-        this.#columns = Object.freeze(columns);
-        this.#select = select;
+        this.#columns = Object.freeze(columns ?? {} as DataColumns<T>);
+        this.#select = select ?? (() => Promise.resolve([]));
         this.#onCreate = onCreate;
         this.#onDelete = onDelete;
         this.#onUpdate = onUpdate;
@@ -135,10 +136,17 @@ export class DataTable<T extends Entity> extends Component {
             this.onDelete?.(id);
     }
 
-    protected override _initStyle() {
+    protected override _initShadowStyle() {
         return {
-            ...super._initStyle(),
+            ...super._initShadowStyle(),
+            ...buttonTheme,
             ...formTheme,
+            //The following is duplicated from the theme due to
+            // a browser bug
+            '.required span': {
+                color: 'var(--btn-danger-color)',
+                paddingLeft: '0.25em'
+            },
             'caption': {
                 fontWeight: 'bold',
                 textAlign: 'left',
@@ -171,7 +179,7 @@ export class DataTable<T extends Entity> extends Component {
         };
     }
 
-    protected override _initHtml(): HTMLTemplateElement {
+    protected override _initShadowHtml(): HTMLTemplateElement {
         return template([
             form({
                 id: 'frmDataTableCreate',

diff --git a/src/presentation/components/FeatherIcon.mts b/src/presentation/components/FeatherIcon.mts
@@ -20,9 +20,9 @@ export class FeatherIcon extends Component {
         super(properties);
     }
 
-    protected override _initStyle() {
+    protected override _initShadowStyle() {
         return {
-            ...super._initStyle(),
+            ...super._initShadowStyle(),
             '.feather-icon': {
                 stroke: 'currentColor',
                 display: 'inline-block',
@@ -32,7 +32,7 @@ export class FeatherIcon extends Component {
         };
     }
 
-    protected override _initHtml() {
+    protected override _initShadowHtml() {
         const { template } = html,
             svg = document.createElementNS(xmlnsSvg, 'svg'),
             use = document.createElementNS(xmlnsSvg, 'use');

diff --git a/src/presentation/components/GlobalNav.mts b/src/presentation/components/GlobalNav.mts
@@ -25,9 +25,9 @@ export class GlobalNav extends Component {
         self.navigation.addEventListener('navigate', this);
     }
 
-    protected override _initStyle() {
+    protected override _initShadowStyle() {
         return {
-            ...super._initStyle(),
+            ...super._initShadowStyle(),
             ':host': {
                 backgroundColor: 'var(--site-dark-bg)',
                 boxShadow: '2px 0 5px 0px var(--shadow-color)',
@@ -77,7 +77,7 @@ export class GlobalNav extends Component {
         };
     }
 
-    protected override _initHtml() {
+    protected override _initShadowHtml() {
         const { nav, ul, template } = html;
 
         return template(nav({ className: 'global-nav' }, ul([

diff --git a/src/presentation/components/MiniCard.mts b/src/presentation/components/MiniCard.mts
@@ -2,6 +2,7 @@ import { Component, FeatherIcon } from './index.mjs';
 import html from '../lib/html.mjs';
 import type { Properties } from '~/types/Properties.mjs';
 import type { FeatherIconName } from '~/types/FeatherIconName.mjs';
+import buttonTheme from '../theme/buttonTheme.mjs';
 
 export class MiniCard extends Component {
     static {
@@ -16,9 +17,10 @@ export class MiniCard extends Component {
         super(properties);
     }
 
-    protected override _initStyle() {
+    protected override _initShadowStyle() {
         return {
-            ...super._initStyle(),
+            ...super._initShadowStyle(),
+            ...buttonTheme,
             '.mini-card': {
                 alignItems: 'center',
                 backgroundColor: 'var(--site-dark-bg)',
@@ -47,7 +49,7 @@ export class MiniCard extends Component {
         };
     }
 
-    protected override _initHtml() {
+    protected override _initShadowHtml() {
         const { li, a, span, template } = html;
 
         return template(li({ className: 'mini-card' }, [

diff --git a/src/presentation/components/MiniCards.mts b/src/presentation/components/MiniCards.mts
@@ -11,15 +11,15 @@ export class MiniCards extends Container {
         super(properties, children);
     }
 
-    protected override _initHtml() {
+    protected override _initShadowHtml() {
         const { template, ul, slot } = html;
 
         return template(ul({ className: 'mini-cards' }, slot()));
     }
 
-    protected override _initStyle() {
+    protected override _initShadowStyle() {
         return {
-            ...super._initStyle(),
+            ...super._initShadowStyle(),
             '.mini-cards': {
                 display: 'flex',
                 flexWrap: 'wrap',