### File

`src/app/layout/dictionary/dictionary.component.ts`

### Implements

`OnInit`

### Metadata

providers | `NgbPaginationConfig`
selector | `app-dictionary`
styleUrls | `dictionary.component.scss`
templateUrl | `./dictionary.component.html`

### Index

###### Properties
Public _definitionService activeCategory advancedPagination alertWord awlpage cleanWord closeResult defaultPagination disabledPagination error errorSearch hipage isDisabled lowpage medpage page paginationSize processing showTable sort tableSize text turnOn word wordCategory wordDefinition
###### Methods
convertText getAWLWordList getDefinition Private getDismissReason getHIWordList getLowWordList getMedWordList Private getWordList ngOnInit open resetPagination searchWord updateCategory
###### Inputs
searchArea

### Constructor

`constructor(_wordsList: WordsListService, _definitionService: DefinitionService, modalService: NgbModal)`
Defined in src/app/layout/dictionary/dictionary.component.ts:49
Parameters :
Name | Type | Optional | Description
_wordsList | `WordsListService` |  |
_definitionService | `DefinitionService` |  |
modalService | `NgbModal` |  |

### Inputs

`searchArea` | Type: `string`
Defined in src/app/layout/dictionary/dictionary.component.ts:49

### Methods

convertText
`convertText(category: string)`
Defined in src/app/layout/dictionary/dictionary.component.ts:111
Parameters :
Name | Type | Optional | Description
category | `string` |  |
Returns : `"AWL" | "High Frequency" | "Medium Frequency" | "Low Frequency"`

getAWLWordList
`getAWLWordList(pageNumber: number)`
Defined in src/app/layout/dictionary/dictionary.component.ts:95
Parameters :
Name | Type | Optional | Description
pageNumber | `number` |  |
Returns : `void`

getDefinition
`getDefinition(word: string)`
Defined in src/app/layout/dictionary/dictionary.component.ts:130
Parameters :
Name | Type | Optional | Description
word | `string` |  |
Returns : `void`

Private getDismissReason
`getDismissReason(reason: any)`
Defined in src/app/layout/dictionary/dictionary.component.ts:164
Parameters :
Name | Type | Optional | Description
reason | `any` |  |
Returns : `string`

getHIWordList
`getHIWordList(pageNumber: number)`
Defined in src/app/layout/dictionary/dictionary.component.ts:99
Parameters :
Name | Type | Optional | Description
pageNumber | `number` |  |
Returns : `void`

getLowWordList
`getLowWordList(pageNumber: number)`
Defined in src/app/layout/dictionary/dictionary.component.ts:107
Parameters :
Name | Type | Optional | Description
pageNumber | `number` |  |
Returns : `void`

getMedWordList
`getMedWordList(pageNumber: number)`
Defined in src/app/layout/dictionary/dictionary.component.ts:103
Parameters :
Name | Type | Optional | Description
pageNumber | `number` |  |
Returns : `void`

Private getWordList
`getWordList(pageNumber: number, category: string, size: number, sort: string)`
Defined in src/app/layout/dictionary/dictionary.component.ts:75
Parameters :
Name | Type | Optional | Description
pageNumber | `number` |  |
category | `string` |  |
size | `number` |  |
sort | `string` |  |
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/layout/dictionary/dictionary.component.ts:123
Returns : `void`

open
`open(content: )`
Defined in src/app/layout/dictionary/dictionary.component.ts:156
Parameters :
Name | Type | Optional | Description
content |  |  |
Returns : `void`

resetPagination
`resetPagination()`
Defined in src/app/layout/dictionary/dictionary.component.ts:62
Returns : `void`

searchWord
`searchWord()`
Defined in src/app/layout/dictionary/dictionary.component.ts:175
Returns : `void`

updateCategory
`updateCategory(category: string)`
Defined in src/app/layout/dictionary/dictionary.component.ts:69
Parameters :
Name | Type | Optional | Description
category | `string` |  |
Returns : `void`

### Properties

Public _definitionService
`_definitionService: `DefinitionService``
Type : `DefinitionService`
Defined in src/app/layout/dictionary/dictionary.component.ts:51

activeCategory
`activeCategory: `string``
Type : `string`
Defined in src/app/layout/dictionary/dictionary.component.ts:35

advancedPagination
`advancedPagination: `number``
Type : `number`
Defined in src/app/layout/dictionary/dictionary.component.ts:28

alertWord
`alertWord: `string``
Type : `string`
Defined in src/app/layout/dictionary/dictionary.component.ts:48

awlpage
`awlpage: ```
Default value : `1`
Defined in src/app/layout/dictionary/dictionary.component.ts:22

cleanWord
`cleanWord: `string``
Type : `string`
Defined in src/app/layout/dictionary/dictionary.component.ts:42

