Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • web-et-numerique/web-et-numerique-internet/data.grandlyon.com/web-portal/components/custom-apps/admin-gui
1 result
Show changes
Commits on Source (4)
Hide whitespace changes
Inline Side-by-side
Showing
with 475 additions and 259 deletions
package-lock.json
View file @ 879e2806
{
"name": "admin-gui",
"version": "1.0.0",
"version": "1.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......@@ -2306,9 +2306,9 @@
"dev": true
},
"bulma": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.4.tgz",
"integrity": "sha512-krG2rP6eAX1WE0sf6O0SC/FUVSOBX4m1PBC2+GKLpb2pX0qanaDqcv9U2nu75egFrsHkI0zdWYuk/oGwoszVWg=="
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz",
"integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw=="
},
"bytes": {
"version": "3.0.0",
......
package.json
View file @ 879e2806
......@@ -24,7 +24,7 @@
"@angular/platform-browser": "^7.2.4",
"@angular/platform-browser-dynamic": "^7.2.4",
"@angular/router": "^7.2.4",
"bulma": "^0.7.4",
"bulma": "^0.7.5",
"core-js": "^2.6.4",
"node-rsa": "^1.0.5",
"rxjs": "^6.4.0",
......
src/app/app.component.html
View file @ 879e2806
......@@ -5,10 +5,71 @@
</div>
<h4>Plateforme Data Admin</h4>
<div class="logo">
<img src="assets/img/logo.svg" alt="Le Grand Lyon, la métropole">
<div class="navbar-header-item navbar-right-side">
<div class="connect-me">
<a routerLink="/login" *ngIf="!loggedInUserFullname; else userSignedInTemplate">
<button class="button connect-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
<g id="btn_x5F_connect">
<path
d="M11.5 11.7c-3.1 0-5.6-2.6-5.6-5.6C5.9 3 8.5.5 11.5.5c3.1 0 5.6 2.6 5.6 5.6 0 3-2.6 5.6-5.6 5.6zM17.2 14.6c1.3.6 2.3 1.5 3 2.6 1.2 1.9 1.2 3.8 1.2 3.9 0 .8-.6 1.4-1.2 1.4H2.6c-.6 0-1.2-.6-1.2-1.4 0-.1 0-2 1.2-3.9.7-1.1 1.8-2 3-2.6 1.6-.8 3.5-1.2 5.8-1.2s4.2.4 5.8 1.2z"
class="stroke_white" />
</g>
</svg>
<span>Me connecter</span>
</button>
</a>
</div>
<ng-template #userSignedInTemplate>
<div class="put-menu-to-right" [ngClass]="{'is-active': userDropdownIsOpened}">
<button class="button connect-button" (click)="toggleUserDropdown()"
(clickOutside)="closeUserDropdown()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" class="is-connected">
<g id="btn_x5F_connect">
<path
d="M11.5 11.7c-3.1 0-5.6-2.6-5.6-5.6C5.9 3 8.5.5 11.5.5c3.1 0 5.6 2.6 5.6 5.6 0 3-2.6 5.6-5.6 5.6zM17.2 14.6c1.3.6 2.3 1.5 3 2.6 1.2 1.9 1.2 3.8 1.2 3.9 0 .8-.6 1.4-1.2 1.4H2.6c-.6 0-1.2-.6-1.2-1.4 0-.1 0-2 1.2-3.9.7-1.1 1.8-2 3-2.6 1.6-.8 3.5-1.2 5.8-1.2s4.2.4 5.8 1.2z"
class="stroke_white" />
</g>
</svg>
<span class="text-overflow">{{ loggedInUserFullname }}</span>
</button>
<div class="dropdown-content user-information">
<a href preventDefault (click)="loggout()" class="dropdown-item with-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
<g id="picto_x5F_deconnect">
<g class="fill_black">
<g class="fill_black">
<path
d="M11 18H8c-1.7 0-3-1.3-3-3V9c0-1.7 1.3-3 3-3h3c.6 0 1 .4 1 1s-.4 1-1 1H8c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h3c.6 0 1 .4 1 1s-.4 1-1 1z"
class="fill_black" />
</g>
<g class="fill_black">
<path
d="M11 18H8c-1.7 0-3-1.3-3-3V9c0-1.7 1.3-3 3-3h3c.6 0 1 .4 1 1s-.4 1-1 1H8c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h3c.6 0 1 .4 1 1s-.4 1-1 1z"
class="fill_black" />
</g>
</g>
<path
d="M19.4 11.3L14.1 6v4H10c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h4.1v4l5.3-5.3c.4-.4.4-1 0-1.4z"
class="fill_black" />
</g>
</svg>
<span i18n="@@header.signOut">Sign Out</span>
</a>
</div>
</div>
<div class="modal" [ngClass]="{'is-active': userDropdownIsOpened}"></div>
</ng-template>
<div class="logo">
<img src="assets/img/logo.svg" alt="Le Grand Lyon, la métropole">
</div>
</div>
</header>
<nav class="main-nav" [ngClass]="{'is-active': sidebarOpened}">
<app-menu [expanded]="sidebarOpened"></app-menu>
......
src/app/app.component.scss
View file @ 879e2806
@import '../scss/variables.scss';
@import '../../node_modules/bulma/sass/utilities/_all.sass';
.grid{
.grid {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 60px minmax(calc(100vh - 60px), auto);
overflow: hidden;
// overflow: hidden;
}
.main-header{
.main-header {
grid-row: 1;
grid-column: 1 / -1;
grid-column: 1 / span 2;
display: flex;
flex-flow: row;
align-items: center;
background-color: white;;
background-color: white;
border-bottom: 1px solid lightgray;
h4 {
......@@ -22,9 +24,9 @@
}
.logo {
margin-left: auto;
padding-right: 20px;
}
.hamburger {
width: 50px;
height: 30px;
......@@ -36,29 +38,32 @@
}
.hamburger.expanded {
background-image: url("../assets/img/hamburger_bitten.png");
background-image: url("../assets/img/hamburger_bitten.png");
}
}
.main-nav{
.main-nav {
grid-row: 2;
grid-column: 1 / span 1;
grid-column: 1;
width: 50px;
z-index: 200;
height: 100vh;
z-index: 200;
transition: all .2s linear;
background-color: #333745;
position: sticky;
top: 0px;
&.is-active {
width: 200px;
}
}
.main-content{
.main-content {
grid-row: 2;
grid-column: 2 / -1;
grid-column: 2;
margin-left: 150px;
background-color: #f2f2f2;
background-color: $grey-background-color;
transition: all 200ms cubic-bezier(0.7, 0, 0.3, 1);
&.wide {
......@@ -66,3 +71,155 @@
}
}
// Connexion button
.text-overflow {
overflow: hidden;
text-overflow: ellipsis;
}
svg {
height: 21px;
stroke: $brand-color;
stroke-width: 1px;
flex-shrink: 0;
.stroke_white {
fill: transparent;
}
}
.connect-button {
border-color: $grey-dark-color;
width: 100%;
background: transparent;
padding: 0.5em 1.2em;
height: 2.5rem;
font-weight: 600;
line-height: 1;
span {
color: $grey-dark-color;
}
&:hover {
color: $grey-super-light-color;
}
svg {
margin-right: 0.6rem;
}
@media screen and (max-width: $tablet) {
height: 2.5rem;
width: 2.5rem;
padding: 7px;
justify-content: center;
svg {
margin-right: 0;
}
span {
display: none;
}
}
}
svg.is-connected {
.stroke_white {
fill: $grey-dark-color;
}
}
.navbar-right-side {
display: flex;
align-items: center;
z-index: 5;
margin-left: auto;
}
.dropdown-item.with-icon {
display: flex;
align-items: center;
span {
margin-left: 0.5rem;
}
svg {
fill: $brand-color;
}
&:hover {
background-color: transparent;
span {
font-weight: 600;
}
}
}
.put-menu-to-right {
position: relative;
z-index: 15;
.user-information {
width: 223px;
border-radius: 5px;
display: none;
position: absolute;
background-color: white;
top: 3.6em;
left: -151px;
padding: 0;
@media screen and (min-width: $tablet) {
left: -28px;
}
}
.user-information::before {
content: "";
position: absolute;
width: 12px;
height: 12px;
top: -6px;
left: 50%;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
// When tablet, change the position to not be cut
@media screen and (max-width: $desktop) {
& {
left: 73%;
}
}
}
&.is-active {
.user-information {
display: block;
}
}
}
.connect-me {
margin-right: 1rem;
}
.connect-me a:hover {
text-decoration: none;
}
.modal.is-active {
position: fixed;
z-index: 10;
bottom: 0;
left: 0;
right: 0;
top: $header-bar-height;
background-color: rgba(10, 10, 10, 0.86);
}
src/app/app.component.ts
View file @ 879e2806
import { Component, OnInit } from '@angular/core';
import { UserService } from './user/services';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { NavigationHistoryService } from './services';
@Component({
selector: 'app-root',
......@@ -9,11 +13,41 @@ export class AppComponent implements OnInit {
title: string;
sidebarOpened: boolean;
userDropdownIsOpened = false;
constructor(
) {}
private _userService: UserService,
private _router: Router,
private _navigationHistoryService: NavigationHistoryService,
) { }
ngOnInit(): void {
this.sidebarOpened = false;
this.sidebarOpened = true;
// Activate navigation history
this._router.events.pipe(
filter(e => e instanceof NavigationEnd),
).subscribe((e) => {
this._navigationHistoryService.add(e['urlAfterRedirects']);
});
}
get loggedInUserFullname() {
return this._userService.user ? `${this._userService.user.firstName} ${this._userService.user.lastName}` : null;
}
loggout() {
console.log('blabla')
this._userService.resetAuth();
this.closeUserDropdown();
this._router.navigate(['/login']);
}
toggleUserDropdown() {
this.userDropdownIsOpened = !this.userDropdownIsOpened;
}
closeUserDropdown() {
this.userDropdownIsOpened = false;
}
}
src/app/app.module.ts
View file @ 879e2806
......@@ -10,6 +10,7 @@ import { AppServices, AppConfigService } from './services';
import { AppComponents } from './components';
import { UserModule } from './user/user.module';
import { UserService } from './user/services';
import { AppDirectives } from './directives';
// Function used by APP_INITIALIZER before the app start: init user info / statut (expect a promise)
export function initUserService(authService: UserService) {
......@@ -34,6 +35,7 @@ export function initAppConfig(appConfigService: AppConfigService) {
declarations: [
AppComponent,
...AppComponents,
...AppDirectives,
],
imports: [
AppRoutingModule,
......
src/app/app.routing.module.ts
View file @ 879e2806
import { WelcomeComponent } from './components/welcome/welcome.component';
import { RouterModule, Routes } from '@angular/router';
import { OrganizationsComponent } from './components/organizations/list/organizations.component';
import { NgModule } from '@angular/core';
......@@ -13,42 +12,39 @@ import { AuthenticatedGuard } from './user/guards/authenticated.guard';
const appRoutes: Routes = [
{
path: '',
component: WelcomeComponent,
canActivate: [AuthenticatedGuard],
data: {
title: 'Bienvenue',
},
pathMatch: 'full',
redirectTo: 'producteur-de-donnees',
},
{
path: 'organizations',
path: 'producteur-de-donnees',
component: OrganizationsComponent,
canActivate: [AuthenticatedGuard],
data: {
title: 'Organisations',
title: 'Producteur de donnees',
},
},
{
path: 'organizations/new',
path: 'producteur-de-donnees/new',
component: OrganizationFormComponent,
canActivate: [AuthenticatedGuard],
data: {
title: 'Nouvelle organisation',
title: 'Nouveau producteur de données',
},
},
{
path: 'organizations/:id/edit',
path: 'producteur-de-donnees/:id/edit',
component: OrganizationFormComponent,
canActivate: [AuthenticatedGuard],
data: {
title: 'Modifier l\'organisation',
title: 'Modifier le producteur de données',
},
},
{
path: 'organizations/:id',
path: 'producteur-de-donnees/:id',
component: OrganizationDetailComponent,
canActivate: [AuthenticatedGuard],
data: {
title: 'Organisation',
title: 'Detail du producteur de données',
},
},
{
......@@ -80,7 +76,7 @@ const appRoutes: Routes = [
component: ResourceDetailComponent,
canActivate: [AuthenticatedGuard],
data: {
title: 'Ressource',
title: 'Detail de la ressource',
},
},
{
......@@ -112,7 +108,7 @@ const appRoutes: Routes = [
component: FormatDetailComponent,
canActivate: [AuthenticatedGuard],
data: {
title: 'Format',
title: 'Detail du format',
},
},
];
......
src/app/components/formats/detail/format-detail.component.html
View file @ 879e2806
<ng-container *ngIf="format">
<section class="section page-container" *ngIf="format">
<app-page-header [pageInfo]="{title: title}"></app-page-header>
<app-back-button [route]="'/formats'" [title]="'Retourner à la liste des formats'"></app-back-button>
<section class="section">
<div class="columns is-centered">
<div class="column is-8">
<div class="card">
<header class="card-header">
<p class="card-header-title has-text-centered">
{{format.name}}
<div class="columns is-centered">
<div class="column is-8">
<div class="card">
<header class="card-header">
<p class="card-header-title has-text-centered">
{{format.name}}
</p>
</header>
<div class="card-content">
<div class="content">
<p>
<span class="has-text-weight-bold">Id: </span>
<span>{{format.id}}</span>
</p>
<p>
<span class="has-text-weight-bold">Type MapServer: </span>
<span>{{format.mapServerType}}</span>
</p>
</header>
<div class="card-content">
<div class="content">
<p>
<span class="has-text-weight-bold">Id: </span>
<span>{{format.id}}</span>
</p>
<p>
<span class="has-text-weight-bold">Type MapServer: </span>
<span>{{format.mapServerType}}</span>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</ng-container>
\ No newline at end of file
</div>
</section>
\ No newline at end of file
src/app/components/formats/detail/format-detail.component.ts
View file @ 879e2806
......@@ -13,6 +13,7 @@ import { Format } from 'src/app/models/format.model';
export class FormatDetailComponent implements OnInit {
format: Format;
title: string;
constructor(
private _route: ActivatedRoute,
......@@ -21,6 +22,7 @@ export class FormatDetailComponent implements OnInit {
}
ngOnInit(): void {
this.title = this._route.snapshot.data.title;
this._route.paramMap.pipe(
switchMap((params: ParamMap) => this._formatService.findById(params.get('id'))))
.subscribe((format: Format) => this.format = format);
......
src/app/components/formats/edit/format-form.component.html
View file @ 879e2806
<ng-container *ngIf="format">
<app-back-button [route]="'/formats'" [title]="'Retourner à la liste des formats'"></app-back-button>
<h1>{{ title }}</h1>
<section class="section page-container" *ngIf="format">
<app-page-header [pageInfo]="{title: title}"></app-page-header>
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="columns is-centered is-marginless">
<div class="column is-7">
......@@ -38,4 +35,4 @@
</div>
</div>
</form>
</ng-container>
\ No newline at end of file
</section>
\ No newline at end of file
src/app/components/formats/list/formats.component.html
View file @ 879e2806
<ng-container *ngIf="formats">
<div>
<div class="section">
<div class="columns is-centered is-marginless">
<div class="column has-text-centered">
<h2>{{ totalElement }} formats trouvés</h2>
</div>
</div>
<div class="add-item has-text-right">
<a class="button button-gl" [routerLink]="['new']">
Ajouter
</a>
<section class="section page-container" *ngIf="formats">
<app-page-header [pageInfo]="pageHeaderInfo" [hideBackButton]="true"></app-page-header>
<div class="add-item-link has-text-right">
<a class="button button-gl" [routerLink]="['new']">
Ajouter
</a>
</div>
<div class="table entity-list-table">
<div class="header columns is-marginless">
<div class="column is-2">
<span (click)="sortBy('name')" class="is-sortable">
<span class="sort-icons">
<span class="icon">
<i class="fas fa-sort-up"
[ngClass]="{'icon-red': sortOptions.value === 'name' && sortOptions.order === 'desc'}"></i>
</span>
<span class="icon">
<i class="fas fa-sort-down"
[ngClass]="{'icon-red': sortOptions.value === 'name' && sortOptions.order === 'asc'}"></i>
</span>
</span>
<span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Nom</span>
</span>
</div>
<div class="table">
<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>
<div class="column is-2">
<span (click)="sortBy('mapServerType')" class="is-sortable">
<span class="sort-icons">
<span class="icon">
<i class="fas fa-sort-up"
[ngClass]="{'icon-red': sortOptions.value === 'mapServerType' && sortOptions.order === 'desc'}"></i>
</span>
<span class="icon">
<i class="fas fa-sort-down"
[ngClass]="{'icon-red': sortOptions.value === 'mapServerType' && sortOptions.order === 'asc'}"></i>
</span>
</div>
<div class="column is-2 has-text-centered">
<span class="column-title">Type MapServer</span>
</div>
<div class="column is-offset-7 is-1 has-text-centered">
<span class="column-title">Actions</span>
</div>
</span>
<span class="column-title" [ngClass]="{'active': sortOptions.value === mapServerType}">Type
MapServer</span>
</span>
</div>
<div class="column is-offset-7 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 format of formats; let i=index; let odd=odd; let even=even;" [ngClass]="{ odd: odd, even: even }">
<div class="column is-2">
<span>{{ format.name}}</span>
</div>
<div class="data-list">
<div class="data columns is-multiline is-vcentered is-marginless"
*ngFor="let format of formats; let i=index; let odd=odd; let even=even;"
[ngClass]="{ odd: odd, even: even }">
<div class="column is-2 has-text-centered">
{{ format.name}}
</div>
<div class="column is-2 has-text-centered">
{{ format.mapServerType}}
</div>
<div class="column is-offset-7 is-1 has-text-centered actions">
<app-crud-buttons [id]="format.id" (delete)="displayDeletePopup($event)"></app-crud-buttons>
</div>
</div>
<div class="column is-2">
<span>{{ format.mapServerType}}</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-offset-7 is-1 has-text-centered actions">
<app-crud-buttons [id]="format.id" (delete)="displayDeletePopup($event)"></app-crud-buttons>
</div>
</div>
</div>
<div class="columns is-marginless paginator">
<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>
</ng-container>
</section>
\ No newline at end of file
src/app/components/formats/list/formats.component.scss
View file @ 879e2806
section {
padding: 20px;
}
.section {
padding-top: 0;
}
.table {
background-color: white;
border: 1px solid lightgray;
}
.center {
text-align: center;
}
img {
max-width: 100px;
}
.header {
border-bottom: 1px solid lightgray;
background-color: #fafafa;
span {
color: #999;
}
}
.is-sortable .column-title {
cursor: pointer;
}
.table .columns {
border-bottom: 1px solid lightgray
}
i {
&.title-icon {
margin-right: 0.75rem;
}
&.sort-order-icon {
padding-left: 0.75rem;
cursor: pointer;
}
}
.add-item {
margin-bottom: 20px;
}
src/app/components/formats/list/formats.component.ts
View file @ 879e2806
......@@ -3,6 +3,7 @@ import { FormatService } from 'src/app/services/format.service';
import { Subscription } from 'rxjs';
import { PaginatorOptions } from 'src/app/models/paginator-options.model';
import { Format, FormatRO } from 'src/app/models/format.model';
import { IPageHeaderInfo } from '../../../models/page.model';
@Component({
selector: 'app-formats',
......@@ -11,6 +12,9 @@ import { Format, FormatRO } from 'src/app/models/format.model';
})
export class FormatsComponent implements OnInit {
pageHeaderInfo: IPageHeaderInfo = {
title: '',
};
formats: Format[];
searchChangeSub: Subscription;
......@@ -58,6 +62,8 @@ export class FormatsComponent implements OnInit {
this.formats = items.formats;
this.totalElement = items.totalCount;
this.pageHeaderInfo.title = `${this.totalElement} formats trouvés`;
this.paginator.limit = this.formatsService.limit;
this.paginator.pageIndex = this.formatsService.pageNumber;
this.paginator.length = items.totalCount;
......
src/app/components/image-upload/image-upload.component.html
View file @ 879e2806
<div class="field">
<label class="label" [for]="fieldParams.inputName">{{ fieldParams.label }}</label>
<label class="label" [ngClass]="{'required': fieldParams.isRequired}"
[for]="fieldParams.inputName">{{ fieldParams.label }}</label>
<div class="image-preview-container" *ngIf="fieldParams.existingImageUrl && !removeImageBtnClicked">
<button class="button" (click)="removeImage()"><i class="far fa-times-circle"></i></button>
<img [src]="fieldParams.existingImageUrl" alt="" class="image-preview">
......
src/app/components/index.ts
View file @ 879e2806
......@@ -6,7 +6,6 @@ import { PaginatorComponent } from './paginator/paginator.component';
import { ResourceDetailComponent } from './resources/detail/resource-detail.component';
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';
import { FormatsComponent } from './formats/list/formats.component';
......@@ -14,6 +13,7 @@ import { FormatDetailComponent } from './formats/detail/format-detail.component'
import { FormatFormComponent } from './formats/edit/format-form.component';
import { ImageUploadComponent } from './image-upload/image-upload.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { PageHeaderComponent } from './page-header/page-header.component';
export {
MenuComponent,
......@@ -24,7 +24,6 @@ export {
ResourceDetailComponent,
ResourceFormComponent,
ResourcesComponent,
WelcomeComponent,
BackButtonComponent,
CrudButtonsComponent,
FormatsComponent,
......@@ -32,6 +31,7 @@ export {
FormatFormComponent,
ImageUploadComponent,
NotificationsComponent,
PageHeaderComponent,
};
// tslint:disable-next-line:variable-name
......@@ -44,7 +44,6 @@ export const AppComponents = [
ResourceDetailComponent,
ResourceFormComponent,
ResourcesComponent,
WelcomeComponent,
BackButtonComponent,
CrudButtonsComponent,
FormatsComponent,
......@@ -52,4 +51,5 @@ export const AppComponents = [
FormatFormComponent,
ImageUploadComponent,
NotificationsComponent,
PageHeaderComponent,
];
src/app/components/menu/menu.component.html
View file @ 879e2806
<aside class="menu" [ngClass]="{'expanded': expanded}">
<ul class="menu-list">
<li><a [routerLink]="['/']" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">
<span class="icon">
<i class="fas fa-home"></i>
<li><a [routerLink]="['/', 'producteur-de-donnees']" routerLinkActive="active-link">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
<g id="picto_x5F_acteur">
<path
d="M16.2 12.8c1.1-.8 1.8-2 1.8-3.3 0-2.2-1.8-4-4-4s-4 1.8-4 4c0 1.4.7 2.6 1.8 3.3-3 1-5.2 3.8-5.2 7.1 0 .3.2.5.5.5s.5-.2.5-.5c0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5c0 .3.2.5.5.5s.5-.2.5-.5c-.1-3.4-2.3-6.2-5.4-7.1zm-5.3-3.3c0-1.6 1.4-3 3-3s3 1.3 3 3-1.4 3-3 3-3-1.4-3-3zM7.9 9.5c0-.4 0-.8.1-1.2-1.2-.4-2.1-1.5-2.1-2.8 0-1.6 1.4-3 3-3 1.1 0 2.1.6 2.6 1.4.3-.1.6-.2 1-.3-.7-1.3-2-2.1-3.6-2.1-2.2 0-4 1.8-4 4 0 1.4.7 2.6 1.8 3.3-3 1-5.2 3.8-5.2 7.1 0 .3.2.5.5.5s.5-.2.5-.5c0-3.2 2.4-5.8 5.4-6.4z"
class="main" />
</g>
</svg>
</span>
<span class="label-menu">Dashboard</span>
</a>
</li>
<li><a [routerLink]="['/', 'organizations']" routerLinkActive="active-link">
<span class="icon">
<i class="fas fa-city"></i>
</span>
<span class="label-menu">Organisations</span>
<span class="label-menu">Producteurs de données</span>
</a>
</li>
<li><a [routerLink]="['/', 'resources']" routerLinkActive="active-link">
<span class="icon">
<span class="icon">
<i class="fas fa-tint"></i>
</span>
<span class="label-menu">Ressources</span>
<span class="label-menu">Ressources</span>
</a>
</li>
<li><a [routerLink]="['/', 'formats']" routerLinkActive="active-link">
<span class="icon">
<span class="icon">
<i class="far fa-file"></i>
</span>
<span class="label-menu">Formats</span>
<span class="label-menu">Formats</span>
</a>
</li>
</ul>
</aside>
</aside>
\ No newline at end of file
src/app/components/menu/menu.component.scss
View file @ 879e2806
@import '../../../scss/variables.scss';
.menu {
padding: 0px;
padding-top: 20px;
span {
color: white;
}
.icon svg {
stroke: white;
width: 1.2rem;
}
a {
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
}
.label-menu {
......@@ -21,13 +26,6 @@
}
.menu.expanded {
a {
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
}
.label-menu {
padding-left: 10px;
opacity: 1;
......@@ -40,10 +38,28 @@
li a {
border-left: 3px solid #333745;
padding-left: calc(0.75em - 3px) ;
padding: 1rem calc(1rem - 3px);
&.active-link {
border-color:#d5232a;
background-color: $background-link-hover-color;
border-color: #d5232a;
span {
color: $menu-selected-color;
}
.icon svg {
stroke: $menu-selected-color;
}
}
&:hover {
color: white;
background-color: $background-link-hover-color;
}
&:hover:not(.active-link) {
border-left: 3px solid $background-link-hover-color;
}
}
}
src/app/components/menu/menu.component.ts
View file @ 879e2806
......@@ -11,8 +11,7 @@ export class MenuComponent {
@Input() expanded: boolean;
constructor(
) {
constructor() {
}
}
src/app/components/organizations/detail/organization-detail.component.html
View file @ 879e2806
<ng-container *ngIf="organization">
<app-back-button [route]="'/organizations'" [title]="'Retourner à la liste des organisations'"></app-back-button>
<section class="section">
<div class="columns is-centered">
<div class="column is-8">
<div class="card">
<header class="card-header">
<p class="card-header-title has-text-centered">
{{organization.name}}
</p>
</header>
<div class="card-image">
<figure class="image">
<img [src]="organization.logo" alt="Logo de l'organization">
</figure>
</div>
<div class="card-content">
<div class="content">
<div>
<p>{{organization.description}}</p>
</div>
<br>
<div>
<p><span class="has-text-weight-bold">Id:</span> {{ organization.id}}</p>
</div>
<br>
<div>
<p class="has-text-weight-bold">Nom ElasticSearch de l'organisation:</p>
<p>{{ organization.elasticSearchName}}</p>
</div>
<br>
<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>
</div>
<section class="section page-container" *ngIf="organization">
<app-page-header [pageInfo]="{title: title}"></app-page-header>
<div class="columns is-centered">
<div class="column is-8">
<div class="card">
<header class="card-header">
<p class="card-header-title has-text-centered">
{{organization.name}}
</p>
</header>
<div class="card-image">
<figure class="image">
<img [src]="organization.logo" alt="Logo du producteur de données">
</figure>
</div>
<div class="card-content">
<div class="content">
<div>
<p>{{organization.description}}</p>
</div>
<br>
<div>
<p><span class="has-text-weight-bold">Id:</span> {{ organization.id}}</p>
</div>
<br>
<div>
<p class="has-text-weight-bold">Nom ElasticSearch de l'organisation:</p>
<p>{{ organization.elasticSearchName}}</p>
</div>
<br>
<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>
</div>
</div>
</div>
</div>
</div>
</section>
</ng-container>
\ No newline at end of file
</div>
</section>
\ No newline at end of file
src/app/components/organizations/detail/organization-detail.component.ts
View file @ 879e2806
......@@ -14,16 +14,18 @@ import { OrganizationService } from 'src/app/services/organization.service';
export class OrganizationDetailComponent implements OnInit {
organization: Organization;
title: string;
constructor(
private route: ActivatedRoute,
private organizationService: OrganizationService,
private _route: ActivatedRoute,
private _organizationService: OrganizationService,
) {
}
ngOnInit(): void {
this.route.paramMap.pipe(
switchMap((params: ParamMap) => this.organizationService.findById(params.get('id'))))
this.title = this._route.snapshot.data.title;
this._route.paramMap.pipe(
switchMap((params: ParamMap) => this._organizationService.findById(params.get('id'))))
.subscribe((organization: Organization) => this.organization = organization);
}
}