Невозможно отобразить текущее вращающееся устройство в модальном диалоговом окне начальной загрузки при отправке формы. - PullRequest
Новая
       19

Невозможно отобразить текущее вращающееся устройство в модальном диалоговом окне начальной загрузки при отправке формы.

0 голосов
/ 21 апреля 2019

У меня есть угловое 2 приложения.У меня есть функционал под названием клон полета.Итак, что происходит, я создал сервис, который открывает модальное диалоговое окно начальной загрузки.пользователь может заполнить небольшую форму и затем отправить ее.Я хочу показать компонент счетчика, который будет отображать три маленьких кружка, чтобы указать, что отправка выполняется.этот компонент счетчика используется в других угловых компонентах и ​​работает нормально.как бы то ни было, когда я использую его с моим модальным диалоговым окном ... пожалуйста, найдите код ниже ..

, поэтому мой сервис, который открывает модальное диалоговое окно, выглядит следующим образом. 

import { Injectable } from '@angular/core';
import { Flight, CampaignUnpaginated, CloneFlightRequest } from '../models';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';
import { CloneFlightModalComponent } from '../components/clone-flight-modal/clone-flight-modal.component';
import { FlightsService } from './flights.service';

@Injectable()
export class CloneFlightService
 {
  bsModalRef: BsModalRef;
  constructor(private modalService: BsModalService, private flightService: FlightsService){}

   openModal(header: string, flight: Flight, campaigns: CampaignUnpaginated[]) {
    const initialState = {
      flight: flight,
      campaigns : campaigns,
      header: header
    };
    this.bsModalRef = this.modalService.show(CloneFlightModalComponent,{ initialState});
  }

  submitCloneFlightRequest(cloneFlightRequest: CloneFlightRequest) {
    return this.flightService.submitCloneFlight(cloneFlightRequest);
  }
}

CloneFlightModalComponent 

import { CommonModule } from '@angular/common';  
import { BrowserModule } from '@angular/platform-browser';

import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { Flight, CampaignUnpaginated } from '../../models';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { propComparator } from '../../../shared/utils';
import { CloneFlightRequest } from './../../../shared/models/requests/clone-flight-request.model'
import { FlightsService } from '../../services/flights.service';

export interface CloneFlightFormValue {
  flightName: string;
  campaign: CampaignUnpaginated;
}


@Component({
  selector: 'pc-clone-flight-modal',
  templateUrl: './clone-flight-modal.component.html',
  styleUrls: ['./clone-flight-modal.component.scss']
}
)
export class CloneFlightModalComponent implements OnInit {

  flight : Flight;
  campaigns: CampaignUnpaginated[];
  header: string;
  formGroup: FormGroup;
  compareResources = propComparator('id');

  showCloneForm: boolean = true;

  cloneSuccess:boolean = false;
  cloneFailure:boolean = false;

  isLoading:boolean = false;


 constructor(public modalRef: BsModalRef, private fb: FormBuilder, 
  private flightService : FlightsService){
 }
  ngOnInit() {
    this.formGroup = this.fb.group({
    flightName: [{ value: ''},[Validators.required]],
    campaign : [ '' , Validators.required]
    });
    this.showCloneForm = true;
  }

  handleSubmit(value: CloneFlightFormValue){

   const cloneFlightRequest : CloneFlightRequest  = {

    flightName : value.flightName ,
    campaignId : value.campaign.id,
    flightId: this.flight.id ,

   };

   this.isLoading = true;
   this.flightService.submitCloneFlight(cloneFlightRequest)
   .subscribe( data => { 
     this.showCloneForm = false;
     this.cloneSuccess = true;
     this.cloneFailure = false;
     this.isLoading = false;
   }, 
    err => {
      this.showCloneForm = false;
      this.cloneSuccess = false;
      this.cloneFailure = true;
      this.isLoading = false;
     },
    ()=> {
      this.showCloneForm = false;
      this.isLoading = false;
    }
    );

  }

  hideModal(){
    this.modalRef.hide();
  }

}

clone-flight-modal.component.html 

<pc-spinner [standalone]="false" *ngIf="isLoading"></pc-spinner>

<ng-container *ngIf="showCloneForm">

<form [formGroup]="formGroup" (ngSubmit)="handleSubmit(formGroup.value)">

<pc-form-layout [showRequiredFieldsMessage]="false">    
  <div class="modal-header">
  <h4 class="modal-title">
      <fa-icon icon="clone"></fa-icon>
      {{header}} 
    </h4>
