Merge pull request #23 from UdL-EPS-SoftArch/coordinate-entity

Coordinates all functionalities

angular.json

@@ -36,6 +36,11 @@
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.css",
+              "./node_modules/@swimlane/ngx-datatable/index.css",
+              "./node_modules/@swimlane/ngx-datatable/themes/material.scss",
+              "./node_modules/@swimlane/ngx-datatable/themes/dark.scss",
+              "./node_modules/@swimlane/ngx-datatable/themes/bootstrap.scss",
+              "./node_modules/@swimlane/ngx-datatable/assets/icons.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -58,13 +63,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "1mb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "4kb",
+                  "maximumError": "8kb"
                 }
               ]
             },

src/app/app-routing.module.ts

@@ -31,6 +31,7 @@ const routes: Routes = [
   { path: 'about', component: AboutComponent},
   { path: '404', component: NotFoundComponent},
   { path: '', redirectTo: 'about', pathMatch: 'full'},
+  { path: 'coordinates', loadChildren: () => import('./coordinate/coordinate-routing.module').then(m => m.CoordinateRoutingModule), canActivate: [CheckIsNotAdminGuard]},
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -22,6 +22,7 @@ import {AuthInterceptor} from './login-basic/auth-interceptor';
 import {HttpErrorInterceptor} from './error-handler/http-error-interceptor';
 import {AuthenticationBasicService} from './login-basic/authentication-basic.service';
 import {UserService} from './user/user.service';
+import {CoordinateModule} from "./coordinate/coordinate.module";
 
 import {RouteCreateComponent} from "./routes/route-create/route-create.component";
 import { RouteListComponent } from './routes/route-list/route-list.component';
@@ -47,13 +48,11 @@ import {PermissionsService } from "./login-basic/authentication.guard";
     UserSearchComponent,
     RouteCreateComponent,
     RouteListComponent,
-    RouteDetailComponent,
-    RouteEditComponent,
-    RouteDeleteComponent,
+    RouteFilterComponent,
     RouteSearchComponent,
-    RouteFilterComponent
-
-
+    RouteDeleteComponent,
+    RouteEditComponent,
+    RouteDetailComponent,
   ],
   imports: [
     BrowserModule,
@@ -68,6 +67,7 @@ import {PermissionsService } from "./login-basic/authentication.guard";
     ErrorHandlerModule,
     NgbModule,
     ReactiveFormsModule,
+    CoordinateModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },

src/app/coordinate/coordinate-create/coordinate-create.component.html

@@ -0,0 +1,42 @@
+<form id="user-form" (ngSubmit)="onSubmit()" #form="ngForm">
+  <fieldset>
+
+    <!-- Title input -->
+    <div class="form-group mb-3">
+      <label class="control-label" for="coordinate">Coordinate</label>
+      <input id="coordinate" name="coordinate" type="text" class="form-control" required
+             [(ngModel)]="coordinate.coordinate"
+             pattern="^(-?([0-8]?[0-9](\.\d+)?|89(.[0]+)?)[,])+(-?([1]?[0-7]?[0-9](\.\d+)?|179((.[0]+)?)))$"
+             #coordinate.coordinate="ngModel">
+      <div
+        *ngIf="form.controls['coordinate']?.invalid && (form.controls['coordinate'].dirty || form.controls['coordinate'].touched)"
+        class="alert alert-danger">
+        <div *ngIf="form.controls['coordinate'].errors.required">
+          Coordinate is required.
+        </div>
+        <div *ngIf="form.controls['coordinate'].errors.pattern">
+          Coordinate must be in the format: [-89.99999 <-> 89.99999],[-179.99999 <-> 179.99999]<br/>
+          41.99999,2.11111
+        </div>
+      </div>
+    </div>
+
+    <!-- Description input -->
+    <!--<div class="form-group mb-3">
+      <label class="control-label" for="route-version">Route version</label>
+      <input id="route-version" name="route-version" type="text" class="form-control" [(ngModel)]="coordinate.coordinate"
+             #coordinate="ngModel">
+    </div>-->
+
+    <!-- Buttons -->
+    <div class=" form-group fa-pull-right">
+      <button id="routeBack" type="button" (click)="goBackToPrevPage()"
+              class="btn m-1 btn-outline-primary">Back
+      </button>
+      <button id="submit" type="submit" [disabled]="!form.form.valid"
+              class="btn m-1 btn-success pull-right">Create
+      </button>
+    </div>
+
+  </fieldset>
+</form>

