diff --git a/src/app/app.component.html b/src/app/app.component.html
index e13b1c3022f11f7d0efe56875378559a4d2c8e71..f0cfafdb3121a5d13ae3b55a8bc09f073ffa9c69 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,7 +4,7 @@
<div class="js-navigation hamburger" aria-haspopup="true" aria-owns="main-nav" aria-expanded="false">
</div>
- <h4>Plateforme Data Backoffice</h4>
+ <h4>Plateforme Data Admin</h4>
<div class="logo">
<img src="assets/img/logo.svg" alt="Le Grand Lyon, la métropole">
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 2a80e4f99f8dd52eaeb2d3a7b122dee8c08a9168..763ab3982c0c318543c1fc2e41dd534eaf225f2e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -69,22 +69,6 @@
.main-content {
transition: all 200ms cubic-bezier(0.7, 0, 0.3, 1);
}
-
-@media screen and (min-width: 45em){
- .grid{
- grid-template-columns:50px auto;
- }
- }
-
- @media screen and (min-width: 118em){
- .main-content{
- grid-column: 2 / -1;
- }
-
- .main-nav{
- transform: translateX(0);
- }
- }
/* Stuff not needed for the demo */
diff --git a/src/app/components/menu/menu.component.html b/src/app/components/menu/menu.component.html
index 5f7d4be41d0fade362cae8c2adec5b48d8f9aed2..113a6e1665f61f9689d6dd13178a20757af32535 100644
--- a/src/app/components/menu/menu.component.html
+++ b/src/app/components/menu/menu.component.html
@@ -1,14 +1,14 @@
<aside class="menu">
<ul class="menu-list">
- <li><a [routerLink]="['/']">
+ <li><a [routerLink]="['/']" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">
<span class="icon">
<i class="fas fa-home"></i>
</span>
<span class="label-menu">Dashboard</span>
</a>
</li>
- <li><a [routerLink]="['/', 'organizations']">
+ <li><a [routerLink]="['/', 'organizations']" routerLinkActive="active-link">
<span class="icon">
<i class="fas fa-city"></i>
</span>
diff --git a/src/app/components/menu/menu.component.scss b/src/app/components/menu/menu.component.scss
index 9b9967f7a8adc789ff6a60385e71110acedf70a4..c00f4bee1b2f45e079bb923d6cf96ea308b37dcd 100644
--- a/src/app/components/menu/menu.component.scss
+++ b/src/app/components/menu/menu.component.scss
@@ -37,3 +37,11 @@
}
}
+
+li a {
+ border-left: 3px solid #333745;
+ &.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 e046c7a5ceb37995e1b57dc46f421c07c44fb2cc..1d598432538bed32386c14ab918d397570819802 100644
--- a/src/app/components/organizations/detail/organization-detail.component.html
+++ b/src/app/components/organizations/detail/organization-detail.component.html
@@ -1,7 +1,7 @@
<ng-container *ngIf="organization">
<div class="back-button">
- <a routerLink="/organizations">
+ <a routerLink="/organizations" title="Retourner à la liste des organisations">
<span class="icon is-medium">
<i class="fas fa-arrow-left fa-lg"></i>
</span>
diff --git a/src/app/components/organizations/detail/organization-detail.component.ts b/src/app/components/organizations/detail/organization-detail.component.ts
index 5c92ea23087e80f2b26ac6c0523b99dee00b75f9..165ed8d41eff936f254f9ff63496cdcf9fbbe4f6 100644
--- a/src/app/components/organizations/detail/organization-detail.component.ts
+++ b/src/app/components/organizations/detail/organization-detail.component.ts
@@ -20,7 +20,6 @@ export class OrganizationDetailComponent implements OnInit {
}
ngOnInit(): void {
- console.log('init detail');
this.route.paramMap
.switchMap((params: ParamMap) => this.organizationService.findById(params.get('id')))
.subscribe((organization: Organization) => this.organization = organization);
diff --git a/src/app/components/organizations/edit/organization-form.component.html b/src/app/components/organizations/edit/organization-form.component.html
index e5eb2ea43ef59badaeb608b39020eb709eb68f69..bfa9e96acf3ccc8b9aa638c2af967a5108dc85f8 100644
--- a/src/app/components/organizations/edit/organization-form.component.html
+++ b/src/app/components/organizations/edit/organization-form.component.html
@@ -1,7 +1,7 @@
<ng-container *ngIf="organization">
<div class="back-button">
- <a routerLink="/organizations">
+ <a routerLink="/organizations" title="Retourner à la liste des organisations">
<span class="icon is-medium">
<i class="fas fa-arrow-left fa-lg"></i>
</span>
@@ -9,10 +9,10 @@
</a>
</div>
- <h1>Edit</h1>
+ <h1>Modifier l'organisation</h1>
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="columns is-centered is-marginless">
- <div class="column is-5">
+ <div class="column is-7">
<input type="hidden" formControlName="id" value="{{organization.id}}">
@@ -40,23 +40,34 @@
</div>
<div class="field links">
- <label class="label">Liens</label>
- <span class="icon" (click)="addLink()">
- <i class="fas fa-plus"></i>
- </span>
- <div formArrayName="links">
- <div *ngFor="let link of form.get('links').controls; let i = index;" [formGroupName]="i">
- <input class="input" type="text" formControlName="url">
- <span class="icon" (click)="removeLink(i)">
- <i class="fas fa-trash"></i>
+ <div class="columns">
+ <div class="column is-11">
+ <label class="label">Liens</label>
+ </div>
+ <div class="column is-1">
+ <span class="icon" (click)="addLink()" title="Ajouter un lien">
+ <i class="fas fa-plus"></i>
</span>
</div>
</div>
+
+ <div formArrayName="links">
+ <div *ngFor="let link of formLinks.controls; let i = index;" [formGroupName]="i" class="columns">
+ <div class="column is-11">
+ <input class="input" type="text" formControlName="url">
+ </div>
+ <div class="column is-1">
+ <span class="icon" (click)="removeLink(i)" title="Supprimer le lien">
+ <i class="fas fa-trash"></i>
+ </span>
+ </div>
+ </div>
+ </div>
</div>
<div class="field">
<div class="control">
- <button class="button is-info">Valider</button>
+ <button class="button validate">Valider</button>
</div>
</div>
diff --git a/src/app/components/organizations/edit/organization-form.component.scss b/src/app/components/organizations/edit/organization-form.component.scss
index 304ea56d2710fe2f0aa484ec208862c6d583d76f..8423b64dfb2dc01a0e37d4e29efb0105c4fb291a 100644
--- a/src/app/components/organizations/edit/organization-form.component.scss
+++ b/src/app/components/organizations/edit/organization-form.component.scss
@@ -13,17 +13,14 @@ h1 {
color: lightblue;
}
.fa-trash {
- color: lightcoral;
+ color: #d5232a;
}
}
}
-.links input {
- width: 80%;
-}
-.links .label {
- display: inline-block;
- width: 80%;
+.validate {
+ background-color: #168f48;
+ color: white;
}
.back-button {
diff --git a/src/app/components/organizations/edit/organization-form.component.ts b/src/app/components/organizations/edit/organization-form.component.ts
index d10f96731a190b3c26bb02dd3d7a055fb180b6a6..9ea62cfdc1dd740073a458f0a76277b3e03b096b 100644
--- a/src/app/components/organizations/edit/organization-form.component.ts
+++ b/src/app/components/organizations/edit/organization-form.component.ts
@@ -67,11 +67,14 @@ export class OrganizationFormComponent implements OnInit {
this.organization.links = [];
}
(this.form.controls.links as FormArray).push(this._fb.group({ id: null, name: '', url: '', organizationId: this.organization.id }));
- console.log(this.form.controls['links']);
}
removeLink(index) {
- (this.form.controls.links as FormArray).removeAt(1);
+ (this.form.controls.links as FormArray).removeAt(index);
+ }
+
+ get formLinks() {
+ return this.form.controls.links as FormArray;
}
onSubmit() {
diff --git a/src/app/components/organizations/list/organizations.component.html b/src/app/components/organizations/list/organizations.component.html
index 2cd0c7acae7153efd80f5ab12c004c9cd9f996ca..76bae61f68dc309cbc3efe850ef3f15b3f8f5c02 100644
--- a/src/app/components/organizations/list/organizations.component.html
+++ b/src/app/components/organizations/list/organizations.component.html
@@ -9,7 +9,7 @@
<div class="table">
<div class="header columns is-marginless">
<div class="column is-1 has-text-centered">
- <span (click)="sortBy('id')">
+ <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>
@@ -17,7 +17,7 @@
</span>
</div>
<div class="column is-2 has-text-centered">
- <span (click)="sortBy('name')">
+ <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>
@@ -55,18 +55,18 @@
</div>
<div class="column is-2 has-text-centered">
<p *ngFor="let link of organization.links">
- <a href="link.url">{{link.url}}</a>
+ <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">
- <span class="icon column">
+ <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">
+ <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" (click)="displayDeletePopup(organization.id)">
+ <span class="icon has-text-danger column is-narrow" (click)="displayDeletePopup(organization.id)">
<a> <i class="fas fa-trash"></i></a>
</span>
</div>
diff --git a/src/app/components/organizations/list/organizations.component.scss b/src/app/components/organizations/list/organizations.component.scss
index d0776039433e37132955a2e50b7ae5c2441ade1c..a10df3d7a4eb1c31c34195c7c42ffdbcbc926852 100644
--- a/src/app/components/organizations/list/organizations.component.scss
+++ b/src/app/components/organizations/list/organizations.component.scss
@@ -1,6 +1,9 @@
section {
padding: 20px;
}
+.section {
+ padding-top: 0;
+}
.table {
background-color: white;
@@ -16,24 +19,33 @@ img {
}
.header {
- border-bottom: 1px solid lightgray;;
+ border-bottom: 1px solid lightgray;
+ background-color: #fafafa;
+ span {
+ color: #999;
+
+ }
}
-.column-title {
+.is-sortable .column-title {
cursor: pointer;
}
-.columns.odd {
- background-color: white;
+.table .columns {
+ border-bottom: 1px solid lightgray
}
-.columns.even {
- background-color: #F5F5F5;
+.actions .columns {
+ border: none;
}
.actions {
vertical-align: middle;
+ .icon.column {
+ padding: 0;
+ }
+
span {
display: inline-block;
}
diff --git a/src/app/services/organization.service.ts b/src/app/services/organization.service.ts
index 2981c0b97ced9c508722f46875bb58715b747ac3..2ea35b219ba8ba0d83c512723c7174d4812a4929 100644
--- a/src/app/services/organization.service.ts
+++ b/src/app/services/organization.service.ts
@@ -51,8 +51,6 @@ export class OrganizationService {
}
delete(id) {
- console.log('delete');
- console.log(id);
return this._httpClient.delete(environment.backend.url + '/organizations/' + id);
}