closeResult
`closeResult: `string``
Type : `string`
Defined in src/app/layout/dictionary/dictionary.component.ts:43

defaultPagination
`defaultPagination: `number``
Type : `number`
Defined in src/app/layout/dictionary/dictionary.component.ts:27

disabledPagination
`disabledPagination: `number``
Type : `number`
Defined in src/app/layout/dictionary/dictionary.component.ts:30

error
`error: `boolean``
Type : `boolean`
Defined in src/app/layout/dictionary/dictionary.component.ts:41

errorSearch
`errorSearch: `boolean``
Type : `boolean`
Defined in src/app/layout/dictionary/dictionary.component.ts:45

hipage
`hipage: ```
Default value : `1`
Defined in src/app/layout/dictionary/dictionary.component.ts:23

isDisabled
`isDisabled: `boolean``
Type : `boolean`
Defined in src/app/layout/dictionary/dictionary.component.ts:31

lowpage
`lowpage: ```
Default value : `1`
Defined in src/app/layout/dictionary/dictionary.component.ts:25

medpage
`medpage: ```
Default value : `1`
Defined in src/app/layout/dictionary/dictionary.component.ts:24

page
`page: `IPage``
Type : `IPage`
Defined in src/app/layout/dictionary/dictionary.component.ts:19

paginationSize
`paginationSize: `number``
Type : `number`
Defined in src/app/layout/dictionary/dictionary.component.ts:29

processing
`processing: `boolean``
Type : `boolean`
Defined in src/app/layout/dictionary/dictionary.component.ts:38

showTable
`showTable: ```
Default value : `false`
Defined in src/app/layout/dictionary/dictionary.component.ts:47

sort
`sort: `string``
Type : `string`
Defined in src/app/layout/dictionary/dictionary.component.ts:34

tableSize
`tableSize: `number``
Type : `number`
Defined in src/app/layout/dictionary/dictionary.component.ts:32

text
`text: `IText``
Type : `IText`
Defined in src/app/layout/dictionary/dictionary.component.ts:40

turnOn
`turnOn: `boolean``
Type : `boolean`
Defined in src/app/layout/dictionary/dictionary.component.ts:20

word
`word: `IWord``
Type : `IWord`
Defined in src/app/layout/dictionary/dictionary.component.ts:46

wordCategory
`wordCategory: `string``
Type : `string`
Defined in src/app/layout/dictionary/dictionary.component.ts:36

wordDefinition
`wordDefinition: `IDefinition``
Type : `IDefinition`
Defined in src/app/layout/dictionary/dictionary.component.ts:39

    import { Observable } from 'rxjs/Observable';
    import { Component, Input, NgModule, OnInit } from '@angular/core';
    import { routerTransition } from '../../router.animations';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { HttpClient, HttpErrorResponse } from '@angular/common/http';
    import { WordsListService, IPage } from '../../shared'
    import { Router } from '@angular/router';
    import { NgbPaginationConfig } from '@ng-bootstrap/ng-bootstrap';
    import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
    import { TextService, IWord, IText, IWordMatch, IDefinition, DefinitionService } from '../../shared'

    @Component({
      selector: 'app-dictionary',
      templateUrl: './dictionary.component.html',
      styleUrls: ['./dictionary.component.scss'],
      providers: [NgbPaginationConfig]
    })
    export class DictionaryComponent implements OnInit {
      page: IPage;
      turnOn: boolean;

      awlpage = 1;
      hipage = 1;
      medpage = 1;
      lowpage = 1;

      defaultPagination: number;
      advancedPagination: number;
      paginationSize: number;
      disabledPagination: number;
      isDisabled: boolean;
      tableSize: number;

      sort: string;
      activeCategory: string;
      wordCategory: string;

      processing: boolean;
      wordDefinition: IDefinition;
      text: IText;
      error: boolean;
      cleanWord: string;
      closeResult: string;

      errorSearch: boolean;
      word: IWord;
      showTable = false;
      alertWord: string;
      @Input() searchArea: string;

      constructor(private _wordsList: WordsListService, public _definitionService: DefinitionService, private modalService: NgbModal) {
        this.defaultPagination = 1;
        this.advancedPagination = 1;
        this.paginationSize = 1;
        this.disabledPagination = 1;
        this.isDisabled = true;
        this.tableSize = 20;
        this.sort = 'ASC'
        this.activeCategory = 'awl';
      }

      resetPagination() {
        this.awlpage = 1;
        this.hipage = 1;
        this.medpage = 1;
        this.lowpage = 1;
      }

      updateCategory(category: string) {
        this.activeCategory = category;
        this.getWordList(0, this.activeCategory, this.tableSize, this.sort);
        this.convertText(this.activeCategory)
      }

      private getWordList(pageNumber: number, category: string, size: number, sort: string): void {
        this.defaultPagination = 1;
        this.sort = sort;
        this._wordsList.getData(pageNumber, category, size, sort)
          .subscribe
          (res => {
            this.page = res;
            this.turnOn = true;
          },
          (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log('Client-side Error occured');
            } else {
              console.log('Server-side Error occured');
            }
          }
          );
      }

      // Since the page Number starts from 0 in the backend we decrement the PageNumber by 1
      getAWLWordList(pageNumber: number): void {
        this.getWordList(pageNumber - 1, 'awl', this.tableSize, this.sort)
      }

      getHIWordList(pageNumber: number): void {
        this.getWordList(pageNumber - 1, 'hi', this.tableSize, this.sort)
      }

      getMedWordList(pageNumber: number): void {
        this.getWordList(pageNumber - 1, 'med', this.tableSize, this.sort)
      }

      getLowWordList(pageNumber: number): void {
        this.getWordList(pageNumber - 1, 'low', this.tableSize, this.sort)
      }

      convertText(category: string) {
        if (category === 'awl') {
          return this.wordCategory = 'AWL'
        } else if (category === 'hi') {
          return this.wordCategory = 'High Frequency'
        } else if (category === 'med') {
          return this.wordCategory = 'Medium Frequency'
        } else if (category === 'low') {
          return this.wordCategory = 'Low Frequency'
        }
      }

      ngOnInit() {
        this.getWordList(0, this.activeCategory, this.tableSize, this.sort);
        this.convertText(this.activeCategory)
      }

      // it gets the definition of  the word using DefinitionService
      getDefinition(word: string) {
        this.processing = true;
        this.error = false;
        this.cleanWord = word.replace(/[^a-zA-Z ]/g, '');
        this._definitionService.getDefinitionService(this.cleanWord)
          .subscribe
          (res => {
            this.wordDefinition = res;
            this.turnOn = true;
            this.processing = false;
          },
          (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log('Client-side Error occured');
            } else {
              this.error = true;
              this.processing = false;
              console.log('Server-side Error occured');
            }
          }
          );

      }

      // definiton Model open
      open(content) {
        this.modalService.open(content).result.then((result) => {
          this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
      }

      private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
          return 'by pressing ESC';
        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
          return 'by clicking on a backdrop';
        } else {
          return `with: ${reason}`;
        }
      }

      searchWord(): void {
        this.errorSearch = false;
        this.alertWord = this.searchArea;
        this._wordsList.getWord(this.searchArea)
          .subscribe
          (res => {
            this.word = res;
            this.processing = false;
            this.showTable = true;
          },
          (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log('Client-side Error occured');
            } else {
              this.errorSearch = true;
              console.log('Server-side Error occured');
            }
          }
          );
      }

    }

    <!-- Buttons - Visible only on desktops-->
    <div class="container bottomMarging">
      <div class="btn-group hidden-sm-down">
        <button type="button" class="btn btn-primary" (click)="updateCategory('awl')">AWL</button>
        <button type="button" class="btn btn-danger" (click)="updateCategory('hi')">High Frequency</button>
        <button type="button" class="btn btn-success" (click)="updateCategory('med')">Medium Frequency</button>
        <button type="button" class="btn btn-warning" (click)="updateCategory('low')">Low Frequency</button>
      </div>
    </div>

    <!-- Buttons - Visible only on cellphones-->
    <div class="container bottomMarging">
      <div class="btn-group hidden-md-up" style="width: 200%;">
        <button type="button" class="btn btn-primary" (click)="updateCategory('awl')">AWL</button>
        <button type="button" class="btn btn-danger" (click)="updateCategory('hi')">High Frequency</button>
      </div>
    </div>

    <div class="container bottomMarging">
      <div class="btn-group hidden-md-up" style="width: 200%;">
        <button type="button" class="btn btn-success" (click)="updateCategory('med')">Medium Frequency</button>
        <button type="button" class="btn btn-warning" (click)="updateCategory('low')">Low Frequency</button>
      </div>
    </div>

    <!--Top page note-->
    <div style="background-color: #e6e6e6; border-radius: 15px; min-height: 25px;">
      <p style="text-align: center;font-size: 0.9rem; ">
        <strong>Words are given alongside their inflectional & derivational forms</strong>
      </p>
    </div>

    <!--Alert-->
    <div class="alert alert-danger" role="alert" *ngIf='errorSearch'>
      <strong>{{alertWord}} </strong> doesn't exist in data base.
    </div>

    <!--Search-->
    <div class="form-group row">
      <div class="col col-md-8 col-xl-4">
        <input class="form-control" type="search" name="searchArea" [(ngModel)]="searchArea" id="example-search-input" placeholder="Word..">
      </div>
      <button class="btn btn-primary" (click)="searchWord();" [disabled]="!searchArea" required>Search</button>
    </div>

    <!--Table - shows the search result-->
    <div class='table-responsive table-hover table-striped'>
      <table class='table table-hover'>
        <thead>
          <tr class="table-active">
            <th>Word</th>
            <th>Category</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngIf='showTable && !error' class="table-success">
            <td (click)="getDefinition(word.value); open(content);">
              <a href="javascript:void(0)">{{ word.value}}</a>
            </td>
            <td>{{word.category}}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!--Definition model (Popup)-->
    <ng-template #content let-c="close" let-d="dismiss">
      <div class="modal-header">
        <h4 class="modal-title">
          <img src="assets/images/Wikipedia-logo.png" title="Wikipedia Dictionary" style="width:50px;height:50px;"> Definition &nbsp;&nbsp;
          <i class="fa fa-spinner fa-spin" style="font-size:32px;color:black" *ngIf='processing'></i>
        </h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!--Alert-->
        <div class="alert alert-warning" role="alert" *ngIf='error'>
          <strong>Oh snap!</strong> We couldn't find the definition, please try another word.
        </div>
        <!--Definition-->
        <p *ngIf='!error && !processing' class="card-text" [innerHTML]="wordDefinition.wiki.html"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
      </div>
    </ng-template>

    <!--Table-->
    <div class='table-responsive table-hover table-striped' *ngIf='turnOn'>
      <table class='table table-hover'>
        <thead>
          <tr>
            <th>Word</th>
            <th>Category</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor='let word of page.content'>
            <td (click)="getDefinition(word.value); open(content);">
              <a href="javascript:void(0)">{{ word.value}}</a>
            </td>
            <td>{{wordCategory}}</td>
          </tr>
        </tbody>
      </table>

      <!--Pagination-->
      <div [ngSwitch]="activeCategory">
        <div *ngSwitchCase="'awl'">
          <ngb-pagination [collectionSize]="page.totalElements" [pageSize]="tableSize" [(page)]="awlpage" [maxSize]="4" [rotate]="true"
            [ellipses]="false" (pageChange)="getAWLWordList(awlpage)" [boundaryLinks]="true"></ngb-pagination>
        </div>
        <div *ngSwitchCase="'hi'">
          <ngb-pagination [collectionSize]="page.totalElements" [pageSize]="tableSize" [(page)]="hipage" [maxSize]="4" [rotate]="true"
            [ellipses]="false" (pageChange)="getHIWordList(hipage)" [boundaryLinks]="true"></ngb-pagination>
        </div>
        <div *ngSwitchCase="'med'">
          <ngb-pagination [collectionSize]="page.totalElements" [pageSize]="tableSize" [(page)]="medpage" [maxSize]="4" [rotate]="true"
            [ellipses]="false" (pageChange)="getMedWordList(medpage)" [boundaryLinks]="true"></ngb-pagination>
        </div>
        <div *ngSwitchCase="'low'">
          <ngb-pagination [collectionSize]="page.totalElements" [pageSize]="tableSize" [(page)]="lowpage" [maxSize]="4" [rotate]="true"
            [ellipses]="false" (pageChange)="getLowWordList(lowpage)" [boundaryLinks]="true"></ngb-pagination>
        </div>
        <hr class="bottomMarging">

        <!--Page Size-->
        <div class="btn-group col-md-4 float-right" ngbRadioGroup name="radioBasic" [(ngModel)]="tableSize">
          <label ngbButtonLabel class="btn-secondary">
            <input ngbButton type="radio" [value]="20" (click)="getWordList(0, activeCategory, 20, sort);resetPagination()"> 20
          </label>
          <label ngbButtonLabel class="btn-secondary">
            <input ngbButton type="radio" value="60" (click)="getWordList(0, activeCategory, 60, sort);resetPagination()"> 60
          </label>
          <label ngbButtonLabel class="btn-secondary">
            <input ngbButton type="radio" [value]="100" (click)="getWordList(0, activeCategory, 100, sort);resetPagination()"> 100
          </label>
        </div>

        <!--Sorting-->
        <div class="btn-group col-md-4" ngbRadioGroup name="radioBasic" [(ngModel)]="sorting">
          <label ngbButtonLabel class="btn-secondary">
            <input ngbButton type="radio" [value]="ASC" (click)="getWordList(0, activeCategory, tableSize, 'ASC' );resetPagination()"> ASC
          </label>
          <label ngbButtonLabel class="btn-secondary">
            <input ngbButton type="radio" value="DESC" (click)="getWordList(0, activeCategory, tableSize, 'DESC');resetPagination()"> DESC
          </label>
        </div>

        <div class="col-md-4" style="margin:0 auto;">
          <p>
            <strong>page: {{page.number + 1}} / {{page.totalPages}}</strong>
          </p>
        </div>
        <hr class="topMarging">
      </div>
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""