src/app/coordinate/coordinate-create/coordinate-create.component.ts

@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+import {Coordinate} from "../coordinate.entity";
+import {CoordinateService} from "../coordinate.service";
+import {Router} from "@angular/router";
+import {Location} from "@angular/common";
+
+
+@Component({
+  selector: 'app-coordinate-create',
+  templateUrl: './coordinate-create.component.html',
+  styleUrls: ['./coordinate-create.component.scss']
+})
+export class CoordinateCreateComponent {
+  public coordinate: Coordinate = new Coordinate();
+
+  constructor(
+    private coordinateService: CoordinateService,
+    private router: Router,
+    private location: Location
+  ) {
+  }
+
+  onSubmit(): void {
+
+    this.coordinateService.createResource({body: this.coordinate}).subscribe(
+      (coordinate: Coordinate) => this.router.navigate([coordinate.uri]));
+  }
+
+  goBackToPrevPage(): void {
+    this.location.back();
+  }
+
+}

src/app/coordinate/coordinate-delete/coordinate-delete.component.html

@@ -0,0 +1,15 @@
+<div class="panel panel-warning">
+  <div class="panel-heading">
+    <div class="panel-title">Please, confirm deletion:</div>
+  </div>
+  <div class="panel-body">
+    <div class="text-center">
+      <button id="deleteBtn" type="button" (click)="delete()"
+              class="btn btn-outline-danger m-1">Delete
+      </button>
+      <button id="listBtn" type="button" [routerLink]="['routes', coordinate.id]"
+              class="btn btn-outline-primary m-1">Cancel
+      </button>
+    </div>
+  </div>
+</div>

src/app/coordinate/coordinate-delete/coordinate-delete.component.ts

@@ -0,0 +1,33 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {Coordinate} from "../coordinate.entity";
+import {CoordinateService} from "../coordinate.service";
+
+@Component({
+  selector: 'app-coordinate-delete',
+  templateUrl: './coordinate-delete.component.html',
+  styleUrls: ['./coordinate-delete.component.scss']
+})
+export class CoordinateDeleteComponent implements OnInit {
+
+  public coordinate: Coordinate = new Coordinate();
+  private id: string;
+
+  constructor(private activatedRoute: ActivatedRoute,
+              private router: Router,
+              private coordinateService: CoordinateService) {
+  }
+
+  ngOnInit(): void {
+    this.id = this.activatedRoute.snapshot.paramMap.get('id');
+    this.coordinateService.getResource(this.id).subscribe(
+      c => this.coordinate = c);
+  }
+
+  delete(): void {
+    this.coordinateService.deleteResource(this.coordinate).subscribe(
+      () => {
+        this.router.navigate(['coordinates']);
+      });
+  }
+}

src/app/coordinate/coordinate-detail/coordinate-detail.component.html

@@ -0,0 +1,40 @@
+<form id="cooridnates-form" #form="ngForm">
+  <fieldset>
+
+    <!-- Title input -->
+    <div class="form-group mb-3">
+      <label class="control-label" for="coordinate">Coordinate</label>
+      <input id="coordinate" name="coordinate" type="text" class="form-control" required
+             [(ngModel)]="coordinatee.coordinate"
+             pattern="^(-?([0-8]?[0-9](\.\d+)?|89(.[0]+)?)[,])+(-?([1]?[0-7]?[0-9](\.\d+)?|179((.[0]+)?)))$"
+             #coordinate="ngModel" [readOnly]="true">
+    </div>
+
+    <div class="form-group mb-3">
+      <label class="control-label" for="creationDate">Creation date</label>
+      <input id="creationDate" name="creationDate" type="text" class="form-control"
+             [(ngModel)]="coordinatee.creationDate"
+             #creationDate="ngModel" [readOnly]="true">
+    </div>
+
+    <!-- Description input -->
+    <!--<div class="form-group mb-3">
+      <label class="control-label" for="route-version">Route version</label>
+      <input id="route-version" name="route-version" type="text" class="form-control" [(ngModel)]="coordinate.coordinate"
+             #coordinate="ngModel">
+    </div>-->
+
+    <!-- Buttons -->
+
+    <div class=" form-group fa-pull-right">
+      <button id="routeBack" type="button" (click)="goBackToPrevPage()"
+              class="btn  m-1 btn-outline-primary">Back
+      </button>
+      <button type="editButton" [routerLink]="['edit']" class="btn m-1 btn-outline-success">Edit</button>
+      <button type="deleteButton" *ngIf="isRole('admin')" [routerLink]="['delete']" class="btn m-1 btn-outline-danger">
+        Delete
+      </button>
+    </div>
+
+  </fieldset>
+</form>

