Add & list dimensions

frontend/package-lock.json

@@ -2045,6 +2045,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@ngrx/entity": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/entity/-/entity-10.1.0.tgz",
+      "integrity": "sha512-KN72pcBYfK9SgF3Dq2zMKLmPAGtr3e2+gURR45Ph0v13diaw4tgjbQYR4aplrXtR4+5AHwdmtafZ28VPp99PvA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngrx/router-store": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-10.0.1.tgz",

frontend/package.json

@@ -21,6 +21,7 @@
     "@nebular/eva-icons": "5.0.0",
     "@nebular/theme": "^5.0.0",
     "@ngrx/effects": "^10.0.1",
+    "@ngrx/entity": "^10.1.0",
     "@ngrx/router-store": "^10.0.1",
     "@ngrx/store": "^10.0.1",
     "@ngrx/store-devtools": "^10.0.1",

frontend/src/app/actions/dimension.actions.ts

@@ -1,9 +1,20 @@
 import { createAction, props } from '@ngrx/store';
+import { create } from 'domain';
 import { Dimension } from '../reducers/dimension.reducers';
 
 export const getDimensions = createAction('[Dimension] Get Dimmnsions');
-
 export const getDimensionSuccess = createAction(
   '[Dimension] Get Dimensions Success',
   props<{ dimensions: Array<Dimension> }>()
 );
+export const addNewDimension = createAction(
+  '[Dimension] Add Dimension',
+  props<{ dimension: Dimension }>()
+);
+export const addNewDimensionSuccess = createAction(
+  '[Dimension] Add Dimension Success'
+);
+export const removeDimension = createAction(
+  '[Dimension] Remove Dimension',
+  props<{ id: number }>()
+);

frontend/src/app/effects/dimmension.effects.ts

@@ -2,13 +2,15 @@ import { Injectable } from '@angular/core';
 import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { State } from '../reducers';
 import { Store } from '@ngrx/store';
-import { flatMap, catchError, map, concatMap } from 'rxjs/operators';
+import { flatMap, catchError, map } from 'rxjs/operators';
 import { EMPTY, of } from 'rxjs';
 import {
   getDimensions,
   getDimensionSuccess,
+  addNewDimension,
 } from '../actions/dimension.actions';
 import { DimensionsService } from '../services/dimensions.service';
+import { addNewDimensionSuccess } from '../actions/dimension.actions';
 
 @Injectable()
 export class DimmensionEffects {
@@ -17,15 +19,30 @@ export class DimmensionEffects {
     private dimensionService: DimensionsService
   ) {}
 
-  getDimmension$ = createEffect(() =>
+  getDimmensions$ = createEffect(() =>
     this.actions$.pipe(
       ofType(getDimensions),
       flatMap(() =>
         this.dimensionService.getDimensions().pipe(
-          map((result) => getDimensionSuccess({ dimensions: result })),
+          map((result) => {
+            console.log(result);
+            return getDimensionSuccess({ dimensions: result });
+          }),
           catchError(() => EMPTY)
         )
       )
     )
   );
+
+  addDimension$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(addNewDimension),
+      flatMap((action) => {
+        console.log(action.dimension);
+        return this.dimensionService
+          .addDimension(action.dimension)
+          .pipe(map(() => addNewDimensionSuccess()));
+      })
+    )
+  );
 }

frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.html

@@ -7,7 +7,14 @@
       class="dialog__body"
       id="dimensionForm"
     >
-      <input nbInput placeholder="Nazwa wymiaru" formControlName="name" />
+      <input
+        nbInput
+        placeholder="Nazwa wymiaru"
+        formControlName="name"
+        [status]="
+          name.invalid && (name.dirty || name.touched) ? 'danger' : 'basic'
+        "
+      />
       <button nbButton status="info" (click)="addCategory()" type="button">
         Dodaj nową kategorię
       </button>
@@ -26,7 +33,13 @@
                 : 'basic'
             "
           />
-          <button nbButton nbSuffix ghost type="button">
+          <button
+            nbButton
+            nbSuffix
+            ghost
+            type="button"
+            (click)="removeCategory(i)"
+          >
             <nb-icon icon="minus-outline" pack="eva"></nb-icon>
           </button>
         </nb-form-field>

frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.ts

@@ -1,5 +1,14 @@
 import { Component } from '@angular/core';
