update

2023-07-20 21:38:05 +03:00
parent 4bac59f322
commit 2f108bef4f
35 changed files with 1863 additions and 909 deletions
@@ -28,4 +28,6 @@ export class ApiRoutes {

 	static Motions = '/api/accounts/:id/motions';
 	static Motion = '/api/accounts/:id/motions/:motionId';
+
+	static Items = '/api/items';
 }
@@ -5,20 +5,20 @@ import {
 	Validators,
 } from '@angular/forms';

-export const atLeastOneNumber = (validator: ValidatorFn, controls: string[] = []) => (
-	group: FormGroup,
-): ValidationErrors | null => {
-	if (!controls) {
-		controls = Object.keys(group.controls);
-	}
+export const atLeastOneNumber = (validator: ValidatorFn, controls: string[] = []) =>
+	(group: FormGroup,): ValidationErrors | null => {

-	const hasAtLeastOne = group && group.controls && controls
-		.some(k => {
-			var v = group.controls[k].value;
-			return v && !isNaN(v) && v !== 0 && !validator(group.controls[k]);
-		});
+		if (!controls) {
+			controls = Object.keys(group.controls);
+		}

-	return hasAtLeastOne ? null : {
-		atLeastOne: true,
+		const hasAtLeastOne = group && group.controls && controls
+			.some(k => {
+				var v = group.controls[k].value;
+				return !!(v && !isNaN(v) && parseFloat(v) !== 0 && !validator(group.controls[k]));
+			});
+
+		return hasAtLeastOne ? null : {
+			atLeastOne: true,
+		};
 	};
-};
@@ -2,4 +2,5 @@ export interface ItemCategoryModel {
 	id?: string,
 	name?: string,
 	allowDelete: boolean,
+	isInternal: boolean,
 }
@@ -1,7 +1,7 @@
 export interface MotionModel {
 	id?: string;
 	date?: Date;
-	motion?: string;
+	item?: string;
 	description?: string;
 	plus?: number;
 	minus?: number;
@@ -1,4 +1,4 @@
-<form [formGroup]="form" novalidate autocomplete="off">
+<form [formGroup]="form" novalidate autocomplete="off" [@pulse]="inProgress">
 	<div class="" style="display: flex;">
 		<div class="" style="width: 310px; min-width: 310px;">
 			<div style="display: flex; align-items: center;">
@@ -7,7 +7,7 @@
 				</a>

 				<mat-form-field class="example-full-width" appearance="fill">
-					<input matInput [matDatepicker]="picker3" (focus)="picker3.open()" value={{motion.date}} formControlName="date" required>
+					<input #dateInput matInput [matDatepicker]="picker3" (focus)="picker3.open()" value={{motion.date}} formControlName="date" required>
 					<mat-hint>YYYY/MM/DD</mat-hint>
 					<mat-datepicker-toggle tabindex="-1" matSuffix [for]="picker3"></mat-datepicker-toggle>
 					<mat-datepicker #picker3></mat-datepicker>
@@ -23,11 +23,19 @@
 		</div>
 		<div class="" style="flex-grow: 1;">
 			<mat-form-field class="example-full-width" appearance="fill">
-				<mat-label>Motion</mat-label>
-				<input #motionInput matInput formControlName="motion" required>
-				<mat-error *ngIf="form.controls['motion'].hasError('required')">
+				<mat-label>
+					Motion
+					<span *ngIf="selectedItem">!!</span>
+				</mat-label>
+				<input #motionInput matInput formControlName="item" required [matAutocomplete]="auto">
+				<mat-error *ngIf="form.controls['item'].hasError('required') && !form.pristine">
 					Please enter motion
 				</mat-error>
+				<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="selectedFn($event.option.value)">
+					<mat-option *ngFor="let item of filteredItems" [value]="item">
+						{{item.name}}
+					</mat-option>
+				</mat-autocomplete>
 			</mat-form-field>
 			<mat-form-field class="example-full-width" appearance="fill">
 				<input matInput formControlName="description">
@@ -36,17 +44,18 @@
 		<div class="" style="width: 100px; min-width: 100px;">
 			<mat-form-field class="example-full-width" appearance="fill">
 				<input matInput [value]="motion.plus | number:'0.2-2'" formControlName="plus" currencyMask [options]="{ prefix: '', precision: 4, inputMode: 1 }">
+				<mat-error *ngIf="form.hasError('atLeastOne')">
+					Please enter motion
+				</mat-error>
 			</mat-form-field>
 			<mat-form-field class="example-full-width" appearance="fill">
 				<input matInput [value]="motion.minus | number:'0.2-2'" formControlName="minus" currencyMask [options]="{ prefix: '', precision: 4, inputMode: 1 }">
+				<mat-error *ngIf="form.hasError('atLeastOne')">
+					Please enter motion
+				</mat-error>
 			</mat-form-field>
 		</div>
 		<div class="" style="display: inline-block; width: 150px; min-width: 150px;">
-			<!--
-			<button type="button" mat-stroked-button color="primary" *ngIf="!motion.id" (click)="add()">
-				<i class="material-icons font-40">add</i>
-			</button>
-			-->
 			<button type="button" class="m-2" mat-mini-fab color="primary" *ngIf="!motion.id" (click)="add()">
 				<i class="material-icons ">add</i>
 			</button>
@@ -59,6 +68,16 @@
 			<button type="button" class="m-2" mat-mini-fab color="primary" *ngIf="motion.id" (click)="delete()">
 				<i class="material-icons ">delete</i>
 			</button>
+			<div class="preloader m-4" *ngIf="inProgress">
+				<div class="spinner-layer pl-green">
+					<div class="circle-clipper left">
+						<div class="circle"></div>
+					</div>
+					<div class="circle-clipper right">
+						<div class="circle"></div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 	<hr />
@@ -13,21 +13,31 @@ import { ElementRef } from '@angular/core';
 // libs
 import * as moment from 'moment';
 import Swal from 'sweetalert2';
+import { Observable } from 'rxjs';
+import { pulseAnimation } from 'angular-animations';

 // app
 import { ApiRoutes } from '../../api-routes';
 import { AccountModel } from '../../model/account.model';
 import { MotionModel } from '../../model/motion.model';
+import { ItemModel } from '../../model/item.model';
 import { atLeastOneNumber } from '../../core/validators/atleastonenumber.validator';

@Component({
 	selector: 'account-motion',
 	templateUrl: './motion.component.html',
 	styleUrls: ['./motion.component.scss'],
+	animations: [
+		pulseAnimation({ direction: '<=>', duration: 200 }),
+	],
 })
 export class MotionComponent {
 	public form!: FormGroup;
 	public errorMessage?: string;
+	public filteredItems: ItemModel[] = [];
+	public option?: string;
+	public selectedItem?: ItemModel;
+	public inProgress: boolean = false;

 	@Input('motion') motion!: MotionModel;
 	@Input('account') account!: AccountModel;
@@ -36,6 +46,7 @@ export class MotionComponent {
 	@Output() onDelete: EventEmitter<MotionModel> = new EventEmitter<MotionModel>();

 	@ViewChild('motionInput') motionInput?: ElementRef;
+	@ViewChild('dateInput') dateInput?: ElementRef;

 	constructor(
 		private fb: FormBuilder,
@@ -52,8 +63,8 @@ export class MotionComponent {
 				this.motion.date,
 				[Validators.required],
 			],
-			motion: [
-				this.motion.motion,
+			item: [
+				this.motion.item,
 				[Validators.required],
 			],
 			description: [
@@ -68,46 +79,112 @@ export class MotionComponent {
 		}, {
 			validator: atLeastOneNumber(Validators.required, ['plus', 'minus'])
 		});
+
+		this.form.controls['item'].valueChanges.subscribe(value => {
+			if (!value) {
+				return;
+			}
+
+			this.selectedItem = undefined;
+
+			this.httpClient
+				.get<ItemModel[]>(ApiRoutes.Items + '?term=' + encodeURIComponent(value))
+				.subscribe(x => {
+					this.filteredItems = x;
+				});
+		});
+	}
+
+	displayFn(item: any): string {
+		var value = item && item.name ? item.name : item;
+		return value;
+	}
+
+	selectedFn(item: ItemModel) {
+		this.selectedItem = item;
 	}

 	add() {
 		this.form.markAllAsTouched();

+		if (!this.form.valid) {
+			if (this.form.hasError('atLeastOne')) {
+				this.form.get('plus')!.setErrors(this.form.errors);
+				this.form.get('minus')!.setErrors(this.form.errors);
+			}
+			return;
+		}
+
+		this.setInProgress();
+
+		var data = this.form.value;
+		data.motion = data.item.name
+			? data.item.name
+			: data.item;
+		data.itemId = this.selectedItem?.id;
+
 		this.httpClient
-			.post<MotionModel>(ApiRoutes.Motions.replace(':id', this.account.id!), this.form.value)
+			.post<MotionModel>(ApiRoutes.Motions.replace(':id', this.account.id!), data)
 			.subscribe(response => {
 				this.onAdd?.emit(response);

 				this.form.patchValue({
-					motion: '',
+					item: '',
 					plus: 0,
 					minus: 0,
 				});
-				this.form.markAsUntouched();

+				this.filteredItems = [];
 				this.motionInput?.nativeElement.focus();
+				this.form.markAsUntouched();
+				this.setInProgress(false);
 			}, error => {
 				this.errorMessage = error.detail;
+				this.setInProgress(false);
 			});
 	}

+	private setInProgress(inProgress: boolean = true) {
+		this.inProgress = inProgress;
+	}
+
 	update() {
+		this.form.markAllAsTouched();
+
+		if (!this.form.valid) {
+			if (this.form.hasError('atLeastOne')) {
+				this.form.get('plus')!.setErrors(this.form.errors);
+				this.form.get('minus')!.setErrors(this.form.errors);
+			}
+			return;
+		}
+
+		this.setInProgress();
+
 		var url = ApiRoutes.Motion
 			.replace(':id', this.account.id!)
 			.replace(':motionId', this.motion.id!);
-		
+
+		var data = this.form.value;
+		data.motion = data.item.name
+			? data.item.name
+			: data.motion;
+		data.itemId = this.selectedItem?.id;
+
 		this.httpClient
-			.put<MotionModel>(url, this.form.value)
+			.put<MotionModel>(url, data)
 			.subscribe(response => {
 				this.form.markAsUntouched();
+				this.setInProgress(false);
 			}, error => {
 				this.errorMessage = error.detail;
+				this.setInProgress(false);
 			});
 	}

 	delete() {
 		Swal.fire({
-			title: 'Delete motion ' + this.motion.motion,
+			title: 'Delete motion ' + this.motion.item,
 			showCancelButton: true,
 			confirmButtonText: 'Delete',
 			showLoaderOnConfirm: true,
@@ -117,12 +194,16 @@ export class MotionComponent {
 						.replace(':id', this.account.id!)
 						.replace(':motionId', this.motion.id!);

+					this.setInProgress();
+
 					this.httpClient.delete<MotionModel>(url)
 						.subscribe(data => {
 							resolve(data);
+							this.setInProgress(false);
 						}, error => {
 							Swal.showValidationMessage(error.detail);
 							reject();
+							this.setInProgress(false);
 						});

 				}).catch(x => {
@@ -19,6 +19,8 @@ import { MatCardModule } from '@angular/material/card';
 import { NgxMaskModule } from 'ngx-mask';
 import { NgxCurrencyModule } from "ngx-currency";
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatCheckboxModule } from '@angular/material/checkbox';

 // app
 import { PagesRoutingModule } from './pages-routing.module';
@@ -39,6 +41,7 @@ import { SettingsItemEditComponent } from './settings/item/edit.item.component';
 import { AccountListComponent } from './accounts/account.list.component';
 import { AccountComponent } from './accounts/account.component';
 import { MotionComponent } from './accounts/motion.component';
+import { SettingsItemCategoryEditComponent } from './settings/item/edit.item.category.component';

@NgModule({
 	declarations: [
@@ -56,6 +59,7 @@ import { MotionComponent } from './accounts/motion.component';
 		SettingsItemCategoryComponent,
 		SettingsItemComponent,
 		SettingsItemEditComponent,
+		SettingsItemCategoryEditComponent,

 		AccountListComponent,
 		AccountComponent,
@@ -78,8 +82,10 @@ import { MotionComponent } from './accounts/motion.component';
 		MatGridListModule,
 		MatCardModule,
 		MatExpansionModule,
+		MatAutocompleteModule,
 		NgxMaskModule,
-		NgxCurrencyModule
+		NgxCurrencyModule,
+		MatCheckboxModule,
 	],
 	providers: [
 		{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
@@ -0,0 +1,38 @@
+<div>
+	<h2 mat-dialog-title>
+		Edit item category
+	</h2>
+	<div mat-dialog-content>
+		<form [formGroup]="editForm!" (ngSubmit)="onSubmitClick()">
+			<div class="row">
+				<div class="col-md-6">
+					<div class="text-inside">
+						<mat-form-field class="example-full-width">
+							<mat-label>Name</mat-label>
+							<input matInput value={{category.name}} formControlName="name">
+						</mat-form-field>
+					</div>
+				</div>
+				<div class="col-md-6">
+					<div class="text-inside">
+						<mat-checkbox class="example-margin" formControlName="isInternal">Is internal motion</mat-checkbox>
+					</div>
+				</div>
+			</div>
+			<mat-dialog-actions class="mat-dialog-actions">
+				<div class="mat-dialog-left">
+					<div class="alert alert-danger mat-dialog-error" *ngIf="errorMessage">
+						{{errorMessage}}
+					</div>
+				</div>
+				<div class="mat-dialog-right">
+					<div class="button-bottom">
+						<button type="button" mat-button (click)="closeDialog()">Cancel</button>
+						<button class="btn-space" mat-raised-button color="primary">Save</button>
+					</div>
+				</div>
+			</mat-dialog-actions>
+
+		</form>
+	</div>
+</div>
@@ -0,0 +1,75 @@
+// angular
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Inject } from '@angular/core';
+import { UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
+import { Validators } from '@angular/forms';
+
+// libs
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef } from '@angular/material/dialog';
+
+// app
+import { ApiRoutes } from '../../../api-routes';
+import { ItemCategoryModel } from '../../../model/item.category.model';
+
+@Component({
+	templateUrl: './edit.item.category.component.html',
+	styleUrls: ['./edit.item.category.component.scss'],
+})
+export class SettingsItemCategoryEditComponent {
+	public editForm!: UntypedFormGroup;
+	public errorMessage?: string;
+
+	constructor(
+		private fb: UntypedFormBuilder,
+		private httpClient: HttpClient,
+		private dialogRef: MatDialogRef<SettingsItemCategoryEditComponent>,
+		@Inject(MAT_DIALOG_DATA) public category: ItemCategoryModel
+	) {
+	}
+
+	ngOnInit(): void {
+		this.editForm = this.fb.group({
+			id: [
+				this.category.id,
+			],
+			name: [
+				this.category.name,
+				[Validators.required],
+			],
+			isInternal: [
+				this.category.isInternal,
+			],
+		});
+		console.log(this.editForm.value);
+	}
+
+	closeDialog(): void {
+		this.dialogRef.close();
+	}
+
+	onSubmitClick() {
+		if (this.editForm.valid) {
+			this.errorMessage = undefined;
+			if (!this.category.id) {
+				this.httpClient
+					.post<ItemCategoryModel>(ApiRoutes.SettingsItemCategories, this.editForm.value)
+					.subscribe(response => {
+						this.dialogRef.close({ category: response, refresh: true });
+					}, error => {
+						this.errorMessage = error.detail;
+					});
+			} else {
+				this.httpClient
+					.put<ItemCategoryModel>(ApiRoutes.SettingsItemCategory.replace(':id', this.category.id!), this.editForm.value)
+					.subscribe(response => {
+						this.dialogRef.close({ category: response, refresh: true });
+					}, error => {
+						this.errorMessage = error.detail;
+					});
+			}
+		}
+	}
+}
@@ -8,10 +8,10 @@ import { Validators } from '@angular/forms';

 // libs
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef } from '@angular/material/dialog';

 // app
 import { ApiRoutes } from '../../../api-routes';
-import { MatDialogRef } from '@angular/material/dialog';
 import { ItemCategoryModel } from '../../../model/item.category.model';
 import { ItemModel } from '../../../model/item.model';
 import { ItemService } from '../../../services/item.service';
@@ -2,7 +2,7 @@
 	<div class="content-block">
 		<div class="block-header">
 			<!-- breadcrumb -->
-			<app-breadcrumb [title]="'Blank'" [items]="['Home','Settings']" [active_item]="'Motion categories'">
+			<app-breadcrumb [title]="'Item categories'" [items]="['Home','Settings']" [active_item]="'Motion categories'">
 			</app-breadcrumb>
 		</div>
 		<div class="row clearfix">
@@ -11,7 +11,6 @@
 					<mat-card-header>
 						<mat-card-title-group>
 							<mat-card-title>
-								Motion categories
 							</mat-card-title>
 							<mat-card-subtitle>
 							</mat-card-subtitle>
@@ -27,6 +26,9 @@
 								<tbody>
 								<tr *ngFor="let item of categories">
 									<td>{{item.name}}</td>
+									<td>
+										<mat-icon *ngIf="item.isInternal">done</mat-icon>
+									</td>
 									<td>
 										<button class="btn-space" (click)="edit(item)" mat-raised-button color="primary">
 											Edit
@@ -4,10 +4,12 @@ import { HttpClient } from '@angular/common/http';

 // libs
 import Swal from 'sweetalert2';
+import { MatDialog } from '@angular/material/dialog';

 // app
 import { ApiRoutes } from '../../../api-routes';
 import { ItemCategoryModel } from '../../../model/item.category.model';
+import { SettingsItemCategoryEditComponent } from './edit.item.category.component';

@Component({
 	templateUrl: './item.category.component.html',
@@ -18,6 +20,7 @@ export class SettingsItemCategoryComponent {

 	constructor(
 		private httpClient: HttpClient,
+		private dialogModel: MatDialog,
 	) {
 	}

@@ -34,63 +37,26 @@ export class SettingsItemCategoryComponent {
 	}

 	public add() {
-		Swal.fire({
-			title: 'Item category name',
-			input: 'text',
-			inputAttributes: {
-				autocapitalize: 'off',
-			},
-			showCancelButton: true,
-			confirmButtonText: 'Add',
-			showLoaderOnConfirm: true,
-			preConfirm: (name) => {
-				return new Promise((resolve, reject) => {
-					this.httpClient.post(ApiRoutes.SettingsItemCategories, { name: name })
-						.subscribe(data => {
-							resolve(data);
-						}, error => {
-							Swal.showValidationMessage(error.detail);
-							reject();
-						});
-
-				}).catch(x => {
-					return false;
-				});
-			},
-			allowOutsideClick: () => !Swal.isLoading(),
-		}).then((result) => {
-			this.load();
+		this.dialogModel.open(SettingsItemCategoryEditComponent, {
+			width: '640px',
+			disableClose: true,
+			data: { },
+		}).afterClosed().subscribe(x => {
+			if (x && x.refresh) {
+				this.load();
+			}
 		});
 	}

 	public edit(category: ItemCategoryModel) {
-		Swal.fire({
-			title: 'Item category name',
-			input: 'text',
-			inputValue: category.name,
-			inputAttributes: {
-				autocapitalize: 'off',
-			},
-			showCancelButton: true,
-			confirmButtonText: 'Update',
-			showLoaderOnConfirm: true,
-			preConfirm: (name) => {
-				return new Promise((resolve, reject) => {
-					this.httpClient.put(ApiRoutes.SettingsItemCategory.replace(':id', category.id!), { name: name })
-						.subscribe(data => {
-							resolve(data);
-						}, error => {
-							Swal.showValidationMessage(error.detail);
-							reject();
-						});
-
-				}).catch(x => {
-					return false;
-				});
-			},
-			allowOutsideClick: () => !Swal.isLoading(),
-		}).then((result) => {
-			this.load();
+		this.dialogModel.open(SettingsItemCategoryEditComponent, {
+			width: '640px',
+			disableClose: true,
+			data: category,
+		}).afterClosed().subscribe(x => {
+			if (x && x.refresh) {
+				this.load();
+			}
 		});
 	}