Merge pull request #64 from qianmoQ/refactor-angular

Refactor angular

.gitignore

@@ -11,6 +11,8 @@ src/**/*.js
 !src/karma.conf.js
 *.js.map
 
+scripts/app-runner/*.js
+
 # dependencies
 node_modules
 

angular.json

@@ -34,7 +34,8 @@
               "src/renderer/assets"
             ],
             "styles": [
-              "src/renderer/styles.scss"
+              "src/renderer/styles.scss",
+              "node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css"
             ],
             "scripts": [],
             "customWebpackConfig": {

package.json

@@ -47,8 +47,10 @@
     "codemirror": "^5.64.0",
     "conventional-changelog-cli": "^2.1.1",
     "font-awesome": "^4.7.0",
+    "material-design-iconic-font": "^2.2.0",
     "moment": "^2.29.1",
     "ngx-bootstrap": "^7.1.0",
+    "ngx-select-ex": "^7.0.1",
     "ngx-toastr": "^14.2.1",
     "rxjs": "~6.6.0",
     "sass-loader": "^12.3.0",

src/renderer/app/app.module.ts

@@ -5,6 +5,7 @@ import { AppComponent } from './app.component';
 import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule, ToastrService } from 'ngx-toastr';
 
 @NgModule({
   declarations: [
@@ -15,9 +16,14 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     CommonModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ToastrModule.forRoot()
   ],
   providers: [
+    {
+      provide: ToastrService,
+      useClass: ToastrService
+    },
     {
       provide: LocationStrategy,
       useClass: HashLocationStrategy

src/renderer/app/layout/header/header.component.html

@@ -4,16 +4,21 @@ <h1>
       <a [routerLink]="['/']">DBM</a>
     </h1>
   </div>
-  <ul class="nav">
+  <ul class="nav  justify-content-end">
     <li class="nav-item">
-      <div class="btn-group" triggers="hover" dropdown #dp="bs-dropdown">
-        <a>{{ 'common.management' | translate }}</a>
+      <a class="nav-link" [routerLink]="['/query']">
+        <i class="fa fa-search"> {{ 'common.query' | translate }}</i>
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" triggers="hover" dropdown #dp="bs-dropdown">
+        <i class="fa fa-magnet"> {{ 'common.management' | translate }}</i>
         <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu" (mouseleave)="dp.hide()">
           <a [routerLink]="['/management/datasource']" class="dropdown-item">
             <i class="fa fa-dashcube"> {{ 'common.datasource' | translate }}</i>
           </a>
         </ul>
-      </div>
+      </a>
     </li>
   </ul>
 </header>

src/renderer/app/layout/layout.routing.ts

@@ -13,6 +13,10 @@ const LAYOUT_ROUTES: Routes = [
         path: 'home',
         loadChildren: () => import('../pages/home/home.module').then(m => m.HomeModule)
       },
+      {
+        path: 'query',
+        loadChildren: () => import('../pages/query/query.module').then(m => m.QueryModule)
+      },
       {
         path: 'management',
         children: [

src/renderer/app/pages/home/home.module.ts

@@ -18,6 +18,5 @@ const HOME_ROUTES: Routes = [
   ],
   providers: []
 })
-// @ts-ignore
 export class HomeModule {
 }

src/renderer/app/pages/management/datasource/datasource.component.html

@@ -5,21 +5,45 @@
         <div class="btn-margin">
           <button type="button" class="btn btn-primary btn-sm"
                   tooltip="{{ 'common.add' | translate }}"
-                  (click)="handlerOpenModal(template)">
+                  (click)="handlerOpenModal(template, 0)">
             <i class="fa fa-plus"></i>
           </button>
-          <button type="button" class="btn btn-success btn-sm" tooltip="{{ 'common.refresh' | translate }}">
+          <button type="button" class="btn btn-success btn-sm"
+                  tooltip="{{ 'common.refresh' | translate }}"
+                  (click)="handlerRefresh()">
             <i class="fa fa-refresh"></i>
           </button>
         </div>
       </div>
       <div class="">
-        <table class="table">
+        <table class="table table-hover">
           <thead>
-          <th *ngFor="let header of tableDetails.headers">{{ header.name }}</th>
+          <tr>
+            <th>{{ "common.alias" | translate }}</th>
+            <th>{{ "common.name" | translate }}</th>
+            <th>{{ "common.host" | translate }}</th>
+            <th>{{ "common.protocol" | translate }}</th>
+            <th>{{ "common.username" | translate }}</th>
+            <th class="text-center">{{ "common.action" | translate }}</th>
+          </tr>
           </thead>
-          <tbody *ngFor="let column of tableDetails.columns">
-          <th *ngFor="let key of handlerGetKeys(column)">{{column[key]}}</th>
+          <tbody>
+          <tr *ngFor="let column of tableDetails.columns" [ngClass]="!column.status ? 'table-danger' : ''">
+            <th>{{column['alias']}}</th>
+            <th>{{column['name']}}</th>
+            <th>{{column['host']}}</th>
+            <th>{{column['protocol']}}</th>
+            <th>{{column['username']}}</th>
+            <th class="text-center">
+              <button class="btn btn-link" tooltip="{{'common.delete'|translate}}"
+                      (click)="handlerDelete(column['alias'])">
+                <i class="fa fa-trash"></i>
+              </button>
+              <button class="btn btn-link" tooltip="{{'common.edit'|translate}}">
+                <i class="fa fa-edit" (click)="handlerOpenModal(template, 2, column['alias'])"></i>
+              </button>
+            </th>
+          </tr>
           </tbody>
         </table>
       </div>
@@ -75,7 +99,7 @@ <h5 class="modal-title pull-left">{{'common.datasource' | translate}}</h5>
           {{'common.close' | translate}}
         </button>
         <button [disabled]="disabled.button" type="button" class="btn btn-primary"
-                (click)="handlerSave()">
+                (click)="actionType === 0 ? handlerSave() : handlerUpdate()">
           {{'common.ok' | translate}}
         </button>
       </div>