From edd2ccffe93b21a9eb892eb6fa3c340d15cc020f Mon Sep 17 00:00:00 2001 From: Rainer Killinger Date: Mon, 21 Mar 2022 11:23:07 +0000 Subject: [PATCH] refactor: update to ionic v6 --- package-lock.json | 152 +++++++++++++----- package.json | 2 +- .../data/detail/data-detail.component.ts | 24 ++- src/app/modules/data/detail/data-detail.html | 9 +- .../data/list/search-page.component.ts | 5 + src/app/modules/data/list/search-page.html | 2 +- .../modules/data/list/simple-data-list.html | 19 ++- .../daia-availability.component.ts | 11 +- .../hebis-detail/hebis-detail.component.ts | 11 +- .../modules/map/item/map-item.component.html | 30 +++- .../modules/map/item/map-item.component.ts | 15 +- .../modules/map/page/map-page.component.ts | 61 ++----- src/app/modules/map/page/map-page.html | 34 +++- .../page/modals/map-list-modal.component.ts | 11 +- src/app/modules/map/page/modals/map-list.html | 46 ++++-- src/app/modules/map/page/modals/map-list.scss | 20 +++ .../page/modals/map-single-modal.component.ts | 8 +- .../modules/map/page/modals/map-single.html | 4 +- .../modules/schedule/page/calendar-view.html | 36 +++-- .../modal/modal-event-creator.component.ts | 39 ++++- .../page/modal/modal-event-creator.html | 3 +- .../page/modal/modal-event-creator.scss | 8 +- .../schedule/page/schedule-page.component.ts | 87 +--------- .../modules/schedule/page/schedule-page.html | 20 ++- .../modules/schedule/page/schedule-page.scss | 29 ++-- 25 files changed, 401 insertions(+), 285 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7a456e38..fd881143 100644 --- a/package-lock.json +++ b/package-lock.json @@ -601,6 +601,13 @@ "integrity": "sha512-HVi3RBaT3srGKXssWnnxpE+yKbcejHI4Ymt1JefeubJ883B6siVBWIxAg8fXk82QO0+sBQKpoIu7ISfYszK6mA==", "requires": { "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=" + } } }, "@awesome-cordova-plugins/core": { @@ -609,6 +616,13 @@ "integrity": "sha512-tk5QlnXfSE2Zu3mJVC3f11Guu5iqnLtNkvvClNHjz/e4FsJEmprfXWCv/QImWs5fLsismHcn31LKYBfWIhOv9g==", "requires": { "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=" + } } }, "@babel/code-frame": { @@ -2499,6 +2513,16 @@ "serve-index": "^1.9.1" }, "dependencies": { + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dev": true, + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -2545,6 +2569,12 @@ "is-wsl": "^2.2.0" } }, + "proxy-middleware": { + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz", + "integrity": "sha1-o/3xvvtzD5UZZYcqwvYHTGFHelY=", + "dev": true + }, "send": { "version": "0.17.2", "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz", @@ -2799,6 +2829,13 @@ "integrity": "sha512-lOrkktadlKYbYf1LrDyAtsu1JnQ0oCCdkOU7iHQ8oXnNOkMwobFfD2m62F1CoOr0u9LIkpYnZSPjng8lZbmbNw==", "requires": { "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=" + } } }, "@ionic-native/file-opener": { @@ -2807,6 +2844,13 @@ "integrity": "sha512-UKp3pbqvQXsAtLMJ5JE+KcTMxpjSZMFebf6nvy/KJvwy85JGIaCV4ZVM/H9CFUrHJMWBH6wDbY+WPygnsrl4Yg==", "requires": { "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=" + } } }, "@ionic-native/http": { @@ -2816,6 +2860,14 @@ "optional": true, "requires": { "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=", + "optional": true + } } }, "@ionic-native/in-app-browser": { @@ -2825,6 +2877,14 @@ "optional": true, "requires": { "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=", + "optional": true + } } }, "@ionic-native/safari-view-controller": { @@ -2834,6 +2894,14 @@ "optional": true, "requires": { "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=", + "optional": true + } } }, "@ionic-native/secure-storage": { @@ -2843,22 +2911,24 @@ "optional": true, "requires": { "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=", + "optional": true + } } }, "@ionic/angular": { - "version": "5.9.3", - "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-5.9.3.tgz", - "integrity": "sha512-0j4JZeGHpRvaTH0iyLTiUc4TF01bGVmk0zHZA7qS/OpS/WnGRHYNpVX/F75oODfckNvAa9uacoIMOTu54Cpx3w==", + "version": "6.0.8", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-6.0.8.tgz", + "integrity": "sha512-sPXQ17SCym0Skx1vbFmhHyPCNH5NoKIyuHee8ROZcTvNizavJYajoU+YTcr6v3w37CecsTz/JgpCXbAUHxxrcQ==", "requires": { - "@ionic/core": "5.9.3", - "tslib": "^1.9.3" - }, - "dependencies": { - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - } + "@ionic/core": "^6.0.8", + "jsonc-parser": "^3.0.0", + "tslib": "^2.0.0" } }, "@ionic/angular-toolkit": { @@ -3016,12 +3086,12 @@ } }, "@ionic/core": { - "version": "5.9.3", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.9.3.tgz", - "integrity": "sha512-WM50vVxAAw+MQYqWXKUK4usBgkr7iQ9UWSb6t59mG4ZSy/fPAb7ZIdAjxY0U5i1ykk6A7Ur4B9ZJMpC/a7nnug==", + "version": "6.0.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.11.tgz", + "integrity": "sha512-2gtyEoWN+CnfIHOUXctEYc9KHQiUapWJoo1AqCTxcsuXLrMnaPa4orrFpdkBXlT0gugVLM222TW+Stlt5Kq8yg==", "requires": { - "@stencil/core": "^2.4.0", - "ionicons": "^5.5.3", + "@stencil/core": "^2.14.1", + "ionicons": "^6.0.0", "tslib": "^2.1.0" } }, @@ -4060,11 +4130,6 @@ "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==", "dev": true }, - "@types/cordova": { - "version": "0.0.34", - "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", - "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=" - }, "@types/cors": { "version": "2.8.12", "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", @@ -5739,6 +5804,25 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "dev": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + }, + "dependencies": { + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + } + } + }, "bl": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", @@ -10746,17 +10830,17 @@ } }, "ionicons": { - "version": "5.5.4", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.4.tgz", - "integrity": "sha512-3ph8X9my3inhabWEZ7N0XRA0MnnNQ1v9a602mLNgWsIXnxE9G5BybIZ/pws/OZZ/hoNlvSjk801N03yL9/FNgQ==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz", + "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==", "requires": { - "@stencil/core": "~2.10.0" + "@stencil/core": "~2.12.0" }, "dependencies": { "@stencil/core": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz", - "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==" + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz", + "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A==" } } }, @@ -11437,8 +11521,7 @@ "jsonc-parser": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz", - "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==", - "dev": true + "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==" }, "jsonfile": { "version": "6.1.0", @@ -16184,12 +16267,6 @@ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", "dev": true }, - "proxy-middleware": { - "version": "0.15.0", - "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz", - "integrity": "sha1-o/3xvvtzD5UZZYcqwvYHTGFHelY=", - "dev": true - }, "prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", @@ -19974,6 +20051,7 @@ "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, diff --git a/package.json b/package.json index 0f1a538e..3851dff7 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "@capacitor/storage": "1.2.5", "@ionic-native/core": "5.36.0", "@ionic-native/file-opener": "5.36.0", - "@ionic/angular": "5.9.3", + "@ionic/angular": "6.0.8", "@ionic/storage-angular": "3.0.6", "@ngx-translate/core": "13.0.0", "@ngx-translate/http-loader": "6.0.0", diff --git a/src/app/modules/data/detail/data-detail.component.ts b/src/app/modules/data/detail/data-detail.component.ts index cedcd1b4..38212d83 100644 --- a/src/app/modules/data/detail/data-detail.component.ts +++ b/src/app/modules/data/detail/data-detail.component.ts @@ -21,7 +21,7 @@ import { TemplateRef, } from '@angular/core'; import {ActivatedRoute} from '@angular/router'; -import {IonRefresher, ViewWillEnter} from '@ionic/angular'; +import {IonRefresher, ViewWillEnter, ModalController} from '@ionic/angular'; import {LangChangeEvent, TranslateService} from '@ngx-translate/core'; import { SCLanguageCode, @@ -57,6 +57,10 @@ export class DataDetailComponent implements ViewWillEnter { */ item?: SCThings | null = undefined; + @Input() inputItem?: SCThings; + + @Input() isModal = false; + /** * The language of the item */ @@ -100,12 +104,14 @@ export class DataDetailComponent implements ViewWillEnter { * @param route the route the page was accessed from * @param dataProvider the data provider * @param favoritesService the favorites provider + * @param modalController the modal controller * @param translateService he translate provider */ constructor( protected readonly route: ActivatedRoute, private readonly dataProvider: DataProvider, private readonly favoritesService: FavoritesService, + readonly modalController: ModalController, translateService: TranslateService, ) { this.language = translateService.currentLang as SCLanguageCode; @@ -127,11 +133,13 @@ export class DataDetailComponent implements ViewWillEnter { */ async getItem(uid: SCUuid, forceReload: boolean) { try { - const item = await (this.externalData - ? new Promise(resolve => - this.loadItem.emit({uid, forceReload, resolve}), - ) - : this.dataProvider.get(uid, DataScope.Remote)); + const item = + this.inputItem ?? + (await (this.externalData + ? new Promise(resolve => + this.loadItem.emit({uid, forceReload, resolve}), + ) + : this.dataProvider.get(uid, DataScope.Remote))); this.item = !item ? // eslint-disable-next-line unicorn/no-null @@ -170,7 +178,9 @@ export class DataDetailComponent implements ViewWillEnter { * @param refresher Refresher component that triggers the update */ async refresh(refresher: IonRefresher) { - await this.getItem(this.route.snapshot.paramMap.get('uid') ?? '', true); + if (!this.inputItem) { + await this.getItem(this.route.snapshot.paramMap.get('uid') ?? '', true); + } await refresher.complete(); } } diff --git a/src/app/modules/data/detail/data-detail.html b/src/app/modules/data/detail/data-detail.html index 1db918cd..77f19078 100644 --- a/src/app/modules/data/detail/data-detail.html +++ b/src/app/modules/data/detail/data-detail.html @@ -1,16 +1,21 @@ - + {{ 'data.detail.TITLE' | translate }} - + + + + {{ 'modal.DISMISS' | translate }} + + diff --git a/src/app/modules/data/list/search-page.component.ts b/src/app/modules/data/list/search-page.component.ts index d2dcde18..b7e134f9 100644 --- a/src/app/modules/data/list/search-page.component.ts +++ b/src/app/modules/data/list/search-page.component.ts @@ -50,6 +50,11 @@ export class SearchPageComponent implements OnInit, OnDestroy { */ @Input() showDefaultData = false; + /** + * Show the navigation drawer + */ + @Input() showDrawer = true; + /** * Api query filter */ diff --git a/src/app/modules/data/list/search-page.html b/src/app/modules/data/list/search-page.html index 37558159..2c59d484 100644 --- a/src/app/modules/data/list/search-page.html +++ b/src/app/modules/data/list/search-page.html @@ -3,7 +3,7 @@ - + diff --git a/src/app/modules/data/list/simple-data-list.html b/src/app/modules/data/list/simple-data-list.html index 2934ccc6..ae70bfe2 100644 --- a/src/app/modules/data/list/simple-data-list.html +++ b/src/app/modules/data/list/simple-data-list.html @@ -1,7 +1,22 @@ - + + + - + + + + + + + @@ -12,15 +22,27 @@ - {{ item.inPlace.name }}, + {{ $any(item).inPlace.name }}, {{ address.streetAddress }}, {{ address.addressLocality }} - More  + + + + + + diff --git a/src/app/modules/map/item/map-item.component.ts b/src/app/modules/map/item/map-item.component.ts index bdaff559..6a9c116c 100644 --- a/src/app/modules/map/item/map-item.component.ts +++ b/src/app/modules/map/item/map-item.component.ts @@ -12,8 +12,9 @@ * You should have received a copy of the GNU General Public License along with * this program. If not, see . */ -import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {Component, Input} from '@angular/core'; import {SCPlace} from '@openstapps/core'; +import {IonRouterOutlet} from '@ionic/angular'; @Component({ selector: 'stapps-map-item', @@ -26,15 +27,5 @@ export class MapItemComponent { */ @Input() item: SCPlace; - /** - * An item to show - */ - @Output() showDetails = new EventEmitter(); - - /** - * Emit event to signalize to show more information - */ - showMore() { - this.showDetails.emit(this.item); - } + constructor(readonly routerOutlet: IonRouterOutlet) {} } diff --git a/src/app/modules/map/page/map-page.component.ts b/src/app/modules/map/page/map-page.component.ts index 87abbba6..3534deae 100644 --- a/src/app/modules/map/page/map-page.component.ts +++ b/src/app/modules/map/page/map-page.component.ts @@ -20,7 +20,11 @@ import { ViewChild, } from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; -import {AlertController, ModalController} from '@ionic/angular'; +import { + AlertController, + IonRouterOutlet, + ModalController, +} from '@ionic/angular'; import {TranslateService} from '@ngx-translate/core'; import { SCBuilding, @@ -44,8 +48,6 @@ import {DataRoutingService} from '../../data/data-routing.service'; import {ContextMenuService} from '../../menu/context/context-menu.service'; import {MapProvider} from '../map.provider'; import {MapPosition, PositionService} from '../position.service'; -import {MapListModalComponent} from './modals/map-list-modal.component'; -import {MapSingleModalComponent} from './modals/map-single-modal.component'; import {Geolocation, PermissionStatus} from '@capacitor/geolocation'; import {Capacitor} from '@capacitor/core'; @@ -116,11 +118,6 @@ export class MapPageComponent { */ MAX_ZOOM = 18; - /** - * Modal for additional information on places or for a list of places - */ - modal: HTMLIonModalElement; - /** * Options of the leaflet map */ @@ -158,6 +155,7 @@ export class MapPageComponent { private modalController: ModalController, private dataRoutingService: DataRoutingService, private positionService: PositionService, + readonly routerOutlet: IonRouterOutlet, ) { // initialize the options this.options = { @@ -277,8 +275,10 @@ export class MapPageComponent { this.dataRoutingService.itemSelectListener().subscribe(async item => { // in case the list item is clicked if (this.items.length > 1) { - await this.modal.dismiss(); - await this.showItem(item.uid); + await Promise.all([ + this.modalController.dismiss(), + this.showItem(item.uid), + ]); } }), this.positionService.watchCurrentLocation({maximumAge: 3000}).subscribe({ @@ -439,45 +439,4 @@ export class MapPageComponent { // center the selected place this.focus(geoJSON(this.items[0].geo.point).getBounds().getCenter()); } - - /** - * Show a single place - */ - async showItemModal(item: SCPlace) { - const placeWithNullLocation = { - ...item, - geo: {point: {coordinates: [0, 0]}}, - }; - this.modal = await this.modalController.create({ - component: MapSingleModalComponent, - swipeToClose: true, - componentProps: { - item: placeWithNullLocation, - dismissAction: () => { - this.modal.dismiss(); - }, - }, - }); - - await this.modal.present(); - } - - /** - * Show the list of shown places - */ - async showListModal() { - this.modal = await this.modalController.create({ - component: MapListModalComponent, - swipeToClose: true, - componentProps: { - filterQuery: this.filterQuery, - queryText: this.queryText, - dismissAction: () => { - this.modal.dismiss(); - }, - }, - }); - - await this.modal.present(); - } } diff --git a/src/app/modules/map/page/map-page.html b/src/app/modules/map/page/map-page.html index 733c0996..a757534a 100644 --- a/src/app/modules/map/page/map-page.html +++ b/src/app/modules/map/page/map-page.html @@ -1,3 +1,18 @@ + + @@ -46,7 +61,7 @@ color="light" shape="round" size="small" - (click)="showListModal()" + (click)="mapListModal.present()" >   {{ 'map.page.buttons.SHOW_LIST' | translate @@ -71,7 +86,6 @@
@@ -80,7 +94,7 @@ color="light" shape="round" size="small" - (click)="showListModal()" + (click)="mapListModal.present()" >   {{ 'map.page.buttons.SHOW_LIST' | translate @@ -102,4 +116,18 @@
+ + + + + + diff --git a/src/app/modules/map/page/modals/map-list-modal.component.ts b/src/app/modules/map/page/modals/map-list-modal.component.ts index b90a8625..943ee3d7 100644 --- a/src/app/modules/map/page/modals/map-list-modal.component.ts +++ b/src/app/modules/map/page/modals/map-list-modal.component.ts @@ -15,6 +15,7 @@ import {Component, Input, OnInit} from '@angular/core'; import {SCPlace, SCSearchFilter} from '@openstapps/core'; import {MapProvider} from '../../map.provider'; +import {ModalController} from '@ionic/angular'; /** * Modal showing a provided list of places @@ -25,11 +26,6 @@ import {MapProvider} from '../../map.provider'; styleUrls: ['map-list.scss'], }) export class MapListModalComponent implements OnInit { - /** - * Action when close is pressed - */ - @Input() dismissAction: () => void; - /** * Used for creating the search for the shown list */ @@ -45,7 +41,10 @@ export class MapListModalComponent implements OnInit { */ @Input() queryText?: string; - constructor(private mapProvider: MapProvider) {} + constructor( + private mapProvider: MapProvider, + readonly modalController: ModalController, + ) {} /** * Populate the list with the results from the search diff --git a/src/app/modules/map/page/modals/map-list.html b/src/app/modules/map/page/modals/map-list.html index dc66b03f..b506bfb3 100644 --- a/src/app/modules/map/page/modals/map-list.html +++ b/src/app/modules/map/page/modals/map-list.html @@ -1,13 +1,33 @@ - - - {{ 'map.modals.list.TITLE' | translate }} - - {{ - 'app.ui.CLOSE' | translate - }} - - - - - - + + +
+ + + {{ 'map.modals.list.TITLE' | translate }} + + {{ + 'app.ui.CLOSE' | translate + }} + + + + + + +
diff --git a/src/app/modules/map/page/modals/map-list.scss b/src/app/modules/map/page/modals/map-list.scss index e69de29b..d913c456 100644 --- a/src/app/modules/map/page/modals/map-list.scss +++ b/src/app/modules/map/page/modals/map-list.scss @@ -0,0 +1,20 @@ +/*! + * 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 Licens for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + +.container { + display: flex; + flex-direction: column; + height: 100%; +} diff --git a/src/app/modules/map/page/modals/map-single-modal.component.ts b/src/app/modules/map/page/modals/map-single-modal.component.ts index 2fb44fb1..4852d64e 100644 --- a/src/app/modules/map/page/modals/map-single-modal.component.ts +++ b/src/app/modules/map/page/modals/map-single-modal.component.ts @@ -14,6 +14,7 @@ */ import {Component, Input} from '@angular/core'; import {SCPlace} from '@openstapps/core'; +import {ModalController} from '@ionic/angular'; @Component({ selector: 'app-map-single-modal', @@ -21,13 +22,10 @@ import {SCPlace} from '@openstapps/core'; styleUrls: ['./map-single.scss'], }) export class MapSingleModalComponent { - /** - * Action when close is pressed - */ - @Input() dismissAction: () => void; - /** * The item to be shown */ @Input() item: SCPlace; + + constructor(readonly modalController: ModalController) {} } diff --git a/src/app/modules/map/page/modals/map-single.html b/src/app/modules/map/page/modals/map-single.html index d421d410..99140ef4 100644 --- a/src/app/modules/map/page/modals/map-single.html +++ b/src/app/modules/map/page/modals/map-single.html @@ -2,12 +2,12 @@ {{ 'map.modals.single.TITLE' | translate }} - {{ + {{ 'app.ui.CLOSE' | translate }} - + diff --git a/src/app/modules/schedule/page/calendar-view.html b/src/app/modules/schedule/page/calendar-view.html index 8548acc8..252e6750 100644 --- a/src/app/modules/schedule/page/calendar-view.html +++ b/src/app/modules/schedule/page/calendar-view.html @@ -40,7 +40,11 @@ *ngIf="index | dateFromIndex: baselineDate as date" class="day-labels" > - + {{ date @@ -49,19 +53,23 @@ - - - + + + + + + diff --git a/src/app/modules/schedule/page/modal/modal-event-creator.component.ts b/src/app/modules/schedule/page/modal/modal-event-creator.component.ts index 15d70ff0..023fb024 100644 --- a/src/app/modules/schedule/page/modal/modal-event-creator.component.ts +++ b/src/app/modules/schedule/page/modal/modal-event-creator.component.ts @@ -12,8 +12,12 @@ * You should have received a copy of the GNU General Public License along with * this program. If not, see . */ -import {Component, Input} from '@angular/core'; +import {Component, OnDestroy, OnInit} from '@angular/core'; import {SCSearchFilter, SCThingType} from '@openstapps/core'; +import {ModalController} from '@ionic/angular'; +import {DataRoutingService} from '../../../data/data-routing.service'; +import {DataDetailComponent} from '../../../data/detail/data-detail.component'; +import {Subscription} from 'rxjs'; /** * TODO @@ -23,11 +27,34 @@ import {SCSearchFilter, SCThingType} from '@openstapps/core'; templateUrl: 'modal-event-creator.html', styleUrls: ['modal-event-creator.scss'], }) -export class ModalEventCreatorComponent { - /** - * Action when close is pressed - */ - @Input() dismissAction: () => void; +export class ModalEventCreatorComponent implements OnInit, OnDestroy { + subscriptions: Subscription[] = []; + + constructor( + readonly modalController: ModalController, + readonly dataRoutingService: DataRoutingService, + ) {} + + ngOnInit() { + this.subscriptions.push( + this.dataRoutingService.itemSelectListener().subscribe(async item => { + const modal = await this.modalController.create({ + component: DataDetailComponent, + componentProps: { + isModal: true, + inputItem: item, + }, + swipeToClose: true, + presentingElement: await this.modalController.getTop(), + }); + return modal.present(); + }), + ); + } + + ngOnDestroy() { + for (const subscription of this.subscriptions) subscription.unsubscribe(); + } /** * Forced filter diff --git a/src/app/modules/schedule/page/modal/modal-event-creator.html b/src/app/modules/schedule/page/modal/modal-event-creator.html index 4b883ab3..943976a7 100644 --- a/src/app/modules/schedule/page/modal/modal-event-creator.html +++ b/src/app/modules/schedule/page/modal/modal-event-creator.html @@ -18,7 +18,7 @@ 'schedule.addEventModal.addEvent' | translate | titlecase }} - + {{ 'modal.DISMISS' | translate }} @@ -26,6 +26,7 @@ diff --git a/src/app/modules/schedule/page/modal/modal-event-creator.scss b/src/app/modules/schedule/page/modal/modal-event-creator.scss index efa05721..7facf36d 100644 --- a/src/app/modules/schedule/page/modal/modal-event-creator.scss +++ b/src/app/modules/schedule/page/modal/modal-event-creator.scss @@ -1,15 +1,13 @@ ion-button { ion-label { - color: var(--ion-color-primary); + color: var(--ion-color-light); } } ion-card-content { height: 100%; - padding-left: 0; - padding-right: 0; - + padding: 0; stapps-data-list { - height: available; + height: 100%; } } diff --git a/src/app/modules/schedule/page/schedule-page.component.ts b/src/app/modules/schedule/page/schedule-page.component.ts index 6808c49f..f86eba7c 100644 --- a/src/app/modules/schedule/page/schedule-page.component.ts +++ b/src/app/modules/schedule/page/schedule-page.component.ts @@ -21,12 +21,10 @@ import { } from '@angular/core'; import {Location} from '@angular/common'; import {ActivatedRoute, Router} from '@angular/router'; -import {AnimationController, ModalController} from '@ionic/angular'; +import {IonRouterOutlet} from '@ionic/angular'; import {SharedAxisChoreographer} from '../../../animation/animation-choreographer'; import {materialSharedAxisX} from '../../../animation/material-motion'; -import {ModalEventCreatorComponent} from './modal/modal-event-creator.component'; import {ScheduleResponsiveBreakpoint} from './schema/schema'; -import {animate, style, transition, trigger} from '@angular/animations'; /** * This needs to be sorted by break point low -> high @@ -51,23 +49,6 @@ const responsiveConfig: ScheduleResponsiveBreakpoint[] = [ }, ]; -const fabAnimations = trigger('fabAnimation', [ - transition(':leave', [ - style({opacity: 1, transform: 'translate(0vw, 0vh) scale(100%)'}), - animate( - '100ms ease-in', - style({opacity: 0, transform: 'translate(-5vw, -5vh) scale(200%)'}), - ), - ]), - transition(':enter', [ - style({opacity: 0, transform: 'translate(-5vw, -5vh) scale(200%)'}), - animate( - '200ms ease-out', - style({opacity: 1, transform: 'translate(0vw, 0vh) scale(100%)'}), - ), - ]), -]); - /** * Component that displays the schedule */ @@ -75,7 +56,7 @@ const fabAnimations = trigger('fabAnimation', [ selector: 'stapps-schedule-page', templateUrl: 'schedule-page.html', styleUrls: ['schedule-page.scss'], - animations: [materialSharedAxisX, fabAnimations], + animations: [materialSharedAxisX], }) export class SchedulePageComponent implements OnInit, AfterViewInit { /** @@ -88,8 +69,6 @@ export class SchedulePageComponent implements OnInit, AfterViewInit { */ actualSegmentValue?: string | null; - fabVisible = true; - /** * Layout */ @@ -124,9 +103,8 @@ export class SchedulePageComponent implements OnInit, AfterViewInit { } constructor( - private readonly modalController: ModalController, private readonly activatedRoute: ActivatedRoute, - private readonly animationController: AnimationController, + readonly routerOutlet: IonRouterOutlet, private router: Router, private location: Location, ) {} @@ -171,63 +149,4 @@ export class SchedulePageComponent implements OnInit, AfterViewInit { this.location.go(url); this.tabChoreographer.changeViewForState(this.segmentView.value); } - - /** - * Add event modal sheet - */ - async showCreateEventModal() { - this.fabVisible = false; - - // eslint-disable-next-line @typescript-eslint/no-explicit-any,unicorn/consistent-function-scoping - const enterAnimation = (baseElement: any) => { - const backdropAnimation = this.animationController - .create() - .addElement(baseElement.querySelector('.modal-wrapper')) - .fromTo('opacity', '0', 'var(--backdrop-opacity)'); - - const wrapperAnimation = this.animationController - .create() - .addElement(baseElement.querySelector('.modal-wrapper')) - .keyframes([ - { - opacity: '0', - transform: 'translate(30vw, 30vh) scale(0.5)', - }, - { - opacity: '1', - transform: 'translate(0vw, 0vh) scale(1)', - }, - ]); - - return this.animationController - .create() - .addElement(baseElement) - .easing('ease-out') - .duration(150) - .addAnimation([backdropAnimation, wrapperAnimation]); - }; - - // eslint-disable-next-line @typescript-eslint/no-explicit-any,unicorn/consistent-function-scoping - const leaveAnimation = (baseElement: any) => { - return enterAnimation(baseElement).direction('reverse'); - }; - - const modal = await this.modalController.create({ - component: ModalEventCreatorComponent, - swipeToClose: true, - cssClass: 'add-modal', - componentProps: { - dismissAction: () => { - modal.dismiss(); - }, - }, - enterAnimation, - leaveAnimation, - }); - - await modal.present(); - await modal.onWillDismiss(); - - this.fabVisible = true; - } } diff --git a/src/app/modules/schedule/page/schedule-page.html b/src/app/modules/schedule/page/schedule-page.html index 327023a9..350b6093 100644 --- a/src/app/modules/schedule/page/schedule-page.html +++ b/src/app/modules/schedule/page/schedule-page.html @@ -51,14 +51,18 @@ - - + + + + + + + + diff --git a/src/app/modules/schedule/page/schedule-page.scss b/src/app/modules/schedule/page/schedule-page.scss index 1b6fefb8..baa43f35 100644 --- a/src/app/modules/schedule/page/schedule-page.scss +++ b/src/app/modules/schedule/page/schedule-page.scss @@ -1,16 +1,16 @@ /*! - * Copyright (C) 2021 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. + * 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. + * 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 + * more details. * - * You should have received a copy of the GNU General Public License along with - * this program. If not, see . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ @@ -30,12 +30,3 @@ div { ion-segment-button { text-transform: none; } - -.add-modal { - align-items: flex-end !important; - justify-content: flex-end !important; - - .modal-wrapper { - transform-origin: bottom right !important; - } -}