From a643076e022e0af852e2e612b4d55423e635ea86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Marie=CC=81thoz?= Date: Thu, 14 Nov 2024 15:10:45 +0100 Subject: [PATCH] prime: add usefull styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-by: Johnny Mariéthoz --- .../src/app/app-routing.module.ts | 8 +- .../ng-core-tester/src/app/app.component.html | 2 +- .../src/app/routes/documents-route.ts | 5 + .../app/search-bar/search-bar.component.html | 2 + .../app/search-bar/search-bar.component.ts | 31 +-- .../rero/ng-core/assets/scss/_editor.scss | 16 +- projects/rero/ng-core/assets/scss/_theme.scss | 84 ++++---- .../rero/ng-core/assets/scss/_typography.scss | 190 +++++++++++------- .../rero/ng-core/assets/scss/ng-core.scss | 2 + .../ng-core/src/lib/prime-ng-core-module.ts | 4 + .../lib/record/editor/editor.component.scss | 11 +- .../editor/formly/primeng/select/select.ts | 2 +- .../card-wrapper/card-wrapper.component.scss | 25 ++- .../form-field-wrapper.component.ts | 2 +- .../export-button.component.html | 18 +- .../search-autocomplete.component.scss | 20 ++ .../search-autocomplete.component.ts | 22 +- .../aggregation/aggregation.component.html | 9 +- .../buckets/buckets.component.html | 6 +- .../date-range/date-range.component.html | 30 ++- .../date-range/date-range.component.ts | 32 ++- .../aggregation/slider/slider.component.html | 26 +-- .../aggregation/slider/slider.component.ts | 2 +- .../search/menu-sort/menu-sort.component.html | 27 +-- .../search/menu-sort/menu-sort.component.ts | 39 +--- .../search/record-search-page.component.ts | 4 +- .../search/record-search.component.html | 6 +- .../record/search/record-search.component.ts | 6 +- .../record-search-result.component.html | 22 +- 29 files changed, 378 insertions(+), 275 deletions(-) create mode 100644 projects/rero/ng-core/src/lib/record/search-autocomplete/search-autocomplete.component.scss diff --git a/projects/ng-core-tester/src/app/app-routing.module.ts b/projects/ng-core-tester/src/app/app-routing.module.ts index 6daf00a7..f8bd3625 100644 --- a/projects/ng-core-tester/src/app/app-routing.module.ts +++ b/projects/ng-core-tester/src/app/app-routing.module.ts @@ -371,23 +371,23 @@ const routes: Routes = [ label: 'Relevance', value: 'relevance', defaultQuery: true, - icon: 'fa-sort-amount-desc' + icon: 'fa fa-sort-amount-desc' }, { label: 'Date descending', value: 'newest', defaultNoQuery: true, - icon: 'fa-sort-amount-desc' + icon: 'fa fa-sort-amount-desc' }, { label: 'Date ascending', value: 'oldest', - icon: 'fa-sort-amount-asc' + icon: 'fa fa-sort-amount-asc' }, { label: 'Title', value: 'title', - icon: 'fa-sort-alpha-asc' + icon: 'fa fa-sort-alpha-asc' } ], exportFormats: [ diff --git a/projects/ng-core-tester/src/app/app.component.html b/projects/ng-core-tester/src/app/app.component.html index 00da2034..8b6617f3 100644 --- a/projects/ng-core-tester/src/app/app.component.html +++ b/projects/ng-core-tester/src/app/app.component.html @@ -23,7 +23,7 @@
- +
diff --git a/projects/ng-core-tester/src/app/routes/documents-route.ts b/projects/ng-core-tester/src/app/routes/documents-route.ts index 6e6b37ad..9245ff62 100644 --- a/projects/ng-core-tester/src/app/routes/documents-route.ts +++ b/projects/ng-core-tester/src/app/routes/documents-route.ts @@ -70,12 +70,17 @@ export class DocumentsRoute implements RouteInterface { aggregationsOrder: [ 'document_type', 'author', + 'year', + 'acquisition', 'library', 'organisation', 'language', 'subject', 'status' ], + listHeaders: { + Accept: 'application/rero+json, application/json' + }, aggregationsExpand: ['document_type'], aggregationsBucketSize: 5, preprocessRecordEditor: (record: any): any => { diff --git a/projects/ng-core-tester/src/app/search-bar/search-bar.component.html b/projects/ng-core-tester/src/app/search-bar/search-bar.component.html index 58b471e4..5f84f097 100644 --- a/projects/ng-core-tester/src/app/search-bar/search-bar.component.html +++ b/projects/ng-core-tester/src/app/search-bar/search-bar.component.html @@ -18,5 +18,7 @@ [recordTypes]="recordTypes" scrollHeight="400px" (onSelect)="onSelect($event)" + (onSearch)="onSearch($event)" + inputStyleClass="text-lg" [value]="value" /> diff --git a/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts b/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts index 04989f09..75b12842 100644 --- a/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts +++ b/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts @@ -44,20 +44,27 @@ export class SearchBarComponent implements OnInit { this.recordTypes = [ { index: 'documents', - field: 'title', + field: 'autocomplete_title', groupLabel: this.translateService.instant('Documents'), processSuggestions: (data: any, query: string) => this.processDocuments(data, query), preFilters: this.viewcode() ? { view: this.viewcode() } : {} }, { - index: 'organisations', - field: 'name', - groupLabel: this.translateService.instant('Organisations'), - processSuggestions: (data: any) => this.processOrganisations(data), + index: 'entities', + field: 'autocomplete_name', + groupLabel: this.translateService.instant('Entities'), + processSuggestions: (data: any) => this.processEntities(data), preFilters: this.viewcode() ? { view: this.viewcode() } : {} } ]; } + onSearch(query) { + this.router.navigate(['/record', 'search', 'documents'], { + queryParams: { + q: query + } + }); + } onSelect(event: IAutoComplete) { const label = event.originalLabel ? event.originalLabel : event.label; @@ -73,11 +80,11 @@ export class SearchBarComponent implements OnInit { }); this.router.navigate(['/record', 'search', 'documents', 'detail', event.value]); break; - case 'organisations': + case 'entities': this.messageService.add({ severity: 'success', - summary: 'ORGANISATIONS', - detail: 'navigate to organisation: ' + event.value, + summary: 'ENTITIES', + detail: 'navigate to entity: ' + event.value, life: CONFIG.MESSAGE_LIFE }); break; @@ -100,14 +107,14 @@ export class SearchBarComponent implements OnInit { return values; } - private processOrganisations(data: Record): any { + private processEntities(data: Record): any { const values: IAutoComplete[] = []; data.hits.hits.map((hit: any) => { values.push({ - iconClass: 'fa fa-industry', + iconClass: 'fa fa-user', id: hit.metadata.pid, - index: 'organisations', - label: hit.metadata.name, + index: 'entities', + label: hit.metadata.authorized_access_point_en, value: hit.metadata.pid, }); }); diff --git a/projects/rero/ng-core/assets/scss/_editor.scss b/projects/rero/ng-core/assets/scss/_editor.scss index e1519595..57a4c2e7 100644 --- a/projects/rero/ng-core/assets/scss/_editor.scss +++ b/projects/rero/ng-core/assets/scss/_editor.scss @@ -15,13 +15,11 @@ * 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; - } +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 e8ba1ca3..17554999 100644 --- a/projects/rero/ng-core/assets/scss/_theme.scss +++ b/projects/rero/ng-core/assets/scss/_theme.scss @@ -15,50 +15,54 @@ * along with this program. If not, see . */ -@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 .no-underline; + } - @extend .text-sm; - - a { - @extend .text-blue-500, .no-underline; - } +a:not(.p-button):not(.p-element):not([role=button]):not([role=tab]) { + color: var(--blue-500); +} - a:hover { - @extend .text-blue-600, .underline; - } +a:hover:not(.p-button):not(.p-element):not([role=button]):not([role=tab]) { + color: var(--blue-600); + @extend .text-blue-600, .underline; +} - .p-submenu-list { - z-index: 1000; - } +.p-submenu-list { + z-index: 1000; +} - .p-menuitem { - a { - @extend .text-color; - } - a:hover { - @extend .no-underline; - } - } +.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; - } +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, .m-0; + @include styleclass('md:col-8'); + } +} + +.p-menubar { + @extend .mb-0, .border-none, .bg-white; +} + +// bootstrap patches +label { + @extend .m-0; +} + +legend { + @extend .text-base; + width: auto; } diff --git a/projects/rero/ng-core/assets/scss/_typography.scss b/projects/rero/ng-core/assets/scss/_typography.scss index 619da83b..6b1b8792 100644 --- a/projects/rero/ng-core/assets/scss/_typography.scss +++ b/projects/rero/ng-core/assets/scss/_typography.scss @@ -15,75 +15,125 @@ * along with this program. If not, see . */ -@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, .h1 { - @extend .text-5xl; - } - - h2, .h2 { - @extend .text-4xl; - } - - h3, .h3 { - @extend .text-3xl; - } - - h4, .h4 { - @extend .text-2xl; - } - - h5, .h5 { - @extend .text-xl; - } - - h6, .h6 { - @extend .text-lg; - } - - // from aura-light-blue message theme - .text-info { - color: #2563eb; - } - - .text-success { - color: #16a34a; - } - - .text-warning { - color: #ca8a04; - } - - .text-error { - color: #dc2626; - } - - .border-info { - border-color: #2563eb; - } - - .border-success { - border-color: #16a34a; - } - - .border-warning { - border-color: #ca8a04; - } - - .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'); - } +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; +} + +h2, +.h2 { + @extend .text-4xl; +} + +h3, +.h3 { + @extend .text-3xl; +} + +h4, +.h4 { + @extend .text-2xl; +} + +h5, +.h5 { + @extend .text-xl; +} + +h6, +.h6 { + @extend .text-lg; +} + +// from aura-light-blue message theme +.text-info { + color: #2563eb; +} + +.text-success { + color: #16a34a; +} + +.text-warning { + color: #ca8a04; +} + +.text-error { + color: #dc2626; +} + +.border-info { + border-color: #2563eb; +} + +.border-success { + border-color: #16a34a; +} + +.border-warning { + border-color: #ca8a04; +} + +.border-error { + border-color: #dc2626; +} + +.background-info { + background-color: #2563eb; +} + +.background-success { + background-color: #16a34a; +} + +.background-warning { + background-color: #ca8a04; +} + +.background-error { + background-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'); +} + +.alternate-color > *:nth-child(even) { + @extend .surface-100; +} + +.p-card-body-p-0 { + .p-card-body { + @extend .p-0; + } +} + +.bg-transparent { + background-color: transparent; +} + +.time-line-30 { + .p-timeline-event-opposite { + width: 30%; + @extend .flex-initial; } } diff --git a/projects/rero/ng-core/assets/scss/ng-core.scss b/projects/rero/ng-core/assets/scss/ng-core.scss index 2181f68a..fa11d9db 100644 --- a/projects/rero/ng-core/assets/scss/ng-core.scss +++ b/projects/rero/ng-core/assets/scss/ng-core.scss @@ -21,3 +21,5 @@ @import "../../src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss"; @import "../../src/lib/record/editor/editor.component.scss"; +@import "../../src/lib/record/search-autocomplete/search-autocomplete.component.scss"; + diff --git a/projects/rero/ng-core/src/lib/prime-ng-core-module.ts b/projects/rero/ng-core/src/lib/prime-ng-core-module.ts index 6b66ec70..c8187318 100644 --- a/projects/rero/ng-core/src/lib/prime-ng-core-module.ts +++ b/projects/rero/ng-core/src/lib/prime-ng-core-module.ts @@ -26,6 +26,7 @@ import { CardModule } from 'primeng/card'; import { CheckboxModule } from 'primeng/checkbox'; import { ConfirmDialogModule } from 'primeng/confirmdialog'; import { DialogModule } from 'primeng/dialog'; +import { DividerModule } from 'primeng/divider'; import { DropdownModule } from "primeng/dropdown"; import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog'; import { InputGroupModule } from 'primeng/inputgroup'; @@ -46,6 +47,7 @@ import { ToastModule } from 'primeng/toast'; import { TooltipModule } from 'primeng/tooltip'; import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; import { FieldsetModule } from 'primeng/fieldset'; +import { MenuModule } from 'primeng/menu'; @NgModule({ @@ -65,6 +67,7 @@ import { FieldsetModule } from 'primeng/fieldset'; ClipboardModule, ConfirmDialogModule, DialogModule, + DividerModule, DropdownModule, DynamicDialogModule, FieldsetModule, @@ -85,6 +88,7 @@ import { FieldsetModule } from 'primeng/fieldset'; ToastModule, TooltipModule, TriStateCheckboxModule, + MenuModule ] }) export class PrimeNgCoreModule { } 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 1a654709..6394f1bf 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 @@ -15,11 +15,10 @@ * along with this program. If not, see . */ -@layer ng-core { - ng-core-editor { - .bd-toc, .bd-sidebar { - top: 4rem; - height: 100vh - 10vh; - } +ng-core-editor { + .bd-toc, + .bd-sidebar { + top: 4rem; + height: 100vh - 10vh; } } diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts index 8b1eff19..4e61906d 100644 --- a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts +++ b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts @@ -54,7 +54,7 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig +
. */ -@layer ng-core { - ng-core-card-wrapper { - // primeng bug? - span.p-fieldset-legend-text { - @extend .hidden; +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; } - .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; - } + 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/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 41385136..d1439677 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 @@ -20,7 +20,7 @@ import { FieldWrapper } from '@ngx-formly/core'; @Component({ selector: 'ng-core-form-field-wrapper', template: ` -
+
@if (props.label && props.hideLabel !== true) {
} @else { - +
@switch (aggregation().type) { @case ('range') { +
+ } 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 91a9412b..1efcbda7 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,11 +15,11 @@ 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) { -
      +
      - {{ (moreMode ? 'more…' : 'less…') | translate }} + {{ (moreMode ? 'more…' : 'less…') | translate }}
      } diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.html b/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.html index ab353490..d058f0d4 100644 --- a/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.html +++ b/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.html @@ -16,16 +16,26 @@ along with this program. If not, see . --> -
      -
      - - @if (hasQueryParam) { - - } -
      + [showIcon]="true" + [readonlyInput]="true" > + + +
      + @for (cfg of buttonConfig; track cfg) { +
      + +
      + } +
      +       + +
      + + @if (hasQueryParam) { + + }
      diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.ts b/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.ts index f4782dac..353db6b8 100644 --- a/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.ts +++ b/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.ts @@ -18,6 +18,7 @@ import { Component, OnDestroy, OnInit, inject, input } from '@angular/core'; import { Subscription } from 'rxjs'; import { RecordSearchService } from '../../record-search.service'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'ng-core-aggregation-date-range', @@ -26,6 +27,7 @@ import { RecordSearchService } from '../../record-search.service'; export class AggregationDateRangeComponent implements OnInit, OnDestroy { protected recordSearchService: RecordSearchService = inject(RecordSearchService); + protected translateService: TranslateService = inject(TranslateService); // COMPONENTS ATTRIBUTES ==================================================== // Buckets list @@ -44,6 +46,7 @@ export class AggregationDateRangeComponent implements OnInit, OnDestroy { /** True if route have aggregation query param. */ hasQueryParam = false; + buttonConfig = []; /** Subscription to search service. */ private searchServiceSubscription: Subscription; @@ -53,10 +56,15 @@ export class AggregationDateRangeComponent implements OnInit, OnDestroy { // Define min/max values if not exists if (this.config().min && this.config().min !== null) { this.minDate = new Date(this.config().min); + } else{ + this.minDate = new Date(1900, 0, 0); } if (this.config().max && this.config().max !== null) { this.maxDate = new Date(this.config().max); + } else { + this.maxDate = new Date(); } + this.dateRangeModel = [this.minDate, this.maxDate]; this.searchServiceSubscription = this.recordSearchService.aggregationsFilters.subscribe((filters: any) => { if (!filters) { @@ -66,10 +74,30 @@ export class AggregationDateRangeComponent implements OnInit, OnDestroy { this.hasQueryParam = filter !== undefined; this.dateRangeModel = (filter) ? filter.values[0].split('--').map((item: string) => new Date(+item)) // split filter data and transform each part into Date - : []; + : [this.minDate, this.maxDate]; }); + const today = new Date(); + this.buttonConfig = [ + { + value: [new Date(new Date().setDate(today.getDate() - 31)), today], + label: this.translateService.instant('Last month') + }, { + value: [new Date(new Date().setDate(today.getDate() - 366)), today], + label: this.translateService.instant('Last year') + }, { + value: [new Date(today.getFullYear(), today.getMonth(), 1), new Date(today.getFullYear(), today.getMonth() + 1, 0)], + label: this.translateService.instant('This month') + }, + { + value: [new Date(today.getFullYear(), 0, 1), new Date(today.getFullYear() + 1, 0, 1)], + label: this.translateService.instant('This year') + } + ]; + } + setRange(value) { + this.dateRangeModel = value; + this.updateFilter(); } - /** OnDestroy hook */ ngOnDestroy(): void { this.searchServiceSubscription.unsubscribe(); 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 0e229081..6e9e900a 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 @@ -14,27 +14,23 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . --> -
      -
      + -
      -
      -
      -
      -
      -
      - + +
      + @if (hasQueryParam) { - + } -
      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 93330815..9fe8c738 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 @@ -58,7 +58,7 @@ export class AggregationSliderComponent implements OnDestroy, OnInit { if (!filters) { return; } - let filter = filters.find((element: any) => element.key === this.key); + let filter = filters.find((element: any) => element.key === this.key()); if (filter) { filter = filter.values[0].split('--').map((item: string) => +item); this.hasQueryParam = true; 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 10660a43..263eb2ec 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 @@ -15,23 +15,14 @@ along with this program. If not, see . --> @if (options().length > 0) { - - - @if(item.icon) { - + + +
      + @if (selectedOption()?.icon) { + } - {{ item.label }} - - - @if(item.icon) { - - } - {{item.label }} - - + {{ selectedOption()?.label | translate }} … + +
      +       } 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 2534c8a9..e09de98a 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 @@ -17,15 +17,7 @@ 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'; - -export interface ISortOption { - value: string; - label: string; - defaultQuery?: boolean; - defaultNoQuery?: boolean; - icon?: string; -} +import { MenuItem, MenuItemCommandEvent } from 'primeng/api'; @Component({ selector: 'ng-core-menu-sort', @@ -37,42 +29,25 @@ export class MenuSortComponent { protected activatedRoute: ActivatedRoute = inject(ActivatedRoute); /** Input */ - config = input.required(); + config = input.required(); selectedValue = input(); - selectedOption = computed(() => this.config().find((conf: ISortOption) => conf.value === this.selectedValue())); + selectedOption = computed(() => this.config().find((conf: MenuItem) => conf.value === this.selectedValue())); options = computed(() => this.sortOptions()); /** Change event */ onChange = output(); /** Return the sort options from config. */ - sortOptions(): ISortOption[] { + sortOptions(): MenuItem[] { return (this.config()) ? this.config() - .map((option: ISortOption) => { + .map((option: MenuItem) => { option.label = this.translateService.instant(option.label); + option.command = (event: MenuItemCommandEvent) => this.onChange.emit(event.item.value); return option; }) - .sort((a: ISortOption, b: ISortOption) => a.label.localeCompare(b.label)) + .sort((a: MenuItem, b: MenuItem) => a.label.localeCompare(b.label)) : []; } - // /** - // * 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 - * @param dropdownEvent - DropdownChangeEvent - */ - changeSorting(dropdownEvent: DropdownChangeEvent): void { - this.onChange.emit(dropdownEvent.value); - } } diff --git a/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts index 4c0cba49..a15a31f0 100644 --- a/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts +++ b/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts @@ -17,11 +17,11 @@ import { Component, inject, OnDestroy, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { FormlyFieldConfig } from '@ngx-formly/core'; +import { MenuItem } from 'primeng/api'; import { combineLatest, Subscription } from 'rxjs'; import { ActionStatus } from '../action-status'; import { JSONSchema7 } from '../editor/editor.component'; import { RecordUiService } from '../record-ui.service'; -import { ISortOption } from './menu-sort/menu-sort.component'; import { RecordSearchService } from './record-search.service'; @Component({ @@ -241,7 +241,7 @@ export class RecordSearchPageComponent implements OnInit, OnDestroy { } const defaultSortValue = this.q ? 'defaultQuery' : 'defaultNoQuery'; - config.sortOptions.forEach((option: ISortOption) => { + config.sortOptions.forEach((option: MenuItem) => { if (option[defaultSortValue] === true) { this.sort = option.value; } 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 61c23d0c..53da9d3e 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 @@ -88,7 +88,7 @@
      {{ availableTypes[0].label | translate }}
      /> @if ((aggregations && aggregations.length) || searchFields.length > 0 || searchFilters.length > 0) { -
      +
      @if (searchFields.length > 0 && q) {
      Search in @@ -126,7 +126,7 @@
      {{ availableTypes[0].label | translate }}
      } }
      } -
      +
      @if (showEmptySearchMessage) { {{ availableTypes[0].label | translate }} /> } - +
        @for (record of records; track record ; let first = $first) { 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 0fcec5fa..e5e2c78e 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,7 +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'; +import { MenuItem } from 'primeng/api'; export interface SearchParams { currentType: string; @@ -295,10 +295,10 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy { }); } - get selectedSortValue(): ISortOption { + get selectedSortValue(): MenuItem { const sortParam = this.activatedRoute.snapshot?.queryParamMap?.get('sort'); return (sortParam && this.config.sortOptions) - ? this.config.sortOptions.find((item: ISortOption) => item.value === sortParam)?.value + ? this.config.sortOptions.find((item: MenuItem) => item.value === sortParam)?.value : null; } diff --git a/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html b/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html index 2f492f46..436cb0d5 100644 --- a/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html +++ b/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html @@ -16,10 +16,10 @@ along with this program. If not, see . -->
        -
        +
        -
        +
        @if (adminMode.can) { @if (useStatus && useStatus.can && useStatus.url) { @@ -45,17 +45,13 @@ @if (deleteStatus) { - - @if (deleteStatus) { - - } - + } }