display dates in table

src/components/app-pagination/AppPaginationElement.ts

@@ -2,6 +2,7 @@ import { attr, controller, target } from '@github/catalyst';
 import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
+import dayjs from 'dayjs';
 
 @controller
 class AppPaginationElement extends BaseComponentElement {
@@ -36,7 +37,7 @@ class AppPaginationElement extends BaseComponentElement {
 		this.fetchFunc = fetchFunc;
 		if (autoInit) {
 			const options = {
-				rpp: this.rpp || 5,
+				rpp: this.rpp || 10,
 				page: this.page || 1,
 			};
 			this.executeFetch(options);
@@ -100,7 +101,7 @@ class AppPaginationElement extends BaseComponentElement {
 		const renderItem = this.customRenderItem
 			? this.customRenderItem
 			: (item, iter) => html`<tr class="${this.colLayout ? this.colLayout : ''}">
-					<td class="--left">${iter + 1 + rpp * (page - 1)}</td>
+					<td class="--left">${dayjs(item.transactionDate).format("MMM DD 'YY")}</td>
 					<td class="--left">${item.description}</td>
 					<td class="balance-cell --right">
 						<span
@@ -138,7 +139,7 @@ class AppPaginationElement extends BaseComponentElement {
 				const pageRange = Math.ceil(totalItems / rpp);
 				return html`
 					<div class="paginate">
-						<span class="--total">${totalItems} Total Items</span>
+						<span class="--total">(${items?.length}) / ${totalItems} Total Items</span>
 						<div class="--footer">
 							<span class="--pages">Page ${page} of ${pageRange}</span>
 							<button

src/components/input-field/InputFieldElement.ts

@@ -13,6 +13,7 @@ class InputFieldElement extends BaseComponentElement {
 	@attr type: string;
 	@attr label: string;
 	@attr rules: string;
+	@attr pattern: string;
 	@attr customAction: string;
 	@target main: HTMLElement;
 	@target inp: HTMLElement;
@@ -102,6 +103,20 @@ class InputFieldElement extends BaseComponentElement {
 		};
 
 		const renderInput = (type) => {
+			if (this.pattern) {
+				return html` <input
+					type="${this.type}"
+					pattern="${this.pattern}"
+					step="0.01"
+					data-target="input-field.inp"
+					id="${this.randId}"
+					app-action="
+                    input:input-field#inputChange
+                    blur:input-field#validateDisplay
+					${this.customAction ? this.customAction : ''}
+                "
+				/>`;
+			}
 			return html` <input
 				type="${this.type}"
 				data-target="input-field.inp"

src/pages/subscription-create/SubscriptionCreateElement.ts

@@ -186,6 +186,21 @@ class SubscriptionCreateElement extends BasePageElement {
 			></input-field>`;
 		};
 
+		const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
+			if (hide) {
+				return html``;
+			}
+			return html`<input-field
+				data-type="number"
+				data-pattern="${pattern}"
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="transaction-create.inputs"
+				data-rules="${rules}"
+				custom-action="${customAction}"
+			></input-field>`;
+		};
+
 		const renderDropdown = (fetch, name, label, rules, hide?) => {
 			if (hide) {
 				return html``;
@@ -200,7 +215,7 @@ class SubscriptionCreateElement extends BasePageElement {
 		};
 		return html`
 				<div slot="inputs">
-					${renderInput('number', 'amount', 'Amount', 'required')}
+					${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
 					${renderInput('text', 'description', 'Description', 'required')}
 					${renderInput('date', 'startDate', 'Start date', 'required')}
 					${renderInput('checkbox', 'hasEnd', 'Existing End Date', '', false, 'change:subscription-create#onCheck')}

src/pages/transaction-create/TransactionCreateElement.ts

@@ -150,6 +150,21 @@ class TransactionCreateElement extends BasePageElement {
 			></input-field>`;
 		};
 
+		const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
+			if (hide) {
+				return html``;
+			}
+			return html`<input-field
+				data-type="number"
+				data-pattern="${pattern}"
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="transaction-create.inputs"
+				data-rules="${rules}"
+				custom-action="${customAction}"
+			></input-field>`;
+		};
+
 		const renderDropdown = (fetch, name, label, rules, hide?) => {
 			if (hide) {
 				return html``;
@@ -169,7 +184,7 @@ class TransactionCreateElement extends BasePageElement {
 				data-has-cancel="true"
 				data-target="transaction-create.appForm"
 			>
-				${renderInput('number', 'amount', 'Amount', 'required')}
+				${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
 				${renderInput('text', 'description', 'Description', 'required')}
 				${renderInput('date', 'transactionDate', 'Transaction date', 'required')}
 				${renderDropdown(