joe/common-cents-web
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

resetting category component to baseline

Browse source
This commit is contained in:
Joe Arndt 2026-02-25 15:57:12 -06:00
parent 4a84b70ed6
commit 837cde7bd6
3 changed files with 14 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/app/components/metadata/categories/categories.component.html
View file

@ -1,44 +1,17 @@
<div class="categories-container"> <div class="categories-container">
<div class="category-list-header"> <div class="category-list-header">
<p>Categories</p> <p>Categories</p>
<mat-form-field appearance="outline">
<mat-label>New Category</mat-label>
<input type="text" matInput [(ngModel)]="newCategory" [ngModelOptions]="{ standalone: true }">
@if (!!newCategory()) {
<button matSuffix matIconButton (click)="addClick()">
<mat-icon>add</mat-icon>
</button>
}
</mat-form-field>
<app-divider /> <app-divider />
</div> </div>
<div class="category-list"> <div class="category-list">
<!-- <mat-list>--> @for (category of categories(); track category.id) {
<!-- <mat-list-item>--> <div>{{ category.name }}</div>
<!-- <div class="category-item">--> }
<!-- <mat-form-field appearance="outline">--> @if (!categories().length) {
<!-- <mat-label>New Category</mat-label>--> <div class="category-list-empty">
<!-- <input type="text" matInput [(ngModel)]="newCategory">--> No categories to display
<!-- <button matSuffix matIconButton (click)="addClick()">--> </div>
<!-- <mat-icon>shopping_cart</mat-icon>--> }
<!-- </button>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </mat-list-item>-->
@for (category of categories(); track category.id) {
<!-- <mat-list-item>-->
{{ category.name }}
<!-- </mat-list-item>-->
}
@if (!categories().length) {
<!-- <mat-list-item>No categories to display</mat-list-item>-->
<!-- <div class="category-list-empty">-->
<!-- No categories to display-->
<!-- </div>-->
}
<!-- </mat-list>-->
</div> </div>
</div> </div>

20
src/app/components/metadata/categories/categories.component.scss
View file

@ -21,20 +21,8 @@
} }
} }
//.add-category { .category-list {
// display: flex; display: grid;
// align-items: baseline; gap: 1rem;
// gap: 0.5rem; justify-content: center;
//}
//.category-list {
// display: grid;
// gap: 1rem;
// justify-content: center;
//}
.category-item {
padding: 1rem;
}
mat-form-field {
width: 400px;
} }

27
src/app/components/metadata/categories/categories.component.ts
View file

@ -1,24 +1,11 @@
import {Component, computed, effect, model} from '@angular/core'; import { Component, computed } from '@angular/core';
import { CategoryService } from '../../../services/category.service'; import { CategoryService } from '../../../services/category.service';
import { DividerComponent } from '../../divider/divider.component'; import { DividerComponent } from '../../divider/divider.component';
import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
import {FormsModule} from '@angular/forms';
import {MatList, MatListItem} from '@angular/material/list';
import {MatIconButton} from '@angular/material/button';
import {MatIcon} from '@angular/material/icon';
@Component({ @Component({
selector: 'app-categories', selector: 'app-categories',
imports: [ imports: [
DividerComponent, DividerComponent,
MatInput,
MatFormField,
MatLabel,
FormsModule,
// MatList,
// MatListItem,
MatIconButton,
MatIcon
], ],
templateUrl: './categories.component.html', templateUrl: './categories.component.html',
styleUrl: './categories.component.scss' styleUrl: './categories.component.scss'
@ -26,15 +13,5 @@ import {MatIcon} from '@angular/material/icon';
export class CategoriesComponent { export class CategoriesComponent {
protected categories = computed(() => this.categoryService.categories()); protected categories = computed(() => this.categoryService.categories());
public newCategory = model<string>(''); public constructor(private readonly categoryService: CategoryService) { }
public constructor(private readonly categoryService: CategoryService) {
effect(() => {
console.log(this.newCategory());
});
}
public addClick(): void {
console.log('add clicked');
}
} }