@formio/angular 7.5.0-rc.2 → 7.5.0-rc.3

package/projects/angular-formio/manager/src/index/index.component.ts

@@ -0,0 +1,98 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormManagerService } from '../form-manager.service';
+import { DefaultConfiguration, FormManagerConfig } from '../form-manager.config';
+import { FormioGridComponent } from '@formio/angular/grid';
+import { debounce } from 'lodash';
+
+@Component({
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss']
+})
+export class FormManagerIndexComponent implements OnInit, AfterViewInit {
+  @ViewChild('search') searchElement: ElementRef;
+  @ViewChild(FormioGridComponent, {static: false}) formGrid: FormioGridComponent;
+  public gridQuery: any;
+  public onSearch;
+  constructor(
+    public service: FormManagerService,
+    public route: ActivatedRoute,
+    public router: Router,
+    public config: FormManagerConfig
+  ) {
+    this.config = {...DefaultConfiguration, ...this.config};
+    this.gridQuery = {type: this.config.type, sort: 'title'};
+    if (this.config.tag) {
+      this.gridQuery.tags = this.config.tag;
+    }
+    this.onSearch = debounce(this._onSearch, 300);
+  }
+
+  loadGrid() {
+    this.gridQuery = JSON.parse(localStorage.getItem('query')) || this.gridQuery;
+    const currentPage = +localStorage.getItem('currentPage') || 0;
+    this.formGrid
+      .refreshGrid(this.gridQuery)
+      .then(() => this.formGrid.setPage(currentPage - 1));
+  }
+
+  ngOnInit() {
+    this.gridQuery = {type: this.config.type, sort: 'title'};
+    if (this.config.tag) {
+      this.gridQuery.tags = this.config.tag;
+    }
+    this.service.reset();
+    this.service.ready.then(() => {
+      this.loadGrid();
+      this.formGrid.footer.pageChanged.subscribe(page => {
+        localStorage.setItem('currentPage', page.page);
+      });
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.searchElement.nativeElement.value = localStorage.getItem('searchInput') || '';
+  }
+
+  _onSearch() {
+    const search = this.searchElement.nativeElement.value;
+    if (search.length > 0) {
+      this.gridQuery.skip = 0;
+      this.gridQuery.title__regex = '/' + search + '/i';
+      this.gridQuery.title__regex = '/' + search.trim() + '/i';
+    } else {
+      delete this.gridQuery.title__regex;
+    }
+    localStorage.setItem('query', JSON.stringify(this.gridQuery));
+    localStorage.setItem('searchInput', search);
+    this.formGrid.pageChanged({page: 1, itemPerPage: this.gridQuery.limit});
+  }
+
+  clearSearch() {
+    this.gridQuery = {type: this.config.type, sort: 'title'};
+    if (this.config.tag) {
+      this.gridQuery.tags = this.config.tag;
+    }
+    localStorage.removeItem('query');
+    localStorage.removeItem('searchInput');
+    localStorage.removeItem('currentPage');
+    if (this.searchElement?.nativeElement) {
+      this.searchElement.nativeElement.value = '';
+    }
+    this.formGrid.query = this.gridQuery;
+    this.formGrid.pageChanged({page: 1});
+  }
+
+  onAction(action: any) {
+    this.service.form = null; // Reset previous form data
+    this.router.navigate([action.row._id, action.action], { relativeTo: this.route });
+  }
+
+  onSelect(row: any) {
+    this.router.navigate([row._id], { relativeTo: this.route });
+  }
+
+  onCreateItem() {
+    this.router.navigate(['create'], { relativeTo: this.route });
+  }
+}

package/projects/angular-formio/manager/src/index.ts

@@ -0,0 +1,16 @@
+export { FormManagerConfig } from './form-manager.config';
+export { FormManagerService } from './form-manager.service';
+export { FormManagerRoutes } from './form-manager.routes';
+export { FormManagerIndexComponent } from './index/index.component';
+export { FormManagerCreateComponent } from './create/create.component';
+export { FormManagerFormComponent } from './form/form.component';
+export { FormManagerViewComponent } from './view/view.component';
+export { FormManagerEditComponent } from './edit/edit.component';
+export { FormManagerDeleteComponent } from './delete/delete.component';
+export { SubmissionEditComponent } from './submission/edit/edit.component';
+export { SubmissionDeleteComponent } from './submission/delete/delete.component';
+export { SubmissionViewComponent } from './submission/view/view.component';
+export { SubmissionIndexComponent } from './submission/index/index.component';
+export { SubmissionComponent } from './submission/submission/submission.component';
+export { FormManagerRouteConfig } from './form-manager.config';
+export { FormManagerModule } from './form-manager.module';

package/projects/angular-formio/manager/src/public_api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of @formio/angular
+ */
+
+export * from './index';

package/projects/angular-formio/manager/src/submission/delete/delete.component.html

@@ -0,0 +1,6 @@
+<formio-alerts [alerts]="alerts"></formio-alerts>
+<h3>Are you sure you wish to delete this record?</h3>
+<div class="btn-toolbar">
+  <button type="button" (click)="onDelete()" class="btn btn-danger" style="margin-right: 10px;">Yes</button>
+  <button type="button" (click)="onCancel()" class="btn btn-default">No</button>
+</div>

package/projects/angular-formio/manager/src/submission/delete/delete.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { FormManagerService } from '../../form-manager.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormioAlerts } from '@formio/angular';
+
+@Component({
+  templateUrl: './delete.component.html'
+})
+export class SubmissionDeleteComponent {
+  constructor(
+    public service: FormManagerService,
+    public router: Router,
+    public route: ActivatedRoute,
+    public alerts: FormioAlerts
+  ) {}
+
+  onDelete() {
+    this.service.formio.deleteSubmission().then(() => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    }).catch(err => this.alerts.setAlert({type: 'danger', message: (err.message || err)}));
+  }
+
+  onCancel() {
+    this.router.navigate(['../', 'view'], { relativeTo: this.route });
+  }
+}

package/projects/angular-formio/manager/src/submission/edit/edit.component.html

@@ -0,0 +1,7 @@
+<formio
+  [renderer]="service.config.renderer"
+  [src]="service.formio.submissionUrl"
+  (submit)="onSubmit($event)"
+  (formLoad)="service.setForm($event)"
+  (submissionLoad)="service.submissionLoaded($event)"
+></formio>

package/projects/angular-formio/manager/src/submission/edit/edit.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { FormManagerService } from '../../form-manager.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  templateUrl: './edit.component.html'
+})
+export class SubmissionEditComponent {
+  constructor(
+    public service: FormManagerService,
+    public router: Router,
+    public route: ActivatedRoute
+  ) { }
+
+  onSubmit(submission) {
+    this.router.navigate(['../../'], {relativeTo: this.route});
+  }
+}

