dialog.component.html

<div [ngSwitch]="data.mode" class="dialog-content">

    <!-- all about USER -->
    <!-- Create new user profile -->
    <div *ngSwitchCase="'createUser'">
        <app-dialog-header [title]="'appLabels.form.user.title.profile' | translate"
            [subtitle]="'appLabels.form.user.title.new' | translate">
        </app-dialog-header>
        <app-user-form [name]="data.name" [projectcode]="data.project" (closeDialog)="dialogRef.close()">
        </app-user-form>
    </div>

    <!-- Modify user data -->
    <div *ngSwitchCase="'editUser'">
        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.edit' | translate"></app-dialog-header>
        <app-user-form [username]="data.name" (closeDialog)="dialogRef.close()"></app-user-form>
    </div>

    <!-- Update password -->
    <div *ngSwitchCase="'editPassword'">
        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.password' | translate"></app-dialog-header>
        <app-password-form [username]="data.name" (closeDialog)="dialogRef.close()"></app-password-form>
    </div>

    <!-- Delete user -->
    <div *ngSwitchCase="'deleteUser'">
        <app-dialog-header [title]="data.name" [subtitle]="'Suspend user'"></app-dialog-header>
        Do you want to suspend this user?

        <!-- TODO: create a mat dialog actions component with the following buttons: Cancel to reset and OK to confirm action -->
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                [mat-dialog-close]="true">
                Suspend
            </button>
        </mat-dialog-actions>
    </div>

    <!-- Reactivate user -->
    <div *ngSwitchCase="'activateUser'">
        <app-dialog-header [title]="data.name" [subtitle]="'Activate user'"></app-dialog-header>
        Do you want to reactivate this user?
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'primary'" class="confirm-button center"
                [mat-dialog-close]="true">
                Reactivate
            </button>
        </mat-dialog-actions>
    </div>

    <!-- Remove user from project -->
    <div *ngSwitchCase="'removeFromProject'">
        <app-dialog-header [title]="data.name" [subtitle]="'Remove user from Project'"></app-dialog-header>
        Do you want to remove this user from the project?
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'accent'" class="confirm-button center"
                [mat-dialog-close]="true">
                Remove
            </button>
        </mat-dialog-actions>
    </div>

    <!-- Manage user project membership -->
    <div *ngSwitchCase="'manageProjectMembership'">
        <app-dialog-header [title]="data.name" [subtitle]="'Manage project membership'">
        </app-dialog-header>
        <app-membership [username]="data.name" (closeDialog)="dialogRef.close()"></app-membership>
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
        </mat-dialog-actions>
    </div>

    <!-- all about PROJECT -->
    <!-- Create project -->
    <div *ngSwitchCase="'createProject'">
        <app-dialog-header [title]="'appLabels.form.project.title.profile' | translate"
            [subtitle]="'appLabels.form.project.title.new' | translate">
        </app-dialog-header>
        <app-project-form (closeDialog)="dialogRef.close()"></app-project-form>
    </div>

    <!-- Modify project information -->
    <div *ngSwitchCase="'editProject'">
        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.edit' | translate"></app-dialog-header>
        <app-project-form [projectcode]="data.project" (closeDialog)="dialogRef.close()"></app-project-form>
    </div>

    <!-- Delete project -->
    <div *ngSwitchCase="'deleteProject'">
        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.delete' | translate"></app-dialog-header>
        Do you want to deactivate this project?
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                [mat-dialog-close]="true">
                Deactivate
            </button>
        </mat-dialog-actions>
    </div>

    <!-- Reactivate project -->
    <div *ngSwitchCase="'activateProject'">
        <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.activate' | translate"></app-dialog-header>
        Do you want to reactivate this project?
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'primary'" class="confirm-button center"
                [mat-dialog-close]="true">
                Reactivate
            </button>
        </mat-dialog-actions>
    </div>

    <!-- all about LISTS -->

    <!-- Create new list -->
    <div *ngSwitchCase="'createList'">
        <app-dialog-header [title]="data.title" [subtitle]="'Create new'"></app-dialog-header>
        <app-list-info-form [projectcode]="data.project" [projectIri]="data.id" (closeDialog)="dialogRef.close()"
            (updateParent)="replaceTitle($event)"></app-list-info-form>
    </div>

    <!-- Update list info -->
    <div *ngSwitchCase="'editListInfo'">
        <app-dialog-header [title]="data.title" [subtitle]="'Edit list info'">
        </app-dialog-header>
        <app-list-info-form [iri]="data.id" [projectIri]="data.project" (closeDialog)="dialogRef.close()">
        </app-list-info-form>
    </div>

    <!-- Update list child node -->
    <div *ngSwitchCase="'editListNode'">
        <app-dialog-header [title]="data.title" [subtitle]="'Edit child node'">
        </app-dialog-header>
        <app-edit-list-item [iri]="data.id" [projectIri]="data.project" (closeDialog)="dialogRef.close($event)"></app-edit-list-item>
    </div>

    <!-- Delete list node-->
    <div *ngSwitchCase="'deleteListNode'">
        <app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteListNode' | translate"></app-dialog-header>
        Do you want to delete this node?
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                [mat-dialog-close]="true">
                Delete
            </button>
        </mat-dialog-actions>
    </div>

    <!-- Delete list node error-->
    <div *ngSwitchCase="'deleteListNodeError'">
        Unable to delete this list node as it is in use.
        <mat-dialog-actions>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                [mat-dialog-close]="true">
                Okay
            </button>
        </mat-dialog-actions>
    </div>

    <!-- Delete list -->
    <div *ngSwitchCase="'deleteList'">
        <app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteList' | translate"></app-dialog-header>
        Do you want to delete this list?
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                [mat-dialog-close]="true">
                Delete
            </button>
        </mat-dialog-actions>
    </div>

    <!-- Ontology editor: create new ontology -->
    <div *ngSwitchCase="'createOntology'">
        <app-dialog-header [title]="'Data model'" [subtitle]="'Create new'"></app-dialog-header>
        <app-ontology-form [projectcode]="data.project" (closeDialog)="dialogRef.close($event)"
            [existingOntologyNames]="data.existing"></app-ontology-form>
    </div>

    <div *ngSwitchCase="'editOntology'">
        <app-dialog-header [title]="'Data model'" [subtitle]="'Edit'" (close)="dialogRef.close()">
        </app-dialog-header>
        <p class="todo" [innerHtml]="notYetImplemented"></p>
    </div>

    <div *ngSwitchCase="'deleteOntology'">
        <app-dialog-header [title]="data.title" [subtitle]="'Delete data model'"></app-dialog-header>
        Do you want to delete this data model?
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                [mat-dialog-close]="true">
                Delete
            </button>
        </mat-dialog-actions>
    </div>

    <!-- Ontology editor: customize and add resource class -->
    <div *ngSwitchCase="'addResourceClass'">
        <app-dialog-header [title]="data.title" [subtitle]="data.subtitle"></app-dialog-header>
        <app-resource-class-form [subClassOf]="data.name" [name]="data.title" [projectIri]="data.project"
            (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)">
        </app-resource-class-form>
    </div>

    <div *ngSwitchCase="'editResourceClass'">
        <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
        </app-dialog-header>
        <p class="todo" [innerHtml]="notYetImplemented"></p>
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
        </mat-dialog-actions>
    </div>

    <div *ngSwitchCase="'deleteResourceClass'">
        <app-dialog-header [title]="data.title" [subtitle]="'Delete resource class'"></app-dialog-header>
        Do you want to delete this resource class?
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                [mat-dialog-close]="true">
                Delete
            </button>
        </mat-dialog-actions>
    </div>

    <div *ngSwitchCase="'error'">
        <app-error [status]="data.id"></app-error>
    </div>

    <!-- all about RESOURCE -->
    <!-- Create resource -->
    <div *ngSwitchCase="'createResource'">
        <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
        </app-dialog-header>
        <app-resource-instance-form (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)"></app-resource-instance-form>
    </div>

    <!-- Unknown method (or not yet defined) -->
    <!-- Default dialog content component -->
    <div *ngSwitchDefault>
        <app-dialog-header [title]="'Not yet implemented'" [subtitle]="'ERROR 400'" (close)="dialogRef.close()">
        </app-dialog-header>
        <p class="todo" [innerHtml]="notYetImplemented"></p>
    </div>
</div>