institutions-without-inn-detail.component.html

<form  [formGroup]="userform"  class="pvalidate">
    <div class="p-col-4">
        <label for="active"> {{ 'Status' | translate }}*</label>
    </div>
    <div class="p-col-8">
        <div class="p-col-8">
            <p-dropdown
            [options]="(glosItemStatuses$ | async)" 
            [showClear]="true"
            [style]="{'width':'100%'}"
             formControlName="active" 
             [emptyFilterMessage]="NoEntry" 
             placeholder="{{ 'Select' | translate }}">
            </p-dropdown>
          </div>
          <p-message severity="error" text="{{ 'FieldIsRequired' | translate }}" *ngIf="isMessageAboutUnvalidVisible('active')"></p-message>  
    </div>
      <div class="p-col-4">
        <label for="">{{ 'Components.SystemParticipants.HeadInstitution' | translate }}*</label>
    </div>
    <app-institution-location
    [region]="item?.institutionRegion"
    [district]="item?.institutionDistrict"
    [institutionIdentifier]="item?.headInstitutionInn"
    (item)="setInstitutionAddress($event)">
   </app-institution-location>
    <div class="p-col-4">
        <label for="institutionType">{{ 'Components.SystemParticipants.InstitutionType' | translate }}*</label>
    </div>
    <div class="p-col-8">
      <p-dropdown
       [options]="(unitsHealthCareSystemsOfHealthCareSystem$ | async)" 
       [showClear]="true"
       [style]="{'width':'100%'}"
       formControlName="institutionType" 
       filter="true"
       [emptyFilterMessage]="NoEntry" 
       placeholder="{{ 'Select' | translate }}">
      </p-dropdown>
      <p-message severity="error" text="{{ 'FieldIsRequired' | translate }}" *ngIf="isMessageAboutUnvalidVisible('institutionType')"></p-message>  
    </div>
    <div class="p-col-4">
        <label for="typeOrLevel">{{ 'Components.SystemParticipants.TypeOrLevel' | translate }} *</label>
    </div>
    <div class="p-col-8">
      <p-dropdown
      [options]="(typesAndLevels$ | async)" 
      [showClear]="true"
      [style]="{'width':'100%'}"
      formControlName="typeOrLevel" 
       filter="true"
       [emptyFilterMessage]="NoEntry" 
       placeholder="{{ 'Select' | translate }}">
      </p-dropdown>
      <p-message severity="error" text="{{ 'FieldIsRequired' | translate }}" *ngIf="isMessageAboutUnvalidVisible('typeOrLevel')"></p-message>  
    </div>
    <div class="p-col-4">
        <label for="name0_ru">{{ 'name0_ru' | translate }}</label>
    </div>
    <div class="p-col-8">
        <input MaxValueLength [length]="150" type="text" class="form-control" formControlName="name0_ru" />
        <p-message severity="error" text="{{ 'FieldIsRequired' | translate }}" *ngIf="isMessageAboutUnvalidVisible('name0_ru')"></p-message>  
    </div>
    <div class="p-col-4">
        <label for="name0_uz">{{ 'name0_uz' | translate }}</label>
    </div>
    <div class="p-col-8">
        <input MaxValueLength [length]="150"  type="text" class="form-control" formControlName="name0_uz" />
        <p-message severity="error" text="{{ 'FieldIsRequired' | translate }}" *ngIf="isMessageAboutUnvalidVisible('name0_uz')"></p-message>  
    </div>
    <div class="p-col-4">
        <label for="name0_uzlat">{{ 'name0_uzlat' | translate }}</label>
    </div>
    <div class="p-col-8">
        <input MaxValueLength [length]="150" type="text" class="form-control" formControlName="name0_uzlat" />   
    </div>
    <div class="p-col-4">
        <label for="name0_kar">{{ 'name0_kar' | translate }}</label>
    </div>
    <div class="p-col-8">
        <input MaxValueLength [length]="150" type="text" class="form-control" formControlName="name0_kar" />
    </div>
    <div class="p-col-4">
        <label for="name0_karlat">{{ 'name0_karlat' | translate }}</label>
    </div>
    <div class="p-col-8">
        <input MaxValueLength [length]="150" type="text" class="form-control" formControlName="name0_karlat" />
    </div>
    <div class="p-col-4">
        <label for="name0_lat"> {{ 'name0_lat' | translate }}</label>
    </div>
    <div class="p-col-8">
        <input MaxValueLength [length]="150" type="text" class="form-control" formControlName="name0_lat" />
    </div>
    <div class="p-col-4">
        <label for="comment">{{ 'Comment' | translate }}</label>
    </div>
    <div class="p-col-8">
        <textarea MaxValueLength [length]="200" formControlName="comment" class="form-control" placeholder="{{ 'Comment' | translate }}"></textarea>
    </div>
    <p-footer>
        <div class="xs-mt-10 xs-mb-10" >
            <button 
            *ngIf="isSaveButtonAccessible()"
            [disabled]="!userform.valid" type="button" class="btn btn-space btn-primary" (click)="save()" >
              <i  class="fa fa-save"></i>
              {{ 'Save' | translate }}
            </button>
        </div>
    </p-footer>
