@rolatech/angular-billing 20.2.0 → 20.2.2-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, Component, inject, signal,
|
|
2
|
+
import { input, output, Component, ViewEncapsulation, inject, signal, model } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DatePipe, KeyValuePipe } from '@angular/common';
|
|
5
5
|
import * as i1$2 from '@angular/forms';
|
|
@@ -19,13 +19,13 @@ import * as i7 from '@angular/material/select';
|
|
|
19
19
|
import { MatSelectModule } from '@angular/material/select';
|
|
20
20
|
import * as i1$1 from '@angular/router';
|
|
21
21
|
import { RouterModule, RouterLink } from '@angular/router';
|
|
22
|
-
import { BaseComponent, ContainerComponent, TabsComponent, TabComponent, ToolbarComponent, ListComponent, EmptyComponent, FilterComponent, MaterialModule } from '@rolatech/angular-components';
|
|
22
|
+
import { Skeleton, BaseComponent, ContainerComponent, TabsComponent, TabComponent, ToolbarComponent, ListComponent, EmptyComponent, FilterComponent, MaterialModule } from '@rolatech/angular-components';
|
|
23
23
|
import { PricePipe } from '@rolatech/angular-common';
|
|
24
24
|
import { InvoiceService, PaymentService } from '@rolatech/angular-services';
|
|
25
25
|
import { Title } from '@angular/platform-browser';
|
|
26
26
|
import * as i8 from '@angular/material/paginator';
|
|
27
27
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
28
|
-
import {
|
|
28
|
+
import { map, distinctUntilChanged, switchMap, finalize } from 'rxjs';
|
|
29
29
|
import * as i9 from '@angular/material/card';
|
|
30
30
|
import { MatCardModule } from '@angular/material/card';
|
|
31
31
|
import * as i8$1 from '@angular/material/divider';
|
|
@@ -104,6 +104,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
104
104
|
args: [{ selector: 'rolatech-invoice-header', imports: [], template: "<div class=\"flex items-center justify-between font-bold h-11 px-3\">\n <div class=\"flex items-center\">\n <div class=\"font-bold w-[180px] max-w-[180px]\">ID</div>\n </div>\n <div class=\"flex items-center gap-3\">\n <div class=\"font-bold\">Total</div>\n </div>\n <div class=\"flex items-center gap-3\">\n <div class=\"font-bold\">Status</div>\n <div class=\"font-bold w-[100px]\">Date</div>\n <div class=\"font-bold m-w-[80px]\">Download</div>\n </div>\n</div>\n" }]
|
|
105
105
|
}] });
|
|
106
106
|
|
|
107
|
+
class InvoiceHeaderSkeleton {
|
|
108
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceHeaderSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: InvoiceHeaderSkeleton, isStandalone: true, selector: "rolatech-invoice-header-skeleton", ngImport: i0, template: "<div class=\"grid grid-cols-6 h-11 p-3 gap-3\">\n <rolatech-skeleton class=\"col-span-1\"></rolatech-skeleton>\n <rolatech-skeleton class=\"col-start-3 col-span-2\"></rolatech-skeleton>\n <rolatech-skeleton class=\"col-start-6 col-span-1\"></rolatech-skeleton>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
110
|
+
}
|
|
111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceHeaderSkeleton, decorators: [{
|
|
112
|
+
type: Component,
|
|
113
|
+
args: [{ selector: 'rolatech-invoice-header-skeleton', imports: [Skeleton], encapsulation: ViewEncapsulation.None, template: "<div class=\"grid grid-cols-6 h-11 p-3 gap-3\">\n <rolatech-skeleton class=\"col-span-1\"></rolatech-skeleton>\n <rolatech-skeleton class=\"col-start-3 col-span-2\"></rolatech-skeleton>\n <rolatech-skeleton class=\"col-start-6 col-span-1\"></rolatech-skeleton>\n</div>\n" }]
|
|
114
|
+
}] });
|
|
115
|
+
|
|
116
|
+
class InvoiceItemSkeleton {
|
|
117
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceItemSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
118
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: InvoiceItemSkeleton, isStandalone: true, selector: "rolatech-invoice-item-skeleton", ngImport: i0, template: "<div class=\"grid grid-cols-6 place-content-center h-16 p-3 gap-3\">\n <rolatech-skeleton class=\"col-span-1 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"col-start-3 col-span-2 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"col-start-6 col-span-1 h-4\"></rolatech-skeleton>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
119
|
+
}
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceItemSkeleton, decorators: [{
|
|
121
|
+
type: Component,
|
|
122
|
+
args: [{ selector: 'rolatech-invoice-item-skeleton', imports: [Skeleton], encapsulation: ViewEncapsulation.None, template: "<div class=\"grid grid-cols-6 place-content-center h-16 p-3 gap-3\">\n <rolatech-skeleton class=\"col-span-1 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"col-start-3 col-span-2 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"col-start-6 col-span-1 h-4\"></rolatech-skeleton>\n</div>\n" }]
|
|
123
|
+
}] });
|
|
124
|
+
|
|
107
125
|
class InvoiceIndexComponent extends BaseComponent {
|
|
108
126
|
constructor() {
|
|
109
127
|
super(...arguments);
|
|
@@ -113,25 +131,31 @@ class InvoiceIndexComponent extends BaseComponent {
|
|
|
113
131
|
type: '',
|
|
114
132
|
status: '',
|
|
115
133
|
};
|
|
134
|
+
this.loading = false;
|
|
116
135
|
this.invoiceType = InvoiceType;
|
|
117
136
|
this.invoiceStatus = InvoiceStatus;
|
|
118
137
|
this.links = [
|
|
119
138
|
{
|
|
120
|
-
name: '
|
|
139
|
+
name: 'All',
|
|
121
140
|
icon: 'dashboard',
|
|
122
141
|
},
|
|
123
142
|
{
|
|
124
|
-
name: '
|
|
143
|
+
name: 'Created',
|
|
125
144
|
icon: 'category',
|
|
126
145
|
status: 'created',
|
|
127
146
|
},
|
|
147
|
+
{
|
|
148
|
+
name: 'Issued',
|
|
149
|
+
icon: 'category',
|
|
150
|
+
status: 'issued',
|
|
151
|
+
},
|
|
128
152
|
{
|
|
129
153
|
name: 'Paid',
|
|
130
154
|
icon: 'category',
|
|
131
155
|
status: 'paid',
|
|
132
156
|
},
|
|
133
157
|
];
|
|
134
|
-
this.invoices = [];
|
|
158
|
+
this.invoices = signal([], ...(ngDevMode ? [{ debugName: "invoices" }] : []));
|
|
135
159
|
this.select = 0;
|
|
136
160
|
this.filter = false;
|
|
137
161
|
this.length = 100;
|
|
@@ -140,7 +164,42 @@ class InvoiceIndexComponent extends BaseComponent {
|
|
|
140
164
|
this.pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
|
|
141
165
|
}
|
|
142
166
|
ngOnInit() {
|
|
143
|
-
this.
|
|
167
|
+
const sub = this.route.queryParamMap
|
|
168
|
+
.pipe(map((p) => {
|
|
169
|
+
const page = p.get('page') ? Number(p.get('page')) : 1;
|
|
170
|
+
this.pageIndex.set(Math.max(page - 1, 0));
|
|
171
|
+
const status = p.get('status') || undefined;
|
|
172
|
+
let filter = '';
|
|
173
|
+
if (status) {
|
|
174
|
+
this.select = this.links.findIndex((item) => item.status === status);
|
|
175
|
+
filter = `status:${status?.toUpperCase()}`;
|
|
176
|
+
}
|
|
177
|
+
return {
|
|
178
|
+
page,
|
|
179
|
+
filter,
|
|
180
|
+
limit: p.get('limit') ? Number(p.get('limit')) : 15,
|
|
181
|
+
sort: p.get('sort') || undefined,
|
|
182
|
+
};
|
|
183
|
+
}),
|
|
184
|
+
// Cheap deep compare via JSON to avoid spam calls when nothing changed
|
|
185
|
+
map((o) => JSON.stringify(o)), distinctUntilChanged(), map((s) => JSON.parse(s)), switchMap((params) => {
|
|
186
|
+
this.loading = true;
|
|
187
|
+
params['sort'] = 'updatedAt desc';
|
|
188
|
+
return this.invoiceService.me(params).pipe(finalize(() => (this.loading = false)));
|
|
189
|
+
}))
|
|
190
|
+
.subscribe({
|
|
191
|
+
next: (res) => {
|
|
192
|
+
this.invoices.set(res.data);
|
|
193
|
+
this.meta = res.meta;
|
|
194
|
+
this.length = res.meta.pagination.count;
|
|
195
|
+
},
|
|
196
|
+
error: () => {
|
|
197
|
+
this.invoices.set([]);
|
|
198
|
+
this.length = 0;
|
|
199
|
+
},
|
|
200
|
+
});
|
|
201
|
+
// // auto-unsubscribe on destroy
|
|
202
|
+
this.destroyRef.onDestroy(() => sub.unsubscribe());
|
|
144
203
|
}
|
|
145
204
|
find() {
|
|
146
205
|
const options = {
|
|
@@ -152,8 +211,7 @@ class InvoiceIndexComponent extends BaseComponent {
|
|
|
152
211
|
}
|
|
153
212
|
this.invoiceService.me(options).subscribe({
|
|
154
213
|
next: (res) => {
|
|
155
|
-
|
|
156
|
-
this.invoices = res.data;
|
|
214
|
+
this.invoices.set(res.data);
|
|
157
215
|
},
|
|
158
216
|
});
|
|
159
217
|
}
|
|
@@ -183,7 +241,7 @@ class InvoiceIndexComponent extends BaseComponent {
|
|
|
183
241
|
});
|
|
184
242
|
}
|
|
185
243
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InvoiceIndexComponent, isStandalone: true, selector: "rolatech-invoice-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n <rolatech-toolbar title=\"Invoices\" large>\n <button mat-button (click)=\"filter = !filter\">\n <span>Filter</span>\n <mat-icon>tune</mat-icon>\n </button>\n </rolatech-toolbar>\n <rolatech-filter>\n <div class=\"collapsed\" [class.expanded]=\"filter\">\n <div\n class=\"min-w-[256px] md:min-w-[320px] px-3 h-full flex flex-row md:flex-col md:h-full items-center md:items-start shadow-inner shadow-light-400 md:shadow-none overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n >\n <div class=\"flex items-center gap-3 mt-2\">\n <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n <mat-select name=\"type\" placeholder=\"Type\" [(ngModel)]=\"filterOptions.type\">\n @for (type of invoiceType | keyvalue; track type) {\n <mat-option [value]=\"type.key\">\n {{ type.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <mat-form-field subscriptSizing=\"dynamic\">\n <mat-select [compareWith]=\"statusCompareFn\" placeholder=\"Status\" [(ngModel)]=\"filterOptions.status\">\n @for (status of invoiceStatus | keyvalue; track status) {\n <mat-option [value]=\"status.key\">\n {{ status.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <div>\n <button mat-flat-button (click)=\"find()\">Search</button>\n <button mat-stroked-button (click)=\"resetFilter()\" class=\"ml-3\">Reset</button>\n </div>\n </div>\n </div>\n </div>\n </rolatech-filter>\n <rolatech-tabs [select]=\"select\">\n @for (item of links; track item) {\n @if (item.status) {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n } @else {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n }\n }\n </rolatech-tabs>\n <rolatech-list>\n @if (
|
|
244
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InvoiceIndexComponent, isStandalone: true, selector: "rolatech-invoice-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n <rolatech-toolbar title=\"Invoices\" large>\n <button mat-button (click)=\"filter = !filter\">\n <span>Filter</span>\n <mat-icon>tune</mat-icon>\n </button>\n </rolatech-toolbar>\n <rolatech-filter>\n <div class=\"collapsed\" [class.expanded]=\"filter\">\n <div\n class=\"min-w-[256px] md:min-w-[320px] px-3 h-full flex flex-row md:flex-col md:h-full items-center md:items-start shadow-inner shadow-light-400 md:shadow-none overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n >\n <div class=\"flex items-center gap-3 mt-2\">\n <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n <mat-select name=\"type\" placeholder=\"Type\" [(ngModel)]=\"filterOptions.type\">\n @for (type of invoiceType | keyvalue; track type) {\n <mat-option [value]=\"type.key\">\n {{ type.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <mat-form-field subscriptSizing=\"dynamic\">\n <mat-select [compareWith]=\"statusCompareFn\" placeholder=\"Status\" [(ngModel)]=\"filterOptions.status\">\n @for (status of invoiceStatus | keyvalue; track status) {\n <mat-option [value]=\"status.key\">\n {{ status.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <div>\n <button mat-flat-button (click)=\"find()\">Search</button>\n <button mat-stroked-button (click)=\"resetFilter()\" class=\"ml-3\">Reset</button>\n </div>\n </div>\n </div>\n </div>\n </rolatech-filter>\n <rolatech-tabs [select]=\"select\">\n @for (item of links; track item) {\n @if (item.status) {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n } @else {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n }\n }\n </rolatech-tabs>\n <rolatech-list>\n @if (loading) {\n <rolatech-invoice-header-skeleton></rolatech-invoice-header-skeleton>\n @for (dummy of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; track dummy) {\n <rolatech-invoice-item-skeleton></rolatech-invoice-item-skeleton>\n }\n } @else {\n @if (invoices()) {\n <rolatech-invoice-header></rolatech-invoice-header>\n @for (item of invoices(); track item) {\n <rolatech-invoice-item [routerLink]=\"['./', item.id]\" [invoice]=\"item\"></rolatech-invoice-item>\n }\n } @else {\n <rolatech-empty></rolatech-empty>\n }\n }\n </rolatech-list>\n @if (!loading) {\n <mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageIndex]=\"pageIndex()\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPage($event)\"\n hidePageSize\n showFirstLastButtons\n >\n </mat-paginator>\n }\n</rolatech-container>\n", styles: [".collapsed{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: InvoiceItem, selector: "rolatech-invoice-item", inputs: ["invoice"], outputs: ["download"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: FilterComponent, selector: "rolatech-filter" }, { kind: "component", type: InvoiceHeader, selector: "rolatech-invoice-header" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: InvoiceHeaderSkeleton, selector: "rolatech-invoice-header-skeleton" }, { kind: "component", type: InvoiceItemSkeleton, selector: "rolatech-invoice-item-skeleton" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
187
245
|
}
|
|
188
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceIndexComponent, decorators: [{
|
|
189
247
|
type: Component,
|
|
@@ -209,7 +267,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
209
267
|
KeyValuePipe,
|
|
210
268
|
InvoiceHeader,
|
|
211
269
|
MatPaginatorModule,
|
|
212
|
-
|
|
270
|
+
InvoiceHeaderSkeleton,
|
|
271
|
+
InvoiceItemSkeleton,
|
|
272
|
+
], encapsulation: ViewEncapsulation.None, template: "<rolatech-container>\n <rolatech-toolbar title=\"Invoices\" large>\n <button mat-button (click)=\"filter = !filter\">\n <span>Filter</span>\n <mat-icon>tune</mat-icon>\n </button>\n </rolatech-toolbar>\n <rolatech-filter>\n <div class=\"collapsed\" [class.expanded]=\"filter\">\n <div\n class=\"min-w-[256px] md:min-w-[320px] px-3 h-full flex flex-row md:flex-col md:h-full items-center md:items-start shadow-inner shadow-light-400 md:shadow-none overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n >\n <div class=\"flex items-center gap-3 mt-2\">\n <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n <mat-select name=\"type\" placeholder=\"Type\" [(ngModel)]=\"filterOptions.type\">\n @for (type of invoiceType | keyvalue; track type) {\n <mat-option [value]=\"type.key\">\n {{ type.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <mat-form-field subscriptSizing=\"dynamic\">\n <mat-select [compareWith]=\"statusCompareFn\" placeholder=\"Status\" [(ngModel)]=\"filterOptions.status\">\n @for (status of invoiceStatus | keyvalue; track status) {\n <mat-option [value]=\"status.key\">\n {{ status.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <div>\n <button mat-flat-button (click)=\"find()\">Search</button>\n <button mat-stroked-button (click)=\"resetFilter()\" class=\"ml-3\">Reset</button>\n </div>\n </div>\n </div>\n </div>\n </rolatech-filter>\n <rolatech-tabs [select]=\"select\">\n @for (item of links; track item) {\n @if (item.status) {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n } @else {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n }\n }\n </rolatech-tabs>\n <rolatech-list>\n @if (loading) {\n <rolatech-invoice-header-skeleton></rolatech-invoice-header-skeleton>\n @for (dummy of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; track dummy) {\n <rolatech-invoice-item-skeleton></rolatech-invoice-item-skeleton>\n }\n } @else {\n @if (invoices()) {\n <rolatech-invoice-header></rolatech-invoice-header>\n @for (item of invoices(); track item) {\n <rolatech-invoice-item [routerLink]=\"['./', item.id]\" [invoice]=\"item\"></rolatech-invoice-item>\n }\n } @else {\n <rolatech-empty></rolatech-empty>\n }\n }\n </rolatech-list>\n @if (!loading) {\n <mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageIndex]=\"pageIndex()\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPage($event)\"\n hidePageSize\n showFirstLastButtons\n >\n </mat-paginator>\n }\n</rolatech-container>\n", styles: [".collapsed{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.expanded{max-height:1000px}\n"] }]
|
|
213
273
|
}] });
|
|
214
274
|
|
|
215
275
|
class InvoiceUser {
|
|
@@ -263,6 +323,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
263
323
|
}, template: "<div class=\"rounded-xl border border-[--rt-border-color] p-4 grid space-y-3\">\n <h2 class=\"text-sm font-semibold text-[--rt-text-secondary]\">Totals</h2>\n\n <dl class=\"space-y-2 text-sm\">\n <div class=\"flex justify-between\">\n <dt class=\"text-[--rt-text-secondary]\">Subtotal</dt>\n <dd class=\"font-medium\">{{ subtotal() | price }}</dd>\n </div>\n\n <div class=\"flex justify-between\">\n <dt class=\"text-[--rt-text-secondary]\">VAT</dt>\n <dd class=\"font-medium\">{{ tax() | price}}</dd>\n </div>\n\n @if (credit() > 0) {\n <div class=\"flex justify-between\">\n <dt class=\"text-[--rt-text-secondary]\">Less holding deposit</dt>\n <dd class=\"font-medium text-red-600\">\u2212{{ credit() | price }}</dd>\n </div>\n }\n\n <div class=\"border-t border-dashed border-[--rt-border-color] my-2\"></div>\n\n <div class=\"flex justify-between items-center\">\n <dt class=\"text-[--rt-text-secondary] font-semibold\">Total</dt>\n <dd class=\"text-lg font-semibold\">{{ total() | price }}</dd>\n </div>\n </dl>\n</div>\n" }]
|
|
264
324
|
}], propDecorators: { tax: [{ type: i0.Input, args: [{ isSignal: true, alias: "tax", required: true }] }], credit: [{ type: i0.Input, args: [{ isSignal: true, alias: "credit", required: false }] }], subtotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtotal", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }] } });
|
|
265
325
|
|
|
326
|
+
class InvoiceUserSkeleton {
|
|
327
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceUserSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
328
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: InvoiceUserSkeleton, isStandalone: true, selector: "rolatech-invoice-user-skeleton", ngImport: i0, template: "<div class=\"rounded-xl border border-[--rt-border-color] p-4 grid space-y-3\">\n <rolatech-skeleton class=\"w-12 h-6\"></rolatech-skeleton>\n <div class=\"flex flex-col gap-2\">\n <rolatech-skeleton class=\"w-28 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-32 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-36 h-4\"></rolatech-skeleton>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
329
|
+
}
|
|
330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceUserSkeleton, decorators: [{
|
|
331
|
+
type: Component,
|
|
332
|
+
args: [{ selector: 'rolatech-invoice-user-skeleton', imports: [Skeleton], encapsulation: ViewEncapsulation.None, template: "<div class=\"rounded-xl border border-[--rt-border-color] p-4 grid space-y-3\">\n <rolatech-skeleton class=\"w-12 h-6\"></rolatech-skeleton>\n <div class=\"flex flex-col gap-2\">\n <rolatech-skeleton class=\"w-28 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-32 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-36 h-4\"></rolatech-skeleton>\n </div>\n</div>\n" }]
|
|
333
|
+
}] });
|
|
334
|
+
|
|
335
|
+
class InvoiceSummarySkeleton {
|
|
336
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceSummarySkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
337
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: InvoiceSummarySkeleton, isStandalone: true, selector: "rolatech-invoice-summary-skeleton", ngImport: i0, template: "<div class=\"rounded-xl border border-[--rt-border-color] p-4 grid space-y-3\">\n <rolatech-skeleton class=\"w-12 h-6\"></rolatech-skeleton>\n\n <dl class=\"space-y-2 text-sm\">\n <div class=\"flex justify-between\">\n <rolatech-skeleton class=\"w-28 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-11 h-4\"></rolatech-skeleton>\n </div>\n <div class=\"flex justify-between\">\n <rolatech-skeleton class=\"w-28 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-11 h-4\"></rolatech-skeleton>\n </div>\n <div class=\"flex justify-between\">\n <rolatech-skeleton class=\"w-32 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-11 h-4\"></rolatech-skeleton>\n </div>\n\n <div class=\"border-t border-dashed border-[--rt-border-color] my-2\"></div>\n\n <div class=\"flex justify-between\">\n <rolatech-skeleton class=\"w-11 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-28 h-4\"></rolatech-skeleton>\n </div>\n </dl>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
338
|
+
}
|
|
339
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceSummarySkeleton, decorators: [{
|
|
340
|
+
type: Component,
|
|
341
|
+
args: [{ selector: 'rolatech-invoice-summary-skeleton', imports: [Skeleton], encapsulation: ViewEncapsulation.None, template: "<div class=\"rounded-xl border border-[--rt-border-color] p-4 grid space-y-3\">\n <rolatech-skeleton class=\"w-12 h-6\"></rolatech-skeleton>\n\n <dl class=\"space-y-2 text-sm\">\n <div class=\"flex justify-between\">\n <rolatech-skeleton class=\"w-28 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-11 h-4\"></rolatech-skeleton>\n </div>\n <div class=\"flex justify-between\">\n <rolatech-skeleton class=\"w-28 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-11 h-4\"></rolatech-skeleton>\n </div>\n <div class=\"flex justify-between\">\n <rolatech-skeleton class=\"w-32 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-11 h-4\"></rolatech-skeleton>\n </div>\n\n <div class=\"border-t border-dashed border-[--rt-border-color] my-2\"></div>\n\n <div class=\"flex justify-between\">\n <rolatech-skeleton class=\"w-11 h-4\"></rolatech-skeleton>\n <rolatech-skeleton class=\"w-28 h-4\"></rolatech-skeleton>\n </div>\n </dl>\n</div>\n" }]
|
|
342
|
+
}] });
|
|
343
|
+
|
|
344
|
+
class InvoiceLineSkeleton {
|
|
345
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceLineSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
346
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: InvoiceLineSkeleton, isStandalone: true, selector: "rolatech-invoice-line-skeleton", ngImport: i0, template: "<div class=\"flex justify-between py-2\">\n <div class=\"flex w-full\">\n <div class=\"min-w-24 w-36 aspect-video bg-[--rt-raised-background] hover:rounded-none rounded-lg h-fit cursor-pointer\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </div>\n\n <div class=\"w-full ml-3 flex flex-col justify-between\">\n <!-- info -->\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </div>\n <div class=\"text-right p-1\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </div>\n </div>\n <!-- action -->\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex items-center text-sm\"></div>\n </div>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
347
|
+
}
|
|
348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceLineSkeleton, decorators: [{
|
|
349
|
+
type: Component,
|
|
350
|
+
args: [{ selector: 'rolatech-invoice-line-skeleton', imports: [Skeleton], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex justify-between py-2\">\n <div class=\"flex w-full\">\n <div class=\"min-w-24 w-36 aspect-video bg-[--rt-raised-background] hover:rounded-none rounded-lg h-fit cursor-pointer\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </div>\n\n <div class=\"w-full ml-3 flex flex-col justify-between\">\n <!-- info -->\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </div>\n <div class=\"text-right p-1\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </div>\n </div>\n <!-- action -->\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex items-center text-sm\"></div>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
351
|
+
}] });
|
|
352
|
+
|
|
353
|
+
class InvoiceLinesSkeleton {
|
|
354
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceLinesSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
355
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InvoiceLinesSkeleton, isStandalone: true, selector: "rolatech-invoice-lines-skeleton", ngImport: i0, template: "<div class=\"rounded-xl border border-[--rt-border-color] p-4 grid space-y-3\">\n <rolatech-skeleton class=\"w-20 h-6\"></rolatech-skeleton>\n\n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full text-sm border border-[--rt-border-color] rounded-lg\">\n <thead class=\"bg-[--rt-rasied-background]\">\n <tr>\n <th class=\"px-3 py-2 text-left font-medium border-b border-[--rt-border-color]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-center font-medium border-b border-[--rt-border-color] w-20\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-right font-medium border-b border-[--rt-border-color] w-28\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-right font-medium border-b border-[--rt-border-color] w-20\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-right font-medium border-b border-[--rt-border-color] w-28\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-right font-medium border-b border-[--rt-border-color] w-32\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"[&>tr:nth-child(even)]:bg-[--rt-rasied-background]\">\n @for (dummy of [0, 1, 2, 3]; track dummy) {\n <tr>\n <!-- Title -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color]\">\n <rolatech-skeleton class=\"h-6\"></rolatech-skeleton>\n </td>\n\n <!-- Qty -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-center text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n\n <!-- Unit price -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-right text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n\n <!-- VAT rate -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-right text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n <!-- VAT amount -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-right text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n\n <!-- Total -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-right font-semibold text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
356
|
+
}
|
|
357
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceLinesSkeleton, decorators: [{
|
|
358
|
+
type: Component,
|
|
359
|
+
args: [{ selector: 'rolatech-invoice-lines-skeleton', imports: [Skeleton], encapsulation: ViewEncapsulation.None, template: "<div class=\"rounded-xl border border-[--rt-border-color] p-4 grid space-y-3\">\n <rolatech-skeleton class=\"w-20 h-6\"></rolatech-skeleton>\n\n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full text-sm border border-[--rt-border-color] rounded-lg\">\n <thead class=\"bg-[--rt-rasied-background]\">\n <tr>\n <th class=\"px-3 py-2 text-left font-medium border-b border-[--rt-border-color]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-center font-medium border-b border-[--rt-border-color] w-20\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-right font-medium border-b border-[--rt-border-color] w-28\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-right font-medium border-b border-[--rt-border-color] w-20\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-right font-medium border-b border-[--rt-border-color] w-28\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n <th class=\"px-3 py-2 text-right font-medium border-b border-[--rt-border-color] w-32\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"[&>tr:nth-child(even)]:bg-[--rt-rasied-background]\">\n @for (dummy of [0, 1, 2, 3]; track dummy) {\n <tr>\n <!-- Title -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color]\">\n <rolatech-skeleton class=\"h-6\"></rolatech-skeleton>\n </td>\n\n <!-- Qty -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-center text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n\n <!-- Unit price -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-right text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n\n <!-- VAT rate -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-right text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n <!-- VAT amount -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-right text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n\n <!-- Total -->\n <td class=\"px-3 py-2 border-t border-[--rt-border-color] text-right font-semibold text-[--rt-text-secondary]\">\n <rolatech-skeleton class=\"h-4\"></rolatech-skeleton>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n" }]
|
|
360
|
+
}] });
|
|
361
|
+
|
|
266
362
|
class InvoiceDetailComponent extends BaseComponent {
|
|
267
363
|
constructor() {
|
|
268
364
|
super(...arguments);
|
|
@@ -271,6 +367,7 @@ class InvoiceDetailComponent extends BaseComponent {
|
|
|
271
367
|
this.invoice = signal(null, ...(ngDevMode ? [{ debugName: "invoice" }] : []));
|
|
272
368
|
this.status = InvoiceStatus;
|
|
273
369
|
this.paying = false;
|
|
370
|
+
this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
274
371
|
}
|
|
275
372
|
ngOnInit() {
|
|
276
373
|
this.route.params.subscribe((params) => {
|
|
@@ -295,9 +392,14 @@ class InvoiceDetailComponent extends BaseComponent {
|
|
|
295
392
|
});
|
|
296
393
|
}
|
|
297
394
|
get(id) {
|
|
395
|
+
this.loading.set(true);
|
|
298
396
|
this.invoiceService.get(id).subscribe({
|
|
299
397
|
next: (res) => {
|
|
300
398
|
this.invoice.set(res.data);
|
|
399
|
+
this.loading.set(false);
|
|
400
|
+
},
|
|
401
|
+
error: () => {
|
|
402
|
+
this.loading.set(false);
|
|
301
403
|
},
|
|
302
404
|
});
|
|
303
405
|
}
|
|
@@ -333,11 +435,23 @@ class InvoiceDetailComponent extends BaseComponent {
|
|
|
333
435
|
});
|
|
334
436
|
}
|
|
335
437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
336
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InvoiceDetailComponent, isStandalone: true, selector: "rolatech-invoice-detail", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n <rolatech-toolbar [title]=\"invoice() ? status[invoice()!.status] : ''\" large link=\"../\"> </rolatech-toolbar>\n @if (invoice(); as invoice) {\n
|
|
438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InvoiceDetailComponent, isStandalone: true, selector: "rolatech-invoice-detail", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n <rolatech-toolbar [title]=\"invoice() ? status[invoice()!.status] : ''\" large link=\"../\"> </rolatech-toolbar>\n @if (loading()) {\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n <div class=\"grid lg:col-span-2 space-y-4\">\n <rolatech-invoice-user-skeleton></rolatech-invoice-user-skeleton>\n <rolatech-invoice-lines-skeleton></rolatech-invoice-lines-skeleton>\n </div>\n <div class=\"space-y-4\">\n <rolatech-invoice-summary-skeleton></rolatech-invoice-summary-skeleton>\n </div>\n </div>\n } @else {\n @if (invoice(); as invoice) {\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n <div class=\"grid lg:col-span-2 space-y-4\">\n <rolatech-invoice-user\n [firstName]=\"invoice.firstName\"\n [lastName]=\"invoice.lastName\"\n [email]=\"invoice.email\"\n [phone]=\"invoice.phone\"\n ></rolatech-invoice-user>\n @if (invoice?.lines; as lines) {\n <rolatech-invoice-lines [lines]=\"lines\"></rolatech-invoice-lines>\n }\n </div>\n <div class=\"space-y-4\">\n <rolatech-invoice-summary\n [tax]=\"invoice.vatTotal\"\n [credit]=\"invoice.holdingDepositApplied\"\n [subtotal]=\"invoice.subtotal\"\n [total]=\"invoice.total\"\n ></rolatech-invoice-summary>\n <div class=\"px-2\">\n <div class=\"flex items-baseline justify-between py-1\">\n <span class=\"font-medium min-w-20\" i18n>Note</span>\n <span class=\"text-sm\">{{ invoice.note || 'Null' }}</span>\n </div>\n @if (invoice.status.toString() === 'CREATED' || invoice.status.toString() === 'PAID') {\n <div class=\"flex items-center justify-between py-1\">\n <span class=\"font-medium\" i18n>Payment method</span>\n <span class=\"text-sm\"> Stripe</span>\n </div>\n }\n @if (invoice.status.toString() === 'CREATED') {\n <div class=\"py-3\">\n <div class=\"flex items-center justify-end\">\n <button mat-flat-button [disabled]=\"paying\" class=\"w-full min-h-11\" (click)=\"pay()\" i18n>\n {{ paying ? 'Processing' : 'Pay' }}\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n <div>\n <!-- safe area -->\n <div class=\"pb-16 sm:pb-3\"></div>\n </div>\n }\n }\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: InvoiceUser, selector: "rolatech-invoice-user", inputs: ["firstName", "lastName", "email", "phone"] }, { kind: "component", type: InvoiceLines, selector: "rolatech-invoice-lines", inputs: ["lines"] }, { kind: "component", type: InvoiceSummary, selector: "rolatech-invoice-summary", inputs: ["tax", "credit", "subtotal", "total"] }, { kind: "component", type: InvoiceUserSkeleton, selector: "rolatech-invoice-user-skeleton" }, { kind: "component", type: InvoiceSummarySkeleton, selector: "rolatech-invoice-summary-skeleton" }, { kind: "component", type: InvoiceLinesSkeleton, selector: "rolatech-invoice-lines-skeleton" }] }); }
|
|
337
439
|
}
|
|
338
440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceDetailComponent, decorators: [{
|
|
339
441
|
type: Component,
|
|
340
|
-
args: [{ selector: 'rolatech-invoice-detail', imports: [
|
|
442
|
+
args: [{ selector: 'rolatech-invoice-detail', imports: [
|
|
443
|
+
MatButtonModule,
|
|
444
|
+
MatIconModule,
|
|
445
|
+
ContainerComponent,
|
|
446
|
+
ToolbarComponent,
|
|
447
|
+
InvoiceUser,
|
|
448
|
+
InvoiceLines,
|
|
449
|
+
InvoiceSummary,
|
|
450
|
+
InvoiceUserSkeleton,
|
|
451
|
+
InvoiceSummarySkeleton,
|
|
452
|
+
InvoiceLineSkeleton,
|
|
453
|
+
InvoiceLinesSkeleton,
|
|
454
|
+
], template: "<rolatech-container>\n <rolatech-toolbar [title]=\"invoice() ? status[invoice()!.status] : ''\" large link=\"../\"> </rolatech-toolbar>\n @if (loading()) {\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n <div class=\"grid lg:col-span-2 space-y-4\">\n <rolatech-invoice-user-skeleton></rolatech-invoice-user-skeleton>\n <rolatech-invoice-lines-skeleton></rolatech-invoice-lines-skeleton>\n </div>\n <div class=\"space-y-4\">\n <rolatech-invoice-summary-skeleton></rolatech-invoice-summary-skeleton>\n </div>\n </div>\n } @else {\n @if (invoice(); as invoice) {\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n <div class=\"grid lg:col-span-2 space-y-4\">\n <rolatech-invoice-user\n [firstName]=\"invoice.firstName\"\n [lastName]=\"invoice.lastName\"\n [email]=\"invoice.email\"\n [phone]=\"invoice.phone\"\n ></rolatech-invoice-user>\n @if (invoice?.lines; as lines) {\n <rolatech-invoice-lines [lines]=\"lines\"></rolatech-invoice-lines>\n }\n </div>\n <div class=\"space-y-4\">\n <rolatech-invoice-summary\n [tax]=\"invoice.vatTotal\"\n [credit]=\"invoice.holdingDepositApplied\"\n [subtotal]=\"invoice.subtotal\"\n [total]=\"invoice.total\"\n ></rolatech-invoice-summary>\n <div class=\"px-2\">\n <div class=\"flex items-baseline justify-between py-1\">\n <span class=\"font-medium min-w-20\" i18n>Note</span>\n <span class=\"text-sm\">{{ invoice.note || 'Null' }}</span>\n </div>\n @if (invoice.status.toString() === 'CREATED' || invoice.status.toString() === 'PAID') {\n <div class=\"flex items-center justify-between py-1\">\n <span class=\"font-medium\" i18n>Payment method</span>\n <span class=\"text-sm\"> Stripe</span>\n </div>\n }\n @if (invoice.status.toString() === 'CREATED') {\n <div class=\"py-3\">\n <div class=\"flex items-center justify-end\">\n <button mat-flat-button [disabled]=\"paying\" class=\"w-full min-h-11\" (click)=\"pay()\" i18n>\n {{ paying ? 'Processing' : 'Pay' }}\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n <div>\n <!-- safe area -->\n <div class=\"pb-16 sm:pb-3\"></div>\n </div>\n }\n }\n</rolatech-container>\n" }]
|
|
341
455
|
}] });
|
|
342
456
|
|
|
343
457
|
const invoiceRoutes = [
|
|
@@ -675,7 +789,7 @@ class InvoiceManageDetail extends BaseComponent {
|
|
|
675
789
|
});
|
|
676
790
|
}
|
|
677
791
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceManageDetail, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InvoiceManageDetail, isStandalone: true, selector: "rolatech-invoice-manage-detail", usesInheritance: true, ngImport: i0, template: "<!-- Content -->\n@if (loading()) {\n<div class=\"flex justify-center py-16\">Loading invoice\u2026</div>\n} @else if (!invoice()) {\n<div class=\"flex justify-center py-16\">Invoice not found.</div>\n} @else() { @if (invoice(); as invoice) {\n<rolatech-toolbar [title]=\"status[invoice.status]\" large link=\"../\">\n <div class=\"hidden items-center gap-2 lg:flex\">\n @if (invoice.pdfUrl) {\n <button mat-stroked-button (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-flat-button>Send Email</button>\n <button mat-flat-button (click)=\"edit()\">Edit</button>\n </div>\n <div class=\"block lg:hidden\">\n <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n</rolatech-toolbar>\n<div class=\"px-4\">\n <!-- Breadcrumb / header -->\n <div class=\"flex items-start justify-between gap-4\">\n <div class=\"space-y-1\">\n <nav class=\"flex items-center gap-1\">\n <a routerLink=\"/invoices\" class=\"hover:underline hover:cursor-pointer\">Invoices</a>\n <span>/</span>\n <span>{{invoice?.invoiceNumber ?? invoice!.id}}</span>\n </nav>\n\n <div class=\"flex items-center gap-2 text-sm\">\n <span>Created: {{ invoice.createdAt | date:'dd/MM/yyyy':'Europe/London'}}</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"p-4 lg:p-4 space-y-6\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-
|
|
792
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InvoiceManageDetail, isStandalone: true, selector: "rolatech-invoice-manage-detail", usesInheritance: true, ngImport: i0, template: "<!-- Content -->\n@if (loading()) {\n<div class=\"flex justify-center py-16\">Loading invoice\u2026</div>\n} @else if (!invoice()) {\n<div class=\"flex justify-center py-16\">Invoice not found.</div>\n} @else() { @if (invoice(); as invoice) {\n<rolatech-toolbar [title]=\"status[invoice.status]\" large link=\"../\">\n <div class=\"hidden items-center gap-2 lg:flex\">\n @if (invoice.pdfUrl) {\n <button mat-stroked-button (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-flat-button>Send Email</button>\n <button mat-flat-button (click)=\"edit()\">Edit</button>\n </div>\n <div class=\"block lg:hidden\">\n <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n</rolatech-toolbar>\n<div class=\"px-4\">\n <!-- Breadcrumb / header -->\n <div class=\"flex items-start justify-between gap-4\">\n <div class=\"space-y-1\">\n <nav class=\"flex items-center gap-1\">\n <a routerLink=\"/invoices\" class=\"hover:underline hover:cursor-pointer\">Invoices</a>\n <span>/</span>\n <span>{{invoice?.invoiceNumber ?? invoice!.id}}</span>\n </nav>\n\n <div class=\"flex items-center gap-2 text-sm\">\n <span>Created: {{ invoice.createdAt | date:'dd/MM/yyyy':'Europe/London'}}</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"p-4 lg:p-4 space-y-6\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n <div class=\"grid lg:col-span-2 space-y-4\">\n <rolatech-invoice-user\n [firstName]=\"invoice.firstName\"\n [lastName]=\"invoice.lastName\"\n [email]=\"invoice.email\"\n [phone]=\"invoice.phone\"\n ></rolatech-invoice-user>\n @if (invoice?.lines; as lines) {\n <rolatech-invoice-lines [lines]=\"lines\"></rolatech-invoice-lines>\n }\n </div>\n <div class=\"space-y-4\">\n <rolatech-invoice-summary\n [tax]=\"invoice.vatTotal\"\n [credit]=\"invoice.holdingDepositApplied\"\n [subtotal]=\"invoice.subtotal\"\n [total]=\"invoice.total\"\n ></rolatech-invoice-summary>\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n @if (invoice?.pdfUrl) {\n <button mat-menu-item (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-menu-item>Send Email</button>\n <button mat-menu-item (click)=\"edit()\">Edit</button>\n</mat-menu>\n\n} }\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: InvoiceSummary, selector: "rolatech-invoice-summary", inputs: ["tax", "credit", "subtotal", "total"] }, { kind: "component", type: InvoiceLines, selector: "rolatech-invoice-lines", inputs: ["lines"] }, { kind: "component", type: InvoiceUser, selector: "rolatech-invoice-user", inputs: ["firstName", "lastName", "email", "phone"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
679
793
|
}
|
|
680
794
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InvoiceManageDetail, decorators: [{
|
|
681
795
|
type: Component,
|
|
@@ -688,7 +802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
688
802
|
InvoiceLines,
|
|
689
803
|
InvoiceUser,
|
|
690
804
|
ToolbarComponent,
|
|
691
|
-
], template: "<!-- Content -->\n@if (loading()) {\n<div class=\"flex justify-center py-16\">Loading invoice\u2026</div>\n} @else if (!invoice()) {\n<div class=\"flex justify-center py-16\">Invoice not found.</div>\n} @else() { @if (invoice(); as invoice) {\n<rolatech-toolbar [title]=\"status[invoice.status]\" large link=\"../\">\n <div class=\"hidden items-center gap-2 lg:flex\">\n @if (invoice.pdfUrl) {\n <button mat-stroked-button (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-flat-button>Send Email</button>\n <button mat-flat-button (click)=\"edit()\">Edit</button>\n </div>\n <div class=\"block lg:hidden\">\n <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n</rolatech-toolbar>\n<div class=\"px-4\">\n <!-- Breadcrumb / header -->\n <div class=\"flex items-start justify-between gap-4\">\n <div class=\"space-y-1\">\n <nav class=\"flex items-center gap-1\">\n <a routerLink=\"/invoices\" class=\"hover:underline hover:cursor-pointer\">Invoices</a>\n <span>/</span>\n <span>{{invoice?.invoiceNumber ?? invoice!.id}}</span>\n </nav>\n\n <div class=\"flex items-center gap-2 text-sm\">\n <span>Created: {{ invoice.createdAt | date:'dd/MM/yyyy':'Europe/London'}}</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"p-4 lg:p-4 space-y-6\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-
|
|
805
|
+
], template: "<!-- Content -->\n@if (loading()) {\n<div class=\"flex justify-center py-16\">Loading invoice\u2026</div>\n} @else if (!invoice()) {\n<div class=\"flex justify-center py-16\">Invoice not found.</div>\n} @else() { @if (invoice(); as invoice) {\n<rolatech-toolbar [title]=\"status[invoice.status]\" large link=\"../\">\n <div class=\"hidden items-center gap-2 lg:flex\">\n @if (invoice.pdfUrl) {\n <button mat-stroked-button (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-flat-button>Send Email</button>\n <button mat-flat-button (click)=\"edit()\">Edit</button>\n </div>\n <div class=\"block lg:hidden\">\n <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n</rolatech-toolbar>\n<div class=\"px-4\">\n <!-- Breadcrumb / header -->\n <div class=\"flex items-start justify-between gap-4\">\n <div class=\"space-y-1\">\n <nav class=\"flex items-center gap-1\">\n <a routerLink=\"/invoices\" class=\"hover:underline hover:cursor-pointer\">Invoices</a>\n <span>/</span>\n <span>{{invoice?.invoiceNumber ?? invoice!.id}}</span>\n </nav>\n\n <div class=\"flex items-center gap-2 text-sm\">\n <span>Created: {{ invoice.createdAt | date:'dd/MM/yyyy':'Europe/London'}}</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"p-4 lg:p-4 space-y-6\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n <div class=\"grid lg:col-span-2 space-y-4\">\n <rolatech-invoice-user\n [firstName]=\"invoice.firstName\"\n [lastName]=\"invoice.lastName\"\n [email]=\"invoice.email\"\n [phone]=\"invoice.phone\"\n ></rolatech-invoice-user>\n @if (invoice?.lines; as lines) {\n <rolatech-invoice-lines [lines]=\"lines\"></rolatech-invoice-lines>\n }\n </div>\n <div class=\"space-y-4\">\n <rolatech-invoice-summary\n [tax]=\"invoice.vatTotal\"\n [credit]=\"invoice.holdingDepositApplied\"\n [subtotal]=\"invoice.subtotal\"\n [total]=\"invoice.total\"\n ></rolatech-invoice-summary>\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n @if (invoice?.pdfUrl) {\n <button mat-menu-item (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-menu-item>Send Email</button>\n <button mat-menu-item (click)=\"edit()\">Edit</button>\n</mat-menu>\n\n} }\n" }]
|
|
692
806
|
}] });
|
|
693
807
|
|
|
694
808
|
class InvoiceManageDownload {
|
|
@@ -941,7 +1055,7 @@ class AgentInvoiceDetail extends BaseComponent {
|
|
|
941
1055
|
});
|
|
942
1056
|
}
|
|
943
1057
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AgentInvoiceDetail, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
944
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AgentInvoiceDetail, isStandalone: true, selector: "rolatech-agent-invoice-detail", usesInheritance: true, ngImport: i0, template: "<!-- Content -->\n@if (loading()) {\n<div class=\"flex justify-center py-16\">Loading invoice\u2026</div>\n} @else if (!invoice()) {\n<div class=\"flex justify-center py-16\">Invoice not found.</div>\n} @else() { @if (invoice(); as invoice) {\n<rolatech-toolbar [title]=\"status[invoice.status]\" large link=\"../\">\n <div class=\"hidden items-center gap-2 lg:flex\">\n @if (invoice.pdfUrl) {\n <button mat-stroked-button (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-flat-button>Send Email</button>\n <button mat-flat-button (click)=\"edit()\">Edit</button>\n </div>\n <div class=\"block lg:hidden\">\n <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n</rolatech-toolbar>\n<div class=\"px-4\">\n <!-- Breadcrumb / header -->\n <div class=\"flex items-start justify-between gap-4\">\n <div class=\"space-y-1\">\n <nav class=\"flex items-center gap-1\">\n <a routerLink=\"/invoices\" class=\"hover:underline hover:cursor-pointer\">Invoices</a>\n <span>/</span>\n <span>{{invoice?.invoiceNumber ?? invoice!.id}}</span>\n </nav>\n\n <div class=\"flex items-center gap-2 text-sm\">\n <span>Created: {{ invoice.createdAt | date:'dd/MM/yyyy':'Europe/London'}}</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"p-4\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-
|
|
1058
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AgentInvoiceDetail, isStandalone: true, selector: "rolatech-agent-invoice-detail", usesInheritance: true, ngImport: i0, template: "<!-- Content -->\n@if (loading()) {\n<div class=\"flex justify-center py-16\">Loading invoice\u2026</div>\n} @else if (!invoice()) {\n<div class=\"flex justify-center py-16\">Invoice not found.</div>\n} @else() { @if (invoice(); as invoice) {\n<rolatech-toolbar [title]=\"status[invoice.status]\" large link=\"../\">\n <div class=\"hidden items-center gap-2 lg:flex\">\n @if (invoice.pdfUrl) {\n <button mat-stroked-button (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-flat-button>Send Email</button>\n <button mat-flat-button (click)=\"edit()\">Edit</button>\n </div>\n <div class=\"block lg:hidden\">\n <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n</rolatech-toolbar>\n<div class=\"px-4\">\n <!-- Breadcrumb / header -->\n <div class=\"flex items-start justify-between gap-4\">\n <div class=\"space-y-1\">\n <nav class=\"flex items-center gap-1\">\n <a routerLink=\"/invoices\" class=\"hover:underline hover:cursor-pointer\">Invoices</a>\n <span>/</span>\n <span>{{invoice?.invoiceNumber ?? invoice!.id}}</span>\n </nav>\n\n <div class=\"flex items-center gap-2 text-sm\">\n <span>Created: {{ invoice.createdAt | date:'dd/MM/yyyy':'Europe/London'}}</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"p-4\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n <div class=\"grid lg:col-span-2 space-y-4\">\n @if (invoice.status.toString() === 'PAID') {\n <rolatech-invoice-user\n [firstName]=\"invoice.firstName\"\n [lastName]=\"invoice.lastName\"\n [email]=\"invoice.email\"\n [phone]=\"invoice.phone\"\n ></rolatech-invoice-user>\n } @if (invoice?.lines; as lines) {\n <rolatech-invoice-lines [lines]=\"lines\"></rolatech-invoice-lines>\n }\n </div>\n <div class=\"space-y-4\">\n <rolatech-invoice-summary\n [tax]=\"invoice.vatTotal\"\n [credit]=\"invoice.holdingDepositApplied\"\n [subtotal]=\"invoice.subtotal\"\n [total]=\"invoice.total\"\n ></rolatech-invoice-summary>\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n @if (invoice?.pdfUrl) {\n <button mat-menu-item (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-menu-item>Send Email</button>\n <button mat-menu-item (click)=\"edit()\">Edit</button>\n</mat-menu>\n\n} }\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: InvoiceSummary, selector: "rolatech-invoice-summary", inputs: ["tax", "credit", "subtotal", "total"] }, { kind: "component", type: InvoiceLines, selector: "rolatech-invoice-lines", inputs: ["lines"] }, { kind: "component", type: InvoiceUser, selector: "rolatech-invoice-user", inputs: ["firstName", "lastName", "email", "phone"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
945
1059
|
}
|
|
946
1060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AgentInvoiceDetail, decorators: [{
|
|
947
1061
|
type: Component,
|
|
@@ -955,7 +1069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
955
1069
|
InvoiceLines,
|
|
956
1070
|
InvoiceUser,
|
|
957
1071
|
ToolbarComponent,
|
|
958
|
-
], template: "<!-- Content -->\n@if (loading()) {\n<div class=\"flex justify-center py-16\">Loading invoice\u2026</div>\n} @else if (!invoice()) {\n<div class=\"flex justify-center py-16\">Invoice not found.</div>\n} @else() { @if (invoice(); as invoice) {\n<rolatech-toolbar [title]=\"status[invoice.status]\" large link=\"../\">\n <div class=\"hidden items-center gap-2 lg:flex\">\n @if (invoice.pdfUrl) {\n <button mat-stroked-button (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-flat-button>Send Email</button>\n <button mat-flat-button (click)=\"edit()\">Edit</button>\n </div>\n <div class=\"block lg:hidden\">\n <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n</rolatech-toolbar>\n<div class=\"px-4\">\n <!-- Breadcrumb / header -->\n <div class=\"flex items-start justify-between gap-4\">\n <div class=\"space-y-1\">\n <nav class=\"flex items-center gap-1\">\n <a routerLink=\"/invoices\" class=\"hover:underline hover:cursor-pointer\">Invoices</a>\n <span>/</span>\n <span>{{invoice?.invoiceNumber ?? invoice!.id}}</span>\n </nav>\n\n <div class=\"flex items-center gap-2 text-sm\">\n <span>Created: {{ invoice.createdAt | date:'dd/MM/yyyy':'Europe/London'}}</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"p-4\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-
|
|
1072
|
+
], template: "<!-- Content -->\n@if (loading()) {\n<div class=\"flex justify-center py-16\">Loading invoice\u2026</div>\n} @else if (!invoice()) {\n<div class=\"flex justify-center py-16\">Invoice not found.</div>\n} @else() { @if (invoice(); as invoice) {\n<rolatech-toolbar [title]=\"status[invoice.status]\" large link=\"../\">\n <div class=\"hidden items-center gap-2 lg:flex\">\n @if (invoice.pdfUrl) {\n <button mat-stroked-button (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-flat-button>Send Email</button>\n <button mat-flat-button (click)=\"edit()\">Edit</button>\n </div>\n <div class=\"block lg:hidden\">\n <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n</rolatech-toolbar>\n<div class=\"px-4\">\n <!-- Breadcrumb / header -->\n <div class=\"flex items-start justify-between gap-4\">\n <div class=\"space-y-1\">\n <nav class=\"flex items-center gap-1\">\n <a routerLink=\"/invoices\" class=\"hover:underline hover:cursor-pointer\">Invoices</a>\n <span>/</span>\n <span>{{invoice?.invoiceNumber ?? invoice!.id}}</span>\n </nav>\n\n <div class=\"flex items-center gap-2 text-sm\">\n <span>Created: {{ invoice.createdAt | date:'dd/MM/yyyy':'Europe/London'}}</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"p-4\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n <div class=\"grid lg:col-span-2 space-y-4\">\n @if (invoice.status.toString() === 'PAID') {\n <rolatech-invoice-user\n [firstName]=\"invoice.firstName\"\n [lastName]=\"invoice.lastName\"\n [email]=\"invoice.email\"\n [phone]=\"invoice.phone\"\n ></rolatech-invoice-user>\n } @if (invoice?.lines; as lines) {\n <rolatech-invoice-lines [lines]=\"lines\"></rolatech-invoice-lines>\n }\n </div>\n <div class=\"space-y-4\">\n <rolatech-invoice-summary\n [tax]=\"invoice.vatTotal\"\n [credit]=\"invoice.holdingDepositApplied\"\n [subtotal]=\"invoice.subtotal\"\n [total]=\"invoice.total\"\n ></rolatech-invoice-summary>\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n @if (invoice?.pdfUrl) {\n <button mat-menu-item (click)=\"openPdf()\">Preview PDF</button>\n }\n <button mat-menu-item>Send Email</button>\n <button mat-menu-item (click)=\"edit()\">Edit</button>\n</mat-menu>\n\n} }\n" }]
|
|
959
1073
|
}] });
|
|
960
1074
|
|
|
961
1075
|
const agentInvoiceRoutes = [
|