### File

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

### Implements

`OnInit`

### Metadata

selector | `app-admin`
styleUrls | `admin.component.scss`
templateUrl | `./admin.component.html`

### Index

###### Properties
addWordMessage alertWord category categoryItems currentJustify deleteWordMessage editWordMessage error errorAdd index processing Public router sessionHistory showTable word
###### Methods
addWord deleteWord editWord ngOnInit searchWord
###### Inputs
idArea searchArea wordArea

### Constructor

`constructor(_admin: AdminService, router: Router)`
Defined in src/app/layout/admin/admin.component.ts:32
Parameters :
Name | Type | Optional | Description
_admin | `AdminService` |  |
router | `Router` |  |

### Inputs

`idArea` | Type: `number`
Defined in src/app/layout/admin/admin.component.ts:21

`searchArea` | Type: `string`
Defined in src/app/layout/admin/admin.component.ts:19

`wordArea` | Type: `string`
Defined in src/app/layout/admin/admin.component.ts:20

### Methods

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

deleteWord
`deleteWord()`
Defined in src/app/layout/admin/admin.component.ts:111
Returns : `void`

editWord
`editWord()`
Defined in src/app/layout/admin/admin.component.ts:87
Returns : `void`

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

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

### Properties

addWordMessage
`addWordMessage: `string``
Type : `string`
Defined in src/app/layout/admin/admin.component.ts:23

alertWord
`alertWord: `string``
Type : `string`
Defined in src/app/layout/admin/admin.component.ts:26

category
`category: `string``
Type : `string`
Defined in src/app/layout/admin/admin.component.ts:29

categoryItems
`categoryItems: `string[]``
Type : `string[]`
Defined in src/app/layout/admin/admin.component.ts:28

currentJustify
`currentJustify: ```
Default value : `start`
Defined in src/app/layout/admin/admin.component.ts:12

deleteWordMessage
`deleteWordMessage: `string``
Type : `string`
Defined in src/app/layout/admin/admin.component.ts:25

editWordMessage
`editWordMessage: `string``
Type : `string`
Defined in src/app/layout/admin/admin.component.ts:24

error
`error: ```
Default value : `false`
Defined in src/app/layout/admin/admin.component.ts:14

errorAdd
`errorAdd: ```
Default value : `false`
Defined in src/app/layout/admin/admin.component.ts:15

index
`index: ```
Default value : `1`
Defined in src/app/layout/admin/admin.component.ts:32

processing
`processing: ```
Default value : `false`
Defined in src/app/layout/admin/admin.component.ts:13

Public router
`router: `Router``
Type : `Router`
Defined in src/app/layout/admin/admin.component.ts:34

sessionHistory
`sessionHistory: `string[]``
Type : `string[]`
Defined in src/app/layout/admin/admin.component.ts:31

showTable
`showTable: ```
Default value : `false`
Defined in src/app/layout/admin/admin.component.ts:17

