summaryrefslogtreecommitdiffstats
path: root/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/dashboard-report-grid/dashboard-report-grid.component.html
blob: cfcdae9861a3aa09dc252476fd2d3d0200041d28 (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
<br/>
<div>

    <div class="field-group">
        <label>Search Report</label> <br/>
        <input #myInput (input)="filterItem(myInput.value)" [(ngModel)]="name" class="defaultFontSize" type="text"/>
    </div>
</div>
<br/>
<div>
    <table>
        <tr>
            <th>Report Data</th>
            <th>Report Chart</th>
        </tr>

        <tr>

            <td>
                <span *ngIf="showSpinner" class="ecomp-spinner"></span>
                <div *ngIf="!showSpinner" class="data-table">
                    <div *ngFor="let report of filteredItemsData">
                        <div (dragstart)="dragStartHandler($event, report)" *ngIf="options.enableEmptyCellDrop" class="example-list"
                             draggable="true">{{report.id}} {{report.name}}</div>
                    </div>
                </div>
            </td>


            <td>
                <span *ngIf="showSpinner" class="ecomp-spinner"></span>
                <div *ngIf="!showSpinner" class="data-table">
                    <div *ngFor="let report of filteredItemsChart">
                        <div (dragstart)="dragStartHandler($event, report)" *ngIf="options.enableEmptyCellDrop" class="example-list"
                             draggable="true">{{report.id}} {{report.name}}</div>
                    </div>
                </div>
            </td>

        </tr>

    </table>
</div>
<br/>

<label>Dashboard Preview </label> <br/>
<gridster [options]="options">
    <gridster-item *ngFor="let item of dashboard" [item]="item">
        <div *ngIf="item.hasContent" class="gridster-item-content1">
            <div class="stuff">
                {{item.hasContent.id}} {{item.hasContent.name}}
            </div>
            <div class="field-group">
                <div class="button-holder">
                    <button (mousedown)="removeItem($event, item)" (touchstart)="removeItem($event, item)"
                            mat-mini-fab>
                        <mat-icon>delete</mat-icon>
                    </button>
                </div>
                <div class="checkbox-holder">
                    <mat-checkbox [(ngModel)]="item.hasContent.hideDisplay" [checked]="setHideDisplay(item)"> Hide
                        Display
                    </mat-checkbox>
                </div>
            </div>
        </div>
    </gridster-item>
</gridster>

<style scoped>
    ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container {
        display: inline-block;
        height: 25px;
        width: 25px;
    }

    .button-holder{
        padding-right: 10px;
    }

    .checkbox-holder{
        padding-top: 10px;
    }
    .field-group {
        display: inline-flex;
    }
</style>