Consolidated commit message to v22 signals
This commit is contained in:
@@ -1,73 +0,0 @@
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
import { EventEmitter } from '@angular/core';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSort, Sort } from '@angular/material/sort';
|
||||
import { merge, Observable, of as observableOf } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
import { ClosingStockItem } from './closing-stock-item';
|
||||
|
||||
/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
|
||||
const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
|
||||
export class ClosingStockDataSource extends DataSource<ClosingStockItem> {
|
||||
constructor(
|
||||
public data: ClosingStockItem[],
|
||||
private paginator?: MatPaginator,
|
||||
private sort?: MatSort,
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
||||
connect(): Observable<ClosingStockItem[]> {
|
||||
const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
|
||||
if (this.paginator) {
|
||||
dataMutations.push((this.paginator as MatPaginator).page);
|
||||
}
|
||||
if (this.sort) {
|
||||
dataMutations.push((this.sort as MatSort).sortChange);
|
||||
}
|
||||
|
||||
// Set the paginators length
|
||||
if (this.paginator) {
|
||||
this.paginator.length = this.data.length;
|
||||
}
|
||||
|
||||
return merge(observableOf(this.data), ...dataMutations).pipe(
|
||||
map(() => this.getPagedData(this.getSortedData([...this.data]))),
|
||||
);
|
||||
}
|
||||
|
||||
disconnect() {}
|
||||
|
||||
private getPagedData(data: ClosingStockItem[]) {
|
||||
if (this.paginator === undefined) {
|
||||
return data;
|
||||
}
|
||||
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
|
||||
return data.splice(startIndex, this.paginator.pageSize);
|
||||
}
|
||||
|
||||
private getSortedData(data: ClosingStockItem[]) {
|
||||
if (this.sort === undefined) {
|
||||
return data;
|
||||
}
|
||||
if (!this.sort.active || this.sort.direction === '') {
|
||||
return data;
|
||||
}
|
||||
|
||||
const sort = this.sort as MatSort;
|
||||
return data.sort((a, b) => {
|
||||
const isAsc = sort.direction === 'asc';
|
||||
switch (sort.active) {
|
||||
case 'product':
|
||||
return compare(`${a.group} - ${a.product}`, `${b.group} - ${b.product}`, isAsc);
|
||||
case 'quantity':
|
||||
return compare(+a.quantity, +b.quantity, isAsc);
|
||||
case 'amount':
|
||||
return compare(+a.amount, +b.amount, isAsc);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,18 @@
|
||||
<h2 class="row-container space-between">
|
||||
<span>Closing Stock</span>
|
||||
@if (dataSource.data.length) {
|
||||
@if ((this.info().items ?? []).length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<form class="flex-col" [formRoot]="form">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Department</mat-label>
|
||||
<mat-select formControlName="costCentre" name="costCentre">
|
||||
@for (at of costCentres; track at) {
|
||||
<mat-select [formField]="form.costCentre">
|
||||
@for (at of costCentres(); track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
@@ -21,96 +21,98 @@
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput #dateElement [matDatepicker]="dateInput" formControlName="date" autocomplete="off" />
|
||||
<input matInput #dateElement [matDatepicker]="dateInput" [formField]="form.date" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="dateInput"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dateInput></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" (click)="show()" class="flex-auto basis-1-5">Show</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements" formArrayName="stocks">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product" class="first">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="first">Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.product.name }}</mat-cell>
|
||||
</ng-container>
|
||||
@if (infoResource.isLoading()) {
|
||||
<app-skeleton-loader type="table" [count]="1" />
|
||||
} @else if (infoResource.error()) {
|
||||
<app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
|
||||
} @else {
|
||||
<mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product" class="first">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="first">Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.product.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Group Column -->
|
||||
<ng-container matColumnDef="group">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Group</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="middle">{{ row.group }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Group Column -->
|
||||
<ng-container matColumnDef="group">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Group</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="middle">{{ row.group }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right middle">Closing Stock</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.quantity | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right middle">Closing Stock</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.quantity | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Physical Column -->
|
||||
<ng-container matColumnDef="physical">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Physical Stock</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Physical</mat-label>
|
||||
<input matInput type="number" formControlName="physical" (change)="updatePhysical($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Physical Column -->
|
||||
<ng-container matColumnDef="physical">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Physical Stock</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Physical</mat-label>
|
||||
<input matInput type="number" formControlName="physical" (change)="updatePhysical($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Variance Column -->
|
||||
<ng-container matColumnDef="variance" class="middle">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Variance</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{
|
||||
row.quantity - row.physical | number: '0.2-2'
|
||||
}}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Variance Column -->
|
||||
<ng-container matColumnDef="variance" class="middle">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Variance</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{
|
||||
row.quantity - row.physical | number: '0.2-2'
|
||||
}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Department</mat-label>
|
||||
<mat-select
|
||||
formControlName="costCentre"
|
||||
name="costCentre"
|
||||
(selectionChange)="updateDepartment($event.value, row)"
|
||||
>
|
||||
@for (at of costCentres; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Department</mat-label>
|
||||
<mat-select [formField]="form.costCentre" (selectionChange)="updateDepartment($event.value, row)">
|
||||
@for (at of costCentres(); track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount" class="last">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right last">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount" class="last">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right last">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
<mat-paginator
|
||||
(page)="handlePageEvent($event)"
|
||||
[length]="(this.info().items ?? []).length"
|
||||
[pageIndex]="pageIndex()"
|
||||
[pageSize]="pageSize()"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
}
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!$any(form).dirty">Save</button>
|
||||
@if (canDelete()) {
|
||||
<button mat-raised-button (click)="post()" [disabled]="info.posted || !auth.allowed('post-vouchers')">
|
||||
{{ info.posted ? 'Posted' : 'Post' }}
|
||||
<button mat-raised-button (click)="post()" [disabled]="info().posted || !auth.allowed('post-vouchers')">
|
||||
{{ info().posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { CurrencyPipe, DecimalPipe } from '@angular/common';
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { Component, HostListener, inject, computed, input, linkedSignal, signal, afterNextRender } from '@angular/core';
|
||||
import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
@@ -8,31 +8,40 @@ import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSelectChange, MatSelectModule } from '@angular/material/select';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { MatSort, MatSortModule } from '@angular/material/sort';
|
||||
import { MatSortModule, Sort } from '@angular/material/sort';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Router } from '@angular/router';
|
||||
import moment from 'moment';
|
||||
|
||||
import { AuthService } from '../auth/auth.service';
|
||||
import { CostCentre } from '../core/cost-centre';
|
||||
import { User } from '../core/user';
|
||||
import { CostCentreService } from '../cost-centre/cost-centre.service';
|
||||
import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
|
||||
import { ErrorStateComponent } from '../shared/error-state/error-state.component';
|
||||
import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
|
||||
import { ToCsvService } from '../shared/to-csv.service';
|
||||
import { ClosingStock } from './closing-stock';
|
||||
import { ClosingStockDataSource } from './closing-stock-datasource';
|
||||
import { ClosingStockItem } from './closing-stock-item';
|
||||
import { ClosingStockService } from './closing-stock.service';
|
||||
|
||||
export interface ClosingStockFormData {
|
||||
date: moment.Moment;
|
||||
costCentre: CostCentre | null;
|
||||
stocks: { physical: number; costCentre: string | undefined }[];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-closing-stock',
|
||||
templateUrl: './closing-stock.component.html',
|
||||
styleUrls: ['./closing-stock.component.css'],
|
||||
imports: [
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
FormField,
|
||||
FormRoot,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
MatOptionModule,
|
||||
@@ -44,75 +53,92 @@ import { ClosingStockService } from './closing-stock.service';
|
||||
MatPaginatorModule,
|
||||
DecimalPipe,
|
||||
CurrencyPipe,
|
||||
|
||||
SkeletonLoaderComponent,
|
||||
ErrorStateComponent,
|
||||
],
|
||||
})
|
||||
export class ClosingStockComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
export class ClosingStockComponent {
|
||||
private router = inject(Router);
|
||||
private toCsv = inject(ToCsvService);
|
||||
private dialog = inject(MatDialog);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
auth = inject(AuthService);
|
||||
protected auth = inject(AuthService);
|
||||
private ser = inject(ClosingStockService);
|
||||
private costCentreSer = inject(CostCentreService);
|
||||
pageSize = signal(50);
|
||||
pageIndex = signal(0);
|
||||
sortActive = signal('');
|
||||
sortDirection = signal('');
|
||||
id = input(null, { transform: (v: string | null | undefined) => v ?? null });
|
||||
d = input(null, { transform: (v: string | null | undefined) => v ?? null });
|
||||
startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
|
||||
finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
|
||||
infoResource = this.ser.list(this.id, this.d);
|
||||
info = computed(() => this.infoResource.value() ?? new ClosingStock());
|
||||
costCentresResource = this.costCentreSer.list();
|
||||
|
||||
costCentres = computed(() => this.costCentresResource.value() ?? []);
|
||||
|
||||
model = linkedSignal({
|
||||
source: computed(() => ({ info: this.info(), costCentres: this.costCentres() })),
|
||||
computation: ({ info, costCentres }): ClosingStockFormData => ({
|
||||
date: moment(info.date, 'DD-MMM-YYYY'),
|
||||
costCentre: costCentres.find((c) => c.id === info.costCentre?.id) || null,
|
||||
stocks: info.items.map((x) => ({
|
||||
physical: x.physical,
|
||||
costCentre: x.costCentre?.id,
|
||||
})),
|
||||
}),
|
||||
});
|
||||
|
||||
form = createForm(this.model);
|
||||
|
||||
sortedList = computed(() => {
|
||||
const data = this.info().items ?? [];
|
||||
const active = this.sortActive();
|
||||
const direction = this.sortDirection();
|
||||
|
||||
if (!active || direction === '') {
|
||||
return data;
|
||||
}
|
||||
|
||||
return [...data].sort((a, b) => {
|
||||
const isAsc = direction === 'asc';
|
||||
switch (active) {
|
||||
case 'product':
|
||||
return compare(a.product?.name ?? '', b.product?.name ?? '', isAsc);
|
||||
case 'group':
|
||||
return compare(a.group ?? '', b.group ?? '', isAsc);
|
||||
case 'quantity':
|
||||
return compare(a.quantity ?? 0, b.quantity ?? 0, isAsc);
|
||||
case 'amount':
|
||||
return compare(a.amount ?? 0, b.amount ?? 0, isAsc);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
dataSource = computed(() => {
|
||||
const data = this.sortedList();
|
||||
const pageIndex = this.pageIndex();
|
||||
const pageSize = this.pageSize();
|
||||
return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
|
||||
});
|
||||
|
||||
@ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
|
||||
@ViewChild(MatSort, { static: true }) sort!: MatSort;
|
||||
@ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
|
||||
info: ClosingStock = new ClosingStock();
|
||||
dataSource: ClosingStockDataSource = new ClosingStockDataSource(this.info.items, this.paginator, this.sort);
|
||||
form: FormGroup<{
|
||||
date: FormControl<moment.Moment>;
|
||||
costCentre: FormControl<string | null>;
|
||||
stocks: FormArray<
|
||||
FormGroup<{
|
||||
physical: FormControl<number>;
|
||||
costCentre: FormControl<string | undefined>;
|
||||
}>
|
||||
>;
|
||||
}>;
|
||||
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
||||
|
||||
displayedColumns = ['product', 'group', 'quantity', 'physical', 'variance', 'department', 'amount'];
|
||||
|
||||
costCentres: CostCentre[];
|
||||
|
||||
@HostListener('window:keydown.f2', ['$event'])
|
||||
focusDate(event: Event) {
|
||||
event.preventDefault();
|
||||
this.dateElement.nativeElement.focus();
|
||||
this.dateElement.nativeElement.select();
|
||||
this.form().focusBoundControl();
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.costCentres = [];
|
||||
this.form = new FormGroup({
|
||||
date: new FormControl(moment(new Date()), { nonNullable: true }),
|
||||
costCentre: new FormControl<string | null>(null),
|
||||
stocks: new FormArray<FormGroup<{ physical: FormControl<number>; costCentre: FormControl<string | undefined> }>>(
|
||||
[],
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.data.subscribe((value) => {
|
||||
const data = value as { info: ClosingStock; costCentres: CostCentre[] };
|
||||
this.info = data.info;
|
||||
this.costCentres = data.costCentres;
|
||||
this.form.patchValue({
|
||||
date: moment(this.info.date, 'DD-MMM-YYYY'),
|
||||
costCentre: this.info.costCentre.id,
|
||||
});
|
||||
this.form.controls.stocks.clear();
|
||||
this.info.items.forEach((x) =>
|
||||
this.form.controls.stocks.push(
|
||||
new FormGroup({
|
||||
physical: new FormControl(x.physical, { nonNullable: true }),
|
||||
costCentre: new FormControl(x.costCentre?.id, { nonNullable: true }),
|
||||
}),
|
||||
),
|
||||
);
|
||||
this.dataSource = new ClosingStockDataSource(this.info.items, this.paginator, this.sort);
|
||||
afterNextRender(() => {
|
||||
this.form().focusBoundControl();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -137,25 +163,23 @@ export class ClosingStockComponent implements OnInit {
|
||||
}
|
||||
|
||||
getClosingStock(): ClosingStock {
|
||||
const formModel = this.form.value;
|
||||
this.info.date = moment(formModel.date).format('DD-MMM-YYYY');
|
||||
const array = this.form.controls.stocks;
|
||||
this.info.items.forEach((item, index) => {
|
||||
item.physical = +(array.controls[index].value.physical ?? '');
|
||||
item.costCentre =
|
||||
array.controls[index].value.costCentre == null
|
||||
? undefined
|
||||
: new CostCentre({ id: array.controls[index].value.costCentre });
|
||||
const formModel = this.model();
|
||||
const currentInfo = this.info();
|
||||
currentInfo.date = formModel.date.format('DD-MMM-YYYY');
|
||||
const array = formModel.stocks;
|
||||
currentInfo.items.forEach((item, index) => {
|
||||
item.physical = array[index].physical ?? 0;
|
||||
item.costCentre = array[index].costCentre == null ? undefined : new CostCentre({ id: array[index].costCentre });
|
||||
});
|
||||
return this.info;
|
||||
return currentInfo;
|
||||
}
|
||||
|
||||
getInfo(): ClosingStock {
|
||||
const formModel = this.form.value;
|
||||
const formModel = this.model();
|
||||
|
||||
return new ClosingStock({
|
||||
date: moment(formModel.date).format('DD-MMM-YYYY'),
|
||||
costCentre: new CostCentre({ id: formModel.costCentre ?? '' }),
|
||||
date: formModel.date.format('DD-MMM-YYYY'),
|
||||
costCentre: new CostCentre({ id: formModel.costCentre?.id ?? '' }),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -167,7 +191,7 @@ export class ClosingStockComponent implements OnInit {
|
||||
Amount: 'amount',
|
||||
};
|
||||
|
||||
const d = JSON.parse(JSON.stringify(this.dataSource.data)).map((x: ClosingStockItem) => ({
|
||||
const d = JSON.parse(JSON.stringify(this.dataSource())).map((x: ClosingStockItem) => ({
|
||||
product: x.product.name,
|
||||
group: x.group,
|
||||
quantity: x.quantity,
|
||||
@@ -193,21 +217,21 @@ export class ClosingStockComponent implements OnInit {
|
||||
}
|
||||
|
||||
canDelete() {
|
||||
return this.info.items.find((x) => !!x.id) !== undefined;
|
||||
return this.info().items.find((x) => !!x.id) !== undefined;
|
||||
}
|
||||
|
||||
canSave() {
|
||||
if (this.info.items.find((x) => !!x.id) !== undefined) {
|
||||
if (this.info().items.find((x) => !!x.id) !== undefined) {
|
||||
return true;
|
||||
}
|
||||
if (this.info.posted && this.auth.allowed('edit-posted-vouchers')) {
|
||||
if (this.info().posted && this.auth.allowed('edit-posted-vouchers')) {
|
||||
return true;
|
||||
}
|
||||
return this.info.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
|
||||
return this.info().user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
|
||||
}
|
||||
|
||||
post() {
|
||||
this.ser.post(this.info.date, this.info.costCentre.id as string).subscribe({
|
||||
this.ser.post(this.info().date, this.info().costCentre.id as string).subscribe({
|
||||
next: () => {
|
||||
this.snackBar.open('Voucher Posted', 'Success');
|
||||
},
|
||||
@@ -218,7 +242,7 @@ export class ClosingStockComponent implements OnInit {
|
||||
}
|
||||
|
||||
delete() {
|
||||
this.ser.delete(this.info.date, this.info.costCentre.id as string).subscribe({
|
||||
this.ser.delete(this.info().date, this.info().costCentre.id as string).subscribe({
|
||||
next: () => {
|
||||
this.snackBar.open('', 'Success');
|
||||
this.router.navigate(['/closing-stock'], { replaceUrl: true });
|
||||
@@ -244,4 +268,16 @@ export class ClosingStockComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handlePageEvent(e: PageEvent) {
|
||||
this.pageSize.set(e.pageSize);
|
||||
this.pageIndex.set(e.pageIndex);
|
||||
}
|
||||
|
||||
sortData(sort: Sort) {
|
||||
this.sortActive.set(sort.active);
|
||||
this.sortDirection.set(sort.direction);
|
||||
}
|
||||
}
|
||||
const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
|
||||
(a < b ? -1 : 1) * (isAsc ? 1 : -1);
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { ResolveFn } from '@angular/router';
|
||||
|
||||
import { ClosingStock } from './closing-stock';
|
||||
import { closingStockResolver } from './closing-stock.resolver';
|
||||
|
||||
describe('closingStockResolver', () => {
|
||||
const executeResolver: ResolveFn<ClosingStock> = (...resolverParameters) =>
|
||||
TestBed.runInInjectionContext(() => closingStockResolver(...resolverParameters));
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(executeResolver).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,11 +0,0 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { ResolveFn } from '@angular/router';
|
||||
|
||||
import { ClosingStock } from './closing-stock';
|
||||
import { ClosingStockService } from './closing-stock.service';
|
||||
|
||||
export const closingStockResolver: ResolveFn<ClosingStock> = (route) => {
|
||||
const date = route.paramMap.get('date');
|
||||
const costCentre = route.queryParamMap.get('d') || null;
|
||||
return inject(ClosingStockService).list(date, costCentre);
|
||||
};
|
||||
@@ -1,9 +1,7 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { authGuard } from '../auth/auth-guard.service';
|
||||
import { costCentreListResolver } from '../cost-centre/cost-centre-list.resolver';
|
||||
import { ClosingStockComponent } from './closing-stock.component';
|
||||
import { closingStockResolver } from './closing-stock.resolver';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
@@ -13,10 +11,6 @@ export const routes: Routes = [
|
||||
data: {
|
||||
permission: 'Closing Stock',
|
||||
},
|
||||
resolve: {
|
||||
info: closingStockResolver,
|
||||
costCentres: costCentreListResolver,
|
||||
},
|
||||
runGuardsAndResolvers: 'always',
|
||||
},
|
||||
{
|
||||
@@ -26,10 +20,6 @@ export const routes: Routes = [
|
||||
data: {
|
||||
permission: 'Closing Stock',
|
||||
},
|
||||
resolve: {
|
||||
info: closingStockResolver,
|
||||
costCentres: costCentreListResolver,
|
||||
},
|
||||
runGuardsAndResolvers: 'always',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
|
||||
import { inject, Injectable, Signal } from '@angular/core';
|
||||
import { Observable } from 'rxjs/internal/Observable';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
|
||||
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
|
||||
import { ClosingStock } from './closing-stock';
|
||||
|
||||
const url = '/api/closing-stock';
|
||||
const serviceName = 'ClosingStockService';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
@@ -16,34 +14,33 @@ export class ClosingStockService {
|
||||
private http = inject(HttpClient);
|
||||
private log = inject(ErrorLoggerService);
|
||||
|
||||
list(date: string | null, costCentre: string | null): Observable<ClosingStock> {
|
||||
const listUrl = date === null ? url : `${url}/${date}`;
|
||||
const options = { params: new HttpParams() };
|
||||
if (costCentre !== null) {
|
||||
options.params = options.params.set('d', costCentre);
|
||||
}
|
||||
return this.http
|
||||
.get<ClosingStock>(listUrl, options)
|
||||
.pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<ClosingStock>;
|
||||
list(date: Signal<string | null>, costCentre: Signal<string | null>) {
|
||||
return httpResource<ClosingStock>(() => {
|
||||
const listUrl = date() === null ? url : `${url}/${date()}`;
|
||||
const params: Record<string, string> = {};
|
||||
const costCentre_val = costCentre();
|
||||
if (costCentre_val !== null) params['d'] = costCentre_val;
|
||||
return { url: listUrl, params };
|
||||
});
|
||||
}
|
||||
|
||||
save(closingStock: ClosingStock): Observable<ClosingStock> {
|
||||
return this.http
|
||||
.post<ClosingStock>(url, closingStock)
|
||||
.pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<ClosingStock>;
|
||||
.pipe(catchError(this.log.handleError('ClosingStockService', 'save'))) as Observable<ClosingStock>;
|
||||
}
|
||||
|
||||
post(date: string, costCentre: string): Observable<ClosingStock> {
|
||||
const options = { params: new HttpParams().set('d', costCentre) };
|
||||
return this.http
|
||||
.post<ClosingStock>(`${url}/${date}`, {}, options)
|
||||
.pipe(catchError(this.log.handleError(serviceName, 'Post Voucher'))) as Observable<ClosingStock>;
|
||||
.pipe(catchError(this.log.handleError('ClosingStockService', 'Post Voucher'))) as Observable<ClosingStock>;
|
||||
}
|
||||
|
||||
delete(date: string, costCentre: string): Observable<ClosingStock> {
|
||||
const options = { params: new HttpParams().set('d', costCentre) };
|
||||
return this.http
|
||||
.delete<ClosingStock>(`${url}/${date}`, options)
|
||||
.pipe(catchError(this.log.handleError(serviceName, 'Delete Voucher'))) as Observable<ClosingStock>;
|
||||
.pipe(catchError(this.log.handleError('ClosingStockService', 'Delete Voucher'))) as Observable<ClosingStock>;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user