@kris701/ez-ui 0.0.1

package/src/components/passwordinput.ts

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TuiIcon, TuiInput } from '@taiga-ui/core';
+import { TuiPassword } from '@taiga-ui/kit';
+
+@Component({
+    selector: 'ezui-passwordinput',
+    imports: [
+		FormsModule,
+		CommonModule,
+		TuiInput,
+		TuiIcon,
+		TuiPassword
+	],
+    template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput type="password" [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
+			<tui-icon tuiPassword />
+		</tui-textfield>
+    `,
+    styles: `
+    `
+})
+export class EzUIPasswordInput implements OnChanges {
+    @Input() icon: string = '';
+    @Input() label: string = '';
+
+	@Input() size: "l" | "m" | "s" = 'm';
+
+    @Input() disabled: boolean = false;
+
+    @Input() value: string = "";
+    @Output() valueChange = new EventEmitter<string>();
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+        }
+    }
+}

package/src/components/textinput.ts

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TuiInput } from '@taiga-ui/core';
+
+@Component({
+    selector: 'ezui-textinput',
+    imports: [
+		FormsModule,
+		CommonModule,
+		TuiInput
+	],
+    template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
+		</tui-textfield>
+    `,
+    styles: `
+    `
+})
+export class EzUITextInput implements OnChanges {
+    @Input() icon: string = '';
+    @Input() label: string = '';
+
+	@Input() size: "l" | "m" | "s" = 'm';
+
+    @Input() disabled: boolean = false;
+
+    @Input() value: string = "";
+    @Output() valueChange = new EventEmitter<string>();
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+        }
+    }
+}

package/src/helpers/compressImage.ts

@@ -0,0 +1,20 @@
+import Compressor from "compressorjs";
+
+export const compressImage = async (
+  file: File,
+  quality: number,
+  maxHeight: number,
+  maxWidth: number,
+  convertSize?: number
+): Promise<File | Blob> => {
+  return await new Promise((resolve, reject) => {
+    new Compressor(file, {
+      quality,
+      maxHeight,
+      maxWidth,
+      convertSize,
+      success: resolve,
+      error: reject,
+    });
+  });
+};

package/src/interfaces/baseCRUDInterface.ts

@@ -0,0 +1,181 @@
+import { HttpClient } from '@angular/common/http';
+import { Directive, signal } from '@angular/core';
+import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile';
+import { TuiNotificationService } from '@taiga-ui/core';
+import { TUI_CONFIRM } from '@taiga-ui/kit';
+import { firstValueFrom, switchMap } from 'rxjs';
+
+@Directive()
+export abstract class BaseCRUDInterface {
+    public isLoading = signal<boolean>(false);
+
+    public allItems = signal<any[]>([]);
+    public currentItem = signal<any>({} as any);
+    public newItemTemplate(): any {
+        return {} as any;
+    }
+
+    public getAllEndpoint: string = '';
+    public getEndpoint: string = '';
+    public patchEndpoint: string = '';
+    public postEndpoint: string = '';
+    public deleteEndpoint: string = '';
+
+    public canRead: boolean = true;
+    public canWrite: boolean = true;
+
+    public showDialog = signal<boolean>(false);
+
+    public loadOnInit: boolean = true;
+
+    public showDeleteDialog: boolean = true;
+    public deleteDialogMessage : string = "Are you sure you want to delete this item?";
+    public showSaveDialog: boolean = false;
+    public savewDialogMessage : string = "Are you sure you want to save this item?";
+
+    constructor(
+        public http: HttpClient,
+        public messageService: TuiNotificationService,
+        public confirmationService: TuiResponsiveDialogService
+    ) {}
+
+    async ngOnInit() {
+        if (this.canRead && this.loadOnInit) await this.loadItems();
+    }
+
+    public async loadItems() {
+        if (!this.canRead) throw new Error('You do not have read permissions!');
+        this.isLoading.set(true);
+        try {
+            this.allItems.set(await firstValueFrom(this.http.get<any[]>(this.getAllEndpoint)));
+        } catch {
+			this.messageService.open("Failed to load all items!", {
+				label: "Load Error",
+				appearance: 'negative',
+				icon:'circle-x',
+				autoClose: 10000
+			}).subscribe();
+        }
+        this.isLoading.set(false);
+    }
+
+    async saveItem() {
+        if (!this.canWrite) throw new Error('You do not have write permissions!');
+
+        if (this.showSaveDialog){
+			this.confirmationService.open<boolean>(
+				TUI_CONFIRM,
+				{
+					label: this.savewDialogMessage,
+					size: 's'
+				})
+				.pipe(switchMap(async (response) => {
+					if (response === true)
+						await this.saveItemInner();
+				}))
+	            .subscribe();
+        }
+        else
+            await this.saveItemInner();
+    }
+
+    async saveItemInner(){
+        this.isLoading.set(true);
+        try {
+            var current = this.currentItem();
+            if (current.id != '') {
+                await firstValueFrom(this.http.patch(this.patchEndpoint, current));
+				this.messageService.open("The item was updated with the new values", {
+					label: "Item Updated",
+					appearance: 'positive',
+					icon:'circle-x',
+					autoClose: 1000
+				}).subscribe();
+            } else {
+                await firstValueFrom(this.http.post(this.postEndpoint, current));
+				this.messageService.open("A new items was created", {
+					label: "Item Created",
+					appearance: 'positive',
+					icon:'circle-x',
+					autoClose: 1000
+				}).subscribe();
+            }
+            this.showDialog.set(false);
+            await this.loadItems();
+        } catch {
+			this.messageService.open("Save failed!", {
+				label: "Save Error",
+				appearance: 'negative',
+				icon:'circle-x',
+				autoClose: 10000
+			}).subscribe();
+        }
+        this.isLoading.set(false);
+    }
+
+    async deleteItem() {
+        if (!this.canWrite) throw new Error('You do not have write permissions!');
+
+        if (this.showDeleteDialog){
+			this.confirmationService.open<boolean>(
+				TUI_CONFIRM,
+				{
+					label: this.deleteDialogMessage,
+					size: 's'
+				})
+				.pipe(switchMap(async (response) => {
+					if (response === true)
+						await this.deleteItemInner();
+				}))
+	            .subscribe();
+        }
+        else
+            await this.deleteItemInner();
+    }
+
+    async deleteItemInner() {
+        this.isLoading.set(true);
+        try {
+            await firstValueFrom(this.http.delete(this.deleteEndpoint + '?ID=' + this.currentItem().id));
+			this.messageService.open("The item was successfully deleted", {
+				label: "Item Deleted",
+				appearance: 'positive',
+				icon:'circle-x',
+				autoClose: 1000
+			}).subscribe();
+            this.showDialog.set(false);
+            await this.loadItems();
+        } catch {
+			this.messageService.open("Delete failed!", {
+				label: "Delete Error",
+				appearance: 'negative',
+				icon:'circle-x',
+				autoClose: 10000
+			}).subscribe();
+        }
+        this.isLoading.set(false);
+    }
+
+    public async showEditItem(id: string) {
+        if (!this.canRead) throw new Error('You do not have read permissions!');
+        this.isLoading.set(true);
+        try {
+            var fetched = await firstValueFrom(this.http.get<any>(this.getEndpoint + '?ID=' + id));
+            this.currentItem.set(fetched);
+            this.showDialog.set(true);
+        } catch {
+			this.messageService.open("Loading failed!", {
+				label: "Load Error",
+				appearance: 'negative',
+				icon:'circle-x',
+				autoClose: 10000
+			}).subscribe();
+        }
+        this.isLoading.set(false);
+    }
+
+    public async showAddItem() {
+        this.currentItem.set(this.newItemTemplate());
+        this.showDialog.set(true);
+    }
+}