</form>

<app-institution-structure-units-list
*ngIf="id"
[HeadInstitutionInn]="item.headInstitutionInn"
[InstitutionId]="id"
[InstitutionWithInn]="InstitutionWithInn">
</app-institution-structure-units-list>



<ng-container  *ngIf="id && (institutionCommonInfo$ | async) as info">
<app-facility-type-in-unit-list
[InstitutionCommonInfo]="info">
</app-facility-type-in-unit-list>
</ng-container>

institutions-without-inn-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { MessageService} from 'primeng/api';
import { ObjectOperations } from 'app/Infrastructure/object-operations';
import {  FormBuilder, Validators, FormGroup } from '@angular/forms';
import { InstitutionWithoutInnDto} from 'app/OpenMedis-api';
import { DatePipe } from '@angular/common';
import { Subscription, Subject, Observable} from 'rxjs';
import { InstitutionCommonInfo } from 'app/models/InstitutionCommonInfo';
import { TranslateService } from '@ngx-translate/core';
import { CheckPermissionService } from 'app/common/check-permission.service';
import { InstitutionsWithoutInnDetailFacade } from './institutions-without-inn-detail.facade';
import { PERMISSIONS, Permissions } from 'app/common/permissions-list';
import { takeUntil, tap, switchMap, filter, shareReplay } from 'rxjs/operators';
import { LabelAndValueItemForDropdownList } from 'app/models/LabelAndValueItemForDropdownList';

@Component({
  selector: 'app-institutions-without-inn-detail',
  templateUrl: './institutions-without-inn-detail.component.html',
  styleUrls: ['./institutions-without-inn-detail.component.css'],
  providers: [ObjectOperations]
})
export class InstitutionsWithoutInnDetailComponent  implements OnInit {
@Input() id:number;
public item: InstitutionWithoutInnDto=new InstitutionWithoutInnDto();
public InstitutionWithInn:boolean=false;
//glossaries
public glosItemStatuses$:Observable<LabelAndValueItemForDropdownList[]>=new Observable<LabelAndValueItemForDropdownList[]>(null);
public unitsHealthCareSystemsOfHealthCareSystem$:Observable<LabelAndValueItemForDropdownList[]> = new Observable<LabelAndValueItemForDropdownList[]>(null);
public typesAndLevels$:Observable<LabelAndValueItemForDropdownList[]> = new Observable<LabelAndValueItemForDropdownList[]>(null);
public institutionCommonInfo$:Observable<InstitutionCommonInfo> = new Observable<InstitutionCommonInfo>(null);

public userform: FormGroup;
public NoEntry:string;
public Success:string;
public FormSubnited:string;
public Error:string;
public ValidationFailed:string;
public permissions: Permissions = PERMISSIONS;
private saveItemSubscription: Subscription = new Subscription();

private destroy$:Subject<void> = new Subject<void>();

constructor(
    private  fb: FormBuilder,
    private  facade: InstitutionsWithoutInnDetailFacade,
    private  messageService: MessageService,
    private  translateService: TranslateService,
    public   checkPermissionService:CheckPermissionService
  ){}

