diff --git a/dmp-frontend/package.json b/dmp-frontend/package.json index 2f48fb926..ed4ad77f2 100644 --- a/dmp-frontend/package.json +++ b/dmp-frontend/package.json @@ -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", diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index 3582aa783..d5ad06c43 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/dmp-frontend/src/app/app.module.ts @@ -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, diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts index c21924a45..07218c7ce 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts @@ -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, diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html index 811afbb14..13ddfd298 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html @@ -260,8 +260,8 @@ -
  • - folder +
  • + folder
  • - Comment Field + Comment Field
  • - + multiplicity
  • - more_vert + more_vert Description diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html index fc0768d15..37ef98268 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html @@ -4,16 +4,16 @@
      -
    • - +
    • + Required
      • -
    • - visibility +
    • + visibility
      • -
    • - delete +
    • + delete
    diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html index afd096ea5..48ec99375 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html @@ -1,7 +1,7 @@ -
    +
    - + -
    +
    + + + + + + + +
    - +
    @@ -81,7 +107,7 @@
    -
    1.3 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-LANGUAGE'| translate}}
    +
    1.3 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-LANGUAGE'| translate}} *
    @@ -112,7 +138,7 @@
    --> - +
    @@ -211,7 +237,7 @@
    + *ngIf="((selectedTocEntry?.type == tocEntryEnumValues.Section)||(selectedTocEntry?.type == tocEntryEnumValues.FieldSet) )&&(selectedTocEntry?.subEntriesType != tocEntryEnumValues.Section) && !viewOnly">
    diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts index 937e6117a..8ab289d6c 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts @@ -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,7 +1242,30 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn return fieldsets; } - onMatStepperSelectionChange(event: StepperSelectionEvent){ + + + 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 this.generatePreviewForm();//TODO LAZY LOADING IN THE TEMPLATE @@ -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(); + } } } \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss index 0f748ac5b..8aabe0b96 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss @@ -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; -} \ No newline at end of file +// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { +// padding: 0.3rem 0rem 0.6rem 0rem !important; +// } \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.ts index 7f3116f7e..7cf625f1f 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.ts @@ -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 { diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss index 5696518c5..8026d4970 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss @@ -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; diff --git a/dmp-frontend/src/polyfills.ts b/dmp-frontend/src/polyfills.ts index fa3cd0117..adefaa3b1 100644 --- a/dmp-frontend/src/polyfills.ts +++ b/dmp-frontend/src/polyfills.ts @@ -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 \ No newline at end of file diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss index cc68453bc..b096eacdd 100644 --- a/dmp-frontend/src/styles.scss +++ b/dmp-frontend/src/styles.scss @@ -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";