Chore: Removed Mat Card from everywhere.
Chore: Removed the Toaster Service. Chore: Updated to Material Theme 3
This commit is contained in:
@ -1,79 +1,74 @@
|
||||
<mat-card class="flex-auto 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="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Product ID</mat-label>
|
||||
<input matInput formControlName="id" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-3-4">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #name formControlName="name" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-4">
|
||||
<mat-label>Units</mat-label>
|
||||
<input matInput formControlName="units" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Price</mat-label>
|
||||
<input matInput type="number" formControlName="price" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input matInput type="number" formControlName="quantity" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Menu Category</mat-label>
|
||||
<mat-select formControlName="menuCategory">
|
||||
@for (mc of menuCategories; track mc) {
|
||||
<mat-option [value]="mc.id">
|
||||
{{ mc.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Sale Category</mat-label>
|
||||
<mat-select formControlName="saleCategory">
|
||||
@for (sc of saleCategories; track sc) {
|
||||
<mat-option [value]="sc.id">
|
||||
{{ sc.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-1-2">
|
||||
<mat-label>Valid From</mat-label>
|
||||
<input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validFrom></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-2">
|
||||
<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 class="row-container">
|
||||
<button mat-raised-button color="primary" class="" (click)="update()">Update</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<h2>Product</h2>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Product ID</mat-label>
|
||||
<input matInput formControlName="id" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-3-4">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #name formControlName="name" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-4">
|
||||
<mat-label>Units</mat-label>
|
||||
<input matInput formControlName="units" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Price</mat-label>
|
||||
<input matInput type="number" formControlName="price" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input matInput type="number" formControlName="quantity" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Menu Category</mat-label>
|
||||
<mat-select formControlName="menuCategory">
|
||||
@for (mc of menuCategories; track mc) {
|
||||
<mat-option [value]="mc.id">
|
||||
{{ mc.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Sale Category</mat-label>
|
||||
<mat-select formControlName="saleCategory">
|
||||
@for (sc of saleCategories; track sc) {
|
||||
<mat-option [value]="sc.id">
|
||||
{{ sc.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-1-2">
|
||||
<mat-label>Valid From</mat-label>
|
||||
<input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
|
||||
<mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
|
||||
<mat-datepicker #validFrom></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-2">
|
||||
<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" class="" (click)="update()">Update</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } 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';
|
||||
@ -9,13 +8,13 @@ import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import moment from 'moment';
|
||||
|
||||
import { MenuCategory } from '../../core/menu-category';
|
||||
import { Product } from '../../core/product';
|
||||
import { SaleCategory } from '../../core/sale-category';
|
||||
import { ToasterService } from '../../core/toaster.service';
|
||||
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
|
||||
import { TemporalProductService } from '../temporal-product.service';
|
||||
|
||||
@ -25,12 +24,13 @@ import { TemporalProductService } from '../temporal-product.service';
|
||||
styleUrls: ['./temporal-product-detail.component.css'],
|
||||
imports: [
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
|
||||
MatCheckboxModule,
|
||||
MatDatepickerModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatOptionModule,
|
||||
|
||||
MatSelectModule,
|
||||
ReactiveFormsModule,
|
||||
],
|
||||
@ -39,7 +39,7 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private dialog = inject(MatDialog);
|
||||
private toaster = inject(ToasterService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
private ser = inject(TemporalProductService);
|
||||
|
||||
@ViewChild('name', { static: true }) nameElement?: ElementRef;
|
||||
@ -119,11 +119,11 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
|
||||
update() {
|
||||
this.ser.update(this.getItem()).subscribe({
|
||||
next: () => {
|
||||
this.toaster.show('Success', '');
|
||||
this.snackBar.open('', 'Success');
|
||||
this.router.navigateByUrl('/temporal-products');
|
||||
},
|
||||
error: (error) => {
|
||||
this.toaster.show('Error', error);
|
||||
this.snackBar.open(error, 'Error');
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -131,11 +131,11 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
|
||||
delete() {
|
||||
this.ser.delete(this.item.versionId as string).subscribe({
|
||||
next: () => {
|
||||
this.toaster.show('Success', '');
|
||||
this.snackBar.open('', 'Success');
|
||||
this.router.navigateByUrl('/temporal-products');
|
||||
},
|
||||
error: (error) => {
|
||||
this.toaster.show('Error', error);
|
||||
this.snackBar.open(error, 'Error');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,105 +1,101 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Temporal Products</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="row-container sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input type="text" matInput formControlName="filter" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-30">
|
||||
<mat-label>Menu Category</mat-label>
|
||||
<mat-select formControlName="menuCategory" (selectionChange)="filterMcOn($event.value)">
|
||||
<mat-option>-- All Products --</mat-option>
|
||||
@for (mc of menuCategories; track mc) {
|
||||
<mat-option [value]="mc.id">
|
||||
{{ mc.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-30">
|
||||
<mat-label>Sale Category</mat-label>
|
||||
<mat-select formControlName="saleCategory" (selectionChange)="filterScOn($event.value)">
|
||||
<mat-option>-- All Products --</mat-option>
|
||||
@for (mc of saleCategories; track mc) {
|
||||
<mat-option [value]="mc.id">
|
||||
{{ mc.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table [dataSource]="dataSource">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
<li>
|
||||
<a [routerLink]="['/temporal-products', row.versionId]">{{ row.name }} ({{ row.units }})</a>
|
||||
</li>
|
||||
<li>
|
||||
{{ row.id }}
|
||||
</li>
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Temporal Products</span>
|
||||
</h2>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="row-container sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input type="text" matInput formControlName="filter" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-30">
|
||||
<mat-label>Menu Category</mat-label>
|
||||
<mat-select formControlName="menuCategory" (selectionChange)="filterMcOn($event.value)">
|
||||
<mat-option>-- All Products --</mat-option>
|
||||
@for (mc of menuCategories; track mc) {
|
||||
<mat-option [value]="mc.id">
|
||||
{{ mc.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-30">
|
||||
<mat-label>Sale Category</mat-label>
|
||||
<mat-select formControlName="saleCategory" (selectionChange)="filterScOn($event.value)">
|
||||
<mat-option>-- All Products --</mat-option>
|
||||
@for (mc of saleCategories; track mc) {
|
||||
<mat-option [value]="mc.id">
|
||||
{{ mc.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table [dataSource]="dataSource">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
<li>
|
||||
<a [routerLink]="['/temporal-products', row.versionId]">{{ row.name }} ({{ row.units }})</a>
|
||||
</li>
|
||||
<li>
|
||||
{{ row.id }}
|
||||
</li>
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Price Column -->
|
||||
<ng-container matColumnDef="price">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Price Column -->
|
||||
<ng-container matColumnDef="price">
|
||||
<mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Menu Category Column -->
|
||||
<ng-container matColumnDef="menuCategory">
|
||||
<mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Menu Category Column -->
|
||||
<ng-container matColumnDef="menuCategory">
|
||||
<mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Sale Category Column -->
|
||||
<ng-container matColumnDef="saleCategory">
|
||||
<mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.saleCategory.name }}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Sale Category Column -->
|
||||
<ng-container matColumnDef="saleCategory">
|
||||
<mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.saleCategory.name }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Info Column -->
|
||||
<ng-container matColumnDef="info">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Details</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
<li>
|
||||
<b>Valid From: {{ row.validFrom ?? '∞' }} </b> <mat-icon>linear_scale</mat-icon>
|
||||
<b>Till: {{ row.validTill ?? '∞' }} </b>
|
||||
</li>
|
||||
<li>
|
||||
<mat-icon>
|
||||
{{ row.hasHappyHour ? 'sentiment_satisfied_alt' : 'sentiment_dissatisfied' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.hasHappyHour ? 'Has Happy Hours' : 'No Happy Hours' }}</b>
|
||||
</li>
|
||||
<li>
|
||||
<mat-icon>
|
||||
{{ row.isNotAvailable ? 'pause' : 'play_arrow' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.isNotAvailable ? 'Is not Available' : 'Is Available' }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Info Column -->
|
||||
<ng-container matColumnDef="info">
|
||||
<mat-header-cell *matHeaderCellDef class="center">Details</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<ul>
|
||||
<li>
|
||||
<b>Valid From: {{ row.validFrom ?? '∞' }} </b> <mat-icon>linear_scale</mat-icon>
|
||||
<b>Till: {{ row.validTill ?? '∞' }} </b>
|
||||
</li>
|
||||
<li>
|
||||
<mat-icon>
|
||||
{{ row.hasHappyHour ? 'sentiment_satisfied_alt' : 'sentiment_dissatisfied' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.hasHappyHour ? 'Has Happy Hours' : 'No Happy Hours' }}</b>
|
||||
</li>
|
||||
<li>
|
||||
<mat-icon>
|
||||
{{ row.isNotAvailable ? 'pause' : 'play_arrow' }}
|
||||
</mat-icon>
|
||||
<b> {{ row.isNotAvailable ? 'Is not Available' : 'Is Available' }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
<!-- 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>
|
||||
|
||||
<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,7 +1,6 @@
|
||||
import { DecimalPipe, CurrencyPipe } from '@angular/common';
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
@ -24,7 +23,7 @@ import { TemporalProductListDatasource } from './temporal-product-list-datasourc
|
||||
imports: [
|
||||
CurrencyPipe,
|
||||
DecimalPipe,
|
||||
MatCardModule,
|
||||
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
|
||||
Reference in New Issue
Block a user