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