import { Observable , Subject , Subscription } from "rxjs" ; import { Store } from "@ngrx/store" ; import { map , withLatestFrom } from "rxjs/operators" ; import { AccountConfig } from "src/shared/model/account" ; import type { CdkDragDrop } from "@angular/cdk/drag-drop" ; import { Component , HostBinding } from "@angular/core" ; import { LoginFieldContainer } from "src/shared/model/container" ; import { NAVIGATION_ACTIONS , OPTIONS_ACTIONS } from "src/web/browser-window/app/store/actions" ; import type { OnDestroy } from "@angular/core" ; import { OptionsSelectors } from "src/web/browser-window/app/store/selectors" ; import { SETTINGS_OUTLET , SETTINGS_PATH } from "src/web/browser-window/app/app.constants" ; import { State } from "src/web/browser-window/app/store/reducers/options" ; @ Component ( { selector : "electron-mail-accounts-list" , templateUrl : "./accounts-list.component.html" , styleUrls : [ "./accounts-list.component.scss" ] , } ) export class AccountsListComponent implements OnDestroy { readonly accounts$ : Observable < AccountConfig [ ] > ; readonly changingAccountOrder$ : Observable < boolean > ; readonly togglingAccountDisabling$ : Observable < boolean > ; @ HostBinding ( "class.reordering-disabled" ) reorderingDisabled = true ; private cdkDrop$ : Subject < CdkDragDrop < LoginFieldContainer > > = new Subject ( ) ; private subscription = new Subscription ( ) ; constructor ( private readonly store ) { this . accounts$ = this . store . select ( OptionsSelectors . SETTINGS . accounts ) ; this . changingAccountOrder$ = this . store . select ( OptionsSelectors . FEATURED . progress ) . pipe ( map ( ( progress ) => Boolean ( progress . changingAccountOrder ) ) ) ; this . togglingAccountDisabling$ = this . store . select ( OptionsSelectors . FEATURED . progress ) . pipe ( map ( ( progress ) => Boolean ( progress . togglingAccountDisabling ) ) ) ; this . subscription . add ( this . changingAccountOrder$ . pipe ( withLatestFrom ( this . accounts$ ) ) . subscribe ( ( [ changingAccountOrder , { length } ] ) => { this . reorderingDisabled = changingAccountOrder || length < 2 ; } ) ) ; this . subscription . add ( this . cdkDrop$ . subscribe ( ( { item , container , previousIndex , currentIndex } ) => { const { nativeElement : itemEl } = item . element ; const { nativeElement : containerEl } = container . element ; const movedDown = currentIndex > previousIndex ; this . store . dispatch ( OPTIONS_ACTIONS . ChangeAccountOrderRequest ( { login : item . data . login , index : currentIndex , } ) ) ; containerEl . insertBefore ( itemEl , containerEl . querySelectorAll ( ".cdk-drag" ) . item ( currentIndex + Number ( movedDown ) ) ) ; } ) ) ; } cdkDrop ( event ) { this . cdkDrop$ . next ( event ) ; } toggleAccountDisabling ( login ) { this . store . dispatch ( OPTIONS_ACTIONS . ToggleAccountDisablingRequest ( { login } ) ) ; } navigateToAccountEdit ( login ? ) { this . store . dispatch ( NAVIGATION_ACTIONS . Go ( { path : [ { outlets : { [ SETTINGS_OUTLET ] : `${ SETTINGS_PATH }/account-edit` } } ] , ... ( login && { queryParams : { login } } ) , } ) ) ; } ngOnDestroy ( ) { this . subscription . unsubscribe ( ) ; } }