From 2d1127851a1b5ebedaa9fe442a872671c72669fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Marie=CC=81thoz?= Date: Thu, 7 Nov 2024 16:26:10 +0100 Subject: [PATCH] prime: reduce bundle css (in progress) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Johnny Mariéthoz --- angular.json | 3 +- .../ng-core-tester/src/app/app.component.html | 2 +- .../ng-core-tester/src/app/app.component.ts | 2 +- .../src/app/record/editor/schema.json | 2 +- projects/ng-core-tester/src/styles.scss | 21 +--- .../rero/ng-core/assets/scss/_editor.scss | 33 +++-- projects/rero/ng-core/assets/scss/_theme.scss | 65 ++++++---- .../rero/ng-core/assets/scss/_typography.scss | 105 ++++++++-------- .../rero/ng-core/assets/scss/ng-core.scss | 3 + projects/rero/ng-core/ng-package.json | 2 +- .../lib/record/editor/editor.component.html | 35 +++--- .../lib/record/editor/editor.component.scss | 50 +------- .../src/lib/record/editor/editor.component.ts | 5 +- .../type/array-type/array-type.component.html | 2 +- .../type/markdown/markdown.component.ts | 2 +- .../type/multischema/multischema.component.ts | 2 +- .../object-type/object-type.component.html | 2 +- .../add-field-editor.component.html | 3 +- .../add-field-editor.component.ts | 15 +-- .../editor/widgets/label/label.component.html | 115 ++++++++++-------- .../editor/widgets/label/label.component.scss | 22 ---- .../editor/widgets/label/label.component.ts | 3 +- .../card-wrapper/card-wrapper.component.scss | 26 ++-- .../card-wrapper/card-wrapper.component.ts | 3 +- .../form-field-wrapper.component.ts | 26 ++-- .../buckets/buckets.component.html | 23 ++-- .../buckets/buckets.component.scss | 31 ----- .../aggregation/buckets/buckets.component.ts | 3 +- .../aggregation/slider/slider.component.html | 4 +- .../aggregation/slider/slider.component.scss | 20 --- .../aggregation/slider/slider.component.ts | 3 +- .../search/menu-sort/menu-sort.component.html | 6 +- .../search/menu-sort/menu-sort.component.ts | 39 +++--- .../search/record-search.component.html | 4 +- .../record/search/record-search.component.ts | 9 ++ 35 files changed, 315 insertions(+), 376 deletions(-) delete mode 100644 projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.scss delete mode 100644 projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.scss delete mode 100644 projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.scss diff --git a/angular.json b/angular.json index 131ed931..9a66d740 100644 --- a/angular.json +++ b/angular.json @@ -59,8 +59,7 @@ "allowedCommonJsDependencies": [ "crypto-js", "easymde", - "js-generate-password", - "moment" + "js-generate-password" ], "outputPath": "dist/ng-core-tester", "index": "projects/ng-core-tester/src/index.html", diff --git a/projects/ng-core-tester/src/app/app.component.html b/projects/ng-core-tester/src/app/app.component.html index b69e8965..00da2034 100644 --- a/projects/ng-core-tester/src/app/app.component.html +++ b/projects/ng-core-tester/src/app/app.component.html @@ -17,7 +17,7 @@ -
+
diff --git a/projects/ng-core-tester/src/app/app.component.ts b/projects/ng-core-tester/src/app/app.component.ts index fc82771a..4a53c7b6 100644 --- a/projects/ng-core-tester/src/app/app.component.ts +++ b/projects/ng-core-tester/src/app/app.component.ts @@ -14,7 +14,7 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import { Component, OnInit, inject } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation, inject } from '@angular/core'; import { CoreConfigService, RecordEvent, RecordService, TitleMetaService } from '@rero/ng-core'; import { MenuItem, MessageService } from 'primeng/api'; diff --git a/projects/ng-core-tester/src/app/record/editor/schema.json b/projects/ng-core-tester/src/app/record/editor/schema.json index b8c9aeae..e84e3603 100644 --- a/projects/ng-core-tester/src/app/record/editor/schema.json +++ b/projects/ng-core-tester/src/app/record/editor/schema.json @@ -262,7 +262,7 @@ "widget": { "formlyConfig": { "props": { - "cssClass": "border border-info rounded p-2" + "cssClass": "p-2" } } } diff --git a/projects/ng-core-tester/src/styles.scss b/projects/ng-core-tester/src/styles.scss index 2a23fd1a..f169d9cd 100644 --- a/projects/ng-core-tester/src/styles.scss +++ b/projects/ng-core-tester/src/styles.scss @@ -14,21 +14,12 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -$fa-font-path: "~font-awesome/fonts"; @import "font-awesome/scss/font-awesome.scss"; - -@import "node_modules/primeng/resources/primeng.min.css"; -@import "node_modules/primeflex/primeflex"; -@import "node_modules/primeicons/primeicons.css"; -@import "node_modules/primeng/resources/themes/aura-light-blue/theme.css"; -@import "../../rero/ng-core/assets/scss/ng-core.scss"; +@import "primeng/resources/primeng"; +@import "primeicons/primeicons.css"; +@import "primeng/resources/themes/aura-light-blue/theme.css"; @import "easymde/dist/easymde.min"; - -.p-menubar { - @extend .mb-0, .border-none, .bg-white; -} - -.container { - @extend .p-4, .border-1, .surface-border, .border-round-md; -} +@import "node_modules/ngx-spinner/animations/ball-zig-zag.css"; +@import "primeflex/primeflex"; +@import "projects/rero/ng-core/assets/scss/ng-core.scss"; diff --git a/projects/rero/ng-core/assets/scss/_editor.scss b/projects/rero/ng-core/assets/scss/_editor.scss index 27383725..e1519595 100644 --- a/projects/rero/ng-core/assets/scss/_editor.scss +++ b/projects/rero/ng-core/assets/scss/_editor.scss @@ -1,8 +1,27 @@ -ng-core-editor-formly-field-textarea, -ng-core-formly-field-primeng-input, -ng-core-tree-select, -ng-core-multi-select, -ng-core-primeng-select, -ng-core-date-picker { - @extend .w-full; +/* + * RERO angular core + * Copyright (C) 2024 RERO + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, version 3 of the License. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +@layer ng-core { + ng-core-editor-formly-field-textarea, + ng-core-formly-field-primeng-input, + ng-core-tree-select, + ng-core-multi-select, + ng-core-primeng-select, + ng-core-date-picker { + @extend .w-full; + } } diff --git a/projects/rero/ng-core/assets/scss/_theme.scss b/projects/rero/ng-core/assets/scss/_theme.scss index f7e0503a..e8ba1ca3 100644 --- a/projects/rero/ng-core/assets/scss/_theme.scss +++ b/projects/rero/ng-core/assets/scss/_theme.scss @@ -14,34 +14,51 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -@import 'primeflex/primeflex'; -:root { - font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; - --font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; -} -html, -body { - @extend .line-height-1, .text-sm; -} +@layer ng-core { + :root { + font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, + sans-serif; + --font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, + sans-serif; -a { - @extend .text-blue-500, .no-underline; -} + @extend .text-sm; -a:hover { - @extend .text-blue-600, .underline; -} + a { + @extend .text-blue-500, .no-underline; + } -.p-submenu-list { - z-index: 1000; -} + a:hover { + @extend .text-blue-600, .underline; + } -.p-menuitem { - a { - @extend .text-color; - } - a:hover { - @extend .no-underline; + .p-submenu-list { + z-index: 1000; + } + + .p-menuitem { + a { + @extend .text-color; + } + a:hover { + @extend .no-underline; + } + } + + dl.metadata { + @extend .grid, .my-0, .w-full; + dt { + @extend .font-bold, .col-12, .py-0; + @include styleclass('md:col-4'); + } + dd { + @extend .col-12, .py-0; + @include styleclass('md:col-8'); + margin-inline-start: 0; + } + } + .p-menubar { + @extend .mb-0, .border-none, .bg-white; + } } } diff --git a/projects/rero/ng-core/assets/scss/_typography.scss b/projects/rero/ng-core/assets/scss/_typography.scss index 94b524a6..619da83b 100644 --- a/projects/rero/ng-core/assets/scss/_typography.scss +++ b/projects/rero/ng-core/assets/scss/_typography.scss @@ -14,69 +14,76 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -@import "primeflex/primeflex"; +@layer ng-core { + :root { + h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + @extend .mt-0, .mb-2, .font-medium, .line-height-2; + } -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { - @extend .mt-0, .mb-2, .font-medium, .line-height-2; -} + h1, .h1 { + @extend .text-5xl; + } -h1, .h1 { - @extend .text-5xl; -} + h2, .h2 { + @extend .text-4xl; + } -h2, .h2 { - @extend .text-4xl; -} + h3, .h3 { + @extend .text-3xl; + } -h3, .h3 { - @extend .text-3xl; -} + h4, .h4 { + @extend .text-2xl; + } -h4, .h4 { - @extend .text-2xl; -} + h5, .h5 { + @extend .text-xl; + } -h5, .h5 { - @extend .text-xl; -} + h6, .h6 { + @extend .text-lg; + } -h6, .h6 { - @extend .text-lg; -} + // from aura-light-blue message theme + .text-info { + color: #2563eb; + } -// from aura-light-blue message theme -.text-info { - color: #2563eb; -} + .text-success { + color: #16a34a; + } -.text-success { - color: #16a34a; -} + .text-warning { + color: #ca8a04; + } -.text-warning { - color: #ca8a04; -} + .text-error { + color: #dc2626; + } -.text-error { - color: #dc2626; -} + .border-info { + border-color: #2563eb; + } -.text-link-color { - @extend .text-blue-500; -} + .border-success { + border-color: #16a34a; + } -.text-link-color-hover { - @extend .text-blue-600; -} + .border-warning { + border-color: #ca8a04; + } -.text-link { - @extend .text-link-color; - &:hover { - @extend .text-link-color-hover; - @extend .underline; - } -} + .border-error { + border-color: #dc2626; + } + .text-link { + @include styleclass('text-blue-500 hover:text-blue-600 hover:underline cursor-pointer'); + } + .text-link-secondary { + @include styleclass('text-color-secondary hover:text-blue-600 cursor-pointer'); + } + } +} diff --git a/projects/rero/ng-core/assets/scss/ng-core.scss b/projects/rero/ng-core/assets/scss/ng-core.scss index bfe01d10..2181f68a 100644 --- a/projects/rero/ng-core/assets/scss/ng-core.scss +++ b/projects/rero/ng-core/assets/scss/ng-core.scss @@ -18,3 +18,6 @@ @import "./_editor"; @import "./_theme"; @import "./_typography"; + +@import "../../src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss"; +@import "../../src/lib/record/editor/editor.component.scss"; diff --git a/projects/rero/ng-core/ng-package.json b/projects/rero/ng-core/ng-package.json index af14cf8b..c03b1172 100644 --- a/projects/rero/ng-core/ng-package.json +++ b/projects/rero/ng-core/ng-package.json @@ -1,7 +1,7 @@ { "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../../dist/rero/ng-core", - "assets": ["./assets"], + "assets": ["./assets", "./src/**/*.scss"], "lib": { "entryFile": "src/public-api.ts" } diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.html b/projects/rero/ng-core/src/lib/record/editor/editor.component.html index c79bccc0..529c4de6 100644 --- a/projects/rero/ng-core/src/lib/record/editor/editor.component.html +++ b/projects/rero/ng-core/src/lib/record/editor/editor.component.html @@ -15,9 +15,9 @@ along with this program. If not, see . -->
-
-
-
+
+
+
@if (rootField) { @@ -26,7 +26,7 @@ }
-
+
@if (editorSettings.longMode) { -
+
- - } @@ -96,6 +85,20 @@ (modelChange)="modelChanged($event)" />
+ + @if (editorSettings.longMode) { + + + }
@if (error) { diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.scss b/projects/rero/ng-core/src/lib/record/editor/editor.component.scss index 4253cc8c..1a654709 100644 --- a/projects/rero/ng-core/src/lib/record/editor/editor.component.scss +++ b/projects/rero/ng-core/src/lib/record/editor/editor.component.scss @@ -14,52 +14,12 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -@import 'primeflex/primeflex'; -@import '../../../../assets/scss/typography'; -.editor { - > .header { - @supports (position: sticky) { - @extend .sticky, .top-0, .bg-white, .h-full; - z-index: 500; - } - } - - .bd-toc { - @supports (position: sticky) { - @extend .sticky, .overflow-y-auto; - top: 4rem; - height: 100vh - 10vh; - } - @extend .flex-order-2, .py-2, .text-sm; - } - - ul.section-nav { - // bug of primeflex? - border-width: 0; - @extend .pl-0, .border-solid, .surface-border, .border-left-1; - } - - li.toc-entry { - @extend .mb-2, .ml-1, .mr-1, .list-none; - a { - @extend .text-color-secondary; - - &:hover { - @extend .text-link-color, .no-underline; - } - } - } - - // - // Left side navigation - // - - .bd-sidebar { - @supports (position: sticky) { - @extend .sticky, .bg-white, .h-full; - top: 4rem; - z-index: 500; +@layer ng-core { + ng-core-editor { + .bd-toc, .bd-sidebar { + top: 4rem; + height: 100vh - 10vh; } } } diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.ts b/projects/rero/ng-core/src/lib/record/editor/editor.component.ts index ac87a2a5..b00cc3e7 100644 --- a/projects/rero/ng-core/src/lib/record/editor/editor.component.ts +++ b/projects/rero/ng-core/src/lib/record/editor/editor.component.ts @@ -46,10 +46,7 @@ export interface JSONSchema7 extends JSONSchema7Base { @Component({ selector: 'ng-core-editor', - templateUrl: './editor.component.html', - styleUrls: ['./editor.component.scss'], - // make the style global: required by JSONSchema cssClass - encapsulation: ViewEncapsulation.None + templateUrl: './editor.component.html' }) export class EditorComponent extends AbstractCanDeactivateComponent implements OnInit, OnChanges, OnDestroy { diff --git a/projects/rero/ng-core/src/lib/record/editor/type/array-type/array-type.component.html b/projects/rero/ng-core/src/lib/record/editor/type/array-type/array-type.component.html index 57010e70..48afed67 100644 --- a/projects/rero/ng-core/src/lib/record/editor/type/array-type/array-type.component.html +++ b/projects/rero/ng-core/src/lib/record/editor/type/array-type/array-type.component.html @@ -23,7 +23,7 @@
@if (showError && formControl.errors) { -
+
} diff --git a/projects/rero/ng-core/src/lib/record/editor/type/markdown/markdown.component.ts b/projects/rero/ng-core/src/lib/record/editor/type/markdown/markdown.component.ts index 15ba7ab9..e82f3791 100644 --- a/projects/rero/ng-core/src/lib/record/editor/type/markdown/markdown.component.ts +++ b/projects/rero/ng-core/src/lib/record/editor/type/markdown/markdown.component.ts @@ -43,7 +43,7 @@ export interface FormlyTextAreaFieldConfig extends FormlyFieldConfig @if (showError) { -
+
} diff --git a/projects/rero/ng-core/src/lib/record/editor/type/multischema/multischema.component.ts b/projects/rero/ng-core/src/lib/record/editor/type/multischema/multischema.component.ts index 57fd433f..2faab052 100644 --- a/projects/rero/ng-core/src/lib/record/editor/type/multischema/multischema.component.ts +++ b/projects/rero/ng-core/src/lib/record/editor/type/multischema/multischema.component.ts @@ -24,7 +24,7 @@ import { FieldType, FormlyFieldConfig } from '@ngx-formly/core'; @if (props.label) { {{ props.label }} } @if (showError && formControl.errors) { -
+
} @for (f of field.fieldGroup; track f) { diff --git a/projects/rero/ng-core/src/lib/record/editor/type/object-type/object-type.component.html b/projects/rero/ng-core/src/lib/record/editor/type/object-type/object-type.component.html index 45c6e430..a62bf7d9 100644 --- a/projects/rero/ng-core/src/lib/record/editor/type/object-type/object-type.component.html +++ b/projects/rero/ng-core/src/lib/record/editor/type/object-type/object-type.component.html @@ -19,7 +19,7 @@ }
@if (showError && formControl.errors) { -
+
} diff --git a/projects/rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.html b/projects/rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.html index 13fa7c68..ddeea41b 100644 --- a/projects/rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.html +++ b/projects/rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.html @@ -16,9 +16,8 @@ --> . */ -import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, ElementRef, inject, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { FormlyFieldConfig } from '@ngx-formly/core'; import { TranslateService } from '@ngx-translate/core'; -import { AutoCompleteCompleteEvent, AutoCompleteSelectEvent } from 'primeng/autocomplete'; +import { AutoComplete, AutoCompleteCompleteEvent, AutoCompleteSelectEvent } from 'primeng/autocomplete'; import { DropdownChangeEvent } from 'primeng/dropdown'; import { Observable, Subscription } from 'rxjs'; import { map, tap } from 'rxjs/operators'; @@ -36,8 +36,6 @@ export class AddFieldEditorComponent implements OnInit, OnDestroy { /** EditorComponent function */ @Input() editorComponent: any; - currentValue: string = ''; - searchValue: string | undefined; items: any[] = []; @@ -52,6 +50,8 @@ export class AddFieldEditorComponent implements OnInit, OnDestroy { essentialsOptions = []; + @ViewChild("addField") autocomplete: AutoComplete; + onAddField(event: DropdownChangeEvent): void { this.editorComponentInstance.setHide(event.value, false); } @@ -89,11 +89,8 @@ export class AddFieldEditorComponent implements OnInit, OnDestroy { onSelect(event: AutoCompleteSelectEvent): void { this.editorComponentInstance.setHide(event.value, false); - this.currentValue = ''; - } - - addField(field: any): void { - this.editorComponentInstance.setHide(field, false); + console.log('clear'); + this.autocomplete.clear(); } /** diff --git a/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.html b/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.html index e7d17d9c..c26fca3b 100644 --- a/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.html +++ b/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.html @@ -15,57 +15,70 @@ along with this program. If not, see . --> @if (field) { - - @if (!isRoot()) { - - } - - - - - - -
- - -
- - - @if (canAddItem()) { - - } - @if (canAdd()) { - - } - - @if (canRemove()) { - - } - - - + +@if (!isRoot()) { + +} - - -
- @if (f.props.label) { - - @if (f.props.required && f.props.hideRequiredMarker !== true) { - * - } - @if (canAddItem()) { - - } - @if (canAdd()) { - - } - - @if (canRemove()) { - - } + + + + + +
+ + +
+ + + @if (canAddItem()) { + + } @if (canAdd()) { + } -
- + + @if (canRemove()) { + + } + + + + + + +
+ @if (f.props.label) { + + @if (f.props.required && f.props.hideRequiredMarker !== true) { * } @if (canAddItem()) { + + } @if (canAdd()) { + + } + + @if (canRemove()) { + + } } +
+ } diff --git a/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.scss b/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.scss deleted file mode 100644 index 0270fb56..00000000 --- a/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.scss +++ /dev/null @@ -1,22 +0,0 @@ -/* - * RERO angular core - * Copyright (C) 2024 RERO - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, version 3 of the License. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - */ - -:host ::ng-deep { - .p-button.p-button-icon-only { - width: 1.5rem; - } -} diff --git a/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.ts b/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.ts index f3fe8e0a..7c7fbb43 100644 --- a/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.ts +++ b/projects/rero/ng-core/src/lib/record/editor/widgets/label/label.component.ts @@ -21,8 +21,7 @@ import { MenuItem } from 'primeng/api'; @Component({ selector: 'ng-core-label-editor', - templateUrl: './label.component.html', - styleUrl: './label.component.scss' + templateUrl: './label.component.html' }) export class LabelComponent implements OnInit { diff --git a/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss b/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss index 74cf3348..2596fef5 100644 --- a/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss +++ b/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss @@ -15,16 +15,20 @@ * along with this program. If not, see . */ -@import 'primeflex/primeflex'; - -:host ::ng-deep { - ng-core-label-editor > div { - @extend .px-2; - } - span.p-fieldset-legend-text { - @extend .hidden; - } - .p-fieldset .p-fieldset-legend span { - @extend .p-0; +@layer ng-core { + ng-core-card-wrapper { + // primeng bug? + span.p-fieldset-legend-text { + @extend .hidden; + } + .p-fieldset .p-fieldset-legend { + @extend .m-0; + span { + @extend .p-0; + } + ng-core-label-editor > div, ng-core-editor-dropdown-label-editor > div { + @extend .ml-2; + } + } } } diff --git a/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.ts b/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.ts index 9fde7df9..cc7f4a67 100644 --- a/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.ts +++ b/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.ts @@ -27,8 +27,7 @@ import { FieldWrapper } from '@ngx-formly/core'; - `, - styleUrl: './card-wrapper.component.scss', + ` }) export class CardWrapperComponent extends FieldWrapper implements OnInit { /** OnInit hook */ diff --git a/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts b/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts index c1b7f12a..41385136 100644 --- a/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts +++ b/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts @@ -30,24 +30,26 @@ import { FieldWrapper } from '@ngx-formly/core'; } } -
-
+
+
-
- - @if (canAdd()) { - - } - - @if (canRemove() && props.hideLabel !== true) { - + @if (canAdd() || canRemove()) { +
+ + @if (canAdd()) { + + } + + @if (canRemove()) { + + } +
}
-
@if (showError) { -
+
} diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.html b/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.html index d5cda398..91a9412b 100644 --- a/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.html +++ b/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.html @@ -15,32 +15,29 @@ along with this program. If not, see . --> @if (buckets()) { -
    +
      @for (bucket of buckets()|slice:0:bucketSize; track bucket; let index = $index) { -
    • -
      +
    • @if (bucket.doc_count) { -
      +
      -
      -
      - {{ bucket.doc_count }} +
      + {{ bucket.doc_count }} +
      } -
      @if (displayChildren(bucket)) { @for (aggregation of bucketChildren[bucket.key]; track aggregation) { @@ -57,5 +54,7 @@
    } @if (displayMoreAndLessLink) { - +
    + {{ (moreMode ? 'more…' : 'less…') | translate }} +
    } diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.scss b/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.scss deleted file mode 100644 index fc27930e..00000000 --- a/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* - * RERO angular core - * Copyright (C) 2020 RERO - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, version 3 of the License. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - */ - -@import '../../../../../../assets/scss/typography'; - -.bucket-group { - .bucket-item { - .bucket-data { - &:hover { - @extend .text-link-color-hover; - .bucket-label { - cursor: pointer; - } - } - } - } -} diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.ts b/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.ts index ae712b17..01ea1525 100644 --- a/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.ts +++ b/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.ts @@ -20,8 +20,7 @@ import { AggregationsFilter, RecordSearchService } from '../../record-search.ser @Component({ selector: 'ng-core-record-search-aggregation-buckets', - templateUrl: './buckets.component.html', - styleUrls: ['./buckets.component.scss'] + templateUrl: './buckets.component.html' }) export class BucketsComponent implements OnInit, OnDestroy, OnChanges { diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.html b/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.html index 1d562e8b..0e229081 100644 --- a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.html +++ b/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.html @@ -17,14 +17,14 @@
    diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.scss b/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.scss deleted file mode 100644 index d98d8b41..00000000 --- a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.scss +++ /dev/null @@ -1,20 +0,0 @@ -/* - * RERO angular core - * Copyright (C) 2024 RERO - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, version 3 of the License. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - */ -:host ::ng-deep #year-min, -:host ::ng-deep #year-max { - width: 100px; -} diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.ts b/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.ts index d644703f..93330815 100644 --- a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.ts +++ b/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.ts @@ -20,8 +20,7 @@ import { RecordSearchService } from '../../record-search.service'; @Component({ selector: 'ng-core-aggregation-slider', - templateUrl: './slider.component.html', - styleUrl: './slider.component.scss' + templateUrl: './slider.component.html' }) export class AggregationSliderComponent implements OnDestroy, OnInit { diff --git a/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.html b/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.html index 08eaa145..10660a43 100644 --- a/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.html +++ b/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.html @@ -14,11 +14,11 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . --> -@if (sortOptions.length > 0) { +@if (options().length > 0) { diff --git a/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.ts b/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.ts index 9a5475d6..2534c8a9 100644 --- a/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.ts +++ b/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.ts @@ -14,7 +14,7 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import { Component, inject, input, output } from '@angular/core'; +import { Component, computed, inject, input, output } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { DropdownChangeEvent } from 'primeng/dropdown'; @@ -27,11 +27,6 @@ export interface ISortOption { icon?: string; } -interface IConfig { - sortOptions: ISortOption[], - [key:string]: any -}; - @Component({ selector: 'ng-core-menu-sort', templateUrl: './menu-sort.component.html' @@ -42,16 +37,18 @@ export class MenuSortComponent { protected activatedRoute: ActivatedRoute = inject(ActivatedRoute); /** Input */ - config = input.required(); - sortParamName = input('sort'); + config = input.required(); + selectedValue = input(); + selectedOption = computed(() => this.config().find((conf: ISortOption) => conf.value === this.selectedValue())); + options = computed(() => this.sortOptions()); /** Change event */ onChange = output(); /** Return the sort options from config. */ - get sortOptions(): ISortOption[] { - return (this.config().sortOptions) - ? this.config().sortOptions + sortOptions(): ISortOption[] { + return (this.config()) + ? this.config() .map((option: ISortOption) => { option.label = this.translateService.instant(option.label); return option; @@ -60,16 +57,16 @@ export class MenuSortComponent { : []; } - /** - * Return the current sort object. - * @returns SortOption - */ - get currentSortOption(): ISortOption { - const sortParam = this.activatedRoute.snapshot?.queryParamMap?.get(this.sortParamName()); - return (sortParam && this.config().sortOptions) - ? this.config().sortOptions.find((item: ISortOption) => item.value === sortParam) - : null; - } + // /** + // * Return the current sort object. + // * @returns SortOption + // */ + // get currentSortOption(): ISortOption { + // const sortParam = this.activatedRoute.snapshot?.queryParamMap?.get(this.sortParamName()); + // return (sortParam && this.config().sortOptions) + // ? this.config().sortOptions.find((item: ISortOption) => item.value === sortParam) + // : null; + // } /** * Change sorting with select a new value in dropdown menu diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.html b/projects/rero/ng-core/src/lib/record/search/record-search.component.html index 6881f27c..61c23d0c 100644 --- a/projects/rero/ng-core/src/lib/record/search/record-search.component.html +++ b/projects/rero/ng-core/src/lib/record/search/record-search.component.html @@ -69,8 +69,8 @@
    {{ availableTypes[0].label | translate }}
    /> } - @if (config.sortOptions && config.sortOptions.length > 0) { - + @if (config?.sortOptions?.length > 0) { + } diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts index 4cb21e36..0fcec5fa 100644 --- a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts +++ b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts @@ -47,6 +47,7 @@ import { ChangeEvent } from './paginator/paginator.component'; import { TabViewChangeEvent } from 'primeng/tabview'; import { IChecked } from './search-filters/search-filters.component'; import { DropdownChangeEvent } from 'primeng/dropdown'; +import { ISortOption } from './menu-sort/menu-sort.component'; export interface SearchParams { currentType: string; @@ -294,6 +295,13 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy { }); } + get selectedSortValue(): ISortOption { + const sortParam = this.activatedRoute.snapshot?.queryParamMap?.get('sort'); + return (sortParam && this.config.sortOptions) + ? this.config.sortOptions.find((item: ISortOption) => item.value === sortParam)?.value + : null; + } + // HOOKS ====================================================== /** @@ -498,6 +506,7 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy { this._searchParamsHasChanged(); } + /** * Change query text. * @param event - string, new query text