Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding js to use butons for toggle between tables of routes,routes followed and routes version on user detail #43

Merged
merged 7 commits into from
Jan 21, 2024
Merged

adding js to use butons for toggle between tables of routes,routes followed and routes version on user detail #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
96448cd
adding buttons and js to make easier for the user watch the tables
dbistuer Jan 19, 2024
0aa2f6a
Merge remote-tracking branch 'origin/route_crud' into route_crud
dbistuer Jan 19, 2024
f9b0070
Merge branch 'main' into route_crud
dbistuer Jan 19, 2024
5e91a13
on double click swap to un selected error solved
dbistuer Jan 19, 2024
97d81a7
Merge remote-tracking branch 'origin/route_crud' into route_crud
dbistuer Jan 19, 2024
0d2534b
using the followed and version services to get that
dbistuer Jan 19, 2024
0f8ea8b
modifing followed table
dbistuer Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,10 @@
"./node_modules/@swimlane/ngx-datatable/assets/icons.css",
"src/styles.css"
],
"scripts": [],
"scripts": [
"src/assets/jquery-3.7.1.min.js",
"src/assets/bootstrap.js"
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
Expand Down
9 changes: 8 additions & 1 deletion src/app/route-versions/route-versions.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { Injectable } from '@angular/core';
import {HateoasResourceOperation} from "@lagoshny/ngx-hateoas-client";
import {HateoasResourceOperation, ResourceCollection} from "@lagoshny/ngx-hateoas-client";
import {RouteVersion} from "./routeVersion.entity";
import {HttpClient} from "@angular/common/http";
import {User} from "../login-basic/user";
import {Observable} from "rxjs/internal/Observable";
import {RouteFollowed} from "../routeFollowed/routeFollowed";

@Injectable({
providedIn: 'root'
Expand All @@ -11,4 +14,8 @@ export class RouteVersionsService extends HateoasResourceOperation<RouteVersion>
constructor(private http: HttpClient) {
super(RouteVersion);
}

public findByCreatedBy(creator: User): Observable<ResourceCollection<RouteVersion>> {
return this.searchCollection("findByCreatedBy", { params: { creator: creator } })
}
}
130 changes: 92 additions & 38 deletions src/app/user/user-detail/user-detail.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,45 +29,99 @@ <h6 class="card-subtitle text-muted">Role</h6>
</div>
</div>

<div class="row">
<div class="card col-lg-4 col-md-6 col-sm-12 col-xs-12" *ngFor="let route of routes">
<div class="card-block">
<div class="card-header row m-1 text-center" >
<h5>Route</h5>
</div>
<div class="card-body row m-1">
<div class="col-md-6 p-3">
<h6 class="card-subtitle text-muted">CreatedBy</h6>
<p class="card-text">{{route.createdBy?.username}}</p>
</div>
<div class="col-md-6 p-3">
<h6 class="card-subtitle text-muted">Creation date</h6>
<p class="card-text">{{route.creationDate | date: 'dd/MM/yyyy HH:mm:ss'}}</p>
</div>
<div class="col-md-6 p-3">
<h6 class="card-subtitle text-muted">Title</h6>
<p class="card-text">{{route.title}}</p>
</div>
<div class="col-md-6 p-3">
<h6 class="card-subtitle text-muted">Type</h6>
<p class="card-text">{{route.type}}</p>
</div>
<div class="col-lg12 col-md-12 p-3">
<h6 class="card-subtitle text-muted">Description</h6>
<p class="card-text">{{route.description}}</p>
</div>
</div>
<div class="card-footer text-right row">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" *ngIf="currentUserEdit(route.createdBy?.username) && !isRole('admin')" [routerLink]="[route.uri+'/edit']" class="btn col-6 m-1 btn-outline-success">Edit</button>
<button type="button" *ngIf="!isRole('admin')" [routerLink]="[route.uri]" class="btn col-6 m-1 btn-outline-primary">Detail</button>
<button type="button" *ngIf="isRole('admin')" [routerLink]="[route.uri + '/delete']" class="btn col-6 m-1 btn-outline-danger">Delete</button>
</div>
</div>
<div id="accordion" class="row">

<div id="tableButtons" class="btn-group">
<button class="btn btn-outline-secondary" id="btnMyRoutes" data-toggle="collapse" data-target="#collapseMyRoutes" aria-expanded="true" aria-controls="collapseMyRoutes" (click)="swapClass('btnMyRoutes',['btnMyRoutesFollowed','btnMyRoutesVersion'])">
<h2>My routes</h2>
</button>
<button class="btn btn-outline-secondary" id="btnMyRoutesFollowed" data-toggle="collapse" data-target="#collapseMyRoutesFollowed" aria-expanded="true" aria-controls="collapseMyRoutesFollowed" (click)="swapClass('btnMyRoutesFollowed',['btnMyRoutes','btnMyRoutesVersion'])">
<h2>My routes Followed</h2>
</button>
<button class="btn btn-outline-secondary" id="btnMyRoutesVersion" data-toggle="collapse" data-target="#collapseMyRoutesVersion" aria-expanded="true" aria-controls="collapseMyRoutesVersion" (click)="swapClass('btnMyRoutesVersion',['btnMyRoutes','btnMyRoutesFollowed'])">
<h2>My route Versions</h2>
</button>
</div>

<div id="tables">
<div id="collapseMyRoutes" class="collapse" aria-labelledby="headingMyRoutes" data-parent="#accordion">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Type</th>
<th scope="col">Creation date</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let route of routes">
<th scope="row">{{route.title}}</th>
<td>{{route.type}}</td>
<td>{{route.creationDate | date: 'dd/MM/yyyy HH:mm:ss'}}</td>
<td> <div class="btn-group" role="group" aria-label="Basic example">
<button type="button" *ngIf="currentUserEdit(route.createdBy?.username) && !isRole('admin')" [routerLink]="[route.uri+'/edit']" class="btn col-6 m-1 btn-outline-success">Edit</button>
<button type="button" *ngIf="!isRole('admin')" [routerLink]="[route.uri]" class="btn col-6 m-1 btn-outline-primary">Detail</button>
<button type="button" *ngIf="isRole('admin')" [routerLink]="[route.uri + '/delete']" class="btn col-6 m-1 btn-outline-danger">Delete</button>
</div></td>
</tr>
</tbody>
</table>
</div>
<div id="collapseMyRoutesFollowed" class="collapse" aria-labelledby="headingMyRoutesFollowed" data-parent="#accordion">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Duration</th>
<th scope="col">Level up / Level down</th>
<th scope="col">Follows</th>
<th scope="col">Creation date</th>
<th scope="col">Created by</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let followed of routesFollowed">
<th scope="row">{{followed.duration}}</th>
<td>{{followed.levelUp}} / {{followed.levelDown}}</td>
<td>{{followed.follows}}</td>
<td>{{followed.creationDate | date: 'dd/MM/yyyy HH:mm:ss'}}</td>
<td>{{followed.createdBy?.username}}</td>
<td> <div class="btn-group" role="group" aria-label="Basic example">
<button type="button" *ngIf="currentUserEdit(followed.createdBy?.username) && !isRole('admin')" [routerLink]="[followed.uri+'/edit']" class="btn col-6 m-1 btn-outline-success">Edit</button>
<button type="button" *ngIf="!isRole('admin')" [routerLink]="[followed.uri]" class="btn col-6 m-1 btn-outline-primary">Detail</button>
<button type="button" *ngIf="isRole('admin')" [routerLink]="[followed.uri + '/delete']" class="btn col-6 m-1 btn-outline-danger">Delete</button>
</div></td>
</tr>
</tbody>
</table>
</div>
<div id="collapseMyRoutesVersion" class="collapse" aria-labelledby="headingMyRoutesVersion" data-parent="#accordion">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Created By</th>
<th scope="col">Creation date</th>
<th scope="col">Version of</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let version of routesVersions">
<th scope="row">{{version.title}}</th>
<td>{{version.createdBy?.username}}</td>
<td>{{version.creationDate | date: 'dd/MM/yyyy HH:mm:ss'}}</td>
<td>{{version.versionOf}}</td>
<td> <div class="btn-group" role="group" aria-label="Basic example">
<button type="button" *ngIf="currentUserEdit(version.createdBy?.username) && !isRole('admin')" [routerLink]="[version.uri+'/edit']" class="btn col-6 m-1 btn-outline-success">Edit</button>
<button type="button" *ngIf="!isRole('admin')" [routerLink]="[version.uri]" class="btn col-6 m-1 btn-outline-primary">Detail</button>
<button type="button" *ngIf="isRole('admin')" [routerLink]="[version.uri + '/delete']" class="btn col-6 m-1 btn-outline-danger">Delete</button>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<hr class="my-3">
</div>

40 changes: 38 additions & 2 deletions src/app/user/user-detail/user-detail.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import { AuthenticationBasicService } from '../../login-basic/authentication-bas
import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
import {Route} from "../../routes/route";
import {RouteService} from "../../routes/route.service";
import {RouteFollowedService} from "../../routeFollowed/routeFollowed.service";
import {RouteFollowed} from "../../routeFollowed/routeFollowed";
import {RouteVersionsService} from "../../route-versions/route-versions.service";
import {RouteVersion} from "../../route-versions/routeVersion.entity";

@Component({
selector: 'app-user-detail',
Expand All @@ -14,12 +18,16 @@ import {RouteService} from "../../routes/route.service";
export class UserDetailComponent implements OnInit {
public user: User = new User();
public routes: Route[] = [];
public routesFollowed: RouteFollowed[] = [];
public routesVersions: RouteVersion[] = [];


constructor(private route: ActivatedRoute,
private userService: UserService,
private authenticationService: AuthenticationBasicService,
private routesService: RouteService) {
private routesService: RouteService,
private routeFollowedService: RouteFollowedService,
private routeVersionsService: RouteVersionsService) {
}

ngOnInit(): void {
Expand All @@ -29,14 +37,33 @@ export class UserDetailComponent implements OnInit {
this.user = user;
this.routesService.findByCreatedBy(this.user).subscribe((page: PagedResourceCollection<Route>) => {
this.routes = page.resources;
console.log(this.routes);
this.routes.map(routes => {
routes.getRelation('createdBy')
.subscribe((user: User) => {
routes.createdBy = user;
});
});
});
this.routeFollowedService.findByCreatedBy(this.user).subscribe((page: PagedResourceCollection<RouteFollowed>) => {
this.routesFollowed = page.resources;
console.log(page.resources);
this.routesFollowed.map(routesFollowed => {
routesFollowed.getRelation('createdBy')
.subscribe((user: User) => {
routesFollowed.createdBy = user;
});
});
});
this.routeVersionsService.findByCreatedBy(this.user).subscribe((page: PagedResourceCollection<RouteVersion>) => {
this.routesVersions = page.resources;
console.log(this.routesVersions);
this.routesVersions.map(routesVersions => {
routesVersions.getRelation('createdBy')
.subscribe((user: User) => {
routesVersions.createdBy = user;
});
});
});
});
}

Expand All @@ -55,4 +82,13 @@ export class UserDetailComponent implements OnInit {
isRole(role: string): boolean {
return this.authenticationService.isRole(role);
}

swapClass(activateId: string,deactivateIds:string[]): void {
var element = document.getElementById(activateId).classList;
if (element.contains('btn-secondary'))
element.replace('btn-secondary', 'btn-outline-secondary');
else
element.replace('btn-outline-secondary', 'btn-secondary');
deactivateIds.forEach((deactivateId) => { document.getElementById(deactivateId).classList.replace('btn-secondary', 'btn-outline-secondary'); });
}
}
Loading
Loading