Add a new common toolbar component. (#2143)

Co-authored-by: Logic <[email protected]>
apache · Jun 26, 2024 · cbb4b8c · cbb4b8c
1 parent dbac0df
commit cbb4b8c
Show file tree

Hide file tree

Showing 14 changed files with 545 additions and 362 deletions.
diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.html b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
@@ -23,68 +23,70 @@
   [module_name]="'menu.alert.center'"
   [icon_name]="'alert'"
 ></app-help-massage-show>
-<nz-divider></nz-divider>
 
-<div style="margin-bottom: 20px">
-  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
-    <i nz-icon nzType="sync" nzTheme="outline"></i>
-  </button>
+<nz-divider></nz-divider>
 
-  <button nz-button nzType="primary" (click)="onMarkReadAlerts()">
-    <i nz-icon nzType="down-circle" nzTheme="outline"></i>
-    {{ 'alert.center.deal' | i18n }}
-  </button>
-  <button nz-button nzType="primary" nzDanger (click)="onMarkUnReadAlerts()" class="mobile-hide">
-    <i nz-icon nzType="up-circle" nzTheme="outline"></i>
-    {{ 'alert.center.no-deal' | i18n }}
-  </button>
-  <button nz-button nzType="primary" nzDanger (click)="onDeleteAlerts()" class="mobile-hide">
-    <i nz-icon nzType="delete" nzTheme="outline"></i>
-    {{ 'alert.center.delete' | i18n }}
-  </button>
-  <button nz-button nzType="primary" nzDanger (click)="onClearAllAlerts()">
-    <i nz-icon nzType="clear" nzTheme="outline"></i>
-    {{ 'alert.center.clear' | i18n }}
-  </button>
+<app-toolbar>
+  <ng-template #left>
+    <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
+      <i nz-icon nzType="sync" nzTheme="outline"></i>
+    </button>
 
-  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="loadAlertsTable()" class="mobile-hide">
-    {{ 'common.search' | i18n }}
-  </button>
-  <app-multi-func-input
-    groupStyle="margin-right: 5px; float: right; width: 200px;"
-    inputStyle="text-align: center"
-    class="mobile-hide"
-    [placeholder]="'alert.center.search' | i18n"
-    [(value)]="filterContent"
-    (valueChange)="loadAlertsTable()"
-  />
-  <nz-select
-    class="mobile-hide"
-    style="margin-right: 10px; float: right"
-    nzAllowClear
-    [nzPlaceHolder]="'alert.center.filter-status' | i18n"
-    (ngModelChange)="loadAlertsTable()"
-    [(ngModel)]="filterStatus"
-  >
-    <nz-option [nzLabel]="'alert.status.all' | i18n" [nzValue]="9"></nz-option>
-    <nz-option [nzLabel]="'alert.status.0' | i18n" [nzValue]="0"></nz-option>
-    <nz-option [nzLabel]="'alert.status.2' | i18n" [nzValue]="2"></nz-option>
-    <nz-option [nzLabel]="'alert.status.3' | i18n" [nzValue]="3"></nz-option>
-  </nz-select>
-  <nz-select
-    class="mobile-hide"
-    style="margin-right: 10px; float: right"
-    nzAllowClear
-    [nzPlaceHolder]="'alert.center.filter-priority' | i18n"
-    (ngModelChange)="loadAlertsTable()"
-    [(ngModel)]="filterPriority"
-  >
-    <nz-option [nzLabel]="'alert.priority.all' | i18n" [nzValue]="9"></nz-option>
-    <nz-option [nzLabel]="'alert.priority.2' | i18n" [nzValue]="2"></nz-option>
-    <nz-option [nzLabel]="'alert.priority.1' | i18n" [nzValue]="1"></nz-option>
-    <nz-option [nzLabel]="'alert.priority.0' | i18n" [nzValue]="0"></nz-option>
-  </nz-select>
-</div>
+    <button nz-button nzType="primary" (click)="onMarkReadAlerts()">
+      <i nz-icon nzType="down-circle" nzTheme="outline"></i>
+      {{ 'alert.center.deal' | i18n }}
+    </button>
+    <button nz-button nzType="primary" nzDanger (click)="onMarkUnReadAlerts()" class="mobile-hide">
+      <i nz-icon nzType="up-circle" nzTheme="outline"></i>
+      {{ 'alert.center.no-deal' | i18n }}
+    </button>
+    <button nz-button nzType="primary" nzDanger (click)="onDeleteAlerts()" class="mobile-hide">
+      <i nz-icon nzType="delete" nzTheme="outline"></i>
+      {{ 'alert.center.delete' | i18n }}
+    </button>
+    <button nz-button nzType="primary" nzDanger (click)="onClearAllAlerts()">
+      <i nz-icon nzType="clear" nzTheme="outline"></i>
+      {{ 'alert.center.clear' | i18n }}
+    </button>
+  </ng-template>
+  <ng-template #right>
+    <nz-select
+      class="mobile-hide"
+      nzAllowClear
+      [nzPlaceHolder]="'alert.center.filter-priority' | i18n"
+      (ngModelChange)="loadAlertsTable()"
+      [(ngModel)]="filterPriority"
+    >
+      <nz-option [nzLabel]="'alert.priority.all' | i18n" [nzValue]="9"></nz-option>
+      <nz-option [nzLabel]="'alert.priority.2' | i18n" [nzValue]="2"></nz-option>
+      <nz-option [nzLabel]="'alert.priority.1' | i18n" [nzValue]="1"></nz-option>
+      <nz-option [nzLabel]="'alert.priority.0' | i18n" [nzValue]="0"></nz-option>
+    </nz-select>
+    <nz-select
+      class="mobile-hide"
+      nzAllowClear
+      [nzPlaceHolder]="'alert.center.filter-status' | i18n"
+      (ngModelChange)="loadAlertsTable()"
+      [(ngModel)]="filterStatus"
+    >
+      <nz-option [nzLabel]="'alert.status.all' | i18n" [nzValue]="9"></nz-option>
+      <nz-option [nzLabel]="'alert.status.0' | i18n" [nzValue]="0"></nz-option>
+      <nz-option [nzLabel]="'alert.status.2' | i18n" [nzValue]="2"></nz-option>
+      <nz-option [nzLabel]="'alert.status.3' | i18n" [nzValue]="3"></nz-option>
+    </nz-select>
+    <app-multi-func-input
+      groupStyle="width: 200px;"
+      inputStyle="text-align: center"
+      class="mobile-hide"
+      [placeholder]="'alert.center.search' | i18n"
+      [(value)]="filterContent"
+      (valueChange)="loadAlertsTable()"
+    />
+    <button nz-button nzType="primary" (click)="loadAlertsTable()" class="mobile-hide">
+      {{ 'common.search' | i18n }}
+    </button>
+  </ng-template>
+</app-toolbar>
 
 <nz-table
   #fixedTable

diff --git a/web-app/src/app/routes/alert/alert-converge/alert-converge.component.html b/web-app/src/app/routes/alert/alert-converge/alert-converge.component.html
@@ -23,32 +23,38 @@
   [module_name]="'menu.alert.converge'"
   [icon_name]="'filter'"
 ></app-help-massage-show>
+
 <nz-divider></nz-divider>
-<div style="margin-bottom: 20px">
-  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
-    <i nz-icon nzType="sync" nzTheme="outline"></i>
-  </button>
-  <button nz-button nzType="primary" (click)="onNewAlertConverge()">
-    <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
-    {{ 'alert.converge.new' | i18n }}
-  </button>
-  <button nz-button nzType="primary" nzDanger (click)="onDeleteAlertConverges()">
-    <i nz-icon nzType="delete" nzTheme="outline"></i>
-    {{ 'alert.converge.delete' | i18n }}
-  </button>
-  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="loadAlertConvergeTable()">
-    {{ 'common.search' | i18n }}
-  </button>
-  <input
-    style="margin-right: 5px; float: right; width: 200px; text-align: center; margin-right: 0"
-    nz-input
-    type="text"
-    [placeholder]="'alert.converge.name' | i18n"
-    nzSize="default"
-    (keyup.enter)="loadAlertConvergeTable()"
-    [(ngModel)]="search"
-  />
-</div>
+
+<app-toolbar>
+  <ng-template #left>
+    <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
+      <i nz-icon nzType="sync" nzTheme="outline"></i>
+    </button>
+    <button nz-button nzType="primary" (click)="onNewAlertConverge()">
+      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+      {{ 'alert.converge.new' | i18n }}
+    </button>
+    <button nz-button nzType="primary" nzDanger (click)="onDeleteAlertConverges()">
+      <i nz-icon nzType="delete" nzTheme="outline"></i>
+      {{ 'alert.converge.delete' | i18n }}
+    </button>
+  </ng-template>
+  <ng-template #right>
+    <input
+      style="width: 200px; text-align: center"
+      nz-input
+      type="text"
+      [placeholder]="'alert.converge.name' | i18n"
+      nzSize="default"
+      (keyup.enter)="loadAlertConvergeTable()"
+      [(ngModel)]="search"
+    />
+    <button nz-button nzType="primary" (click)="loadAlertConvergeTable()">
+      {{ 'common.search' | i18n }}
+    </button>
+  </ng-template>
+</app-toolbar>
 
 <nz-table
   #fixedTable

diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
@@ -23,20 +23,24 @@
   [icon_name]="'notification'"
   [module_name]="'menu.alert.dispatch'"
 ></app-help-massage-show>
+
 <nz-divider></nz-divider>
+
 <nz-tabset nzSize="large">
   <nz-tab [nzTitle]="'alert.notice.receiver' | i18n">
-    <div style="margin-bottom: 20px">
-      <button (click)="syncReceiver()" nz-button nzType="primary">
-        <i nz-icon nzTheme="outline" nzType="sync"></i>
-        {{ 'common.refresh' | i18n }}
-      </button>
+    <app-toolbar>
+      <ng-template #left>
+        <button (click)="syncReceiver()" nz-button nzType="primary">
+          <i nz-icon nzTheme="outline" nzType="sync"></i>
+          {{ 'common.refresh' | i18n }}
+        </button>
 
-      <button (click)="onNewNoticeReceiver()" nz-button nzType="primary">
-        <i nz-icon nzTheme="outline" nzType="appstore-add"></i>
-        {{ 'alert.notice.receiver.new' | i18n }}
-      </button>
-    </div>
+        <button (click)="onNewNoticeReceiver()" nz-button nzType="primary">
+          <i nz-icon nzTheme="outline" nzType="appstore-add"></i>
+          {{ 'alert.notice.receiver.new' | i18n }}
+        </button>
+      </ng-template>
+    </app-toolbar>
     <nz-table #fixedTable [nzData]="receivers" [nzLoading]="receiverTableLoading" [nzScroll]="{ x: '1240px' }" nzFrontPagination="false">
       <thead>
         <tr>
@@ -153,17 +157,19 @@
     </nz-table>
   </nz-tab>
   <nz-tab [nzTitle]="'alert.notice.rule' | i18n">
-    <div style="margin-bottom: 20px">
-      <button (click)="syncRule()" nz-button nzType="primary">
-        <i nz-icon nzTheme="outline" nzType="sync"></i>
-        {{ 'common.refresh' | i18n }}
-      </button>
+    <app-toolbar>
+      <ng-template #left>
+        <button (click)="syncRule()" nz-button nzType="primary">
+          <i nz-icon nzTheme="outline" nzType="sync"></i>
+          {{ 'common.refresh' | i18n }}
+        </button>
 
-      <button (click)="onNewNoticeRule()" nz-button nzType="primary">
-        <i nz-icon nzTheme="outline" nzType="appstore-add"></i>
-        {{ 'alert.notice.rule.new' | i18n }}
-      </button>
-    </div>
+        <button (click)="onNewNoticeRule()" nz-button nzType="primary">
+          <i nz-icon nzTheme="outline" nzType="appstore-add"></i>
+          {{ 'alert.notice.rule.new' | i18n }}
+        </button>
+      </ng-template>
+    </app-toolbar>
 
     <nz-table #ruleFixedTable [nzData]="rules" [nzLoading]="ruleTableLoading" [nzScroll]="{ x: '1240px' }" nzFrontPagination="false">
       <thead>
@@ -224,16 +230,18 @@
     </nz-table>
   </nz-tab>
   <nz-tab [nzTitle]="'alert.notice.template' | i18n">
-    <div style="margin-bottom: 20px">
-      <button (click)="syncTemplate()" nz-button nzType="primary">
-        <i nz-icon nzTheme="outline" nzType="sync"></i>
-        {{ 'common.refresh' | i18n }}
-      </button>
-      <button (click)="onNewNoticeTemplate()" nz-button nzType="primary">
-        <i nz-icon nzTheme="outline" nzType="appstore-add"></i>
-        {{ 'alert.notice.template.new' | i18n }}
-      </button>
-    </div>
+    <app-toolbar>
+      <ng-template #left>
+        <button (click)="syncTemplate()" nz-button nzType="primary">
+          <i nz-icon nzTheme="outline" nzType="sync"></i>
+          {{ 'common.refresh' | i18n }}
+        </button>
+        <button (click)="onNewNoticeTemplate()" nz-button nzType="primary">
+          <i nz-icon nzTheme="outline" nzType="appstore-add"></i>
+          {{ 'alert.notice.template.new' | i18n }}
+        </button>
+      </ng-template>
+    </app-toolbar>
     <nz-table
       #templateFixedTable
       [nzData]="templates"

diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -23,54 +23,60 @@
   [module_name]="'menu.alert.setting'"
   [icon_name]="'calculator'"
 ></app-help-massage-show>
+
 <nz-divider></nz-divider>
-<div style="margin-bottom: 20px">
-  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
-    <i nz-icon nzType="sync" nzTheme="outline"></i>
-  </button>
-  <button nz-button nzType="primary" (click)="onNewAlertDefine()">
-    <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
-    {{ 'alert.setting.new' | i18n }}
-  </button>
-  <button nz-button nzType="primary" nzDanger (click)="onDeleteAlertDefines()">
-    <i nz-icon nzType="delete" nzTheme="outline"></i>
-    {{ 'alert.setting.delete' | i18n }}
-  </button>
 
-  <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
-    <span nz-icon nzType="ellipsis"></span>
-  </button>
-  <nz-dropdown-menu #more_menu="nzDropdownMenu">
-    <ul nz-menu>
-      <li nz-menu-item>
-        <button nz-button nzType="primary" (click)="onExportDefines()">
-          <i nz-icon nzType="export" nzTheme="outline"></i>
-          {{ 'alert.setting.export' | i18n }}
-        </button>
-      </li>
-      <li nz-menu-item>
-        <nz-upload nzAction="/alert/defines/import" [nzLimit]="1" [nzShowUploadList]="false" (nzChange)="onImportDefines($event)">
-          <button nz-button nzType="primary">
-            <i nz-icon nzType="import" nzTheme="outline"></i>
-            {{ 'alert.setting.import' | i18n }}
+<app-toolbar>
+  <ng-template #left>
+    <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
+      <i nz-icon nzType="sync" nzTheme="outline"></i>
+    </button>
+    <button nz-button nzType="primary" (click)="onNewAlertDefine()">
+      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+      {{ 'alert.setting.new' | i18n }}
+    </button>
+    <button nz-button nzType="primary" nzDanger (click)="onDeleteAlertDefines()">
+      <i nz-icon nzType="delete" nzTheme="outline"></i>
+      {{ 'alert.setting.delete' | i18n }}
+    </button>
+
+    <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
+      <span nz-icon nzType="ellipsis"></span>
+    </button>
+    <nz-dropdown-menu #more_menu="nzDropdownMenu">
+      <ul nz-menu>
+        <li nz-menu-item>
+          <button nz-button nzType="primary" (click)="onExportDefines()">
+            <i nz-icon nzType="export" nzTheme="outline"></i>
+            {{ 'alert.setting.export' | i18n }}
           </button>
-        </nz-upload>
-      </li>
-    </ul>
-  </nz-dropdown-menu>
-  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="loadAlertDefineTable()">
-    {{ 'common.search' | i18n }}
-  </button>
-  <input
-    style="margin-right: 5px; float: right; width: 200px; text-align: center; margin-right: 0"
-    nz-input
-    type="text"
-    [placeholder]="'alert.setting.search' | i18n"
-    nzSize="default"
-    (keyup.enter)="loadAlertDefineTable()"
-    [(ngModel)]="search"
-  />
-</div>
+        </li>
+        <li nz-menu-item>
+          <nz-upload nzAction="/alert/defines/import" [nzLimit]="1" [nzShowUploadList]="false" (nzChange)="onImportDefines($event)">
+            <button nz-button nzType="primary">
+              <i nz-icon nzType="import" nzTheme="outline"></i>
+              {{ 'alert.setting.import' | i18n }}
+            </button>
+          </nz-upload>
+        </li>
+      </ul>
+    </nz-dropdown-menu>
+  </ng-template>
+  <ng-template #right>
+    <input
+      style="width: 200px; text-align: center"
+      nz-input
+      type="text"
+      [placeholder]="'alert.setting.search' | i18n"
+      nzSize="default"
+      (keyup.enter)="loadAlertDefineTable()"
+      [(ngModel)]="search"
+    />
+    <button nz-button nzType="primary" (click)="loadAlertDefineTable()">
+      {{ 'common.search' | i18n }}
+    </button>
+  </ng-template>
+</app-toolbar>
 
 <nz-table
   #fixedTable