import { Component , OnInit } from '@angular/core' ; import { FormsModule } from '@angular/forms' ; import { DatabaseCategoryAliasesService } from '../services/databaseCategoryAliases.service' ; @ Component ( { selector : 'app-category-aliases-db' , templateUrl : './category-aliases-db.component.html' , styleUrls : [ './category-aliases-db.component.css' ] } ) export class CategoryAliasesDatabaseComponent implements OnInit { showConnectForm = true ; databaseString = 'mongodb://user:testtest1@ds119660.mlab.com:19660/snippets-sandbox' ; editCategoryObject ; editingAlias = false ; categoryEdited = false ; constructor ( public dbAliasService ) { } ngOnInit ( ) { } connectJson ( jsonString ) { this . dbAliasService . startAliasConnection ( true , jsonString ) ; } connect ( connectString ) { this . dbAliasService . startAliasConnection ( false , connectString ) ; } toggleEditCategory ( category ) { if ( ! this . editCategoryObject || category . _id !== this . editCategoryObject . _id || this . editingAlias ) { this . editingAlias = false ; if ( this . editCategoryObject ) { this . saveEdit ( this . editCategoryObject ) ; } this . editCategoryObject = category ; const categoryLabel = document . querySelector ( '#category-' + category . _id + ' .category' ) ; const categoryEdit = document . querySelector ( '#category-' + category . _id + ' .category-edit' ) ; categoryLabel . style . display = 'none' ; categoryEdit . style . display = 'block' ; } } toggleEditAliases ( category ) { if ( ! this . editCategoryObject || category . _id !== this . editCategoryObject . _id || ! this . editingAlias ) { this . editingAlias = true ; if ( this . editCategoryObject ) { this . saveEdit ( this . editCategoryObject ) ; } this . editCategoryObject = category ; const aliasesLabel = document . querySelector ( '#category-' + category . _id + ' .aliases' ) ; const aliasesEdit = document . querySelector ( '#category-' + category . _id + ' .aliases-edit' ) ; aliasesLabel . style . display = 'none' ; aliasesEdit . style . display = 'block' ; } } toggleOffEditing ( ) { if ( this . editCategoryObject ) { this . editCategoryObject = undefined ; const noEdits = document . getElementsByClassName ( 'no-edit' ) as HTMLCollectionOf < HTMLElement > ; const edits = document . getElementsByClassName ( 'editable' ) as HTMLCollectionOf < HTMLElement > ; for ( let i = 0 ; i < edits . length ; i ++ ) { edits [ i ] . style . display = 'none' ; } for ( let j = 0 ; j < noEdits . length ; j ++ ) { noEdits [ j ] . style . display = 'block' ; } } } saveEdit ( category ) { const newCat = document . querySelector ( '#category-' + category . _id + ' .category-edit' ) ; const newAlias = document . querySelector ( '#category-' + category . _id + ' .aliases-edit' ) ; category . category = newCat . value ; category . aliases = newAlias . value ; if ( this . categoryEdited ) { if ( typeof category . aliases === 'string' ) { category . aliases . replace ( ' ' , '' ) ; category . aliases = category . aliases . split ( ',' ) ; } this . dbAliasService . editCategoryAliases ( category . _id , category . category , category . aliases ) ; this . categoryEdited = false ; } this . toggleOffEditing ( ) ; } deleteRecord ( id ) { this . dbAliasService . deleteCategory ( id ) ; } }