package/projects/angular-formio/manager/src/submission/index/index.component.html

@@ -0,0 +1 @@
+<formio-grid [formio]="service.formio" (rowSelect)="onSelect($event)"></formio-grid>

package/projects/angular-formio/manager/src/submission/index/index.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormManagerService } from '../../form-manager.service';
+
+@Component({
+  templateUrl: './index.component.html'
+})
+export class SubmissionIndexComponent {
+  constructor(
+    public service: FormManagerService,
+    public route: ActivatedRoute,
+    public router: Router
+  ) {}
+
+  onSelect(row: any) {
+    this.router.navigate([row._id, 'view'], {relativeTo: this.route});
+  }
+}

package/projects/angular-formio/manager/src/submission/submission/submission.component.html

@@ -0,0 +1,8 @@
+<a *ngIf="downloadUrl" [href]="downloadUrl" target="_blank" class="pull-right"><img src="https://pro.formview.io/assets/pdf.png" alt="pdfImage" style="height: 2em;" /></a>
+<ul aria-label="Submission" role="navigation" class="nav nav-tabs" style="margin-bottom:10px">
+  <li class="nav-item"><a class="nav-link" routerLink="../"><em class="fa fa-chevron-left bi bi-chevron-left"></em></a></li>
+  <li class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="view" routerLinkActive="active"><em class="fa fa-eye bi bi-eye"></em> View</a></li>
+  <li class="nav-item" routerLinkActive="active" *ngIf="service.perms.edit"><a class="nav-link" routerLink="edit" routerLinkActive="active"><em class="fa fa-edit bi bi-pencil-square"></em> Edit</a></li>
+  <li class="nav-item" routerLinkActive="active" *ngIf="service.perms.delete"><a class="nav-link" routerLink="delete" routerLinkActive="active"><span class="fa fa-trash bi bi-trash"></span></a></li>
+</ul>
+<router-outlet></router-outlet>

package/projects/angular-formio/manager/src/submission/submission/submission.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { FormManagerService } from '../../form-manager.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  templateUrl: './submission.component.html'
+})
+export class SubmissionComponent implements OnInit {
+  public downloadUrl: string;
+  constructor(
+    public service: FormManagerService,
+    public route: ActivatedRoute
+  ) { }
+
+  setDownloadUrl(url) {
+    this.downloadUrl = url;
+  }
+
+  ngOnInit() {
+    this.service.setSubmission(this.route).then((formio: any) => {
+      formio.getDownloadUrl().then((url) => this.setDownloadUrl(url));
+    });
+  }
+}