word
`word: `IWord``
Type : `IWord`
Defined in src/app/layout/admin/admin.component.ts:16

    import { Component, OnInit, Input, NgModule } from '@angular/core';
    import { IWord, AdminService } from '../../shared'
    import { Router } from '@angular/router';
    import { HttpClient, HttpErrorResponse } from '@angular/common/http';

    @Component({
      selector: 'app-admin',
      templateUrl: './admin.component.html',
      styleUrls: ['./admin.component.scss']
    })
    export class AdminComponent implements OnInit {
      currentJustify = 'start';
      processing = false;
      error = false;
      errorAdd = false;
      word: IWord;
      showTable = false;

      @Input() searchArea: string;
      @Input() wordArea: string;
      @Input() idArea: number;

      addWordMessage: string;
      editWordMessage: string;
      deleteWordMessage: string;
      alertWord: string;

      categoryItems: string[] = ['Category...', 'awl', 'hi', 'med', 'low', 'K1','K2'];
      category: string = this.categoryItems[0];

      sessionHistory: string[] = [];
      index = 1;

      constructor(private _admin: AdminService, public router: Router) { }

      // search the word in database
      searchWord(): void {
        this.processing = true;
        this.error = false;
        this.errorAdd = false;
        this.alertWord = this.searchArea;
        this._admin.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.error = true;
              this.processing = false;
              console.log('Server-side Error occured');
            }
          }
          );
      }

      // Add new word to data base
      addWord(): void {
        this.processing = true;
        this.error = false;
        this.errorAdd = false;
        this._admin.postWord(this.wordArea, this.category)
          .subscribe
          (res => {
            this.processing = false;
            this.sessionHistory[this.index] = this.wordArea + ' is added to ' + this.category + ' category.'
            this.index++;
          },
          (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log('Client-side Error occured');
            } else {
              this.errorAdd = true;
              this.processing = false;
              console.log('Server-side Error occured');
            }
          }
          );
      }

      // Add new word to data base
      editWord(): void {
        this.processing = true;
        this.error = false;
        this.errorAdd = false;
        this._admin.putWord(this.wordArea, this.category, this.idArea)
          .subscribe
          (res => {
            this.processing = false;
            this.sessionHistory[this.index] = 'Word ID: ' + this.idArea + ' was edited to ' + this.wordArea;
            this.index++;
          },
          (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');
            }
          }
          );
      }

      // Delete the word in database
      deleteWord(): void {
        this.processing = true;
        this.error = false;
        this.errorAdd = false;
        this._admin.deleteWord(this.wordArea)
          .subscribe
          (res => {
            this.processing = false;
            this.sessionHistory[this.index] = this.wordArea + ' was succesfully erased from database.'
            this.index++;
          },
          (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');
            }
          }
          );
      }

      ngOnInit() {
      }

    }

    <div>

      <!--Card Header-->
      <div class="card">
        <div class="card-header  bg-primary card-inverse">
          <i class="fa fa-user-circle-o" aria-hidden="true"></i>
          Admin Panel
          <i class="fa fa-spinner fa-spin" style="font-size:32px;color:#ff0072" *ngIf='processing'></i>
        </div>

        <!--Card contents-->
        <div class="card-block">
          <h4 class="card-title"></h4>
          <p class="card-text">

            <!--Alert-->
            <div class="alert alert-danger" role="alert" *ngIf='error'>
              <strong>{{alertWord}} </strong> doesn't exist in data base.
            </div>
            <div class="alert alert-warning" role="alert" *ngIf='errorAdd'>
              Please Choose the category!
            </div>

            <!--Search-->
            <div class="form-group row">
              <label for="example-search-input" class="col-1 col-form-label">
                <strong>Search</strong>
              </label>
              <div class="col-2">
                <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>
                    <th>Word</th>
                    <th>Categorys</th>
                    <th>ID</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngIf='showTable && !error'>
                    <td>{{word.value}}</td>
                    <td>{{word.category}}</td>
                    <td>{{word.id}}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <hr>

            <!--Add Edit Delete-->
            <div class=" row">

              <div class="col-2 form-group">
                <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Word*" name="wordArea" [(ngModel)]="wordArea">
                <div [hidden]="wordArea" class="alert alert-default" style="color: #ff0072">
                  Word is required
                </div>
              </div>

              <select class="custom-select mb-2 mr-sm-2 mb-sm-0 col-2" id="inlineFormCustomSelect" [(ngModel)]="category">
                <option *ngFor="let i of categoryItems" [value]="i">{{i}}</option>
              </select>

              <div class="col-3 form-group">
                <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="ID" value="1212" name="idArea"
                  [(ngModel)]="idArea">
                <div [hidden]="idArea" class="alert alert-default" style="color: #ff0072">
                  ID is required only to
                  <strong> EDIT</strong>
                </div>
              </div>

              <div class="col-3 float-right">
                <button class="btn btn-success" (click)="addWord()" [disabled]="!wordArea" required>
                  <i class="fa fa-plus" aria-hidden="true"></i> Add</button>
                <button class="btn btn-warning" (click)="editWord()" [disabled]="!wordArea || !idArea" required>
                  <i class="fa fa-pencil" aria-hidden="true"></i> Edit</button>
                <button class="btn btn-danger" (click)="deleteWord()" [disabled]="!wordArea" required>
                  <i class="fa fa-trash" aria-hidden="true"></i> Delete</button>
              </div>
            </div>

            <hr>
            <!--Session history-->
            <div>
              <h3>
                Session history:
              </h3>
              <ul>
                <div *ngFor="let history of sessionHistory">
                  <li>
                    <strong>{{history}}</strong>
                  </li>
                  <br>
                </div>
              </ul>

            </div>

        </div>
      </div>

      <!--Instructions Boxes-->
      <div class="row topMargin">

        <div class="col-md box1">
          <div class="col-md-12">
            <i class="fa fa-plus fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
          </div>
          <div class="col-md-12">
            <h5>Add</h5>

            <hr>

            <p>-Type the word </p>
            <p>-Select the category</p>
            <p>-Leave the ID box empty</p>
            <p>-Click on "Add" button.</p>

          </div>
        </div>
        <div class="col-md box2">
          <div class="col-md-12">
            <i class="fa fa-pencil fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
          </div>

          <div class="col-md-12">
            <h5>Edit</h5>
            <hr>
            <p>-Search the word</p>
            <p>-Type the word in "Word" field</p>
            <p>-Select the category</p>
            <p>-Type the ID in "ID" field</p>
            <p>-Click on "Edit" button.</p>
          </div>
        </div>
        <div class="col-md box3">
          <div class="col-md-12">
            <i class="fa fa-trash fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
          </div>
          <div class="col-md-12">
            <h5>Delete</h5>
            <hr>
            <p>-Type the word </p>
            <p>-Click on "Delete" button.</p>
          </div>
        </div>

      </div>

    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""