start-os/ui/src/app/pages/apps-routes/app-config/app-config.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{ pkg.manifest.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top">

  <!-- loading -->
  <ion-grid *ngIf="loadingText$ | ngrxPush as loadingText; else loaded" style="height: 100%;">
    <ion-row class="ion-align-items-center ion-text-center" style="height: 100%;">
      <ion-col>
        <ion-spinner name="lines" color="warning"></ion-spinner>
        <p>{{ loadingText }}</p>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- not loading  -->
  <ng-template #loaded>
    <ion-item *ngIf="error" class="notifier-item">
      <ion-label style="margin: 7px 5px;" class="ion-text-wrap">
        <p style="color: var(--ion-color-danger)">{{ error.text }}</p>
        <p><a style="color: var(--ion-color-danger); text-decoration: underline; font-weight: bold;" *ngIf="error.moreInfo && !openErrorMoreInfo" (click)="openErrorMoreInfo = true">{{error.moreInfo.buttonText}}</a></p>

        <ng-container *ngIf="openErrorMoreInfo">
          <p style="margin-top: 10px; color: var(--ion-color-medium);" [innerHTML]="error.moreInfo.title"></p>
          <p style="margin-top: 10px; color: var(--ion-color-medium); font-size: small" [innerHTML]="error.moreInfo.description"></p>
          <a style="font-size: x-small; font-style: italic;" (click)="openErrorMoreInfo = false">Hide</a>
        </ng-container>

      </ion-label>
      <ion-button style="position: absolute; right: 0; top: 0" *ngIf="pkg" color="danger" fill="clear" (click)="dismissError()">
        <ion-icon name="close-outline"></ion-icon>
      </ion-button>
    </ion-item>

    <ng-container *ngIf="pkg">
      <!-- @TODO make sure this is how to determine if pkg is in needs_config -->
      <ng-container *ngIf="pkg.manifest.config && !pkg.status.configured && !edited">
        <ion-item class="notifier-item">
          <ion-label class="ion-text-wrap">
            <h2 style="display: flex; align-items: center; margin-bottom: 3px;">
              <ion-icon size="small" style="margin-right: 5px" slot="start" color="dark" slot="start" name="alert-circle-outline"></ion-icon>
              <ion-text style="font-size: smaller;">Initial Config</ion-text>
            </h2>
            <p style="font-size: small">To use the default config for {{ pkg.manifest.title }}, click "Save" below.</p>
          </ion-label>
        </ion-item>
      </ng-container>

      <ng-container *ngIf="rec && showRec">
        <ion-item class="rec-item">
          <ion-label class="ion-text-wrap">
            <h2 style="display: flex; align-items: center;">
              <ion-icon size="small" style="margin: 4px" slot="start" color="primary" slot="start" name="ellipse"></ion-icon>
              <ion-avatar style="width: 3vh; height: 3vh; margin: 0px 2px 0px 5px;" slot="start">
                <img [src]="rec.dependentIcon" [alt]="rec.dependentTitle"/>
              </ion-avatar>
              <ion-text style="margin: 5px; font-family: 'Montserrat'; font-size: smaller;">{{ rec.dependentTitle }}</ion-text>
            </h2>
            <div style="margin: 7px 5px;">
              <p style="font-size: small; color: var(--ion-color-medium)"> {{ pkg.manifest.title }} config has been modified to satisfy {{ rec.dependentTitle }}.
                <ion-text color="dark">To accept the changes, click “Save” below.</ion-text>
              </p>
              <a style="font-size: small" *ngIf="!openRec" (click)="openRec = true">More Info</a>
              <ng-container *ngIf="openRec">
                <p style="margin-top: 10px; color: var(--ion-color-medium); font-size: small" [innerHTML]="rec.description"></p>
                <a style="font-size: x-small; font-style: italic;" (click)="openRec = false">hide</a>
              </ng-container>
              <ion-button style="position: absolute; right: 0; top: 0" color="primary" fill="clear" (click)="dismissRec()">
                <ion-icon name="close-outline"></ion-icon>
              </ion-button>
            </div>
          </ion-label>
        </ion-item>
        <ion-item-divider></ion-item-divider>
      </ng-container>

      <ion-item *ngIf="invalid" class="notifier-item">
        <ion-icon size="small" slot="start" color="danger" name="warning-outline"></ion-icon>
        <ion-label class="ion-text-wrap">
          <p style="color: var(--ion-color-danger)">{{invalid}}</p>
        </ion-label>
      </ion-item>

      <!-- no config -->
      <ion-item *ngIf="!hasConfig">
        <ion-label class="ion-text-wrap">
          <p>No config options for {{ pkg.manifest.title }} {{ pkg.manifest.version }}.</p>
        </ion-label>
      </ion-item>

      <!-- save button, always show -->
      <ion-button
        [disabled]="invalid || (!edited && !added && !pkg.status.configured )"
        fill="outline"
        expand="block"
        style="margin: 10px"
        color="primary"
        (click)="save(pkg)"
      >
        <ion-text color="primary" style="font-weight: bold">
          Save
        </ion-text>
      </ion-button>

      <!-- has config -->
      <ng-container *ngIf="hasConfig">
        <ion-item-group class="ion-text-wrap ion-padding-bottom">
          <ion-item-divider>Config Options</ion-item-divider>
          <object-config [cursor]="rootCursor" (onEdit)="handleObjectEdit()"></object-config>
        </ion-item-group>
      </ng-container>
    </ng-container>
  </ng-template>
</ion-content>