import { Component , OnInit } from '@angular/core' ; import { FormsModule } from '@angular/forms' ; import { DatabaseService } from '../services/database.service' ; import { DatabaseCategoryAliasesService } from '../services/databaseCategoryAliases.service' ; @ Component ( { selector : 'app-database' , templateUrl : './database.component.html' , styleUrls : [ './database.component.css' ] } ) export class DatabaseComponent implements OnInit { showConnectForm = true ; databaseString = 'mongodb://user:testtest1@ds119660.mlab.com:19660/snippets-sandbox' ; editSnippetObject ; editingCategory = false ; snippetEdited = false ; constructor ( public databaseService , public databaseCategoryAliasesService ) { } ngOnInit ( ) { } connectJson ( jsonString ) { this . databaseService . startConnection ( true , jsonString ) ; this . databaseCategoryAliasesService . startAliasConnection ( true , jsonString ) ; } connect ( connectString ) { this . databaseService . startConnection ( false , connectString ) ; } toggleEditSnippet ( snippet ) { if ( ! this . editSnippetObject || snippet . _id !== this . editSnippetObject . _id || this . editingCategory ) { this . editingCategory = false ; if ( this . editSnippetObject ) { this . saveEdit ( this . editSnippetObject ) ; } this . editSnippetObject = snippet ; const snippetLabel = document . querySelector ( '#snippet-' + snippet . _id + ' .snippet' ) ; const snippetEdit = document . querySelector ( '#snippet-' + snippet . _id + ' .snippet-edit' ) ; snippetLabel . style . display = 'none' ; snippetEdit . style . display = 'block' ; } } toggleEditCategories ( snippet ) { if ( ! this . editSnippetObject || snippet . _id !== this . editSnippetObject . _id || ! this . editingCategory ) { this . editingCategory = true ; if ( this . editSnippetObject ) { this . saveEdit ( this . editSnippetObject ) ; } this . editSnippetObject = snippet ; const categoriesLabel = document . querySelector ( '#snippet-' + snippet . _id + ' .categories' ) ; const categoriesEdit = document . querySelector ( '#snippet-' + snippet . _id + ' .categories-edit' ) ; categoriesLabel . style . display = 'none' ; categoriesEdit . style . display = 'block' ; } } toggleOffEditing ( ) { if ( this . editSnippetObject ) { this . editSnippetObject = 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 ( snippet ) { const newSnip = document . querySelector ( '#snippet-' + snippet . _id + ' .snippet-edit' ) ; const newCat = document . querySelector ( '#snippet-' + snippet . _id + ' .categories-edit' ) ; snippet . snippet = newSnip . value ; snippet . categories = newCat . value ; if ( this . snippetEdited ) { if ( typeof snippet . categories === 'string' ) { snippet . categories . replace ( ' ' , '' ) ; snippet . categories = snippet . categories . split ( ',' ) ; } this . databaseService . editSnippet ( snippet . _id , snippet . snippet , snippet . categories ) ; this . snippetEdited = false ; } this . toggleOffEditing ( ) ; } deleteRecord ( id ) { this . databaseService . deleteSnippet ( id ) ; } }