@per-diem-calculator/vanilla 1.0.1 → 1.0.2

package/src/ts/views/Expense/Expense.ts

@@ -1,465 +0,0 @@
-// Types
-import type { DateRaw } from '../../types/dates';
-import {
-    StateExpenseItemValid,
-    StateExpenseItemUpdate,
-} from '../../types/expenses';
-import type { ConfigSectionText } from '../../types/config';
-
-// Utils
-import {
-    USD,
-    handlePointerDown,
-    handlePointerUp,
-    debounce,
-    wait,
-} from '../../utils/misc';
-import { applyStyles, removeStyles } from '../../utils/styles';
-import { getDD, getMM, getYY, isDateRawType } from '../../utils/dates';
-
-// HTML/CSS
-import templateHTML from './template.html?raw';
-
-// Custom Elements
-import { PdcExpenseRow, PdcButton } from '../../components';
-customElements.define('pdc-expense-row', PdcExpenseRow);
-
-// Template for this Custom Element
-const template = document.createElement('template');
-
-// Custom Element
-export class PdcExpenseView extends HTMLElement {
-    /* Initial setup
-     */
-    #styled = false;
-    #observer: MutationObserver | null = null;
-    #mieSubtotal = 0;
-    #lodgingSubtotal = 0;
-
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-    }
-
-    render(styled: boolean, config: ConfigSectionText) {
-        this.#shadowRoot.innerHTML = '';
-        window.removeEventListener('resize', this.#debouncedResizeHandler());
-        this.#styled = styled;
-        if (this.#styled) {
-            template.innerHTML = templateHTML;
-            applyStyles(this.#shadowRoot);
-        } else template.innerHTML = removeStyles(templateHTML);
-        this.#shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#applyConfig(config);
-        this.#shadowRoot
-            .querySelector<PdcButton>('pdc-button')
-            ?.enableTabIndex(true);
-        this.#addEventListeners();
-    }
-
-    renderLoadingSpinner(enabled: boolean) {
-        if (!this.#styled) return;
-        const spinner = this.#shadowRoot.querySelector(
-            '[data-pdc="loading-spinner"]',
-        );
-        if (enabled) spinner?.classList.add('active');
-        else spinner?.classList.remove('active');
-    }
-
-    #applyConfig = (config: ConfigSectionText) => {
-        const heading = this.#shadowRoot.querySelector('#heading');
-        const headingPrint = this.#shadowRoot.querySelector('#heading-print');
-        const body = this.#shadowRoot.querySelector('#body');
-        const bodyPrint = this.#shadowRoot.querySelector('#body-print');
-
-        if (heading && config.heading) {
-            heading.innerHTML = '';
-            heading.insertAdjacentHTML('beforeend', config.heading);
-        } else heading?.remove();
-
-        if (headingPrint && config.headingPrint) {
-            headingPrint.innerHTML = '';
-            headingPrint.insertAdjacentHTML('beforeend', config.headingPrint);
-        } else headingPrint?.remove();
-
-        if (body && config.body) {
-            body.innerHTML = '';
-            body.insertAdjacentHTML('beforeend', config.body);
-        } else body?.remove();
-
-        if (bodyPrint && config.bodyPrint) {
-            bodyPrint.innerHTML = '';
-            bodyPrint.insertAdjacentHTML('beforeend', config.bodyPrint);
-        } else bodyPrint?.remove();
-    };
-
-    /* Events
-     */
-    #addEventListeners() {
-        // Mouse, touch events
-        let pointerStartX = 0;
-        let pointerStartY = 0;
-        this.#viewContainer.addEventListener('pointerdown', e => {
-            if (!(e instanceof PointerEvent)) return;
-
-            const result = handlePointerDown(e);
-            pointerStartX = result.pointerStartX;
-            pointerStartY = result.pointerStartY;
-        });
-        this.#viewContainer.addEventListener('pointerup', e => {
-            if (e instanceof PointerEvent) {
-                const result = handlePointerUp(
-                    e,
-                    this.#handleClicks.bind(this),
-                    pointerStartX,
-                    pointerStartY,
-                );
-                pointerStartX = result.pointerStartX;
-                pointerStartY = result.pointerStartY;
-            }
-        });
-
-        // Keyboard events
-        this.#viewContainer.addEventListener('keydown', e => {
-            if (!(e.key === 'Enter' || e.key === ' ')) return;
-            this.#handleClicks(e);
-        });
-
-        // Resize events
-        window.addEventListener('resize', this.#debouncedResizeHandler());
-    }
-
-    #debouncedResizeHandler() {
-        const resizeHandler = () => {
-            this.#rows.forEach(row => row.windowResize());
-        };
-        return debounce(resizeHandler);
-    }
-
-    #handleClicks(e: Event) {
-        const target = e.target;
-        if (!(target instanceof Element || target instanceof SVGElement))
-            return;
-        const btn = target.closest('button');
-        const btnPdcEl = target.closest<PdcButton>('pdc-button');
-        if (!(btn || btnPdcEl)) return;
-        switch (true) {
-            case btn?.getAttribute('id') === 'toggle-expand':
-                this.#expandAllRows(btn);
-                return;
-            case btnPdcEl?.getAttribute('id') === 'save-expenses':
-                this.#viewContainer.setAttribute('table', 'true');
-                return;
-            default:
-                return;
-        }
-    }
-
-    /* Get view elements
-     */
-    get #rowsContainer() {
-        const rowsContainer =
-            this.#shadowRoot.querySelector<HTMLDivElement>('#rows');
-        if (!rowsContainer)
-            throw new Error(
-                'Failed to render row container/rates table in Expense view.',
-            );
-        return rowsContainer;
-    }
-
-    get #rows() {
-        const rows =
-            this.#shadowRoot.querySelectorAll<PdcExpenseRow>('pdc-expense-row');
-        if (!rows)
-            throw new Error('Failed to render row elements for expense View.');
-        return rows;
-    }
-
-    get #viewContainer() {
-        const container =
-            this.#shadowRoot.querySelector<HTMLElement>('#expense-container');
-        if (!container)
-            throw new Error(
-                'Failed to render container element for expense View.',
-            );
-        return container;
-    }
-
-    get #expensesTable() {
-        const expensesTable = this.#shadowRoot.querySelector('#expenses-table');
-        if (!expensesTable)
-            throw new Error(
-                'Failed to render expenses table for expense View.',
-            );
-        return expensesTable;
-    }
-
-    get #shadowRoot() {
-        if (!this.shadowRoot)
-            throw new Error(`Failed to render ShadowRoot for expense View.`);
-        return this.shadowRoot;
-    }
-
-    /* Visual methods
-     */
-    #expandAllRows(btn: HTMLButtonElement) {
-        if (!this.#styled) return;
-        btn.classList.toggle('active');
-        const toggle = btn.classList.contains('active') ? 'open' : 'close';
-        this.#rows.forEach(row => row.rowToggle(toggle));
-    }
-
-    renderEmtpy() {
-        this.#shadowRoot.innerHTML = '';
-    }
-
-    /* Update methods
-     */
-    async #updateTotals() {
-        this.#mieSubtotal = 0;
-        this.#lodgingSubtotal = 0;
-        this.#rows.forEach(row => {
-            this.#mieSubtotal += row.amount.mie;
-            this.#lodgingSubtotal += row.amount.lodging;
-        });
-    }
-
-    #updateTotalsText() {
-        const mieSubtotalEl = this.#shadowRoot.querySelector('#mie-subtotal');
-        const lodgingSubtotalEl =
-            this.#shadowRoot.querySelector('#lodging-subtotal');
-        const totalEl = this.#shadowRoot.querySelector('#total');
-        if (!(mieSubtotalEl && lodgingSubtotalEl && totalEl))
-            throw new Error(
-                'Failed to render subtotal/total elements in Expense view.',
-            );
-        mieSubtotalEl.textContent = `${USD.format(this.#mieSubtotal)}`;
-        lodgingSubtotalEl.textContent = `${USD.format(this.#lodgingSubtotal)}`;
-        totalEl.textContent = `${USD.format(this.#mieSubtotal + this.#lodgingSubtotal)}`;
-    }
-
-    updateRowMie(
-        date: DateRaw,
-        newMieTotal: number,
-        totalMie: number,
-        totalLodging: number,
-    ) {
-        this.#shadowRoot
-            .querySelector<PdcExpenseRow>(`[date="${date}"]`)
-            ?.updateMieAmount(newMieTotal);
-        this.#mieSubtotal = totalMie;
-        this.#lodgingSubtotal = totalLodging;
-        this.#updateTotalsText();
-    }
-
-    async addRows(
-        expenses: StateExpenseItemValid[],
-        expensesCategory: 'mie' | 'lodging' | 'both',
-    ) {
-        this.#rowsContainer.innerHTML = '';
-        expenses.forEach(expense => {
-            const row = new PdcExpenseRow(
-                expense,
-                this.#styled,
-                expensesCategory,
-            );
-            this.#rowsContainer.appendChild(row);
-            row.styleRow();
-        });
-        const position = this.getBoundingClientRect().top + window.pageYOffset;
-        window.scrollTo({ top: position, behavior: 'smooth' });
-        await this.#updateTotals();
-        this.#updateTotalsText();
-        this.#createSourceList();
-        this.#createRatesTable();
-    }
-
-    /* Create prinout
-     */
-    #createSourceList() {
-        const sources = new Set<string>();
-        this.#rows?.forEach(row => {
-            sources.add(row.rateSource);
-        });
-        const sourcesEl = this.#shadowRoot.querySelector('#sources');
-        if (!sourcesEl)
-            throw new Error(
-                'Failed to render sources element in Expense view.',
-            );
-        sources.forEach(source => {
-            sourcesEl.insertAdjacentHTML(
-                'beforeend',
-                `<a href="${source}" target="_blank">${source}</a>`,
-            );
-        });
-    }
-
-    #createRatesTable() {
-        const ratesTable = this.#shadowRoot.querySelector('#rates-table');
-        if (!ratesTable)
-            throw new Error('Failed to render rates table in Expense view.');
-
-        const rateSet = new Set<string>();
-        this.#rows.forEach((row, i, arr) => {
-            if (i === 0 || row.rateString !== arr[i - 1].rateString)
-                rateSet.add(row.rateStringForTable);
-        });
-
-        let markup = '';
-        rateSet.forEach(item => {
-            markup += this.#createRateTableMarkup(item);
-        });
-
-        ratesTable.innerHTML = markup;
-    }
-
-    #createRateTableMarkup(item: string) {
-        const rateObject = JSON.parse(item);
-        const { rates } = rateObject;
-        return /*HTML*/ `
-            <tr class="border-b-2">
-                <td class="border-r-2 p-3">${rateObject.monthYear}</td>
-                <td class="border-r-2 p-3">${rateObject.city}, ${rateObject.country}</td>
-                <td>${rates.maxLodging.toFixed(2)}</td>
-                <td>${rates.maxMie.toFixed(2)}</td>
-                <td>${rates.maxMieFirstLast.toFixed(2)}</td>
-                <td class="border-r-2">${rates.maxIncidental.toFixed(2)}</td>
-                <td>${rates.deductionBreakfast.toFixed(2)}</td>
-                <td>${rates.deductionLunch.toFixed(2)}</td>
-                <td>${rates.deductionDinner.toFixed(2)}</td>
-            </tr>
-        `;
-    }
-
-    async createExpenseTable(expenses: StateExpenseItemValid[]) {
-        let mieTotal = 0;
-        let lodgingTotal = 0;
-        let total = 0;
-        let markup = '';
-
-        expenses.forEach((expense, i, arr) => {
-            mieTotal += expense.mieAmount;
-            lodgingTotal += expense.lodgingAmount;
-            total += expense.totalAmount;
-            const locationString =
-                `<span class="font-semibold">${expense.city}, ${expense.country}</span>` +
-                this.#createDeductionsString(expense, i, arr.length);
-
-            markup += this.#createExpenseTableRow(expense, locationString);
-        });
-
-        markup += /* HTML */ `
-            <tr class="border-t-3 *:text-lg *:font-semibold">
-                <td colspan="2" class="text-left">Total</td>
-                <td class="text-right">${USD.format(mieTotal)}</td>
-                <td class="text-right">${USD.format(lodgingTotal)}</td>
-                <td class="text-right">${USD.format(total)}</td>
-            </tr>
-        `;
-        this.#expensesTable.innerHTML = markup;
-        await wait(0);
-        window.print();
-    }
-
-    #createDeductionsString(
-        expense: StateExpenseItemValid,
-        i: number,
-        arrLength: number,
-    ) {
-        const { breakfastProvided, lunchProvided, dinnerProvided } =
-            expense.deductions;
-        const deductionsArr: string[] = [];
-        if (i === 0) deductionsArr.push('First Day');
-        if (i === arrLength - 1) deductionsArr.push('Last Day');
-        if (breakfastProvided) deductionsArr.push('Breakfast');
-        if (lunchProvided) deductionsArr.push('Lunch');
-        if (dinnerProvided) deductionsArr.push('Dinner');
-        return deductionsArr.length === 0 ?
-                ''
-            :   deductionsArr.reduce((result, deduction) => {
-                    return result === '' ?
-                            `<br>${deduction}`
-                        :   `${result}, ${deduction}`;
-                }, '');
-    }
-
-    #createExpenseTableRow(expense: StateExpenseItemValid, location: string) {
-        return /*HTML*/ `
-            <tr>
-                <td class="text-center">${getMM(expense.date)}/${getDD(expense.date)}/${getYY(expense.date)}</td> <!-- // 2024-10-01 to 10/01/24 -->
-                <td class="text-left">${location}</td>
-                <td class="text-right">${USD.format(expense.mieAmount)}</td>
-                <td class="text-right">${USD.format(expense.lodgingAmount)}</td>
-                <td class="text-right font-semibold">${USD.format(expense.totalAmount)}</td>
-            </tr>
-        `;
-    }
-
-    emptyExpenseTable() {
-        this.#expensesTable.innerHTML = '';
-    }
-
-    /* Controller / View interaction
-     */
-    controllerHandler(
-        controlUpdateFunction: (row: StateExpenseItemUpdate) => void,
-        controlTableFunction: () => void,
-    ) {
-        const callback = (mutations: MutationRecord[]) => {
-            mutations.forEach(mutation => {
-                const changedAttr = mutation.attributeName;
-                if (!(changedAttr && mutation.target instanceof Element))
-                    return;
-                const target = mutation.target;
-                const newValue = target.getAttribute(changedAttr);
-                if (changedAttr === 'table') {
-                    if (newValue) {
-                        this.#viewContainer.removeAttribute('table');
-                        controlTableFunction();
-                    }
-                    return;
-                }
-                const result = this.#returnRowUpdate(target);
-                controlUpdateFunction(result);
-                return;
-            });
-        };
-        if (this.#observer === null)
-            this.#observer = new MutationObserver(callback);
-        this.#observer.disconnect();
-        this.#observer.observe(this.#viewContainer, {
-            subtree: true,
-            attributes: true,
-            attributeFilter: [
-                'lodging',
-                'breakfastprovided',
-                'lunchprovided',
-                'dinnerprovided',
-                'table',
-            ],
-        });
-    }
-
-    #returnRowUpdate(target: Element): StateExpenseItemUpdate {
-        const row = target.closest<Element>('pdc-expense-row');
-        const date = row?.getAttribute('date');
-        const lodging = row?.getAttribute('lodging');
-        const breakfastProvided =
-            row?.getAttribute('breakfastprovided') === 'yes';
-        const lunchProvided = row?.getAttribute('lunchprovided') === 'yes';
-        const dinnerProvided = row?.getAttribute('dinnerprovided') === 'yes';
-
-        if (!(date && isDateRawType(date) && lodging))
-            throw new Error(
-                'Failed to get date and lodging values to update row in expense View.',
-            );
-
-        return {
-            date,
-            lodgingAmount: +lodging,
-            breakfastProvided,
-            lunchProvided,
-            dinnerProvided,
-        };
-    }
-}