  ngOnInit(): void {

    this.translateService.stream(['NoEntry','Success','FormSubnited','Error','ValidationFailed' ]).subscribe(value => 
      {
       this.NoEntry=value['NoEntry'];
       this.Success=value['Success'];
       this.FormSubnited=value['FormSubnited'];
       this.Error=value['Error'];
       this.ValidationFailed=value['ValidationFailed'];
      });  

     this.saveItemSubscription = this.facade.getSubject().subscribe(result => {

       if (Boolean(result)) {

        this.messageService.add({key: 'success', severity:'info', summary:this.Success, detail:this.FormSubnited});
        this.userform.markAsPristine();

      } else {

           this.messageService.add({key: 'error',severity:'error', summary:this.Error, detail:this.ValidationFailed});
      }
    });
 
this.facade.loadGlosItemStatuses().pipe(takeUntil(this.destroy$)).subscribe();
this.glosItemStatuses$ = this.facade.getGlosItemStatuses();

this.facade.loadUnitsHealthCareSystemsOfHealthCareSystem().pipe(takeUntil(this.destroy$)).subscribe();
this.unitsHealthCareSystemsOfHealthCareSystem$ = this.facade.getUnitsHealthCareSystemsOfHealthCareSystem();

this.facade.loadTypesAndLevels().pipe(takeUntil(this.destroy$)).subscribe();
this.typesAndLevels$ = this.facade.getTypesAndLevels();

    this.userform = this.fb.group({
      active:['', Validators.compose([Validators.required])],
      institutionType:['', Validators.compose([Validators.required])],
      typeOrLevel:['', Validators.compose([Validators.required])],
      name0_ru:['', Validators.compose([Validators.required])],
      name0_uz:['', Validators.compose([Validators.required])],
      name0_uzlat:['', Validators.compose([Validators.required])],
      name0_kar:['', Validators.compose([Validators.required])],
      name0_karlat:['', Validators.compose([Validators.required])],
      name0_lat:['', Validators.compose([Validators.required])],
      headInstitutionInn:['', Validators.compose([Validators.required])],
      comment:['']  
  });

if(this.id){
 this.facade.loadItem(this.id).pipe(takeUntil(this.destroy$)).subscribe();
}

let item$=this.facade.getItem()
.pipe(
  filter(item=>item!=null),
  shareReplay(1)
  );
item$.pipe(
   switchMap(item =>{
  this.item = item;
  this.id = item?.id;
  this.userform.patchValue(item);
  return this.facade.loadInstitution(item); 
}),
takeUntil(this.destroy$)
)
.subscribe();
  this.institutionCommonInfo$ = this.facade.getInstitution();
}
ngOnDestroy() {
  // unsubscribe to ensure no memory leaks
  this.saveItemSubscription.unsubscribe();
  this.destroy$.next();
  this.destroy$.complete();
  this.facade.clearState();
}

public save():void{
  if(this.userform.pristine)return;//if from without changes 

//map data from form controls to item entity
Object.keys(this.userform.controls).forEach(key => {  this.item[key] = this.userform.get(key).value;});

      //Update entity
      if(this.id!=undefined) {

        this.facade.Update(this.id,this.item);
      
      }
      //create entity
      else {

        this.facade.Add(this.item);
      }
}
public setInstitutionAddress(event):void{
this.item.institutionRegion=event.region;
this.item.institutionDistrict=event.district;
this.userform.controls['headInstitutionInn'].setValue(event.institutionIdentifier);
}
public isSaveButtonAccessible():boolean{
  let systemParticipantsPermissions=this.permissions.SystemParticipants;
  return this.checkPermissionService.checkPermission(systemParticipantsPermissions.accessToInstitutionWithoutInnCreateAndEdit);
}
public isMessageAboutUnvalidVisible(formControlName): boolean{ return !this.userform.controls[formControlName].valid && this.userform.controls[formControlName].dirty }

}

institutions-without-inn-detail.facade.ts