-import { FormBuilder, FormArray, Validators } from '@angular/forms';
+import {
+  FormBuilder,
+  FormArray,
+  Validators,
+  FormControl,
+} from '@angular/forms';
+import { NbToastrService, NbDialogRef } from '@nebular/theme';
+import { Store } from '@ngrx/store';
+import { State } from 'src/app/reducers';
+import { addNewDimension } from 'src/app/actions/dimension.actions';
 
 @Component({
   selector: 'add-dimension-dialog',
@@ -7,7 +16,12 @@ import { FormBuilder, FormArray, Validators } from '@angular/forms';
   styleUrls: ['./add-dimension-dialog.component.scss'],
 })
 export class AddDimensionDialogComponent {
-  constructor(private fb: FormBuilder) {}
+  constructor(
+    private fb: FormBuilder,
+    private toastService: NbToastrService,
+    private store: Store<State>,
+    protected dialogRef: NbDialogRef<AddDimensionDialogComponent>
+  ) {}
 
   dimensionForm = this.fb.group({
     name: ['', Validators.required],
@@ -18,11 +32,30 @@ export class AddDimensionDialogComponent {
     return this.dimensionForm.get('categories') as FormArray;
   }
 
+  get name() {
+    return this.dimensionForm.get('name') as FormControl;
+  }
+
   addCategory() {
     this.categories.push(this.fb.control('', Validators.required));
   }
 
+  removeCategory(index: number) {
+    this.categories.removeAt(index);
+  }
+
   onSubmit() {
     this.dimensionForm.markAllAsTouched();
+    if (!this.dimensionForm.invalid) {
+      this.store.dispatch(
+        addNewDimension({ dimension: this.dimensionForm.value })
+      );
+      this.toastService.success('', 'Pomyślnie dodano nowy wymiar!');
+      this.dialogRef.close();
+    } else {
+      this.toastService.danger('', 'Wystąpił błąd przy wprowadzaniu danych', {
+        icon: 'alert-triangle-outline',
+      });
+    }
   }
 }

frontend/src/app/my-profile/available-forums/available-forums.component.ts

@@ -49,7 +49,9 @@ export class AvailableForumsComponent implements OnInit {
   }
 
   delete() {
-    this.dialogService.open(DeleteDialogComponent);
+    this.dialogService.open(DeleteDialogComponent, {
+      context: { type: 'plik' },
+    });
   }
 
   openForum(id: string) {

frontend/src/app/my-profile/delete-dialog/delete-dialog.component.html

@@ -1,7 +1,7 @@
 <nb-card>
-  <nb-card-header>Czy chcesz usunąć wybrany plik?</nb-card-header>
+  <nb-card-header>Czy chcesz usunąć wybrany {{ type }}?</nb-card-header>
   <nb-card-body class="dialog__buttons"
-    ><button nbButton status="danger">Potwierdź</button>
-    <button nbButton status="info">Anuluj</button>
+    ><button nbButton status="danger" (click)="close(true)">Potwierdź</button>
+    <button nbButton status="info" (click)="close(false)">Anuluj</button>
   </nb-card-body>
 </nb-card>

frontend/src/app/my-profile/delete-dialog/delete-dialog.component.ts

@@ -1,8 +1,15 @@
 import { Component } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
 
 @Component({
   selector: 'delete-dialog',
   templateUrl: './delete-dialog.component.html',
   styleUrls: ['./delete-dialog.component.scss'],
 })
-export class DeleteDialogComponent {}
+export class DeleteDialogComponent {
+  constructor(private dialogRef: NbDialogRef<DeleteDialogComponent>) {}
+  type: string;
+  close(value: boolean) {
+    this.dialogRef.close(value);
+  }
+}

frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.html

@@ -1,7 +1,22 @@
-<nb-card accent="success">
+<nb-card accent="success" class="dimension">
   <nb-card-header class="h5">Moje wymiary</nb-card-header>
-  <nb-list *ngIf="(data$ | async)?.length === 0; else empty">
-    <nb-list-item *ngFor="let item of data$ | async"></nb-list-item>
+  <nb-list *ngIf="(data$ | async)?.length !== 0; else empty">
+    <nb-list-item
+      *ngFor="let item of data$ | async; let i = index"
+      class="dimension__list"
+    >
+      <div>
+        <span class="subtitle dimension__name">{{ item.name }}</span>
+      </div>
+      <div>
+        <nb-icon
+          icon="close-outline"
+          status="danger"
+          class="dimension__close"
+          (click)="removeDimension(i)"
+        ></nb-icon>
+      </div>
+    </nb-list-item>
   </nb-list>
 </nb-card>
 

frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.scss

@@ -0,0 +1,12 @@
+.dimension {
+  &__list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__name,
+  &__close {
+    cursor: pointer;
+  }
+}

frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.ts

@@ -4,9 +4,11 @@ import { Store } from '@ngrx/store';
 import { State } from '../../reducers';
 import { getDimensions } from '../../actions/dimension.actions';
 import { Dimension } from 'src/app/reducers/dimension.reducers';
+import { removeDimension } from 'src/app/actions/dimension.actions';
 import { selectDimensions } from '../../selectors/dimension.selectors';
 import { NbDialogService } from '@nebular/theme';
 import { AddDimensionDialogComponent } from '../add-dimension-dialog/add-dimension-dialog.component';
+import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
 
 @Component({
   selector: 'manage-dimensions',
@@ -25,6 +27,14 @@ export class ManageDimensionsComponent implements OnInit {
     this.store.dispatch(getDimensions());
   }
 
+  removeDimension(id: number) {
+    this.dialogService
+      .open(DeleteDialogComponent, { context: { type: 'wymiar' } })
+      .onClose.subscribe(
+        (res: boolean) => res && this.store.dispatch(removeDimension({ id }))
+      );
+  }
+
   openAddDialog(): void {
     this.dialogService.open(AddDimensionDialogComponent);
   }

frontend/src/app/reducers/dimension.reducers.ts

@@ -1,27 +1,37 @@
 import { Action, createReducer, on } from '@ngrx/store';
-import { getDimensionSuccess } from '../actions/dimension.actions';
+import {
+  getDimensionSuccess,
+  addNewDimension,
+  removeDimension,
+} from '../actions/dimension.actions';
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
 
 export interface Dimension {
-  id: number;
+  name: string;
   categories: Array<string>;
 }
 
-export interface DimensionsState {
-  availableDimensions: Array<Dimension>;
-  currentDimmension: Dimension;
+export interface DimensionsState extends EntityState<Dimension> {
+  selectedDimension: number | null;
 }
 
-export const initialState: DimensionsState = {
-  availableDimensions: [],
-  currentDimmension: {} as Dimension,
-};
+export const adapter: EntityAdapter<Dimension> = createEntityAdapter<Dimension>();
+
+export const initialState: DimensionsState = adapter.getInitialState({
+  selectedDimension: null,
+});
 
 const _dimensionsReducer = createReducer(
   initialState,
-  on(getDimensionSuccess, (state, { dimensions }) => ({
-    ...state,
-    availableDimensions: dimensions,
-  }))
+  on(addNewDimension, (state, { dimension }) =>
+    adapter.addOne(dimension, state)
+  ),
+  on(getDimensionSuccess, (state, { dimensions }) =>
+    adapter.setAll(dimensions, state)
+  ),
+  on(removeDimension, (state, { id }) =>
+    adapter.removeOne(id.toString(), state)
+  )
 );
 
 export function dimensionsReducer(

frontend/src/app/selectors/dimension.selectors.ts

@@ -1,12 +1,11 @@
 import { createSelector, createFeatureSelector } from '@ngrx/store';
 import { State } from '../reducers';
-import { DimensionsState } from '../reducers/dimension.reducers';
+import { DimensionsState, adapter } from '../reducers/dimension.reducers';
 
 export const selectFeature = createFeatureSelector<State, DimensionsState>(
   'dimension'
 );
 
-export const selectDimensions = createSelector(
-  selectFeature,
-  (state: DimensionsState) => state.availableDimensions
-);
+const { selectAll } = adapter.getSelectors();
+
+export const selectDimensions = createSelector(selectFeature, selectAll);

frontend/src/app/services/dimensions.service.ts

@@ -11,8 +11,13 @@ export class DimensionsService {
   getDimensions(): Observable<Array<Dimension>> {
     return this.http
       .get<any>('http://127.0.0.1:8000/dimension/')
-      .pipe(
-        map((result) => (result.statusCode === '200' ? result.data : EMPTY))
-      );
+      .pipe(map((res) => res.data));
+  }
+
+  addDimension(dimension: Dimension): Observable<any> {
+    const body = JSON.stringify(dimension);
+    return this.http.post<any>('http://127.0.0.1:8000/dimension/', body, {
+      responseType: 'json',
+    });
   }
 }