diff --git a/src/app/components/back-button/back-button.component.html b/src/app/components/back-button/back-button.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..64c049e03ec9b0b68670c52df1dfe65aa8dbe544
--- /dev/null
+++ b/src/app/components/back-button/back-button.component.html
@@ -0,0 +1,8 @@
+<div class="back-button">
+ <a [routerLink]="route" [title]="title">
+ <span class="icon is-medium">
+ <i class="fas fa-arrow-left"></i>
+ </span>
+ Retour
+ </a>
+</div>
diff --git a/src/app/components/back-button/back-button.component.scss b/src/app/components/back-button/back-button.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e477cc426f1ad8b385c0b434647395db2399529a
--- /dev/null
+++ b/src/app/components/back-button/back-button.component.scss
@@ -0,0 +1,14 @@
+.back-button {
+ a {
+ color: unset; // Remove default link color
+ display: flex;
+ align-items: center;
+ }
+ padding: 1rem 1.5rem;
+ a:hover {
+ color: #d5232a;
+ span, a {
+ color: #d5232a;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/back-button/back-button.component.ts b/src/app/components/back-button/back-button.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..33f58095d95ea1e96ecf536c83eef56992a6e48e
--- /dev/null
+++ b/src/app/components/back-button/back-button.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-back-button',
+ templateUrl: './back-button.component.html',
+ styleUrls: ['./back-button.component.scss']
+})
+export class BackButtonComponent implements OnInit {
+
+ @Input() route: string;
+ @Input() title: string;
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/components/crud-buttons/crud-buttons.component.html b/src/app/components/crud-buttons/crud-buttons.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..d81c63b54d8e4ffbbc9f902e0111589b4ee96257
--- /dev/null
+++ b/src/app/components/crud-buttons/crud-buttons.component.html
@@ -0,0 +1,11 @@
+<div class="crud-buttons-container">
+ <span class="icon">
+ <a [routerLink]="[id]"><i class="fas fa-eye"></i></a>
+ </span>
+ <span class="icon">
+ <a [routerLink]="[id, 'edit']"> <i class="fas fa-edit"></i></a>
+ </span>
+ <span class="icon has-text-danger" (click)="onDelete()">
+ <a> <i class="fas fa-trash"></i></a>
+ </span>
+</div>
diff --git a/src/app/components/crud-buttons/crud-buttons.component.scss b/src/app/components/crud-buttons/crud-buttons.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..327d4a70a9de5587a9bca70f677c69b904e890f1
--- /dev/null
+++ b/src/app/components/crud-buttons/crud-buttons.component.scss
@@ -0,0 +1,23 @@
+.crud-buttons-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.icon {
+ cursor: pointer;
+
+ i {
+ color: #4a4a4a;
+ }
+
+ &:hover {
+ .fa-eye, .fa-edit {
+ color: blue;
+ }
+
+ .fa-trash {
+ color: #d5232a;
+ }
+ }
+}
diff --git a/src/app/components/crud-buttons/crud-buttons.component.ts b/src/app/components/crud-buttons/crud-buttons.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0a3bac7b3ca2f41be5acedecca3c21c68f6ff371
--- /dev/null
+++ b/src/app/components/crud-buttons/crud-buttons.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { identifierModuleUrl } from '@angular/compiler';
+
+@Component({
+ selector: 'app-crud-buttons',
+ templateUrl: './crud-buttons.component.html',
+ styleUrls: ['./crud-buttons.component.scss']
+})
+export class CrudButtonsComponent implements OnInit {
+
+ @Output() delete = new EventEmitter<string>();
+ @Input() id;
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+ onDelete() {
+ this.delete.emit(this.id);
+ }
+
+}
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index c1207017b83f5bfc5cfb9855c460632a50d73a78..82b8a02c961a116605d337102075886e519301ef 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -7,6 +7,8 @@ import { ResourceDetailComponent } from './resources/detail/resource-detail.comp
import { ResourceFormComponent } from './resources/edit/resource-form.component';
import { ResourcesComponent } from './resources/list/resources.component';
import { WelcomeComponent } from './welcome/welcome.component';
+import { BackButtonComponent } from './back-button/back-button.component';
+import { CrudButtonsComponent } from './crud-buttons/crud-buttons.component';
export {
MenuComponent,
@@ -18,6 +20,8 @@ export {
ResourceFormComponent,
ResourcesComponent,
WelcomeComponent,
+ BackButtonComponent,
+ CrudButtonsComponent,
};
// tslint:disable-next-line:variable-name
@@ -31,4 +35,6 @@ export const AppComponents = [
ResourceFormComponent,
ResourcesComponent,
WelcomeComponent,
+ BackButtonComponent,
+ CrudButtonsComponent,
];
diff --git a/src/app/components/menu/menu.component.scss b/src/app/components/menu/menu.component.scss
index c00f4bee1b2f45e079bb923d6cf96ea308b37dcd..a3172b6b6b674406c5a483a2355a059682eae417 100644
--- a/src/app/components/menu/menu.component.scss
+++ b/src/app/components/menu/menu.component.scss
@@ -40,6 +40,8 @@
li a {
border-left: 3px solid #333745;
+ padding-left: calc(0.75em - 3px) ;
+
&.active-link {
border-color:#d5232a;
}
diff --git a/src/app/components/organizations/detail/organization-detail.component.html b/src/app/components/organizations/detail/organization-detail.component.html
index cd7687506be21813e2a2d2a9c411fde647abc0d6..75135cd0dd854c228f45256ec5028023803795e1 100644
--- a/src/app/components/organizations/detail/organization-detail.component.html
+++ b/src/app/components/organizations/detail/organization-detail.component.html
@@ -1,14 +1,6 @@
<ng-container *ngIf="organization">
- <div class="back-button">
- <a routerLink="/organizations" title="Retourner à la liste des organisations">
- <span class="icon is-medium">
- <i class="fas fa-arrow-left fa-lg"></i>
- </span>
- Retour
- </a>
- </div>
-
+ <app-back-button [route]="'/organizations'" [title]="'Retourner à la liste des organisations'"></app-back-button>
<section class="section">
<div class="columns is-centered">
@@ -28,7 +20,11 @@
<div class="content">
<div>
- {{organization.description}}
+ <p>{{organization.description}}</p>
+ </div>
+ <br>
+ <div>
+ <p><span class="has-text-weight-bold">Id:</span> {{ organization.id}}</p>
</div>
<br>
<div>
@@ -39,10 +35,10 @@
<div>
<p class="has-text-weight-bold">Liens</p>
<p *ngFor="let link of organization.links">
- <a href="{{ link.url }}" target="_blank">{{link.url}}</a>
- </p>
+ <a href="{{ link.url }}" target="_blank">{{link.url}}</a>
+ </p>
</div>
-
+
</div>
</div>
</div>
diff --git a/src/app/components/organizations/detail/organization-detail.component.scss b/src/app/components/organizations/detail/organization-detail.component.scss
index f7cc6fc699db9733d186dc7455c50eb990a195b9..dff286c3a01ee11891ef45a0378e9fa7e35f4172 100644
--- a/src/app/components/organizations/detail/organization-detail.component.scss
+++ b/src/app/components/organizations/detail/organization-detail.component.scss
@@ -1,17 +1,3 @@
-
-.back-button {
- a {
- color: unset; // Remove default link color
- }
- padding: 1rem 1.5rem;
- a:hover {
- color: #d5232a;
- span, a {
- color: #d5232a;
- }
- }
-}
-
figure {
text-align: center;
}
diff --git a/src/app/components/organizations/edit/organization-form.component.html b/src/app/components/organizations/edit/organization-form.component.html
index a3639683bfa080bf2df4a0109d57c7fb0fd917b5..6eebb451d147460c0d3a59c5d5dd77d835cbe82f 100644
--- a/src/app/components/organizations/edit/organization-form.component.html
+++ b/src/app/components/organizations/edit/organization-form.component.html
@@ -1,13 +1,6 @@
<ng-container *ngIf="organization">
- <div class="back-button">
- <a routerLink="/organizations" title="Retourner à la liste des organisations">
- <span class="icon is-medium">
- <i class="fas fa-arrow-left fa-lg"></i>
- </span>
- Retour
- </a>
- </div>
+ <app-back-button [route]="'/organizations'" [title]="'Retourner à la liste des organisations'"></app-back-button>
<h1>{{ title }}</h1>
@@ -51,7 +44,8 @@
<div class="field">
<label class="label" for="elasticSearchName">Nom ElasticSearch de l'organisation</label>
<div class="control">
- <input class="input" type="text" [value]="organization.elasticSearchName" formControlName="elasticSearchName" id="elasticSearchName">
+ <input class="input" type="text" [value]="organization.elasticSearchName" formControlName="elasticSearchName"
+ id="elasticSearchName">
</div>
</div>
@@ -69,13 +63,13 @@
<div formArrayName="links">
<div *ngFor="let link of formLinks.controls; let i = index;" [formGroupName]="i"
- class="columns is-multiline field">
+ class="columns is-multiline field">
<div class="column is-11">
<div class="control">
- <input class="input" type="text" formControlName="url" required>
+ <input class="input" type="text" formControlName="url" required>
</div>
- <div *ngIf="link['controls'].url.invalid && (link['controls'].url.dirty || link['controls'].url.touched)"
- class="alert alert-danger">
+ <div *ngIf="link['controls'].url.invalid && (link['controls'].url.dirty || link['controls'].url.touched)"
+ class="alert alert-danger">
<p *ngIf="link.hasError('required', 'url')" class="help is-danger">
L'URL du lien est obligatoire.
</p>
@@ -90,13 +84,10 @@
</div>
</div>
</div>
-
- <div class="field">
- <div class="control">
- <button class="button validate" [disabled]="formInvalid == true">Valider</button>
- </div>
+ <br>
+ <div class="has-text-right">
+ <button class="button button-gl" type="submit" [disabled]="formInvalid == true">Valider</button>
</div>
-
</div>
</form>
diff --git a/src/app/components/organizations/edit/organization-form.component.scss b/src/app/components/organizations/edit/organization-form.component.scss
index 8522a9ab88fb48e0ae39d622940fa851978291f8..5bea26fe55b4ab7bb07da39d6140df0c988864d4 100644
--- a/src/app/components/organizations/edit/organization-form.component.scss
+++ b/src/app/components/organizations/edit/organization-form.component.scss
@@ -16,22 +16,4 @@ h1 {
color: #d5232a;
}
}
-}
-
-.validate {
- background-color: #168f48;
- color: white;
-}
-
-.back-button {
- a {
- color: unset; // Remove default link color
- }
- padding: 1rem 1.5rem;
- a:hover {
- color: #d5232a;
- span, a {
- color: #d5232a;
- }
- }
-}
+}
\ No newline at end of file
diff --git a/src/app/components/organizations/list/organizations.component.html b/src/app/components/organizations/list/organizations.component.html
index e0c22f35203ad5145dfa7dd76d09f0cad0fbde41..cd06cbfebf61d7545861c6e923a256096f5ff6e3 100644
--- a/src/app/components/organizations/list/organizations.component.html
+++ b/src/app/components/organizations/list/organizations.component.html
@@ -6,21 +6,13 @@
<h2>{{ totalElement }} organisations trouvées</h2>
</div>
</div>
- <div class="add-item">
- <a class="button is-link" [routerLink]="['new']">
+ <div class="add-item has-text-right">
+ <a class="button button-gl" [routerLink]="['new']">
Ajouter
</a>
</div>
<div class="table">
<div class="header columns is-marginless">
- <div class="column is-1 has-text-centered">
- <span (click)="sortBy('id')" class="is-sortable">
- <span class="column-title" [ngClass]="{'active': sortOptions.value === 'id'}">Id</span>
- <span *ngIf="sortOptions.value === 'id'" class="has-text-danger">
- <i class="fas sort-order-icon" [ngClass]="{'fa-arrow-up': sortOptions.order === 'asc', 'fa-arrow-down': sortOptions.order === 'desc'}"></i>
- </span>
- </span>
- </div>
<div class="column is-2 has-text-centered">
<span (click)="sortBy('name')" class="is-sortable">
<span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Name</span>
@@ -35,7 +27,7 @@
<div class="column is-4 has-text-centered">
<span class="column-title">Description</span>
</div>
- <div class="column is-2 has-text-centered">
+ <div class="column is-3 has-text-centered">
<span class="column-title">Liens</span>
</div>
<div class="column is-1 has-text-centered">
@@ -46,9 +38,6 @@
<div class="data columns is-multiline is-vcentered is-marginless"
*ngFor="let organization of organizations; let i=index; let odd=odd; let even=even;"
[ngClass]="{ odd: odd, even: even }">
- <div class="column is-1 has-text-centered">
- {{ organization.id }}
- </div>
<div class="column is-2 has-text-centered">
{{ organization.name}}
</div>
@@ -58,24 +47,13 @@
<div class="column is-4 has-text-justified">
{{ organization.description | slice:0:200}}...
</div>
- <div class="column is-2 has-text-centered">
+ <div class="column is-3 has-text-centered">
<p *ngFor="let link of organization.links">
<a href="{{ link.url }}" target="_blank">{{link.url}}</a>
</p>
</div>
<div class="column is-1 has-text-centered actions">
- <div class="columns is-marginless is-centered">
- <span class="icon column is-narrow">
- <a [routerLink]="[organization.id]"><i class="fas fa-eye"></i></a>
- </span>
- <span class="icon column is-narrow">
- <a [routerLink]="[organization.id, 'edit']"> <i class="fas fa-edit"></i></a>
- </span>
- <span class="icon has-text-danger column is-narrow" (click)="displayDeletePopup(organization.id)">
- <a> <i class="fas fa-trash"></i></a>
- </span>
- </div>
-
+ <app-crud-buttons [id]="organization.id" (delete)="displayDeletePopup($event)"></app-crud-buttons>
</div>
</div>
diff --git a/src/app/components/organizations/list/organizations.component.scss b/src/app/components/organizations/list/organizations.component.scss
index 5b91182b06c8b66f96e30646c55767d96bc0a805..087d2f4242ed39d8f3505d06012bf823f015572e 100644
--- a/src/app/components/organizations/list/organizations.component.scss
+++ b/src/app/components/organizations/list/organizations.component.scss
@@ -35,40 +35,6 @@ img {
border-bottom: 1px solid lightgray
}
-.actions .columns {
- border: none;
-}
-
-.actions {
- vertical-align: middle;
-
- .icon.column {
- padding: 0;
- }
-
- span {
- display: inline-block;
- }
-}
-
-.icon {
- height: unset;
- cursor: pointer;
- i {
- color: #4a4a4a;
- }
- &:hover {
- .fa-eye, .fa-edit {
- color: blue;
- }
-
- .fa-trash {
- color: #d5232a;
- }
-
- }
-}
-
i {
&.title-icon {
diff --git a/src/app/components/organizations/list/organizations.component.ts b/src/app/components/organizations/list/organizations.component.ts
index 17d063f7da2902ff8f6a68cef367260d148850ca..1446082e05c3a420538d0087156f94c5bb0421bb 100644
--- a/src/app/components/organizations/list/organizations.component.ts
+++ b/src/app/components/organizations/list/organizations.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { Organization, OrganizationRO } from 'src/app/models/organization.model';
import { OrganizationService } from 'src/app/services/organization.service';
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
import { PaginatorOptions } from 'src/app/models/paginator-options.model';
@Component({
@@ -56,7 +56,6 @@ export class OrganizationsComponent implements OnInit {
private search() {
this.organizationsService.getOrganizations()
.subscribe((items: OrganizationRO) => {
- console.log(items);
this.organizations = items.organizations;
this.totalElement = items.totalCount;
diff --git a/src/app/components/resources/detail/resource-detail.component.html b/src/app/components/resources/detail/resource-detail.component.html
index fac0e690cee7db63941a75eb4d472c7aa9a9cbf2..0c2b050155f08a112305ee8f7dd6b1c731a00926 100644
--- a/src/app/components/resources/detail/resource-detail.component.html
+++ b/src/app/components/resources/detail/resource-detail.component.html
@@ -1,14 +1,6 @@
<ng-container *ngIf="resource">
- <div class="back-button">
- <a routerLink="/resources" title="Retourner à la liste des organisations">
- <span class="icon is-medium">
- <i class="fas fa-arrow-left fa-lg"></i>
- </span>
- Retour
- </a>
- </div>
-
+ <app-back-button [route]="'/resources'" [title]="'Retourner à la liste des ressources'"></app-back-button>
<section class="section">
<div class="columns is-centered">
@@ -23,42 +15,73 @@
<div class="content">
<p>
- <span class="has-text-weight-bold">Type: </span>
- <span>{{resource.type}}</span>
+ <span class="has-text-weight-bold">Id: </span>
+ <span>{{resource.id}}</span>
+ </p>
+ <p>
+ <span class="has-text-weight-bold">Acronyme: </span>
+ <span>{{resource.acronym}}</span>
+ </p>
+ <p>
+ <span class="has-text-weight-bold">Type: </span>
+ <span>{{resource.type}}</span>
</p>
- <p *ngIf="resource.description">
- <span class="has-text-weight-bold">Description</span> <br>
- <span>{{resource.description}}</span>
+ <div *ngIf="resource.description">
+ <p class="has-text-weight-bold">Description:</p>
+ <p>{{resource.description}}</p>
+ </div>
+ <br>
+
+ <p>
+ <span class="has-text-weight-bold">Requêtable:</span>
+ <span class="icon has-text-success" *ngIf="resource.isQueryable">
+ <i class="far fa-check-circle"></i>
+ </span>
+ <span class="icon has-text-danger" *ngIf="!resource.isQueryable">
+ <i class="far fa-times-circle"></i>
+ </span>
</p>
<p>
- <span class="has-text-weight-bold">Requêtable</span>
- <span class="icon has-text-success" *ngIf="resource.queryable">
- <i class="far fa-check-circle"></i>
- </span>
- <span class="icon has-text-danger" *ngIf="!resource.queryable">
- <i class="far fa-times-circle"></i>
- </span>
+ <span class="has-text-weight-bold">Téléchargeable:</span>
+ <span class="icon has-text-success" *ngIf="resource.isDownloadable">
+ <i class="far fa-check-circle"></i>
+ </span>
+ <span class="icon has-text-danger" *ngIf="!resource.isDownloadable">
+ <i class="far fa-times-circle"></i>
+ </span>
</p>
<p>
- <span class="has-text-weight-bold">Téléchargeable</span>
- <span class="icon has-text-success" *ngIf="resource.downloadable">
- <i class="far fa-check-circle"></i>
- </span>
- <span class="icon has-text-danger" *ngIf="!resource.downloadable">
- <i class="far fa-times-circle"></i>
- </span>
+ <span class="has-text-weight-bold">Standardisé:</span>
+ <span class="icon has-text-success" *ngIf="resource.isStandard">
+ <i class="far fa-check-circle"></i>
+ </span>
+ <span class="icon has-text-danger" *ngIf="!resource.isStandard">
+ <i class="far fa-times-circle"></i>
+ </span>
</p>
- <div>
+ <div *ngIf="resource.description">
+ <p class="has-text-weight-bold">Parametres URL:</p>
+ <p>{{resource.parametersUrl}}</p>
+ </div>
+ <br>
+
+ <div *ngIf="resource.description">
+ <p class="has-text-weight-bold">Message d'alerte:</p>
+ <p>{{resource.messageWarning}}</p>
+ </div>
+ <br>
+
+ <!-- <div>
<span class="has-text-weight-bold">Formats de sortie: </span>
<span *ngFor="let format of resource.outputFormats; let isLast=last">
- {{ format }}{{ isLast ? '' : ',' }}
+ {{ format }}{{ isLast ? '' : ',' }}
</span>
- </div>
-
+ </div> -->
+
</div>
</div>
</div>
diff --git a/src/app/components/resources/detail/resource-detail.component.scss b/src/app/components/resources/detail/resource-detail.component.scss
index 9198904fe9916e79864faf708db4350f7d80bae6..163f99f474dc5696a1670be5273eef97a2efbd39 100644
--- a/src/app/components/resources/detail/resource-detail.component.scss
+++ b/src/app/components/resources/detail/resource-detail.component.scss
@@ -1,17 +1,3 @@
-
-.back-button {
- a {
- color: unset; // Remove default link color
- }
- padding: 1rem 1.5rem;
- a:hover {
- color: #d5232a;
- span, a {
- color: #d5232a;
- }
- }
-}
-
.card-header-title {
justify-content: center;
}
\ No newline at end of file
diff --git a/src/app/components/resources/edit/resource-form.component.html b/src/app/components/resources/edit/resource-form.component.html
index 984aa5d6b31947a1e6594b3e3edf0b18cbbbe54a..7ecde6470aa1a968ef2be4992fb01051c340d2fd 100644
--- a/src/app/components/resources/edit/resource-form.component.html
+++ b/src/app/components/resources/edit/resource-form.component.html
@@ -1,13 +1,6 @@
<ng-container *ngIf="resource">
- <div class="back-button">
- <a routerLink="/resources" title="Retourner à la liste des organisations">
- <span class="icon is-medium">
- <i class="fas fa-arrow-left fa-lg"></i>
- </span>
- Retour
- </a>
- </div>
+ <app-back-button [route]="'/resources'" [title]="'Retourner à la liste des ressources'"></app-back-button>
<h1>{{ title }}</h1>
@@ -18,7 +11,7 @@
<div class="field">
<label class="label required" for="name">Nom</label>
<div class="control">
- <input class="input" type="text" formControlName="name" id="name" required>
+ <input class="input" type="text" formControlName="name" id="name">
</div>
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<p *ngIf="name.errors['required']" class="help is-danger">
@@ -27,10 +20,17 @@
</div>
</div>
+ <div class="field">
+ <label class="label" for="acronym">Acronyme</label>
+ <div class="control">
+ <input class="input" type="text" formControlName="acronym" id="acronym">
+ </div>
+ </div>
+
<div class="field">
<label class="label required" for="type">Type</label>
<div class="control">
- <input class="input" type="text" formControlName="type" id="type" required>
+ <input class="input" type="text" formControlName="type" id="type">
</div>
<div *ngIf="type.invalid && (type.dirty || type.touched)" class="alert alert-danger">
<p *ngIf="type.errors['required']" class="help is-danger">
@@ -40,28 +40,42 @@
</div>
<div class="field">
- <label class="label required" for="queryable">Requêtable</label>
+ <label class="label required" for="isQueryable">Requêtable</label>
+ <div class="control">
+ <label class="radio">
+ <input type="radio" formControlName="isQueryable" [value]="1">
+ Oui
+ </label>
+ <label class="radio">
+ <input type="radio" formControlName="isQueryable" [value]="0">
+ Non
+ </label>
+ </div>
+ </div>
+
+ <div class="field">
+ <label class="label required" for="isDownloadable">Téléchargeable</label>
<div class="control">
<label class="radio">
- <input type="radio" formControlName="queryable" [value]="1">
+ <input type="radio" formControlName="isDownloadable" [value]="1">
Oui
</label>
<label class="radio">
- <input type="radio" formControlName="queryable" [value]="0">
+ <input type="radio" formControlName="isDownloadable" [value]="0">
Non
</label>
</div>
</div>
<div class="field">
- <label class="label required" for="downloadable">Téléchargeable</label>
+ <label class="label required" for="isStandard">Standardisé</label>
<div class="control">
<label class="radio">
- <input type="radio" formControlName="downloadable" [value]="1">
+ <input type="radio" formControlName="isStandard" [value]="1">
Oui
</label>
<label class="radio">
- <input type="radio" formControlName="downloadable" [value]="0">
+ <input type="radio" formControlName="isStandard" [value]="0">
Non
</label>
</div>
@@ -71,26 +85,37 @@
<label class="label" for="description">Description</label>
<div class="control">
<textarea class="textarea" formControlName="description" id="description">
- {{ resource.description }}
- </textarea>
+ </textarea>
</div>
</div>
<div class="field">
- <label class="label" for="outputFormats">Formats de sortie (Séparer chaque format par une virgule)</label>
+ <label class="label required" for="parametersUrl">Paramètres URL</label>
<div class="control">
- <input class="input" type="text" formControlName="outputFormats" id="outputFormats">
+ <input class="input" type="text" formControlName="parametersUrl" id="parametersUrl">
</div>
-
</div>
+
<div class="field">
+ <label class="label required" for="messageWarning">Message d'alerte</label>
<div class="control">
- <button class="button validate" [disabled]="formInvalid == true">Valider</button>
+ <input class="input" type="text" formControlName="messageWarning" id="messageWarning">
</div>
</div>
- </div>
- </form>
+ <!-- <div class="field">
+ <label class="label" for="outputFormats">Formats de sortie (Séparer chaque format par une virgule)</label>
+ <div class="control">
+ <input class="input" type="text" formControlName="outputFormats" id="outputFormats">
+ </div>
+ </div> -->
+ <br>
+ <div class="has-text-right">
+ <button class="button button-gl" type="submit" [disabled]="formInvalid == true">Valider</button>
+ </div>
+
+ </div>
+ </form>
</ng-container>
diff --git a/src/app/components/resources/edit/resource-form.component.scss b/src/app/components/resources/edit/resource-form.component.scss
index 8522a9ab88fb48e0ae39d622940fa851978291f8..c540d1b2697b6ce03cfbbdb19454eb365d6e2a4a 100644
--- a/src/app/components/resources/edit/resource-form.component.scss
+++ b/src/app/components/resources/edit/resource-form.component.scss
@@ -22,16 +22,3 @@ h1 {
background-color: #168f48;
color: white;
}
-
-.back-button {
- a {
- color: unset; // Remove default link color
- }
- padding: 1rem 1.5rem;
- a:hover {
- color: #d5232a;
- span, a {
- color: #d5232a;
- }
- }
-}
diff --git a/src/app/components/resources/edit/resource-form.component.ts b/src/app/components/resources/edit/resource-form.component.ts
index 4b77a4d0c857e8d33a260d0b5cdaa199e8839346..0f118dd0a45c970fa997816d66c4724af676030e 100644
--- a/src/app/components/resources/edit/resource-form.component.ts
+++ b/src/app/components/resources/edit/resource-form.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { Resource } from 'src/app/models/resource.model';
import { ResourceService } from 'src/app/services/resource.service';
-import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { filter, switchMap } from 'rxjs/operators';
@Component({
@@ -12,7 +12,7 @@ import { filter, switchMap } from 'rxjs/operators';
})
export class ResourceFormComponent implements OnInit {
- resource: Resource;
+ resource: Resource = new Resource();
form: FormGroup;
title: string;
@@ -32,49 +32,38 @@ export class ResourceFormComponent implements OnInit {
filter((paramMap: ParamMap) => (paramMap.get('id') !== null)),
switchMap((paramMap: ParamMap) => this.resourceService.findById(paramMap.get('id'))))
.subscribe((resource: Resource) => {
-
this.resource = resource;
- this.form = this._fb.group(
- {
- id: [this.resource.id],
- name: [resource.name, Validators.required],
- type: [resource.type, Validators.required],
- queryable: [resource.queryable, Validators.required],
- downloadable: [this.resource.downloadable, Validators.required],
- description: [resource.description],
- outputFormats: [this.resource.outputFormats.join(',')],
- });
+ this.initForm();
});
}
initForm() {
- this.resource = new Resource();
- const arr = new FormArray([]);
this.form = this._fb.group(
{
id: [this.resource.id],
name: [this.resource.name, Validators.required],
+ acronym: [this.resource.acronym],
type: [this.resource.type, Validators.required],
- queryable: [this.resource.queryable, Validators.required],
- downloadable: [this.resource.downloadable, Validators.required],
+ isQueryable: [this.resource.isQueryable, Validators.required],
+ isDownloadable: [this.resource.isDownloadable, Validators.required],
+ isStandard: [this.resource.isStandard, Validators.required],
description: [this.resource.description],
- outputFormats: [this.resource.outputFormats.join(',')],
+ parametersUrl: [this.resource.parametersUrl],
+ messageWarning: [this.resource.messageWarning],
});
}
onSubmit() {
if (!this.formInvalid) {
this.resource = new Resource(this.form.value);
- this.resource.outputFormats = this.form.value.outputFormats.split(',');
+ // this.resource.outputFormats = this.form.value.outputFormats.split(',');
this.resourceService.replaceOrCreate(this.resource)
.subscribe(
(resourceCreated) => {
- this.router.navigate(['/resources', resourceCreated.id])
- .then(() => {
- });
+ this.router.navigate(['/resources', resourceCreated.id]);
},
(err) => {
alert(err.message);
@@ -83,6 +72,14 @@ export class ResourceFormComponent implements OnInit {
}
}
+ arrayToString(array: string[]) {
+ if (array && array.length) {
+ return array.join(',');
+ } else {
+ return '';
+ }
+ }
+
// Getters for each property
get name() {
return this.form.controls['name'];
@@ -92,17 +89,17 @@ export class ResourceFormComponent implements OnInit {
return this.form.controls['type'];
}
- get queryable() {
- return this.form.controls['queryable'];
+ get isQueryable() {
+ return this.form.controls['isQueryable'];
}
get description() {
return this.form.controls['description'];
}
- get outputFormats() {
- return this.form.controls['outputFormats'];
- }
+ // get outputFormats() {
+ // return this.form.controls['outputFormats'];
+ // }
get formInvalid() {
return this.form.invalid;
diff --git a/src/app/components/resources/list/resources.component.html b/src/app/components/resources/list/resources.component.html
index 9606966c5198e8fe8198338de2a52f5ebf0d2bd7..534c762155075494584a8cee050d2585918db5bc 100644
--- a/src/app/components/resources/list/resources.component.html
+++ b/src/app/components/resources/list/resources.component.html
@@ -6,108 +6,98 @@
<h2>{{ totalElement }} ressources trouvées</h2>
</div>
</div>
- <div class="add-item">
- <a class="button is-link" [routerLink]="['new']">
+ <div class="add-item has-text-right">
+ <a class="button button-gl" [routerLink]="['new']">
Ajouter
</a>
</div>
<div class="table">
- <div class="header columns is-marginless">
- <div class="column is-1 has-text-centered">
- <span (click)="sortBy('id')" class="is-sortable">
- <span class="column-title" [ngClass]="{'active': sortOptions.value === 'id'}">Id</span>
- <span *ngIf="sortOptions.value === 'id'" class="has-text-danger">
- <i class="fas sort-order-icon" [ngClass]="{'fa-arrow-up': sortOptions.order === 'asc', 'fa-arrow-down': sortOptions.order === 'desc'}"></i>
- </span>
- </span>
- </div>
- <div class="column is-2 has-text-centered">
- <span (click)="sortBy('name')" class="is-sortable">
- <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Name</span>
- <span *ngIf="sortOptions.value === 'name'" class="has-text-danger">
- <i class="fas sort-order-icon" [ngClass]="{'fa-arrow-up': sortOptions.order === 'asc', 'fa-arrow-down': sortOptions.order === 'desc'}"></i>
- </span>
- </span>
- </div>
- <div class="column is-1 has-text-centered">
- <span class="column-title">Type</span>
- </div>
- <div class="column is-3 has-text-centered">
- <span class="column-title">Description</span>
- </div>
- <div class="column is-1 has-text-centered">
- <span class="column-title">Requêtable</span>
- </div>
- <div class="column is-1 has-text-centered">
- <span class="column-title">Téléchargeable</span>
- </div>
- <div class="column is-2 has-text-centered">
- <span class="column-title">Formats</span>
- </div>
- <div class="column is-1 has-text-centered">
- <span class="column-title">Actions</span>
- </div>
+ <div class="header columns is-marginless">
+ <div class="column is-2 has-text-centered">
+ <span (click)="sortBy('name')" class="is-sortable">
+ <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Name</span>
+ <span *ngIf="sortOptions.value === 'name'" class="has-text-danger">
+ <i class="fas sort-order-icon"
+ [ngClass]="{'fa-arrow-up': sortOptions.order === 'asc', 'fa-arrow-down': sortOptions.order === 'desc'}"></i>
+ </span>
+ </span>
+ </div>
+ <div class="column is-1 has-text-centered">
+ <span class="column-title">Acronyme</span>
+ </div>
+ <div class="column is-1 has-text-centered">
+ <span class="column-title">Type</span>
+ </div>
+ <div class="column is-4 has-text-centered">
+ <span class="column-title">Description</span>
+ </div>
+ <div class="column is-1 has-text-centered">
+ <span class="column-title">Requêtable</span>
+ </div>
+ <div class="column is-1 has-text-centered">
+ <span class="column-title">Téléchargeable</span>
+ </div>
+ <div class="column is-1 has-text-centered">
+ <span class="column-title">Standard</span>
+ </div>
+ <div class="column is-1 has-text-centered">
+ <span class="column-title">Actions</span>
+ </div>
+ </div>
+ <div class="data-list">
+ <div class="data columns is-multiline is-vcentered is-marginless"
+ *ngFor="let resource of resources; let i=index; let odd=odd; let even=even;"
+ [ngClass]="{ odd: odd, even: even }">
+ <div class="column is-2 has-text-centered">
+ {{ resource.name}}
+ </div>
+ <div class="column is-1 has-text-centered">
+ {{ resource.acronym}}
+ </div>
+ <div class="column is-1 has-text-centered">
+ {{ resource.type}}
+ </div>
+ <div class="column is-4 has-text-centered">
+ {{ resource.description | slice:0:300}}
</div>
- <div class="data-list">
- <div class="data columns is-multiline is-vcentered is-marginless"
- *ngFor="let resource of resources; let i=index; let odd=odd; let even=even;"
- [ngClass]="{ odd: odd, even: even }">
- <div class="column is-1 has-text-centered">
- {{ resource.id }}
- </div>
- <div class="column is-2 has-text-centered">
- {{ resource.name}}
- </div>
- <div class="column is-1 has-text-centered">
- {{ resource.type}}
- </div>
- <div class="column is-3 has-text-centered">
- {{ resource.description | slice:0:300}}
- </div>
- <div class="column is-1 has-text-centered">
- <span class="icon has-text-success" *ngIf="resource.queryable">
- <i class="far fa-check-circle"></i>
- </span>
- <span class="icon has-text-danger" *ngIf="!resource.queryable">
- <i class="far fa-times-circle"></i>
- </span>
- </div>
- <div class="column is-1 has-text-centered">
- <span class="icon has-text-success" *ngIf="resource.downloadable">
- <i class="far fa-check-circle"></i>
- </span>
- <span class="icon has-text-danger" *ngIf="!resource.downloadable">
- <i class="far fa-times-circle"></i>
- </span>
- </div>
- <div class="column is-2 has-text-centered">
- {{ resource.outputFormats}}
- </div>
- <div class="column is-1 has-text-centered actions">
- <div class="columns is-marginless is-centered">
- <span class="icon column is-narrow">
- <a [routerLink]="[resource.id]"><i class="fas fa-eye"></i></a>
- </span>
- <span class="icon column is-narrow">
- <a [routerLink]="[resource.id, 'edit']"> <i class="fas fa-edit"></i></a>
- </span>
- <span class="icon has-text-danger column is-narrow" (click)="displayDeletePopup(resource.id)">
- <a> <i class="fas fa-trash"></i></a>
- </span>
- </div>
-
- </div>
-
- </div>
+ <div class="column is-1 has-text-centered">
+ <span class="icon has-text-success" *ngIf="resource.isQueryable">
+ <i class="far fa-check-circle"></i>
+ </span>
+ <span class="icon has-text-danger" *ngIf="!resource.isQueryable">
+ <i class="far fa-times-circle"></i>
+ </span>
</div>
- <div class="columns is-marginless">
- <div class="column">
- <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.limit"
- [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
- [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)">
- </app-paginator>
- </div>
+ <div class="column is-1 has-text-centered">
+ <span class="icon has-text-success" *ngIf="resource.isDownloadable">
+ <i class="far fa-check-circle"></i>
+ </span>
+ <span class="icon has-text-danger" *ngIf="!resource.isDownloadable">
+ <i class="far fa-times-circle"></i>
+ </span>
</div>
+ <div class="column is-1 has-text-centered">
+ <span class="icon has-text-success" *ngIf="resource.isStandard">
+ <i class="far fa-check-circle"></i>
+ </span>
+ <span class="icon has-text-danger" *ngIf="!resource.isStandard">
+ <i class="far fa-times-circle"></i>
+ </span>
+ </div>
+ <div class="column is-1 has-text-centered">
+ <app-crud-buttons [id]="resource.id" (delete)="displayDeletePopup($event)"></app-crud-buttons>
+ </div>
+ </div>
+ </div>
+ <div class="columns is-marginless">
+ <div class="column">
+ <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.limit"
+ [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
+ [showFirstLastButtons]="true" (page)="changePagination($event)"
+ (pageSizeChanged)="changePageSize($event)">
+ </app-paginator>
+ </div>
+ </div>
</div>
</div>
diff --git a/src/app/components/resources/list/resources.component.scss b/src/app/components/resources/list/resources.component.scss
index aa337b2be447c0ed3974f37cb692ae0ef133d19b..c746b911909d67f2432690682808294ac825224e 100644
--- a/src/app/components/resources/list/resources.component.scss
+++ b/src/app/components/resources/list/resources.component.scss
@@ -35,37 +35,6 @@ img {
border-bottom: 1px solid lightgray
}
-.actions .columns {
- border: none;
-}
-
-.actions {
- vertical-align: middle;
-
- .icon.column {
- padding: 0;
- }
-
- span {
- display: inline-block;
- }
-}
-
-.actions .icon {
- cursor: pointer;
-
- i {
- color: #4a4a4a;
- }
- &:hover {
- .fa-eye, .fa-edit {
- color: blue;
- }
- .fa-trash {
- color: #d5232a;
- }
- }
-}
.icon {
height: unset;
}
diff --git a/src/app/components/resources/list/resources.component.ts b/src/app/components/resources/list/resources.component.ts
index a8d9357aa537cee3e71e6f1b72186adf159138f8..7519c0f0196bbe48af9f9d3705f46c942fc94040 100644
--- a/src/app/components/resources/list/resources.component.ts
+++ b/src/app/components/resources/list/resources.component.ts
@@ -89,7 +89,7 @@ export class ResourcesComponent implements OnInit {
}
displayDeletePopup(resourceId) {
- const pop = confirm('Etes vous sûr de vouloir supprimer cette organisation ?');
+ const pop = confirm('Etes vous sûr de vouloir supprimer cette ressource ?');
if (pop === true) {
this.resourcesService.delete(resourceId).subscribe(() => {
this.resourcesService.pageNumber = 1;
diff --git a/src/app/models/resource.model.ts b/src/app/models/resource.model.ts
index 7fb24fa24833f9c6553c65955df1c017b10db4c2..17a726e9dde8a617d4264bcef4b1ac984a420899 100644
--- a/src/app/models/resource.model.ts
+++ b/src/app/models/resource.model.ts
@@ -1,30 +1,40 @@
export class Resource {
- id: number;
+ id?: number;
name: string;
+ acronym: string;
type: string;
- description?: string;
- queryable: number;
- downloadable: number;
- outputFormats: string[];
+ description: string;
+ isQueryable: number;
+ isDownloadable: number;
+ isStandard: number;
+ parametersUrl: string;
+ messageWarning: string;
constructor(resource?: IResource) {
if (resource) {
- this.id = resource.id;
+ if (resource.id) {
+ this.id = resource.id;
+ }
this.name = resource.name;
+ this.acronym = resource.acronym;
this.type = resource.type;
this.description = resource.description;
- this.queryable = resource.queryable;
- this.downloadable = resource.downloadable;
- this.outputFormats = resource.outputFormats;
+ this.isQueryable = resource.isQueryable;
+ this.isDownloadable = resource.isDownloadable;
+ this.isStandard = resource.isStandard;
+ this.parametersUrl = resource.parametersUrl;
+ this.messageWarning = resource.messageWarning;
} else {
this.name = '';
- this.description = '';
+ this.acronym = '';
this.type = '';
- this.queryable = 0;
- this.downloadable = 0;
- this.outputFormats = [];
+ this.description = '';
+ this.isQueryable = 0;
+ this.isDownloadable = 0;
+ this.isStandard = 0;
+ this.parametersUrl = '';
+ this.messageWarning = '';
}
-
}
}
@@ -41,11 +51,14 @@ export class ResourceRO {
export interface IResource {
id: number;
name: string;
+ acronym: string;
type: string;
description: string;
- queryable: number;
- downloadable: number;
- outputFormats: string[];
+ isQueryable: number;
+ isDownloadable: number;
+ isStandard: number;
+ parametersUrl: string;
+ messageWarning: string;
}
interface ILink {
diff --git a/src/index.html b/src/index.html
index fffe33505be8307060536ab482fc2758dc8a3794..b0e833c746feb7b256d84120886d6ff18b45cefc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
- <title>GrandLyon</title>
+ <title>Plateforme data back office</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">
diff --git a/src/styles.scss b/src/styles.scss
index b70b8572e5fdc6dd15e4da8edda5c78e7cdb7010..40d762110c62519cfb2acd2506d6c3d54a94ca23 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,11 +2,17 @@ $menu-item-color: white;
$menu-item-hover-color: white;
$menu-item-hover-background-color: #222222;
$menu-item-active-background-color: #222222;
-// $menu-list-border-left: 1px solid $red;
+// $menu-list-border-left: 1px solid $tomato-color;
-$red: #d5232a;
+$tomato-color: #f72f2f;
$dark-blue: #333745;
+$pagination-current-background-color: $tomato-color;
+$pagination-current-border-color: $tomato-color;
+$pagination-focus-border-color: $tomato-color;
+
+$button-focus-border-color: $tomato-color;
+
@import "../node_modules/bulma/bulma.sass";
html,
@@ -63,10 +69,32 @@ section {
.required::after {
content: " *";
- color: $red;
+ color: $tomato-color;
}
input.ng-invalid:not(form).ng-dirty, input.ng-invalid:not(form).ng-touched,
-textarea.ng-invalid:not(form).ng-dirty, textarea.ng-invalid:not(form).ng-touched,{
- border-left: 3px solid $red; /* red */
+textarea.ng-invalid:not(form).ng-dirty, textarea.ng-invalid:not(form).ng-touched {
+ border-left: 3px solid $tomato-color; /* red */
+}
+
+.button-gl {
+ min-width: 7rem;
+ background: $tomato-color;
+ border-radius: 2px;
+ border-width: 0;
+ font-size: $size-6;
+ color: white;
+ line-height: unset;
+
+ &:hover,
+ &:focus {
+ color: white;
+ background: $tomato-color;
+ opacity: 0.92;
+ }
+
+ &:disabled {
+ background: $tomato-color;
+ opacity: 0.38;
+ }
}
\ No newline at end of file