Блог

 export class UploadEquipmentComponent implements OnInit, OnDestroy {

  girdData: GridDataResu<
  equipmentList: Equipment[] = [];
  pager: GridPager = new GridPager();
  skip: number = 0;
  inventoryLocationData: Array<InventoryLocation>;
  selectableSettings: GridSelectionSettings = new GridSelectionSettings(
    'cylinderId'
  );
  selectedFile: any;
  inventoryId: { name: string, id: number };
  paginationData: BaseSearchData = new BaseSearchData();
  isDisableUpdateBtn: boolean;

  public defaultItemInventoryLocation: { name: string, id: number };
  public hiddenColumns: Array<string> = new Array<string>();
  destroySubject$: Subject<void> = new Subject();

  constructor(private orderCommonService: OrderCommonService,
    private messagesService: MessagesService, private translate: TranslateItemService,
    private assetManagementService: AssetManagementService,
    private localStorageService: LocalStorageService,private metaDataService: MetaDataService,
    private warehouseService: WarehouseService) { }

  ngOnInit() {
    this.loadDropDownData();
    this.hideColumns();
    this.isDisableUpdateBtn = true;
    this.skip=0;
    this.paginationData.pageNo=1;
  }

  private async loadDropDownData() {
    try {
      this.inventoryLocationData = await this.warehouseService.getInventoryLocations();
      const selectedLanguage = await this.localStorageService.getLocalStorage(CommonConstant.localStorageKey.language);

      if (selectedLanguage amp;amp; selectedLanguage === CommonConstant.language.japanese) {
        this.defaultItemInventoryLocation = { name: '保管場所を選択してください', id: 0 };
      } else {
        this.defaultItemInventoryLocation = { name: 'Select Inventory Location', id: 0 };
      }
    } catch (error) {
      this.messagesService.showErrorMessage(error.error.message);
    }
  }

  public async inventoryLocationChanged(e: any) {
    if ((this.inventoryId amp;amp; this.inventoryId.id > 0) amp;amp; (this.onSelectFile amp;amp; this.onSelectFile.length > 1)) {
      this.validateEquipment();
    }
  }

  public async onSelectFile(event: any) {

    if (event.files amp;amp; event.files[0]) {
      if (event.files[0].extension === '.xls' || event.files[0].extension === '.xlsx') {
        this.selectedFile = event.files[0].rawFile;
        const reader = new FileReader();

        reader.onload = (e: any) => {
         
          this.validateEquipment();
        };
        reader.readAsDataURL(this.selectedFile);
      } else {
        const mes = this.translate.getTranslateMessageValue('commonMessages.errors.fileTypeInvalid');
        event.files[0] = null;
        this.messagesService.showInfoMessage(mes);
      }
    }
  }

  public onClickFileUpload(e) {
    if (this.inventoryId === undefined || (this.inventoryId amp;amp; this.inventoryId.id === 0)) {
      const mes = this.translate.getTranslateMessageValue('commonMessages.errors.inventoryRequired');
      this.messagesService.showInfoMessage(mes);
      return false;
    }
  }

  public async removeSelected(event: any) {
    if (event.files amp;amp; event.files[0]) {
      this.selectedFile = null;
      this.isDisableUpdateBtn = true;
    }
  }

  public async pageChanged(pageChangeArg: PageChangeEvent) {
    this.skip = pageChangeArg.skip;
    this.paginationData.pageNo = pageChangeArg.skip / this.paginationData.pageSize   1;
    this.girdData = {
      data: this.equipmentList.slice(this.skip, this.skip   this.paginationData.pageSize),
      total: this.equipmentList.length
    };
  }

  private makeUploadModel(): any {
    if (this.inventoryId amp;amp; this.inventoryId.id > 0) {
      if (this.selectedFile amp;amp; this.selectedFile.name.length > 0) {
        const formData = new FormData();
        formData.append('file', this.selectedFile, this.selectedFile.name);
        return formData;
      } else {
        const mes = this.translate.getTranslateMessageValue('commonMessages.errors.fileRequired');
        this.messagesService.showInfoMessage(mes);
        return false;
      }
    } else {
      const mes = this.translate.getTranslateMessageValue('commonMessages.errors.inventoryRequired');
      this.messagesService.showInfoMessage(mes);
      return false;
    }
  }

  public async uploadEquipment() {
    const uploadingModel = this.makeUploadModel();
    if (uploadingModel) {
      await this.assetManagementService.uploadEquipments(uploadingModel, this.inventoryId.id).then((result) => {
        if (result) {
          if (!result.hasError) {
            this.girdData = {
              data: result.data,
              total: result.recordCount
            };
            const mes = this.translate.getTranslateMessageValue('commonMessages.success.uploadSuccess');
            this.messagesService.showSaveSuccessMessage(mes);
          } else {
            if (result.errorMessage === CommonConstant.apiResultMessageCode.uploadFailed) {
              const mes = this.translate.getTranslateMessageValue('commonMessages.errors.uploadFailed');
              this.messagesService.showErrorMessage(mes);
            }
          }
        }
      }).catch(err => this.messagesService.showErrorMessage(err.error.message));
    }
  }

  private async validateEquipment() {
    const uploadingModel = this.makeUploadModel();
    if (uploadingModel) {
      await this.assetManagementService.validateEquipments(uploadingModel, this.inventoryId.id).then((result) => {
        if (result) {
          if (!result.hasError) {
            this.girdData = {
              data: result.data,
              total: result.recordCount
            };
            this.isDisableUpdateBtn = false;
          } else {
            if (result.errorMessage === CommonConstant.apiResultMessageCode.invalidData) {
              const mes = this.translate.getTranslateMessageValue('commonMessages.errors.validateError');
              this.messagesService.showErrorMessage(mes);
            }
            this.isDisableUpdateBtn = true;
          }
        }
      }).catch(err => this.messagesService.showErrorMessage(err.error.message));
    }
  }  

 <kendo-grid class="asset-history-grid mx-2" [data]="girdData" [pageSize]="paginationData.pageSize"
      [pageable]="pager"  (pageChange)="pageChanged($event)" [skip]="skip"  [resizable]="true"
      [pageSize]="paginationData.pageSize" [selectable]="selectableSettings"
      [kendoGridSelectBy]="selectableSettings.rowSelectBy" [selectedKeys]="selectableSettings.keys" >
      <kendo-grid-column field="productNo" width="110" *ngIf="!isHidden('productNo')">
        <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
          <span>{{ 'asset.uploadEquipment.grid.productNo' | translate }}</span>
        </ng-template>
      </kendo-grid-column>
      .....and so on