Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-21 00:52:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Ionic v6 breadcrumbs in catalog module

Browse Source
This commit is contained in:
Thea Schöbl
2022-04-13 14:10:16 +00:00
parent 552911cfcf
commit 7b491ed3bb
66 changed files with 653 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/modules/data/detail/data-detail-content.component.ts
View File

@@ -6,7 +6,7 @@
*
* 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 General Public Licens for
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with

2
src/app/modules/data/detail/data-detail.component.spec.ts
View File

@@ -6,7 +6,7 @@
*
* 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 General Public Licens for
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with

4
src/app/modules/data/detail/data-detail.component.ts
View File

@@ -6,7 +6,7 @@
*
* 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 General Public Licens for
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
@@ -25,9 +25,9 @@ import {ViewWillEnter, ModalController} from '@ionic/angular';
import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
import {
SCLanguageCode,
SCSaveableThing,
SCThings,
SCUuid,
SCSaveableThing,
} from '@openstapps/core';
import {DataProvider, DataScope} from '../data.provider';
import {FavoritesService} from '../../favorites/favorites.service';

26
src/app/modules/data/detail/data-detail.html
View File

@@ -1,7 +1,30 @@
<!--
~ Copyright (C) 2022 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ 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 General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<ion-header *ngIf="defaultHeader">
<ion-toolbar color="primary">
<ion-buttons slot="start" *ngIf="!isModal">
<ion-back-button></ion-back-button>
<ion-back-button
[defaultHref]="
item?.superCatalog
? ['/data-detail', item.superCatalog.uid]
: item?.catalogs && item?.catalogs.length === 1
? ['/data-detail', item.catalogs[0].uid]
: undefined
"
></ion-back-button>
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
@@ -42,6 +65,7 @@
<stapps-skeleton-simple-card></stapps-skeleton-simple-card>
</ng-container>
<ng-container *ngSwitchDefault>
<stapps-data-path [item]="item"></stapps-data-path>
<stapps-data-detail-content
[item]="item"
[contentTemplateRef]="contentTemplateRef"

82
src/app/modules/data/detail/data-path.component.ts Normal file
View File

@@ -0,0 +1,82 @@
/*
* Copyright (C) 2022 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* 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 General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Component, Input, OnInit} from '@angular/core';
import {RoutingStackService} from '../../../util/routing-stack.service';
import {
SCCatalog,
SCThings,
SCThingType,
SCThingWithoutReferences,
} from '@openstapps/core';
import {DataProvider, DataScope} from '../data.provider';
import {fromEvent, Observable} from 'rxjs';
import {map} from 'rxjs/operators';
@Component({
selector: 'stapps-data-path',
templateUrl: './data-path.html',
styleUrls: ['./data-path.scss'],
})
export class DataPathComponent implements OnInit {
path: Promise<SCThingWithoutReferences[]>;
$width: Observable<number>;
ngOnInit() {
this.$width = fromEvent(window, 'resize').pipe(
map(() => window.innerWidth),
);
}
@Input() set item(item: SCThings) {
// eslint-disable-next-line unicorn/prefer-ternary
if (item.type === SCThingType.Catalog && item.superCatalogs) {
this.path = new Promise(resolve =>
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
resolve([...item.superCatalogs!, item]),
);
} else if (
item.type === SCThingType.AcademicEvent &&
item.catalogs &&
(item.catalogs.length === 1 || this.routeStack.lastDataDetail)
) {
const catalogWithoutReferences = item.catalogs[0];
const catalogPromise = (
item.catalogs.length === 1
? this.dataProvider.get(
catalogWithoutReferences.uid,
DataScope.Remote,
)
: this.routeStack.lastDataDetail
) as Promise<SCCatalog>;
this.path = new Promise(async resolve => {
const catalog = await catalogPromise;
const superCatalogs = catalog.superCatalogs;
resolve(
superCatalogs
? [...superCatalogs, catalogWithoutReferences, item]
: [catalogWithoutReferences, item],
);
});
}
}
constructor(
readonly routeStack: RoutingStackService,
readonly dataProvider: DataProvider,
) {}
}

54
src/app/modules/data/detail/data-path.html Normal file
View File

@@ -0,0 +1,54 @@
<!--
~ Copyright (C) 2022 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ 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 General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<ng-container *ngIf="path | async as stack">
<ion-breadcrumbs
[itemsBeforeCollapse]="1"
[itemsAfterCollapse]="($width | async) >= 768 ? 1 : 0"
[maxItems]="2"
(ionCollapsedClick)="popover.present($event)"
>
<ion-breadcrumb *ngFor="let fragment of stack">
<ion-label
[routerLink]="['/data-detail', fragment.uid]"
[routerDirection]="'back'"
[style.max-width]="
stack.length === 1
? '100%'
: stack.length === 2
? '40vw'
: ($width | async) >= 768
? '30vw'
: 'calc(100vw - 120px)'
"
class="crumb-label"
>{{ 'name' | thingTranslate: $any(fragment) }}</ion-label
>
</ion-breadcrumb>
</ion-breadcrumbs>
<ion-popover #popover>
<ng-template>
<ion-list>
<ion-item
*ngFor="let fragment of stack"
(click)="popover.dismiss()"
[routerLink]="['/data-detail', fragment.uid]"
[routerDirection]="'back'"
>{{ 'name' | thingTranslate: $any(fragment) }}</ion-item
>
</ion-list>
</ng-template>
</ion-popover>
</ng-container>

21
src/app/modules/data/detail/data-path.scss Normal file
View File

@@ -0,0 +1,21 @@
/*!
* Copyright (C) 2022 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* 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 General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
.crumb-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}