Skip to content

Commit

Permalink
Merge pull request #43 from UdL-EPS-SoftArch/route_crud
Browse files Browse the repository at this point in the history 
adding js to use butons for toggle between tables of routes,routes followed and routes version on user detail
  • Loading branch information
@elskater98
elskater98 authored Jan 21, 2024
2 parents e7d391b + 0f8ea8b commit f59d8b0
Show file tree
Hide file tree
Showing 13 changed files with 10,384 additions and 42 deletions.
5 changes: 4 additions & 1 deletion angular.json
View file
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
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
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
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

0 comments on commit f59d8b0

Please sign in to comment.