feat(modal-form): create modal and renamend files

angular.json

@@ -22,6 +22,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
+            "showCircularDependencies": false,
             "aot": true,
             "assets": [
               "src/favicon.ico",

src/app/app.module.ts

@@ -3,6 +3,9 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+// External Libs
+import { ModalModule } from 'ngx-bootstrap/modal';
+
 // Modules Imports
 import { AppRoutingModule } from './app-routing.module';
 
@@ -14,7 +17,8 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    ModalModule.forRoot()
   ],
   bootstrap: [AppComponent]
 })

src/app/core/components/index.ts

@@ -0,0 +1 @@
+export * from './modal-form-app/modal-form-app.component';

src/app/core/components/modal-form-app/modal-form-app.component.html

@@ -0,0 +1,36 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">{{ data?.id ? 'Edit ' + data?.name : 'Create'  }}</h4>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <form [formGroup]="dataForm">
+    <div class="form-group">
+      <label for="input-name">Name</label>
+      <input
+        class="form-control"
+        type="text"
+        name="name"
+        formControlName="name"
+        id="input-name"
+        required
+      >
+    </div>
+    <div class="form-group">
+      <label for="input-url">URL</label>
+      <input
+        class="form-control"
+        type="url"
+        name="url"
+        formControlName="url"
+        id="input-url"
+        required
+      >
+    </div>
+  </form>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Cancel</button>
+  <button type="submit" class="btn btn-info" (click)="submitForm($event)">Save</button>
+</div>

src/app/core/components/modal-form-app/modal-form-app.component.scss

@@ -0,0 +1,29 @@
+.modal-dialog {
+  max-width: 400px;
+}
+.modal-header, .modal-body, .modal-footer {
+  padding: 20px 30px;
+}
+.modal-content {
+  border-radius: 3px;
+}
+.modal-footer {
+  background: #ecf0f1;
+  border-radius: 0 0 3px 3px;
+}
+.modal-title {
+  display: inline-block;
+}
+.form-control {
+  border-radius: 2px;
+  box-shadow: none;
+  border-color: #dddddd;
+}
+
+.btn {
+  border-radius: 2px;
+  min-width: 100px;
+}
+form label {
+  font-weight: normal;
+}

src/app/core/components/modal-form-app/modal-form-app.component.ts

@@ -0,0 +1,83 @@
+// Angular Imports
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+// External Libs
+import { Subject, Subscription } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+// Models Imports
+import { IManageApp } from '@app/core/models';
+
+// Services Imports
+import { ManageAppService } from '@app/core/services';
+
+@Component({
+  selector: 'webae-modal-form-app',
+  templateUrl: './modal-form-app.component.html',
+  styleUrls: ['./modal-form-app.component.scss'],
+  providers: [ManageAppService]
+})
+export class ModalFormAppComponent implements OnInit, OnDestroy {
+
+  @Input() data: IManageApp;
+
+  @Output() submitData: EventEmitter<IManageApp> = new EventEmitter<IManageApp>();
+
+  dataForm = new FormGroup({
+    name: new FormControl('', [Validators.required]),
+    url: new FormControl('', [Validators.required]),
+  });
+
+  private ngUnSubscribe: Subject<Subscription> = new Subject<Subscription>();
+
+  constructor(
+    public bsModalRef: BsModalRef,
+    public manageAppService: ManageAppService
+  ) {}
+
+  ngOnInit(): void {
+    this.dataForm.patchValue({...this.data});
+  }
+
+  ngOnDestroy() {
+    this.ngUnSubscribe.next();
+    this.ngUnSubscribe.complete();
+  }
+
+  submitForm(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!this.dataForm.valid) {
+      return;
+    }
+
+    const data: IManageApp = { ...this.data, ...this.dataForm.value };
+
+    if (this.data && this.data.id) {
+      this.updateManageApp(data);
+    } else {
+      this.createManageApp(data);
+    }
+
+  }
+
+  private createManageApp(manageApp: IManageApp): void {
+    this.manageAppService.create(manageApp)
+      .pipe(takeUntil(this.ngUnSubscribe))
+      .subscribe(res => {
+        console.log(res);
+      });
+  }
+
+  private updateManageApp(manageApp: IManageApp): void {
+    this.manageAppService.update(manageApp)
+      .pipe(takeUntil(this.ngUnSubscribe))
+      .subscribe(res => {
+        console.log(res);
+      });
+  }
+
+}

src/app/core/core-routing.module.ts

@@ -4,7 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 // Components Imports
 import { CoreComponent } from './core.component';
