Skip to content
GitLab
Commit bef78a20 authored by naji's avatar naji
Browse files

refactor: recharting Edit component

parent 424d9762
Hide whitespace changes
Inline Side-by-side
ui/ui-frontend/projects/pastis/src/app/profile/edit-profile/edit-profile.component.html
View file @ bef78a20
<meta meta charset=utf-8>
<div class="pastis-edit-profile-header">
<div class="pastis-edit-profile-header-name">
<p class="text large bold text-primary">Nom du profil d' unité archivistique</p>
</div>
<div class="pastis-edit-profile-header-name">
<p class="text large bold text-primary">Nom du profil d' unité archivistique</p>
</div>
<div class="pastis-edit-profile-header-id">
<p class="text medium light">Identifiant : {{profileId}}</p>
</div>
<div class="pastis-edit-profile-header-id">
<p class="text medium light">Identifiant : {{profileId}}</p>
</div>
</div>
<div class ="mat-table">
<mat-tab-group
[selectedIndex]="activeTabIndex"
disableRipple="true"
(selectedTabChange)="loadProfile($event)"
fxFill>
[selectedIndex]="activeTabIndex"
disableRipple="true"
(selectedTabChange)="loadProfile($event)"
fxFill>
<mat-tab label="{{puaMode ? tabLabels[5] : tabLabels[0]}}" *ngIf="canShowOnPuaMode(0)">
<div class="pastis-tab-container">
<ng-template matTabContent *ngIf="puaMode">
</ng-template>
<pastis-under-construction style="background: darkgray;" *ngIf="!puaMode"></pastis-under-construction>
</div>
<div class="pastis-tab-container">
<ng-template matTabContent *ngIf="puaMode">
</ng-template>
<pastis-under-construction style="background: darkgray;" *ngIf="!puaMode"></pastis-under-construction>
</div>
</mat-tab>
<mat-tab label="{{tabLabels[1]}}" *ngIf="canShowOnPuaMode(1)">
<div class="pastis-tab-container" >
<ng-template matTabContent>
<pastis-file-tree [nestedTreeControl]="nestedTreeControl"
[nestedDataSource]="nestedDataSource"
[rootElementName] = "rootNames[1]"
[rootElementShowName]="displayedRootNames[1]"
[childrenListToExclude]="headerTabChildrenToExclude"
[shouldLoad]="isTabClicked(1)"
[collectionName]="collectionNames[1]">
</pastis-file-tree>
</ng-template>
</div>
<div class="pastis-tab-container" >
<ng-template matTabContent>
<pastis-file-tree [nestedTreeControl]="nestedTreeControl"
[nestedDataSource]="nestedDataSource"
[rootElementName] = "rootNames[1]"
[rootElementShowName]="displayedRootNames[1]"
[childrenListToExclude]="headerTabChildrenToExclude"
[shouldLoad]="isTabClicked(1)"
[collectionName]="collectionNames[1]">
</pastis-file-tree>
</ng-template>
</div>
</mat-tab>
<mat-tab label="{{tabLabels[2]}}" *ngIf="canShowOnPuaMode(2)">
<div class="pastis-tab-container">
<ng-template matTabContent>
<pastis-file-tree [nestedTreeControl]="nestedTreeControl"
[nestedDataSource]="nestedDataSource"
[rootElementName]="rootNames[2]"
[rootElementShowName]="displayedRootNames[2]"
[childrenListToInclude]="rulesTabChildrenToInclude"
[childrenListToExclude]="rulesTabChildrenToExclude"
[shouldLoad]="isTabClicked(2)"
[collectionName]="collectionNames[2]">
</pastis-file-tree>
</ng-template>
</div>
<div class="pastis-tab-container">
<ng-template matTabContent>
<pastis-file-tree [nestedTreeControl]="nestedTreeControl"
[nestedDataSource]="nestedDataSource"
[rootElementName]="rootNames[2]"
[rootElementShowName]="displayedRootNames[2]"
[childrenListToInclude]="rulesTabChildrenToInclude"
[childrenListToExclude]="rulesTabChildrenToExclude"
[shouldLoad]="isTabClicked(2)"
[collectionName]="collectionNames[2]">
</pastis-file-tree>
</ng-template>
</div>
</mat-tab>
<mat-tab label="{{tabLabels[3]}}" *ngIf="canShowOnPuaMode(3)">
<div class="pastis-tab-container">
<ng-template matTabContent>
<pastis-file-tree [nestedTreeControl]="nestedTreeControl"
[nestedDataSource]="nestedDataSource"
[rootElementName]="rootNames[3]"
[rootElementShowName]="displayedRootNames[3]"
[childrenListToInclude]="treeTabChildrenToInclude"
[childrenListToExclude]="treeTabChildrenToExclude"
[shouldLoad]="isTabClicked(3)"
[collectionName]="collectionNames[3]">
</pastis-file-tree>
</ng-template>
</div>
<div class="pastis-tab-container">
<ng-template matTabContent>
<pastis-file-tree [nestedTreeControl]="nestedTreeControl"
[nestedDataSource]="nestedDataSource"
[rootElementName]="rootNames[3]"
[rootElementShowName]="displayedRootNames[3]"
[childrenListToInclude]="treeTabChildrenToInclude"
[childrenListToExclude]="treeTabChildrenToExclude"
[shouldLoad]="isTabClicked(3)"
[collectionName]="collectionNames[3]">
</pastis-file-tree>
</ng-template>
</div>
</mat-tab>
<mat-tab label="{{tabLabels[4]}}" *ngIf="canShowOnPuaMode(4)">
<div class="pastis-tab-container">
<ng-template matTabContent>
<pastis-file-tree [nestedTreeControl]="nestedTreeControl"
[nestedDataSource]="nestedDataSource"
[rootElementName]="rootNames[4]"
[rootElementShowName]="displayedRootNames[4]"
[childrenListToInclude]="objectTabChildrenToInclude"
[childrenListToExclude]="objectTabChildrenToExclude"
[shouldLoad]="isTabClicked(4)"
[collectionName]="collectionNames[4]">
</pastis-file-tree>
</ng-template>
</div>
<div class="pastis-tab-container">
<ng-template matTabContent>
<pastis-file-tree [nestedTreeControl]="nestedTreeControl"
[nestedDataSource]="nestedDataSource"
[rootElementName]="rootNames[4]"
[rootElementShowName]="displayedRootNames[4]"
[childrenListToInclude]="objectTabChildrenToInclude"
[childrenListToExclude]="objectTabChildrenToExclude"
[shouldLoad]="isTabClicked(4)"
[collectionName]="collectionNames[4]">
</pastis-file-tree>
</ng-template>
</div>
</mat-tab>
</mat-tab-group>
</div>
......
ui/ui-frontend/projects/pastis/src/app/profile/edit-profile/edit-profile.component.scss
View file @ bef78a20
......@@ -8,9 +8,10 @@
border-bottom: solid var(--vitamui-grey-200);
}
.mat-table{
background-color: #F6F3FB;
position: fixed;
top: 220px;
height: 400px;
height: 100%;
width: 450px;
}
.pastis-edit-profile-header-name{
......
ui/ui-frontend/projects/pastis/src/app/profile/edit-profile/file-tree-metadata/file-tree-metadata.component.html
View file @ bef78a20
......@@ -7,7 +7,7 @@
<!--Arrow button conainer-->
<div class="pastis-position-btn-arrow-back">
<button class="btn btn-circle primary small" tooltip="Retour vers la liste des profils" placement="bottom"
show-delay="0" tooltip-class="pastis-tooltip-class" (click)="goBack()">
show-delay="0" tooltip-class="pastis-tooltip-class" (click)="goBack()">
<i class="material-icons">arrow_back</i>
</button>
</div>
......@@ -35,12 +35,12 @@
</div> -->
<!--Button save-->
<div class="panel-buttons" tooltip="Enregistrer le profil" placement="top" show-delay="0"
tooltip-class="pastis-tooltip-class">
tooltip-class="pastis-tooltip-class">
<pastis-user-action-save-profile></pastis-user-action-save-profile>
</div>
<!--Button setting-->
<div class="panel-buttons" tooltip="Télécharger le manuel d'utilisation de PASTIS" placement="top"
show-delay="0" tooltip-class="pastis-tooltip-class">
show-delay="0" tooltip-class="pastis-tooltip-class">
<pastis-user-action-download-doc></pastis-user-action-download-doc>
</div>
</div>
......@@ -49,7 +49,7 @@
<!--Metatada table container-->
<div class="pastis-table-container">
<table mat-table [dataSource]="matDataSource" *ngIf="shouldLoadMetadataTable(); else complexElementWithouChild"
class="list-profile-table">
class="list-profile-table">
<!-- Name Column -->
<ng-container matColumnDef="nomDuChamp">
<th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col">Nom de la métadonnée</th>
......@@ -60,12 +60,12 @@
tooltip="{{getSedaDefinition(element.nomDuChamp)}}" placement="right" show-delay="0"
tooltip-class="pastis-tooltip-class">
<mat-icon *ngIf="isElementComplex(element.nomDuChamp)" svgIcon="complex-element"
class="pastis-ico-complex-element">
class="pastis-ico-complex-element">
</mat-icon>
{{element.nomDuChamp}}
<mat-icon *ngIf="!isSedaCardinalityConform(element.cardinalite,selectedCardinalities[j])"
matTooltip="La cardinalité n'est pas conforme aux specifications du SEDA 2.1" matTooltipPosition="above"
matTooltipClass="pastis-table-content">
matTooltip="La cardinalité n'est pas conforme aux specifications du SEDA 2.1" matTooltipPosition="above"
matTooltipClass="pastis-table-content">
info
</mat-icon>
</span>
......@@ -79,18 +79,18 @@
<ng-container [ngSwitch]="getMetadataInputType(element)">
<ng-container *ngSwitchCase="'date'">
<input [ngModel]="element.valeurFixe" theme="dp-material" class="value-text-area pastis-table-content"
[dpDayPicker]="config" (ngModelChange)="setNodeValue(element,$event)">
[dpDayPicker]="config" (ngModelChange)="setNodeValue(element,$event)">
</ng-container>
<ng-container *ngSwitchCase="'enumeration'">
<mat-select placeholder="Choisissez une valeur" [ngModel]="element.valeurFixe"
(ngModelChange)="setNodeValue(element,$event)" class="select-border">
(ngModelChange)="setNodeValue(element,$event)" class="select-border">
<mat-option [value]=""></mat-option>
<mat-option *ngFor="let val of element.enumeration" [value]="val">{{val}}</mat-option>
</mat-select>
</ng-container>
<ng-container *ngIf="!checkElementType(element.nomDuChamp)">
<textarea matInput *ngSwitchDefault [ngModel]="element.valeurFixe"
(ngModelChange)="setNodeValue(element,$event)" class="value-text-area pastis-table-content">
(ngModelChange)="setNodeValue(element,$event)" class="value-text-area pastis-table-content">
</textarea>
</ng-container>
</ng-container>
......@@ -103,7 +103,7 @@
<th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col">Cardinalité </th>
<td mat-cell *matCellDef="let element;index as i" class="pastis-metadata-table-col-small">
<mat-select [ngModel]="selectedCardinalities[i]" panelClass="cardinality-dropdown "
(ngModelChange)="setNodeChildrenCardinalities(element,$event)" disableRipple="true" class="select-border">
(ngModelChange)="setNodeChildrenCardinalities(element,$event)" disableRipple="true" class="select-border">
<mat-option *ngFor="let c of element.cardinalite" [value]="c">
<span class="cardinality-text">{{c}}</span>
</mat-option>
......@@ -116,12 +116,12 @@
<th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col"> Commentaire </th>
<td mat-cell *matCellDef="let element;index as i" class="pastis-metadata-table-col-large">
<textarea matInput [ngModel]="element.commentaire" (ngModelChange)="setDocumentation(element,$event)"
class="comment-text-area ">
class="comment-text-area ">
</textarea>
<!--Menu options-->
<mat-menu #menu="matMenu" [overlapTrigger]="false" class="pastis-item-menu" xPosition="before"
yPosition="below">
yPosition="below">
<!-- Dupliquer-->
<button mat-menu-item>
<mat-icon style="color:#757575">filter_none</mat-icon>
......@@ -130,7 +130,7 @@
<!-- @Attributs-->
<mat-divider *ngIf="hasAttributes(element.nomDuChamp)" style="border-top-color:#E0E0E0;"></mat-divider>
<button *ngIf="hasAttributes(element.nomDuChamp);" (click)="onEditAttributesClick(element.id)"
mat-menu-item>
mat-menu-item>
<mat-icon style="color:#757575">alternate_email</mat-icon>
<span class="pastis-item-menu-text">Attributs de métadonnée</span>
</button>
......@@ -144,9 +144,9 @@
</mat-menu>
<button id="menuBtn" *ngIf="isRowHovered(element.id)" mat-icon-button [matMenuTriggerFor]="menu"
(click)="onButtonClicked(element.id,$event)" disableRipple="true" (menuOpened)="rowIndex = i"
(menuClosed)="rowIndex = 100"
[ngClass]="{'pastis-btn-metadata-options-active': isButtonClicked(element.id,matDataSource.data[rowIndex]),
(click)="onButtonClicked(element.id,$event)" disableRipple="true" (menuOpened)="rowIndex = i"
(menuClosed)="rowIndex = 100"
[ngClass]="{'pastis-btn-metadata-options-active': isButtonClicked(element.id,matDataSource.data[rowIndex]),
'pastis-btn-metadata-options': !isButtonClicked(element.id,matDataSource.data[rowIndex]) }">
<mat-icon
[ngClass]="{'pastis-ico-menu-active': isButtonClicked(element.id,matDataSource.data[rowIndex]),
......@@ -159,23 +159,20 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true" class="pastis-table-row-header"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="pastis-table-row"
(mouseenter)="onMouseOver(row)" (mouseleave)="onMouseLeave(row)"></tr>
(mouseenter)="onMouseOver(row)" (mouseleave)="onMouseLeave(row)"></tr>
</table>
<!--Button add metadata-->
<div class="button-container">
<button *ngIf="checkElementType()" class="pastis-btn-add-tag"
(click)="onAddNode()">{{resolveButtonLabel(clickedNode)}}
</button>
<br><br>
</div>
</div>
<ng-template #complexElementWithouChild>
<div class="complex-element-no-child"> La métadonnée {{clickedNode.name}} ne contient pas de métadonnées filles.
Vous devez lui en ajouter au moins une pour pouvoir l'utiliser dans votre profil.</div>
</ng-template>
<!--Button add metadata-->
<div class="button-container">
<button *ngIf="checkElementType()" class="btn primary"
(click)="onAddNode()">{{resolveButtonLabel(clickedNode)}}
</button>
<br><br>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
\ No newline at end of file
</mat-sidenav-container>
ui/ui-frontend/projects/pastis/src/app/profile/edit-profile/file-tree-metadata/file-tree-metadata.component.scss
View file @ bef78a20
......@@ -242,17 +242,17 @@ tr:hover .pastis-btn-appear {
max-height: 425px;
width: 60%;
left: 475px;
padding-top: 60px;
margin-top: 60px;
top: 0%;
position: relative;
}
.button-container {
position: absolute;
width: 230px;
position: relative;
width: 270px;
height: 50px;
left: 120px;
top: 745px;
left: 475px;
top: 50px;
}
......@@ -401,3 +401,7 @@ dp-day-calendar .dp-day-calendar-container {
.complex-element-no-child {
text-align: left;
}
.mat-sidenav-content{
height: 800px;
}
ui/ui-frontend/projects/pastis/src/app/profile/edit-profile/file-tree/file-tree.component.html
View file @ bef78a20
<mat-tree *ngIf="nestedTreeControl && nestedDataSource" [dataSource]="nestedDataSource"
[treeControl]="nestedTreeControl" #treeSelector class="pastis-tree">
[treeControl]="nestedTreeControl" #treeSelector class="pastis-tree">
<!-- Nested tree node-->
<mat-nested-tree-node *matTreeNodeDef="let node;when:hasNestedChild">
<ng-container *ngIf="!isAttribute(node) && shouldBeOnTab(node) && node" >
<mat-list-item
<mat-list-item
class="list-item" (mouseover)="hover=node.children.length" (click)="updateMedataTable(node);nestedTreeControl.expand(node)"
style="margin-left:40px;margin-right:40px">
<!--Root node name-->
<span *ngIf="node.name === rootElementName" class="pastis-tree-node-root-name">
<span [ngStyle]="{'margin-left': calculateNodePosition(node) + 'px'}">
{{rootElementShowName}}
</span>
<span *ngIf="node.name === rootElementName && node.name === 'DescriptiveMetadata'" >
<span class="pastis-add-ua-text" (click)= "addArchiveUnit(node)"> Ajouter&nbsp;une&nbsp;UA
<!--Button plus-->
<!--<mat-icon svgIcon="plus-blue"
class="pastis-ico-plus-blue"
(click)= "addArchiveUnit(node)">
</mat-icon>-->
<button class="pastis-btn-rounded-ua pastis-btn-add-ua">
<mat-icon class="pastis-ico-plus">add</mat-icon>
</button>
</span>
</span>
<!--<span *ngIf="node.name === rootElementName && node.name === 'DescriptiveMetadata'" >
<span class="pastis-add-ua-text" (click)= "addArchiveUnit(node)"> Ajouter&nbsp;une&nbsp;UA -->
<!--Button plus-->
<!--<mat-icon svgIcon="plus-blue"
class="pastis-ico-plus-blue"
(click)= "addArchiveUnit(node)">
</mat-icon>-->
<!-- <button class="pastis-btn-rounded-ua pastis-btn-add-ua">
<mat-icon class="pastis-ico-plus">add</mat-icon>
</button> -->
<!--</span>
</span>-->
<mat-divider class="pastis-divider"></mat-divider>
</span>
<!--Root children without children-->
<span *ngIf="!node.children.length && node.name !== rootElementName
&& isPartOfCollection(node) && shouldBeOnTab(node) && !isAttribute(node)"
class="pastis-tree-node-name" (click)="updateMedataTable(node)"
[ngStyle]="{'margin-left': calculateNodePosition(node) + 'px'}">
<span *ngIf="!node.children.length && node.name !== rootElementName
&& isPartOfCollection(node) && shouldBeOnTab(node) && !isAttribute(node)"
class="pastis-tree-node-name" (click)="updateMedataTable(node)"
[ngStyle]="{'margin-left': calculateNodePosition(node) + 'px'}">
<span>{{onResolveName(node)}}</span>
<mat-divider class="pastis-divider"></mat-divider>
</span>
......@@ -42,39 +42,39 @@
<span *ngIf="node.children.length && node.name !== rootElementName
&& isPartOfCollection(node) && shouldBeOnTab(node) && !isAttribute(node)"
[ngStyle]="{'margin-left': calculateNodePosition(node) + 'px'}" (click)="updateMedataTable(node)">
<button *ngIf="isElementComplexAndHasChildren(node)"
mat-icon-button matTreeNodeToggle
class="pastis-chevron-icon"
(click)="updateMedataTable(node)">
mat-icon-button matTreeNodeToggle
class="pastis-chevron-icon"
(click)="updateMedataTable(node)">
<mat-icon>{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon>
</button>
<span class="pastis-tree-node-name">
<span>{{onResolveName(node)}}</span>
<span *ngIf="node.name === 'ArchiveUnit'"
style="float: right;"
tooltip="Ajouter une UA"
tooltip-class="pastis-tooltip-class">
<!--Button plus-->
<button class="pastis-btn-rounded-ua-grey pastis-btn-add-ua">
<mat-icon class="pastis-ico-plus" (click)= "addArchiveUnit(node)">add</mat-icon>
</button>
</span>
<!--<span *ngIf="node.name === 'ArchiveUnit'"
style="float: right;"
tooltip="Ajouter une UA"
tooltip-class="pastis-tooltip-class">-->
<!--Button plus-->
<!-- <button class="pastis-btn-rounded-ua-grey pastis-btn-add-ua">
<mat-icon class="pastis-ico-plus" (click)= "addArchiveUnit(node)">add</mat-icon>
</button> -->
<!--</span>-->
</span>
<mat-divider class="pastis-divider"></mat-divider>
</span>
</mat-list-item>
<ul [hidden]="!nestedTreeControl.isExpanded(node)" class="pastis-tree-ul">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</ng-container>
<ul [hidden]="!nestedTreeControl.isExpanded(node)" class="pastis-tree-ul">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</ng-container>
</mat-nested-tree-node>
</mat-tree>
\ No newline at end of file
</mat-tree>
ui/ui-frontend/projects/pastis/src/app/profile/edit-profile/file-tree/file-tree.component.scss
View file @ bef78a20
......@@ -8,16 +8,16 @@
/*max-width: 1024px;*/
margin: 5px;
}
.file-tree{
width: 100%;
height: 94%;
height: 94%;
margin-top: 10px;
position: absolute;
white-space: nowrap;
white-space: nowrap;
left: 0px;
top: 45px;
}
}
.grid-tile-main {
......@@ -27,7 +27,7 @@
.grid-title {
position:absolute;
left: 10px;
left: 10px;
top: 10px;
font-size: 95%;
}
......@@ -52,7 +52,7 @@
}
.buttons-container {
position:absolute;
left: 10px;
left: 10px;
top: 60px;
}
.buttons-divider{
......@@ -104,7 +104,7 @@
max-width: 400px !important;
max-height: 3px !important;
// margin: 0px 0px 0px 0px !important;
opacity: 0.3 !important;
border: 1px solid #979797 !important;
}
......@@ -133,9 +133,10 @@
.mat-list-item{
display:block !important;
text-align-last:left;
background-color: #FFFF;
margin-top: 5px;
}
.list-item-no-children:hover{
background: rgba(92, 186, 169, 0.15);
......@@ -147,8 +148,8 @@
.pastis-tree-ul {
margin-top: 5px;
padding-left: 0px;
margin: 0px;
}
.pastis-add-ua-text {
......@@ -218,4 +219,7 @@
.pastis-ico-add-ua-grey {
@extend .pastis-ico-svg;
}
\ No newline at end of file
}
.pastis-tree{
background-color: #F6F3FB;
}
Supports Markdown
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