-
-
-
-
-
-
-
+
+ Filter
+
+
+
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.scss b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.scss
index 92e3ef9..e69de29 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.scss
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.scss
@@ -1,14 +0,0 @@
-.filter-container {
- display: flex;
- justify-content: flex-start;
-}
-
-// Buttons
-.action-container {
- display: flex;
- flex-direction: row;
- align-items: flex-start;
-}
-.action-container button {
- margin: 10px;
-}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts
index 28b3e7c..424f206 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts
@@ -1,19 +1,13 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
-import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Subscription } from 'rxjs';
import { Category } from 'src/app/models/Category';
import { ItemFilter } from 'src/app/models/ItemFilter';
import { CategoryService } from 'src/app/shared/services/category.service';
+import { isNumberValidator } from 'src/app/utils/form-validator/number';
-export function isNumberValidator(): ValidatorFn {
- console.log("Calling isNumberValidator")
- return (control: AbstractControl): ValidationErrors | null => {
- const isNumber = !isNaN(control.value as number);
- console.log("Is number is " + isNumber + " from " + control.value)
- return isNumber ? null : { isNotANumber: { value: control.value } };
- };
-}
@Component({
selector: 'app-inventory-filter',
@@ -21,20 +15,27 @@ export function isNumberValidator(): ValidatorFn {
styleUrls: ['./inventory-filter.component.scss']
})
export class InventoryFilterComponent implements OnInit, OnDestroy {
- @Output() filterItems = new EventEmitter
();
form: FormGroup;
+ // Fields
nameFilterName: string = 'name';
descriptionFilterName: string = 'description';
numberFilterName: string = 'number';
categoryIdFilterName: string = 'categoryId';
+ // Dropbox options
categorySubscription?: Subscription;
categories: Category[] = [];
+
+ // Status to clear filters
filterIsActive = false;
- constructor(private fb: FormBuilder, private categoryService: CategoryService) {
+ constructor(
+ private fb: FormBuilder,
+ private categoryService: CategoryService,
+ public dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public previousFilter?: ItemFilter) {
this.form = this.fb.group({
name: new FormControl("", [Validators.maxLength(50)]),
number: new FormControl("", [isNumberValidator()]),
@@ -48,7 +49,31 @@ export class InventoryFilterComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
- this.categorySubscription = this.categoryService.getCategories().subscribe(categories => this.categories = categories);
+ this.categorySubscription = this.categoryService.getCategories().subscribe(categories => {
+ this.categories = categories;
+ this.prefillPreviousFilter();
+ });
+ }
+
+ private prefillPreviousFilter(): void {
+ if (this.previousFilter) {
+
+ // If there no keys different to null then skip this
+ const hasNonNullValue = Object.values(this.previousFilter).some(value => value !== null);
+ if (!hasNonNullValue) {
+ return;
+ }
+
+ this.form.patchValue(
+ {
+ "name": this.previousFilter.name,
+ "number": this.previousFilter.number,
+ "description": this.previousFilter.description,
+ "categoryId": this.previousFilter.categoryId,
+ }
+ );
+ this.filterIsActive = true;
+ }
}
getFilterControl(filterName: string): FormControl {
@@ -61,16 +86,12 @@ export class InventoryFilterComponent implements OnInit, OnDestroy {
}
const filter: ItemFilter = { ...this.form.value };
- console.log("Filter is: ");
- console.log(filter);
- this.filterItems.emit(filter);
- this.filterIsActive = true;
+ this.dialogRef.close(filter);
}
onClearFilters() {
this.form?.reset();
- this.filterItems.emit(undefined);
- this.filterIsActive = false;
+ this.dialogRef.close(null);
}
}
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/select-filter/select-filter.component.html b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/select-filter/select-filter.component.html
index 8745b78..2eaebf0 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/select-filter/select-filter.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/select-filter/select-filter.component.html
@@ -1,4 +1,4 @@
-
+
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.html b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.html
index a12f4c8..fe77c4e 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.html
@@ -1,4 +1,4 @@
-
+
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.scss b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.scss
index 94a4d80..e69de29 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.scss
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.scss
@@ -1,3 +0,0 @@
-.text-filter-wrapper {
- margin-right: 10px;
-}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-menu/inventory-menu.component.html b/ng-diogenes/src/app/pages/inventory/components/inventory-menu/inventory-menu.component.html
index 757d247..236308c 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-menu/inventory-menu.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-menu/inventory-menu.component.html
@@ -1,6 +1,7 @@
+
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.html b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.html
index 19dbe8a..df08e5d 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.html
@@ -1,10 +1,18 @@
-
- Order by
-
-
- {{ displayOption(option) | lowercase | capitalizeFirstLetter }}
-
-
-
+
+ Sort
+
+
+
+
+
+ Order by
+
+
+ {{ displayOption(option) | lowercase | capitalizeFirstLetter }}
+
+
+
+
+
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.scss b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.scss
index 26c1e56..e69de29 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.scss
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.scss
@@ -1,72 +0,0 @@
-.arrow-up,
-.arrow-down {
- display: inline-block;
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- margin-left: 5px;
- margin-right: 5px;
- margin-bottom: 3px;
- margin-top: 7px;
-}
-
-.arrow-up {
- border-bottom: 5px solid #fff;
-}
-
-.arrow-down {
- border-top: 5px solid #fff;
-}
-
-.custom-dropdown {
- position: relative;
- display: inline-block;
- min-width: 160px;
- margin-left: 10px;
-}
-
-.selected-option {
- border: 1px solid #ced4da;
- background-color: #fff;
- padding: 5px;
- cursor: pointer;
- border-radius: 4px;
-}
-
-.selected-option:hover {
- background-color: #f8f9fa;
-}
-
-.dropdown-options {
- position: absolute;
- top: 100%;
- left: 0;
- border: 1px solid #ced4da;
- background-color: #fff;
- border-radius: 4px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.125);
-}
-
-.dropdown-options div {
- padding: 8px 12px;
- cursor: pointer;
-}
-
-.dropdown-options div:hover {
- background-color: #f8f9fa;
-}
-
-.dropdown-option-container{
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-.dropdown-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100vh;
- }
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.ts b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.ts
index 61ca60c..803e9e8 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.ts
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.ts
@@ -1,4 +1,5 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ItemSorter } from 'src/app/models/ItemSorter';
import { SortingField } from 'src/app/models/SortingField';
@@ -8,19 +9,22 @@ import { SortingField } from 'src/app/models/SortingField';
styleUrls: ['./inventory-sorter.component.scss']
})
export class InventorySorterComponent implements OnInit {
- @Output() sortItems = new EventEmitter();
options: string[] = []
- selectedOption: string = "Order by...";
- isOpen: boolean = false;
- optionHasBeenSelected: boolean = false;
+ selectedOption: string = "Sort by...";
+ constructor(public dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public previousSorter: ItemSorter
+ ) { }
ngOnInit(): void {
this.options = this.generateSortingOptions();
+ this.preselectPreviousSorter();
}
- toggleDropdown() {
- this.isOpen = !this.isOpen;
+ private preselectPreviousSorter() {
+ if (this.previousSorter) {
+ this.selectedOption = `${this.previousSorter.field}__${this.previousSorter.direction}`;
+ }
}
generateSortingOptions(): string[] {
@@ -38,11 +42,10 @@ export class InventorySorterComponent implements OnInit {
}
onSelectOption(option: string): void {
- this.optionHasBeenSelected = true;
this.selectedOption = option;
- this.isOpen = false;
const [filterName, filterDirection] = option.split('__');
- this.sortItems.emit({ field: filterName, direction: filterDirection });
+ let itemSorter: ItemSorter = { field: filterName, direction: filterDirection };
+ this.dialogRef.close(itemSorter);
}
private getOptionDetails(option: string): { filterName: string, isAscending: boolean } {
@@ -51,18 +54,10 @@ export class InventorySorterComponent implements OnInit {
return { filterName, isAscending };
}
- isSortAscending(option: string): boolean {
- const { isAscending } = this.getOptionDetails(option)
- if (isAscending) {
- return true;
- }
- return false;
- }
-
displayOption(option: string): string {
const { filterName, isAscending } = this.getOptionDetails(option)
- if (isAscending){
+ if (isAscending) {
return filterName + " ↑";
}
diff --git a/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html b/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html
index 2419cb9..ce2197f 100644
--- a/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html
@@ -1,32 +1,38 @@
+
-
+
+
-
-
+
+
+
+
+
+ {{ item.name }}
+
-
+
+
-
+
+ {{item.category.name}}
+
-
- {{item.category.name}}
-
+
+ x{{ item.number }}
+
-
- x{{ item.number }}
-
+
+ image
+
-
- image
-
+
+
+
+
-
+
-
-
-
-
-
+
+
-
- 
- Diogenes
-
-
+
+
+
+
+
+
+ Diogenes
-
-
-
-
+
+
+
+
+
+
+
+ (click)="onCreateNewItem()">add
+
@@ -27,9 +38,12 @@
+ [infiniteScrollDisabled]="lastPage" id="item-list"
+ *ngIf="items; else noItems">
@@ -37,4 +51,11 @@
-
+
+
@@ -30,17 +30,22 @@
-
+
-