From 9b0085730bfb3fe10c626865a0dc0cd6e1064c12 Mon Sep 17 00:00:00 2001
From: ncastejon <castejon.nicolas@gmail.com>
Date: Tue, 30 Oct 2018 14:58:28 +0100
Subject: [PATCH] Add active link router - Fix edit link remove
---
src/app/app.component.html | 2 +-
src/app/app.component.scss | 16 --------
src/app/components/menu/menu.component.html | 4 +-
src/app/components/menu/menu.component.scss | 8 ++++
.../detail/organization-detail.component.html | 2 +-
.../detail/organization-detail.component.ts | 1 -
.../edit/organization-form.component.html | 37 ++++++++++++-------
.../edit/organization-form.component.scss | 11 ++----
.../edit/organization-form.component.ts | 7 +++-
.../list/organizations.component.html | 16 ++++----
.../list/organizations.component.scss | 24 +++++++++---
src/app/services/organization.service.ts | 2 -
12 files changed, 71 insertions(+), 59 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index e13b1c3..f0cfafd 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 2a80e4f..763ab39 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 5f7d4be..113a6e1 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 9b9967f..c00f4be 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 e046c7a..1d59843 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 5c92ea2..165ed8d 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 e5eb2ea..bfa9e96 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 304ea56..8423b64 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 d10f967..9ea62cf 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 2cd0c7a..76bae61 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 d077603..a10df3d 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 2981c0b..2ea35b2 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);
}
--
GitLab