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"
   9                                                                                              (click)="resetTheUploadedFiles()"
  10                                                                                              href="#"><b>Import File</b></a></span>
  11         <span>
  12    <div class="card creat-card"></div>
  13    <div class="single-line-model">
  14       <label class="label-name">File Name
  15       <span _ngcontent-uew-c3="">*</span>
  16       </label>
  17       <div class="label-input">
  18          <input type="input" [(ngModel)]="currentFileName"
  19                 placeholder="script name" name="scriptName" autofocus [autofocus]="true">
  20       </div>
  21       <div class="single-line">
  22          <label class="label-name">Script Type</label>
  23          <div class="label-input" (change)="changeExtension()">
  24             <label name="trst" id="kt">
  25             <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
  26                    name="exampleRadios1" id="kt" value=kotlin>
  27             <span>
  28             Kotlin
  29             </span>
  30             </label>
  31             <label name="trst" id="py">
  32             <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
  33                    name="exampleRadios2" id="py" value=python>
  34             <span>
  35             Jython
  36             </span>
  37             </label>
  38             <label id="ansible">
  39             <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
  40                    name="exampleRadios3" id="ansible" value=ansible>
  41             <span>
  42             Ansible
  43             </span>
  44             </label>
  45          </div>
  46       </div>
  47    </div>
  48    <div id="id-script" class="collapse show">
  49       <div class="card-body">
  50          <ace-editor [(text)]="currentFileContent"
  51                      [mode]="currentExtension"
  52                      [autoUpdateContent]="true" [durationBeforeCallback]="3000" [theme]="'eclipse'"
  53                      #editor
  54                      style="height:300px;">
  55          </ace-editor>
  56       </div>
  57    </div>
  58 </span>
  59         <button tourAnchor="tm-templateFinish" (click)="textCurrentChanges()" [disabled]="currentFileName?.length == 0 ||
  60 this.currentFileContent?.length == 0
  61 "
  62                 title="Submit template and close" class="btn btn-primary">Save
  63         </button>
  64     </div>
  65
  66
  67     <div class="accordion">
  68         <!-- <div class="card creat-card">
  69             <div class="single-line">
  70                 <label class="label-name">File</label>
  71             </div>
  72         </div> -->
  73         <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion-script">
  74
  75             <div class="card">
  76                 <div [id]="'head-script-'+mapIndex" class="card-header">
  77                     <h5 class="mb-0 d-flex justify-content-between">
  78                         <button (click)="changeDivShow(mapIndex)" aria-expanded="false" class="btn btn-link collapsed"
  79                                 data-toggle="collapse">
  80                             <i class="icon-file-code"></i> {{file.key}}
  81                         </button>
  82                         <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal"
  83                            class="accordion-delete"><i class="icon-delete-sm"></i></a>
  84                         <!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
  85                                     class="icon-delete-sm"></i></a> -->
  86                         <!-- Delete Modal -->
  87                         <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
  88                              aria-labelledby="exampleModalLabel" aria-hidden="true">
  89                             <div class="modal-dialog" role="document">
  90                                 <div class="modal-content">
  91                                     <div class="modal-header">
  92                                         <h5 class="modal-title" id="exampleModalLabel">Delete Script</h5>
  93                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  94                                             <img src="assets/img/icon-close.svg"/>
  95                                         </button>
  96                                     </div>
  97                                     <div class="modal-body">
  98                                         <p>Are you sure you want to delete script file
  99                                             <span>{{fileToDelete?.key?.split('/')[2]}}</span>?</p>
 100                                     </div>
 101                                     <div class="modal-footer">
 102                                         <button type="button" class="btn btn-secondary"
 103                                                 data-dismiss="modal">Cancel
 104                                         </button>
 105                                         <button type="button" (click)="removeFile(fileToDelete?.key,0)"
 106                                                 data-dismiss="modal" class="btn btn-danger">Delete
 107                                         </button>
 108                                     </div>
 109                                 </div>
 110                             </div>
 111                         </div>
 112
 113
 114                     </h5>
 115                 </div>
 116                 <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
 117                      data-parent="#accordion-script">
 118                     <div class="card-body">
 119                         <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'"
 120                                     [autoUpdateContent]="true" [durationBeforeCallback]="5000" [theme]="'eclipse'"
 121                                     #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>