feat: update components

frontend/app/src/app/modules/settings/item/settings-item.component.ts

@@ -13,10 +13,25 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 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 {
   /**

frontend/app/src/app/modules/settings/item/settings-item.html

@@ -14,20 +14,22 @@
   -->
 
 <ion-card *ngIf="setting">
-  <ion-card-header
-    *ngIf="
-      {
-        name: ('name' | thingTranslate: setting | titlecase),
-        desc: ('description' | thingTranslate: setting | titlecase)
-      };
-      let vals
-    "
-  >
-    <ion-card-subtitle>
-      {{ vals.name }}
-      <ion-icon *ngIf="compactView" name="info" (click)="presentAlert(vals.name, vals.desc)"></ion-icon>
-    </ion-card-subtitle>
-  </ion-card-header>
+  @if (setting.name && setting.description) {
+    <ion-card-header
+      *ngIf="
+        {
+          name: ('name' | thingTranslate: setting | titlecase),
+          desc: ('description' | thingTranslate: setting | titlecase)
+        };
+        let vals
+      "
+    >
+      <ion-card-subtitle>
+        {{ vals.name }}
+        <ion-icon *ngIf="compactView" name="info" (click)="presentAlert(vals.name, vals.desc)"></ion-icon>
+      </ion-card-subtitle>
+    </ion-card-header>
+  }
   <ion-card-content>
     <ion-note *ngIf="!compactView">{{ 'description' | thingTranslate: setting | titlecase }}</ion-note>
 

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;

frontend/app/src/app/modules/settings/page/settings-page.component.ts

@@ -13,10 +13,26 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 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 {
   /**

frontend/app/src/app/modules/settings/page/settings-page.html

@@ -26,20 +26,6 @@
   <div class="settings-content">
     <ng-container *ngFor="let categoryKey of categoriesOrder">
       <ion-list *ngIf="objectKeys(settingsCache).includes(categoryKey)">
-        <!-- <ion-item-divider>
-            <h2>
-              {{
-                'categories[0]'
-                  | thingTranslate
-                    : $any(
-                        settingsCache[categoryKey]?.settings[
-                          objectKeys(settingsCache[categoryKey]?.settings)[0]
-                        ]
-                      )
-                  | titlecase
-              }}
-            </h2>
-          </ion-item-divider> -->
         <stapps-settings-item
           *ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)"
           [setting]="settingsCache[categoryKey].settings[settingKeys]"

frontend/app/src/app/modules/settings/setting-translate.pipe.ts

@@ -24,6 +24,7 @@ import {ThingTranslateService} from '../../translation/thing-translate.service';
  */
 @Pipe({
   name: 'settingValueTranslate',
+  standalone: true,
 })
 export class SettingTranslatePipe implements PipeTransform {
   constructor(

frontend/app/src/app/modules/settings/settings.module.ts

@@ -12,91 +12,14 @@
  * 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 {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 {}

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<unknown>;

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<unknown>;

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 = '';

frontend/app/tsconfig.json

@@ -18,5 +18,8 @@
     "module": "ES2022",
     "moduleResolution": "Node"
   },
+  "angularCompilerOptions": {
+    "strictTemplates": true
+  },
   "exclude": ["**/*.spec.ts"]
 }