catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html


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

<div class="w-sdc-designer-sidebar-tab-content sdc-general-tab relations">
    <div *ngIf="!isCurrentDisplayComponentIsComplex(); else complexComponentTemplate">
        <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
            <sdc-accordion [title]="'Capabilities'" [arrow-direction]="'right'" [testId]="'Capabilities-accordion'">
                <div *ngFor="let capability of capabilities" class="relations-details-container">
                    <div class="relations-name">{{capability.name}}&nbsp;</div>
                    <div class="relations-desc"> {{capability.type}} </div>
                    <div class="checkbox-label-mark-as-external" *ngIf="isComponentInstanceSelected">
                        <checkbox
                            class="checkbox-label"
                            [attr.data-tests-id]="'checkbox-external-cap-' + capability.name"
                            [label]="'External'"
                            (checkedChange)="onMarkCapabilityAsExternal(capability)"
                            [(checked)]="capability.external"
                            [disabled]="isViewOnly">
                        </checkbox>
                    </div>
                </div>
            </sdc-accordion>
        </div>
        <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
            <sdc-accordion [title]="'Requirements'" [arrow-direction]="'right'" [testId]="'Requirements-accordion'">
                <requirement-list [component]='component' [requirements]="requirements" [isInstanceSelected]="isComponentInstanceSelected" [isViewOnly]='isViewOnly'></requirement-list>
            </sdc-accordion>

        </div>
    </div>

    <ng-template #complexComponentTemplate>
        <sdc-accordion *ngIf="capabilitiesInstancesMap" [title]="'Capabilities'" [arrow-direction]="'right'" [testId]="'Capabilities-accordion'">
            <sdc-accordion *ngFor="let key of objectKeys(capabilitiesInstancesMap); let i = index" [title]="key">
                <div *ngFor="let capability of capabilitiesInstancesMap[key]" class="relations-details-container">
                    <div class="relations-name">{{capability.name}}&nbsp;</div>
                    <div class="relations-desc"> {{capability.type}} </div>
                    <div class="checkbox-label-mark-as-external" *ngIf="isComponentInstanceSelected">
                        <checkbox
                            class="checkbox-label"
                            [attr.data-tests-id]="'checkbox-external-cap-' + capability.name"
                            [label]="'External'"
                            (checkedChange)="onMarkCapabilityAsExternal(capability)"
                            [(checked)]="capability.external"
                            [disabled]="isViewOnly">
                        </checkbox>
                    </div>
                </div>
            </sdc-accordion>
        </sdc-accordion>

        <sdc-accordion *ngIf="requirementsInstancesMap" [title]="'Requirements'" [arrow-direction]="'right'" [testId]="'Requirements-accordion'">
                <sdc-accordion *ngFor="let key of objectKeys(requirementsInstancesMap); let i = index" [title]="key">
                    <requirement-list [component]='component' [requirements]="requirementsInstancesMap[key]" [isInstanceSelected]="isComponentInstanceSelected" [isViewOnly]='isViewOnly'></requirement-list>
                </sdc-accordion>
        </sdc-accordion>

    </ng-template>
</div>