This is the codeAbility Sharing Platform! Learn more about the codeAbility Sharing Platform.

Skip to content
Snippets Groups Projects
Commit 36a10ccd authored by Daniel Crazzolara's avatar Daniel Crazzolara
Browse files

Extracted bookmark toggle to component

parent ee2ef53c
3 merge requests!166Deploying Februrar 23 Release,!155disabled watchlist if not logged in,!146Put the sonar-analyze job into a separate stage
Hide whitespace changes
Inline Side-by-side
Showing
with 98 additions and 97 deletions
src/main/webapp/app/exercise/exercise-card/exercise-card.component.html
+ 1
− 26
View file @ 36a10ccd
......@@ -39,32 +39,7 @@
<!-- card rating end-->
<!-- card bookmark-->
<div style="float: left; width: 100%; padding-top: 15px; margin-bottom: 25px" [ngbTooltip]="helpForBookmark">
<div style="float: left">
<p class="card-text" jhiTranslate="exercise.details.bookmark"></p>
</div>
<div class="form-check" style="float: right; padding-right: 10px" placement="right">
<input
class="form-check-input"
type="checkbox"
[checked]="this.isOnCurrentWatchlist(this.exercise)"
(change)="handleForCurrentWatchlist()"
value=""
[disabled]="!isLoggedIn()"
id="modal-defaultCheck1"
/>
<label class="form-check-label" for="modal-defaultCheck1"></label>
</div>
<ng-template #helpForBookmark>
<div *ngIf="isLoggedIn() && !this.isOnCurrentWatchlist(this.exercise)">
{{ 'exercise.details.bookmarkLoggedIn' | translate }}
</div>
<div *ngIf="isLoggedIn() && this.isOnCurrentWatchlist(this.exercise)">
{{ 'exercise.details.bookmarkedLoggedIn' | translate }}
</div>
<div *ngIf="!isLoggedIn()">{{ 'exercise.details.bookmarkLogin' | translate }}</div>
</ng-template>
</div>
<jhi-bookmark-toggle [exercise]="exercise"></jhi-bookmark-toggle>
<!-- card bookmark end-->
<!-- Button to Open the Modal -->
......
src/main/webapp/app/exercise/exercise-card/exercise-card.component.ts
+ 2
− 22
View file @ 36a10ccd
......@@ -4,6 +4,7 @@ import { SearchService } from 'app/search/service/search-service';
import { WatchlistManager } from 'app/shared/watchlist/watchlist-manager';
import { ExerciseService } from '../service/exercise.service';
import { AccountService } from 'app/core/auth/account.service';
import { AlertService } from '../../core/util/alert.service';
@Component({
selector: 'jhi-exercise-card',
......@@ -16,12 +17,10 @@ export class ExerciseCardComponent implements AfterViewChecked {
@Output() exerciseSelectionEvent = new EventEmitter<Exercise>();
bookmarked = false;
constructor(
protected searchService: SearchService,
private watchlistManager: WatchlistManager,
private exerciseService: ExerciseService,
private accountService: AccountService
private exerciseService: ExerciseService
) {}
ngAfterViewChecked(): void {
......@@ -34,30 +33,11 @@ export class ExerciseCardComponent implements AfterViewChecked {
}
}
isLoggedIn(): boolean {
return this.accountService.isAuthenticated();
}
selectExercise(): void {
this.bookmarked = this.watchlistManager.isExerciseOnCurrentWatchlist(this.exercise!);
this.exercise = this.exerciseService.populateExerciseWithData(this.exercise!);
this.exerciseSelectionEvent.emit(this.exercise);
}
isOnCurrentWatchlist(e: Exercise): boolean {
return this.watchlistManager.isExerciseOnCurrentWatchlist(e);
}
handleForCurrentWatchlist(): void {
if (this.watchlistManager.isExerciseOnCurrentWatchlist(this.exercise!)) {
this.bookmarked = false;
this.watchlistManager.handleCheckForCurrentWatchlist(this.exercise!, false);
} else {
this.bookmarked = true;
this.watchlistManager.handleCheckForCurrentWatchlist(this.exercise!, true);
}
}
/**
* correct missing image urls
*/
......
src/main/webapp/app/exercise/exercise-details/exercise-details.component.ts
+ 0
− 14
View file @ 36a10ccd
......@@ -221,20 +221,6 @@ export class ExerciseBodyComponent implements OnInit, OnDestroy {
return '';
}
isOnCurrentWatchlist(): boolean {
return this.watchlistManager.isExerciseOnCurrentWatchlist(this.exercise!);
}
handleForCurrentWatchlist(): void {
if (this.isOnCurrentWatchlist()) {
this.exercise!.numberOfWatchlistEntries = this.exercise!.numberOfWatchlistEntries - 1;
this.watchlistManager.handleCheckForCurrentWatchlist(this.exercise!, false);
} else {
this.exercise!.numberOfWatchlistEntries = this.exercise!.numberOfWatchlistEntries + 1;
this.watchlistManager.handleCheckForCurrentWatchlist(this.exercise!, true);
}
}
likeAction(): void {
// to do call like service
this.likesService.likeExercise(this.exercise!.originalResult.exerciseId).subscribe(() =>
......
src/main/webapp/app/exercise/exercise-details/exerciseComponents/exercise-body.component.html
+ 1
− 25
View file @ 36a10ccd
......@@ -120,31 +120,7 @@
<ng-template #helpForWatchlists> {{ 'exercise.details.watchlists' | translate }}</ng-template>
</div>
<!-- modal bookmark-->
<div style="float: left; width: 100%; padding-top: 15px; margin-bottom: 25px" [ngbTooltip]="helpForBookmark">
<div style="float: left">
<p class="card-text" jhiTranslate="exercise.details.bookmark"></p>
</div>
<div class="form-check" style="float: right; padding-right: 10px" placement="right">
<input
class="form-check-input"
type="checkbox"
[checked]="this.isOnCurrentWatchlist()"
(click)="this.handleForCurrentWatchlist()"
value=""
[disabled]="!isAuthenticated()"
id="modal-defaultCheck1"
/>
<label class="form-check-label" for="modal-defaultCheck1"></label>
</div>
<ng-template #helpForBookmark>
<div *ngIf="isLoggedIn() && !this.isOnCurrentWatchlist()">{{ 'exercise.details.bookmarkLoggedIn' | translate }}</div>
<div *ngIf="isLoggedIn() && this.isOnCurrentWatchlist()">{{ 'exercise.details.bookmarkedLoggedIn' | translate }}</div>
<div *ngIf="!isLoggedIn()">{{ 'exercise.details.bookmarkLogin' | translate }}</div>
</ng-template>
</div>
<!-- modal bookmark end-->
<jhi-bookmark-toggle [exercise]="exercise"></jhi-bookmark-toggle>
<div *ngIf="exercise.originalResult.file.parentId" style="float: left; width: 100%; padding-top: 15px; margin-bottom: 25px">
<ng-template #helpToParent data-container="body"> {{ 'exercise.help.toParent' | translate }} </ng-template>
......
src/main/webapp/app/shared/bookmark/bookmark-toggle.component.html 0 → 100644
+ 26
− 0
View file @ 36a10ccd
<div style="float: left; width: 100%; padding-top: 15px; margin-bottom: 25px">
<div style="float: left">
<p class="card-text" jhiTranslate="exercise.details.bookmark"></p>
</div>
<div class="form-check" style="float: right; padding-right: 10px" placement="right" [ngbTooltip]="helpForBookmark">
<input
class="form-check-input"
type="checkbox"
[checked]="this.isOnCurrentWatchlist(this.exercise)"
(change)="handleForCurrentWatchlist()"
value=""
[disabled]="!isLoggedIn() || isLoadingBookmark"
id="modal-defaultCheck1"
/>
<label class="form-check-label" for="modal-defaultCheck1"></label>
</div>
<ng-template #helpForBookmark>
<div *ngIf="isLoggedIn() && !this.isOnCurrentWatchlist(this.exercise)">
{{ 'exercise.details.bookmarkLoggedIn' | translate }}
</div>
<div *ngIf="isLoggedIn() && this.isOnCurrentWatchlist(this.exercise)">
{{ 'exercise.details.bookmarkedLoggedIn' | translate }}
</div>
<div *ngIf="!isLoggedIn()">{{ 'exercise.details.bookmarkLogin' | translate }}</div>
</ng-template>
</div>
src/main/webapp/app/shared/bookmark/bookmark-toggle.component.ts 0 → 100644
+ 52
− 0
View file @ 36a10ccd
import { Component, Input, OnInit } from '@angular/core';
import { Exercise } from '../model/exercise.model';
import { AccountService } from '../../core/auth/account.service';
import { WatchlistManager } from '../watchlist/watchlist-manager';
import { AlertService } from '../../core/util/alert.service';
@Component({
selector: 'jhi-bookmark-toggle',
templateUrl: './bookmark-toggle.component.html',
})
export class BookmarkToggleComponent implements OnInit {
@Input() exercise: Exercise | undefined;
isBookmarked = false;
isLoadingBookmark = false;
constructor(private jhiAlertService: AlertService, private watchlistManager: WatchlistManager, private accountService: AccountService) {}
ngOnInit(): void {
this.isBookmarked = this.watchlistManager.isExerciseOnCurrentWatchlist(this.exercise!);
}
isOnCurrentWatchlist(e: Exercise | undefined): boolean {
return e ? this.watchlistManager.isExerciseOnCurrentWatchlist(e) : false;
}
isLoggedIn(): boolean {
return this.accountService.isAuthenticated();
}
handleForCurrentWatchlist(): void {
if (!this.isLoadingBookmark) {
this.isLoadingBookmark = true;
this.watchlistManager.handleCheckForCurrentWatchlist(this.exercise!)?.subscribe({
next: () => {
this.isBookmarked = !this.isBookmarked;
this.exercise!.numberOfWatchlistEntries = !this.isBookmarked
? this.exercise!.numberOfWatchlistEntries--
: this.exercise!.numberOfWatchlistEntries++;
},
error: err => {
this.jhiAlertService.addAlert({
type: 'danger',
message: err,
});
this.isLoadingBookmark = false;
},
complete: () => (this.isLoadingBookmark = false),
});
}
}
}
src/main/webapp/app/shared/shared.module.ts
+ 3
− 0
View file @ 36a10ccd
......@@ -12,6 +12,7 @@ import { FormatMediumDatePipe } from './date/format-medium-date.pipe';
import { SortByDirective } from './sort/sort-by.directive';
import { SortDirective } from './sort/sort.directive';
import { ItemCountComponent } from './pagination/item-count.component';
import { BookmarkToggleComponent } from './bookmark/bookmark-toggle.component';
@NgModule({
imports: [SharedLibsModule],
......@@ -27,6 +28,7 @@ import { ItemCountComponent } from './pagination/item-count.component';
SortByDirective,
SortDirective,
ItemCountComponent,
BookmarkToggleComponent,
],
exports: [
SharedLibsModule,
......@@ -41,6 +43,7 @@ import { ItemCountComponent } from './pagination/item-count.component';
SortByDirective,
SortDirective,
ItemCountComponent,
BookmarkToggleComponent,
],
})
export class SharedModule {}
src/main/webapp/app/shared/watchlist/watchlist-manager.ts
+ 13
− 10
View file @ 36a10ccd
......@@ -111,9 +111,12 @@ export class WatchlistManager implements OnDestroy {
return this.currentWatchlist;
}
public handleCheckForCurrentWatchlist(e: Exercise, add: Boolean): void {
public handleCheckForCurrentWatchlist(e: Exercise): Observable<HttpResponse<any>> | undefined {
let handling;
if (this.currentWatchlist) {
if (add) {
if (!this.isExerciseOnCurrentWatchlist(e)) {
console.log('adding');
// add
const watchListEntry: IWatchListEntry = {
exerciseId: e.originalResult.exerciseId,
......@@ -121,18 +124,18 @@ export class WatchlistManager implements OnDestroy {
watchlistId: this.currentWatchlist.userWatchList.id,
};
// reload watchlist
this.watchListEntryService.createForCurrentUser(watchListEntry).subscribe((/* wle: HttpResponse<IWatchListEntry> */) => {
if (this.currentWatchlist) this.loadCurrentWatchList(this.currentWatchlist.userWatchList);
});
handling = this.watchListEntryService.createForCurrentUser(watchListEntry);
} else {
// delete
this.watchListEntryService
.deleteForCurrentUser(this.currentWatchlist.userWatchList.id!, e.originalResult.exerciseId)
.subscribe(() => {
if (this.currentWatchlist) this.loadCurrentWatchList(this.currentWatchlist.userWatchList);
});
handling = this.watchListEntryService.deleteForCurrentUser(this.currentWatchlist.userWatchList.id!, e.originalResult.exerciseId);
}
handling.subscribe(() => {
console.log('Running');
if (this.currentWatchlist) this.loadCurrentWatchList(this.currentWatchlist.userWatchList);
});
return handling.pipe();
}
return;
}
public createForCurrentUser(userWatchList: IUserWatchList): Observable<EntityResponseType> {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment