import { Component , OnInit , ElementRef , ViewChild } from '@angular/core' ; import { FormBuilder , FormGroup , Validators , FormControl } from '@angular/forms' ; import { ProjectService } from '@app/core/project/project.service' ; import { startWith , map } from 'rxjs/operators' ; import { Router } from '@angular/router' ; import { ErrorHandlerService } from '@app/core/error-handler.service' ; import { MatChipInputEvent , MatAutocomplete , MatAutocompleteSelectedEvent } from '@angular/material' ; import { COMMA , ENTER } from '@angular/cdk/keycodes' ; import { Observable } from 'rxjs' ; import { AuthenticationService } from '@app/core' ; import { Title } from '@angular/platform-browser' ; import { ProfileService } from '@app/core/profile/profile.service' ; import { TagsService } from '@app/core/tags/tags.service' ; @ Component ( { selector : 'app-project' , templateUrl : './add-project.component.html' , styleUrls : [ './add-project.component.scss' ] } ) export class AddProjectComponent implements OnInit { isLinear = false ; project : FormGroup ; formNotfilled = false ; errorMessage = '' ; isPageLoading = false ; isFormSubmitted = false ; projectDescription = '' ; options : any = { lineWrapping : true } ; isLoading = false ; stages : String [ ] = [ 'Ideation' , 'Execution Ongoing' , 'MVP Ready' , 'Pre-production' , 'Beta Testing' , 'Production ready' , 'In Production' ] ; visible = true ; selectable = true ; removable = true ; addOnBlur = true ; separatorKeysCodes : number [ ] = [ ENTER , COMMA ] ; tagCtrl = new FormControl ( ) ; filteredTags : Observable < any [ ] > ; tags : any [ ] = [ ] ; @ ViewChild ( 'tagInput' ) tagInput : ElementRef < HTMLInputElement > ; @ ViewChild ( 'auto' ) matAutocomplete : MatAutocomplete ; allTags : Array < Object > ; constructor ( private _formBuilder , private projectService , private profileService , private tagsService , private router , private errorHandler , private title , public authenticationService ) { this . tagsService . getTagsFromDB ( ) . subscribe ( ( data ) => { this . initTags ( data ) ; } ) ; this . project = this . _formBuilder . group ( { projectName : [ '' , Validators . required ] , icon : [ '' , Validators . required ] , abstract : [ '' , [ Validators . required , Validators . maxLength ( 100 ) ] ] , website : [ '' , Validators . required ] , isPublic : false } ) ; this . title . setTitle ( 'Cynthesize | Add Project' ) ; } ngOnInit ( ) { } addProject ( ) { this . isFormSubmitted = true ; const projectDetails = { projectName : this . project . get ( 'projectName' ) . value . toLowerCase ( ) . replace ( /\s+/g , ' ' ) . trim ( ) . replace ( / /g , '-' ) , currentStage : 'ideation_stage' , abstract : this . project . get ( 'abstract' ) . value . trim ( ) , isPublic : this . project . get ( 'isPublic' ) . value , website : this . project . get ( 'website' ) . value , icon : this . project . get ( 'icon' ) . value } ; this . projectService . addProject ( projectDetails ) . subscribe ( ( data ) => { this . tagsService . addProjectTags ( this . tags , data . data . insert_projects . returning [ 0 ] . id ) . subscribe ( ( ret ) => { console . log ( 'Tags added for the project.' ) ; } ) ; this . projectService . addProjectDescription ( data . data . insert_projects . returning [ 0 ] . id ) . subscribe ( ( ret ) => { this . isFormSubmitted = true ; this . router . navigate ( [ '/view/project/' + data . data . insert_projects . returning [ 0 ] . id + '-' + data . data . insert_projects . returning [ 0 ] . project_name ] ) ; } ) ; } , ( error ) => { this . isFormSubmitted = false ; this . errorHandler . subj_notification . next ( error ) ; } ) ; } add ( event ) { if ( ! this . matAutocomplete . isOpen ) { const input = event . input ; const value = event . value ; if ( ( value || '' ) . trim ( ) ) { this . tags . push ( { tag_name : value . trim ( ) } ) ; } if ( input ) { input . value = '' ; } this . tagCtrl . setValue ( null ) ; } } remove ( tag ) { const index = this . tags . indexOf ( tag ) ; if ( index >= 0 ) { this . tags . splice ( index , 1 ) ; } } selected ( event ) { this . tags . push ( event . option . value ) ; this . tagInput . nativeElement . value = '' ; this . tagCtrl . setValue ( null ) ; } readURL ( input ) { console . log ( input ) ; if ( input . files && input . files [ 0 ] ) { const reader = new FileReader ( ) ; reader . onload = function ( e ) { console . log ( e ) ; document . getElementById ( 'imagePreview' ) . style . backgroundImage = 'url(' + e . target . result + ')' ; } ; reader . readAsDataURL ( input . files [ 0 ] ) ; this . profileService . uploadImage ( input . files [ 0 ] ) . subscribe ( ( data ) => { console . log ( data ) ; this . project . get ( 'icon' ) . setValue ( data . url ) ; } ) ; } } addNewTags ( ) { if ( ! this . project . get ( 'projectName' ) . value || ! this . project . get ( 'abstract' ) . value ) { this . errorMessage = 'Please enter the details correctly.' ; this . isFormSubmitted = false ; } else { this . errorMessage = '' ; const tagsToBeAdded = [ ] ; this . tags . forEach ( ( tags ) => { if ( ! tags [ 'tag_id' ] ) { tagsToBeAdded . push ( { tag_name : this . projectService . displayableName ( tags [ 'tag_name' ] ) } ) ; } } ) ; this . tagsService . addNewTagsToDb ( tagsToBeAdded ) . subscribe ( ( data ) => { this . tags . forEach ( ( tag ) => { if ( ! tag [ 'tag_id' ] ) { data . data . insert_tags . returning . forEach ( ( returnedTag ) => { if ( this . projectService . displayableName ( tag [ 'tag_name' ] ) === returnedTag [ 'tag_name' ] ) { tag [ 'tag_id' ] = returnedTag [ 'tag_id' ] ; } } ) ; } } ) ; this . addProject ( ) ; } ) ; } } initTags ( data ) { this . allTags = data . data . tags ; this . filteredTags = this . tagCtrl . valueChanges . pipe ( startWith ( null ) , map ( ( tag ) => ( tag ? this . _filter ( tag ) : this . allTags . slice ( ) ) ) ) ; } private _filter ( value ) { let filterValue = value . tag_name || value ; filterValue = filterValue . toLowerCase ( ) ; return this . allTags . filter ( tag => tag [ 'tag_name' ] . toLowerCase ( ) . indexOf ( filterValue ) === 0 ) ; } }