package/src/interfaces/baseListService.ts

@@ -0,0 +1,62 @@
+import { HttpClient } from "@angular/common/http";
+import { Directive, EventEmitter, signal } from "@angular/core";
+import { firstValueFrom } from "rxjs";
+
+@Directive()
+export class BaseListService<T,TList extends IIdentifiable> {
+    public items = signal<TList[]>([]);
+
+    public getAllEndpoint: string = '';
+    public getEndpoint: string = '';
+
+    isLoaded : boolean = false;
+    isLoading : boolean = false;
+
+	public onUpdated : EventEmitter<any> = new EventEmitter();
+
+    constructor(
+        public http: HttpClient
+    ) {
+    }
+
+    public async Load(){
+        if (!this.isLoading){
+            this.isLoaded = false;
+            this.isLoading = true;
+			var value = await firstValueFrom(this.http.get<TList[]>(this.getAllEndpoint));
+            this.items.set(value);
+            this.isLoading = false;
+            this.isLoaded = true;
+			this.onUpdated.emit();
+        }
+    }
+
+    public async List() : Promise<TList[]>{
+        if (!this.isLoaded)
+            await this.waitForValue(() => this.isLoaded === true);
+        return this.items();
+    }
+
+    public async ListGet(id : string) : Promise<TList | null>{
+        if (!this.isLoaded)
+            await this.waitForValue(() => this.isLoaded === true);
+        var target = this.items().find(x => x.id == id);
+        if (target)
+            return target;
+        return null;
+    }
+
+    public async Get(id : string) : Promise<T> {
+        var item = await firstValueFrom(this.http.get<T>(this.getEndpoint + "?ID=" + id));
+        return item;
+    }
+
+    async waitForValue(test : any) {
+        const delayMs = 500;
+        while(!test()) await new Promise(resolve => setTimeout(resolve, delayMs));
+    }
+}
+
+export interface IIdentifiable {
+    id : string;
+}

package/src/public-api.ts

@@ -0,0 +1,15 @@
+// Components
+export * from './components/dateinput';
+export * from './components/markdowneditor';
+export * from './components/multiselect';
+export * from './components/numberinput';
+export * from './components/passwordinput';
+export * from './components/textinput';
+
+// Helpers
+export * from './helpers/compressImage';
+
+// Interfaces
+export * from './interfaces/baseCRUDInterface';
+export * from './interfaces/baseListService';
+

package/tsconfig.lib.json

@@ -0,0 +1,12 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}