package/projects/angular-formio/manager/src/submission/view/view.component.html

@@ -0,0 +1,7 @@
+<formio
+  [renderer]="service.config.renderer"
+  [src]="service.formio.submissionUrl"
+  [readOnly]="true"
+  (formLoad)="service.setForm($event)"
+  (submissionLoad)="service.submissionLoaded($event)"
+></formio>

package/projects/angular-formio/manager/src/submission/view/view.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { FormManagerService } from '../../form-manager.service';
+
+@Component({
+  templateUrl: './view.component.html'
+})
+export class SubmissionViewComponent {
+  constructor(public service: FormManagerService) { }
+}

package/projects/angular-formio/manager/src/view/view.component.html

@@ -0,0 +1,11 @@
+<formio *ngIf="service.form"
+  [renderer]="config.renderer"
+  [renderOptions]="renderOptions"
+  [url]="service.formio.formUrl"
+  [form]="service.form"
+  [submission]="submission"
+  [success]="onSuccess"
+  [submitDone]="onSubmitDone"
+  [error]="onError"
+  (submit)="onSubmit($event)"
+></formio>

package/projects/angular-formio/manager/src/view/view.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, EventEmitter } from '@angular/core';
+import { FormManagerConfig } from '../form-manager.config';
+import { FormManagerService } from '../form-manager.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormioAuthService } from '@formio/angular/auth';
+import { Formio } from '@formio/js';
+
+@Component({
+  templateUrl: './view.component.html'
+})
+export class FormManagerViewComponent implements OnInit {
+  public submission: any;
+  public renderOptions: any;
+  public onSuccess: EventEmitter<object> = new EventEmitter();
+  public onError: EventEmitter<object> = new EventEmitter();
+  public onSubmitDone: EventEmitter<object> = new EventEmitter();
+  constructor(
+    public service: FormManagerService,
+    public router: Router,
+    public route: ActivatedRoute,
+    public config: FormManagerConfig,
+    public auth: FormioAuthService
+  ) {
+    this.renderOptions = {
+      saveDraft: this.config.saveDraft
+    };
+    this.submission = {data: {}};
+  }
+
+  ngOnInit() {
+    this.service.formio = new Formio(this.service.formio.formUrl);
+  }
+
+  onSubmit(submission: any) {
+    const isDraft = submission.state === 'draft';
+    this.submission.data = submission.data;
+    this.submission.state = isDraft ? submission.state : 'complete';
+    this.service.formio.saveSubmission(this.submission).then(saved => {
+      this.onSubmitDone.emit(saved);
+      this.onSuccess.emit();
+      this.router.navigate(['../', 'submission', saved._id], {relativeTo: this.route});
+    }).catch((err) => this.onError.emit(err));
+  }
+}

package/projects/angular-formio/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/angular-formio",
+  "lib": {
+    "entryFile": "./src/index.ts"
+  }
+}

package/projects/angular-formio/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@formio/angular",
+  "version": "7.5.0-rc.2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formio/angular-formio"
+  },
+  "author": {
+    "name": "Travis Tidwell",
+    "email": "travis@form.io"
+  },
+  "keywords": [
+    "angular",
+    "forms",
+    "json forms",
+    "javascript forms",
+    "model driven forms",
+    "form.io"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/formio/angular-formio/issues"
+  },
+  "engines": {
+    "node": ">=6.0.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@angular/elements": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@formio/js": "^5.0.0",
+    "zone.js": "~0.13.0 || ~0.14.0",
+    "lodash": "^4.17.20",
+    "ngx-bootstrap": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^18.0.0",
+    "tslib": "^2.0.0"
+  }
+}

package/projects/angular-formio/resource/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "../resource/src/index.ts"
+  }
+}

package/projects/angular-formio/resource/src/create/create.component.html

@@ -0,0 +1,13 @@
+<h3 *ngIf="service.form" style="margin-top:0;">
+  <a routerLink="../" class="back-button">
+    <em class="fa fa-chevron-left bi bi-chevron-left"></em>
+  </a> | New {{ service.form.title }}
+</h3>
+<formio
+  [form]="service.form"
+  [submission]="service.resource"
+  [refresh]="service.refresh"
+  [error]="onError"
+  [success]="onSuccess"
+  (submit)="onSubmit($event)"
+></formio>

package/projects/angular-formio/resource/src/create/create.component.scss

