s434776/PRI_2020-FE
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Prepare components for future API

Browse Source
This commit is contained in:
Michał Romaszkin 2020-12-08 19:05:08 +01:00
parent c24ce9a546
commit 8c10ff9459
12 changed files with 166 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/effects/discussion-chooser.effects.ts
View File

@ -33,7 +33,7 @@ export class DiscussionChooserEffects {
)
),
flatMap(([_, id]) =>
this.discussionService.getDiscussion(parseInt(id!)).pipe(
this.discussionService.getDiscussionList(parseInt(id!)).pipe(
map((discussions) => discussionLoadSuccess({ discussions })),
catchError(() => EMPTY)
)

16
frontend/src/app/effects/discussion.effect.ts
View File

@ -36,11 +36,15 @@ export class DiscussionEffects {
)
),
flatMap(([_, id]) =>
this.getDiscussionService.getDiscussion(parseInt(id!)).pipe(
map((discussions) =>
discussionSuccess({ payload: discussions.posts })
),
catchError(() => EMPTY)
this.getDiscussionService.getDiscussion(id!).pipe(
map((discussions) => {
console.log('Dupa!');
return discussionSuccess({ payload: discussions.posts });
}),
catchError(() => {
console.log('Dupa?');
return EMPTY;
})
)
)
)
@ -51,7 +55,7 @@ export class DiscussionEffects {
this.actions$.pipe(
ofType(ROUTER_NAVIGATED),
tap(() => {
if (this.router.url.includes('/view/forum/')) {
if (this.router.url.includes('/topic/')) {
this.store$.dispatch(getDiscussion());
}
})

4
frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html
View File

@ -1,4 +1,4 @@
<div class="discussion-viewer">
<!-- <div class="discussion-viewer">
<div
subheader
class="discussion-viewer__buttons-container"
@ -59,4 +59,4 @@
</nb-card-body>
</nb-card>
</div>
</div>
</div> -->

4
frontend/src/app/main-view/main-view.module.ts
View File

@ -9,7 +9,7 @@ import { DiscussionViewerComponent } from './discussion-viewer/discussion-viewer
import { GetDiscussionService } from '../services/get-discussion.service';
import { ParagraphService } from '../services/paragraph.service';
import { MapIdService } from '../services/map-id.service';
import { StyledParagraphComponent } from './styled-paragraph/styled-paragraph.component';
// import { StyledParagraphComponent } from './styled-paragraph/styled-paragraph.component';
import { IdToNamePipe } from '../_pipes/id-to-name.pipe';
import { DiscussionEffects } from '../effects/discussion.effect';
@ -31,8 +31,6 @@ import { EffectsModule } from '@ngrx/effects';
MainViewComponent,
DiscussionChooserComponent,
DiscussionViewerComponent,
StyledParagraphComponent,
IdToNamePipe,
],
imports: [
CommonModule,

3
frontend/src/app/my-profile/discussion-viewer/discussion-chooser/discussion-chooser.component.ts
View File

@ -16,7 +16,7 @@ import { selectData } from '../../../selectors/discussion-chooser.selectors';
export class DiscussionChooserComponent implements OnInit {
public data: CustomForumData;
colors: Colors[] = ['primary', 'danger', 'info', 'success', 'warning'];
data$: Observable<CustomForumData>;
data$: Observable<CustomForumData> = this.store.select(selectData);
constructor(
private router: Router,
@ -26,7 +26,6 @@ export class DiscussionChooserComponent implements OnInit {
ngOnInit(): void {
this.store.dispatch(loadDiscussions());
this.data$ = this.store.select(selectData);
}
onDiscussionClick(id: number) {

12
frontend/src/app/my-profile/discussion-viewer/discussion-viewer.module.ts
View File

@ -17,9 +17,17 @@ import { DiscussionChooserEffects } from '../../effects/discussion-chooser.effec
import { EffectsModule } from '@ngrx/effects';
import { GetDiscussionService } from 'src/app/services/get-discussion.service';
import { ViewComponent } from './view/view.component';
import { StyledParagraphComponent } from './styled-paragraph/styled-paragraph.component';
import { IdToNamePipe } from '../../_pipes/id-to-name.pipe';
import { DiscussionEffects } from 'src/app/effects/discussion.effect';
@NgModule({
declarations: [DiscussionChooserComponent, ViewComponent],
declarations: [
DiscussionChooserComponent,
ViewComponent,
StyledParagraphComponent,
IdToNamePipe,
],
imports: [
CommonModule,
DiscussionViewerRoutingModule,
@ -32,7 +40,7 @@ import { ViewComponent } from './view/view.component';
NbButtonModule,
NbSelectModule,
NbIconModule,
EffectsModule.forFeature([DiscussionChooserEffects]),
EffectsModule.forFeature([DiscussionChooserEffects, DiscussionEffects]),
],
providers: [GetDiscussionService],
})

4
frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.html → frontend/src/app/my-profile/discussion-viewer/styled-paragraph/styled-paragraph.component.html
View File

@ -15,9 +15,7 @@
</div>
<div class="discussion-viewer__select">
<label class="label">
Wybierz etykietę
</label>
<label class="label"> Wybierz etykietę </label>
<nb-select
placeholder="Wybierz etykietę"
(selectedChange)="fetchLabel($event, paragraphId)"

2
frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.scss → frontend/src/app/my-profile/discussion-viewer/styled-paragraph/styled-paragraph.component.scss
View File

@ -1,4 +1,4 @@
@import "../../../themes";
@import "../../../../themes";
.border {
border-left-width: 8px;

2
frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.ts → frontend/src/app/my-profile/discussion-viewer/styled-paragraph/styled-paragraph.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
import { ParagraphService } from 'src/app/services/paragraph.service';
import { ParagraphService } from '../../../services/paragraph.service';
@Component({
selector: 'app-styled-paragraph',

18
frontend/src/app/my-profile/discussion-viewer/view/view.component.html
View File

@ -1 +1,17 @@
<p>view works!</p>
<!-- <div class="discussion-viewer__posts-container">
<nb-card *ngFor="let item of discussion$ | async">
<nb-card-header>
{{ item.author | idToName: displayNamesMode:parsedNames }}
</nb-card-header>
<nb-card-body>
<app-styled-paragraph
*ngFor="let paragraph of item.message; let i = index"
[message]="paragraph"
[loadedLabel]="item.label[i]"
[paragraphId]="item.para_id[i]"
[discussionId]="id"
[userEdited]="item.user_updated[i]"
></app-styled-paragraph>
</nb-card-body>
</nb-card>
</div> -->

120
frontend/src/app/my-profile/discussion-viewer/view/view.component.ts
View File

@ -1,15 +1,123 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { GetDiscussionService } from '../../../services/get-discussion.service';
import { PredictedPost } from '../../../_interfaces/predictedposts';
import { Observable, Subject, Subscription } from 'rxjs';
import { concatMap, defaultIfEmpty, map } from 'rxjs/operators';
import { ParagraphService } from 'src/app/services/paragraph.service';
import {
NbToastrService,
NbLayoutScrollService,
NbScrollPosition,
} from '@nebular/theme';
import { parse } from 'papaparse';
import { selectRouteParam, State } from 'src/app/reducers';
import { Store } from '@ngrx/store';
import { getDiscussion } from 'src/app/actions/discussion.actions';
@Component({
selector: 'view',
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.scss']
styleUrls: ['./view.component.scss'],
})
export class ViewComponent implements OnInit {
data: PredictedPost[];
id: number;
subscriptionData: Subscription;
subscriptionId: Subscription;
displayNamesMode: boolean;
parsedNames: { id: number; name: string }[];
scrollPosition: NbScrollPosition;
constructor() { }
ngOnInit(): void {
constructor(
// private paragraphService: ParagraphService,
private router: Router,
private toastService: NbToastrService,
private scrollService: NbLayoutScrollService,
private store: Store<State>
) {
this.scrollPosition = { x: 0, y: 0 };
}
discussion$: Observable<PredictedPost[]> = this.store.select((state) => {
return state.currentDiscussion;
});
ngOnInit(): void {
this.store.dispatch(getDiscussion());
this.store.select(selectRouteParam('id')).subscribe((id) => {
this.id = parseInt(id!);
});
this.scrollService
.onScroll()
.pipe(concatMap(() => this.scrollService.getPosition()))
.subscribe((result) => {
this.scrollPosition = result;
});
}
// onBackButtonClick() {
// this.router.navigate(['/view/discussions/']);
// }
// onSaveChangesButtonClick(id: number) {
// this.paragraphService
// .patchParagraphs(id)
// ?.pipe(defaultIfEmpty())
// .subscribe((result: any) => {
// if (result === null) {
// this.toastService.danger('', 'Brak zmian!', {
// preventDuplicates: true,
// icon: 'alert-circle',
// });
// } else {
// this.data = result.posts;
// this.toastService.success('', 'Zmiany zostały zapisane!', {
// icon: 'checkmark-circle-2-outline',
// });
// }
// });
// }
// onMapIdClick() {
// const el: HTMLElement = document.getElementById(
// 'input-for-id'
// ) as HTMLElement;
// el.click();
// }
// async fetchFile(event: Event) {
// let parsedNamesFromArray: Array<{ id: number; name: string }>;
// const target = event.target as HTMLInputElement;
// const file = target.files![0];
// try {
// parsedNamesFromArray = await this.parseFile(file);
// this.parsedNames = parsedNamesFromArray;
// this.displayNamesMode = true;
// } catch (e) {
// this.toastService.danger('', e, {
// icon: 'alert-circle',
// });
// }
// }
// parseFile(file: File): Promise<{ id: number; name: string }[]> {
// return new Promise((resolve, reject) => {
// parse(file, {
// header: true,
// skipEmptyLines: true,
// dynamicTyping: true,
// complete: (result) => {
// if (result.errors.length > 0) {
// reject('Błąd przy parsowaniu pliku');
// }
// resolve(result.data as { id: number; name: string }[]);
// },
// });
// });
// }
// resetDataMapping() {
// this.displayNamesMode = false;
// }
}

30
frontend/src/app/services/get-discussion.service.ts
View File

@ -1,34 +1,18 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { PredictedPost } from '../_interfaces/predictedposts';
import { Observable } from 'rxjs';
@Injectable()
export class GetDiscussionService {
private discussionObservableCache$: {
[id: number]: Observable<PredictedPost[]>;
} = {};
private discussionCache$: {
[id: number]: PredictedPost[];
} = {};
constructor(private http: HttpClient) {}
/* TO DO - fix caching when user changes label */
getDiscussion(id: number): Observable<any> {
return this.requestDiscussion(id);
getDiscussionList(id: number): Observable<any> {
return this.http.get<any>(`http://127.0.0.1:8000/discussionList/${id}`);
}
private requestDiscussion(id: number): Observable<any> {
return this.http
.get<any>(`http://127.0.0.1:8000/discussionList/${id}`)
.pipe(map((data) => this.mapData(id, data)));
}
private mapData(id: number, data: any) {
this.discussionCache$[id] = data;
return data;
getDiscussion(id: string): Observable<any> {
return this.http.get<any>(`http://127.0.0.1:8000/discussion/`, {
params: { id },
});
}
}