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]="'Create new list'" [subtitle]=""></app-dialog-header>
        <app-list-info-form [projectCode]="data.project" [mode]="'create'" [projectIri]="data.id"
            (closeDialog)="dialogRef.close($event)">
        </app-list-info-form>
    </div>

    <!-- Insert list child node -->
    <div *ngSwitchCase="'insertListNode'">
        <app-dialog-header [title]="'Insert new child node'" [subtitle]="">
        </app-dialog-header>
        <app-edit-list-item [iri]="data.id" [projectIri]="data.project" mode="insert" [projectCode]="data.projectCode"
            [parentIri]="data.parentIri" [position]="data.position" (closeDialog)="dialogRef.close($event)">
        </app-edit-list-item>
    </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" [mode]="'update'" [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" mode="update"
            (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.title" [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.title" [subtitle]="'Customize data model'" (close)="dialogRef.close()">
        </app-dialog-header>
        <app-ontology-form [iri]="data.id" [projectCode]="data.project" (closeDialog)="dialogRef.close($event)"
            [existingOntologyNames]="data.existing"></app-ontology-form>
    </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="'createResourceClass'">
        <app-dialog-header [title]="data.title" [subtitle]="data.subtitle"></app-dialog-header>
        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectCode]="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>
        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectCode]="data.project" [edit]="true"
            (closeDialog)="dialogRef.close()">
        </app-resource-class-form>
    </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="'updateCardinality'">
        <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
        </app-dialog-header>
        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position"
            [canSetFullCardinality]="data.canBeUpdated" (closeDialog)="dialogRef.close()">
        </app-property-form>
    </div>

    <div *ngSwitchCase="'createProperty'">
        <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
        </app-dialog-header>
        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position"
            [canSetFullCardinality]="data.canBeUpdated" (closeDialog)="dialogRef.close()">
        </app-property-form>
    </div>

    <div *ngSwitchCase="'editProperty'">
        <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
        </app-dialog-header>
        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position"
            [canSetFullCardinality]="data.canBeUpdated" (closeDialog)="dialogRef.close()">
        </app-property-form>
    </div>


    <div *ngSwitchCase="'deleteProperty'">
        <app-dialog-header [title]="data.title" [subtitle]="'Delete property'"></app-dialog-header>
        Do you want to delete this property?
        <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>

    <!-- 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>

    <div *ngSwitchCase="'editResource'">
        <app-dialog-header [title]="data.title" [subtitle]="'Edit resource\'s label'">
        </app-dialog-header>
        <mat-dialog-content class="form-content">
            <mat-form-field class="large-field">
                <input matInput placeholder="Label" [value]="data.title" (keyup)="onKey($event)">
            </mat-form-field>
        </mat-dialog-content>
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center"
                [mat-dialog-close]="{confirmed: false, comment: comment}">
                Cancel
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'primary'" class="confirm-button center"
                [mat-dialog-close]="{confirmed: true, comment: comment}" [disabled]="!comment">
                Save
            </button>
        </mat-dialog-actions>
    </div>

    <div *ngSwitchCase="'deleteResource'">
        <app-dialog-header [title]="data.title" [subtitle]="'Delete resource instance'"></app-dialog-header>
        <mat-dialog-content class="form-content">
            <mat-form-field class="large-field">
                <mat-label>Comment why resource is being deleted</mat-label>
                <textarea matInput class="deletion-comment" type="text" (keyup)="onKey($event)"
                    [placeholder]="'Ex. Resource was created by mistake...'"></textarea>
            </mat-form-field>
            Do you want to delete this resource?
        </mat-dialog-content>
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center"
                [mat-dialog-close]="{confirmed: false, comment: comment}">
                No, keep it
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                [mat-dialog-close]="{confirmed: true, comment: comment}">
                Yes, delete
            </button>
        </mat-dialog-actions>
    </div>

    <div *ngSwitchCase="'eraseResource'">
        <app-dialog-header [title]="data.title" [subtitle]="'Delete resource'"></app-dialog-header>
        Do you want to erase this resource forever?<br><br>WARNING: This action cannot be undone, so use it with care.
        <mat-dialog-actions>
            <button mat-button mat-dialog-close class="cancel-button center"
                [mat-dialog-close]="{confirmed: false, comment: comment}">
                No, keep it
            </button>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                [mat-dialog-close]="{confirmed: true, comment: comment}">
                Yes, erase forever
            </button>
        </mat-dialog-actions>
    </div>

    <!-- general error message -->
    <div *ngSwitchCase="'error'">
        <app-error [status]="data.id"></app-error>
    </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>
        <mat-dialog-actions>
            <span class="fill-remaining-space"></span>
            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
                OK
            </button>
            <span class="fill-remaining-space"></span>
        </mat-dialog-actions>
    </div>
</div>