import { Injectable } from '@angular/core';
import { InstitutionsWithoutInnDetailState } from './institutions-without-inn-detail.state';
import { InstitutionsWithoutInnClient, InstitutionWithoutInnDto, CommonLocalGlossariesClient, CommonGlossariesClient, DictionaryItem, InstitutionDto } from 'app/OpenMedis-api';
import { Subject, Observable} from 'rxjs';
import { InstitutionCommonInfo } from 'app/models/InstitutionCommonInfo';
import { map } from 'rxjs/operators';
import { LabelAndValueItemForDropdownList } from 'app/models/LabelAndValueItemForDropdownList';
 
@Injectable({
    providedIn: 'root'
  })
export class InstitutionsWithoutInnDetailFacade {
    
  private subject = new Subject<boolean>();
  private subjectAdded = new Subject<boolean>();
  private subjectUpdated = new Subject<boolean>();

constructor(
          private state: InstitutionsWithoutInnDetailState,
          private commonLocalGlossariesClient: CommonLocalGlossariesClient,
          private commonGlossariesClient:  CommonGlossariesClient,
          public  currentClient:  InstitutionsWithoutInnClient)
          {}

public getSubject():Observable<boolean>{
  return this.subject.asObservable();
}
public getAddedSubject():Observable<boolean>{
  return this.subjectAdded.asObservable();
}
public getUpdatedSubject():Observable<boolean>{
  return this.subjectUpdated.asObservable();
}

public loadGlosItemStatuses():Observable<void>{

return   this.commonLocalGlossariesClient
  .getGlosItemStatuses()
  .pipe(
    map((result:DictionaryItem[])=>{
    
      this.state.setGlosItemStatuses(result.map(p => ({label: p.key, value: p.value})));

      let glosItemStatusesForTable=[];

      result.forEach(p=> {glosItemStatusesForTable[p.value]=p.key});

      this.state.setGlosItemStatusesForTable(glosItemStatusesForTable);
}));
}

public getGlosItemStatuses():Observable<LabelAndValueItemForDropdownList[]>{
            return this.state.getGlosItemStatuses();
          }
public getGlosItemStatusesForTable():Observable<string[]>{
           return this.state.getGlosItemStatusesForTable();
          }
public loadUnitsHealthCareSystemsOfHealthCareSystem():Observable<void>{
           return this.commonGlossariesClient.getUnitsHealthCareSystemsOfHealthCareSystemByLevel(3)
           .pipe(map((result:DictionaryItem[])=>{
            this.state.setUnitsHealthCareSystemsOfHealthCareSystem(result.map(p => ({label: p.key, value: p.value})));
           }));
          }
          
public loadTypesAndLevels():Observable<void>{
             return this.commonLocalGlossariesClient.getSeparationOfInstitutionsByTypeAndLevel()
            .pipe(map((result:DictionaryItem[])=>{
              this.state.setTypesAndLevels( result.map(p => ({label: p.key, value: p.value})));
             }));
    }
          
public getUnitsHealthCareSystemsOfHealthCareSystem():Observable<LabelAndValueItemForDropdownList[]>{
   return this.state.getUnitsHealthCareSystemsOfHealthCareSystem();
    }
public getTypesAndLevels():Observable<LabelAndValueItemForDropdownList[]>{
    return this.state.getTypesAndLevels(); 
    }
public loadInstitution(item):Observable<void>{
     
         return   this.commonGlossariesClient.getInstitutionById(item.headInstitutionInn)
              .pipe(map((result:InstitutionDto)=>{
                
              let institutionCommonInfo:InstitutionCommonInfo = new InstitutionCommonInfo();
              institutionCommonInfo.institutionId= item.id;
              institutionCommonInfo.institutionWithInn=false;
              institutionCommonInfo.typeOrLevel= item.typeOrLevel;
              institutionCommonInfo.institutionRegion=result.soato_region;
              institutionCommonInfo.institutionDistrict=result.soato_district;
              institutionCommonInfo.institutionOrgIdentifier= result.sp_inn;
              this.state.setInstitution(institutionCommonInfo);
             }));
   }
          
public getInstitution():Observable<InstitutionCommonInfo>{ return this.state.getInstitution();}

public getItem():Observable<InstitutionWithoutInnDto>{ return this.state.getItem();}

public loadItem(id:number):Observable<void>{
  return this.currentClient.get(id)
  .pipe(map((item:InstitutionWithoutInnDto)=>{
    this.state.setItem(item);
   }));
}

public Add(item: InstitutionWithoutInnDto):void{
  this.currentClient.create(item).subscribe(
    newItem =>{   
     this.state.setItem(newItem); 
     this.subject.next(true);      
     this.subjectAdded.next(true);
    },
  error => {
    console.error(error);
    this.subject.next(false);      
  } 
  );
}

public Update(id:number,item:InstitutionWithoutInnDto):void{
    this.currentClient.update(id,item).subscribe(    
      () =>{ this.state.setItem(item);
             this.subject.next(true);  
             this.subjectUpdated.next(true);  
        },
      error => {
        console.error(error);
        this.subject.next(false);      
      }    
       );
    }
public clearState():void{
  this.state.setItem(null);
  this.state.setInstitution(null);
}
}

