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

refactor: move event select popup to a modal

Browse Source
This commit is contained in:
Thea Schöbl
2022-09-23 12:24:22 +00:00
committed by Rainer Killinger
parent 8a04a43903
commit 4a3f79ca20
22 changed files with 788 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/app/util/edit-modal.component.ts Normal file
View File

@@ -0,0 +1,97 @@
/*
* 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,
ContentChild,
EventEmitter,
Input,
OnInit,
Output,
TemplateRef,
ViewChild,
} from '@angular/core';
import {
ActionSheetController,
AlertController,
Config,
IonModal,
IonRouterOutlet,
ModalController,
} from '@ionic/angular';
import {
pendingChangesActionSheet,
PendingChangesRole,
} from './pending-changes-action-sheet';
import {TranslatePipe} from '@ngx-translate/core';
@Component({
selector: 'stapps-edit-modal',
templateUrl: 'edit-modal.html',
})
export class EditModalComponent implements OnInit {
@ContentChild(TemplateRef) content: TemplateRef<unknown>;
@ViewChild('modal') modal: IonModal;
@Input() pendingChanges = false;
@Output() save = new EventEmitter();
presentingElement: HTMLElement;
constructor(
readonly modalController: ModalController,
readonly routerOutlet: IonRouterOutlet,
readonly alertController: AlertController,
readonly actionSheetController: ActionSheetController,
readonly translatePipe: TranslatePipe,
readonly config: Config,
) {}
async ngOnInit() {
this.presentingElement =
(await this.modalController.getTop()) || this.routerOutlet.nativeEl;
}
present() {
this.modal.present();
this.pendingChanges = false;
}
dismiss(skipChanges = false) {
this.pendingChanges = skipChanges ? false : this.pendingChanges;
setTimeout(() => this.modal.dismiss());
}
canDismissModal = async () => {
const alert =
this.config.get('mode') === 'ios'
? await this.actionSheetController.create(
pendingChangesActionSheet(this.translatePipe),
)
: await this.alertController.create(
pendingChangesActionSheet(this.translatePipe, false),
);
alert.present().then();
const {role} = await alert.onWillDismiss();
if (role === PendingChangesRole.SAVE) {
this.save.emit();
}
return role !== 'backdrop' && role !== PendingChangesRole.CANCEL;
};
}

39
src/app/util/edit-modal.html Normal file
View File

@@ -0,0 +1,39 @@
<!--
~ 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-modal
#modal
[presentingElement]="presentingElement"
[canDismiss]="!pendingChanges || canDismissModal"
>
<ng-template>
<ion-header mode="ios">
<ion-toolbar>
<ion-title>{{ 'modal.TITLE_EDIT' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="save.emit(); dismiss(true)">{{
'modal.DISMISS_CONFIRM' | translate
}}</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-button (click)="dismiss(true)">{{
'modal.DISMISS_CANCEL' | translate
}}</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ng-container *ngTemplateOutlet="content"> </ng-container>
</ng-template>
</ion-modal>

59
src/app/util/pending-changes-action-sheet.ts Normal file
View File

@@ -0,0 +1,59 @@
/*
* 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 {TranslatePipe} from '@ngx-translate/core';
import {ActionSheetOptions, AlertOptions} from '@ionic/angular';
export enum PendingChangesRole {
SAVE = 'save',
DISCARD = 'discard',
CANCEL = 'cancel',
}
/**
*
*/
export function pendingChangesActionSheet(
translatePipe: TranslatePipe,
includeSaveOption = true,
): ActionSheetOptions & AlertOptions {
return {
header: translatePipe.transform('modal.dismiss_warn_pending_changes.TITLE'),
buttons: [
...(includeSaveOption
? [
{
text: translatePipe.transform(
'modal.dismiss_warn_pending_changes.SAVE',
),
role: PendingChangesRole.SAVE,
},
]
: []),
{
text: translatePipe.transform(
'modal.dismiss_warn_pending_changes.CANCEL',
),
role: PendingChangesRole.CANCEL,
},
{
text: translatePipe.transform(
'modal.dismiss_warn_pending_changes.DISCARD',
),
role: PendingChangesRole.DISCARD,
},
],
};
}

25
src/app/util/util.module.ts
View File

@@ -1,16 +1,16 @@
/*
* 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 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 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/>.
* 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 {NgModule} from '@angular/core';
@@ -21,8 +21,13 @@ import {DateFromIndexPipe} from './date-from-index.pipe';
import {DaytimeKeyPipe} from './daytime-key.pipe';
import {LazyPipe} from './lazy.pipe';
import {NextDateInListPipe} from './next-date-in-list.pipe';
import {EditModalComponent} from './edit-modal.component';
import {BrowserModule} from '@angular/platform-browser';
import {IonicModule} from '@ionic/angular';
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
imports: [BrowserModule, IonicModule, TranslateModule],
declarations: [
ArrayLastPipe,
DateIsThisPipe,
@@ -31,6 +36,7 @@ import {NextDateInListPipe} from './next-date-in-list.pipe';
DateFromIndexPipe,
DaytimeKeyPipe,
NextDateInListPipe,
EditModalComponent,
],
exports: [
ArrayLastPipe,
@@ -40,6 +46,7 @@ import {NextDateInListPipe} from './next-date-in-list.pipe';
DateFromIndexPipe,
DaytimeKeyPipe,
NextDateInListPipe,
EditModalComponent,
],
})
export class UtilModule {}