import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    importProvidersFrom(ReactiveFormsModule)
  ]
};

import { Component } from '@angular/core';
import { NgCrudAioComponent } from 'ng-crud-aio';
import { CrudFormItem, CrudTableColumns } from 'ng-crud-aio/models';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <ng-crud-aio
      [title]="'User Management'"
      [urlEndpoint]="'users'"
      [fields]="formFields"
      [displayedColumns]="displayedCols"
      [columns]="tableColumns">
    </ng-crud-aio>
  `,
  imports: [NgCrudAioComponent]
})
export class AppComponent {
  // Your API will be called at: 'http://localhost:4200/api/users'
  // using this component.
  
  formFields: CrudFormItem[] = [
    { name: 'name', type: 'text', required: true, label: 'Full Name', defaultValue: '' },
    { name: 'email', type: 'email', required: true, label: 'Email', defaultValue: '' }
  ];

  displayedCols: string[] = ['name', 'email'];

  tableColumns: CrudTableColumns[] = [
    { name: 'name', title: 'User Name', isSortable: true, isSearchable: true },
    { name: 'email', title: 'Email Address', isSortable: false, isSearchable: true }
  ];
}

import { Component } from '@angular/core';
import { NgCrudAioComponent } from 'ng-crud-aio';
import { CrudFormItem } from 'ng-crud-aio/models';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <ng-crud-aio
      [mode]="'manual'"
      [hasTable]="false"
      [title]="'Edit Profile'"
      [subtitle]="'Update your personal information'"
      [fields]="formFields"
      (dataLoaded)="loadProfile($event)"
      (recordSaved)="saveProfile($event)">
    </ng-crud-aio>
  `,
  imports: [NgCrudAioComponent]
})
export class AppComponent {
  formFields: CrudFormItem[] = [
    { name: 'firstName', type: 'text', required: true, label: 'First Name' },
    { name: 'lastName', type: 'text', required: true, label: 'Last Name' }
  ];

  loadProfile(id: number) {
    // Implement your logic to fetch the user profile from your API
    // and patch the form data in the ng-crud-aio component.
    console.log('User requested to load profile for ID:', id);
  }

  saveProfile(formData: any) {
    // Implement your logic to save the updated profile to your API.
    console.log('User submitted form data:', formData);
  }
}

// ./interceptors/auth.interceptor.ts
import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('jwt_token');

  if (token) {
    const clonedRequest = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });
    return next(clonedRequest);
  }

  return next(req);
};

//all imports go here
import { authInterceptor } from './interceptors/auth.interceptor';

export const appConfig: ApplicationConfig = {
  //other configs go here
  providers: [
    //other providers go here
    provideHttpClient(
      withInterceptors([authInterceptor])
    )
  ]
};