summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html
blob: 358c910c2b414a1827325b7f27888f4ee273b505 (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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<ng2-expand-collapse state="0">
    <header sdc-tooltip tooltip-text="{{input.title}}">{{input.title}}</header>
    <content>
    <div class="w-sdc-designer-sidebar-section">
        <div *ngIf="properties">
        <ng-container *ngFor="let key of objectKeys(properties); let idx = index">
            <sdc-accordion [title]="groupNameByKey(key) + ' Properties'" [css-class]="'properties-accordion'" [arrow-direction]="'right'" [testId]="groupNameByKey(key) + 'properties'" [open]="true">
                
                <!--ng-show="isShowDetailsSection" -->
                <div class="i-sdc-designer-sidebar-section-content-item" *ngIf="!groupPropertiesByInstance">
                    <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" attr.data-tests-id="propertyRow"
                            *ngFor="let property of properties[key]">

                        <div class="property-details">
                            <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
                                    [ngClass]="{'hand enabled': !isViewOnly}"
                                    sdc-tooltip tooltip-text="{{property.name}}"
                                    (click)="!isViewOnly && updateProperty(property)"
                                    attr.data-tests-id="{{property.name}}">{{property.name}}</span>
                            <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="isPropertyOwner()"
                                    sdc-tooltip tooltip-text="{{property.defaultValue}}">{{property.defaultValue}}</span>
                            <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="!isPropertyOwner()"
                                    sdc-tooltip tooltip-text="{{property.value}}"
                                    attr.data-tests-id="value_{{property.name}}">{{property.value}}</span>
                        </div>
                        <div class="property-buttons">
                            <svg-icon *ngIf="!isViewOnly && (isPropertyOwner() && !property.readonly)" name="trash-o" clickable="true" size="medium" mode="info" testId="delete_{{property.name}}" (click)="deleteProperty(property)"></svg-icon>
                        </div>
                    </div>
                </div>
                <div class="i-sdc-designer-sidebar-section-content-item" *ngIf="groupPropertiesByInstance">
                    <ng-container *ngFor="let InstanceProperties of properties[key]; let propIndex = index">
                        <div class="vfci-properties-group">
                            <div class="second-level">
                                <div class="expand-collapse-title-icon"></div>
                                <span class="w-sdc-designer-sidebar-section-title-text" sdc-tooltip tooltip-text="{{getComponentInstanceNameFromInstanceByKey(InstanceProperties.key)}}&nbsp;Properties"
                                        attr.data-tests-id="vfci-properties">{{getComponentInstanceNameFromInstanceByKey(InstanceProperties.key) + ' Properties'}}</span>
                            </div>
                        </div>
                        <div  class="w-sdc-designer-sidebar-section-content instance-properties {{propIndex}}">
                            <div class="i-sdc-designer-sidebar-section-content-item">
                                <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" attr.data-tests-id="propertyRow"
                                        *ngFor="let instanceProperty of InstanceProperties.value">
                                    <div>
                                        <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
                                                [ngClass]="{'hand enabled': !isViewOnly}"
                                                sdc-tooltip tooltip-text="{{instanceProperty.name}}"
                                                attr.data-tests-id="vfci-property">{{instanceProperty.name}}</span>
                                    </div>
                                    <div>
                                        <span class="i-sdc-designer-sidebar-section-content-item-property-value"
                                                sdc-tooltip tooltip-text="{{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}">
                                            {{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ng-container>
                </div>
                <!--<div  class="w-sdc-designer-sidebar-section-footer" *ngIf="(!isViewOnly && isPropertyOwner()) || showAddPropertyButton">-->
                    <!--<button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" attr.data-tests-id="addGrey" (click)="addProperty()" type="button">-->
                        <!--Add Property-->
                    <!--</button>-->
                <!--</div>-->
            </sdc-accordion>
        </ng-container>
        </div>

        <!--attributes-->
        <div *ngIf="attributes">
        <ng-container *ngFor="let key of objectKeys(attributes); let attrIndex = index">
            <sdc-accordion [title]="groupNameByKey(key) + ' Attributes'" [arrow-direction]="'right'" [testId]="groupNameByKey(key) + 'attributes'" [css-class]="'attributes-accordion'">
                <!--ng-show="isShowDetailsSection" -->
                    <div class="i-sdc-designer-sidebar-section-content-item">
                        <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute"
                                *ngFor="let attribute of attributes[key]">
                            <div>
                                <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
                                        [ngClass]="{'hand enabled': !isViewOnly}"
                                        sdc-tooltip tooltip-text="{{attribute.name}}"
                                        (click)="!isViewOnly && viewAttribute(attribute)"
                                        attr.data-tests-id="{{attribute.name}}-attr">{{attribute.name}}</span>
                            </div>
                            <div>
                                <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="isPropertyOwner()"
                                        sdc-tooltip tooltip-text="{{attribute.defaultValue}}">{{attribute.defaultValue}}</span>
                                <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="!isPropertyOwner()"
                                        sdc-tooltip tooltip-text="{{attribute.value}}" attr.data-tests-id="value-of-{{attribute.name}}">{{attribute.value}}</span>
                            </div>
                        </div>
                    </div>
            </sdc-accordion>
        </ng-container>
        </div>

    </div>
    </content>
</ng2-expand-collapse>

<ng2-expand-collapse state="0">
    <header sdc-tooltip tooltip-text="Occurrences">OCCURRENCES</header>
    <content>
    <div class="w-sdc-designer-sidebar-section">
       <div *ngIf="isUnboundedChecked != null">
        <ng-container>
            <sdc-accordion [title]="component.name + ' Occurrences'" [arrow-direction]="'right'" [testId]="'Occurrences'" [css-class]="'occurrences-accordion'">
                <div class="i-sdc-designer-sidebar-section-content-item">
                    <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
                        <checkbox [(checked)]="isOccurrencesEnabled" (change)="enableOccurrences()" [disabled]="isViewOnly"></checkbox>
                        <div>
                        <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
                              [ngClass]="{'hand enabled': !isViewOnly}">Enable Occurrences</span>
                        </div>
                    </div>
                    <div *ngIf="isOccurrencesEnabled" class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
                        <div class="sdc-input">
                            <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label">Min Occurrences</span>
                            <div class="min-occurrences-value">
                                <sdc-input
                                    label=""
                                    testId="reqOccurrencesMin"
                                    [disabled]="isViewOnly"
                                    [(value)]="component.minOccurrences"
                                    type="number">
                                </sdc-input>
                            </div>
                        </div>
                    </div>
                    <div *ngIf="isOccurrencesEnabled" class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
                        <div class="sdc-input">
                            <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label">Max Occurrences</span>
                            <div class="max-occurrences-value">
                                <sdc-checkbox
                                        class="checkbox-label unbounded-value"
                                        testId="reqOccurrencesMaxUnbounded"
                                        label="Unbounded"
                                        (checkedChange)="onUnboundedChanged(component)"
                                        [checked]="isUnboundedChecked"
                                        [disabled]="isViewOnly">
                                </sdc-checkbox>
                                <sdc-input
                                        *ngIf="!isUnboundedChecked"
                                        testId="reqOccurrencesMax"
                                        [disabled]="isViewOnly"
                                        [(value)]="component.maxOccurrences"
                                        type="number">
                                </sdc-input>
                            </div>
                        </div>
                    </div>
                    <div *ngIf="!isViewOnly && isOccurrencesEnabled" class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
                        <button class="tlv-btn blue" (click)="saveOccurrences()" [disabled]="!isOccurrencesFormValid(component)">Save</button>
                    </div>
                </div>
                </sdc-accordion>
        </ng-container>
        </div>
    </div>
    </content>
</ng2-expand-collapse>