@@ -0,0 +1,3 @@
+.back-button {
+  font-size: 0.8em;
+}

package/projects/angular-formio/resource/src/create/create.component.ts

@@ -0,0 +1,37 @@
+import { Component, EventEmitter, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormioResourceService } from '../resource.service';
+import { FormioResourceConfig } from '../resource.config';
+
+@Component({
+  styleUrls: ['./create.component.scss'],
+  templateUrl: './create.component.html'
+})
+export class FormioResourceCreateComponent implements OnInit {
+  public onError: EventEmitter<any>;
+  public onSuccess: EventEmitter<any>;
+  constructor(
+    public service: FormioResourceService,
+    public route: ActivatedRoute,
+    public router: Router,
+    public config: FormioResourceConfig
+  ) {
+    this.onError = new EventEmitter();
+    this.onSuccess = new EventEmitter();
+  }
+
+  ngOnInit(): void {
+    this.service.init(this.route);
+  }
+
+  onSubmit(submission: any) {
+    this.service
+      .save(submission)
+      .then(() => {
+        this.router.navigate(['../', this.service.resource._id, 'view'], {
+          relativeTo: this.route
+        });
+      })
+      .catch((err: any) => this.onError.emit(err));
+  }
+}

package/projects/angular-formio/resource/src/delete/delete.component.html

@@ -0,0 +1,5 @@
+<h3>Are you sure you wish to delete this record?</h3>
+<div class="btn-toolbar">
+  <button type="button" (click)="onDelete()" class="btn btn-danger" style="margin-right: 10px;">Yes</button>
+  <button type="button" (click)="onCancel()" class="btn btn-danger">No</button>
+</div>

package/projects/angular-formio/resource/src/delete/delete.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormioResourceService } from '../resource.service';
+
+@Component({
+  templateUrl: './delete.component.html'
+})
+export class FormioResourceDeleteComponent {
+  constructor(
+    public service: FormioResourceService,
+    public route: ActivatedRoute,
+    public router: Router
+  ) {}
+
+  onDelete() {
+    this.service.remove().then(() => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+
+  onCancel() {
+    this.router.navigate(['../', 'view'], { relativeTo: this.route });
+  }
+}

package/projects/angular-formio/resource/src/edit/edit.component.html

@@ -0,0 +1,7 @@
+<formio
+  [form]="service.form"
+  [submission]="service.resource"
+  [error]="triggerError"
+  [submitDone]="onSubmitDone"
+  (submit)="onSubmit($event)"
+></formio>

package/projects/angular-formio/resource/src/edit/edit.component.ts

@@ -0,0 +1,35 @@
+import {Component, EventEmitter, OnDestroy} from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormioResourceService } from '../resource.service';
+import { FormioResourceConfig } from '../resource.config';
+import { Formio } from '@formio/js';
+
+@Component({
+  templateUrl: './edit.component.html'
+})
+export class FormioResourceEditComponent implements OnDestroy {
+  public triggerError: EventEmitter<any> = new EventEmitter();
+  public onSubmitDone: EventEmitter<object> = new EventEmitter();
+  public submission = {data: {}};
+  constructor(
+    public service: FormioResourceService,
+    public route: ActivatedRoute,
+    public router: Router,
+    public config: FormioResourceConfig
+  ) {}
+
+  onSubmit(submission: any) {
+    const edit = this.service.resource;
+    edit.data = submission.data;
+    this.service.save(edit)
+      .then(() => {
+        this.onSubmitDone.emit(this.service.resource);
+        this.router.navigate(['../', 'view'], { relativeTo: this.route });
+      })
+      .catch((err) => this.triggerError.emit(err));
+  }
+
+  ngOnDestroy() {
+    Formio.clearCache();
+  }
+}

package/projects/angular-formio/resource/src/index/index.component.html

@@ -0,0 +1,10 @@
+<formio-alerts [alerts]="service.alerts"></formio-alerts>
+<formio-grid
+  [src]="gridSrc"
+  [query]="gridQuery"
+  [onForm]="service.formLoaded"
+  (rowSelect)="onSelect($event)"
+  (error)="service.onError($event)"
+  (createItem)="onCreateItem()"
+  [createText]="createText"
+></formio-grid>

package/projects/angular-formio/resource/src/index/index.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormioResourceService } from '../resource.service';
+import { FormioResourceConfig } from '../resource.config';
+import { each } from 'lodash';
+
+@Component({
+  templateUrl: './index.component.html'
+})
+export class FormioResourceIndexComponent implements OnInit {
+  public gridSrc?: string;
+  public gridQuery: any;
+  public createText: String;
+
+  constructor(
+    public service: FormioResourceService,
+    public route: ActivatedRoute,
+    public router: Router,
+    public config: FormioResourceConfig,
+    public cdr: ChangeDetectorRef,
+    public ngZone: NgZone,
+  ) {
+  }
+
+  ngOnInit() {
+    this.service.init(this.route).then(() => {
+      this.gridQuery = {};
+      if (
+        this.service &&
+        this.config.parents &&
+        this.config.parents.length
+      ) {
+        this.service.loadParents().then((parents: any) => {
+          each(parents, (parent: any) => {
+            if (parent && parent.filter) {
+              this.gridQuery['data.' + parent.name + '._id'] =
+                parent.resource._id;
+            }
+          });
+
+          // Set the source to load the grid.
+          this.gridSrc = this.service.formUrl;
+          this.createText = `New ${this.service.form.title}`;
+          this.cdr.detectChanges();
+        });
+      } else if (this.service.formUrl) {
+        this.gridSrc = this.service.formUrl;
+        this.createText = `New ${this.service.form.title}`;
+      }
+    });
+  }
+
+  onSelect(row: any) {
+    this.ngZone.run(() => {
+      this.router.navigate([row._id, 'view'], { relativeTo: this.route });
+    });
+  }
+
+  onCreateItem() {
+    this.ngZone.run(() => {
+      this.router.navigate(['new'], { relativeTo: this.route });
+    });
+  }
+}

