diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 38d2a0f..fe4e379 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index fb5bc50..c5f13ea 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/app/actions/dimension.actions.ts b/frontend/src/app/actions/dimension.actions.ts index a494d50..f4948f8 100644 --- a/frontend/src/app/actions/dimension.actions.ts +++ b/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 }>() ); +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 }>() +); diff --git a/frontend/src/app/effects/dimmension.effects.ts b/frontend/src/app/effects/dimmension.effects.ts index 529bbd2..620f306 100644 --- a/frontend/src/app/effects/dimmension.effects.ts +++ b/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())); + }) + ) + ); } diff --git a/frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.html b/frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.html index 2b1f029..dc0bf60 100644 --- a/frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.html +++ b/frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.html @@ -7,7 +7,14 @@ class="dialog__body" id="dimensionForm" > - + @@ -26,7 +33,13 @@ : 'basic' " /> - diff --git a/frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.ts b/frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.ts index d022d98..a909c25 100644 --- a/frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.ts +++ b/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, + protected dialogRef: NbDialogRef + ) {} 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', + }); + } } } diff --git a/frontend/src/app/my-profile/available-forums/available-forums.component.ts b/frontend/src/app/my-profile/available-forums/available-forums.component.ts index e214ae7..7fd61f8 100644 --- a/frontend/src/app/my-profile/available-forums/available-forums.component.ts +++ b/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) { diff --git a/frontend/src/app/my-profile/delete-dialog/delete-dialog.component.html b/frontend/src/app/my-profile/delete-dialog/delete-dialog.component.html index fa5e1a4..c955c1f 100644 --- a/frontend/src/app/my-profile/delete-dialog/delete-dialog.component.html +++ b/frontend/src/app/my-profile/delete-dialog/delete-dialog.component.html @@ -1,7 +1,7 @@ - Czy chcesz usunąć wybrany plik? + Czy chcesz usunąć wybrany {{ type }}? - + > + diff --git a/frontend/src/app/my-profile/delete-dialog/delete-dialog.component.ts b/frontend/src/app/my-profile/delete-dialog/delete-dialog.component.ts index 9815464..0e36a36 100644 --- a/frontend/src/app/my-profile/delete-dialog/delete-dialog.component.ts +++ b/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) {} + type: string; + close(value: boolean) { + this.dialogRef.close(value); + } +} diff --git a/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.html b/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.html index 8c10777..7cbec8a 100644 --- a/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.html +++ b/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.html @@ -1,7 +1,22 @@ - + Moje wymiary - - + + +
+ {{ item.name }} +
+
+ +
+
diff --git a/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.scss b/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.scss index e69de29..9ccbf7c 100644 --- a/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.scss +++ b/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; + } +} diff --git a/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.ts b/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.ts index 6862ad0..92254f6 100644 --- a/frontend/src/app/my-profile/manage-dimensions/manage-dimensions.component.ts +++ b/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); } diff --git a/frontend/src/app/reducers/dimension.reducers.ts b/frontend/src/app/reducers/dimension.reducers.ts index 2b898bb..aa2f694 100644 --- a/frontend/src/app/reducers/dimension.reducers.ts +++ b/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; } -export interface DimensionsState { - availableDimensions: Array; - currentDimmension: Dimension; +export interface DimensionsState extends EntityState { + selectedDimension: number | null; } -export const initialState: DimensionsState = { - availableDimensions: [], - currentDimmension: {} as Dimension, -}; +export const adapter: EntityAdapter = createEntityAdapter(); + +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( diff --git a/frontend/src/app/selectors/dimension.selectors.ts b/frontend/src/app/selectors/dimension.selectors.ts index 3e7ba09..4cdc773 100644 --- a/frontend/src/app/selectors/dimension.selectors.ts +++ b/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( 'dimension' ); -export const selectDimensions = createSelector( - selectFeature, - (state: DimensionsState) => state.availableDimensions -); +const { selectAll } = adapter.getSelectors(); + +export const selectDimensions = createSelector(selectFeature, selectAll); diff --git a/frontend/src/app/services/dimensions.service.ts b/frontend/src/app/services/dimensions.service.ts index fe73fdb..b2fe901 100644 --- a/frontend/src/app/services/dimensions.service.ts +++ b/frontend/src/app/services/dimensions.service.ts @@ -11,8 +11,13 @@ export class DimensionsService { getDimensions(): Observable> { return this.http .get('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 { + const body = JSON.stringify(dimension); + return this.http.post('http://127.0.0.1:8000/dimension/', body, { + responseType: 'json', + }); } }