From e4b29cad732e4c92c220d99b788a93f68d16364a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= Date: Mon, 27 Nov 2023 11:44:13 +0100 Subject: [PATCH] feat: update components --- .../settings/item/settings-item.component.ts | 37 ++++++++- .../modules/settings/item/settings-item.html | 30 +++---- .../page/calendar-sync-settings.component.ts | 34 +++++++- .../settings/page/settings-page.component.ts | 39 ++++++++- .../modules/settings/page/settings-page.html | 14 ---- .../settings/setting-translate.pipe.ts | 1 + .../app/modules/settings/settings.module.ts | 81 +------------------ .../app/src/app/util/edit-modal.component.ts | 18 ++++- .../src/app/util/opening-hours.component.ts | 12 +++ .../app/src/app/util/section.component.ts | 15 +++- frontend/app/tsconfig.json | 3 + packages/core/src/general/i18n.ts | 10 +-- 12 files changed, 174 insertions(+), 120 deletions(-) diff --git a/frontend/app/src/app/modules/settings/item/settings-item.component.ts b/frontend/app/src/app/modules/settings/item/settings-item.component.ts index 9c0f832e..74ef382a 100644 --- a/frontend/app/src/app/modules/settings/item/settings-item.component.ts +++ b/frontend/app/src/app/modules/settings/item/settings-item.component.ts @@ -13,10 +13,25 @@ * this program. If not, see . */ import {Component, Input} from '@angular/core'; -import {AlertController} from '@ionic/angular/standalone'; +import { + AlertController, + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonInput, + IonItem, + IonNote, + IonSelect, + IonSelectOption, + IonToggle, +} from '@ionic/angular/standalone'; import {LangChangeEvent, TranslateService} from '@ngx-translate/core'; import {SCLanguageCode, SCSetting, SCSettingValue, SCSettingValues} from '@openstapps/core'; import {SettingsProvider} from '../settings.provider'; +import {CommonModule, NgForOf, NgIf, NgSwitch, NgSwitchCase} from '@angular/common'; +import {ThingTranslateModule} from '../../../translation/thing-translate.module'; +import {FormsModule} from '@angular/forms'; /** * Setting item component @@ -25,6 +40,26 @@ import {SettingsProvider} from '../settings.provider'; selector: 'stapps-settings-item', templateUrl: 'settings-item.html', styleUrls: ['settings-item.scss'], + standalone: true, + imports: [ + IonCard, + IonCardHeader, + NgIf, + CommonModule, + ThingTranslateModule, + IonCardSubtitle, + IonCardContent, + IonNote, + NgSwitch, + IonItem, + IonInput, + FormsModule, + IonToggle, + IonSelect, + NgSwitchCase, + IonSelectOption, + NgForOf, + ], }) export class SettingsItemComponent { /** diff --git a/frontend/app/src/app/modules/settings/item/settings-item.html b/frontend/app/src/app/modules/settings/item/settings-item.html index b4d807f8..61745436 100644 --- a/frontend/app/src/app/modules/settings/item/settings-item.html +++ b/frontend/app/src/app/modules/settings/item/settings-item.html @@ -14,20 +14,22 @@ --> - - - {{ vals.name }} - - - + @if (setting.name && setting.description) { + + + {{ vals.name }} + + + + } {{ 'description' | thingTranslate: setting | titlecase }} diff --git a/frontend/app/src/app/modules/settings/page/calendar-sync-settings.component.ts b/frontend/app/src/app/modules/settings/page/calendar-sync-settings.component.ts index 96709f2c..fb9bd188 100644 --- a/frontend/app/src/app/modules/settings/page/calendar-sync-settings.component.ts +++ b/frontend/app/src/app/modules/settings/page/calendar-sync-settings.component.ts @@ -15,14 +15,28 @@ import {Component, OnInit} from '@angular/core'; import {AddEventReviewModalComponent} from '../../calendar/add-event-review-modal.component'; -import {ModalController} from '@ionic/angular/standalone'; +import { + IonButton, + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonIcon, + IonItem, + IonItemDivider, + IonItemGroup, + IonLabel, + IonList, + IonToggle, + ModalController, +} from '@ionic/angular/standalone'; import {ScheduleProvider} from '../../calendar/schedule.provider'; import {Directory, Encoding, Filesystem} from '@capacitor/filesystem'; import {Share} from '@capacitor/share'; import {Device} from '@capacitor/device'; import {Dialog} from '@capacitor/dialog'; import {SCUuid} from '@openstapps/core'; -import {TranslateService} from '@ngx-translate/core'; +import {TranslateModule, TranslateService} from '@ngx-translate/core'; import {StorageProvider} from '../../storage/storage.provider'; import {ScheduleSyncService} from '../../background/schedule/schedule-sync.service'; import {CalendarService} from '../../calendar/calendar.service'; @@ -40,6 +54,22 @@ import { selector: 'calendar-sync-settings', templateUrl: 'calendar-sync-settings.html', styleUrls: ['calendar-sync-settings.scss'], + standalone: true, + imports: [ + IonCard, + IonCardHeader, + IonCardSubtitle, + IonCardContent, + IonList, + IonItemGroup, + IonItemDivider, + IonLabel, + IonItem, + IonToggle, + IonButton, + IonIcon, + TranslateModule, + ], }) export class CalendarSyncSettingsComponent implements OnInit { isWeb = true; diff --git a/frontend/app/src/app/modules/settings/page/settings-page.component.ts b/frontend/app/src/app/modules/settings/page/settings-page.component.ts index 1b35d6e7..74b877e6 100644 --- a/frontend/app/src/app/modules/settings/page/settings-page.component.ts +++ b/frontend/app/src/app/modules/settings/page/settings-page.component.ts @@ -13,10 +13,26 @@ * this program. If not, see . */ import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; -import {AlertController, ToastController} from '@ionic/angular/standalone'; -import {TranslateService} from '@ngx-translate/core'; +import { + AlertController, + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonList, + IonTitle, + IonToolbar, + ToastController, +} from '@ionic/angular/standalone'; +import {TranslateModule, TranslateService} from '@ngx-translate/core'; import {SCSettingMeta} from '@openstapps/core'; import {SettingsCache, SettingsProvider} from '../settings.provider'; +import {IonContentParallaxDirective} from '../../../util/ion-content-parallax.directive'; +import {SettingsItemComponent} from '../item/settings-item.component'; +import {CalendarSyncSettingsComponent} from './calendar-sync-settings.component'; +import {NgForOf, NgIf, TitleCasePipe} from '@angular/common'; /** * Settings page component @@ -25,6 +41,25 @@ import {SettingsCache, SettingsProvider} from '../settings.provider'; selector: 'stapps-settings-page', templateUrl: 'settings-page.html', styleUrls: ['settings-page.scss'], + standalone: true, + imports: [ + IonHeader, + IonToolbar, + IonButtons, + IonBackButton, + IonTitle, + IonContent, + IonContentParallaxDirective, + IonList, + SettingsItemComponent, + CalendarSyncSettingsComponent, + IonButton, + IonIcon, + TranslateModule, + NgForOf, + NgIf, + TitleCasePipe, + ], }) export class SettingsPageComponent implements OnInit { /** diff --git a/frontend/app/src/app/modules/settings/page/settings-page.html b/frontend/app/src/app/modules/settings/page/settings-page.html index 571b3428..5bc977d0 100644 --- a/frontend/app/src/app/modules/settings/page/settings-page.html +++ b/frontend/app/src/app/modules/settings/page/settings-page.html @@ -26,20 +26,6 @@
- . */ -import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {RouterModule, Routes} from '@angular/router'; -import {TranslateModule} from '@ngx-translate/core'; - -import {ThingTranslateModule} from '../../translation/thing-translate.module'; -import {ConfigProvider} from '../config/config.provider'; -import {SettingsItemComponent} from './item/settings-item.component'; +import {RouterModule} from '@angular/router'; import {SettingsPageComponent} from './page/settings-page.component'; -import {SettingTranslatePipe} from './setting-translate.pipe'; -import {SettingsProvider} from './settings.provider'; -import {CalendarSyncSettingsComponent} from './page/calendar-sync-settings.component'; -import {ScheduleProvider} from '../calendar/schedule.provider'; -import {ThingTranslatePipe} from '../../translation/thing-translate.pipe'; -import {ScheduleSyncService} from '../background/schedule/schedule-sync.service'; -import {CalendarService} from '../calendar/calendar.service'; -import {CalendarModule} from '../calendar/calendar.module'; -import {BackgroundModule} from '../background/background.module'; -import {UtilModule} from '../../util/util.module'; -import {IonIconModule} from '../../util/ion-icon/ion-icon.module'; -import { - IonButton, - IonButtons, - IonCard, - IonCardContent, - IonCardHeader, - IonCardSubtitle, - IonHeader, - IonItem, - IonItemDivider, - IonItemGroup, - IonLabel, - IonList, - IonTitle, - IonToggle, - IonToolbar, -} from '@ionic/angular/standalone'; - -const settingsRoutes: Routes = [{path: 'settings', component: SettingsPageComponent}]; /** * Settings Module */ @NgModule({ - declarations: [ - SettingsPageComponent, - SettingsItemComponent, - SettingTranslatePipe, - CalendarSyncSettingsComponent, - ], - exports: [SettingsItemComponent, SettingTranslatePipe], - imports: [ - CommonModule, - FormsModule, - CalendarModule, - IonIconModule, - BackgroundModule, - TranslateModule.forChild(), - ThingTranslateModule.forChild(), - RouterModule.forChild(settingsRoutes), - UtilModule, - IonHeader, - IonToolbar, - IonButtons, - IonTitle, - IonList, - IonButton, - IonCard, - IonCardHeader, - IonCardSubtitle, - IonCardContent, - IonItemGroup, - IonItemDivider, - IonLabel, - IonItem, - IonToggle, - ], - providers: [ - ScheduleSyncService, - ConfigProvider, - SettingsProvider, - CalendarService, - ScheduleProvider, - ThingTranslatePipe, - ], + imports: [RouterModule.forChild([{path: 'settings', component: SettingsPageComponent}])], }) export class SettingsModule {} diff --git a/frontend/app/src/app/util/edit-modal.component.ts b/frontend/app/src/app/util/edit-modal.component.ts index f015ca56..618d8e5f 100644 --- a/frontend/app/src/app/util/edit-modal.component.ts +++ b/frontend/app/src/app/util/edit-modal.component.ts @@ -18,17 +18,33 @@ import { ActionSheetController, AlertController, Config, + IonButton, + IonButtons, + IonHeader, IonModal, IonRouterOutlet, + IonTitle, + IonToolbar, ModalController, } from '@ionic/angular/standalone'; import {pendingChangesActionSheet, PendingChangesRole} from './pending-changes-action-sheet'; -import {TranslatePipe} from '@ngx-translate/core'; +import {TranslateModule, TranslatePipe} from '@ngx-translate/core'; +import {NgTemplateOutlet} from '@angular/common'; @Component({ selector: 'stapps-edit-modal', templateUrl: 'edit-modal.html', standalone: true, + imports: [ + IonModal, + IonHeader, + IonToolbar, + IonButtons, + IonTitle, + IonButton, + NgTemplateOutlet, + TranslateModule, + ], }) export class EditModalComponent { @ContentChild(TemplateRef) content: TemplateRef; diff --git a/frontend/app/src/app/util/opening-hours.component.ts b/frontend/app/src/app/util/opening-hours.component.ts index e494fcb4..9b95861e 100644 --- a/frontend/app/src/app/util/opening-hours.component.ts +++ b/frontend/app/src/app/util/opening-hours.component.ts @@ -16,6 +16,10 @@ import {ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef} fr import {interval, Observable} from 'rxjs'; import {fromOpeningHours} from './opening-hours'; import {map, startWith} from 'rxjs/operators'; +import {AsyncPipe, NgIf} from '@angular/common'; +import {IonBadge} from '@ionic/angular/standalone'; +import {TranslateModule} from '@ngx-translate/core'; +import {FormatDistanceToNowStrictPipeModule, FormatRelativeToNowPipeModule} from 'ngx-date-fns'; @Component({ selector: 'stapps-opening-hours', @@ -23,6 +27,14 @@ import {map, startWith} from 'rxjs/operators'; styleUrl: 'opening-hours.scss', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, + imports: [ + AsyncPipe, + IonBadge, + TranslateModule, + FormatDistanceToNowStrictPipeModule, + FormatRelativeToNowPipeModule, + NgIf, + ], }) export class OpeningHoursComponent { @ContentChild(TemplateRef) content: TemplateRef; diff --git a/frontend/app/src/app/util/section.component.ts b/frontend/app/src/app/util/section.component.ts index ccb08d56..46e539dc 100644 --- a/frontend/app/src/app/util/section.component.ts +++ b/frontend/app/src/app/util/section.component.ts @@ -18,7 +18,7 @@ import {fromMutationObserver} from './rxjs/mutation-observer'; import {combineLatestWith, mergeMap, OperatorFunction, ReplaySubject, takeLast} from 'rxjs'; import {distinctUntilChanged, filter, map, startWith} from 'rxjs/operators'; import {fromIntersectionObserver} from './rxjs/from-intersection-observer'; -import {IonCol, IonRow, IonGrid, IonLabel, IonButton} from '@ionic/angular/standalone'; +import {IonCol, IonRow, IonGrid, IonLabel, IonButton, IonIcon} from '@ionic/angular/standalone'; import {AsyncPipe, NgIf, NgTemplateOutlet} from '@angular/common'; import {RouterLink} from '@angular/router'; @@ -46,7 +46,18 @@ function isSlideVisible( styleUrls: ['section.scss'], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [IonCol, IonRow, IonGrid, IonLabel, NgIf, RouterLink, NgTemplateOutlet, IonButton, AsyncPipe], + imports: [ + IonCol, + IonRow, + IonGrid, + IonLabel, + NgIf, + RouterLink, + NgTemplateOutlet, + IonButton, + AsyncPipe, + IonIcon, + ], }) export class SectionComponent implements AfterContentInit { @Input() title = ''; diff --git a/frontend/app/tsconfig.json b/frontend/app/tsconfig.json index 2956c57c..d0aee3a6 100644 --- a/frontend/app/tsconfig.json +++ b/frontend/app/tsconfig.json @@ -18,5 +18,8 @@ "module": "ES2022", "moduleResolution": "Node" }, + "angularCompilerOptions": { + "strictTemplates": true + }, "exclude": ["**/*.spec.ts"] } diff --git a/packages/core/src/general/i18n.ts b/packages/core/src/general/i18n.ts index 0bd5599f..5a93a858 100644 --- a/packages/core/src/general/i18n.ts +++ b/packages/core/src/general/i18n.ts @@ -670,7 +670,7 @@ export type SCNationality = * Translations for specific languages * @see https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes */ -export interface SCTranslations { +export interface SCTranslations> { /** * German translations */ @@ -691,8 +691,8 @@ type RecursivePartial = { [P in keyof T]-?: T[P] extends Array ? Array> : T[P] extends object - ? RecursivePartial - : T[P]; + ? RecursivePartial + : T[P]; }; /** @@ -705,14 +705,14 @@ type SCRequiredTranslationKeys = { /** * Type that allows mapping from available keys of SCTranslations to SCRequiredTranslationKeys */ -type SCRequiredTranslation = { +type SCRequiredTranslation> = { [key in keyof SCTranslations]: SCRequiredTranslationKeys; }; /** * Interface to be implemented by all Meta classes */ -export interface SCMetaTranslations { +export interface SCMetaTranslations> { /** * Field translations */