cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts

   1 import {Component, OnDestroy, OnInit} from '@angular/core';
   2 import {PackageCreationService} from '../package-creation.service';
   3 import {MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model';
   4 import {PackageCreationStore} from '../package-creation.store';
   5 import {ActivatedRoute} from '@angular/router';
   6 import {Subject} from 'rxjs';
   7 import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
   8
   9
  10 @Component({
  11     selector: 'app-metadata-tab',
  12     templateUrl: './metadata-tab.component.html',
  13     styleUrls: ['./metadata-tab.component.css']
  14 })
  15 export class MetadataTabComponent implements OnInit , OnDestroy {
  16
  17     counter = 0;
  18     tags = new Set<string>();
  19     customKeysMap = new Map();
  20     modes: any[] = [
  21         {name: 'Designer Mode', style: 'mode-icon icon-topologyView-active'}];
  22     /*  {name: 'Scripting Mode', style: 'mode-icon icon-topologySource'},
  23       {name: 'Generic Script Mode', style: 'mode-icon icon-topologySource'}];*/
  24     modeType = this.modes[0].name;
  25     metaDataTab: MetaDataTabModel = new MetaDataTabModel();
  26     errorMessage: string;
  27     versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
  28     isNameEditable = false;
  29     ngUnsubscribe = new Subject();
  30     constructor(
  31         private route: ActivatedRoute,
  32         private packageCreationService: PackageCreationService,
  33         private packageCreationStore: PackageCreationStore
  34     ) {
  35
  36     }
  37
  38     ngOnInit() {
  39         this.metaDataTab.templateTags = this.tags;
  40         this.metaDataTab.mapOfCustomKey = this.customKeysMap;
  41         this.metaDataTab.mode = this.modeType;
  42         this.isNameEditable = this.route.snapshot.paramMap.get('id') == null;
  43         this.packageCreationStore.state$
  44             .pipe(
  45                 distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
  46                 takeUntil(this.ngUnsubscribe))
  47             .subscribe(element => {
  48
  49             if (element && element.metaData) {
  50
  51                 this.metaDataTab.name = element.metaData.name;
  52                 this.metaDataTab.version = element.metaData.version;
  53                 this.metaDataTab.description = element.metaData.description;
  54                 this.tags = element.metaData.templateTags;
  55                 this.tags.delete('');
  56                 this.metaDataTab.templateTags = this.tags;
  57                 if (element.metaData.mode && element.metaData.mode.includes('DEFAULT')) {
  58                     this.metaDataTab.mode = 'Designer Mode';
  59                     this.modeType = this.metaDataTab.mode;
  60                 }
  61
  62                 this.customKeysMap = element.metaData.mapOfCustomKey;
  63                 this.metaDataTab.mapOfCustomKey = this.customKeysMap;
  64                 /* if (this.isNameEditable) {
  65                      this.validatePackageNameAndVersion();
  66                  }*/
  67                 // this.tags = element.metaData.templateTags;
  68
  69
  70             }
  71         });
  72     }
  73
  74     removeTag(value) {
  75         // console.log(event);
  76         this.tags.delete(value);
  77     }
  78
  79     addTag(event) {
  80         const value = event.target.value;
  81         console.log(value);
  82         if (value && value.trim().length > 0) {
  83             event.target.value = '';
  84             this.tags.add(value.trim());
  85         }
  86     }
  87
  88     removeKey(event, key) {
  89         console.log(event);
  90         this.customKeysMap.delete(key);
  91     }
  92
  93     addCustomKey() {
  94         // tslint:disable-next-line: no-string-literal
  95         const key = document.getElementsByClassName('mapKey')[0];
  96         // tslint:disable-next-line: no-string-literal
  97         const value = document.getElementsByClassName('mapValue')[0];
  98
  99         // tslint:disable-next-line: no-string-literal
 100         if (key['value'] && value['value']) {
 101             // tslint:disable-next-line: no-string-literal
 102             this.customKeysMap.set(key['value'], value['value']);
 103             // tslint:disable-next-line: no-string-literal
 104             key['value'] = '';
 105             // tslint:disable-next-line: no-string-literal
 106             value['value'] = '';
 107         }
 108     }
 109
 110     validatePackageNameAndVersion() {
 111         console.log('in validate');
 112         console.log('in this.metaDataTab.name' + this.metaDataTab.name);
 113         if (this.metaDataTab.name && this.metaDataTab.version) {
 114             this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
 115                 if (element) {
 116                     this.errorMessage = 'Package name already exists with this version. Use different name or different version number.';
 117                 } else if (!this.metaDataTab.version.match(this.versionPattern)) {
 118                     this.errorMessage = 'version should be as example 1.0.0';
 119                 } else {
 120                     this.errorMessage = '';
 121                 }
 122             });
 123         }
 124
 125     }
 126
 127     saveMetaDataToStore() {
 128         this.packageCreationStore.changeMetaData(this.metaDataTab);
 129     }
 130
 131     checkRequiredElements() {
 132         const newMetaData = new MetaDataTabModel();
 133         newMetaData.description = this.metaDataTab.description;
 134         newMetaData.name = this.metaDataTab.name;
 135         newMetaData.version = this.metaDataTab.version;
 136         newMetaData.templateTags = this.metaDataTab.templateTags;
 137         newMetaData.mapOfCustomKey = this.metaDataTab.mapOfCustomKey;
 138         newMetaData.mode = this.metaDataTab.mode;
 139         this.packageCreationStore.changeMetaData(newMetaData);
 140     }
 141
 142     ngOnDestroy() {
 143
 144         this.ngUnsubscribe.next();
 145         this.ngUnsubscribe.complete();
 146         this.ngUnsubscribe.unsubscribe();
 147     }
 148 }