✨ mis en place des features subscriptions

Author: mckenziearts

src/app/modules/dashboard/navigation/admin.menu.ts

@@ -39,6 +39,25 @@ export const adminMenu: Menu[] = [
       }
     ]
   },
+  {
+    group: 'Plans',
+    items: [
+      {
+        title: 'Plans',
+        svgPath: [
+          'M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z'
+        ],
+        link: '/plans/create-plan',
+      },
+      {
+        title: 'Souscriptions',
+        svgPath: [
+          'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z'
+        ],
+        link: '/plans/subscriptions',
+      }
+    ]
+  },
   {
     group: 'Opérations',
     items: [

src/app/modules/subscription/interfaces/plan.interfaces.ts

@@ -0,0 +1,6 @@
+export interface Plan {
+  id?: number;
+  name: string;
+  description: string;
+  price: number;
+}

src/app/modules/subscription/interfaces/state.interface.ts

@@ -0,0 +1,8 @@
+import { Plan } from './plan.interfaces';
+
+export interface SubscriptionState {
+  plans: Plan[];
+  loading: boolean;
+  error: string | null;
+  message: string | null;
+}

src/app/modules/subscription/pages/create-plan/create-plan.component.html

@@ -0,0 +1,11 @@
+<h2>Formulaire de creation!</h2>
+
+<form [formGroup]="form" (submit)="submit()" class="space-y-6">
+  <input type="text" formControlName="name" class="block border border-slate-300">
+  <input type="text" formControlName="description" class="block border border-slate-300">
+  <input type="number" formControlName="price" class="block border border-slate-300">
+
+  <cosna-button-primary type="submit" [loading$]="loading$">
+    Enregistrer
+  </cosna-button-primary>
+</form>

src/app/modules/subscription/pages/create-plan/create-plan.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { createPlanAction } from '../../store/subscription.actions';
+import { selectError, selectLoading, selectMessage } from '../../store/subscription.selectors';
+
+@Component({
+  templateUrl: './create-plan.component.html',
+})
+export class CreatePlanComponent implements OnInit {
+
+  public form: FormGroup = this.formBuilder.group({
+    name: ['', Validators.required],
+    description: [''],
+    price: [''],
+  })
+
+  public error$: Observable<string | null> = this.store.select(selectError);
+
+  public loading$: Observable<boolean> = this.store.select(selectLoading);
+
+  public message$: Observable<string | null> = this.store.select(selectMessage);
+
+  constructor(private formBuilder: FormBuilder, private store: Store) { }
+
+  ngOnInit(): void { }
+
+  submit() {
+    if (this.form.valid) {
+      this.store.dispatch(createPlanAction(this.form.getRawValue()))
+    }
+  }
+
+}

src/app/modules/subscription/routes/subscription.routes.ts

@@ -0,0 +1,17 @@
+import { Routes } from '@angular/router';
+import { AdminGuard } from '@app/core/guards/admin.guard';
+import { AuthGuard } from '@app/core/guards/auth.guard';
+import { CpanelComponent } from '@app/shared/themes/layouts/cpanel/cpanel.component';
+import { CreatePlanComponent } from '../pages/create-plan/create-plan.component';
+
+export const SUBSCRIPTION_ROUTES: Routes = [
+  { path: '', redirectTo: 'create-plan', pathMatch: 'full' },
+  {
+    path: '',
+    canActivateChild: [AuthGuard, AdminGuard],
+    component: CpanelComponent,
+    children: [
+      { path: 'create-plan', component: CreatePlanComponent }
+    ],
+  }
+];

src/app/modules/subscription/services/plan.service.ts

@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { environment } from 'environments/environment';
+import { Plan } from '../interfaces/plan.interfaces';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlanService {
+
+  constructor(private http: HttpClient) { }
+
+  createPlan(plan: Plan) {
+    return this.http.post<{ plans: Plan[], message: string }>(`${environment.apiUrl}/plans/create`, plan);
+  }
+}

src/app/modules/subscription/store/plan.effects.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { catchError, map, of, switchMap } from 'rxjs';
+import { Plan } from '../interfaces/plan.interfaces';
+
+import { PlanService } from '../services/plan.service';
+import * as SubscriptionActions from './subscription.actions';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlanEffects {
+  constructor(
+    private actions$: Actions,
+    private planService: PlanService, 
+    private router: Router
+  ) {}
+
+  createPlanEffect = createEffect(() => this.actions$.pipe(
+    ofType(SubscriptionActions.createPlanAction),
+    switchMap(({ plan }: { plan: Plan }) =>
+      this.planService.createPlan(plan).pipe(
+        map(({ plans, message }) => {
+          return SubscriptionActions.createPlanSuccessAction({ plans, message })
+        }),
+        catchError((error) => {
+          return of(
+            SubscriptionActions.createPlanFailureAction({
+              error: error?.message ?? 'Une erreur est survenue'
+            })
+          )
+        })
+      )
+    )
+  )
+    
+  )
+
+  createPlanSuccessEffect() {}
+
+  createPlanFailureEffect() {}
+
+}

src/app/modules/subscription/store/subscription.actions.ts

@@ -0,0 +1,23 @@
+import { createAction, props } from '@ngrx/store';
+
+import { Plan } from '../interfaces/plan.interfaces';
+
+export const createPlanAction = createAction(
+  '[Subscription] Create plan',
+  props<{ plan: Plan }>()
+);
+
+export const createPlanSuccessAction = createAction(
+  '[Subscription] Create plan success',
+  props<{ plans: Plan[], message: string }>()
+);
+
+export const createPlanFailureAction = createAction(
+  '[Subscription] Create plan failure',
+  props<{ error: string }>()
+);
+
+export const updatePlanAction = createAction(
+  '[Subscription] Update plan',
+  props<{ plan: Plan }>()
+);

src/app/modules/subscription/store/subscription.effects.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Actions } from '@ngrx/effects';
+
+//import { SubscriptionService } from '../services/plan.service';
+import * as SubscriptionActions from './subscription.actions';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SubscriptionEffects {
+  constructor(
+    private actions$: Actions,
+    //private subscriptionService: SubscriptionService, 
+    private router: Router
+  ) {}
+
+}

src/app/modules/subscription/store/subscription.reducer.ts

@@ -0,0 +1,50 @@
+import { createReducer, on } from '@ngrx/store';
+
+import { Plan } from '../interfaces/plan.interfaces';
+import { SubscriptionState } from '../interfaces/state.interface';
+import * as SubscriptionActions from './subscription.actions';
+
+export const subscriptionState: SubscriptionState = {
+  plans: [],
+  loading: false,
+  error: null,
+  message: null,
+};
+
+export const subscriptionFeatureKey = 'subscription';
+
+export const subscriptionReducer = createReducer(
+  subscriptionState,
+  on(
+    SubscriptionActions.createPlanAction,
+    (state: SubscriptionState): SubscriptionState => {
+      return {
+        ...state,
+        loading: true,
+      }
+    }
+  ),
+  on(
+    SubscriptionActions.createPlanSuccessAction,
+    (state: SubscriptionState, { plans, message }: { plans: Plan[], message: string }): SubscriptionState => {
+      return {
+        ...state,
+        message,
+        plans,
+        loading: false,
+        error: null,
+      }
+    }
+  ),
+  on(
+    SubscriptionActions.createPlanFailureAction,
+    (state: SubscriptionState, { error } : { error: string }): SubscriptionState => {
+      return {
+        ...state,
+        error,
+        loading: false,
+        message: null,
+      }
+    }
+  )
+)

src/app/modules/subscription/store/subscription.selectors.ts

@@ -0,0 +1,26 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+
+import { SubscriptionState } from '../interfaces/state.interface';
+import { subscriptionFeatureKey } from './subscription.reducer';
+
+export const subscriptionFeatureSelector = createFeatureSelector<SubscriptionState>(subscriptionFeatureKey);
+
+export const selectPlans = createSelector(
+  subscriptionFeatureSelector,
+  (state: SubscriptionState) => state.plans
+);
+
+export const selectLoading = createSelector(
+  subscriptionFeatureSelector,
+  (state: SubscriptionState) => state.loading
+);
+
+export const selectError = createSelector(
+  subscriptionFeatureSelector,
+  (state: SubscriptionState) => state.error
+);
+
+export const selectMessage = createSelector(
+  subscriptionFeatureSelector,
+  (state: SubscriptionState) => state.message
+);

src/app/modules/subscription/subscription.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '@app/shared/shared.module';
+import { RouterModule } from '@angular/router';
+import { EffectsModule } from '@ngrx/effects';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { SUBSCRIPTION_ROUTES } from './routes/subscription.routes';
+import { CreatePlanComponent } from './pages/create-plan/create-plan.component';
+import { PlanEffects } from './store/plan.effects';
+
+
+@NgModule({
+  declarations: [
+    CreatePlanComponent
+  ],
+  imports: [
+    EffectsModule.forFeature([PlanEffects]),
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule.forChild(SUBSCRIPTION_ROUTES),
+    SharedModule,
+  ],
+  exports: [],
+})
+export class SubscriptionModule { }

src/app/modules/user/interfaces/user.interface.ts

@@ -1,5 +1,6 @@
-export interface AuthResponse {
-  message: string;
+import { AppHttpResponse } from '@app/shared/interfaces/response.interface';
+
+export interface AuthResponse extends AppHttpResponse {
   data: {
     user: User;
     access_token: string;