package/src/ts/views/Expense/template.html

@@ -1,176 +0,0 @@
-<div
-    id="expense-container"
-    class="group relative mx-auto max-w-xl overflow-hidden p-3
-        [transition:height_0.7s_ease] print:hidden"
->
-    <!-- Indicator that results are still loading -->
-    <div
-        data-pdc="loading-spinner"
-        class="absolute top-0 left-0 z-0 hidden h-full w-full justify-center
-            rounded-lg border-2 border-neutral-200 bg-white p-6 opacity-0
-            transition-opacity duration-500 ease-in [.active]:z-50
-            [.active]:flex [.active]:opacity-100"
-    >
-        <div
-            class="border-primary-50 border-t-primary-600 h-10 w-10 animate-spin
-                rounded-full border-4 border-t-4"
-        ></div>
-    </div>
-
-    <!-- Heading, toggle rows button, rows -->
-    <div
-        class="relative z-10 overflow-hidden rounded-lg ring-2 ring-neutral-300
-            [transition:height_0.7s_eas]"
-    >
-        <!-- Heading, toggle -->
-        <div
-            class="flex justify-between border-b-2 border-b-neutral-200 bg-white
-                p-4 text-neutral-900"
-        >
-            <div>
-                <h3 id="heading" class="text-xl font-semibold"></h3>
-                <p id="body" class="mt-2"></p>
-            </div>
-            <button
-                type="button"
-                title="Toggle all rows"
-                id="toggle-expand"
-                class="hover:text-primary-900 focus-visible:border-b-primary-800
-                    relative ml-3 border-b-4 border-b-transparent px-2
-                    text-neutral-600 transition-colors duration-500 *:size-5
-                    *:overflow-visible *:fill-current **:origin-center
-                    **:transition-all hover:cursor-pointer focus:outline-none
-                    [&_.down]:[transform:translateY(15%)]
-                    [&_.up]:[transform:translateY(-15%)]
-                    [&.active_.down]:[transform:scaleY(-1)_translateY(-70%)]
-                    [&.active_.up]:[transform:scaleY(-1)_translateY(70%)]"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    data-pdc-delete="Toggle Expenses"
-                    class="fill-current"
-                    viewBox="0 0 16 16"
-                >
-                    <path
-                        class="down"
-                        fill-rule="evenodd"
-                        d="M3.646 14.854a.5.5 0 0 0 .708 0L8 11.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708"
-                    />
-                    <path
-                        fill-rule="evenodd"
-                        d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8"
-                    />
-                    <path
-                        class="up"
-                        fill-rule="evenodd"
-                        d="M3.646 1.146a.5.5 0 0 1 .708 0L8 4.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708"
-                    />
-                </svg>
-            </button>
-        </div>
-
-        <!-- Rows -->
-        <div
-            id="rows"
-            class="overflow-hidden [transition:height_0.7s_ease]"
-        ></div>
-    </div>
-
-    <!-- Totals -->
-    <div id="total-amounts" class="my-8 px-3 text-lg">
-        <div class="flex">
-            <p class="grow">M&IE</p>
-            <p id="mie-subtotal" class="text-right">$0.00</p>
-        </div>
-        <div class="flex">
-            <p class="grow">Lodging</p>
-            <p id="lodging-subtotal" class="text-right">$0.00</p>
-        </div>
-        <div class="flex font-semibold">
-            <p class="grow">Total</p>
-            <p id="total" class="text-right">$0.00</p>
-        </div>
-    </div>
-
-    <!-- Button print expenses -->
-    <div class="w-full text-center">
-        <pdc-button
-            styled="true"
-            id="save-expenses"
-            text="Save Expenses"
-            title="Save expenses"
-        ></pdc-button>
-    </div>
-</div>
-
-<!-- Print section-->
-<div class="hidden w-full print:block">
-    <!-- Print heading, body-->
-    <h3 id="heading-print" class="mt-2.5 text-xl font-semibold"></h3>
-    <p id="body-print" class="text-sm"></p>
-
-    <!-- Print rates table, sources -->
-    <div class="mt-8 w-full">
-        <h3 class="mb-2.5 text-xl font-semibold">Rates</h3>
-        <table
-            class="w-full table-auto **:text-center **:align-middle **:text-xs"
-        >
-            <thead>
-                <tr class="border-t-2 border-b-2 *:px-2 *:font-semibold">
-                    <th class="w-[12.5%] border-r-2" rowspan="2">
-                        Eff.<br />Date
-                    </th>
-                    <th class="w-[22%] border-r-2" rowspan="2">Location</th>
-                    <th class="border-r-2 py-1.5" colspan="4">Maximums</th>
-                    <th colspan="3">Deductions</th>
-                </tr>
-                <tr class="*:font-base border-b-3 *:px-2">
-                    <th>Lodging</th>
-                    <th class="py-1.5">
-                        M&IE<br /><span class="font-normal">(Full)</span>
-                    </th>
-                    <th>
-                        M&IE<br /><span class="font-normal">(First/Last)</span>
-                    </th>
-                    <th class="border-r-2">Incid.</th>
-                    <th>Break.</th>
-                    <th>Lunch</th>
-                    <th>Dinner</th>
-                </tr>
-            </thead>
-            <tbody id="rates-table"></tbody>
-        </table>
-        <!-- Sources -->
-        <div
-            class="**:pb-2.5 **:text-xs [&>a]:ml-5 [&>a]:list-item [&>a]:pl-2.5"
-            id="sources"
-        >
-            <p class="pt-2.5">Source:</p>
-        </div>
-    </div>
-
-    <!-- Print expenses table -->
-    <div class="mt-8 w-full">
-        <h3 class="mb-2.5 text-xl font-semibold">Expenses</h3>
-
-        <table class="w-full table-fixed **:align-middle **:text-xs">
-            <thead>
-                <tr class="border-t-2 border-b-3 *:p-3 *:font-semibold">
-                    <th class="w-[12.5%] text-center" rowspan="2">Date</th>
-                    <th class="w-[40%] text-left" rowspan="2">
-                        Location
-                        <br />
-                        <span class="font-normal">Deductions</span>
-                    </th>
-                    <th class="text-right">M&IE</th>
-                    <th class="text-right">Lodging</th>
-                    <th class="text-right">Total</th>
-                </tr>
-            </thead>
-            <tbody
-                class="**:align-middle [&_td]:p-3 [&_tr]:border-b-2"
-                id="expenses-table"
-            ></tbody>
-        </table>
-    </div>
-</div>