web-app/src/app/system/external-services/external-services.component.html at c1c5eb3946c4d9da4bc7a3e18ca6212f4d9acbaa · openMF/web-app · GitHub

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
<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="container">
  <mat-card>
    <div class="layout-row responsive-column gap-20px">
      <div class="flex-50">
        <mat-nav-list>
          <mat-list-item [routerLink]="['amazon-s3']">
            <mat-icon matListIcon [routerLink]="['amazon-s3']">
              <fa-icon icon="cloud" size="sm"></fa-icon>
            </mat-icon>
            <h4 matLine [routerLink]="['amazon-s3']">{{ 'labels.heading.S3 Amazon External Service' | translate }}</h4>
            @if (!arrowBooleans[0]) {
              <fa-icon (click)="arrowBooleansToggle(0); $event.stopPropagation()" icon="arrow-down" size="md"></fa-icon>
            }
            @if (arrowBooleans[0]) {
              <fa-icon (click)="arrowBooleansToggle(0); $event.stopPropagation()" icon="arrow-up" size="md"></fa-icon>
            }
            @if (arrowBooleans[0]) {
              <p matLine [routerLink]="['amazon-s3']">
                {{ 'labels.text.S3 Amazon Service Configuration' | translate }}
              </p>
            }
          </mat-list-item>

          <mat-list-item [routerLink]="['sms']">
            <mat-icon matListIcon [routerLink]="['sms']">
              <fa-icon icon="comment-alt" size="sm"></fa-icon>
            </mat-icon>
            <h4 matLine [routerLink]="['sms']">{{ 'labels.heading.SMS External Service' | translate }}</h4>
            @if (!arrowBooleans[1]) {
              <fa-icon (click)="arrowBooleansToggle(1); $event.stopPropagation()" icon="arrow-down" size="md"></fa-icon>
            }
            @if (arrowBooleans[1]) {
              <fa-icon (click)="arrowBooleansToggle(1); $event.stopPropagation()" icon="arrow-up" size="md"></fa-icon>
            }
            @if (arrowBooleans[1]) {
              <p matLine [routerLink]="['sms']">
                {{ 'labels.text.SMS Service Configuration' | translate }}
              </p>
            }
          </mat-list-item>
        </mat-nav-list>
      </div>

      <div class="flex-50">
        <mat-nav-list>
          <mat-list-item [routerLink]="['email']">
            <mat-icon matListIcon [routerLink]="['email']">
              <fa-icon icon="envelope" size="sm"></fa-icon>
            </mat-icon>
            <h4 matLine [routerLink]="['email']">{{ 'labels.heading.Email External Service' | translate }}</h4>
            @if (!arrowBooleans[2]) {
              <fa-icon (click)="arrowBooleansToggle(2); $event.stopPropagation()" icon="arrow-down" size="md"></fa-icon>
            }
            @if (arrowBooleans[2]) {
              <fa-icon (click)="arrowBooleansToggle(2); $event.stopPropagation()" icon="arrow-up" size="md"></fa-icon>
            }
            @if (arrowBooleans[2]) {
              <p matLine [routerLink]="['email']">
                {{ 'labels.text.Email Service Configuration' | translate }}
              </p>
            }
          </mat-list-item>

          <mat-list-item [routerLink]="['notification']">
            <mat-icon matListIcon [routerLink]="['notification']">
              <fa-icon icon="bell" size="sm"></fa-icon>
            </mat-icon>
            <h4 matLine [routerLink]="['notification']">
              {{ 'labels.heading.Notification External Service' | translate }}
            </h4>
            @if (!arrowBooleans[3]) {
              <fa-icon (click)="arrowBooleansToggle(3); $event.stopPropagation()" icon="arrow-down" size="md"></fa-icon>
            }
            @if (arrowBooleans[3]) {
              <fa-icon (click)="arrowBooleansToggle(3); $event.stopPropagation()" icon="arrow-up" size="md"></fa-icon>
            }
            @if (arrowBooleans[3]) {
              <p matLine [routerLink]="['notification']">
                {{ 'labels.text.Notification Service Configuration' | translate }}
              </p>
            }
          </mat-list-item>

          <mat-list-item [routerLink]="['ollama']">
            <mat-icon matListIcon [routerLink]="['ollama']">
              <fa-icon icon="robot" size="sm"></fa-icon>
            </mat-icon>
            <h4 matLine [routerLink]="['ollama']">{{ 'labels.heading.AI API Report Assistant' | translate }}</h4>
            <button
              mat-icon-button
              type="button"
              (click)="arrowBooleansToggle(4); $event.stopPropagation()"
              [attr.aria-label]="
                arrowBooleans[4] ? ('labels.buttons.Collapse' | translate) : ('labels.buttons.Expand' | translate)
              "
            >
              <fa-icon [icon]="arrowBooleans[4] ? 'arrow-up' : 'arrow-down'" size="md"></fa-icon>
            </button>
            @if (arrowBooleans[4]) {
              <p matLine [routerLink]="['ollama']">
                {{ 'labels.text.AI API Report Assistant Configuration' | translate }}
              </p>
            }
          </mat-list-item>
        </mat-nav-list>
      </div>
    </div>
  </mat-card>
</div>