src/app/coordinate/coordinate-detail/coordinate-detail.component.ts

@@ -0,0 +1,41 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {AuthenticationBasicService} from "../../login-basic/authentication-basic.service";
+import {CoordinateService} from "../coordinate.service";
+import {Coordinate} from "../coordinate.entity";
+import {Location} from "@angular/common";
+
+@Component({
+  selector: 'app-coordinate-detail',
+  templateUrl: './coordinate-detail.component.html',
+  styleUrls: ['./coordinate-detail.component.scss']
+})
+export class CoordinateDetailComponent implements OnInit {
+  public coordinatee = new Coordinate();
+
+  constructor(
+    public router: Router,
+    private activatedRoute: ActivatedRoute,
+    private coordinateService: CoordinateService,
+    private authenticationService: AuthenticationBasicService,
+    private location: Location) {
+  }
+
+  ngOnInit(): void {
+    const id = this.activatedRoute.snapshot.paramMap.get('id');
+    this.coordinateService.getResource(id).subscribe(
+      (c: Coordinate) => {
+        this.coordinatee = c;
+      });
+  }
+
+  isRole(role: string): boolean {
+    // return this.authenticationService.isRole(role);
+    return true;
+  }
+
+  goBackToPrevPage(): void {
+    this.location.back();
+  }
+
+}

src/app/coordinate/coordinate-list/coordinate-list.component.html

@@ -0,0 +1,80 @@
+<div>
+  <div class="row">
+    <div class="col-md-6">
+      <h3>Coordinates List</h3>
+    </div>
+    <div class="col-md-6">
+      <div style="text-align: right;">
+        <button *ngIf="isRole('admin')" type="button" [routerLink]="['/coordinates/create']"
+                class="btn btn-outline-primary">Create
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="form-group mb-3">
+        <label class="control-label" for="type">Search coordinate</label>
+        <input
+          class="form-control"
+          type="text"
+          placeholder="Search coordinate"
+          (keyup)="updateFilter($event)"
+        />
+      </div>
+    </div>
+  </div>
+
+  <ngx-datatable
+    #tableCoordinates
+    class="bootstrap"
+    [columnMode]="ColumnMode.force"
+    [headerHeight]="50"
+    [footerHeight]="50"
+    rowHeight="auto"
+    [rows]="rows"
+    [loadingIndicator]="loading"
+    [externalPaging]="true"
+    [count]="totalCoordinates"
+    [offset]="currentPage"
+    [limit]="pageSize"
+    (page)="setPage($event)"
+  >
+    <!--<ngx-datatable-column name="id">
+      <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
+        <span (click)="sort()">{{ column.name.toString().toUpperCase() }}</span>
+      </ng-template>
+      <ng-template let-value="value" ngx-datatable-cell-template>
+        {{ value }}
+      </ng-template>
+    </ngx-datatable-column>-->
+    <ngx-datatable-column name="coordinate">
+      <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
+        <span (click)="sort()">{{ column.name }}</span>
+      </ng-template>
+      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+        {{ value }}
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column name="actions">
+      <ng-template let-column="actions" ngx-datatable-header-template></ng-template>
+      <ng-template let-row="row" let-value="actions" ngx-datatable-cell-template>
+        <div style="text-align: right;">
+          <button type="button" [routerLink]="[row.uri]"
+                  class="btn btn-outline-primary">View
+          </button>
+          <span class="mx-2"></span>
+          <button type="button" [routerLink]="[row.uri + '/edit']"
+                  class="btn btn-outline-success">Edit
+          </button>
+          <span class="mx-2"></span>
+          <button *ngIf="isRole('admin')" type="button" [routerLink]="[row.uri + '/delete']"
+                  class="btn btn-outline-danger">Delete
+          </button>
+
+        </div>
+
+      </ng-template>
+    </ngx-datatable-column>
+  </ngx-datatable>
+</div>