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

   1 <div class="import-container-all">
   2     <div class="import-container">
   3         <div class="import-container-input">
   4             <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL then ENTER" type="input">
   5             <a class="enter-link" href="#"><i class="icon-enter-link"></i></a>
   6         </div>
   7         <span tourAnchor="st-scriptsImport" class="import-container-span">Or you can also <a data-target="#scriptsModal"
   8                 data-toggle="modal" (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span>
   9
  10     </div>
  11     <!--Create Script File-->
  12     <div class="card">
  13         <div class="card-body">
  14             <div class="row">
  15                 <div class="col">
  16                     <h6 class="create-title mb-3">Create Script File</h6>
  17                 </div>
  18             </div>
  19             <div class="single-line-model">
  20                 <label class="label-name">File Name
  21                     <span _ngcontent-uew-c3="">*</span>
  22                 </label>
  23                 <div class="label-input">
  24                     <input type="input" [(ngModel)]="currentFileName" placeholder="script name" name="scriptName"
  25                         autofocus [autofocus]="true">
  26                 </div>
  27                 <div class="single-line-model">
  28                     <label class="label-name">Script Type</label>
  29                     <div class="label-input" (change)="changeExtension()">
  30                         <label name="trst" id="kt" class="pl-0">
  31                             <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
  32                                 name="exampleRadios1" id="kt" value=kotlin>
  33                             <span>
  34                                 Kotlin
  35                             </span>
  36                         </label>
  37                         <label name="trst" id="py">
  38                             <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
  39                                 name="exampleRadios2" id="py" value=python>
  40                             <span>
  41                                 Jython
  42                             </span>
  43                         </label>
  44                         <label id="ansible">
  45                             <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
  46                                 name="exampleRadios3" id="ansible" value=ansible>
  47                             <span>
  48                                 Ansible
  49                             </span>
  50                         </label>
  51                     </div>
  52                 </div>
  53             </div>
  54             <div id="id-script">
  55                 <ace-editor [(text)]="currentFileContent" [mode]="currentExtension" [autoUpdateContent]="true"
  56                     [durationBeforeCallback]="3000" [theme]="'eclipse'" #editor style="height:300px;">
  57                 </ace-editor>
  58             </div>
  59             <div class="row template-mapping-action mb-0">
  60                 <div class="col text-right">
  61                     <button tourAnchor="tm-templateFinish" (click)="textCurrentChanges()" [disabled]="currentFileName?.length == 0 ||
  62                     this.currentFileContent?.length == 0" title="Save script file" class="btn btn-primary mt-4">Save
  63                     </button>
  64                 </div>
  65             </div>
  66         </div>
  67     </div>
  68     <!---->
  69     <div class="accordion">
  70         <!-- <div class="card creat-card">
  71             <div class="single-line">
  72                 <label class="label-name">File</label>
  73             </div>
  74         </div> -->
  75         <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion-script">
  76
  77             <div class="card">
  78                 <div [id]="'head-script-'+mapIndex" class="card-header">
  79                     <h5 class="mb-0 d-flex justify-content-between">
  80                         <button (click)="changeDivShow(mapIndex)" aria-expanded="false" class="btn btn-link collapsed"
  81                             data-toggle="collapse">
  82                             <i class="icon-file-code"></i> {{file.key}}
  83                         </button>
  84                         <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal"
  85                             class="accordion-delete"><i class="icon-delete-sm"></i></a>
  86                         <!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
  87                                     class="icon-delete-sm"></i></a> -->
  88                         <!-- Delete Modal -->
  89                         <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
  90                             aria-labelledby="exampleModalLabel" aria-hidden="true">
  91                             <div class="modal-dialog" role="document">
  92                                 <div class="modal-content">
  93                                     <div class="modal-header">
  94                                         <h5 class="modal-title" id="exampleModalLabel">Delete Script</h5>
  95                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  96                                             <img src="assets/img/icon-close.svg" />
  97                                         </button>
  98                                     </div>
  99                                     <div class="modal-body">
 100                                         <p>Are you sure you want to delete script file
 101                                             <span>{{fileToDelete?.key?.split('/')[2]}}</span>?</p>
 102                                     </div>
 103                                     <div class="modal-footer">
 104                                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel
 105                                         </button>
 106                                         <button type="button" (click)="removeFile(fileToDelete?.key,0)"
 107                                             data-dismiss="modal" class="btn btn-danger">Delete
 108                                         </button>
 109                                     </div>
 110                                 </div>
 111                             </div>
 112                         </div>
 113
 114
 115                     </h5>
 116                 </div>
 117                 <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
 118                     data-parent="#accordion-script">
 119                     <div class="card-body">
 120                         <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'"
 121                             [autoUpdateContent]="true" [durationBeforeCallback]="5000" [theme]="'eclipse'" #editor
 122                             style="height:300px;">
 123                         </ace-editor>
 124                     </div>
 125                 </div>
 126             </div>
 127
 128         </div>
 129     </div>
 130
 131 </div>
 132
 133 <div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog"
 134     tabindex="-1">
 135     <div class="modal-dialog" role="document">
 136         <div class="modal-content">
 137             <div class="modal-header">
 138                 <h5 class="modal-title" id="scriptsModalLabel">Import File</h5>
 139                 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
 140                     <img src="assets/img/icon-close.svg" />
 141                 </button>
 142             </div>
 143             <div class="modal-body">
 144                 <ngx-file-drop accept=".kt,.py" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
 145                     (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
 146                     <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
 147                         <div class="folder-upload">
 148                             <img src="assets/img/folder-upload.svg" />
 149                         </div>
 150                         <div class="folder-upload-text">
 151                             Drag & Drop file
 152                         </div>
 153                         <div class="folder-upload-text">or
 154                             <button (click)="openFileSelector()" class="btn btn-sm btn-primary" type="button">Browse
 155                                 Files
 156                             </button>
 157                         </div>
 158                         <div class="folder-upload-type">Allowed file type: Kotlin(kt), Python(py)</div>
 159                     </ng-template>
 160                 </ngx-file-drop>
 161                 <div class="upload-table">
 162                     <table class="table">
 163                         <thead>
 164                             <tr *ngFor="let item of uploadedFiles; let i=index">
 165                                 <th width="40"><img src="assets/img/icon-file-code.svg" /></th>
 166                                 <th>{{ item.name }}</th>
 167                                 <th (click)="removeInitFile(i)" width="40" class="text-right"><img
 168                                         src="assets/img/icon-remove-file.svg" /></th>
 169                             </tr>
 170                         </thead>
 171                     </table>
 172                 </div>
 173             </div>
 174             <div class="modal-footer">
 175                 <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
 176                     type="button">Cancel
 177                 </button>
 178                 <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0"
 179                     data-dismiss="modal" type="button">
 180                     Import
 181                 </button>
 182             </div>
 183         </div>
 184     </div>
 185 </div>