Removed all Material Cards
Removed Tailwind Moved to scss Moved to material theme 3
This commit is contained in:
tanshu committed
1 parent
c542114e42
commit
846a7209ee
147 files changed
+6057
-6377
No files matched your search
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"plugins": {
|
||||
"@tailwindcss/postcss": {}
|
||||
}
|
||||
}
|
||||
@@ -26,7 +26,7 @@
|
||||
"index": "src/index.html",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["@angular/material/prebuilt-themes/azure-blue.css", "src/styles.css"],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": [],
|
||||
"browser": "src/main.ts"
|
||||
},
|
||||
@@ -82,7 +82,7 @@
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css"],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
|
||||
@@ -38,10 +38,8 @@
|
||||
"@angular/cli": "^20.0.3",
|
||||
"@angular/compiler-cli": "^20.0.4",
|
||||
"@angular/language-service": "^20.0.4",
|
||||
"@tailwindcss/postcss": "^4.1.10",
|
||||
"@types/jasmine": "~5.1.4",
|
||||
"angular-eslint": "^20.1.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^9.28.0",
|
||||
"eslint-config-prettier": "^10.1.5",
|
||||
"eslint-plugin-import": "^2.31.0",
|
||||
@@ -56,10 +54,8 @@
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "^2.1.0",
|
||||
"lint-staged": "^16.1.2",
|
||||
"postcss": "^8.5.6",
|
||||
"prettier": "^3.2.5",
|
||||
"standard-version": "^9.5.0",
|
||||
"tailwindcss": "^4.1.10",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.33.1"
|
||||
},
|
||||
|
||||
@@ -1,60 +1,54 @@
|
||||
<mat-card class="lg:max-w-[50%]">
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Account</mat-card-title>
|
||||
<mat-icon matSuffix (click)="item.isStarred = !item.isStarred" class="pointer" [class.gold]="item.isStarred">
|
||||
{{ item.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Account Type</mat-label>
|
||||
<mat-select formControlName="type">
|
||||
@for (at of accountTypes; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="isActive" class="flex-auto mr-5">Is Active?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isReconcilable" class="flex-auto">Is Reconcilable?</mat-checkbox>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Cost Centre</mat-label>
|
||||
<mat-select formControlName="costCentre">
|
||||
@for (cs of costCentres; track cs) {
|
||||
<mat-option [value]="cs.id">
|
||||
{{ cs.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" class="mr-5">Save</button>
|
||||
@if (!!item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<h2 class="row-container space-between wrapped">
|
||||
<span>Account</span>
|
||||
<mat-icon matSuffix (click)="item.isStarred = !item.isStarred" class="pointer" [class.gold]="item.isStarred">
|
||||
{{ item.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</h2>
|
||||
<form [formGroup]="form" class="flex-col wrapped">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Account Type</mat-label>
|
||||
<mat-select formControlName="type">
|
||||
@for (at of accountTypes; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-checkbox formControlName="isActive" class="flex-auto">Is Active?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isReconcilable" class="flex-auto">Is Reconcilable?</mat-checkbox>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Cost Centre</mat-label>
|
||||
<mat-select formControlName="costCentre">
|
||||
@for (cs of costCentres; track cs) {
|
||||
<mat-option [value]="cs.id">
|
||||
{{ cs.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" class="">Save</button>
|
||||
@if (!!item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
@@ -23,7 +22,6 @@ import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dial
|
||||
templateUrl: './account-detail.component.html',
|
||||
styleUrls: ['./account-detail.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
|
||||
@@ -1,71 +1,66 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Accounts</mat-card-title>
|
||||
<a mat-button [routerLink]="['/accounts', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
<h2 class="row-container space-between">
|
||||
<span>Accounts</span>
|
||||
<a mat-button [routerLink]="['/accounts', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<a [routerLink]="['/accounts', row.id]">
|
||||
@if (row.isStarred) {
|
||||
<mat-icon matSuffix class="gold">star </mat-icon>
|
||||
}
|
||||
{{ row.name }}
|
||||
</a>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<a [routerLink]="['/accounts', row.id]">
|
||||
@if (row.isStarred) {
|
||||
<mat-icon matSuffix class="gold">star </mat-icon>
|
||||
}
|
||||
{{ row.name }}
|
||||
</a>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.typeName }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.typeName }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Is Active? Column -->
|
||||
<ng-container matColumnDef="isActive">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Active?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.isActive }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Is Active? Column -->
|
||||
<ng-container matColumnDef="isActive">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Active?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.isActive }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Is Reconcilable? Column -->
|
||||
<ng-container matColumnDef="isReconcilable">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Reconcilable?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.isReconcilable }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Is Reconcilable? Column -->
|
||||
<ng-container matColumnDef="isReconcilable">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Reconcilable?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.isReconcilable }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Cost Centre Column -->
|
||||
<ng-container matColumnDef="costCentre">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Cost Centre</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.costCentre.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Cost Centre Column -->
|
||||
<ng-container matColumnDef="costCentre">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Cost Centre</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.costCentre.name }}</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]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -1,6 +1,6 @@
|
||||
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -20,8 +20,8 @@ import { AccountListDataSource } from './account-list-datasource';
|
||||
templateUrl: './account-list.component.html',
|
||||
styleUrls: ['./account-list.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
RouterModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<ngx-loading-bar></ngx-loading-bar>
|
||||
<app-nav-bar></app-nav-bar>
|
||||
<div class="flex flex-col justify-center items-stretch mat-app-background basic-container">
|
||||
<div class="mat-app-background basic-container">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
File renamed without changes.
@@ -7,7 +7,7 @@ import { NavBarComponent } from './core/nav-bar/nav-bar.component';
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css'],
|
||||
styleUrls: ['./app.component.scss'],
|
||||
imports: [LoadingBarModule, NavBarComponent, RouterOutlet],
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
@@ -4,7 +4,6 @@ import { ApplicationConfig, importProvidersFrom, LOCALE_ID, provideZonelessChang
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { MomentDateAdapter } from '@angular/material-moment-adapter';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
@@ -35,7 +34,7 @@ export const appConfig: ApplicationConfig = {
|
||||
BrowserModule,
|
||||
LayoutModule,
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
|
||||
MatDividerModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,93 +1,89 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Attendance</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></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" formArrayName="attendances">
|
||||
<!-- Code Column -->
|
||||
<ng-container matColumnDef="code">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Code</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.code }}</mat-cell>
|
||||
</ng-container>
|
||||
<h2>Attendance</h2>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></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" formArrayName="attendances">
|
||||
<!-- Code Column -->
|
||||
<ng-container matColumnDef="code">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Code</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.code }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.department }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex-auto">
|
||||
<mat-select formControlName="attendanceType" name="attendanceType">
|
||||
@for (at of attendanceTypes; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.department }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Prints Column -->
|
||||
<ng-container matColumnDef="prints">
|
||||
<mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="no-bg">
|
||||
{{ row.prints }}
|
||||
@if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
|
||||
<mat-icon class="no-bg">new_releases</mat-icon>
|
||||
}
|
||||
<mat-chip-set class="no-bg">
|
||||
@if (row.hoursWorked.length) {
|
||||
<mat-chip-option
|
||||
class="no-bg"
|
||||
selected
|
||||
selectable="false"
|
||||
[color]="row.fullDay === true ? 'primary' : 'warn'"
|
||||
>
|
||||
{{ row.hoursWorked }}
|
||||
</mat-chip-option>
|
||||
}
|
||||
</mat-chip-set>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex-auto">
|
||||
<mat-select formControlName="attendanceType" name="attendanceType">
|
||||
@for (at of attendanceTypes; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; let i = index; columns: displayedColumns" [class]="getClass(i)"></mat-row>
|
||||
</mat-table>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<!-- Prints Column -->
|
||||
<ng-container matColumnDef="prints">
|
||||
<mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="no-bg">
|
||||
{{ row.prints }}
|
||||
@if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
|
||||
<mat-icon class="no-bg">new_releases</mat-icon>
|
||||
}
|
||||
<mat-chip-set class="no-bg">
|
||||
@if (row.hoursWorked.length) {
|
||||
<mat-chip-option
|
||||
class="no-bg"
|
||||
selected
|
||||
selectable="false"
|
||||
[color]="row.fullDay === true ? 'primary' : 'warn'"
|
||||
>
|
||||
{{ row.hoursWorked }}
|
||||
</mat-chip-option>
|
||||
}
|
||||
</mat-chip-set>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; let i = index; columns: displayedColumns" [class]="getClass(i)"></mat-row>
|
||||
</mat-table>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
</div>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
@@ -28,7 +27,6 @@ import { AttendanceService } from './attendance.service';
|
||||
templateUrl: './attendance.component.html',
|
||||
styleUrls: ['./attendance.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,35 +1,31 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Login</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Username</mat-label>
|
||||
<input matInput #nameElement formControlName="username" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Password</mat-label>
|
||||
<input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
|
||||
<mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
@if (showOtp) {
|
||||
<h2>Client ID: {{ clientId }}</h2>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Otp</mat-label>
|
||||
<input matInput formControlName="otp" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button (click)="login()" color="primary">Login</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<h2>Login</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Username</mat-label>
|
||||
<input matInput #nameElement formControlName="username" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Password</mat-label>
|
||||
<input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
|
||||
<mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@if (showOtp) {
|
||||
<mat-divider></mat-divider>
|
||||
<h2>Client ID: {{ clientId }}</h2>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Otp</mat-label>
|
||||
<input matInput formControlName="otp" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button (click)="login()" color="primary">Login</button>
|
||||
</div>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
@@ -16,15 +15,7 @@ import { AuthService } from '../auth.service';
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrls: ['./login.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatIconModule,
|
||||
MatDividerModule,
|
||||
MatButtonModule,
|
||||
],
|
||||
imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatDividerModule, MatButtonModule],
|
||||
})
|
||||
export class LoginComponent implements OnInit, AfterViewInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
@@ -1,64 +1,59 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Balance Sheet</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput #dateElement [matDatepicker]="dateInput" formControlName="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()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Group Column -->
|
||||
<ng-container matColumnDef="group">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>{{ info.footer?.group }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<h2>Balance Sheet</h2>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>{{ info.footer?.name }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput #dateElement [matDatepicker]="dateInput" formControlName="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()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Group Column -->
|
||||
<ng-container matColumnDef="group">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>{{ info.footer?.group }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- SubAmount Column -->
|
||||
<ng-container matColumnDef="subAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.subAmount | currency: 'INR' | clear }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right"
|
||||
>{{ info.footer?.subAmount | currency: 'INR' | clear }}
|
||||
</mat-footer-cell>
|
||||
</ng-container>
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>{{ info.footer?.name }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Total Column -->
|
||||
<ng-container matColumnDef="total">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right"
|
||||
>{{ info.footer?.amount | currency: 'INR' | clear }}
|
||||
</mat-footer-cell>
|
||||
</ng-container>
|
||||
<!-- SubAmount Column -->
|
||||
<ng-container matColumnDef="subAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.subAmount | currency: 'INR' | clear }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right"
|
||||
>{{ info.footer?.subAmount | currency: 'INR' | clear }}
|
||||
</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
||||
</mat-table>
|
||||
<!-- Total Column -->
|
||||
<ng-container matColumnDef="total">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right"
|
||||
>{{ info.footer?.amount | currency: 'INR' | clear }}
|
||||
</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -2,7 +2,6 @@ import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -21,7 +20,6 @@ import { BalanceSheetDataSource } from './balance-sheet-datasource';
|
||||
templateUrl: './balance-sheet.component.html',
|
||||
styleUrls: ['./balance-sheet.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,35 +1,30 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Batch Integrity</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-table [dataSource]="dataSource" aria-label="Elements">
|
||||
<!-- Batch Column -->
|
||||
<ng-container matColumnDef="batch">
|
||||
<mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
{{ row.product }} dated {{ row.date }} @ {{ row.price | currency: 'INR' }} is showing
|
||||
{{ row.showing }} instead of {{ row.actual }}
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<h2>Batch Integrity</h2>
|
||||
|
||||
<!-- Details Column -->
|
||||
<ng-container matColumnDef="details">
|
||||
<mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (detail of row.details; track detail) {
|
||||
<li>
|
||||
<a [routerLink]="detail.url">{{ detail.type }}</a> on {{ detail.date }} of {{ detail.quantity }} @
|
||||
{{ detail.price | currency: 'INR' }}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<mat-table [dataSource]="dataSource" aria-label="Elements">
|
||||
<!-- Batch Column -->
|
||||
<ng-container matColumnDef="batch">
|
||||
<mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
{{ row.product }} dated {{ row.date }} @ {{ row.price | currency: 'INR' }} is showing
|
||||
{{ row.showing }} instead of {{ row.actual }}
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- Details Column -->
|
||||
<ng-container matColumnDef="details">
|
||||
<mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (detail of row.details; track detail) {
|
||||
<li>
|
||||
<a [routerLink]="detail.url">{{ detail.type }}</a> on {{ detail.date }} of {{ detail.quantity }} @
|
||||
{{ detail.price | currency: 'INR' }}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
@@ -1,6 +1,5 @@
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
|
||||
@@ -11,7 +10,7 @@ import { BatchIntegrityReportDatasource } from './batch-integrity-report-datasou
|
||||
selector: 'app-batch-integrity',
|
||||
templateUrl: './batch-integrity-report.component.html',
|
||||
styleUrls: ['./batch-integrity-report.component.css'],
|
||||
imports: [MatCardModule, MatTableModule, RouterModule, CurrencyPipe],
|
||||
imports: [MatTableModule, RouterModule, CurrencyPipe],
|
||||
})
|
||||
export class BatchIntegrityReportComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
@@ -1,50 +1,39 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Cash Flow</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" (click)="show()" class="flex-auto basis-1/5">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url" [queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }"
|
||||
>{{ row.name }}
|
||||
</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
<h2>Cash Flow</h2>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" (click)="show()" class="flex-auto basis-1-5">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url" [queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }"
|
||||
>{{ row.name }}
|
||||
</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
@@ -2,7 +2,6 @@ import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -20,7 +19,6 @@ import { CashFlowDataSource } from './cash-flow-datasource';
|
||||
templateUrl: './cash-flow.component.html',
|
||||
styleUrls: ['./cash-flow.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,36 +1,30 @@
|
||||
<div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
|
||||
<mat-card class="flex-auto">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Client</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="enabled" class="flex-auto">Is Enabled?</mat-checkbox>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>OTP</mat-label>
|
||||
<input matInput formControlName="otp" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()">Save</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<h2>Client</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col wrapped">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-checkbox formControlName="enabled" class="flex-auto">Is Enabled?</mat-checkbox>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>OTP</mat-label>
|
||||
<input matInput formControlName="otp" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()">Save</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
</div>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
@@ -17,7 +16,7 @@ import { ClientService } from '../client.service';
|
||||
selector: 'app-client-detail',
|
||||
templateUrl: './client-detail.component.html',
|
||||
styleUrls: ['./client-detail.component.css'],
|
||||
imports: [MatCardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, MatButtonModule],
|
||||
imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, MatButtonModule],
|
||||
})
|
||||
export class ClientDetailComponent implements OnInit, AfterViewInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
@@ -1,60 +1,55 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Clients</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Code Column -->
|
||||
<ng-container matColumnDef="code">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.code }}</mat-cell>
|
||||
</ng-container>
|
||||
<h2>Clients</h2>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="['/clients', row.id]">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Code Column -->
|
||||
<ng-container matColumnDef="code">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.code }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Enabled Column -->
|
||||
<ng-container matColumnDef="enabled">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Enabled?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.enabled }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- OTP Column -->
|
||||
<ng-container matColumnDef="otp">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>otp</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.otp }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Created Column -->
|
||||
<ng-container matColumnDef="created">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Created</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.creationDate | localTime }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Last Login Column -->
|
||||
<ng-container matColumnDef="last">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Last Login</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
>{{ row.lastUser }} @ {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
|
||||
<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]"
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="['/clients', row.id]">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</ng-container>
|
||||
|
||||
<!-- Enabled Column -->
|
||||
<ng-container matColumnDef="enabled">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Enabled?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.enabled }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- OTP Column -->
|
||||
<ng-container matColumnDef="otp">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>otp</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.otp }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Created Column -->
|
||||
<ng-container matColumnDef="created">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Created</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.creationDate | localTime }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Last Login Column -->
|
||||
<ng-container matColumnDef="last">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Last Login</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
>{{ row.lastUser }} @ {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
|
||||
<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]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Component, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatSort, MatSortModule } from '@angular/material/sort';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
@@ -13,7 +12,7 @@ import { ClientListDataSource } from './client-list-datasource';
|
||||
selector: 'app-client-list',
|
||||
templateUrl: './client-list.component.html',
|
||||
styleUrls: ['./client-list.component.css'],
|
||||
imports: [MatCardModule, MatTableModule, MatSortModule, RouterModule, MatPaginatorModule, LocalTimePipe],
|
||||
imports: [MatTableModule, MatSortModule, RouterModule, MatPaginatorModule, LocalTimePipe],
|
||||
})
|
||||
export class ClientListComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
@@ -1,20 +1,81 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Closing Stock</mat-card-title>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<h2 class="row-container space-between">
|
||||
<span>Closing Stock</span>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<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-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</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" />
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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">
|
||||
<mat-select
|
||||
formControlName="costCentre"
|
||||
name="costCentre"
|
||||
(selectionChange)="updateDepartment($event.value, row)"
|
||||
>
|
||||
@for (at of costCentres; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
@@ -22,100 +83,35 @@
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput #dateElement [matDatepicker]="dateInput" formControlName="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>
|
||||
</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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<!-- 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>
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</form>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
@if (canDelete()) {
|
||||
<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>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
@if (canDelete()) {
|
||||
<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>
|
||||
}
|
||||
</div>
|
||||
@@ -2,7 +2,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 { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
@@ -32,7 +31,6 @@ import { ClosingStockService } from './closing-stock.service';
|
||||
templateUrl: './closing-stock.component.html',
|
||||
styleUrls: ['./closing-stock.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
|
||||
@@ -7,12 +7,6 @@
|
||||
box-shadow: 3px 0 6px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.fill-remaining-space {
|
||||
/* This fills the remaining space, by using flexbox.
|
||||
Every toolbar row uses a flexbox row layout. */
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.fixed-to-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<mat-toolbar class="fixed-to-top">
|
||||
<span class="mr-5"
|
||||
<mat-toolbar class="fixed-to-top row-container">
|
||||
<span class=""
|
||||
><a routerLink="/">{{ title }}</a></span
|
||||
>
|
||||
<mat-menu #voucherMenu="matMenu">
|
||||
@@ -62,7 +62,7 @@
|
||||
</mat-menu>
|
||||
<button mat-button [matMenuTriggerFor]="masterMenu">Masters</button>
|
||||
|
||||
<span class="fill-remaining-space"></span>
|
||||
<span class="spacer"></span>
|
||||
|
||||
<mat-menu #userMenu="matMenu">
|
||||
<a mat-menu-item (click)="logout()">Logout {{ (auth.currentUser | async)?.name }}</a>
|
||||
|
||||
@@ -1,18 +1,14 @@
|
||||
<mat-card class="lg:max-w-[50%]">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Cost Center</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button (click)="save()" color="primary">Save</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<h2>Cost Center</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col wrapped">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button (click)="save()" color="primary">Save</button>
|
||||
</div>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
@@ -14,7 +13,7 @@ import { CostCentreService } from '../cost-centre.service';
|
||||
selector: 'app-cost-centre-detail',
|
||||
templateUrl: './cost-centre-detail.component.html',
|
||||
styleUrls: ['./cost-centre-detail.component.css'],
|
||||
imports: [MatCardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
|
||||
imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
|
||||
})
|
||||
export class CostCentreDetailComponent implements OnInit, AfterViewInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
@@ -1,40 +1,35 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Cost Centers</mat-card-title>
|
||||
<a mat-button [routerLink]="['/cost-centres', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
</a>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="['/cost-centres', row.id]">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Cost Centers</span>
|
||||
<a mat-button [routerLink]="['/cost-centres', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="isFixture">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<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]"
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="['/cost-centres', row.id]">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="isFixture">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<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]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Component, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatSort, MatSortModule } from '@angular/material/sort';
|
||||
@@ -13,7 +13,7 @@ import { CostCentreListDataSource } from './cost-centre-list-datasource';
|
||||
selector: 'app-cost-centre-list',
|
||||
templateUrl: './cost-centre-list.component.html',
|
||||
styleUrls: ['./cost-centre-list.component.css'],
|
||||
imports: [MatCardModule, RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule],
|
||||
imports: [RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule, MatButtonModule],
|
||||
})
|
||||
export class CostCentreListComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
@@ -1,92 +1,81 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Daybook</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.date }}</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
<h2>Daybook</h2>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Narration Column -->
|
||||
<ng-container matColumnDef="narration">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Narration</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- DebitText Column -->
|
||||
<ng-container matColumnDef="debitText">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Debit Accounts</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.debitText }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debitAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.debitAmount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- CreditText Column -->
|
||||
<ng-container matColumnDef="creditText">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Credit Accounts</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.creditText }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="creditAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.creditAmount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.selected]="selectedRowId === row.id"
|
||||
[class.unposted]="!row.posted && selectedRowId !== row.id"
|
||||
(click)="selectRow(row.id)"
|
||||
></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.date }}</a></mat-cell
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</ng-container>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Narration Column -->
|
||||
<ng-container matColumnDef="narration">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Narration</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- DebitText Column -->
|
||||
<ng-container matColumnDef="debitText">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Debit Accounts</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.debitText }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debitAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.debitAmount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- CreditText Column -->
|
||||
<ng-container matColumnDef="creditText">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Credit Accounts</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.creditText }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="creditAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.creditAmount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.selected]="selectedRowId === row.id"
|
||||
[class.unposted]="!row.posted && selectedRowId !== row.id"
|
||||
(click)="selectRow(row.id)"
|
||||
></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -2,7 +2,6 @@ import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -20,7 +19,6 @@ import { DaybookDataSource } from './daybook-datasource';
|
||||
templateUrl: './daybook.component.html',
|
||||
styleUrls: ['./daybook.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,103 +1,93 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Employee Attendance</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Employee</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#employeeElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="employee"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
@for (employee of employees | async; track employee) {
|
||||
<mat-option [value]="employee">{{ employee.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" formArrayName="attendances">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">{{ row.date }}</mat-cell>
|
||||
</ng-container>
|
||||
<h2>Employee Attendance</h2>
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex flex-auto">
|
||||
<mat-select formControlName="attendanceType" name="attendanceType">
|
||||
@for (at of attendanceTypes; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Employee</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#employeeElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="employee"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
@for (employee of employees | async; track employee) {
|
||||
<mat-option [value]="employee">{{ employee.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" formArrayName="attendances">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">{{ row.date }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Prints Column -->
|
||||
<ng-container matColumnDef="prints">
|
||||
<mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="no-bg">
|
||||
{{ row.prints }}
|
||||
@if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
|
||||
<mat-icon class="no-bg">new_releases</mat-icon>
|
||||
}
|
||||
<mat-chip-set class="no-bg">
|
||||
@if (row.hoursWorked.length) {
|
||||
<mat-chip-option
|
||||
class="no-bg"
|
||||
selected
|
||||
selectable="false"
|
||||
[color]="row.fullDay === true ? 'primary' : 'warn'"
|
||||
>
|
||||
{{ row.hoursWorked }}
|
||||
</mat-chip-option>
|
||||
}
|
||||
</mat-chip-set>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex-auto">
|
||||
<mat-select formControlName="attendanceType" name="attendanceType">
|
||||
@for (at of attendanceTypes; track at) {
|
||||
<mat-option [value]="at.id">
|
||||
{{ at.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; let i = index; columns: displayedColumns" [class]="getClass(i)"></mat-row>
|
||||
</mat-table>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<!-- Prints Column -->
|
||||
<ng-container matColumnDef="prints">
|
||||
<mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="no-bg">
|
||||
{{ row.prints }}
|
||||
@if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
|
||||
<mat-icon class="no-bg">new_releases</mat-icon>
|
||||
}
|
||||
<mat-chip-set class="no-bg">
|
||||
@if (row.hoursWorked.length) {
|
||||
<mat-chip-option
|
||||
class="no-bg"
|
||||
selected
|
||||
selectable="false"
|
||||
[color]="row.fullDay === true ? 'primary' : 'warn'"
|
||||
>
|
||||
{{ row.hoursWorked }}
|
||||
</mat-chip-option>
|
||||
}
|
||||
</mat-chip-set>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; let i = index; columns: displayedColumns" [class]="getClass(i)"></mat-row>
|
||||
</mat-table>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
</div>
|
||||
@@ -3,7 +3,6 @@ import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, Vie
|
||||
import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
@@ -33,7 +32,6 @@ import { EmployeeAttendanceService } from './employee-attendance.service';
|
||||
templateUrl: './employee-attendance.component.html',
|
||||
styleUrls: ['./employee-attendance.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,143 +1,139 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Employee Benefits</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div formGroupName="addRow" class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-3/5 mr-5">
|
||||
<mat-label>Employee</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#employeeElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="employee"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="employeeSelected($event)"
|
||||
>
|
||||
@for (employee of employees | async; track employee) {
|
||||
<mat-option [value]="employee">{{ employee.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[15%] mr-5">
|
||||
<mat-label>Gross Salary</mat-label>
|
||||
<input type="text" matInput formControlName="grossSalary" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[15%] mr-5">
|
||||
<mat-label>Days Worked</mat-label>
|
||||
<input type="text" matInput formControlName="daysWorked" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<h2>Employee Benefits</h2>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/10">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.employee.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col wrapped">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div formGroupName="addRow" class="row-container">
|
||||
<mat-form-field class="flex-auto basis-3-5">
|
||||
<mat-label>Employee</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#employeeElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="employee"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="employeeSelected($event)"
|
||||
>
|
||||
@for (employee of employees | async; track employee) {
|
||||
<mat-option [value]="employee">{{ employee.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-15">
|
||||
<mat-label>Gross Salary</mat-label>
|
||||
<input type="text" matInput formControlName="grossSalary" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-15">
|
||||
<mat-label>Days Worked</mat-label>
|
||||
<input type="text" matInput formControlName="daysWorked" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.employee.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-10">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.employee.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.employee.costCentre.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.employee.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- GrossSalary Column -->
|
||||
<ng-container matColumnDef="grossSalary">
|
||||
<mat-header-cell *matHeaderCellDef class="right">GrossSalary</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.grossSalary | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.employee.costCentre.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- DaysWorked Column -->
|
||||
<ng-container matColumnDef="daysWorked">
|
||||
<mat-header-cell *matHeaderCellDef class="right">DaysWorked</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.daysWorked | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- GrossSalary Column -->
|
||||
<ng-container matColumnDef="grossSalary">
|
||||
<mat-header-cell *matHeaderCellDef class="right">GrossSalary</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.grossSalary | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Esi Employee Column -->
|
||||
<ng-container matColumnDef="esiEmployee">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Esi EE</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.esiEmployee | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- DaysWorked Column -->
|
||||
<ng-container matColumnDef="daysWorked">
|
||||
<mat-header-cell *matHeaderCellDef class="right">DaysWorked</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.daysWorked | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Pf Employee Column -->
|
||||
<ng-container matColumnDef="pfEmployee">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Pf EE</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.pfEmployee | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Esi Employee Column -->
|
||||
<ng-container matColumnDef="esiEmployee">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Esi EE</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.esiEmployee | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Esi Employer Column -->
|
||||
<ng-container matColumnDef="esiEmployer">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Esi ER</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.esiEmployer | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Pf Employee Column -->
|
||||
<ng-container matColumnDef="pfEmployee">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Pf EE</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.pfEmployee | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Pf Employer Column -->
|
||||
<ng-container matColumnDef="pfEmployer">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Pf ER</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.pfEmployer | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Esi Employer Column -->
|
||||
<ng-container matColumnDef="esiEmployer">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Esi ER</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.esiEmployer | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Pf Employer Column -->
|
||||
<ng-container matColumnDef="pfEmployer">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Pf ER</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.pfEmployer | 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>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
</mat-card-actions>
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<mat-card-subtitle>
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
|
||||
<strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</mat-card-subtitle>
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
</mat-card>
|
||||
</div>
|
||||
@if (voucher.id) {
|
||||
<div class="row-container">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
|
||||
<strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</div>
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, Vie
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
@@ -34,7 +33,6 @@ import { EmployeeBenefitsDataSource } from './employee-benefits-datasource';
|
||||
templateUrl: './employee-benefits.component.html',
|
||||
styleUrls: ['./employee-benefits.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
@@ -151,7 +149,7 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
|
||||
this.form.setValue({
|
||||
date: moment(this.voucher.date, 'DD-MMM-YYYY'),
|
||||
addRow: {
|
||||
employee: '1',
|
||||
employee: '',
|
||||
grossSalary: '',
|
||||
daysWorked: '',
|
||||
},
|
||||
|
||||
@@ -1,70 +1,58 @@
|
||||
<mat-tab-group>
|
||||
<mat-tab label="Credit Salary">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="creditSalaryForm" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="creditSalaryMonth" formControlName="date" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="creditSalaryMonth"></mat-datepicker-toggle>
|
||||
<mat-datepicker
|
||||
#creditSalaryMonth
|
||||
startView="multi-year"
|
||||
(yearSelected)="chosenYearHandler($event)"
|
||||
(monthSelected)="chosenMonthHandler($event, creditSalaryMonth)"
|
||||
></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<form [formGroup]="creditSalaryForm" class="flex flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="creditSalaryMonth" formControlName="date" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="creditSalaryMonth"></mat-datepicker-toggle>
|
||||
<mat-datepicker
|
||||
#creditSalaryMonth
|
||||
startView="multi-year"
|
||||
(yearSelected)="chosenYearHandler($event)"
|
||||
(monthSelected)="chosenMonthHandler($event, creditSalaryMonth)"
|
||||
></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="creditSalary()" class="flex-auto basis-1/5">
|
||||
Credit Salary
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<button mat-raised-button color="primary" (click)="creditSalary()" class="flex-auto basis-1-5">
|
||||
Credit Salary
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-tab>
|
||||
<mat-tab label="Download Attendance Record">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<form
|
||||
[formGroup]="attendanceRecordForm"
|
||||
class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
|
||||
>
|
||||
<mat-form-field class="flex-auto basis-[35%] mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput [matDatepicker]="attendanceStartDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="attendanceStartDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #attendanceStartDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[35%] mr-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="attendanceFinishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="attendanceFinishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #attendanceFinishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<form
|
||||
[formGroup]="attendanceRecordForm"
|
||||
class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
|
||||
>
|
||||
<mat-form-field class="flex-auto basis-35">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput [matDatepicker]="attendanceStartDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="attendanceStartDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #attendanceStartDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-35">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="attendanceFinishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="attendanceFinishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #attendanceFinishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<a mat-raised-button color="primary" href="{{ attendanceRecordUrl() }}" class="flex-auto basis-[15%] mr-5"
|
||||
>Download Attendance</a
|
||||
>
|
||||
<a mat-raised-button color="primary" href="{{ fingerPrintUrl() }}" class="flex-auto basis-[15%]"
|
||||
>Download Fingerprints</a
|
||||
>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<a mat-raised-button color="primary" href="{{ attendanceRecordUrl() }}" class="flex-auto basis-15"
|
||||
>Download Attendance</a
|
||||
>
|
||||
<a mat-raised-button color="primary" href="{{ fingerPrintUrl() }}" class="flex-auto basis-15"
|
||||
>Download Fingerprints</a
|
||||
>
|
||||
</form>
|
||||
</mat-tab>
|
||||
<mat-tab label="Upload Fingerprints">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<input class="flex-auto basis-4/5 mr-5" type="file" (change)="detectFiles($event)" />
|
||||
<div class="row-container">
|
||||
<input class="flex-auto basis-4-5" type="file" (change)="detectFiles($event)" />
|
||||
|
||||
<button mat-raised-button color="primary" (click)="uploadFingerprints()" class="flex-auto basis-1/5">
|
||||
Upload
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<button mat-raised-button color="primary" (click)="uploadFingerprints()" class="flex-auto basis-1-5">
|
||||
Upload
|
||||
</button>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -17,7 +16,7 @@ import { EmployeeFunctionsService } from './employee-functions.service';
|
||||
styleUrls: ['./employee-functions.component.css'],
|
||||
imports: [
|
||||
MatTabsModule,
|
||||
MatCardModule,
|
||||
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,79 +1,77 @@
|
||||
<mat-card class="lg:max-w-[50%]">
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Employee</mat-card-title>
|
||||
<mat-icon matSuffix (click)="item.isStarred = !item.isStarred" class="pointer" [class.gold]="item.isStarred">
|
||||
{{ item.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Designation</mat-label>
|
||||
<input matInput formControlName="designation" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Salary</mat-label>
|
||||
<input matInput formControlName="salary" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Points</mat-label>
|
||||
<input matInput formControlName="points" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Cost Centre</mat-label>
|
||||
<mat-select formControlName="costCentre" name="CostCentre">
|
||||
@for (cs of costCentres; track cs) {
|
||||
<mat-option [value]="cs.id">
|
||||
{{ cs.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<h2 class="row-container wrapped">
|
||||
<span>Employee</span>
|
||||
<mat-icon matSuffix (click)="item.isStarred = !item.isStarred" class="pointer" [class.gold]="item.isStarred">
|
||||
{{ item.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col wrapped">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Designation</mat-label>
|
||||
<input matInput formControlName="designation" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Salary</mat-label>
|
||||
<input matInput formControlName="salary" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Points</mat-label>
|
||||
<input matInput formControlName="points" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Cost Centre</mat-label>
|
||||
<mat-select formControlName="costCentre" name="CostCentre">
|
||||
@for (cs of costCentres; track cs) {
|
||||
<mat-option [value]="cs.id">
|
||||
{{ cs.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Joining Date</mat-label>
|
||||
<input matInput [matDatepicker]="joiningDate" formControlName="joiningDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="joiningDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #joiningDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
@if (!item.isActive) {
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Joining Date</mat-label>
|
||||
<input matInput [matDatepicker]="joiningDate" formControlName="joiningDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="joiningDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #joiningDate></mat-datepicker>
|
||||
<mat-label>Leaving Date</mat-label>
|
||||
<input matInput [matDatepicker]="leavingDate" formControlName="leavingDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="leavingDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #leavingDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
@if (!item.isActive) {
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Leaving Date</mat-label>
|
||||
<input matInput [matDatepicker]="leavingDate" formControlName="leavingDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="leavingDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #leavingDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
}
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()">Save</button>
|
||||
@if (!!item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()">Save</button>
|
||||
@if (!!item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
@@ -24,7 +23,6 @@ import { EmployeeService } from '../employee.service';
|
||||
templateUrl: './employee-detail.component.html',
|
||||
styleUrls: ['./employee-detail.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
|
||||
@@ -1,94 +1,89 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Employees</mat-card-title>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
<a mat-button [routerLink]="['/employees', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
<h2 class="row-container space-between">
|
||||
<span>Employees</span>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
<a mat-button [routerLink]="['/employees', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Code Column -->
|
||||
<ng-container matColumnDef="code">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.code }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<a [routerLink]="['/employees', row.id]">
|
||||
@if (row.isStarred) {
|
||||
<mat-icon matSuffix class="gold">star </mat-icon>
|
||||
}
|
||||
{{ row.name }}
|
||||
</a>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Code Column -->
|
||||
<ng-container matColumnDef="code">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.code }}</mat-cell>
|
||||
</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<a [routerLink]="['/employees', row.id]">
|
||||
@if (row.isStarred) {
|
||||
<mat-icon matSuffix class="gold">star </mat-icon>
|
||||
}
|
||||
{{ row.name }}
|
||||
</a>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Salary Column -->
|
||||
<ng-container matColumnDef="salary">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Salary</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.salary | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Salary Column -->
|
||||
<ng-container matColumnDef="salary">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Salary</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.salary | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Points Column -->
|
||||
<ng-container matColumnDef="points">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Points</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.points | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Points Column -->
|
||||
<ng-container matColumnDef="points">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Points</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.points | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.costCentre.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.costCentre.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- JoiningDate Column -->
|
||||
<ng-container matColumnDef="joiningDate">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Joining On</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.joiningDate }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- JoiningDate Column -->
|
||||
<ng-container matColumnDef="joiningDate">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Joining On</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.joiningDate }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- LeavingDate Column -->
|
||||
<ng-container matColumnDef="leavingDate">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Left On</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.leavingDate }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- LeavingDate Column -->
|
||||
<ng-container matColumnDef="leavingDate">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Left On</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.leavingDate }}</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]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { CurrencyPipe, DecimalPipe } from '@angular/common';
|
||||
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -21,7 +20,6 @@ import { EmployeeListDataSource } from './employee-list-datasource';
|
||||
templateUrl: './employee-list.component.html',
|
||||
styleUrls: ['./employee-list.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
RouterModule,
|
||||
ReactiveFormsModule,
|
||||
|
||||
@@ -1,126 +1,115 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Entries</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Create / Last Edit Date From</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Create / Last Edit Date Till</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button (click)="refresh()" class="flex-auto basis-1/5">
|
||||
<mat-icon>refresh</mat-icon>Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-radio-group class="flex-auto basis-2/5 mr-5" formControlName="posted" (change)="togglePosted($event)">
|
||||
<mat-radio-button class="my-margin" [value]="true"> Posted </mat-radio-button>
|
||||
<mat-radio-button class="my-margin" [value]="false"> Not Posted </mat-radio-button>
|
||||
<mat-radio-button class="my-margin" [value]="null"> All </mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<mat-checkbox
|
||||
class="flex-auto basis-2/5"
|
||||
formControlName="issue"
|
||||
class="my-margin"
|
||||
[checked]="issue"
|
||||
(change)="toggleIssue()"
|
||||
>
|
||||
Include Issue Entries
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.date }}</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
<h2>Entries</h2>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="voucherType">
|
||||
<mat-header-cell *matHeaderCellDef>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Narration Column -->
|
||||
<ng-container matColumnDef="narration">
|
||||
<mat-header-cell *matHeaderCellDef>Narration</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- DebitName Column -->
|
||||
<ng-container matColumnDef="debitNames">
|
||||
<mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (item of row.debitNames; track item) {
|
||||
<li>{{ item }}</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- CreditName Column -->
|
||||
<ng-container matColumnDef="creditNames">
|
||||
<mat-header-cell *matHeaderCellDef>Credit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (item of row.creditNames; track item) {
|
||||
<li>{{ item }}</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- User Column -->
|
||||
<ng-container matColumnDef="user">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">User</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
<li>{{ row.creationDate | localTime }}</li>
|
||||
<li>{{ row.lastEditDate | localTime }}</li>
|
||||
<li>{{ row.user.name }}</li>
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.unposted]="!row.posted && posted !== false && row.type !== 'Issue'"
|
||||
></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Create / Last Edit Date From</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Create / Last Edit Date Till</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button (click)="refresh()" class="flex-auto basis-1-5">
|
||||
<mat-icon>refresh</mat-icon>Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-radio-group class="flex-auto basis-2-5" formControlName="posted" (change)="togglePosted($event)">
|
||||
<mat-radio-button class="my-margin" [value]="true"> Posted </mat-radio-button>
|
||||
<mat-radio-button class="my-margin" [value]="false"> Not Posted </mat-radio-button>
|
||||
<mat-radio-button class="my-margin" [value]="null"> All </mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<mat-checkbox
|
||||
class="flex-auto basis-2-5"
|
||||
formControlName="issue"
|
||||
class="my-margin"
|
||||
[checked]="issue"
|
||||
(change)="toggleIssue()"
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
Include Issue Entries
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.date }}</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="voucherType">
|
||||
<mat-header-cell *matHeaderCellDef>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Narration Column -->
|
||||
<ng-container matColumnDef="narration">
|
||||
<mat-header-cell *matHeaderCellDef>Narration</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- DebitName Column -->
|
||||
<ng-container matColumnDef="debitNames">
|
||||
<mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (item of row.debitNames; track item) {
|
||||
<li>{{ item }}</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- CreditName Column -->
|
||||
<ng-container matColumnDef="creditNames">
|
||||
<mat-header-cell *matHeaderCellDef>Credit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (item of row.creditNames; track item) {
|
||||
<li>{{ item }}</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- User Column -->
|
||||
<ng-container matColumnDef="user">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">User</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
<li>{{ row.creationDate | localTime }}</li>
|
||||
<li>{{ row.lastEditDate | localTime }}</li>
|
||||
<li>{{ row.user.name }}</li>
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.unposted]="!row.posted && posted !== false && row.type !== 'Issue'"
|
||||
></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -2,7 +2,6 @@ import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
@@ -24,7 +23,6 @@ import { Report } from './report';
|
||||
templateUrl: './entries.component.html',
|
||||
styleUrls: ['./entries.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,97 +1,93 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Incentives</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<h2>Incentives</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
Total Incentive: <strong>{{ voucher.incentive | number: '1.2-2' }}</strong> Total Points:
|
||||
<strong>{{ totalPoints() | number: '1.2-2' }}</strong> Point Value:
|
||||
<strong>{{ pointValue() | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" formArrayName="incentives">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.department }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- DaysWorked Column -->
|
||||
<ng-container matColumnDef="daysWorked">
|
||||
<mat-header-cell *matHeaderCellDef class="right">DaysWorked</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.daysWorked | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Points Column -->
|
||||
<ng-container matColumnDef="points">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Service Points</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
<button mat-icon-button color="warn" matPrefix (click)="less(row, i)">
|
||||
<mat-icon>remove</mat-icon>
|
||||
</button>
|
||||
<input matInput formControlName="points" autocomplete="off" (change)="change(row, i)" class="flex-auto" />
|
||||
<button mat-icon-button color="primary" matSuffix (click)="more(row, i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
Total Incentive: <strong>{{ voucher.incentive | number: '1.2-2' }}</strong> Total Points:
|
||||
<strong>{{ totalPoints() | number: '1.2-2' }}</strong> Point Value:
|
||||
<strong>{{ pointValue() | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" formArrayName="incentives">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Designation Column -->
|
||||
<ng-container matColumnDef="designation">
|
||||
<mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ amount(row) | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Department Column -->
|
||||
<ng-container matColumnDef="department">
|
||||
<mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.department }}</mat-cell>
|
||||
</ng-container>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
</form>
|
||||
|
||||
<!-- DaysWorked Column -->
|
||||
<ng-container matColumnDef="daysWorked">
|
||||
<mat-header-cell *matHeaderCellDef class="right">DaysWorked</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.daysWorked | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Points Column -->
|
||||
<ng-container matColumnDef="points">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Service Points</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i">
|
||||
<mat-form-field class="flex-auto">
|
||||
<button mat-icon-button color="warn" matPrefix (click)="less(row, i)">
|
||||
<mat-icon>remove</mat-icon>
|
||||
</button>
|
||||
<input matInput formControlName="points" autocomplete="off" (change)="change(row, i)" class="flex-auto" />
|
||||
<button mat-icon-button color="primary" matSuffix (click)="more(row, i)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ amount(row) | 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>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
</mat-card-actions>
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<mat-card-subtitle>
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
|
||||
<strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</mat-card-subtitle>
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
</mat-card>
|
||||
</div>
|
||||
@if (voucher.id) {
|
||||
<div class="row-container">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
|
||||
<strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</div>
|
||||
}
|
||||
@@ -2,7 +2,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 { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
@@ -31,7 +30,6 @@ import { IncentiveDataSource } from './incentive-datasource';
|
||||
templateUrl: './incentive.component.html',
|
||||
styleUrls: ['./incentive.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<h1 mat-dialog-title>Edit Issue Entry</h1>
|
||||
<div mat-dialog-content>
|
||||
<form [formGroup]="form">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/3 mr-5">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-3">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -23,7 +23,7 @@
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/3">
|
||||
<mat-form-field class="flex-auto basis-1-3">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
@@ -31,6 +31,6 @@
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="mr-5">Cancel</button>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="accept()">Ok</button>
|
||||
</div>
|
||||
@@ -30,9 +30,3 @@
|
||||
left: 60px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fill-remaining-space {
|
||||
/* This fills the remaining space, by using flexbox.
|
||||
Every toolbar row uses a flexbox row layout. */
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -1,176 +1,167 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Issue</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-[28%] mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[28%] mr-5">
|
||||
<mat-select formControlName="source">
|
||||
@for (costCentre of costCentres; track costCentre) {
|
||||
<mat-option [value]="costCentre.id">
|
||||
{{ costCentre.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[28%] mr-5">
|
||||
<mat-select formControlName="destination">
|
||||
@for (costCentre of costCentres; track costCentre) {
|
||||
<mat-option [value]="costCentre.id">
|
||||
{{ costCentre.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[16%]">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<h2>Issue</h2>
|
||||
|
||||
<div formGroupName="addRow" class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-[55%] mr-5">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#batchElement
|
||||
[matAutocomplete]="autoB"
|
||||
formControlName="batch"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#autoB="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="batchSelected($event)"
|
||||
>
|
||||
@for (batch of batches | async; track batch) {
|
||||
<mat-option [value]="batch">{{ batch.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/4 mr-5">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-28">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-28">
|
||||
<mat-select formControlName="source">
|
||||
@for (costCentre of costCentres; track costCentre) {
|
||||
<mat-option [value]="costCentre.id">
|
||||
{{ costCentre.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-28">
|
||||
<mat-select formControlName="destination">
|
||||
@for (costCentre of costCentres; track costCentre) {
|
||||
<mat-option [value]="costCentre.id">
|
||||
{{ costCentre.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-16">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-2/5">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<div formGroupName="addRow" class="row-container">
|
||||
<mat-form-field class="flex-auto basis-55">
|
||||
<mat-label>Product</mat-label>
|
||||
<input type="text" matInput #batchElement [matAutocomplete]="autoB" formControlName="batch" autocomplete="off" />
|
||||
<mat-autocomplete
|
||||
#autoB="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="batchSelected($event)"
|
||||
>
|
||||
@for (batch of batches | async; track batch) {
|
||||
<mat-option [value]="batch">{{ batch.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-4">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Batch Column -->
|
||||
<ng-container matColumnDef="batch">
|
||||
<mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.batch.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-2-5">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Batch Column -->
|
||||
<ng-container matColumnDef="batch">
|
||||
<mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.batch.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Rate Column -->
|
||||
<ng-container matColumnDef="rate">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Rate Column -->
|
||||
<ng-container matColumnDef="rate">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">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-form-field>
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button mat-raised-button color="warn" (click)="newVoucher()" class="mr-5">New Entry</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
<span class="fill-remaining-space"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</mat-card-actions>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Other issues for the day</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-footer>
|
||||
<mat-table #table [dataSource]="gridDataSource" matSort aria-label="Elements">
|
||||
<!-- Source Column -->
|
||||
<ng-container matColumnDef="source">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Source</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.source }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Destination Column -->
|
||||
<ng-container matColumnDef="destination">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Destination</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.destination }}</mat-cell>
|
||||
</ng-container>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="gridAmount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button mat-raised-button color="warn" (click)="newVoucher()" class="">New Entry</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
<span class="spacer"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Load Column -->
|
||||
<ng-container matColumnDef="load">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Load</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button (click)="goToVoucher(row.id)">
|
||||
<mat-icon>restore</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<h2>Other issues for the day</h2>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="gridColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: gridColumns"></mat-row>
|
||||
</mat-table>
|
||||
</mat-card-footer>
|
||||
</mat-card>
|
||||
<div class="row-container">
|
||||
<mat-table #table [dataSource]="gridDataSource" matSort aria-label="Elements">
|
||||
<!-- Source Column -->
|
||||
<ng-container matColumnDef="source">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Source</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.source }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Destination Column -->
|
||||
<ng-container matColumnDef="destination">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Destination</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.destination }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="gridAmount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Load Column -->
|
||||
<ng-container matColumnDef="load">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Load</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button (click)="goToVoucher(row.id)">
|
||||
<mat-icon>restore</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="gridColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: gridColumns"></mat-row>
|
||||
</mat-table>
|
||||
</div>
|
||||
@@ -3,7 +3,6 @@ import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, Vie
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
@@ -42,7 +41,6 @@ import { IssueGridService } from './issue-grid.service';
|
||||
templateUrl: './issue.component.html',
|
||||
styleUrls: ['./issue.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<h1 mat-dialog-title>Edit Journal Entry</h1>
|
||||
<div mat-dialog-content>
|
||||
<form [formGroup]="form">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-1/5 mr-5">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-1-5">
|
||||
<mat-select formControlName="debit">
|
||||
<mat-option [value]="1">Dr</mat-option>
|
||||
<mat-option [value]="-1">Cr</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[55%] mr-5">
|
||||
<mat-form-field class="flex-auto basis-55">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -35,7 +35,7 @@
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
<mat-form-field class="flex-auto basis-1/4">
|
||||
<mat-form-field class="flex-auto basis-1-4">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" autocomplete="off" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
@@ -44,6 +44,6 @@
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="mr-5">Cancel</button>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="accept()">Ok</button>
|
||||
</div>
|
||||
@@ -1,6 +1,6 @@
|
||||
import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
||||
import { AsyncPipe, CurrencyPipe } from '@angular/common';
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
@@ -47,6 +47,7 @@ export class JournalDialogComponent implements OnInit {
|
||||
|
||||
private math = inject(MathService);
|
||||
private accountSer = inject(AccountService);
|
||||
private cd = inject(ChangeDetectorRef);
|
||||
|
||||
accounts: Observable<Account[]>;
|
||||
form: FormGroup<{
|
||||
@@ -91,6 +92,7 @@ export class JournalDialogComponent implements OnInit {
|
||||
this.account = account;
|
||||
this.accountSer.balance(account.id as string, this.data.date).subscribe((v) => {
|
||||
this.accBal = v;
|
||||
this.cd.detectChanges();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -38,8 +38,3 @@
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fill-remaining-space {
|
||||
/* This fills the remaining space, by using flexbox.
|
||||
Every toolbar row uses a flexbox row layout. */
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -1,185 +1,175 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Journal</mat-card-title>
|
||||
<mat-icon
|
||||
matSuffix
|
||||
(click)="voucher.isStarred = !voucher.isStarred"
|
||||
class="pointer"
|
||||
[class.gold]="voucher.isStarred"
|
||||
>
|
||||
{{ voucher.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div formGroupName="addRow" class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto mr-5 basis-1/6">
|
||||
<mat-select formControlName="debit">
|
||||
<mat-option [value]="1">Dr</mat-option>
|
||||
<mat-option [value]="-1">Cr</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5 basis-1/2">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
@if (accBal) {
|
||||
<mat-hint>
|
||||
Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
|
||||
<strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="accountSelected($event)"
|
||||
>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
<mat-form-field class="flex-auto mr-5 basis-1/6">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" autocomplete="off" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Journal</span>
|
||||
<mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer" [class.gold]="voucher.isStarred">
|
||||
{{ voucher.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</h2>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/6">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debit">
|
||||
<mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.debit === 1 ? 'Dr' : 'Cr' }}</mat-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div formGroupName="addRow" class="row-container">
|
||||
<mat-form-field class="flex-auto basis-1-6">
|
||||
<mat-select formControlName="debit">
|
||||
<mat-option [value]="1">Dr</mat-option>
|
||||
<mat-option [value]="-1">Cr</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-2">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
@if (accBal) {
|
||||
<mat-hint>
|
||||
Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
|
||||
<strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="accountSelected($event)"
|
||||
>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
<mat-form-field class="flex-auto basis-1-6">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" autocomplete="off" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Account Column -->
|
||||
<ng-container matColumnDef="account">
|
||||
<mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1-6">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debit">
|
||||
<mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.debit === 1 ? 'Dr' : 'Cr' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Account Column -->
|
||||
<ng-container matColumnDef="account">
|
||||
<mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Tag selection">
|
||||
@for (tag of voucher.tags; track tag) {
|
||||
<mat-chip-row (removed)="removeTag(tag)">
|
||||
{{ tag.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + tag.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Tag selection">
|
||||
@for (tag of voucher.tags; track tag) {
|
||||
<mat-chip-row (removed)="removeTag(tag)">
|
||||
{{ tag.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + tag.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
</mat-chip-grid>
|
||||
<input
|
||||
placeholder="New Tag..."
|
||||
#tagInput
|
||||
formControlName="tags"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[matAutocomplete]="autoTag"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addTag($event)"
|
||||
/>
|
||||
<mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
|
||||
@for (tag of tags | async; track tag) {
|
||||
<mat-option [value]="tag">{{ tag.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<div class="flex flex-row justify-center items-stretch">
|
||||
@for (item of voucher.files; track item) {
|
||||
<div class="img-container" class="flex-auto mr-5 basis-1/5">
|
||||
<img [src]="item.thumbnail" (click)="zoomImage(item)" />
|
||||
<button mat-icon-button class="overlay" (click)="deleteImage(item)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-chip-row>
|
||||
}
|
||||
<div class="img-container" class="flex flex-auto basis-1/5">
|
||||
<label ng-href for="fileUp">
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUp"
|
||||
multiple
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
(change)="image.detectFiles($event, voucher)"
|
||||
/>
|
||||
</div>
|
||||
</mat-chip-grid>
|
||||
<input
|
||||
placeholder="New Tag..."
|
||||
#tagInput
|
||||
formControlName="tags"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[matAutocomplete]="autoTag"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addTag($event)"
|
||||
/>
|
||||
<mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
|
||||
@for (tag of tags | async; track tag) {
|
||||
<mat-option [value]="tag">{{ tag.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
@for (item of voucher.files; track item) {
|
||||
<div class="img-container" class="flex-auto basis-1-5">
|
||||
<img [src]="item.thumbnail" (click)="zoomImage(item)" />
|
||||
<button mat-icon-button class="overlay" (click)="deleteImage(item)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
}
|
||||
<div class="img-container" class="flex flex-auto basis-1-5">
|
||||
<label ng-href for="fileUp">
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUp"
|
||||
multiple
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
(change)="image.detectFiles($event, voucher)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')" class="">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button
|
||||
mat-raised-button
|
||||
(click)="post()"
|
||||
[disabled]="voucher.posted || !auth.allowed('post-vouchers')"
|
||||
class="mr-5"
|
||||
>
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
<span class="fill-remaining-space"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
<span class="spacer"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
@@ -1,10 +1,18 @@
|
||||
import { COMMA, ENTER } from '@angular/cdk/keycodes';
|
||||
import { AsyncPipe, CurrencyPipe } from '@angular/common';
|
||||
import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import {
|
||||
AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
inject,
|
||||
OnInit,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
@@ -47,7 +55,6 @@ import { JournalDialogComponent } from './journal-dialog.component';
|
||||
templateUrl: './journal.component.html',
|
||||
styleUrls: ['./journal.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
@@ -77,6 +84,7 @@ export class JournalComponent implements OnInit, AfterViewInit {
|
||||
private ser = inject(VoucherService);
|
||||
private accountSer = inject(AccountService);
|
||||
private tagSer = inject(TagService);
|
||||
private cd = inject(ChangeDetectorRef);
|
||||
|
||||
@ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
|
||||
@ViewChild('dateElement', { static: false }) dateElement!: ElementRef<HTMLInputElement>;
|
||||
@@ -384,6 +392,7 @@ export class JournalComponent implements OnInit, AfterViewInit {
|
||||
const date = moment(this.form.value.date).format('DD-MMM-YYYY');
|
||||
this.accountSer.balance(account.id as string, date).subscribe((v) => {
|
||||
this.accBal = v;
|
||||
this.cd.detectChanges();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ export const routes: Routes = [
|
||||
resolve: {
|
||||
voucher: journalResolver,
|
||||
},
|
||||
runGuardsAndResolvers: 'always',
|
||||
runGuardsAndResolvers: 'paramsChange',
|
||||
},
|
||||
{
|
||||
path: ':id',
|
||||
@@ -27,6 +27,6 @@ export const routes: Routes = [
|
||||
resolve: {
|
||||
voucher: journalResolver,
|
||||
},
|
||||
runGuardsAndResolvers: 'always',
|
||||
runGuardsAndResolvers: 'paramsChange',
|
||||
},
|
||||
];
|
||||
@@ -1,169 +1,158 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Ledger</mat-card-title>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-select formControlName="tags" multiple (selectionChange)="tagChanges($event.value)">
|
||||
@for (tag of tags; track tag) {
|
||||
<mat-option [value]="tag">{{ tag }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button tabindex="-1" extended class="flex-auto basis-1/5" (click)="labels()">
|
||||
<mat-icon>label</mat-icon>
|
||||
Manage Labels
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox
|
||||
(change)="$event ? toggleAllRows() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||
>
|
||||
</mat-checkbox>
|
||||
Date
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<mat-checkbox
|
||||
(click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)"
|
||||
>
|
||||
</mat-checkbox>
|
||||
{{ row.date }}
|
||||
</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
|
||||
</ng-container>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Ledger</span>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</h2>
|
||||
|
||||
<!-- Particulars Column -->
|
||||
<ng-container matColumnDef="particulars">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
<mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-select formControlName="tags" multiple (selectionChange)="tagChanges($event.value)">
|
||||
@for (tag of tags; track tag) {
|
||||
<mat-option [value]="tag">{{ tag }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button tabindex="-1" extended class="flex-auto basis-1-5" (click)="labels()">
|
||||
<mat-icon>label</mat-icon>
|
||||
Manage Labels
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox
|
||||
(change)="$event ? toggleAllRows() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||
>
|
||||
</mat-checkbox>
|
||||
Date
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<mat-checkbox
|
||||
(click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)"
|
||||
>
|
||||
</mat-checkbox>
|
||||
{{ row.date }}
|
||||
</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Narration Column -->
|
||||
<ng-container matColumnDef="narration">
|
||||
<mat-header-cell *matHeaderCellDef>Narration</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
>{{ row.narration }}
|
||||
<mat-chip-set>
|
||||
@for (tag of row.tags; track tag) {
|
||||
<mat-chip>{{ tag }}</mat-chip>
|
||||
}
|
||||
</mat-chip-set></mat-cell
|
||||
>
|
||||
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | clear }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ dataSource.debit | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="credit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | clear }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ dataSource.credit | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Running Column -->
|
||||
<ng-container matColumnDef="running">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Running</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.running | currency: 'INR' | accounting }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{
|
||||
dataSource.running | currency: 'INR' | accounting
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.selected]="selectedRowId === row.id"
|
||||
[class.unposted]="!row.posted && selectedRowId !== row.id"
|
||||
(click)="selectRow(row.id)"
|
||||
></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
|
||||
<!-- Particulars Column -->
|
||||
<ng-container matColumnDef="particulars">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Narration Column -->
|
||||
<ng-container matColumnDef="narration">
|
||||
<mat-header-cell *matHeaderCellDef>Narration</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
>{{ row.narration }}
|
||||
<mat-chip-set>
|
||||
@for (tag of row.tags; track tag) {
|
||||
<mat-chip>{{ tag }}</mat-chip>
|
||||
}
|
||||
</mat-chip-set></mat-cell
|
||||
>
|
||||
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | clear }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ dataSource.debit | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="credit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | clear }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ dataSource.credit | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Running Column -->
|
||||
<ng-container matColumnDef="running">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Running</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.running | currency: 'INR' | accounting }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{
|
||||
dataSource.running | currency: 'INR' | accounting
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.selected]="selectedRowId === row.id"
|
||||
[class.unposted]="!row.posted && selectedRowId !== row.id"
|
||||
(click)="selectRow(row.id)"
|
||||
></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -4,7 +4,6 @@ import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, Vie
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
@@ -39,7 +38,6 @@ import { LedgerItem } from './ledger-item';
|
||||
templateUrl: './ledger.component.html',
|
||||
styleUrls: ['./ledger.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatCheckboxModule,
|
||||
MatChipsModule,
|
||||
MatIconModule,
|
||||
|
||||
@@ -1,136 +1,132 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Mozimo Product Register</mat-card-title>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Mozimo Product Register</span>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#dateElement
|
||||
[matDatepicker]="date"
|
||||
(focus)="dateElement.select()"
|
||||
formControlName="date"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" aria-label="Elements" formArrayName="items">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef class="center first">Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center first">
|
||||
<span
|
||||
matBadge="1"
|
||||
matBadgeSize="small"
|
||||
[matBadgeHidden]="!row.lastEditDate"
|
||||
matTooltip="{{ row.lastEditDate | localTime }}"
|
||||
[matTooltipDisabled]="!row.lastEditDate"
|
||||
>{{ row.product.name }}</span
|
||||
>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Opening Column -->
|
||||
<ng-container matColumnDef="opening">
|
||||
<mat-header-cell *matHeaderCellDef class="right middle">Opening</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.opening | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Received Column -->
|
||||
<ng-container matColumnDef="received">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Received</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Received</mat-label>
|
||||
<input matInput type="number" formControlName="received" (change)="updateReceived($event, row)" />
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" aria-label="Elements" formArrayName="items">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef class="center first">Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center first">
|
||||
<span
|
||||
matBadge="1"
|
||||
matBadgeSize="small"
|
||||
[matBadgeHidden]="!row.lastEditDate"
|
||||
matTooltip="{{ row.lastEditDate | localTime }}"
|
||||
[matTooltipDisabled]="!row.lastEditDate"
|
||||
>{{ row.product.name }}</span
|
||||
>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Opening Column -->
|
||||
<ng-container matColumnDef="opening">
|
||||
<mat-header-cell *matHeaderCellDef class="right middle">Opening</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.opening | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Sale Column -->
|
||||
<ng-container matColumnDef="sale">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Sale</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Sale</mat-label>
|
||||
<input matInput type="number" formControlName="sale" (change)="updateSale($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Received Column -->
|
||||
<ng-container matColumnDef="received">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Received</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Received</mat-label>
|
||||
<input matInput type="number" formControlName="received" (change)="updateReceived($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Nc Column -->
|
||||
<ng-container matColumnDef="nc">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Nc</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Nc</mat-label>
|
||||
<input matInput type="number" formControlName="nc" (change)="updateNc($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Sale Column -->
|
||||
<ng-container matColumnDef="sale">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Sale</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Sale</mat-label>
|
||||
<input matInput type="number" formControlName="sale" (change)="updateSale($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Display Column -->
|
||||
<ng-container matColumnDef="display">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Display</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Display</mat-label>
|
||||
<input matInput type="number" formControlName="display" (change)="updateDisplay($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Nc Column -->
|
||||
<ng-container matColumnDef="nc">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Nc</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Nc</mat-label>
|
||||
<input matInput type="number" formControlName="nc" (change)="updateNc($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Ageing Column -->
|
||||
<ng-container matColumnDef="ageing">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Ageing</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Ageing</mat-label>
|
||||
<input matInput type="number" formControlName="ageing" (change)="updateAgeing($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Display Column -->
|
||||
<ng-container matColumnDef="display">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Display</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Display</mat-label>
|
||||
<input matInput type="number" formControlName="display" (change)="updateDisplay($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Variance Column -->
|
||||
<ng-container matColumnDef="variance">
|
||||
<mat-header-cell *matHeaderCellDef class="right middle">Variance</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.variance | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Ageing Column -->
|
||||
<ng-container matColumnDef="ageing">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Ageing</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Ageing</mat-label>
|
||||
<input matInput type="number" formControlName="ageing" (change)="updateAgeing($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Closing Column -->
|
||||
<ng-container matColumnDef="closing">
|
||||
<mat-header-cell *matHeaderCellDef class="right last">Closing</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right last">{{ row.closing | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Variance Column -->
|
||||
<ng-container matColumnDef="variance">
|
||||
<mat-header-cell *matHeaderCellDef class="right middle">Variance</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.variance | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<!-- Closing Column -->
|
||||
<ng-container matColumnDef="closing">
|
||||
<mat-header-cell *matHeaderCellDef class="right last">Closing</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right last">{{ row.closing | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</form>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
</div>
|
||||
@@ -4,7 +4,6 @@ import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } fr
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
@@ -35,7 +34,7 @@ import { MozimoDailyRegisterService } from './mozimo-daily-register.service';
|
||||
MatAutocompleteModule,
|
||||
MatBadgeModule,
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
|
||||
MatDatepickerModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
|
||||
@@ -1,164 +1,154 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Mozimo Product Register</mat-card-title>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#productElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="product"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
@for (product of products | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" aria-label="Elements" formArrayName="items">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef class="center first">Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center first">
|
||||
<span
|
||||
matBadge="1"
|
||||
matBadgeSize="small"
|
||||
[matBadgeHidden]="!row.lastEditDate"
|
||||
matTooltip="{{ row.lastEditDate | localTime }}"
|
||||
[matTooltipDisabled]="!row.lastEditDate"
|
||||
>{{ row.date }}</span
|
||||
>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Mozimo Product Register</span>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</h2>
|
||||
|
||||
<!-- Opening Column -->
|
||||
<ng-container matColumnDef="opening">
|
||||
<mat-header-cell *matHeaderCellDef class="right middle">Opening</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.opening | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Received Column -->
|
||||
<ng-container matColumnDef="received">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Received</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Received</mat-label>
|
||||
<input matInput type="number" formControlName="received" (change)="updateReceived($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Sale Column -->
|
||||
<ng-container matColumnDef="sale">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Sale</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Sale</mat-label>
|
||||
<input matInput type="number" formControlName="sale" (change)="updateSale($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Nc Column -->
|
||||
<ng-container matColumnDef="nc">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Nc</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Nc</mat-label>
|
||||
<input matInput type="number" formControlName="nc" (change)="updateNc($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Display Column -->
|
||||
<ng-container matColumnDef="display">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Display</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Display</mat-label>
|
||||
<input matInput type="number" formControlName="display" (change)="updateDisplay($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Ageing Column -->
|
||||
<ng-container matColumnDef="ageing">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Ageing</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Ageing</mat-label>
|
||||
<input matInput type="number" formControlName="ageing" (change)="updateAgeing($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Variance Column -->
|
||||
<ng-container matColumnDef="variance">
|
||||
<mat-header-cell *matHeaderCellDef class="right middle">Variance</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.variance | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Closing Column -->
|
||||
<ng-container matColumnDef="closing">
|
||||
<mat-header-cell *matHeaderCellDef class="right last">Closing</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right last">{{ row.closing | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<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]"
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#productElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="product"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
</mat-paginator>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
@for (product of products | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" aria-label="Elements" formArrayName="items">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef class="center first">Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center first">
|
||||
<span
|
||||
matBadge="1"
|
||||
matBadgeSize="small"
|
||||
[matBadgeHidden]="!row.lastEditDate"
|
||||
matTooltip="{{ row.lastEditDate | localTime }}"
|
||||
[matTooltipDisabled]="!row.lastEditDate"
|
||||
>{{ row.date }}</span
|
||||
>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Opening Column -->
|
||||
<ng-container matColumnDef="opening">
|
||||
<mat-header-cell *matHeaderCellDef class="right middle">Opening</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.opening | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Received Column -->
|
||||
<ng-container matColumnDef="received">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Received</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Received</mat-label>
|
||||
<input matInput type="number" formControlName="received" (change)="updateReceived($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Sale Column -->
|
||||
<ng-container matColumnDef="sale">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Sale</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Sale</mat-label>
|
||||
<input matInput type="number" formControlName="sale" (change)="updateSale($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Nc Column -->
|
||||
<ng-container matColumnDef="nc">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Nc</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Nc</mat-label>
|
||||
<input matInput type="number" formControlName="nc" (change)="updateNc($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Display Column -->
|
||||
<ng-container matColumnDef="display">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Display</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Display</mat-label>
|
||||
<input matInput type="number" formControlName="display" (change)="updateDisplay($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Ageing Column -->
|
||||
<ng-container matColumnDef="ageing">
|
||||
<mat-header-cell *matHeaderCellDef class="middle">Ageing</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Ageing</mat-label>
|
||||
<input matInput type="number" formControlName="ageing" (change)="updateAgeing($event, row)" />
|
||||
</mat-form-field>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Variance Column -->
|
||||
<ng-container matColumnDef="variance">
|
||||
<mat-header-cell *matHeaderCellDef class="right middle">Variance</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right middle">{{ row.variance | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Closing Column -->
|
||||
<ng-container matColumnDef="closing">
|
||||
<mat-header-cell *matHeaderCellDef class="right last">Closing</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right last">{{ row.closing | number: '0.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
|
||||
</div>
|
||||
@@ -4,7 +4,6 @@ import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } fr
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
@@ -39,7 +38,7 @@ import { MozimoProductRegisterService } from './mozimo-product-register.service'
|
||||
MatAutocompleteModule,
|
||||
MatBadgeModule,
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
|
||||
MatDatepickerModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
|
||||
@@ -1,67 +1,56 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Net Transactions</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
</ng-container>
|
||||
<h2>Net Transactions</h2>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | accounting }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="credit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | accounting }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | accounting }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="credit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | accounting }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<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]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -2,7 +2,6 @@ import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -21,7 +20,6 @@ import { NetTransactionsDataSource } from './net-transactions-datasource';
|
||||
templateUrl: './net-transactions.component.html',
|
||||
styleUrls: ['./net-transactions.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,43 +1,38 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Non Contract Purchases</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-table [dataSource]="dataSource" aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
|
||||
</ng-container>
|
||||
<h2>Non Contract Purchases</h2>
|
||||
|
||||
<!-- Vendor Column -->
|
||||
<ng-container matColumnDef="vendor">
|
||||
<mat-header-cell *matHeaderCellDef>Vendor</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.vendor }}</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
<mat-table [dataSource]="dataSource" aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.product }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Vendor Column -->
|
||||
<ng-container matColumnDef="vendor">
|
||||
<mat-header-cell *matHeaderCellDef>Vendor</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.vendor }}</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
|
||||
<!-- Contract Price Column -->
|
||||
<ng-container matColumnDef="contractPrice">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Contract</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.contractPrice | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.product }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Purchase Price Column -->
|
||||
<ng-container matColumnDef="purchasePrice">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Purchase</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.purchasePrice | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Contract Price Column -->
|
||||
<ng-container matColumnDef="contractPrice">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Contract</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.contractPrice | 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-card-content>
|
||||
</mat-card>
|
||||
<!-- Purchase Price Column -->
|
||||
<ng-container matColumnDef="purchasePrice">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Purchase</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.purchasePrice | 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>
|
||||
@@ -1,6 +1,5 @@
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
|
||||
@@ -11,7 +10,7 @@ import { NonContractPurchaseDatasource } from './non-contract-purchase-datasourc
|
||||
selector: 'app-non-contract-purchase',
|
||||
templateUrl: './non-contract-purchase.component.html',
|
||||
styleUrls: ['./non-contract-purchase.component.css'],
|
||||
imports: [MatCardModule, MatTableModule, RouterModule, CurrencyPipe],
|
||||
imports: [MatTableModule, RouterModule, CurrencyPipe],
|
||||
})
|
||||
export class NonContractPurchaseComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<h1 mat-dialog-title>Edit Payment Entry</h1>
|
||||
<div mat-dialog-content>
|
||||
<form [formGroup]="form">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/3 mr-5">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-3">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -29,7 +29,7 @@
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
<mat-form-field class="flex-auto basis-1/3">
|
||||
<mat-form-field class="flex-auto basis-1-3">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" autocomplete="off" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
@@ -38,6 +38,6 @@
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="mr-5">Cancel</button>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="accept()">Ok</button>
|
||||
</div>
|
||||
@@ -1,6 +1,6 @@
|
||||
import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
||||
import { AsyncPipe, CurrencyPipe } from '@angular/common';
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
@@ -45,6 +45,7 @@ export class PaymentDialogComponent implements OnInit {
|
||||
|
||||
private math = inject(MathService);
|
||||
private accountSer = inject(AccountService);
|
||||
private cd = inject(ChangeDetectorRef);
|
||||
|
||||
accounts: Observable<Account[]>;
|
||||
form: FormGroup<{
|
||||
@@ -86,6 +87,7 @@ export class PaymentDialogComponent implements OnInit {
|
||||
this.account = account;
|
||||
this.accountSer.balance(account.id as string, this.data.date).subscribe((v) => {
|
||||
this.accBal = v;
|
||||
this.cd.detectChanges();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -38,8 +38,3 @@
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fill-remaining-space {
|
||||
/* This fills the remaining space, by using flexbox.
|
||||
Every toolbar row uses a flexbox row layout. */
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -1,188 +1,178 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Payment</mat-card-title>
|
||||
<mat-icon
|
||||
matSuffix
|
||||
(click)="voucher.isStarred = !voucher.isStarred"
|
||||
class="pointer"
|
||||
[class.gold]="voucher.isStarred"
|
||||
>
|
||||
{{ voucher.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-select formControlName="paymentAccount">
|
||||
@for (account of paymentAccounts; track account) {
|
||||
<mat-option [value]="account.id">
|
||||
{{ account.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/5">
|
||||
<mat-label>Payment Amount</mat-label>
|
||||
<input type="text" matInput formControlName="paymentAmount" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Payment</span>
|
||||
<mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer" [class.gold]="voucher.isStarred">
|
||||
{{ voucher.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</h2>
|
||||
|
||||
<div formGroupName="addRow" class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-[55%] mr-5">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
@if (accBal) {
|
||||
<mat-hint>
|
||||
Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
|
||||
<strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="accountSelected($event)"
|
||||
>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
<mat-form-field class="flex-auto basis-1/4 mr-5">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" autocomplete="off" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/5">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Account Column -->
|
||||
<ng-container matColumnDef="account">
|
||||
<mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<mat-form-field>
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Tag selection">
|
||||
@for (tag of voucher.tags; track tag) {
|
||||
<mat-chip-row (removed)="removeTag(tag)">
|
||||
{{ tag.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + tag.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
</mat-chip-grid>
|
||||
<input
|
||||
placeholder="New Tag..."
|
||||
#tagInput
|
||||
formControlName="tags"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[matAutocomplete]="autoTag"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addTag($event)"
|
||||
/>
|
||||
<mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
|
||||
@for (tag of tags | async; track tag) {
|
||||
<mat-option [value]="tag">{{ tag.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<div class="flex flex-row justify-center items-stretch">
|
||||
@for (item of voucher.files; track item) {
|
||||
<div class="img-container" class="flex-auto mr-5 basis-1/5">
|
||||
<img [src]="item.thumbnail" (click)="zoomImage(item)" />
|
||||
<button mat-icon-button class="overlay" (click)="deleteImage(item)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-select formControlName="paymentAccount">
|
||||
@for (account of paymentAccounts; track account) {
|
||||
<mat-option [value]="account.id">
|
||||
{{ account.name }}
|
||||
</mat-option>
|
||||
}
|
||||
<div class="img-container" class="flex flex-auto basis-1/5">
|
||||
<label ng-href for="fileUp">
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUp"
|
||||
multiple
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
(change)="image.detectFiles($event, voucher)"
|
||||
/>
|
||||
</div>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-5">
|
||||
<mat-label>Payment Amount</mat-label>
|
||||
<input type="text" matInput formControlName="paymentAmount" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div formGroupName="addRow" class="row-container">
|
||||
<mat-form-field class="flex-auto basis-55">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
@if (accBal) {
|
||||
<mat-hint>
|
||||
Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
|
||||
<strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="accountSelected($event)"
|
||||
>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
<mat-form-field class="flex-auto basis-1-4">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" autocomplete="off" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1-5">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Account Column -->
|
||||
<ng-container matColumnDef="account">
|
||||
<mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Tag selection">
|
||||
@for (tag of voucher.tags; track tag) {
|
||||
<mat-chip-row (removed)="removeTag(tag)">
|
||||
{{ tag.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + tag.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
</mat-chip-grid>
|
||||
<input
|
||||
placeholder="New Tag..."
|
||||
#tagInput
|
||||
formControlName="tags"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[matAutocomplete]="autoTag"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addTag($event)"
|
||||
/>
|
||||
<mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
|
||||
@for (tag of tags | async; track tag) {
|
||||
<mat-option [value]="tag">{{ tag.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
@for (item of voucher.files; track item) {
|
||||
<div class="img-container" class="flex-auto basis-1-5">
|
||||
<img [src]="item.thumbnail" (click)="zoomImage(item)" />
|
||||
<button mat-icon-button class="overlay" (click)="deleteImage(item)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
}
|
||||
<div class="img-container" class="flex flex-auto basis-1-5">
|
||||
<label ng-href for="fileUp">
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUp"
|
||||
multiple
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
(change)="image.detectFiles($event, voucher)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')" class="">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button
|
||||
mat-raised-button
|
||||
(click)="post()"
|
||||
[disabled]="voucher.posted || !auth.allowed('post-vouchers')"
|
||||
class="mr-5"
|
||||
>
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
<span class="fill-remaining-space"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
<span class="spacer"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
@@ -1,10 +1,18 @@
|
||||
import { COMMA, ENTER } from '@angular/cdk/keycodes';
|
||||
import { AsyncPipe, CurrencyPipe } from '@angular/common';
|
||||
import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import {
|
||||
AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
inject,
|
||||
OnInit,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
@@ -47,7 +55,6 @@ import { PaymentDialogComponent } from './payment-dialog.component';
|
||||
templateUrl: './payment.component.html',
|
||||
styleUrls: ['./payment.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
@@ -77,6 +84,7 @@ export class PaymentComponent implements OnInit, AfterViewInit {
|
||||
private ser = inject(VoucherService);
|
||||
private accountSer = inject(AccountService);
|
||||
private tagSer = inject(TagService);
|
||||
private cd = inject(ChangeDetectorRef);
|
||||
|
||||
@ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
|
||||
@ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
|
||||
@@ -398,6 +406,7 @@ export class PaymentComponent implements OnInit, AfterViewInit {
|
||||
const date = moment(this.form.value.date).format('DD-MMM-YYYY');
|
||||
this.accountSer.balance(account.id as string, date).subscribe((v) => {
|
||||
this.accBal = v;
|
||||
this.cd.detectChanges();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,37 +1,26 @@
|
||||
<mat-card class="lg:max-w-[50%]">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Period</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Valid From</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#validFromElement
|
||||
[matDatepicker]="validFrom"
|
||||
formControlName="validFrom"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validFrom></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Valid Till</mat-label>
|
||||
<input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validTill></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" class="mr-5">Save</button>
|
||||
@if (!!item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<h2>Period</h2>
|
||||
<form [formGroup]="form" class="flex-col wrapped">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Valid From</mat-label>
|
||||
<input matInput #validFromElement [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validFrom></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Valid Till</mat-label>
|
||||
<input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validTill></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" class="">Save</button>
|
||||
@if (!!item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
@@ -18,14 +17,7 @@ import { PeriodService } from '../period.service';
|
||||
selector: 'app-period-detail',
|
||||
templateUrl: './period-detail.component.html',
|
||||
styleUrls: ['./period-detail.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatDatepickerModule,
|
||||
MatButtonModule,
|
||||
],
|
||||
imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
|
||||
})
|
||||
export class PeriodDetailComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
@@ -1,33 +1,28 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Periods</mat-card-title>
|
||||
<a mat-button [routerLink]="['/periods', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
<h2 class="row-container space-between">
|
||||
<span>Periods</span>
|
||||
<a mat-button [routerLink]="['/periods', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<mat-table #table [dataSource]="dataSource" aria-label="Elements">
|
||||
<!-- Valid From Column -->
|
||||
<ng-container matColumnDef="validFrom">
|
||||
<mat-header-cell *matHeaderCellDef>Valid From</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<a [routerLink]="['/periods', row.id]">
|
||||
{{ row.validFrom }}
|
||||
</a>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-table #table [dataSource]="dataSource" aria-label="Elements">
|
||||
<!-- Valid From Column -->
|
||||
<ng-container matColumnDef="validFrom">
|
||||
<mat-header-cell *matHeaderCellDef>Valid From</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<a [routerLink]="['/periods', row.id]">
|
||||
{{ row.validFrom }}
|
||||
</a>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Valid Till Column -->
|
||||
<ng-container matColumnDef="validTill">
|
||||
<mat-header-cell *matHeaderCellDef>Valid Till</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.validTill }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Valid Till Column -->
|
||||
<ng-container matColumnDef="validTill">
|
||||
<mat-header-cell *matHeaderCellDef>Valid Till</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.validTill }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { ActivatedRoute, RouterModule } from '@angular/router';
|
||||
@@ -11,7 +11,7 @@ import { PeriodListDataSource } from './period-list-datasource';
|
||||
selector: 'app-period-list',
|
||||
templateUrl: './period-list.component.html',
|
||||
styleUrls: ['./period-list.component.css'],
|
||||
imports: [MatCardModule, RouterModule, MatIconModule, MatTableModule],
|
||||
imports: [RouterModule, MatIconModule, MatTableModule, MatButtonModule],
|
||||
})
|
||||
export class PeriodListComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
+18
-22
@@ -1,22 +1,18 @@
|
||||
<mat-card class="lg:max-w-[50%]">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Product Group</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="nutritional" class="flex-auto mr-5">Nutritional Information?</mat-checkbox>
|
||||
<mat-checkbox formControlName="iceCream" class="flex-auto">Ice Cream?</mat-checkbox>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button (click)="save()" color="primary">Save</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<h2>Product Group</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col wrapped">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-checkbox formControlName="nutritional" class="flex-auto">Nutritional Information?</mat-checkbox>
|
||||
<mat-checkbox formControlName="iceCream" class="flex-auto">Ice Cream?</mat-checkbox>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button (click)="save()" color="primary">Save</button>
|
||||
</div>
|
||||
+1
-2
@@ -1,7 +1,6 @@
|
||||
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -15,7 +14,7 @@ import { ProductGroupService } from '../product-group.service';
|
||||
selector: 'app-product-group-detail',
|
||||
templateUrl: './product-group-detail.component.html',
|
||||
styleUrls: ['./product-group-detail.component.css'],
|
||||
imports: [MatCardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, MatButtonModule],
|
||||
imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, MatButtonModule],
|
||||
})
|
||||
export class ProductGroupDetailComponent implements OnInit, AfterViewInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
+33
-38
@@ -1,40 +1,35 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Product Groups</mat-card-title>
|
||||
<a mat-button [routerLink]="['/product-groups', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
</a>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="['/product-groups', row.id]">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Product Groups</span>
|
||||
<a mat-button [routerLink]="['/product-groups', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<!-- Is Fixture Column -->
|
||||
<ng-container matColumnDef="isFixture">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<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]"
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="['/product-groups', row.id]">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</ng-container>
|
||||
|
||||
<!-- Is Fixture Column -->
|
||||
<ng-container matColumnDef="isFixture">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<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]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Component, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatSort, MatSortModule } from '@angular/material/sort';
|
||||
@@ -13,7 +13,7 @@ import { ProductGroupListDataSource } from './product-group-list-datasource';
|
||||
selector: 'app-product-group-list',
|
||||
templateUrl: './product-group-list.component.html',
|
||||
styleUrls: ['./product-group-list.component.css'],
|
||||
imports: [MatCardModule, RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule],
|
||||
imports: [RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule, MatButtonModule],
|
||||
})
|
||||
export class ProductGroupListComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
@@ -1,154 +1,143 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Product Ledger</mat-card-title>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#productElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="product"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
@for (product of products | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
|
||||
</ng-container>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Product Ledger</span>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</h2>
|
||||
|
||||
<!-- Particulars Column -->
|
||||
<ng-container matColumnDef="particulars">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
<mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#productElement
|
||||
[matAutocomplete]="auto"
|
||||
formControlName="product"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="selected($event)"
|
||||
>
|
||||
@for (product of products | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Narration Column -->
|
||||
<ng-container matColumnDef="narration">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Narration</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debitQuantity">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Dr. Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right"
|
||||
>{{ row.debitQuantity | number: '1.2-2' }} {{ row.debitUnit }}</mat-cell
|
||||
>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ debitQuantity | number: '1.2-2' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debitAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Dr. Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.debitAmount | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ debitAmount | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="creditQuantity">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Cr. Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right"
|
||||
>{{ row.creditQuantity | number: '1.2-2' }} {{ row.creditUnit }}</mat-cell
|
||||
>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ creditQuantity | number: '1.2-2' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="creditAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Cr. Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.creditAmount | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ creditAmount | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Running Column -->
|
||||
<ng-container matColumnDef="runningQuantity">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.runningQuantity | number: '1.2-2' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ runningQuantity | number: '1.2-2' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Running Column -->
|
||||
<ng-container matColumnDef="runningAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.runningAmount | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ runningAmount | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.selected]="selectedRowId === row.id"
|
||||
(click)="selectRow(row.id)"
|
||||
></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
<!-- Particulars Column -->
|
||||
<ng-container matColumnDef="particulars">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.name }}</a></mat-cell
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Narration Column -->
|
||||
<ng-container matColumnDef="narration">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Narration</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debitQuantity">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Dr. Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right"
|
||||
>{{ row.debitQuantity | number: '1.2-2' }} {{ row.debitUnit }}</mat-cell
|
||||
>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ debitQuantity | number: '1.2-2' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit Column -->
|
||||
<ng-container matColumnDef="debitAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Dr. Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.debitAmount | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ debitAmount | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="creditQuantity">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Cr. Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right"
|
||||
>{{ row.creditQuantity | number: '1.2-2' }} {{ row.creditUnit }}</mat-cell
|
||||
>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ creditQuantity | number: '1.2-2' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit Column -->
|
||||
<ng-container matColumnDef="creditAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Cr. Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.creditAmount | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ creditAmount | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Running Column -->
|
||||
<ng-container matColumnDef="runningQuantity">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.runningQuantity | number: '1.2-2' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ runningQuantity | number: '1.2-2' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Running Column -->
|
||||
<ng-container matColumnDef="runningAmount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.runningAmount | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">{{ runningAmount | currency: 'INR' }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.selected]="selectedRowId === row.id"
|
||||
(click)="selectRow(row.id)"
|
||||
></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -3,7 +3,6 @@ import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, Vie
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
@@ -30,7 +29,6 @@ import { ProductLedgerService } from './product-ledger.service';
|
||||
templateUrl: './product-ledger.component.html',
|
||||
styleUrls: ['./product-ledger.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
|
||||
@@ -2,19 +2,19 @@
|
||||
<div mat-dialog-content>
|
||||
<form [formGroup]="form">
|
||||
<div class="flex flex-row flex-wrap justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Units</mat-label>
|
||||
<input matInput formControlName="units" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Fraction</mat-label>
|
||||
<input matInput type="number" formControlName="fraction" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Yield</mat-label>
|
||||
<input matInput type="number" formControlName="productYield" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>{{ data.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
|
||||
<input matInput type="number" formControlName="costPrice" />
|
||||
</mat-form-field>
|
||||
@@ -26,6 +26,6 @@
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="mr-5">Cancel</button>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="accept()">Ok</button>
|
||||
</div>
|
||||
@@ -1,196 +1,189 @@
|
||||
<mat-card class="lg:max-w-[50%]">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Product</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/5">
|
||||
<mat-label>Fraction Units</mat-label>
|
||||
<input matInput formControlName="fractionUnits" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Description</mat-label>
|
||||
<input matInput #nameElement formControlName="description" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="isPurchased" class="flex-auto mr-5">Is Purchased?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isSold" class="flex-auto mr-5">Is Sold?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isActive" class="flex-auto">Is Active?</mat-checkbox>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Product Type</mat-label>
|
||||
<mat-select formControlName="productGroup" (selectionChange)="updatePG($event.value)">
|
||||
@for (pg of productGroups; track pg) {
|
||||
<mat-option [value]="pg.id">
|
||||
{{ pg.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Allergen</mat-label>
|
||||
<input matInput #nameElement formControlName="allergen" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@if (item.productGroup?.nutritional ?? false) {
|
||||
<h2>Nutritional Information</h2>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Protein</mat-label>
|
||||
<input matInput formControlName="protein" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Carbohydrate</mat-label>
|
||||
<input matInput formControlName="carbohydrate" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Total Sugar</mat-label>
|
||||
<input matInput formControlName="totalSugar" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Added Sugar</mat-label>
|
||||
<input matInput formControlName="addedSugar" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Total Fat</mat-label>
|
||||
<input matInput formControlName="totalFat" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Saturated Fat</mat-label>
|
||||
<input matInput formControlName="saturatedFat" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Trans Fat</mat-label>
|
||||
<input matInput formControlName="transFat" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Cholestrol</mat-label>
|
||||
<input matInput formControlName="cholestrol" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Sodium</mat-label>
|
||||
<input matInput formControlName="sodium" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
@if (item.productGroup?.iceCream ?? false) {
|
||||
<h2>Ice Cream Information</h2>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>MSNF</mat-label>
|
||||
<input matInput formControlName="msnf" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Other Solids</mat-label>
|
||||
<input matInput formControlName="otherSolids" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Total Solids</mat-label>
|
||||
<input matInput formControlName="totalSolids" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Water</mat-label>
|
||||
<input matInput formControlName="water" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
<h2>Stock Keeping Units</h2>
|
||||
<div
|
||||
formGroupName="addRow"
|
||||
class="flex flex-row flex-wrap justify-around content-start items-start sm:max-lg:flex-col"
|
||||
>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Units</mat-label>
|
||||
<input matInput formControlName="units" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Fraction</mat-label>
|
||||
<input matInput type="number" formControlName="fraction" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Yield</mat-label>
|
||||
<input matInput type="number" formControlName="productYield" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>{{ item.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
|
||||
<input matInput type="number" formControlName="costPrice" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Sale Price</mat-label>
|
||||
<input matInput type="number" formControlName="salePrice" />
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table [dataSource]="dataSource" aria-label="Elements">
|
||||
<!-- Units Column -->
|
||||
<ng-container matColumnDef="units">
|
||||
<mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.units }}</mat-cell>
|
||||
</ng-container>
|
||||
<h2>Product</h2>
|
||||
<form [formGroup]="form" class="flex-col wrapped">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement formControlName="name" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-5">
|
||||
<mat-label>Fraction Units</mat-label>
|
||||
<input matInput formControlName="fractionUnits" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Description</mat-label>
|
||||
<input matInput #nameElement formControlName="description" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-checkbox formControlName="isPurchased" class="flex-auto">Is Purchased?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isSold" class="flex-auto">Is Sold?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isActive" class="flex-auto">Is Active?</mat-checkbox>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Product Type</mat-label>
|
||||
<mat-select formControlName="productGroup" (selectionChange)="updatePG($event.value)">
|
||||
@for (pg of productGroups; track pg) {
|
||||
<mat-option [value]="pg.id">
|
||||
{{ pg.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Allergen</mat-label>
|
||||
<input matInput #nameElement formControlName="allergen" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@if (item.productGroup?.nutritional ?? false) {
|
||||
<h2>Nutritional Information</h2>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Protein</mat-label>
|
||||
<input matInput formControlName="protein" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Carbohydrate</mat-label>
|
||||
<input matInput formControlName="carbohydrate" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Total Sugar</mat-label>
|
||||
<input matInput formControlName="totalSugar" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Added Sugar</mat-label>
|
||||
<input matInput formControlName="addedSugar" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Total Fat</mat-label>
|
||||
<input matInput formControlName="totalFat" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Saturated Fat</mat-label>
|
||||
<input matInput formControlName="saturatedFat" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Trans Fat</mat-label>
|
||||
<input matInput formControlName="transFat" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Cholestrol</mat-label>
|
||||
<input matInput formControlName="cholestrol" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Sodium</mat-label>
|
||||
<input matInput formControlName="sodium" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
@if (item.productGroup?.iceCream ?? false) {
|
||||
<h2>Ice Cream Information</h2>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>MSNF</mat-label>
|
||||
<input matInput formControlName="msnf" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Other Solids</mat-label>
|
||||
<input matInput formControlName="otherSolids" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Total Solids</mat-label>
|
||||
<input matInput formControlName="totalSolids" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Water</mat-label>
|
||||
<input matInput formControlName="water" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
<h2>Stock Keeping Units</h2>
|
||||
<div formGroupName="addRow" class="row-container space-between">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Units</mat-label>
|
||||
<input matInput formControlName="units" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Fraction</mat-label>
|
||||
<input matInput type="number" formControlName="fraction" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Yield</mat-label>
|
||||
<input matInput type="number" formControlName="productYield" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>{{ item.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
|
||||
<input matInput type="number" formControlName="costPrice" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Sale Price</mat-label>
|
||||
<input matInput type="number" formControlName="salePrice" />
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row-container">
|
||||
<mat-table [dataSource]="dataSource" aria-label="Elements" class="flex-auto">
|
||||
<!-- Units Column -->
|
||||
<ng-container matColumnDef="units">
|
||||
<mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.units }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Fraction Column -->
|
||||
<ng-container matColumnDef="fraction">
|
||||
<mat-header-cell *matHeaderCellDef>Fraction</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.fraction }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Fraction Column -->
|
||||
<ng-container matColumnDef="fraction">
|
||||
<mat-header-cell *matHeaderCellDef>Fraction</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.fraction }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Yield Column -->
|
||||
<ng-container matColumnDef="yield">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Yield</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.productYield }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Yield Column -->
|
||||
<ng-container matColumnDef="yield">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Yield</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.productYield }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Cost Price Column -->
|
||||
<ng-container matColumnDef="costPrice">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Cost Price</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.costPrice | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Cost Price Column -->
|
||||
<ng-container matColumnDef="costPrice">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Cost Price</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.costPrice | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Sale Price Column -->
|
||||
<ng-container matColumnDef="salePrice">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Sale Price</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.salePrice | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Sale Price Column -->
|
||||
<ng-container matColumnDef="salePrice">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Sale Price</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.salePrice | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" class="mr-5">Save</button>
|
||||
@if (!!item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" class="">Save</button>
|
||||
@if (!!item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@@ -2,7 +2,6 @@ import { CurrencyPipe } from '@angular/common';
|
||||
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
@@ -27,7 +26,6 @@ import { ProductDetailDialogComponent } from './product-detail-dialog.component'
|
||||
templateUrl: './product-detail.component.html',
|
||||
styleUrls: ['./product-detail.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,117 +1,112 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Products</mat-card-title>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
<a mat-button [routerLink]="['/products', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
</a>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Products</span>
|
||||
@if (dataSource.data.length) {
|
||||
<button mat-icon-button (click)="exportCsv()">
|
||||
<mat-icon>save_alt</mat-icon>
|
||||
</button>
|
||||
}
|
||||
<a mat-button [routerLink]="['/products', 'new']">
|
||||
<mat-icon>add_box</mat-icon>
|
||||
Add
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (sku of row.skus; track sku) {
|
||||
<li>
|
||||
<a [routerLink]="['/products', row.id]"
|
||||
>{{ row.name }} ({{ showExtended ? sku.fraction + ' ' + row.fractionUnits + ' = 1 ' : ''
|
||||
}}{{ sku.units }})</a
|
||||
>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Cost Price Column -->
|
||||
<ng-container matColumnDef="costPrice">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Cost Price</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (sku of row.skus; track sku) {
|
||||
<li>
|
||||
{{ sku.costPrice | currency: 'INR' }}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Yield Column -->
|
||||
<ng-container matColumnDef="productYield">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Yield</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (sku of row.skus; track sku) {
|
||||
<li>
|
||||
{{ sku.productYield | percent: '1.2-2' }}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Product Group Column -->
|
||||
<ng-container matColumnDef="productGroup">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Product Group</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.productGroup?.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Info Column -->
|
||||
<ng-container matColumnDef="info">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Details</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<div layout="row">
|
||||
<div flex>
|
||||
<mat-icon>
|
||||
{{ row.isPurchased ? 'shopping_cart' : 'remove_shopping_cart' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.isPurchased ? 'Purchased' : 'Made' }}</b>
|
||||
</div>
|
||||
<div flex>
|
||||
<mat-icon>
|
||||
{{ row.isSold ? 'restaurant_menu' : 'import_contacts' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.isSold ? 'Sold' : 'Used' }}</b>
|
||||
</div>
|
||||
<div flex>
|
||||
<mat-icon>
|
||||
{{ row.isActive ? 'visibility' : 'visibility_off' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.isActive ? 'Active' : 'Deactivated' }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (sku of row.skus; track sku) {
|
||||
<li>
|
||||
<a [routerLink]="['/products', row.id]"
|
||||
>{{ row.name }} ({{ showExtended ? sku.fraction + ' ' + row.fractionUnits + ' = 1 ' : ''
|
||||
}}{{ sku.units }})</a
|
||||
>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Cost Price Column -->
|
||||
<ng-container matColumnDef="costPrice">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Cost Price</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (sku of row.skus; track sku) {
|
||||
<li>
|
||||
{{ sku.costPrice | currency: 'INR' }}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<!-- Yield Column -->
|
||||
<ng-container matColumnDef="productYield">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Yield</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
@for (sku of row.skus; track sku) {
|
||||
<li>
|
||||
{{ sku.productYield | percent: '1.2-2' }}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Product Group Column -->
|
||||
<ng-container matColumnDef="productGroup">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Product Group</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.productGroup?.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Info Column -->
|
||||
<ng-container matColumnDef="info">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Details</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<div layout="row">
|
||||
<div flex>
|
||||
<mat-icon>
|
||||
{{ row.isPurchased ? 'shopping_cart' : 'remove_shopping_cart' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.isPurchased ? 'Purchased' : 'Made' }}</b>
|
||||
</div>
|
||||
<div flex>
|
||||
<mat-icon>
|
||||
{{ row.isSold ? 'restaurant_menu' : 'import_contacts' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.isSold ? 'Sold' : 'Used' }}</b>
|
||||
</div>
|
||||
<div flex>
|
||||
<mat-icon>
|
||||
{{ row.isActive ? 'visibility' : 'visibility_off' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.isActive ? 'Active' : 'Deactivated' }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<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, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 5000]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -1,7 +1,7 @@
|
||||
import { CurrencyPipe, PercentPipe } from '@angular/common';
|
||||
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -21,9 +21,9 @@ import { ProductListDataSource } from './product-list-datasource';
|
||||
templateUrl: './product-list.component.html',
|
||||
styleUrls: ['./product-list.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
RouterModule,
|
||||
MatButtonModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,76 +1,65 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Profit & Loss</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Group Column -->
|
||||
<ng-container matColumnDef="group">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>{{ info.footer.group }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<h2>Profit & Loss</h2>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>{{ info.footer.name }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Group Column -->
|
||||
<ng-container matColumnDef="group">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>{{ info.footer.group }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">
|
||||
{{ info.footer.amount | currency: 'INR' }}
|
||||
</mat-footer-cell>
|
||||
</ng-container>
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef>{{ info.footer.name }}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Total Column -->
|
||||
<ng-container matColumnDef="total">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.total | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">
|
||||
{{ info.footer.total | currency: 'INR' }}
|
||||
</mat-footer-cell>
|
||||
</ng-container>
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">
|
||||
{{ info.footer.amount | currency: 'INR' }}
|
||||
</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
||||
</mat-table>
|
||||
<!-- Total Column -->
|
||||
<ng-container matColumnDef="total">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.total | currency: 'INR' }}</mat-cell>
|
||||
<mat-footer-cell *matFooterCellDef class="right">
|
||||
{{ info.footer.total | currency: 'INR' }}
|
||||
</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -2,7 +2,6 @@ import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -20,7 +19,6 @@ import { ProfitLossDataSource } from './profit-loss-datasource';
|
||||
templateUrl: './profit-loss.component.html',
|
||||
styleUrls: ['./profit-loss.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,93 +1,82 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Purchase Entries</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#startDateElement
|
||||
[matDatepicker]="startDate"
|
||||
formControlName="startDate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
|
||||
</ng-container>
|
||||
<h2>Purchase Entries</h2>
|
||||
|
||||
<!-- Supplier Column -->
|
||||
<ng-container matColumnDef="supplier">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.supplier }}</a></mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Finish Date</mat-label>
|
||||
<input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #finishDate></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Date Column -->
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.product }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Rate Column -->
|
||||
<ng-container matColumnDef="rate">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tax Column -->
|
||||
<ng-container matColumnDef="tax">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Discount Column -->
|
||||
<ng-container matColumnDef="discount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">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-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
<!-- Supplier Column -->
|
||||
<ng-container matColumnDef="supplier">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"
|
||||
><a [routerLink]="row.url">{{ row.supplier }}</a></mat-cell
|
||||
>
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</ng-container>
|
||||
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.product }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Rate Column -->
|
||||
<ng-container matColumnDef="rate">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tax Column -->
|
||||
<ng-container matColumnDef="tax">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Discount Column -->
|
||||
<ng-container matColumnDef="discount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">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-paginator
|
||||
#paginator
|
||||
[length]="dataSource.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
||||
>
|
||||
</mat-paginator>
|
||||
@@ -2,7 +2,6 @@ import { CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
|
||||
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
@@ -20,7 +19,6 @@ import { PurchaseEntriesDataSource } from './purchase-entries-datasource';
|
||||
templateUrl: './purchase-entries.component.html',
|
||||
styleUrls: ['./purchase-entries.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<h1 mat-dialog-title>Edit Purchase Return Entry</h1>
|
||||
<div mat-dialog-content>
|
||||
<form [formGroup]="form">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/3 mr-5">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-3">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -23,7 +23,7 @@
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/3">
|
||||
<mat-form-field class="flex-auto basis-1-3">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
@@ -31,6 +31,6 @@
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="mr-5">Cancel</button>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="accept()">Ok</button>
|
||||
</div>
|
||||
@@ -38,8 +38,3 @@
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fill-remaining-space {
|
||||
/* This fills the remaining space, by using flexbox.
|
||||
Every toolbar row uses a flexbox row layout. */
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -1,223 +1,206 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Purchase Return</mat-card-title>
|
||||
<mat-icon
|
||||
matSuffix
|
||||
(click)="voucher.isStarred = !voucher.isStarred"
|
||||
class="pointer"
|
||||
[class.gold]="voucher.isStarred"
|
||||
<h2 class="row-container space-between">
|
||||
<span>Purchase Return</span>
|
||||
<mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer" [class.gold]="voucher.isStarred">
|
||||
{{ voucher.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="autoA"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
@if (accBal) {
|
||||
<mat-hint>
|
||||
Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
|
||||
<strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
|
||||
</mat-hint>
|
||||
}
|
||||
<mat-autocomplete
|
||||
#autoA="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="accountSelected($event)"
|
||||
>
|
||||
{{ voucher.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="autoA"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
@if (accBal) {
|
||||
<mat-hint>
|
||||
Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
|
||||
<strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
|
||||
</mat-hint>
|
||||
}
|
||||
<mat-autocomplete
|
||||
#autoA="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="accountSelected($event)"
|
||||
>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/5">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div formGroupName="addRow" class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-[55%] mr-5">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#batchElement
|
||||
[matAutocomplete]="autoB"
|
||||
formControlName="batch"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#autoB="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="batchSelected($event)"
|
||||
>
|
||||
@for (batch of batches | async; track batch) {
|
||||
<mat-option [value]="batch">{{ batch.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/4 mr-5">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/5">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Rate Column -->
|
||||
<ng-container matColumnDef="rate">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tax Column -->
|
||||
<ng-container matColumnDef="tax">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Discount Column -->
|
||||
<ng-container matColumnDef="discount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<mat-form-field>
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Tag selection">
|
||||
@for (tag of voucher.tags; track tag) {
|
||||
<mat-chip-row (removed)="removeTag(tag)">
|
||||
{{ tag.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + tag.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
</mat-chip-grid>
|
||||
<input
|
||||
placeholder="New Tag..."
|
||||
#tagInput
|
||||
formControlName="tags"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[matAutocomplete]="autoTag"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addTag($event)"
|
||||
/>
|
||||
<mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
|
||||
@for (tag of tags | async; track tag) {
|
||||
<mat-option [value]="tag">{{ tag.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<div class="flex flex-row justify-center items-stretch mr-5">
|
||||
@for (item of voucher.files; track item) {
|
||||
<div class="img-container" class="flex-auto mr-5 basis-1/5">
|
||||
<img [src]="item.thumbnail" (click)="zoomImage(item)" />
|
||||
<button mat-icon-button class="overlay" (click)="deleteImage(item)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
<div class="img-container" class="flex flex-auto basis-1/5">
|
||||
<label ng-href for="fileUp">
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUp"
|
||||
multiple
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
(change)="image.detectFiles($event, voucher)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button
|
||||
mat-raised-button
|
||||
(click)="post()"
|
||||
[disabled]="voucher.posted || !auth.allowed('post-vouchers')"
|
||||
class="mr-5"
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-5">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div formGroupName="addRow" class="row-container">
|
||||
<mat-form-field class="flex-auto basis-55">
|
||||
<mat-label>Product</mat-label>
|
||||
<input type="text" matInput #batchElement [matAutocomplete]="autoB" formControlName="batch" autocomplete="off" />
|
||||
<mat-autocomplete
|
||||
#autoB="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="batchSelected($event)"
|
||||
>
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
@for (batch of batches | async; track batch) {
|
||||
<mat-option [value]="batch">{{ batch.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-4">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1-5">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Rate Column -->
|
||||
<ng-container matColumnDef="rate">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tax Column -->
|
||||
<ng-container matColumnDef="tax">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Discount Column -->
|
||||
<ng-container matColumnDef="discount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Tag selection">
|
||||
@for (tag of voucher.tags; track tag) {
|
||||
<mat-chip-row (removed)="removeTag(tag)">
|
||||
{{ tag.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + tag.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
</mat-chip-grid>
|
||||
<input
|
||||
placeholder="New Tag..."
|
||||
#tagInput
|
||||
formControlName="tags"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[matAutocomplete]="autoTag"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addTag($event)"
|
||||
/>
|
||||
<mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
|
||||
@for (tag of tags | async; track tag) {
|
||||
<mat-option [value]="tag">{{ tag.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
@for (item of voucher.files; track item) {
|
||||
<div class="img-container" class="flex-auto basis-1-5">
|
||||
<img [src]="item.thumbnail" (click)="zoomImage(item)" />
|
||||
<button mat-icon-button class="overlay" (click)="deleteImage(item)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
<span class="fill-remaining-space"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<div class="img-container" class="flex flex-auto basis-1-5">
|
||||
<label ng-href for="fileUp">
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUp"
|
||||
multiple
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
(change)="image.detectFiles($event, voucher)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')" class="">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
<span class="spacer"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
@@ -4,7 +4,6 @@ import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, Vie
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
@@ -48,7 +47,6 @@ import { PurchaseReturnDialogComponent } from './purchase-return-dialog.componen
|
||||
templateUrl: './purchase-return.component.html',
|
||||
styleUrls: ['./purchase-return.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<h1 mat-dialog-title>Edit Purchase Entry</h1>
|
||||
<div mat-dialog-content>
|
||||
<form [formGroup]="form">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-[52%] mr-5">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-52">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -23,19 +23,19 @@
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[12%] mr-5">
|
||||
<mat-form-field class="flex-auto basis-12">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[12%] mr-5">
|
||||
<mat-form-field class="flex-auto basis-12">
|
||||
<mat-label>Price</mat-label>
|
||||
<input type="text" matInput formControlName="price" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[12%] mr-5">
|
||||
<mat-form-field class="flex-auto basis-12">
|
||||
<mat-label>Tax</mat-label>
|
||||
<input type="text" matInput formControlName="tax" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[12%]">
|
||||
<mat-form-field class="flex-auto basis-12">
|
||||
<mat-label>Discount</mat-label>
|
||||
<input type="text" matInput formControlName="discount" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
@@ -43,6 +43,6 @@
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="mr-5">Cancel</button>
|
||||
<button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial class="">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="accept()">Ok</button>
|
||||
</div>
|
||||
@@ -38,9 +38,3 @@
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fill-remaining-space {
|
||||
/* This fills the remaining space, by using flexbox.
|
||||
Every toolbar row uses a flexbox row layout. */
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -1,235 +1,225 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Purchase</mat-card-title>
|
||||
<mat-icon
|
||||
matSuffix
|
||||
(click)="voucher.isStarred = !voucher.isStarred"
|
||||
class="pointer"
|
||||
[class.gold]="voucher.isStarred"
|
||||
<h2 class="row-container space-between">
|
||||
<span>Purchase</span>
|
||||
<mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer" [class.gold]="voucher.isStarred">
|
||||
{{ voucher.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="autoA"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
@if (accBal) {
|
||||
<mat-hint>
|
||||
Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
|
||||
<strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
|
||||
</mat-hint>
|
||||
}
|
||||
<mat-autocomplete
|
||||
#autoA="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="accountSelected($event)"
|
||||
>
|
||||
{{ voucher.isStarred ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</mat-card-title-group>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Account</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#accountElement
|
||||
[matAutocomplete]="autoA"
|
||||
formControlName="account"
|
||||
autocomplete="off"
|
||||
/>
|
||||
@if (accBal) {
|
||||
<mat-hint>
|
||||
Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
|
||||
<strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
|
||||
</mat-hint>
|
||||
}
|
||||
<mat-autocomplete
|
||||
#autoA="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="accountSelected($event)"
|
||||
>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/5">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div formGroupName="addRow" class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-1/2 mr-5">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#productElement
|
||||
[matAutocomplete]="autoP"
|
||||
formControlName="product"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#autoP="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="productSelected($event)"
|
||||
>
|
||||
@for (product of products | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/10 mr-5">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/10 mr-5">
|
||||
<mat-label>Price</mat-label>
|
||||
<input type="text" matInput formControlName="price" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/10 mr-5">
|
||||
<mat-label>Tax</mat-label>
|
||||
<input type="text" matInput formControlName="tax" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/10 mr-5">
|
||||
<mat-label>Discount</mat-label>
|
||||
<input type="text" matInput formControlName="discount" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/10">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Rate Column -->
|
||||
<ng-container matColumnDef="rate">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tax Column -->
|
||||
<ng-container matColumnDef="tax">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Discount Column -->
|
||||
<ng-container matColumnDef="discount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<mat-form-field>
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Tag selection">
|
||||
@for (tag of voucher.tags; track tag) {
|
||||
<mat-chip-row (removed)="removeTag(tag)">
|
||||
{{ tag.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + tag.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
</mat-chip-grid>
|
||||
<input
|
||||
placeholder="New Tag..."
|
||||
#tagInput
|
||||
formControlName="tags"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[matAutocomplete]="autoTag"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addTag($event)"
|
||||
/>
|
||||
<mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
|
||||
@for (tag of tags | async; track tag) {
|
||||
<mat-option [value]="tag">{{ tag.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<div class="flex flex-row justify-center items-stretch mr-5">
|
||||
@for (item of voucher.files; track item) {
|
||||
<div class="img-container" class="flex-auto mr-5 basis-1/5">
|
||||
<img [src]="item.thumbnail" (click)="zoomImage(item)" />
|
||||
<button mat-icon-button class="overlay" (click)="deleteImage(item)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
@for (account of accounts | async; track account) {
|
||||
<mat-option [value]="account">{{ account.name }}</mat-option>
|
||||
}
|
||||
<div class="img-container" class="flex flex-auto basis-1/5">
|
||||
<label ng-href for="fileUp">
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUp"
|
||||
multiple
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
(change)="image.detectFiles($event, voucher)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button
|
||||
mat-raised-button
|
||||
(click)="post()"
|
||||
[disabled]="voucher.posted || !auth.allowed('post-vouchers')"
|
||||
class="mr-5"
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-5">
|
||||
<mat-label>Amount</mat-label>
|
||||
<input type="text" matInput formControlName="amount" />
|
||||
<span matTextPrefix>₹ </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div formGroupName="addRow" class="row-container">
|
||||
<mat-form-field class="flex-auto basis-1-2">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#productElement
|
||||
[matAutocomplete]="autoP"
|
||||
formControlName="product"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#autoP="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="productSelected($event)"
|
||||
>
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
@for (product of products | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-10">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-10">
|
||||
<mat-label>Price</mat-label>
|
||||
<input type="text" matInput formControlName="price" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-10">
|
||||
<mat-label>Tax</mat-label>
|
||||
<input type="text" matInput formControlName="tax" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-10">
|
||||
<mat-label>Discount</mat-label>
|
||||
<input type="text" matInput formControlName="discount" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-10">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Product Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Quantity Column -->
|
||||
<ng-container matColumnDef="quantity">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Rate Column -->
|
||||
<ng-container matColumnDef="rate">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tax Column -->
|
||||
<ng-container matColumnDef="tax">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Discount Column -->
|
||||
<ng-container matColumnDef="discount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Amount Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="center">
|
||||
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Narration</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Tags</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Tag selection">
|
||||
@for (tag of voucher.tags; track tag) {
|
||||
<mat-chip-row (removed)="removeTag(tag)">
|
||||
{{ tag.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + tag.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
</mat-chip-grid>
|
||||
<input
|
||||
placeholder="New Tag..."
|
||||
#tagInput
|
||||
formControlName="tags"
|
||||
[matChipInputFor]="chipGrid"
|
||||
[matAutocomplete]="autoTag"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addTag($event)"
|
||||
/>
|
||||
<mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
|
||||
@for (tag of tags | async; track tag) {
|
||||
<mat-option [value]="tag">{{ tag.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
@for (item of voucher.files; track item) {
|
||||
<div class="img-container" class="flex-auto basis-1-5">
|
||||
<img [src]="item.thumbnail" (click)="zoomImage(item)" />
|
||||
<button mat-icon-button class="overlay" (click)="deleteImage(item)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
<span class="fill-remaining-space"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<div class="img-container" class="flex flex-auto basis-1-5">
|
||||
<label ng-href for="fileUp">
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUp"
|
||||
multiple
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
(change)="image.detectFiles($event, voucher)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
|
||||
{{ voucher.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (voucher.id) {
|
||||
<button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')" class="">
|
||||
{{ voucher.posted ? 'Posted' : 'Post' }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
|
||||
}
|
||||
<span class="spacer"></span>
|
||||
@if (voucher.id) {
|
||||
<span class="flex">
|
||||
Created on <strong>{{ voucher.creationDate | localTime }}</strong
|
||||
> and Last Edited on <strong>{{ voucher.lastEditDate | localTime }}</strong
|
||||
> by <strong>{{ voucher.user.name }}</strong
|
||||
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
Loaded 100 of 147 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user