institutions-without-inn-detail.state.ts

import { Injectable} from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { InstitutionCommonInfo } from 'app/models/InstitutionCommonInfo';
import { InstitutionWithoutInnDto} from 'app/OpenMedis-api';
import { LabelAndValueItemForDropdownList } from 'app/models/LabelAndValueItemForDropdownList';

 
@Injectable({
    providedIn: 'root'
  })
export class InstitutionsWithoutInnDetailState{
   

private item$:BehaviorSubject<InstitutionWithoutInnDto> = new BehaviorSubject<InstitutionWithoutInnDto>(null);
//glossaries
private glosItemStatuses$:BehaviorSubject<LabelAndValueItemForDropdownList[]>=new BehaviorSubject<LabelAndValueItemForDropdownList[]>(null);
private glosItemStatusesForTable$:BehaviorSubject<string[]>=new BehaviorSubject<string[]>(null);
private unitsHealthCareSystemsOfHealthCareSystem$:BehaviorSubject<LabelAndValueItemForDropdownList[]>=new BehaviorSubject<LabelAndValueItemForDropdownList[]>(null);
private typesAndLevels$:BehaviorSubject<LabelAndValueItemForDropdownList[]>=new BehaviorSubject<LabelAndValueItemForDropdownList[]>(null);
private institutionCommonInfo$:BehaviorSubject<InstitutionCommonInfo> = new BehaviorSubject<InstitutionCommonInfo>(null);

constructor(){}


public setGlosItemStatuses(items:LabelAndValueItemForDropdownList[]):void{
  this.glosItemStatuses$.next(items);
}

public setGlosItemStatusesForTable(items:string[]):void{
  this.glosItemStatusesForTable$.next(items);

}

public getGlosItemStatuses():Observable<LabelAndValueItemForDropdownList[]>{
  return this.glosItemStatuses$.asObservable();
}

public getGlosItemStatusesForTable():Observable<string[]>{
 return this.glosItemStatusesForTable$.asObservable();
}

public setUnitsHealthCareSystemsOfHealthCareSystem(items:LabelAndValueItemForDropdownList[]):void{
  this.unitsHealthCareSystemsOfHealthCareSystem$.next(items);
}

public setTypesAndLevels(items:LabelAndValueItemForDropdownList[]):void{
  this.typesAndLevels$.next(items);
}

public getUnitsHealthCareSystemsOfHealthCareSystem():Observable<LabelAndValueItemForDropdownList[]>{
  return this.unitsHealthCareSystemsOfHealthCareSystem$.asObservable();
 }
public getTypesAndLevels():Observable<LabelAndValueItemForDropdownList[]>{
  return this.typesAndLevels$.asObservable();
}
 
 public setInstitution(institutionCommonInfo:InstitutionCommonInfo):void{
  this.institutionCommonInfo$.next(institutionCommonInfo);
}

public getInstitution():Observable<InstitutionCommonInfo>{
 return this.institutionCommonInfo$.asObservable();
}

public setItem(item: InstitutionWithoutInnDto):void{
     this.item$.next(item); 
  }
  
public getItem():Observable<InstitutionWithoutInnDto>{
  return this.item$.asObservable();
}
 
}