typescript 具有表单输入的Angular Component父/子动态更新

Posted 2021-05-21

module JITMed.Admin.Security {
  'use strict';

  export class SecurityListComponentController {
    static $inject: Array<string> = ['RoleService', 'PermissionService', '$state', '$timeout'];
    public roles: Array<JITMed.Admin.Security.Role>;
    public rolesLoaded: boolean = false;
    public permissions: Array<JITMed.Admin.Security.Permission>;
    public permissionsLoaded: boolean = false;

    constructor(
      private RoleService: JITMed.Admin.Security.IRolesService,
      private PermissionService: JITMed.Admin.Security.IPermissionsService,
      private $state: ng.ui.IStateService,
      private $timeout: ng.ITimeoutService
    ) { }

    $onInit() {
      this.RoleService.getRoles()
        .then((result) => {
          this.$timeout(() => {
            this.roles = result;
            this.rolesLoaded = true;
          }, 500);
        });

        this.PermissionService.getPermissions()
        .then((result) => {
          this.$timeout(() => {
            this.permissions = result;
            this.permissionsLoaded = true;
          }, 500);
        });
    }

    public processNewRole(newRole) {
      this.roles.push(newRole);
    }
  }

  angular.module('JITMed.admin.security')
    .component('securityList', {
      templateUrl: 'app/admin/security/security-list/security-list.component.html',
      controller: SecurityListComponentController
    });
}

module JITMed.Admin.Security {
  'use strict';

  export class RolesListComponentController {
      static $inject: Array<string> = ['$mdDialog', '$state'];
      public role: JITMed.Admin.Security.Role;
      public roles: Array<JITMed.Admin.Security.Role>;

      constructor(
        private $mdDialog: ng.material.IDialogService,
        private $state: ng.ui.IStateService
      ) { }

      $onInit() {

      }

      addRole($event) {
        this.$mdDialog.show({
          parent: angular.element(document.body),
          targetEvent: $event,
          template: '<roles-add-form></roles-add-form>',
          fullscreen: true
        }).then((roleResponse) => {
          this.onAdded({newRole: roleResponse});
        });
      }
  }

  angular.module('JITMed.admin.security')
    .component('rolesList', {
      templateUrl: 'app/admin/security/shared/roles/roles-list.component.html',
      controller: RolesListComponentController,
      bindings: {
        'roles': '<',
        'rolesLoaded': '<',
        'onAdded': '&'
      }
    });
}

<div layout="row" class="card-section-row">
    <span class="card-section-row--heading">Roles</span>
    <span flex></span>
    <md-button ng-click="$ctrl.addRole($event)" aria-label="Add Role">
        <md-tooltip>Add Role</md-tooltip>
        <md-icon md-svg-icon="add"></md-icon>
        Add Role
    </md-button>
</div>
<md-card>
    <md-card-title class="card-title-modified">
        <md-card-header-text>
            <span>Name</span>
        </md-card-header-text>
    </md-card-title>
    <md-card-content class="card-content-list">
        <md-list>
            <md-list-item ng-if="!$ctrl.rolesLoaded">
                <md-progress-linear md-mode="query"></md-progress-linear>
            </md-list-item>
            <md-list-item ng-if="$ctrl.roles.length === 0">
                <div class="md-list-item-text">
                    <h3>No roles have been created.</h3>
                </div>
            </md-list-item>
            <md-list-item class="md-3-line" ng-repeat="role in $ctrl.roles">
                <div class="md-list-item-text" layout="column">
                    <h3 ng-bind="role.name"></h3>
                    <h4 ng-bind="role.description"></h4> 
                    <p>Users: <span ng-bind="role.usersCount"></span> &nbsp; | &nbsp; Permissions: <span ng-bind="role.permissionsCount"></span></p>
                </div>
                <md-divider ng-if="!$last"></md-divider>
            </md-list-item>
        </md-list>
    </md-card-content>
</md-card>

<md-dialog-content>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2 ng-bind="$ctrl.formTitle"></h2>
    </div>
  </md-toolbar>
  <div layout="column" ng-if="$ctrl.errors" class="error-container">
    <ul ng-repeat="errors in $ctrl.errors">
      <li class="error-container-item" ng-repeat="error in errors" ng-bind="error"></li>
    </ul>
  </div>

  <form name="addRoleForm" novalidate>
    <div class="md-dialog-content">

      <md-input-container class="md-block">
        <label>Name</label>
        <input ng-model="$ctrl.name"
               name="name"
               required
               aria-label="Name">
        <div class="validation-messages"
             ng-messages="rolesForm.name.$error">
          <div ng-message="required">This field is required!</div>
        </div>
      </md-input-container>
      
      <md-input-container class="md-block">
        <label>Description</label>
        <textarea ng-model="$ctrl.description"
                  name="description"
                  required
                  aria-label="Description"></textarea>
      </md-input-container>

      <md-dialog-actions layout="row">
        <span flex></span>
        <md-button ng-click="$ctrl.cancel()" aria-label="Cancel">
          Cancel
        </md-button>
        <md-button ng-click="$ctrl.save()" ng-disabled="!$ctrl.isValid()" aria-label="Save">
          Save
        </md-button>
      </md-dialog-actions>
    </div>
  </form>
</md-dialog-content>

<div layout-xs="column" layout="row">
  <div flex-xs flex-gt-xs="100" layout="column">
    <page-header title="'Manage Security'"></page-header>
    <roles-list roles="$ctrl.roles" roles-loaded="$ctrl.rolesLoaded" on-added="$ctrl.processNewRole(newRole)"></roles-list>
    <permissions-list permissions="$ctrl.permissions" permissions-loaded="$ctrl.permissionsLoaded"></permissions-list>
  </div>
</div>

module JITMed.Admin.Security {
    'use strict';

    class RolesFormController extends JITMed.Form.FormController {
        static $inject: Array<string> = ['RoleService', '$mdDialog'];
        public name: string;
        public description: string;

        constructor(
            private RoleService: JITMed.Admin.Security.IRolesService,
            private $mdDialog: ng.material.IDialogService
        ) {
            super();
        }

        $onInit() {
            this.formTitle = 'Add Role';
        }

        save(form: ng.IFormController) {
            if (this.isValid(form)) {
                this.RoleService.addRole(this.name, this.description)
                .then((response) => {
                    this.$mdDialog.hide(response);
                });
            }
        }

        cancel() {
            this.$mdDialog.cancel();
        }

    }

    angular.module('JITMed.admin.security')
        .component('rolesAddForm', {
            templateUrl: 'app/admin/security/shared/roles/roles-add-form/roles-add-form.component.html',
            controller: RolesFormController
        });
}