-import { UrlListComponent } from './pages/url-list/url-list.component';
+import { ManageAppListComponent } from '@app/core/pages';
 
 const routes: Routes = [
   {
@@ -14,7 +14,7 @@ const routes: Routes = [
       { path: '', pathMatch: 'full', redirectTo: 'list' },
       {
         path: 'list',
-        component: UrlListComponent
+        component: ManageAppListComponent
       },
       { path: '**', redirectTo: 'list' },
     ]

src/app/core/core.module.ts

@@ -1,24 +1,34 @@
 // Angular Imports
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
 
 // Modules Imports
 import { CoreRoutingModule } from './core-routing.module';
 
+// LIB Data Table Import
+import { DataTableModule } from '@projects/data-table';
+
 // Components Imports
 import { CoreComponent } from './core.component';
-import { UrlListComponent } from './pages/url-list/url-list.component';
-import { DataTableModule } from '@projects/data-table';
+import { ManageAppListComponent } from '@app/core/pages';
+import { ModalFormAppComponent } from './components';
+
+// Services Imports
+import { ManageAppService } from '@app/core/services';
 
 @NgModule({
   declarations: [
     CoreComponent,
-    UrlListComponent
+    ManageAppListComponent,
+    ModalFormAppComponent
   ],
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     CoreRoutingModule,
     DataTableModule
-  ]
+  ],
+  providers: [ManageAppService]
 })
 export class CoreModule { }

src/app/core/models/index.ts

@@ -0,0 +1,6 @@
+export interface IManageApp {
+  id?: string;
+  name: string;
+  url: string;
+  is_online?: boolean;
+}

src/app/core/pages/index.ts

@@ -0,0 +1 @@
+export * from './manage-app-list/manage-app-list.component';

src/app/core/pages/url-list/url-list.component.html → src/app/core/pages/manage-app-list/manage-app-list.component.html

@@ -2,10 +2,10 @@
   <div class="table-title">
     <div class="row">
       <div class="col-sm-6">
-        <h2>Manage <b>URL</b></h2>
+        <h2>Manage <b>APP's</b></h2>
       </div>
       <div class="col-sm-6">
-        <a class="btn btn-success"><i class="fas fa-plus-circle"></i> <span>Add New URL</span></a>
+        <button class="btn btn-success" (click)="createManageApp($event)"><i class="fas fa-plus-circle"></i> <span>Add</span></button>
         <a class="btn btn-danger"><i class="fas fa-minus-circle"></i> <span>Delete</span></a>
       </div>
     </div>

src/app/core/pages/manage-app-list/manage-app-list.component.ts

@@ -0,0 +1,124 @@
+// Angular Imports
+import { Component, OnDestroy, OnInit } from '@angular/core';
+
+// External Libs
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+
+// Lib Data Table Imports
+import { EColumnType, IColumn } from '@projects/data-table';
+
+// Services Imports
+import { ElectronService } from '@app/services';
+
+// Components Imports
+import { ModalFormAppComponent } from '@app/core/components';
+
+// Models Imports
+import { IManageApp } from '@app/core/models';
+import { Subject, Subscription } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ManageAppService } from '@app/core/services';
+
+@Component({
+  selector: 'webae-manage-app-list',
+  templateUrl: './manage-app-list.component.html',
+  styleUrls: ['./manage-app-list.component.scss']
+})
+export class ManageAppListComponent implements OnInit, OnDestroy {
+
+  // Data Models
+  data: IManageApp[] = [];
+  dataColumns: IColumn[] = [
+    { type: EColumnType.checkbox },
+    { label: 'Name', field: 'name' },
+    { label: 'URL', field: 'url' },
+    { label: 'Is Online', field: 'is_online' },
+    {
+      label: 'Actions',
+      type: EColumnType.actions,
+      actions: [
+        {
+          label: 'Edit',
+          icon: 'fas fa-pen',
+          command: (e) => {
+            e.originalEvent.preventDefault();
+            e.originalEvent.stopPropagation();
+            this.openModal(e.item);
+          }
+        },
+        {
+          label: 'Delete',
+          icon: 'fas fa-trash',
+          command: (e) => {
+            e.originalEvent.preventDefault();
+            e.originalEvent.stopPropagation();
+          }
+        },
+        {
+          label: 'Open',
+          icon: 'fas fa-globe',
+          command: (e) => {
+            e.originalEvent.preventDefault();
+            e.originalEvent.stopPropagation();
+            console.log(e);
+            this.openUrl(e.item.url);
+          }
+        },
+      ]
+    },
+  ];
+
+  // Modal Ref
+  bsModalRef: BsModalRef;
+
+  private ngUnSubscribe: Subject<Subscription> = new Subject<Subscription>();
+
+  constructor(
+    private electronService: ElectronService,
+    private modalService: BsModalService,
+    private manageAppService: ManageAppService
+  ) { }
+
+  ngOnInit(): void {
+    this.getManageAPPList();
+  }
+
+  ngOnDestroy() {
+    this.ngUnSubscribe.next();
+    this.ngUnSubscribe.complete();
+  }
+
+  createManageApp(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.openModal();
+  }
+
+  private openUrl(url: string): void {
+    this.electronService.ipcRenderer.invoke('url-channel', { url })
+      .then((result) => {
+        console.log(result);
+      });
+  }
+
+  private openModal(item?: IManageApp): void {
+    const initialState = { data: item };
+    this.bsModalRef = this.modalService.show(ModalFormAppComponent, {initialState});
+
+    (this.bsModalRef.content as ModalFormAppComponent).submitData
+      .pipe(takeUntil(this.ngUnSubscribe))
+      .subscribe((data: IManageApp) => {
+        console.log(data);
+      });
+  }
+
+  private getManageAPPList(): void {
+    this.manageAppService.list()
+      .pipe(takeUntil(this.ngUnSubscribe))
+      .subscribe(res => {
+        this.data = [...res];
+      });
+  }
+
+
+}