tanshu/brewman
1
0 Fork 0
Code Issues Pull Requests Releases Activity

Removed all Material Cards

Browse Source 
Removed Tailwind
Moved to scss
Moved to material theme 3
This commit is contained in:
tanshu committed 2025-07-16 05:16:51 +00:00
1 parent c542114e42
commit 846a7209ee
147 files changed
+6057 -6377
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

overlord/src/app/payment/payment-dialog.component.html
+4 -4
View File
@@ -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>₹&nbsp;</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>
overlord/src/app/payment/payment-dialog.component.ts
+3 -1
View File
@@ -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();
});
}
overlord/src/app/payment/payment.component.css
-5
View File
@@ -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;
}
overlord/src/app/payment/payment.component.html
+174 -184
View File
@@ -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>₹&nbsp;</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>₹&nbsp;</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>₹&nbsp;</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>₹&nbsp;</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&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
>&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
>&nbsp;by&nbsp; <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&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
>&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
>&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
>. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
</span>
}
</div>
overlord/src/app/payment/payment.component.ts
+12 -3
View File
@@ -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();
});
}