Merge pull request #2 from williamwbwse/William-SettingPageDesign

William setting page design

package.json

@@ -13,7 +13,7 @@
     "ng": "ng",
     "conventional-changelog": "conventional-changelog",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --base-href \"/SEO/\"",
     "build:prod": "npm run build -- --configuration production --aot",
     "test": "ng test",
     "test:coverage": "rimraf coverage && npm run test -- --code-coverage",

src/app/pages/pages-menu.ts

@@ -37,12 +37,12 @@ export const MENU_ITEMS: NbMenuItem[] = [
   {
     title: 'Keywords Dictionary',
     icon: 'book-outline',
-    link: '',
+    link: '/pages/settings/keywordsdictionary',
   },
   {
     title: 'Image Similarity',
     icon: 'image-outline',
-    link: '/pages/ui-features/icons',
+    link: '/pages/settings/imagesimilarity',
   },
   {
     title: 'SERP',

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

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { ECommerceComponent } from './e-commerce/e-commerce.component';
+import { SettingsComponent } from './settings/settings.component';
 import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';
 
 const routes: Routes = [{
@@ -12,11 +12,12 @@ const routes: Routes = [{
   children: [
     {
       path: 'dashboard',
-      component: ECommerceComponent,
+      component: DashboardComponent,
     },
     {
-      path: 'iot-dashboard',
-      component: DashboardComponent,
+      path: 'settings',
+      loadChildren: () => import('./settings/settings.module')
+        .then(m => m.SettingsModule),
     },
     {
       path: 'layout',

src/app/pages/settings/imagesimilarity/imagesimilarity.component.html

@@ -0,0 +1,10 @@
+<nb-card>
+  <nb-card-header>
+    Image Similarity (Sentisight AI Pre-Training Dataset)
+  </nb-card-header>
+
+  <nb-card-body>
+    <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)">
+    </ng2-smart-table>
+  </nb-card-body>
+</nb-card>

src/app/pages/settings/imagesimilarity/imagesimilarity.component.scss

@@ -0,0 +1,7 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  nb-card {
+    transform: translate3d(0, 0, 0);
+  }
+}

src/app/pages/settings/keywordsdictionary/keywordsdictionary.component.html

@@ -0,0 +1,54 @@
+<nb-card>
+  <nb-card-header>
+    keyword Dictionary Library
+  </nb-card-header>
+  <nb-card-body>
+
+    <label class="search-label" for="search">Search:</label>
+    <input nbInput [nbFilterInput]="dataSource" id="search" class="search-input">
+    <nb-card>
+      <nb-card-body>
+        <nb-actions size="medium" fullWidth>
+          <nb-action>
+            <nb-icon class="action-icon" icon="plus-circle-outline" onclick="alert('123')"></nb-icon>
+            <span>Add New Keyword</span>
+          </nb-action>
+          <nb-action>
+            <nb-icon class="action-icon" icon="edit-outline"></nb-icon>
+            <span>Edit Selected Keyword</span>
+          </nb-action>
+          <nb-action>
+            <nb-icon class="action-icon" icon="close-circle-outline"></nb-icon>
+            <span>Deactivate Selected Keyword</span>
+          </nb-action>
+        </nb-actions>
+      </nb-card-body>
+    </nb-card>
+    <table [nbTreeGrid]="dataSource" [nbSort]="dataSource" (sort)="updateSort($event)">
+
+      <tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
+      <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>
+
+      <ng-container [nbTreeGridColumnDef]="customColumn">
+        <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(customColumn)" *nbTreeGridHeaderCellDef>
+          {{customColumn}}
+        </th>
+        <td nbTreeGridCell *nbTreeGridCellDef="let row">
+          <ngx-fs-icon [kind]="row.data.kind" [expanded]="row.expanded"></ngx-fs-icon>
+          {{row.data[customColumn]}}
+        </td>
+      </ng-container>
+
+      <ng-container *ngFor="let column of defaultColumns; let index = index"
+                    [nbTreeGridColumnDef]="column"
+                    [showOn]="getShowOn(index)">
+        <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(column)" *nbTreeGridHeaderCellDef>
+          {{column}}
+        </th>
+        <td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td>
+      </ng-container>
+
+    </table>
+
+  </nb-card-body>
+</nb-card>

src/app/pages/settings/keywordsdictionary/keywordsdictionary.component.scss

@@ -0,0 +1,57 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  button[nbTreeGridRowToggle] {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+
+  .search-label {
+    display: block;
+  }
+  .search-input {
+    margin-bottom: 1rem;
+  }
+
+  .nb-column-Title {
+    width: 100%;
+  }
+
+  ::ng-deep .row-toggle-button {
+    color: nb-theme(text-basic-color);
+  }
+
+  .nb-tree-grid-header-cell,
+  .nb-tree-grid-header-cell button {
+    text-transform: capitalize;
+  }
+
+  @media screen and (min-width: 400px) {
+    .nb-column-Title,
+    .nb-column-size {
+      width: 50%;
+    }
+  }
+
+  @media screen and (min-width: 500px) {
+    .nb-column-Title,
+    .nb-column-size,
+    .nb-column-kind {
+      width: 33.333%;
+    }
+  }
+
+  @media screen and (min-width: 600px) {
+    .nb-column-Title {
+      width: 31%;
+    }
+    .nb-column-size,
+    .nb-column-kind,
+    .nb-column-items {
+      width: 23%;
+    }
+  }
+
+
+}

src/app/pages/settings/keywordsdictionary/keywordsdictionary.component.ts

@@ -0,0 +1,173 @@
+import { Component, Input } from '@angular/core';
+import { NbSortDirection, NbSortRequest, NbTreeGridDataSource, NbTreeGridDataSourceBuilder } from '@nebular/theme';
+
+interface TreeNode<T> {
+  data: T;
+  children?: TreeNode<T>[];
+  expanded?: boolean;
+}
+
+interface FSEntry {
+  Title: string;
+  Level: string;
+  Parent: string;
+  Score?: number;
+}
+
+@Component({
+  selector: 'ngx-tree-grid',
+  templateUrl: './keywordsdictionary.component.html',
+  styleUrls: ['./keywordsdictionary.component.scss'],
+})
+export class KeywordsDictionaryComponent {
+  customColumn = 'Title';
+  defaultColumns = [ 'Level', 'Parent', 'Score' ];
+  allColumns = [ this.customColumn, ...this.defaultColumns ];
+
+  dataSource: NbTreeGridDataSource<FSEntry>;
+
+  sortColumn: string;
+  sortDirection: NbSortDirection = NbSortDirection.NONE;
+
+  constructor(private dataSourceBuilder: NbTreeGridDataSourceBuilder<FSEntry>) {
+    this.dataSource = this.dataSourceBuilder.create(this.data);
+  }
+
+  updateSort(sortRequest: NbSortRequest): void {
+    this.sortColumn = sortRequest.column;
+    this.sortDirection = sortRequest.direction;
+  }
+
+  getSortDirection(column: string): NbSortDirection {
+    if (this.sortColumn === column) {
+      return this.sortDirection;
+    }
+    return NbSortDirection.NONE;
+  }
+
+  private data: TreeNode<FSEntry>[] = [
+    {
+      data: { Title: 'Promotioon', Level: '0', Parent: '0', Score: 108 },
+      children: [
+        {
+          data: { Title: 'Bonus', Level: '1', Parent: '0', Score: 43 },
+          children: [
+            { data: { Title: 'Welcome Bonus', Level: '2', Parent: '1', Score: 9} },
+            { data: { Title: 'Daily Bonus', Level: '2', Parent: '1', Score: 9} },
+            { data: { Title: 'Topup Bonus', Level: '2', Parent: '1', Score: 9} },
+            { data: { Title: 'Extra Bonus', Level: '2', Parent: '1', Score: 9} },
+            { data: { Title: 'Free Angpao', Level: '2', Parent: '1', Score: 7} },
+          ]
+        },
+        {
+          data: { Title: 'Jackpot', Level: '1', Parent: '0', Score: 24 },
+          children: [
+            { data: { Title: 'Daily Jackpots', Level: '2', Parent: '1', Score: 8} },
+            { data: { Title: 'Progressive Jackpot', Level: '2', Parent: '1', Score: 8} },
+            { data: { Title: 'Pooled Jackpot', Level: '2', Parent: '1', Score: 8} },
+          ]
+        },
+        {
+          data: { Title: 'Rebate', Level: '1', Parent: '0', Score: 41 },
+          children: [
+            { data: { Title: 'Friend Refer', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Free Credit', Level: '2', Parent: '1', Score: 8} },
+            { data: { Title: 'New Member', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Deposit', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Affiliate', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Redeem Point', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Cashout', Level: '2', Parent: '1', Score: 8} },
+
+          ]
+        },
+      ],
+    },
+    {
+      data: { Title: 'Advertisement', Level: '0', Parent: '0', Score: 137 },
+      children: [
+        { data: { Title: 'Slogan', Level: '1', Parent: '0', Score: 137 },
+        children: [
+          { data: { Title: 'Most Trusted Comapany', Level: '2', Parent: '1', Score: 7} },
+          { data: { Title: 'Trusted Agent', Level: '2', Parent: '1', Score: 7} },
+          { data: { Title: 'Top Slot ', Level: '2', Parent: '1', Score: 7} },
+          { data: { Title: 'Betting & Gambling', Level: '2', Parent: '1', Score: 10} },
+          { data: { Title: 'HOT', Level: '2', Parent: '1', Score: 3} },
+          { data: { Title: 'Fast Processing', Level: '2', Parent: '1', Score: 5} },
+          { data: { Title: 'Real Money', Level: '2', Parent: '1', Score: 5} },
+          { data: { Title: 'Fast Withdrawal', Level: '2', Parent: '1', Score: 7} },
+          { data: { Title: 'Play Now', Level: '2', Parent: '1', Score: 2} },
+          { data: { Title: 'Download Now', Level: '2', Parent: '1', Score: 2} },
+          { data: { Title: 'Available Now', Level: '2', Parent: '1', Score: 2} },
+          { data: { Title: 'Rollover', Level: '2', Parent: '1', Score: 5} },
+          { data: { Title: 'Turnover', Level: '2', Parent: '1', Score: 5} },
+          { data: { Title: 'Lucky Win', Level: '2', Parent: '1', Score: 5} },
+          { data: { Title: 'Easy Win', Level: '2', Parent: '1', Score: 7} },
+          { data: { Title: 'Big Win', Level: '2', Parent: '1', Score: 7} },
+          { data: { Title: 'ID Ong', Level: '2', Parent: '1', Score: 9} },
+          { data: { Title: 'Money Fever', Level: '2', Parent: '1', Score: 8} },
+          { data: { Title: 'Safety Gaming Platform', Level: '2', Parent: '1', Score: 8} },
+          { data: { Title: 'High Payout', Level: '2', Parent: '1', Score: 8} },
+          { data: { Title: 'Games Tips', Level: '2', Parent: '1', Score: 7} },
+          { data: { Title: 'Ambassadors', Level: '2', Parent: '1', Score: 5} },
+          { data: { Title: 'Collaborate Partners', Level: '2', Parent: '1', Score: 3} },
+          { data: { Title: 'Crypto Currency', Level: '2', Parent: '1', Score: 3} },
+
+        ],},
+      ],
+    },
+    {
+      data: { Title: 'Common', Level: '0', Parent: '0', Score: 88 },
+      children: [
+        {
+          data: { Title: 'Game Related', Level: '1', Parent: '0', Score: 88 },
+          children: [
+            { data: { Title: 'Balance', Level: '2', Parent: '1', Score: 3} },
+            { data: { Title: 'Bet', Level: '2', Parent: '1', Score: 7} },
+            { data: { Title: 'Lines', Level: '2', Parent: '1', Score: 2} },
+            { data: { Title: 'Spin', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Auto Spin', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Mini', Level: '2', Parent: '1', Score: 3} },
+            { data: { Title: 'Minor', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Major', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Mega', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Random', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Ultimate', Level: '2', Parent: '1', Score: 5} },
+            { data: { Title: 'Wild', Level: '2', Parent: '1', Score: 7} },
+            { data: { Title: 'Free Spin', Level: '2', Parent: '1', Score: 7} },
+            { data: { Title: 'Scatter', Level: '2', Parent: '1', Score: 7} },
+            { data: { Title: 'Lucky Draw', Level: '2', Parent: '1', Score: 6} },
+            { data: { Title: 'Bank Account', Level: '2', Parent: '1', Score: 3} },
+            { data: { Title: 'Payment Gateway', Level: '2', Parent: '1', Score: 3} },
+            { data: { Title: '24 / 7', Level: '2', Parent: '1', Score: 5} },
+
+          ]
+        },
+      ],
+    },
+  ];
+
+  getShowOn(index: number) {
+    const minWithForMultipleColumns = 400;
+    const nextColumnStep = 100;
+    return minWithForMultipleColumns + (nextColumnStep * index);
+  }
+}
+
+@Component({
+  selector: 'ngx-fs-icon',
+  template: `
+    <nb-tree-grid-row-toggle [expanded]="expanded" *ngIf="isDir(); else fileIcon">
+    </nb-tree-grid-row-toggle>
+    <ng-template #fileIcon>
+      <nb-icon icon="file-text-outline"></nb-icon>
+    </ng-template>
+  `,
+})
+export class FsIconComponent {
+  @Input() kind: string;
+  @Input() expanded: boolean;
+
+  isDir(): boolean {
+    return this.kind === 'dir';
+  }
+}

src/app/pages/settings/settings-routing.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SettingsComponent } from './settings.component';
+import { KeywordsDictionaryComponent } from './keywordsdictionary/keywordsdictionary.component';
+import { ImageSimilarityComponent } from './imagesimilarity/imagesimilarity.component';
+
+const routes: Routes = [{
+  path: '',
+  component: SettingsComponent,
+  children: [
+    {
+      path: 'keywordsdictionary',
+      component: KeywordsDictionaryComponent,
+    },
+    {
+      path: 'imagesimilarity',
+      component: ImageSimilarityComponent,
+    },
+  ],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SettingsRoutingModule { }
+
+export const routedComponents = [
+  SettingsComponent,
+  KeywordsDictionaryComponent,
+  ImageSimilarityComponent,
+];

src/app/pages/settings/settings.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-tables',
+  template: `<router-outlet></router-outlet>`,
+})
+export class SettingsComponent {
+}

src/app/pages/settings/settings.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { NbCardModule, NbIconModule, NbInputModule, NbTreeGridModule,NbActionsModule } from '@nebular/theme';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+import { FormsModule as ngFormsModule } from '@angular/forms';
+import { ThemeModule } from '../../@theme/theme.module';
+import { SettingsRoutingModule, routedComponents } from './settings-routing.module';
+import { FsIconComponent } from './keywordsdictionary/keywordsdictionary.component';
+
+@NgModule({
+  imports: [
+    NbCardModule,
+    NbTreeGridModule,
+    NbIconModule,
+    NbInputModule,
+    ThemeModule,
+    SettingsRoutingModule,
+    Ng2SmartTableModule,
+    NbActionsModule,
+    ngFormsModule
+  ],
+  declarations: [
+    ...routedComponents,
+    FsIconComponent,
+  ],
+})
+export class SettingsModule { }

src/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Klikx SEO Admin Portal</title>
 
+  <!-- <base href="/SEO/"> -->
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">