</div>

<div class="modal-body-content">

    <div class="inline-inputs-container"> 
      <div class="inline-input ml-3">
        <pc-form-field label="{{ 'LABELS.CLONE_FLIGHT' | translate }}" [required]="true" [errorMessages]="['required']">
          <input type="text" formControlName="flightName" [placeholder]="'PLACEHOLDERS.CLONE_FLIGHT_NAME' | translate" ngModel>
        </pc-form-field>
      </div>

      <div class="inline-input ml-3">
          <pc-form-field label="{{ 'LABELS.CLONE_CAMPAIGN' | translate }}" [required]="true" [errorMessages]="['required']">
          <select formControlName="campaign" [compareWith]="compareResources" ngModel>
            <option value="" disabled> Please select a campaign </option>
            <option *ngFor="let campaign of campaigns" [ngValue]="campaign"> {{campaign.name}} </option>
          </select>
        </pc-form-field>
      </div>
    </div> 
</div>

<div class="modal-footer">
  <pc-button theme="default" kind="flat" (click)="hideModal()">{{ 'ACTIONS.CANCEL' | translate }}</pc-button>
  <pc-button theme="primary" type="submit" [disabled]="formGroup.invalid">{{ 'ACTIONS.CONFIRM' | translate }}</pc-button>
</div>
</pc-form-layout>
</form>
</ng-container>

clone-flight-modal.component.scss 

@import './../../../../scss/variables';
@import './../../../../scss/mixins';

.modal-header {
  border-bottom: 0px;
}

.modal-title {
  @include pc-page-title;
}

.close-btn {
  color: $gray-600;
}

.modal-footer {
  border-top: 0px;
}

:host ::ng-deep alert {
  text-align: center;
  .alert {
    margin-bottom: 0px;
  }

  fa-icon {
    margin-right: 5px;
  }
}

этомой мой компонент счетчика

spinner.component.ts 

import { Component, Input, HostBinding } from '@angular/core';

@Component({
  selector: 'pc-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss']
})
export class SpinnerComponent {
  @Input() showBackdrop = true;
  @Input()
  @HostBinding('class.standalone')
  standalone = false;
  @Input()
  @HostBinding('class.showMessage')
  showMessage = false;

  constructor() {}
}

spinner.component.html 

<div *ngIf="showBackdrop && !standalone" class="backdrop"></div>

<div *ngIf="showMessage" class="message">
  <div class="alert alert-info">
    <ng-content></ng-content>
  </div>
</div>

<div class="spinner">
  <div class="circle circle1"></div>
  <div class="circle circle2"></div>
  <div class="circle circle3"></div>
</div>

spinner.component.scss 

@import './../../../../scss/themes';
@import './../../../../scss/variables';
@import './../../../../scss/mixins';

:host {
  &.standalone {
    display: block;
    position: relative;
    width: 100%;
    height: $spinner-standalone-height;
  }
}

:host {
  &.showMessage {
    height: $spinner-show-message-height;
  }
}

.backdrop {
  z-index: $spinner-backdrop-z-index;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $spinner-backdrop-bg-color;
  border-radius: 4px;
}

.spinner {
  width: 70px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  margin: auto;
  z-index: $spinner-z-index;
}

.circle {
  width: 18px;
  height: 18px;
  @include themify() {
    background-color: themed('brand-spinner');
  }
  border-radius: 100%;
  display: inline-block;
  animation: bounce 1.4s infinite ease-in-out both;
}

.spinner .circle1 {
  animation-delay: -0.32s;
}

.spinner .circle2 {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.message {
  width: 100%;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% + (#{$spinner-message-height} / 2));
  height: $spinner-message-height;
  z-index: $spinner-z-index;
}

.alert {
  margin: 0px auto;
  @include pc-dropshadow;
  height: inherit;

  &::before,
  &::after {
    content: '';
    position: absolute;
  }

  &::before {
    @include pc-equilateral-triangle('down', 9px, #cceefe);
    bottom: -9px;
    left: calc(50% - 9px);
    z-index: $pc-info-popup-zindex-level-two;
  }

  &::after {
    @include pc-equilateral-triangle('down', 10px, #b8e8fd);
    bottom: -10px;
    left: calc(50% - 9px);
    z-index: $pc-info-popup-zindex-level-one;
  }
}

ценю любую помощь, я перепробовал все варианты и не мог понять это.я тоже могу поделиться своим кодомспасибо

...