Adding

2026-03-17 11:09:46 -05:00
parent bd1a9744ad
commit 6e7edcfe1b
332 changed files with 64174 additions and 0 deletions
@@ -0,0 +1,5 @@
+.factoid-wdiget-view {
+    .factoid-widget-parent {
+        padding: 0.25em;
+    }
+}
@@ -0,0 +1,74 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import FactoidWidgetView from './FactoidWidgetView';
+import AsyncState from '../../../shared/enumerations/AsyncState';
+import { IFactoid } from '../../../services/service-types/FactoidTypes';
+
+describe('FactoidWidgetView Component', () => {
+
+    it ('Renders Notification Bar When Status is Not Success', () => {
+        const wrapper = shallow(
+            <FactoidWidgetView 
+                factoids={{
+                    state: AsyncState.Inactive,
+                    data: [
+                        {} as IFactoid,
+                        {} as IFactoid
+                    ]
+                }}
+                onFactoidSelected={() => {}}
+            />
+        );
+        const notificationBar = wrapper.find(`[data-test='factoid-widget-view-notification-bar']`);
+        expect(notificationBar.length).toBe(1);
+    });
+
+    it ('Renders Notification Bar When Data is Undefined', () => {
+        const wrapper = shallow(
+            <FactoidWidgetView 
+                factoids={{
+                    state: AsyncState.Success,
+                }}
+                onFactoidSelected={() => {}}
+            />
+        );
+        const notificationBar = wrapper.find(`[data-test='factoid-widget-view-notification-bar']`);
+        expect(notificationBar.length).toBe(1);
+    });
+
+    it ('Renders Proper amount of Factoids', () => {
+        const wrapper = shallow(
+            <FactoidWidgetView 
+                factoids={{
+                    state: AsyncState.Success,
+                    data: [
+                        {} as IFactoid,
+                        {} as IFactoid
+                    ]
+                }}
+                onFactoidSelected={() => {}}
+            />
+        );
+        const factoidWidgets = wrapper.find(`[data-test='factoid-widget']`);
+        expect(factoidWidgets.length).toBe(2);
+    });
+
+    it ('Calls onFactoidSelected() on Click', () => {
+        let wasCallbackTriggered = false;
+        const wrapper = shallow(
+            <FactoidWidgetView 
+                factoids={{
+                    state: AsyncState.Success,
+                    data: [
+                        {} as IFactoid
+                    ]
+                }}
+                onFactoidSelected={() => {wasCallbackTriggered = true}}
+            />
+        );
+        const factoidWidgets = wrapper.find(`[data-test='factoid-widget-parent']`);
+        factoidWidgets.simulate('click');
+        expect(wasCallbackTriggered).toBe(true);
+    });
+
+});
@@ -0,0 +1,47 @@
+import React from 'react';
+import FactoidWidget from './factoid-widget/FactoidWidget';
+import IAsyncStateContainer from '../../../shared/types/IAsyncStateContainer';
+import './FactoidWidgetView.scss';
+import { IFactoid } from '../../../services/service-types/FactoidTypes';
+import AsyncState, { mapAsyncStateToNotificationType } from '../../../shared/enumerations/AsyncState';
+import NotificationBar from '../../../components/notification-bar/NotificationBar';
+
+interface IFactoidWidgetViewProps {
+    factoids: IAsyncStateContainer<IFactoid[]>;
+    selectedWidgetIndex?: number;
+    onFactoidSelected: (index: number) => any; 
+}
+
+const FactoidWidgetView: React.FC<IFactoidWidgetViewProps> = (props) => {
+    if (props.factoids.state !== AsyncState.Success || !props.factoids.data) {
+        return (
+            <NotificationBar
+                type={mapAsyncStateToNotificationType(props.factoids.state)}
+                text={props.factoids.state}
+                data-test="factoid-widget-view-notification-bar"
+            />
+        );
+    }
+    else {
+        return (
+            <div className="factoid-wdiget-view row">
+                {props.factoids.data.map((factoid, index) => 
+                    <div
+                        className="col factoid-widget-parent"
+                        key={index}
+                        onClick={() => props.onFactoidSelected(index)}
+                        data-test="factoid-widget-parent"
+                    >
+                        <FactoidWidget
+                            factoid={factoid}
+                            isWidgetSelected={props.selectedWidgetIndex === index} 
+                            data-test="factoid-widget"
+                        />
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+export default FactoidWidgetView;
@@ -0,0 +1,52 @@
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+
+$factoiBorderRadius: 1em;
+
+.factoid-widget {
+    border-radius: $factoiBorderRadius;
+    border-width: 2px;
+    cursor: pointer;
+    overflow: hidden;
+    width: 15em;
+    &.widget-selected {
+        border-color: rgba($success, 0.5);
+    }
+    &:hover {
+        border-color: rgba($primary, 0.5);
+    }
+
+    p, h3 {
+        margin: 0;
+    }
+
+    .factoid-main-body {
+        padding: 0.75em;
+        height: 6.5em;
+    }
+    .list-group-item {
+        background-color: transparent;
+        padding: 0.25em;
+    }
+    .list-group-item p {
+        text-align: center;
+    }
+    .factoid-icon {
+        font-size: 3em;
+        text-align: center;
+    }
+    .factoid-is-loading {
+        opacity: 0.25;
+    }
+    .icon-info-overlay {
+        position: absolute;
+        width: 100%;
+
+        .icon-info-overlay-icon {
+            font-size: 5em;
+            opacity: 0.5;
+            text-align: center;
+        }
+    }
+}
@@ -0,0 +1,46 @@
+import React from 'react';
+import { ShallowWrapper, shallow } from 'enzyme';
+import FactoidWidget from './FactoidWidget';
+import { IFactoid } from '../../../../services/service-types/FactoidTypes';
+
+describe('FactoidWidget Component', () => {
+    let wrapper: ShallowWrapper;
+    const dummyFactoid: IFactoid = {
+        cumulativeValue: '42',
+        name: 'Items',
+        fontAwesomeIcon: 'fa-car',
+        description: 'These are items',
+        factoidAccountIds: []
+    };
+
+    beforeEach(() => {
+        wrapper = shallow(
+            <FactoidWidget factoid={dummyFactoid} isWidgetSelected={false} />  
+        );
+    });
+
+    it ('Renders Labels Correctly', () => {
+        const valueComponent = wrapper.find(`[data-test='factoid-value']`);
+        const nameComponent = wrapper.find(`[data-test='factoid-name']`);
+        const descriptionComponent = wrapper.find(`[data-test='factoid-description']`);
+        
+        expect(valueComponent.text()).toEqual('42');
+        expect(nameComponent.text()).toEqual('Items');
+        expect(descriptionComponent.text()).toEqual('These are items');
+    });
+
+    it ('Renders Fontawesome Correctly', () => {
+        const fontawesomeComponent = wrapper.find(`[data-test='font-awesome-icon']`);
+        
+        expect(fontawesomeComponent.hasClass('fa-car')).toBe(true);
+    });
+
+    it ('Has Selected CSS Class When Selected', () => {
+        wrapper = wrapper.setProps({
+            isWidgetSelected: true
+        });
+        const factoidCard = wrapper.find(`[data-test='factoid-card']`);
+        expect(factoidCard.hasClass('widget-selected')).toBe(true);
+    });
+
+});
@@ -0,0 +1,38 @@
+import React from 'react';
+import './FactoidWidget.scss';
+import { IFactoid } from '../../../../services/service-types/FactoidTypes';
+
+export interface IFactoidWidgetProps {
+    factoid: IFactoid;
+    isWidgetSelected: boolean;
+}
+
+const FactoidWidget: React.FC<IFactoidWidgetProps> = (props) => {
+    const factoid = props.factoid;
+    return (
+        <div className={'factoid-widget card' + (props.isWidgetSelected ? ' widget-selected' : '')} data-test="factoid-card">
+            <div>
+                <div className="factoid-main-body container">
+                    <div className="row h-100 justify-content-center align-items-center">
+                        <div className="col-6">
+                            <h1 className="factoid-icon" aria-hidden="true">
+                                <i className={'fa ' + factoid.fontAwesomeIcon} data-test="font-awesome-icon"></i>
+                            </h1>
+                        </div>
+                        <div className="col-6">
+                            <h3 data-test="factoid-value">{factoid.cumulativeValue}</h3>
+                            <p data-test="factoid-name">{factoid.name}</p>
+                        </div>
+                    </div>
+                </div>
+                <ul className="list-group list-group-flush">
+                    <li className="list-group-item">
+                        <p data-test="factoid-description">{factoid.description}</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default FactoidWidget;