Dataset Profile Editor. Drag and drop with dragula.
This commit is contained in:
parent
a4db1973d3
commit
ddd12cbba8
|
|
@ -31,6 +31,7 @@
|
|||
"moment": "^2.24.0",
|
||||
"moment-timezone": "^0.5.26",
|
||||
"ng-dialog-animation": "^9.0.3",
|
||||
"ng2-dragula": "^2.1.1",
|
||||
"ngx-cookie-service": "^2.2.0",
|
||||
"ngx-cookieconsent": "^2.2.3",
|
||||
"ngx-dropzone": "^2.2.2",
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ import { TranslateServerLoader } from './core/services/language/server.loader';
|
|||
import { MatomoService } from './core/services/matomo/matomo-service';
|
||||
import { GuidedTourModule } from './library/guided-tour/guided-tour.module';
|
||||
import { Oauth2DialogModule } from './ui/misc/oauth2-dialog/oauth2-dialog.module';
|
||||
import { DragulaModule } from 'ng2-dragula';
|
||||
|
||||
// AoT requires an exported function for factories
|
||||
export function HttpLoaderFactory(http: HttpClient, appConfig: ConfigurationService) {
|
||||
|
|
@ -107,7 +108,8 @@ const appearance: MatFormFieldDefaultOptions = {
|
|||
SidebarModule,
|
||||
NgcCookieConsentModule.forRoot(cookieConfig),
|
||||
Oauth2DialogModule,
|
||||
GuidedTourModule.forRoot()
|
||||
GuidedTourModule.forRoot(),
|
||||
DragulaModule.forRoot()
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
|
|
|
|||
|
|
@ -47,6 +47,8 @@ import { DatasetProfileTableOfContents } from './table-of-contents/table-of-cont
|
|||
import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
|
||||
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
|
||||
import {DragDropModule} from '@angular/cdk/drag-drop';
|
||||
import {DragulaModule} from 'ng2-dragula';
|
||||
|
||||
|
||||
//matrial
|
||||
import {MatBadgeModule} from '@angular/material/badge';
|
||||
|
|
@ -64,7 +66,8 @@ import { DatasetProfileEditorSectionFieldSetComponent } from './editor/component
|
|||
DatasetModule,
|
||||
AngularStickyThingsModule,
|
||||
DragDropModule,
|
||||
MatBadgeModule
|
||||
MatBadgeModule,
|
||||
DragulaModule
|
||||
],
|
||||
declarations: [
|
||||
DatasetProfileListingComponent,
|
||||
|
|
|
|||
|
|
@ -260,8 +260,8 @@
|
|||
|
||||
|
||||
|
||||
<li class="list-inline-item">
|
||||
<mat-icon [matMenuTriggerFor]="inputmenu" >folder</mat-icon>
|
||||
<li class="list-inline-item" *ngIf="!viewOnly">
|
||||
<mat-icon [matMenuTriggerFor]="inputmenu" matTooltip="Add new input">folder</mat-icon>
|
||||
<mat-menu #inputmenu="matMenu">
|
||||
|
||||
<!-- <button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.TextArea)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}</button>
|
||||
|
|
@ -345,16 +345,16 @@
|
|||
|
||||
<!-- <li class="list-inline-item"><mat-icon>folder</mat-icon><small>CommentField</small></li> -->
|
||||
<li class="list-inline-item">
|
||||
<mat-checkbox [formControl]="this.form.get('hasCommentField')">Comment Field</mat-checkbox>
|
||||
<mat-checkbox [formControl]="this.form.get('hasCommentField')" matTooltip="Include comment field">Comment Field</mat-checkbox>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<mat-checkbox [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)">
|
||||
<mat-checkbox [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" matTooltip="Enable multiplicity" [disabled]="viewOnly">
|
||||
multiplicity
|
||||
</mat-checkbox>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<!-- <mat-icon>more_vert</mat-icon> -->
|
||||
<mat-icon [matMenuTriggerFor]="menu" >more_vert</mat-icon>
|
||||
<mat-icon [matMenuTriggerFor]="menu" matTooltip="More..">more_vert</mat-icon>
|
||||
<mat-menu #menu="matMenu">
|
||||
<!-- TODO to check -->
|
||||
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">Description</mat-checkbox>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@
|
|||
<div class="row justify-content-end mb-1 mt-1">
|
||||
<div class="col-auto">
|
||||
<ul class="list-unstyled list-inline d-flex align-items-center">
|
||||
<li class="list-inline-item">
|
||||
<mat-slide-toggle [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before">
|
||||
<li class="list-inline-item" >
|
||||
<mat-slide-toggle [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" matTooltip="Make input required">
|
||||
Required
|
||||
</mat-slide-toggle>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<mat-icon style="cursor: pointer;" (click)="addNewRule()">visibility</mat-icon>
|
||||
<li class="list-inline-item" *ngIf="!viewOnly">
|
||||
<mat-icon style="cursor: pointer;" (click)="addNewRule()" matTooltip="Add visibility rule">visibility</mat-icon>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<mat-icon style="cursor: pointer;" (click)="onDelete()">delete</mat-icon>
|
||||
<li class="list-inline-item" *ngIf="!viewOnly">
|
||||
<mat-icon style="cursor: pointer;" (click)="onDelete()" matTooltip="Delete this input">delete</mat-icon>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="row" id="main-container">
|
||||
<div class="row" [id]="idprefix+form.get('id').value">
|
||||
|
||||
<!-- SECTION INFO -->
|
||||
<mat-card style="margin-bottom: 2em;" class="col-12">
|
||||
<mat-card style="margin-bottom: 2em;" class="col-12" >
|
||||
<mat-card-content>
|
||||
<app-dataset-profile-editor-section-component
|
||||
[form]="form"
|
||||
|
|
@ -12,11 +12,10 @@
|
|||
</mat-card>
|
||||
|
||||
<!-- FIELDSET INFO -->
|
||||
<div class="col-12 drop-list" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListAutoScrollDisabled]="false">
|
||||
<div class="col-12 drop-list" dragula="FIELDSETS" [(dragulaModel)]="form.get('fieldSets').controls">
|
||||
|
||||
<div style="margin-bottom: 2em;" class="row"
|
||||
*ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index" cdkDrag [id]="fieldset.get('id').value"
|
||||
[cdkDragDisabled]="!(fieldset.get('id').value === selectedFieldSetId)"
|
||||
*ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index"[id]="idprefix+fieldset.get('id').value"
|
||||
>
|
||||
<!-- <h4 style="font-weight: bold" class="col-12">
|
||||
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
|
||||
|
|
@ -35,8 +34,8 @@
|
|||
[ngClass]="{'field-container-active': fieldset.get('id').value === selectedFieldSetId}">
|
||||
<mat-card-content>
|
||||
|
||||
<mat-card-header *ngIf="fieldset.get('id').value === selectedFieldSetId">
|
||||
<mat-icon style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg);" cdkDragHandle>drag_indicator</mat-icon>
|
||||
<mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly">
|
||||
<mat-icon class="handle" style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg);" cdkDragHandle>drag_indicator</mat-icon>
|
||||
</mat-card-header>
|
||||
<app-dataset-profile-editor-composite-field-component [form]="fieldset"
|
||||
[viewOnly]="viewOnly"
|
||||
|
|
|
|||
|
|
@ -36,8 +36,3 @@ $blue-color-light: #5cf7f2;
|
|||
.drop-list.cdk-drop-list-dragging {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
#main-container{
|
||||
// max-height: 100vh;
|
||||
// overflow: scroll;
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
||||
import { Inject } from '@angular/core';
|
||||
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
||||
import { FormArray, FormGroup } from '@angular/forms';
|
||||
import { FieldEditorModel } from '@app/ui/admin/dataset-profile/admin/field-editor-model';
|
||||
import { FieldSetEditorModel } from '@app/ui/admin/dataset-profile/admin/field-set-editor-model';
|
||||
import { SectionEditorModel } from '@app/ui/admin/dataset-profile/admin/section-editor-model';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { Guid } from '@common/types/guid';
|
||||
import { DragulaService } from 'ng2-dragula';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
|
||||
|
||||
|
|
@ -27,8 +30,37 @@ export class DatasetProfileEditorSectionFieldSetComponent extends BaseComponent
|
|||
@Output() dataNeedsRefresh = new EventEmitter<void> ();
|
||||
|
||||
// @Output() fieldsetAdded = new EventEmitter<String>(); //returns the id of the fieldset added
|
||||
idprefix = "id";
|
||||
private subs = new Subscription();
|
||||
private FIELDSETS = 'FIELDSETS';
|
||||
constructor(
|
||||
private dragulaService: DragulaService,
|
||||
private myElement: ElementRef
|
||||
)
|
||||
{
|
||||
super();
|
||||
if(this.dragulaService.find(this.FIELDSETS)){
|
||||
this.dragulaService.destroy(this.FIELDSETS);
|
||||
}
|
||||
|
||||
constructor() { super(); }
|
||||
|
||||
this.dragulaService.createGroup(this.FIELDSETS,{
|
||||
moves:(el, container, handle)=>{
|
||||
if(this.viewOnly) return false;
|
||||
if(el.id != (this.idprefix+this.tocentry.id)) return false;
|
||||
if(handle.className.includes('handle')) return true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
this.subs.add(this.dragulaService.drop(this.FIELDSETS).subscribe(obs=>{
|
||||
this.dataNeedsRefresh.emit();
|
||||
return ;
|
||||
}));
|
||||
|
||||
}
|
||||
ngOnDestroy(){
|
||||
this.subs.unsubscribe();
|
||||
}
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
this.initialize();
|
||||
}
|
||||
|
|
@ -62,6 +94,11 @@ export class DatasetProfileEditorSectionFieldSetComponent extends BaseComponent
|
|||
this.form = this.tocentry.form;
|
||||
this.numbering = this.tocentry.numbering;
|
||||
this._selectedFieldSetId = null;
|
||||
|
||||
let el = this.myElement.nativeElement.querySelector("#"+this.idprefix+this.tocentry.id);
|
||||
if(el){
|
||||
el.scrollIntoView({behavior: "smooth"});
|
||||
}
|
||||
}else if(this.tocentry.type === ToCEntryType.FieldSet){
|
||||
this.form = this.tocentry.form.parent.parent;
|
||||
const numberingArray = this.tocentry.numbering.split('.');
|
||||
|
|
@ -75,6 +112,13 @@ export class DatasetProfileEditorSectionFieldSetComponent extends BaseComponent
|
|||
// const element = document.getElementById(this.selectedFieldSetId);
|
||||
// element.scrollTop = element.scrollHeight;
|
||||
// }, 2000);
|
||||
|
||||
let el = this.myElement.nativeElement.querySelector("#"+this.idprefix+this.selectedFieldSetId);
|
||||
// let el = this.myElement.nativeElement.getElementbyId (this.selectedFieldSetId);
|
||||
|
||||
if(el){
|
||||
el.scrollIntoView({behavior: "smooth"});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,19 +38,45 @@
|
|||
</div>
|
||||
|
||||
<div class="col d-flex justify-content-end">
|
||||
<button mat-button class="navigate-btn" (click)="stepper.previous()">
|
||||
Previous
|
||||
<button mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
|
||||
<mat-icon>navigate_before</mat-icon> Previous
|
||||
</button>
|
||||
<button mat-button class="navigate-btn ml-2" (click)="stepper.next()">
|
||||
Next
|
||||
<button mat-button class="navigate-btn ml-2" (click)="validateStep(stepper.selected);stepper.next();" *ngIf="stepper.selectedIndex != (steps.length-1)">
|
||||
Next <mat-icon>navigate_next</mat-icon>
|
||||
</button>
|
||||
|
||||
|
||||
<ng-container *ngIf="stepper.selectedIndex === (steps.length-1)">
|
||||
<ng-container *ngIf="!viewOnly">
|
||||
|
||||
<button mat-button class="navigate-btn ml-2"
|
||||
(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
|
||||
translate}}</button>
|
||||
<button mat-button class="navigate-btn ml-2"
|
||||
(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
|
||||
translate}}</button>
|
||||
|
||||
</ng-container>
|
||||
<!-- SAVE BUTTON WHEN FINALIZED-->
|
||||
<ng-container *ngIf="showUpdateButton()">
|
||||
|
||||
<!-- <button mat-button class="navigate-btn ml-2"
|
||||
(click)='checkFormValidation()'
|
||||
[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button> -->
|
||||
<button mat-button class="navigate-btn ml-2"
|
||||
(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
|
||||
translate}}</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<mat-horizontal-stepper [linear]="true" #stepper class="stepper" (selectionChange)="onMatStepperSelectionChange($event)">
|
||||
|
||||
<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate">
|
||||
<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate" [stepControl]="basicInfo">
|
||||
<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
|
||||
</ng-template> -->
|
||||
<div class="row">
|
||||
|
|
@ -81,7 +107,7 @@
|
|||
|
||||
<div class="col-12">
|
||||
<!-- <div class="heading">1.3 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div> -->
|
||||
<div class="heading">1.3 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-LANGUAGE'| translate}}</div>
|
||||
<div class="heading">1.3 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-LANGUAGE'| translate}} *</div>
|
||||
<mat-form-field class="full-width">
|
||||
<!-- <input matInput formControlName="description" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-DESCRIPTION' | translate}}" required> -->
|
||||
<mat-select formControlName="language">
|
||||
|
|
@ -112,7 +138,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</mat-step> -->
|
||||
<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate">
|
||||
<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate" [stepControl]="form">
|
||||
<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template> -->
|
||||
<div class="row">
|
||||
|
||||
|
|
@ -211,7 +237,7 @@
|
|||
|
||||
<!-- TOOLBAR -->
|
||||
<div class="col-auto"
|
||||
*ngIf="((selectedTocEntry?.type == tocEntryEnumValues.Section)||(selectedTocEntry?.type == tocEntryEnumValues.FieldSet) )&&(selectedTocEntry?.subEntriesType != tocEntryEnumValues.Section)">
|
||||
*ngIf="((selectedTocEntry?.type == tocEntryEnumValues.Section)||(selectedTocEntry?.type == tocEntryEnumValues.FieldSet) )&&(selectedTocEntry?.subEntriesType != tocEntryEnumValues.Section) && !viewOnly">
|
||||
<div class="row" class="actions-list bg-white sticky-top" style="top: 2em;">
|
||||
<mat-list role="list">
|
||||
|
||||
|
|
|
|||
|
|
@ -534,10 +534,24 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
}
|
||||
|
||||
|
||||
|
||||
this.updateOrdinals(this.toCEntries);
|
||||
return this.toCEntries;
|
||||
}
|
||||
|
||||
private updateOrdinals(tocentries: ToCEntry[]){
|
||||
|
||||
if(!tocentries || !tocentries.length) return;
|
||||
tocentries.forEach((e,idx)=>{
|
||||
const ordinalControl = e.form.get('ordinal');
|
||||
if(ordinalControl){
|
||||
ordinalControl.setValue(idx);
|
||||
ordinalControl.updateValueAndValidity();
|
||||
}
|
||||
this.updateOrdinals(e.subEntries);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
toCEntries:ToCEntry[];
|
||||
|
||||
getTocEntries(): ToCEntry[] {
|
||||
|
|
@ -748,7 +762,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
const parentArray = parent.form.get('fieldSets') as FormArray;
|
||||
const addedFieldSet = parentArray.at(parentArray.length - 1);
|
||||
|
||||
// this.selectedTocEntry = this._findTocEntryById(addedFieldSet.get('id').value, this.getTocEntries());
|
||||
this.selectedTocEntry = this._findTocEntryById(addedFieldSet.get('id').value, this.getTocEntries());
|
||||
|
||||
break;
|
||||
|
||||
|
|
@ -800,6 +814,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
|
||||
if (pageIndex >= 0) {
|
||||
//remove page
|
||||
this._updateSelectedItem(tce);
|
||||
pages.removeAt(pageIndex);
|
||||
//clean up sections of removed page
|
||||
|
||||
|
|
@ -852,6 +867,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
const sections = (this.form.get('sections') as FormArray);
|
||||
|
||||
//remove section
|
||||
this._updateSelectedItem(tce);
|
||||
sections.removeAt(index);
|
||||
|
||||
//update ordinal
|
||||
|
|
@ -872,6 +888,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
}
|
||||
}
|
||||
if (index >= 0) {
|
||||
this._updateSelectedItem(tce);
|
||||
parentFormArray.removeAt(index);
|
||||
|
||||
//update odrinal
|
||||
|
|
@ -901,6 +918,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
}
|
||||
|
||||
if(idx>=0){//fieldset found
|
||||
this._updateSelectedItem(tce);
|
||||
parentFormArray.removeAt(idx);
|
||||
|
||||
//patching order
|
||||
|
|
@ -914,13 +932,38 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
}
|
||||
|
||||
//in case selectedtocentrhy is child of the removed element
|
||||
|
||||
this.refreshToCEntries();
|
||||
|
||||
}
|
||||
|
||||
|
||||
private _updateSelectedItem(tce: ToCEntry){
|
||||
|
||||
if(this.selectedTocEntry ){
|
||||
|
||||
if(this.tocEntryIsChildOf(this.selectedTocEntry,tce)){
|
||||
if(this.selectedTocEntry.type == ToCEntryType.Page){
|
||||
this.selectedTocEntry = null;
|
||||
}else{
|
||||
const parentId = tce.form.parent.parent.get('id').value;
|
||||
|
||||
//if first level section
|
||||
const firstLevelSections = (this.form.get('sections') as FormArray);
|
||||
let isFirstLevel: boolean = false;
|
||||
firstLevelSections.controls.forEach(section=>{
|
||||
if(section.get('id').value === tce.id){
|
||||
isFirstLevel = true;
|
||||
}
|
||||
});
|
||||
|
||||
let parentId = null;
|
||||
if(isFirstLevel){
|
||||
parentId = tce.form.get('page').value;
|
||||
}else{
|
||||
parentId = tce.form.parent.parent.get('id').value
|
||||
}
|
||||
|
||||
// const parentId = tce.form.parent.parent.get('id').value;
|
||||
if(parentId){
|
||||
const tocentries = this.getTocEntries();
|
||||
const parent = this._findTocEntryById(parentId, tocentries);
|
||||
|
|
@ -936,9 +979,6 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.refreshToCEntries();
|
||||
|
||||
}
|
||||
|
||||
tocEntryIsChildOf(testingChild: ToCEntry,parent: ToCEntry): boolean{
|
||||
|
|
@ -1202,6 +1242,29 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
return fieldsets;
|
||||
}
|
||||
|
||||
|
||||
|
||||
get basicInfo(){
|
||||
|
||||
const label = this.form.get('label');
|
||||
const description = this.form.get('description');
|
||||
const language = this.form.get('language');
|
||||
|
||||
|
||||
|
||||
const fg = new FormGroup({
|
||||
label: label,
|
||||
description: description,
|
||||
language: language
|
||||
})
|
||||
|
||||
return fg;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMatStepperSelectionChange(event: StepperSelectionEvent){
|
||||
|
||||
if(event.selectedIndex === 2){//preview selected
|
||||
|
|
@ -1235,9 +1298,13 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
const clonedForm = clonedModel.buildForm();
|
||||
parentArray.push(clonedForm);
|
||||
|
||||
//update tocentries and make selected tocentry the cloedn
|
||||
let entries = this.refreshToCEntries();
|
||||
|
||||
this.refreshToCEntries();
|
||||
|
||||
const entryfound = this._findTocEntryById(clonedForm.get('id').value, entries);
|
||||
if(entryfound){
|
||||
this.selectedTocEntry = entryfound;
|
||||
}
|
||||
|
||||
// //create one field form fieldset
|
||||
// const field: FieldEditorModel = new FieldEditorModel(); //to ask
|
||||
|
|
@ -1258,5 +1325,11 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
|
||||
|
||||
|
||||
}
|
||||
|
||||
validateStep(step: CdkStep){
|
||||
if(step.hasError){
|
||||
this.checkFormValidation();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,16 +2,16 @@
|
|||
display: inline-block !important;
|
||||
}
|
||||
|
||||
::ng-deep .status-form .mat-form-field-wrapper {
|
||||
background-color: white !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
// ::ng-deep .status-form .mat-form-field-wrapper {
|
||||
// background-color: white !important;
|
||||
// padding-bottom: 0 !important;
|
||||
// }
|
||||
|
||||
::ng-deep .search-form .mat-form-field-wrapper {
|
||||
background-color: white !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
// ::ng-deep .search-form .mat-form-field-wrapper {
|
||||
// background-color: white !important;
|
||||
// padding-bottom: 0 !important;
|
||||
// }
|
||||
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
padding: 0.3rem 0rem 0.6rem 0rem !important;
|
||||
}
|
||||
// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
// padding: 0.3rem 0rem 0.6rem 0rem !important;
|
||||
// }
|
||||
|
|
@ -11,7 +11,7 @@ import { takeUntil } from 'rxjs/operators';
|
|||
@Component({
|
||||
selector: 'app-dataset-profile-criteria-component',
|
||||
templateUrl: './dataset-profile.component.html',
|
||||
styleUrls: ['./dataset-profile.component.scss'],
|
||||
styleUrls: ['./dataset-profile.component.scss']
|
||||
})
|
||||
export class DatasetProfileCriteriaComponent extends BaseCriteriaComponent implements OnInit {
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
.mat-table {
|
||||
margin-top: 47px;
|
||||
margin-bottom: 20px;
|
||||
// margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
|
|
@ -73,32 +73,32 @@ mat-row:hover {
|
|||
flex-direction: row-reverse !important;
|
||||
justify-content: space-between !important;
|
||||
background-color: #f6f6f6;
|
||||
height: 30px;
|
||||
min-height: 30px !important;
|
||||
// height: 30px;
|
||||
// min-height: 30px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-page-size {
|
||||
height: 43px;
|
||||
}
|
||||
// ::ng-deep .mat-paginator-page-size {
|
||||
// height: 43px;
|
||||
// }
|
||||
|
||||
::ng-deep .mat-paginator-range-label {
|
||||
margin: 15px 32px 0 24px !important;
|
||||
}
|
||||
// ::ng-deep .mat-paginator-range-label {
|
||||
// margin: 15px 32px 0 24px !important;
|
||||
// }
|
||||
|
||||
::ng-deep .mat-paginator-range-actions {
|
||||
width: 55% !important;
|
||||
min-height: 43px !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
// ::ng-deep .mat-paginator-range-actions {
|
||||
// width: 55% !important;
|
||||
// min-height: 43px !important;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
|
||||
::ng-deep .mat-paginator-navigation-previous {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
// ::ng-deep .mat-paginator-navigation-previous {
|
||||
// margin-left: auto !important;
|
||||
// }
|
||||
|
||||
::ng-deep .mat-icon-button {
|
||||
height: 30px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
// ::ng-deep .mat-icon-button {
|
||||
// height: 30px !important;
|
||||
// font-size: 12px !important;
|
||||
// }
|
||||
|
||||
.import-btn {
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
|
|
|
|||
|
|
@ -55,3 +55,6 @@ import 'zone.js/dist/zone'; // Included with Angular CLI.
|
|||
* Need to import at least one locale-data with intl.
|
||||
*/
|
||||
//import 'intl/locale-data/jsonp/en';
|
||||
|
||||
|
||||
(window as any).global = window;//ng2-dragula
|
||||
|
|
@ -8,6 +8,37 @@
|
|||
// Guided Tour style
|
||||
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
|
||||
|
||||
@import '../node_modules/dragula/dist/dragula.css';
|
||||
|
||||
|
||||
/* in-flight clone */
|
||||
.gu-mirror {
|
||||
position: fixed !important;
|
||||
margin: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
opacity: 1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
||||
filter: alpha(opacity=80);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* high-performance display:none; helper */
|
||||
.gu-hide {
|
||||
left: -9999px !important;
|
||||
}
|
||||
/* added to mirrorContainer (default = body) while dragging */
|
||||
.gu-unselectable {
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
/* added to the source element while its mirror is dragged */
|
||||
.gu-transit {
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
|
||||
// Custom Theme
|
||||
// @import "./assets/scss/blue-theme.scss";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue