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,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,
|
||||
|
||||
Reference in new issue
Block a user