Skip to content
Snippets Groups Projects
Commit d2ec54a5 authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #47 remove md2 elements

parent 546b8c8e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
apps/maarch_entreprise/Views/action-administration.component.html
+ 50
− 95
View file @ d2ec54a5
<div class="page-header">
<h1 *ngIf="!actionCreation">{{lang.actionModification}} <small>{{action.label_action}}</small></h1>
<h1 *ngIf="actionCreation">{{lang.actionCreation}} <small>{{action.label_action}}</small></h1>
<h1 *ngIf="!actionCreation">{{lang.actionModification}}
<small>{{action.label_action}}</small>
</h1>
<h1 *ngIf="actionCreation">{{lang.actionCreation}}
<small>{{action.label_action}}</small>
</h1>
</div>
<div *ngIf="loading">
<mat-spinner style="margin:auto;"></mat-spinner>
......@@ -8,121 +12,72 @@
<div *ngIf="!loading" class="container-fluid">
<div class="container-fluid">
<div class="col-md-6 col-md-offset-3">
<div *ngIf="action.is_system == true" class="alert alert-danger" role="alert"><b>{{lang.isSytemAction}} !</b> {{lang.doNotModifyUnlessExpert}}</div>
<div *ngIf="action.is_system == true" class="alert alert-danger" role="alert">
<b>{{lang.isSytemAction}} !</b> {{lang.doNotModifyUnlessExpert}}</div>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #actionsFormUp="ngForm">
<div class="form-group">
<div class="col-sm-12">
<mat-form-field>
<input matInput [(ngModel)]="action.label_action" required name="action_name" id="action_name" title="{{lang.desc}}" type="text" placeholder="{{lang.desc}}" required>
</mat-form-field>
</div>
<mat-form-field>
<input matInput [(ngModel)]="action.label_action" required name="action_name" id="action_name" title="{{lang.description}}"
type="text" placeholder="{{lang.description}}" required>
</mat-form-field>
</div>
<div class="form-group">
<div class="col-sm-12">
<md2-select
id="status"
name="status"
placeholder="{{lang.associatedStatus}}"
[(ngModel)]="action.id_status"
required
#searchStatus="ngModel">
<md2-select-header>
<mat-form-field>
<input matInput name="search"
type="text"
placeholder="Filtre"
[(ngModel)]="_search"
autocomplete="off"
(focusout)="clearSearch()"/>
</mat-form-field>
</md2-select-header>
<md2-option *ngFor="let statut of statuses | dataPipe : 'label_status' : _search" [value]="statut.id">{{statut.label_status}}</md2-option>
</md2-select>
</div>
<mat-form-field>
<mat-select id="status" name="status" title="{{lang.associatedStatus}}" placeholder="{{lang.associatedStatus}}" [(ngModel)]="action.id_status"
required>
<mat-option *ngFor="let status of statuses" [value]="status.id">
{{status.label_status}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-group">
<div class="col-sm-12">
<md2-select
id="action_page"
name="action_page"
placeholder="{{lang.actionPage}}"
[(ngModel)]="action.action_page"
#searchAction="ngModel">
<md2-select-header>
<mat-form-field>
<input matInput name="search"
type="text"
placeholder="Filtre"
[(ngModel)]="_search"
autocomplete="off"
(focusout)="clearSearch()"/>
</mat-form-field>
</md2-select-header>
<md2-option *ngFor="let action of actionPagesList.actionsPageList | dataPipe : 'label' : _search" [value]="action.name">{{action.label}}</md2-option>
</md2-select>
</div>
<mat-form-field>
<mat-select id="action_page" name="action_page" title="{{lang.actionPage}}" placeholder="{{lang.actionPage}}" [(ngModel)]="action.action_page"
required>
<mat-option *ngFor="let action of actionPagesList.actionsPageList" [value]="action.name">
{{action.label}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-group">
<div class="col-sm-12">
<md2-select
id="keyword"
name="keyword"
placeholder="{{lang.keyword}}"
[(ngModel)]="action.keyword"
#searchAction="ngModel">
<!--<md2-select-header>
<mat-form-field>
<input matInput name="search"
type="text"
placeholder="Filtre"
[(ngModel)]="_search"
autocomplete="off"
(focusout)="clearSearch()"/>
</mat-form-field>
</md2-select-header>-->
<md2-option *ngFor="let keyword of keywordsList | dataPipe : 'label' : _search" [value]="keyword.value">{{keyword.label}}</md2-option>
</md2-select>
</div>
<mat-form-field>
<mat-select id="keyword" name="keyword" title="{{lang.keyword}}" placeholder="{{lang.keyword}}" [(ngModel)]="action.keyword"
required>
<mat-option *ngFor="let keyword of keywordsList" [value]="keyword.value">
{{keyword.label}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-group">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-sm-6">
<mat-slide-toggle name="history" title="{{lang.actionHistoryDesc}}" id="history" color="primary" [(ngModel)]="action.history" [checked]="action.history == 'Y'">{{lang.actionHistory}}</mat-slide-toggle>
<mat-slide-toggle name="history" title="{{lang.actionHistoryDesc}}" id="history" color="primary" [(ngModel)]="action.history"
[checked]="action.history == 'Y'">{{lang.actionHistory}}</mat-slide-toggle>
</div>
<div class="col-sm-6">
<mat-slide-toggle name="is_folder_action" title="{{lang.isFolderActionDesc}}" id="is_folder_action" color="primary" [(ngModel)]="action.is_folder_action" [checked]="action.is_folder_action == 'Y'">{{lang.isFolderAction}}</mat-slide-toggle>
<mat-slide-toggle name="is_folder_action" title="{{lang.isFolderActionDesc}}" id="is_folder_action" color="primary" [(ngModel)]="action.is_folder_action"
[checked]="action.is_folder_action == 'Y'">{{lang.isFolderAction}}</mat-slide-toggle>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<md2-select
id="categorieslist"
name="categorieslist"
placeholder="{{lang.chooseCategoryAssociation}}"
[(ngModel)]="this.action.actionCategories"
required
multiple
#searchCat="ngModel">
<!--<md2-select-header>
<mat-form-field>
<input matInput name="search"
type="text"
placeholder="Filtre"
[(ngModel)]="_search"
autocomplete="off"
(focusout)="clearSearch()"/>
</mat-form-field>
</md2-select-header>-->
<md2-option *ngFor="let category of categoriesList | dataPipe : 'label' : _search" [value]="category.id">{{category.label}}</md2-option>
</md2-select>
</div>
<mat-form-field>
<mat-select id="categorieslist" name="categorieslist" title="{{lang.chooseCategoryAssociation}}" placeholder="{{lang.chooseCategoryAssociation}}"
[(ngModel)]="action.actionCategories" multiple required>
<mat-option *ngFor="let category of categoriesList" [value]="category.id">
{{category.label}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-sm-12 panel-body" style="text-align:center;">
<button class="btn btn-default" type="submit" [disabled]="!actionsFormUp.form.valid" >{{lang.validate}}</button>
<button class="btn btn-default" routerLink='/administration/actions'>{{lang.cancel}}</button>
<button mat-raised-button color="primary" type="submit" [disabled]="!actionsFormUp.form.valid">{{lang.validate}}</button>
<button mat-raised-button routerLink='/administration/actions'>{{lang.cancel}}</button>
</div>
</form>
</div>
......
apps/maarch_entreprise/Views/actions-administration.component.html
+ 54
− 41
View file @ d2ec54a5
<div class="page-header">
<h1>{{lang.administration}} {{lang.actions}} <small>{{data.length}} {{lang.actions}}</small></h1>
<h1>{{lang.administration}} {{lang.actions}}
<small>{{data.length}} {{lang.actions}}</small>
</h1>
</div>
<div *ngIf="loading">
<mat-spinner style="margin:auto;"></mat-spinner>
</div>
<div *ngIf="!loading" class="container-fluid">
<div class="col-md-12">
<table id ="actionsTable" class="table table-hover table-condensed" [md2Data]="data | dataPipe : 'label_action' : search" #md2="md2DataTable" [sortBy]='id' [rowsPerPage]="10">
<thead>
<tr>
<td colspan="4">
<md2-pagination></md2-pagination>
</td>
<td style="text-align:right;">
<div class="example-container">
<mat-grid-list cols="3" rowHeight="100px">
<mat-grid-tile>
<mat-paginator #paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]">
</mat-paginator>
</mat-grid-tile>
<mat-grid-tile></mat-grid-tile>
<mat-grid-tile>
<mat-form-field>
<input matInput placeholder="{{lang.filterBy}} : {{lang.desc}}" class="md2-input" [(ngModel)]="search" />
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{lang.filterBy}}">
</mat-form-field>
&nbsp;
<a class="text-primary" style="cursor: pointer" routerLink="/administration/actions/new" title="{{lang.new_action}}"><i class="fa fa-exchange fa-2x"></i><sup><i class="fa fa-plus"></i></sup></a>
</td>
</tr>
<tr>
<th style="width:5%;" md2SortBy="id"><span>{{lang.id}}</span></th>
<th style="width:45%;" md2SortBy="label_action"><span>{{lang.desc}}</span></th>
<th style="width:15%;" md2SortBy="history"><span>{{lang.actionHistory}}</span></th>
<th style="width:15%;" md2SortBy="is_folder_action"><span>{{lang.isFolderAction}}</span></th>
<th style="width:30%;"><span>&nbsp;</span></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let action of md2.data">
<td style="width:5%;vertical-align:middle;"> {{action.id}} </td>
<td style="width:45%;vertical-align:middle;"> {{action.label_action}} </td>
<td style="width:15%;vertical-align:middle;" *ngIf="action.history == 'N'"> {{lang.no}} </td>
<td style="width:15%;vertical-align:middle;" *ngIf="action.history == 'Y'"> {{lang.yes}} </td>
<td style="width:15%;vertical-align:middle;" *ngIf="action.is_folder_action == 'Y'"> {{lang.yes}} </td>
<td style="width:15%;vertical-align:middle;" *ngIf="action.is_folder_action == 'N'"> {{lang.no}} </td>
<td style="width:30%;vertical-align:middle;" style="text-align:right;">
<div class="btn-group" role="group" aria-label="...">
<button routerLink="/administration/actions/{{action.id}}" type="button" class="btn btn-default" title="{{lang.update}}">
<a><i style="cursor:pointer" class="fa fa-edit"></i></a>
<button mat-mini-fab color="accent" matTooltip="{{lang.add}}" routerLink="/administration/actions/new">
<mat-icon class="fa fa-plus" aria-hidden="true"></mat-icon>
</button>
</mat-grid-tile>
</mat-grid-list>
<mat-table #table [dataSource]="dataSource" matSort matSortActive="id" matSortDirection="asc">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.id}}</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="label_action">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.description}}</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.label_action}} </mat-cell>
</ng-container>
<ng-container matColumnDef="history">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.actionHistory}}</mat-header-cell>
<mat-cell *matCellDef="let element">
<span *ngIf="element.history == 'N'"> {{lang.no}} </span>
<span *ngIf="element.history == 'Y'"> {{lang.yes}} </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="is_folder_action">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.isFolderAction}}</mat-header-cell>
<mat-cell *matCellDef="let element">
<span *ngIf="element.is_folder_action == 'N'"> {{lang.no}} </span>
<span *ngIf="element.is_folder_action == 'Y'"> {{lang.yes}} </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
<mat-cell *matCellDef="let element" style="text-align:right">
<button mat-icon-button color="primary" matTooltip="{{lang.update}}" routerLink="/administration/actions/{{element.id}}">
<mat-icon class="fa fa-edit fa-2x" aria-hidden="true"></mat-icon>
</button>
<button [disabled]="action.is_system == 'Y'" type="button" class="btn btn-default" title="{{lang.delete}}" (click)="deleteAction(action)">
<a><i style="cursor:pointer;color: #D9534F" class="fa fa-trash"></i></a>
<button mat-icon-button color="warn" [disabled]="element.is_system == 'Y'" matTooltip="{{lang.delete}}" (click)="deleteAction(element)">
<mat-icon class="fa fa-trash fa-2x" aria-hidden="true"></mat-icon>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
</div>
</div>
</div>
\ No newline at end of file
apps/maarch_entreprise/js/angular/app/administration/actions-administration.component.js
+ 22
− 1
View file @ d2ec54a5
......@@ -13,6 +13,7 @@ var core_1 = require("@angular/core");
var http_1 = require("@angular/common/http");
var translate_component_1 = require("../translate.component");
var notification_service_1 = require("../notification.service");
var material_1 = require("@angular/material");
var ActionsAdministrationComponent = /** @class */ (function () {
function ActionsAdministrationComponent(http, notify) {
this.http = http;
......@@ -23,7 +24,14 @@ var ActionsAdministrationComponent = /** @class */ (function () {
this.titles = [];
this.loading = false;
this.data = [];
this.displayedColumns = ['id', 'label_action', 'history', 'is_folder_action', 'actions'];
this.dataSource = new material_1.MatTableDataSource(this.data);
}
ActionsAdministrationComponent.prototype.applyFilter = function (filterValue) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
};
ActionsAdministrationComponent.prototype.updateBreadcrumb = function (applicationName) {
if ($j('#ariane')[0]) {
$j('#ariane')[0].innerHTML = "<a href='index.php?reinit=true'>" + applicationName + "</a> > <a onclick='location.hash = \"/administration\"' style='cursor: pointer'>" + this.lang.administration + "</a> > " + this.lang.actions;
......@@ -41,7 +49,9 @@ var ActionsAdministrationComponent = /** @class */ (function () {
_this.data = _this.actions;
_this.loading = false;
setTimeout(function () {
$j("[md2sortby='id']").click();
_this.dataSource = new material_1.MatTableDataSource(_this.data);
_this.dataSource.paginator = _this.paginator;
_this.dataSource.sort = _this.sort;
}, 0);
}, function (err) {
console.log(err);
......@@ -55,12 +65,23 @@ var ActionsAdministrationComponent = /** @class */ (function () {
this.http.delete(this.coreUrl + 'rest/actions/' + action.id)
.subscribe(function (data) {
_this.data = data.action;
_this.dataSource = new material_1.MatTableDataSource(_this.data);
_this.dataSource.paginator = _this.paginator;
_this.dataSource.sort = _this.sort;
_this.notify.success(_this.lang.actionDeleted + ' « ' + action.label_action + ' »');
}, function (err) {
_this.notify.error(JSON.parse(err._body).errors);
});
}
};
__decorate([
core_1.ViewChild(material_1.MatPaginator),
__metadata("design:type", material_1.MatPaginator)
], ActionsAdministrationComponent.prototype, "paginator", void 0);
__decorate([
core_1.ViewChild(material_1.MatSort),
__metadata("design:type", material_1.MatSort)
], ActionsAdministrationComponent.prototype, "sort", void 0);
ActionsAdministrationComponent = __decorate([
core_1.Component({
templateUrl: angularGlobals["actions-administrationView"],
......
apps/maarch_entreprise/js/angular/app/administration/actions-administration.component.ts
+ 26
− 4
View file @ d2ec54a5
import { Component, OnInit } from '@angular/core';
import { Component, ViewChild, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LANG } from '../translate.component';
import { NotificationService } from '../notification.service';
import { MatPaginator, MatTableDataSource, MatSort, MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
declare function $j(selector: any) : any;
......@@ -23,7 +25,17 @@ export class ActionsAdministrationComponent implements OnInit {
titles : any[] = [];
loading : boolean = false;
data : any = [];
data: Action[] = [];
displayedColumns = ['id', 'label_action', 'history', 'is_folder_action', 'actions'];
dataSource = new MatTableDataSource(this.data);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
constructor(public http: HttpClient, private notify: NotificationService) {
}
......@@ -48,7 +60,9 @@ export class ActionsAdministrationComponent implements OnInit {
this.data = this.actions;
this.loading = false;
setTimeout(() => {
$j("[md2sortby='id']").click();
this.dataSource = new MatTableDataSource(this.data);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}, 0);
}, (err) => {
console.log(err);
......@@ -63,6 +77,9 @@ export class ActionsAdministrationComponent implements OnInit {
this.http.delete(this.coreUrl + 'rest/actions/' + action.id)
.subscribe((data : any) => {
this.data = data.action;
this.dataSource = new MatTableDataSource(this.data);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.notify.success(this.lang.actionDeleted+' « '+action.label_action+' »');
}, (err) => {
......@@ -70,5 +87,10 @@ export class ActionsAdministrationComponent implements OnInit {
});
}
}
}
export interface Action {
id: number;
label_action: string;
history: string;
is_folder_action: string;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment