@ichgamer999/wmctest 1.0.1 → 1.0.2

package/dist/app/backend/backend-demo.component.d.ts

@@ -1,7 +1,6 @@
+import { BackendService } from './backend.service';
 export declare class BackendDemoComponent {
-    private backendService;
-    loading: import("@angular/core").WritableSignal<boolean>;
-    error: import("@angular/core").WritableSignal<string>;
+    backendService: BackendService;
     response: import("@angular/core").WritableSignal<any>;
     getUsers(): void;
     createUser(): void;

package/dist/app/backend/backend-demo.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"backend-demo.component.d.ts","sourceRoot":"","sources":["../../../src/app/backend/backend-demo.component.ts"],"names":[],"mappings":"AAUA,qBAqFa,oBAAoB;IAC/B,OAAO,CAAC,cAAc,CAA0B;IAEhD,OAAO,kDAAiB;IACxB,KAAK,iDAAc;IACnB,QAAQ,8CAAqB;IAE7B,QAAQ;IAgBR,UAAU;IAqBV,UAAU;IAqBV,UAAU;CAeX"}
+{"version":3,"file":"backend-demo.component.d.ts","sourceRoot":"","sources":["../../../src/app/backend/backend-demo.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQnD,qBAiIa,oBAAoB;IAC/B,cAAc,iBAA0B;IACxC,QAAQ,8CAAqB;IAE7B,QAAQ;IAQR,UAAU;IAaV,UAAU;IAaV,UAAU;CAOX"}

package/dist/app/backend/backend-demo.component.js

@@ -4,71 +4,37 @@ import { CommonModule } from '@angular/common';
 import { BackendService } from './backend.service';
 let BackendDemoComponent = class BackendDemoComponent {
     backendService = inject(BackendService);
-    loading = signal(false);
-    error = signal('');
     response = signal(null);
     getUsers() {
-        this.loading.set(true);
-        this.error.set('');
+        this.response.set(null);
         this.backendService.get('/users').subscribe({
-            next: (users) => {
-                this.loading.set(false);
-                this.response.set(users);
-            },
-            error: (err) => {
-                this.loading.set(false);
-                this.error.set(err.message || 'Failed to fetch users');
-            }
+            next: (users) => this.response.set(users)
         });
     }
     createUser() {
-        this.loading.set(true);
-        this.error.set('');
+        this.response.set(null);
         const newUser = {
             name: 'John Doe',
             email: 'john@example.com'
         };
         this.backendService.post('/users', newUser).subscribe({
-            next: (user) => {
-                this.loading.set(false);
-                this.response.set(user);
-            },
-            error: (err) => {
-                this.loading.set(false);
-                this.error.set(err.message || 'Failed to create user');
-            }
+            next: (user) => this.response.set(user)
         });
     }
     updateUser() {
-        this.loading.set(true);
-        this.error.set('');
+        this.response.set(null);
         const updatedUser = {
             name: 'Jane Doe',
             email: 'jane@example.com'
         };
         this.backendService.put('/users/1', updatedUser).subscribe({
-            next: (user) => {
-                this.loading.set(false);
-                this.response.set(user);
-            },
-            error: (err) => {
-                this.loading.set(false);
-                this.error.set(err.message || 'Failed to update user');
-            }
+            next: (user) => this.response.set(user)
         });
     }
     deleteUser() {
-        this.loading.set(true);
-        this.error.set('');
+        this.response.set(null);
         this.backendService.delete('/users/1').subscribe({
-            next: () => {
-                this.loading.set(false);
-                this.response.set({ message: 'User deleted successfully' });
-            },
-            error: (err) => {
-                this.loading.set(false);
-                this.error.set(err.message || 'Failed to delete user');
-            }
+            next: () => this.response.set({ message: 'User deleted successfully' })
         });
     }
 };
@@ -80,6 +46,7 @@ BackendDemoComponent = __decorate([
         template: `
     <div class="demo-container">
       <h2>Backend Service Demo</h2>
+      <p class="subtitle">Using Signals for reactive state management</p>
       
       <div class="actions">
         <button (click)="getUsers()">Get Users</button>
@@ -88,12 +55,15 @@ BackendDemoComponent = __decorate([
         <button (click)="deleteUser()">Delete User</button>
       </div>
       
-      @if (loading()) {
+      @if (backendService.loading()) {
         <div class="loading">Loading...</div>
       }
       
-      @if (error()) {
-        <div class="error">{{ error() }}</div>
+      @if (backendService.error()) {
+        <div class="error">
+          {{ backendService.error() }}
+          <button (click)="backendService.clearError()">✕</button>
+        </div>
       }
       
       @if (response()) {
@@ -102,6 +72,16 @@ BackendDemoComponent = __decorate([
           <pre>{{ response() | json }}</pre>
         </div>
       }
+      
+      <div class="info">
+        <h3>Features:</h3>
+        <ul>
+          <li>✅ Global loading state with Signal</li>
+          <li>✅ Global error state with Signal</li>
+          <li>✅ Automatic loading/error management</li>
+          <li>✅ Type-safe API calls</li>
+        </ul>
+      </div>
     </div>
   `,
         styles: [`
@@ -111,6 +91,11 @@ BackendDemoComponent = __decorate([
       margin: 0 auto;
     }
     
+    .subtitle {
+      color: #666;
+      margin-bottom: 2rem;
+    }
+    
     .actions {
       display: flex;
       gap: 1rem;
@@ -131,7 +116,7 @@ BackendDemoComponent = __decorate([
       background: #0056b3;
     }
     
-    .loading, .error, .response {
+    .loading, .error, .response, .info {
       padding: 1rem;
       margin: 1rem 0;
       border-radius: 4px;
@@ -140,11 +125,22 @@ BackendDemoComponent = __decorate([
     .loading {
       background: #e3f2fd;
       color: #1976d2;
+      font-weight: 500;
     }
     
     .error {
       background: #ffebee;
       color: #c62828;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .error button {
+      background: transparent;
+      color: #c62828;
+      padding: 0.25rem 0.5rem;
+      font-size: 1.2rem;
     }
     
     .response {
@@ -152,6 +148,20 @@ BackendDemoComponent = __decorate([
       border: 1px solid #ddd;
     }
     
+    .info {
+      background: #e8f5e9;
+      border-left: 4px solid #4caf50;
+    }
+    
+    .info ul {
+      margin: 0.5rem 0 0;
+      padding-left: 1.5rem;
+    }
+    
+    .info li {
+      margin: 0.5rem 0;
+    }
+    
     pre {
       overflow-x: auto;
       margin: 0.5rem 0 0;

package/dist/app/backend/backend.service.d.ts

@@ -7,6 +7,10 @@ export interface ApiResponse<T> {
 export declare class BackendService {
     private readonly http;
     baseUrl: string;
+    private _loading;
+    private _error;
+    readonly loading: import("@angular/core").Signal<boolean>;
+    readonly error: import("@angular/core").Signal<string>;
     get<T>(endpoint: string, params?: Record<string, string | number>): Observable<T>;
     post<T>(endpoint: string, body: any): Observable<T>;
     put<T>(endpoint: string, body: any): Observable<T>;
@@ -16,5 +20,6 @@ export declare class BackendService {
     postWithResponse<T>(endpoint: string, body: any): Observable<ApiResponse<T>>;
     uploadFile<T>(endpoint: string, file: File, additionalData?: Record<string, any>): Observable<T>;
     downloadFile(endpoint: string): Observable<Blob>;
+    clearError(): void;
 }
 //# sourceMappingURL=backend.service.d.ts.map

package/dist/app/backend/backend.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"backend.service.d.ts","sourceRoot":"","sources":["../../../src/app/backend/backend.service.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAElC,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAGa,cAAc;IACzB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAsB;IAE3C,OAAO,SAA+B;IAEtC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;IAKjF,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAInD,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAIlD,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAIpD,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC;IAI1C,eAAe,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAK1G,gBAAgB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAI5E,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;IAahG,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC;CAKjD"}
+{"version":3,"file":"backend.service.d.ts","sourceRoot":"","sources":["../../../src/app/backend/backend.service.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAIlC,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAGa,cAAc;IACzB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAsB;IAE3C,OAAO,SAA+B;IAEtC,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,MAAM,CAAsB;IAEpC,SAAgB,OAAO,0CAA8B;IACrD,SAAgB,KAAK,yCAA4B;IAEjD,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;IAejF,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAcnD,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAclD,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAcpD,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC;IAc1C,eAAe,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAe1G,gBAAgB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAc5E,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;IAuBhG,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC;IAgBhD,UAAU,IAAI,IAAI;CAGnB"}

package/dist/app/backend/backend.service.js

@@ -1,33 +1,83 @@
 import { __decorate } from "tslib";
-import { Injectable, inject } from '@angular/core';
+import { Injectable, inject, signal } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
+import { tap, catchError } from 'rxjs/operators';
+import { throwError } from 'rxjs';
 let BackendService = class BackendService {
     http = inject(HttpClient);
     baseUrl = 'http://localhost:3000/api';
+    _loading = signal(false);
+    _error = signal('');
+    loading = this._loading.asReadonly();
+    error = this._error.asReadonly();
     get(endpoint, params) {
+        this._loading.set(true);
+        this._error.set('');
         const httpParams = params ? new HttpParams({ fromObject: params }) : undefined;
-        return this.http.get(`${this.baseUrl}${endpoint}`, { params: httpParams });
+        return this.http.get(`${this.baseUrl}${endpoint}`, { params: httpParams }).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
     }
     post(endpoint, body) {
-        return this.http.post(`${this.baseUrl}${endpoint}`, body);
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.post(`${this.baseUrl}${endpoint}`, body).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
     }
     put(endpoint, body) {
-        return this.http.put(`${this.baseUrl}${endpoint}`, body);
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.put(`${this.baseUrl}${endpoint}`, body).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
     }
     patch(endpoint, body) {
-        return this.http.patch(`${this.baseUrl}${endpoint}`, body);
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.patch(`${this.baseUrl}${endpoint}`, body).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
     }
     delete(endpoint) {
-        return this.http.delete(`${this.baseUrl}${endpoint}`);
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.delete(`${this.baseUrl}${endpoint}`).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
     }
     getWithResponse(endpoint, params) {
+        this._loading.set(true);
+        this._error.set('');
         const httpParams = params ? new HttpParams({ fromObject: params }) : undefined;
-        return this.http.get(`${this.baseUrl}${endpoint}`, { params: httpParams });
+        return this.http.get(`${this.baseUrl}${endpoint}`, { params: httpParams }).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
     }
     postWithResponse(endpoint, body) {
-        return this.http.post(`${this.baseUrl}${endpoint}`, body);
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.post(`${this.baseUrl}${endpoint}`, body).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
     }
     uploadFile(endpoint, file, additionalData) {
+        this._loading.set(true);
+        this._error.set('');
         const formData = new FormData();
         formData.append('file', file);
         if (additionalData) {
@@ -35,12 +85,25 @@ let BackendService = class BackendService {
                 formData.append(key, additionalData[key]);
             });
         }
-        return this.http.post(`${this.baseUrl}${endpoint}`, formData);
+        return this.http.post(`${this.baseUrl}${endpoint}`, formData).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Upload failed');
+            return throwError(() => err);
+        }));
     }
     downloadFile(endpoint) {
+        this._loading.set(true);
+        this._error.set('');
         return this.http.get(`${this.baseUrl}${endpoint}`, {
             responseType: 'blob'
-        });
+        }).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Download failed');
+            return throwError(() => err);
+        }));
+    }
+    clearError() {
+        this._error.set('');
     }
 };
 BackendService = __decorate([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ichgamer999/wmctest",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Minimalist Angular authentication template with signals, JWT token handling, and HTTP interceptors",
   "keywords": [
     "angular",
@@ -9,7 +9,7 @@
     "signals",
     "template"
   ],
-  "author": "Your Name",
+  "author": "ICHGamer999",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/app/backend/backend-demo.component.ts

@@ -15,6 +15,7 @@ interface User {
   template: `
     <div class="demo-container">
       <h2>Backend Service Demo</h2>
+      <p class="subtitle">Using Signals for reactive state management</p>
       
       <div class="actions">
         <button (click)="getUsers()">Get Users</button>
@@ -23,12 +24,15 @@ interface User {
         <button (click)="deleteUser()">Delete User</button>
       </div>
       
-      @if (loading()) {
+      @if (backendService.loading()) {
         <div class="loading">Loading...</div>
       }
       
-      @if (error()) {
-        <div class="error">{{ error() }}</div>
+      @if (backendService.error()) {
+        <div class="error">
+          {{ backendService.error() }}
+          <button (click)="backendService.clearError()">✕</button>
+        </div>
       }
       
       @if (response()) {
@@ -37,6 +41,16 @@ interface User {
           <pre>{{ response() | json }}</pre>
         </div>
       }
+      
+      <div class="info">
+        <h3>Features:</h3>
+        <ul>
+          <li>✅ Global loading state with Signal</li>
+          <li>✅ Global error state with Signal</li>
+          <li>✅ Automatic loading/error management</li>
+          <li>✅ Type-safe API calls</li>
+        </ul>
+      </div>
     </div>
   `,
   styles: [`
@@ -46,6 +60,11 @@ interface User {
       margin: 0 auto;
     }
     
+    .subtitle {
+      color: #666;
+      margin-bottom: 2rem;
+    }
+    
     .actions {
       display: flex;
       gap: 1rem;
@@ -66,7 +85,7 @@ interface User {
       background: #0056b3;
     }
     
-    .loading, .error, .response {
+    .loading, .error, .response, .info {
       padding: 1rem;
       margin: 1rem 0;
       border-radius: 4px;
@@ -75,11 +94,22 @@ interface User {
     .loading {
       background: #e3f2fd;
       color: #1976d2;
+      font-weight: 500;
     }
     
     .error {
       background: #ffebee;
       color: #c62828;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .error button {
+      background: transparent;
+      color: #c62828;
+      padding: 0.25rem 0.5rem;
+      font-size: 1.2rem;
     }
     
     .response {
@@ -87,6 +117,20 @@ interface User {
       border: 1px solid #ddd;
     }
     
+    .info {
+      background: #e8f5e9;
+      border-left: 4px solid #4caf50;
+    }
+    
+    .info ul {
+      margin: 0.5rem 0 0;
+      padding-left: 1.5rem;
+    }
+    
+    .info li {
+      margin: 0.5rem 0;
+    }
+    
     pre {
       overflow-x: auto;
       margin: 0.5rem 0 0;
@@ -94,31 +138,19 @@ interface User {
   `]
 })
 export class BackendDemoComponent {
-  private backendService = inject(BackendService);
-  
-  loading = signal(false);
-  error = signal('');
+  backendService = inject(BackendService);
   response = signal<any>(null);
 
   getUsers() {
-    this.loading.set(true);
-    this.error.set('');
+    this.response.set(null);
     
     this.backendService.get<User[]>('/users').subscribe({
-      next: (users) => {
-        this.loading.set(false);
-        this.response.set(users);
-      },
-      error: (err) => {
-        this.loading.set(false);
-        this.error.set(err.message || 'Failed to fetch users');
-      }
+      next: (users) => this.response.set(users)
     });
   }
 
   createUser() {
-    this.loading.set(true);
-    this.error.set('');
+    this.response.set(null);
     
     const newUser = {
       name: 'John Doe',
@@ -126,20 +158,12 @@ export class BackendDemoComponent {
     };
     
     this.backendService.post<User>('/users', newUser).subscribe({
-      next: (user) => {
-        this.loading.set(false);
-        this.response.set(user);
-      },
-      error: (err) => {
-        this.loading.set(false);
-        this.error.set(err.message || 'Failed to create user');
-      }
+      next: (user) => this.response.set(user)
     });
   }
 
   updateUser() {
-    this.loading.set(true);
-    this.error.set('');
+    this.response.set(null);
     
     const updatedUser = {
       name: 'Jane Doe',
@@ -147,30 +171,15 @@ export class BackendDemoComponent {
     };
     
     this.backendService.put<User>('/users/1', updatedUser).subscribe({
-      next: (user) => {
-        this.loading.set(false);
-        this.response.set(user);
-      },
-      error: (err) => {
-        this.loading.set(false);
-        this.error.set(err.message || 'Failed to update user');
-      }
+      next: (user) => this.response.set(user)
     });
   }
 
   deleteUser() {
-    this.loading.set(true);
-    this.error.set('');
+    this.response.set(null);
     
     this.backendService.delete<void>('/users/1').subscribe({
-      next: () => {
-        this.loading.set(false);
-        this.response.set({ message: 'User deleted successfully' });
-      },
-      error: (err) => {
-        this.loading.set(false);
-        this.error.set(err.message || 'Failed to delete user');
-      }
+      next: () => this.response.set({ message: 'User deleted successfully' })
     });
   }
 }