import { AfterViewInit , Component , Inject , NgZone } from '@angular/core' ; import { Location } from '@angular/common' ; import { Router } from '@angular/router' ; import { FormGroup , FormControl , Validators } from '@angular/forms' ; import { MatDialog } from '@angular/material/dialog' ; import { MatSnackBar } from '@angular/material/snack-bar' ; import { ErrorPopUpComponent } from 'components/error-popup/error-popup' ; import { ANALYTICS_SERVICE , IAnalyticsService } from 'services/analytics' ; import { FEEDBACK_SERVICE , IFeedbackService } from 'services/feedback' ; import { LoadingPopUpComponent } from 'components/loading-popup/loading-popup' ; import { WordTranslation } from 'services/entities/translation' ; import { environment } from 'environments/environment' ; import { DEFAULT_LOCALE } from 'util/locale' ; import { I18nService } from 'i18n/i18n.service' ; import { EndangeredLanguageService } from 'services/endangered-language' ; import { AddedWord } from 'services/entities/feedback' ; import { getLogger } from 'util/logging' ; const logger = getLogger ( 'AddWordPageComponent' ) ; @ Component ( { selector : 'app-page-add-word' , templateUrl : './add-word.html' , styleUrls : [ './add-word.scss' ] } ) export class AddWordPageComponent implements AfterViewInit { public readonly form : FormGroup ; private readonly prevPageCssClass ? : string ; public submittingForm = false ; public get endangeredLanguage ( ) : string { return this . endangeredLanguageService . currentLanguage . name ; } constructor ( private router , private location , private dialog , private snackBar , private zone , private i18n , private endangeredLanguageService , @ Inject ( FEEDBACK_SERVICE ) private feedbackService , @ Inject ( ANALYTICS_SERVICE ) private analyticsService ) { const word = history . state . word ; this . form = new FormGroup ( { word : new FormControl ( word ? word . original : '' , this . i18n . currentLanguage . code !== DEFAULT_LOCALE ? [ Validators . required ] : [ ] ) , nativeWord : new FormControl ( word ? word . translation : '' , [ Validators . required ] ) , englishWord : new FormControl ( word ? word . english : '' , [ Validators . required ] ) , transliteration : new FormControl ( word ? word . transliteration : '' , [ ] ) , recording : new FormControl ( null , [ ] ) , } ) ; this . prevPageCssClass = history . state . prevPageCssClass ; } ngAfterViewInit ( ) { this . analyticsService . logPageView ( this . router . url , 'Add word' ) ; } onFormSubmit ( ) { for ( const k of Object . keys ( this . form . controls ) ) { this . form . controls [ k ] . markAsDirty ( ) ; } if ( ! this . form . valid ) { return ; } this . submittingForm = true ; const loadingPopup = this . dialog . open ( LoadingPopUpComponent , { panelClass : 'loading-popup' } ) ; const addedWord = this . form . value ; if ( ! addedWord . word && this . i18n . currentLanguage . code == DEFAULT_LOCALE ) { addedWord . word = addedWord . englishWord ; } addedWord . language = this . i18n . currentLanguage . code ; addedWord . nativeLanguage = this . endangeredLanguageService . currentLanguage . code ; this . feedbackService . addWord ( this . form . value ) . then ( ( ) => { logger . log ( 'Added word submitted' ) ; this . location . back ( ) ; const snackbarCssClass = this . prevPageCssClass ? `${ this . prevPageCssClass }-snack-bar` : '' ; this . snackBar . open ( this . i18n . getTranslation ( 'wordSubmitted' ) || 'Submitted for review' , '' , { duration : environment . components . snackBar . duration , panelClass : snackbarCssClass } ) ; setTimeout ( ( ) => { ( document . getElementsByTagName ( 'snack-bar-container' ) [ 0 ] . parentNode as Element ) . remove ( ) ; } , environment . components . snackBar . duration + 500 ) ; } , err => { logger . warn ( 'Failed adding word' , err ) ; const errorMessage = this . i18n . getTranslation ( 'addWordError' ) || 'Unable to add word' ; this . dialog . open ( ErrorPopUpComponent , { data : { message : errorMessage } } ) ; } ) . finally ( ( ) => { this . submittingForm = false ; loadingPopup . close ( ) ; } ) ; } onCloseClick ( ev ) { ev . preventDefault ( ) ; ev . stopPropagation ( ) ; history . back ( ) ; } }