package/projects/angular-formio/resource/src/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var resource_config_1 = require("./resource.config");
+exports.FormioResourceConfig = resource_config_1.FormioResourceConfig;
+var resources_service_1 = require("./resources.service");
+exports.FormioResources = resources_service_1.FormioResources;
+var resource_service_1 = require("./resource.service");
+exports.FormioResourceService = resource_service_1.FormioResourceService;
+var resource_component_1 = require("./resource.component");
+exports.FormioResourceComponent = resource_component_1.FormioResourceComponent;
+var view_component_1 = require("./view/view.component");
+exports.FormioResourceViewComponent = view_component_1.FormioResourceViewComponent;
+var edit_component_1 = require("./edit/edit.component");
+exports.FormioResourceEditComponent = edit_component_1.FormioResourceEditComponent;
+var delete_component_1 = require("./delete/delete.component");
+exports.FormioResourceDeleteComponent = delete_component_1.FormioResourceDeleteComponent;
+var create_component_1 = require("./create/create.component");
+exports.FormioResourceCreateComponent = create_component_1.FormioResourceCreateComponent;
+var index_component_1 = require("./index/index.component");
+exports.FormioResourceIndexComponent = index_component_1.FormioResourceIndexComponent;
+var resource_routes_1 = require("./resource.routes");
+exports.FormioResourceRoutes = resource_routes_1.FormioResourceRoutes;
+var resource_module_1 = require("./resource.module");
+exports.FormioResource = resource_module_1.FormioResource;

package/projects/angular-formio/resource/src/index.ts

@@ -0,0 +1,11 @@
+export { FormioResourceConfig } from './resource.config';
+export { FormioResources } from './resources.service';
+export { FormioResourceService } from './resource.service';
+export { FormioResourceComponent } from './resource.component';
+export { FormioResourceViewComponent } from './view/view.component';
+export { FormioResourceEditComponent } from './edit/edit.component';
+export { FormioResourceDeleteComponent } from './delete/delete.component';
+export { FormioResourceCreateComponent } from './create/create.component';
+export { FormioResourceIndexComponent } from './index/index.component';
+export { FormioResourceRoutes } from './resource.routes';
+export { FormioResource } from './resource.module';

package/projects/angular-formio/resource/src/public_api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of angular-formio
+ */
+
+export * from './index';

package/projects/angular-formio/resource/src/resource.component.html

@@ -0,0 +1,7 @@
+<ul class="nav nav-tabs" style="margin-bottom: 10px">
+  <li class="nav-item"><a class="nav-link" routerLink="../"><em class="fa fa-chevron-left bi bi-chevron-left"></em></a></li>
+  <li class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="view" routerLinkActive="active">View</a></li>
+  <li class="nav-item" routerLinkActive="active" *ngIf="perms.edit"><a class="nav-link" routerLink="edit" routerLinkActive="active">Edit</a></li>
+  <li class="nav-item" routerLinkActive="active" *ngIf="perms.delete"><a class="nav-link" routerLink="delete" routerLinkActive="active"><span class="fa fa-trash bi bi-trash"></span></a></li>
+</ul>
+<router-outlet></router-outlet>