pocketcommunityweb/src/app/account/score/score.component.html

  <form [formGroup]="scoreFrom">
    <!--    用户名-->
    <div class="input-group mb-3 mx-auto col-6">
      <div class="input-group-prepend">
        <span class="input-group-text">{{ prefix('username') | translate }}</span>
      </div>
      <input type="text" class="form-control text-center" [class.is-invalid]="getValue('username').invalid"
             [placeholder]="'tip.input' | translate:{value:prefix('username')|translate}"
             formControlName="username" aria-label="username"/>
      <select class="custom-select" formControlName="like" aria-label="like">
        <option value="true">{{prefix('search_is_like')|translate}}</option>
        <option value="false">{{prefix('search_is_not_like')|translate}}</option>
      </select>

      <div class="input-group-prepend">
        <span
          class="input-group-text bg-transparent">{{ prefix('orderScore') | translate:{order: scoreFrom.get('desc').value ? (prefix('desc')|translate) : (prefix('asc')|translate)} }}</span>
      </div>
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox" formControlName="orderScore">
        </div>
      </div>
      <ng-container *ngIf="scoreFrom.get('orderScore').value">
        <div class="input-group-prepend">
          <div class="input-group-text">
            {{prefix('desc')|translate}}
          </div>
          <div class="input-group-text">
            <input type="radio" formControlName="desc" [value]="true">
          </div>
          <div class="input-group-text">
            {{prefix('asc')|translate}}
          </div>
          <div class="input-group-text">
            <input type="radio" formControlName="desc" [value]="false">
          </div>
        </div>
      </ng-container>

      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary" type="button" [disabled]="form().invalid"
                (click)="loadAll(1)">{{'button.search'|translate}}</button>
      </div>
    </div>
  </form>

  <app-page [pageData]="users" [currentPage]="currentPage" (voted)="loadAll($event)"></app-page>

  <table class="table">
    <thead>
    <tr>
      <th scope="col" class="text-center">{{prefix('username')|translate}}</th>
      <th scope="col" class="text-center">{{prefix('score')|translate}}</th>
      <th scope="col" class="text-center">{{prefix('action')|translate}}</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngIf="users">
      <tr *ngFor="let user of users.list">
        <td class="text-center">{{user.username}}</td>
        <td class="text-center">{{user.creditScore}}</td>
        <td class="text-center">
          <div class="text-center">
            <button class="btn btn-outline-info mr-3" data-toggle="modal" data-target="#exampleModal"
                    (click)="editForm.get('username').setValue(user.username);editForm.get('beforeScore').setValue(user.creditScore)">{{prefix('changeScore')|translate}}</button>
          </div>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </table>

  <app-page [pageData]="users" [currentPage]="currentPage" (voted)="loadAll($event)"></app-page>


  <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{prefix('changeScore')|translate}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form [formGroup]="editForm">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">{{ prefix('username') | translate }}</span>
            </div>
            <input type="text" class="form-control" readonly="readonly" formControlName="username">
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text">{{ prefix('targetScore') | translate }}</span>
            <input type="number" class="form-control"
                   [placeholder]="'tip.input' | translate:{value:prefix('changeScore')|translate}"
                   formControlName="score"
                   [class.is-invalid]="editForm.get('score').invalid">
            <span class="input-group-text text-danger bg-transparent">{{ prefix('tip') | translate }}</span>

            <div class="invalid-feedback font-weight-bold text-center">
              {{'tip.notnull' | translate:{value: prefix('changeScore')|translate} }}
            </div>
          </div>

          <span>{{prefix('score_tip')|translate:{
            beforeScore: editForm.get('beforeScore').value,
            afterScore: editForm.get('beforeScore').value + editForm.get('score').value
          }  }}</span>

          <div class="input-group mb-3">
            <span class="input-group-text">{{ prefix('notes') | translate }}</span>
            <input type="text" class="form-control"
                   [placeholder]="'tip.input' | translate:{value:prefix('notes')|translate}" formControlName="notes"
                   [class.is-invalid]="editForm.get('notes').invalid">

            <div class="invalid-feedback font-weight-bold text-center">
              {{'tip.notnull' | translate:{value: prefix('notes')|translate} }}
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer mx-auto">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"
                (click)="editForm.reset()">{{'button.back'|translate}}</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal"
                (click)="editScore()">{{'button.submit'|translate}}</button>
      </div>
    </div>
  </div>
</div>