[Refactor] Add query logic

.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/query/query.component.html

@@ -0,0 +1,42 @@
+<section class="content--full">
+  <div class="card">
+    <div class="card-body">
+      <div class="card-title">
+        <div class="btn-margin">
+          <div class="btn btn-sm">
+            <select class="custom-select-sm" style="width: 150px;"
+                    [(ngModel)]="datasource"
+                    (change)="handlerCheckStatus()">
+              <option *ngFor="let detail of datasources" [disabled]="!detail.status"
+                      value="{{detail.alias}}">{{detail.alias}}  -->  {{detail.host}}</option>
+            </select>
+          </div>
+          <button type="button" class="btn btn-primary btn-sm"
+                  [disabled]="disabledButton.execute"
+                  (click)="handlerExecute()">
+            <i class="fa fa-{{loading.button ? 'spinner fa-spin' : 'flash'}}"></i> {{ 'common.execute' | translate }}
+          </button>
+        </div>
+      </div>
+      <div class="card-body">
+        <ngx-codemirror #codeEditor [options]="editorConfig"></ngx-codemirror>
+      </div>
+    </div>
+  </div>
+  <div class="card" *ngIf="responseTableData">
+    <div class="card-body">
+      <div class="card-title">
+        <button class="btn btn-link" disabled>
+          {{'common.result' | translate}}
+        </button>
+      </div>
+      <div class="card-body__title">
+      </div>
+      <app-directive-bootstrap-table
+        [headers]="responseTableData.headers"
+        [columns]="responseTableData.columns"
+        [statistics]="responseTableData.statistics">
+      </app-directive-bootstrap-table>
+    </div>
+  </div>
+</section>

src/renderer/app/pages/query/query.component.ts

@@ -0,0 +1,54 @@
+import { Component, ViewChild } from '@angular/core';
+import { BaseComponent } from '@renderer/app/base.component';
+import { EditorService } from '@renderer/services/editor/editor.service';
+import { DatasourceService } from '@renderer/services/management/datasource.service';
+import { DatasourceModel } from '@renderer/model/datasource.model';
+import { QueryService } from '@renderer/services/query/query.service';
+import { RequestModel } from '@renderer/model/request.model';
+import { StringUtils } from '@renderer/utils/string.utils';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-query',
+  templateUrl: 'query.component.html'
+})
+export class QueryComponent extends BaseComponent {
+  @ViewChild('codeEditor')
+  private codeEditor;
+  editorConfig: any;
+  datasources: DatasourceModel[];
+  datasource: string;
+  disabledButton = {
+    execute: true
+  };
+  responseTableData: any;
+
+  constructor(private editorService: EditorService,
+              private datasourceService: DatasourceService,
+              private queryService: QueryService,
+              private toastrService: ToastrService) {
+    super();
+    this.editorConfig = this.editorService.getDefault();
+    this.datasources = this.datasourceService.getAll()?.data?.columns;
+  }
+
+  handlerCheckStatus() {
+    const status = StringUtils.isEmpty(this.datasource);
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    status === true ? this.disabledButton.execute = true : this.disabledButton.execute = false;
+  }
+
+  handlerExecute(sql?: string) {
+    const request = new RequestModel();
+    this.responseTableData = null;
+    request.config = this.datasourceService.getAll(this.datasource)?.data?.columns[0];
+    sql = StringUtils.isEmpty(sql) ? this.codeEditor.codeMirror.getValue() : sql;
+    this.queryService.getResponse(request, sql).then(response => {
+      if (response.status) {
+        this.responseTableData = response.data;
+      } else {
+        this.toastrService.error(response.message);
+      }
+    });
+  }
+}