summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
blob: 8d1894c5750346e6ad3934004d8228743113902a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<div class="import-container-all">
    <div class="import-container">
        <div class="import-container-input">
            <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL" type="input">
            <a class="enter-link" href="#"><i class="icon-enter"></i></a>
        </div>
        <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal"
                href="#">Import File</a></span>

    </div>

    <div class="accordion">
        <div class="card creat-card">
            <div class="single-line">
                <label class="label-name">File</label>
            </div>
        </div>
        <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion-script">

            <div class="card">
                <div [id]="'head-script-'+mapIndex" class="card-header">
                    <h5 class="mb-0 d-flex justify-content-between">
                        <button [attr.aria-controls]="'id-script-'+mapIndex" [attr.data-target]="'#id-script-'+mapIndex"
                            aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse">
                            <i class="icon-file-code"></i> {{file.key}}
                        </button>
                        <a (click)="removeFile(mapIndex)" class="accordion-delete"><i class="icon-delete"></i></a>
                    </h5>
                </div>
                <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
                    data-parent="#accordion-script">
                    <div class="card-body">
                        <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'"
                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'"
                            #editor style="height:300px;">
                        </ace-editor>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog"
    tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scriptsModalLabel">Import File</h5>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ngx-file-drop accept=".kt,.py" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
                    (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
                    <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
                        <div class="folder-upload">
                            <img src="assets/img/folder-upload.svg" />
                        </div>
                        <div class="folder-upload-text">
                            Drag & Drop file
                        </div>
                        <div class="folder-upload-text">or
                            <button (click)="openFileSelector()" class="btn btn-sm btn-primary" type="button">Browse
                                Files
                            </button>
                        </div>
                        <div class="folder-upload-type">Allowed file type: Kotlin(kt), Python(py)</div>
                    </ng-template>
                </ngx-file-drop>
                <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name : {{ item.name }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
                    type="button">Cancel
                </button>
                <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
                    Import
                </button>
            </div>
        </div>
    </div>
</div>