DigitaleBibliothek / Frontend / 1c9fbd46297

Commits

Sondissimo authored 1c9fbd46297 26 Sep 2023

CST-11048 FInished the angular implementation for the ldn inbox, needs cleanup

src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html

Modified

-1
+<form (ngSubmit)="submitForm()" [formGroup]="formModel">
-2
--
+    <div class="form-group">
--
--
+        <!-- In the name section -->
--
+        <label for="name">Name</label>
--
+        <input formControlName="name" id="name" name="name" placeholder="Please provide service name" required
-+
+    <!-- In the name section -->
-+
+    <div class="mb-2">
-+
+        <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
-+
+        <input [placeholder]="'ldn-new-service.form.placeholder.name' | translate"
-+
+               formControlName="name" id="name" name="name"
-+
+               [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-9
+               type="text">
-10
+    </div>
-11
-12
+    <!-- In the description section -->
--
+    <div class="form-group">
--
+        <label for="description">Description</label>
--
+        <input formControlName="description" id="description" name="description" placeholder="Please provide a description regarding your service"
--
+               required type="text">
-+
+    <div class="mb-2 d-flex flex-column">
-+
+        <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
-+
+        <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-+
+                  formControlName="description" id="description" name="description"></textarea>
-17
+    </div>
-18
-19
+    <!-- In the url section -->
--
+    <div class="form-group">
--
+        <label for="url">Service URL</label>
--
+        <input formControlName="url" id="url" name="url" placeholder="Please input the URL for users to check out more information about the service"
--
+               required type="text">
-+
+    <div class="mb-2">
-+
+        <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
-+
+        <input [placeholder]="'ldn-new-service.form.placeholder.url' | translate"
-+
+               formControlName="url" id="url" name="url"
-+
+               [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-+
+               type="text">
-26
+    </div>
-27
-28
+    <!-- In the ldnUrl section -->
--
+    <div class="form-group">
--
+        <label for="ldnUrl">LDN Inbox URL</label>
--
+        <input formControlName="ldnUrl" id="ldnUrl" name="ldnUrl" placeholder="Please specify the URL of the LDN Inbox"
--
+               required type="text">
-+
+    <div class="mb-2">
-+
+        <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
-+
+        <input [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate"
-+
+               formControlName="ldnUrl" id="ldnUrl" name="ldnUrl"
-+
+               [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-+
+               type="text">
-35
+    </div>
-36
-37
+    <!-- In the Inbound Patterns section -->
--
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index" class="form-group"
--
+         formGroupName="notifyServiceInboundPatterns">
-+
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
-+
+         class="mb-2 d-flex align-content-center" formGroupName="notifyServiceInboundPatterns">
-40
-41
+        <ng-container [formGroupName]="i">
-42
--
+            <label for="additionalInboundPattern{{i}}">Inbound Pattern {{i + 1}}</label>
-+
+            <div class="flex-grow-1">
-+
+                <label for="additionalInboundPattern{{i}}">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} {{ i + 1 }}</label>
-45
--
+            <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
--
+                    name="additionalInboundPattern{{i}}" required>
-+
+                <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
-+
+                        name="additionalInboundPattern{{i}}" required>
-48
--
+                <option disabled value="">Select an Additional Inbound Pattern</option>
--
+                <option *ngFor="let pattern of inboundPatterns" [ngValue]="pattern.name">{{ pattern.name }}</option>
-+
+                    <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
-+
+                    <option *ngFor="let pattern of inboundPatterns" [ngValue]="pattern.name">{{ pattern.name }}</option>
-51
--
+            </select>
-+
+                </select>
-+
+            </div>
-54
--
+            <div *ngIf="inboundPattern.value" class="form-group">
-+
+            <ng-container *ngIf="inboundPattern.value">
-56
--
+                <label for="constraint{{i}}">Selected Item Filter</label>
-+
+                <div class="ml-2 flex-grow-1">
-+
+                    <label for="constraint{{i}}">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-59
--
+                <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-+
+                    <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-+
+                        <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-+
+                        <option *ngFor="let itemFilter of itemFilterList"
-+
+                                [value]="itemFilter.name">{{ itemFilter.name }}</option>
-+
+                    </select>
-+
+                </div>
-66
--
+                    <option disabled value="">Select an Item Filter</option>
--
+                    <option *ngFor="let itemFilter of itemFilterList"
--
+                            [value]="itemFilter.name">{{ itemFilter.name }}</option>
-+
+                <div class="ml-2 d-flex flex-column align-content-center">
-+
+                    <label for="automatic{{i}}">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-+
+                    <div class="d-flex flex-grow-1 align-content-center justify-content-center">
-+
+                        <input formControlName="automatic" id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
-+
+                    </div>
-+
+                </div>
-73
--
+                </select>
-+
+            </ng-container>
-75
-+
+            <div class="d-flex align-items-end justify-content-center">
-+
+                <button (click)="removeInboundPattern(patternGroup)" *ngIf="i > 0" class="btn btn-outline-dark trash-button ml-2">
-+
+                    <i class="fas fa-trash"></i>
-+
+                </button>
-80
+            </div>
-81
--
+            <span *ngIf="i > 0" (click)="removeInboundPattern(patternGroup)" class="remove-pattern-link">- Remove</span>
--
-82
+        </ng-container>
-83
-84
+    </div>
-85
--
+    <span (click)="addInboundPattern()" class="add-pattern-link">+ Add more</span>
-+
+    <span (click)="addInboundPattern()"
-+
+          class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
-88
-89
+    <!-- In the Outbound Patterns section -->
--
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index" class="form-group"
--
+         formGroupName="notifyServiceOutboundPatterns">
-+
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
-+
+         class="mb-2 d-flex align-content-center" formGroupName="notifyServiceOutboundPatterns">
-92
-93
+        <ng-container [formGroupName]="i">
-94
--
+            <label for="additionalOutboundPattern{{i}}">Outbound Pattern {{i + 1}}</label>
-+
+            <div class="flex-grow-1">
-+
+                <label for="additionalOutboundPattern{{i}}">{{ 'ldn-new-service.form.label.outboundPattern' | translate }} {{ i + 1 }}</label>
-97
--
+            <select formControlName="pattern" id="additionalOutboundPattern{{i}}" name="additionalOutboundPattern{{i}}"
--
+                    required>
-+
+                <select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}"
-+
+                        name="additionalOutboundPattern{{i}}"
-+
+                        required>
-101
--
+                <option disabled value="">Select an Additional Outbound Pattern</option>
--
+                <option *ngFor="let pattern of outboundPatterns" [ngValue]="pattern.name">{{ pattern.name }}</option>
-+
+                    <option  value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
-+
+                    <option *ngFor="let pattern of outboundPatterns"
-+
+                            [ngValue]="pattern.name">{{ pattern.name }}</option>
-105
--
+            </select>
-+
+                </select>
-+
+            </div>
-108
--
+            <span *ngIf="i > 0" (click)="removeOutboundPattern(patternGroup)" class="remove-pattern-link">- Remove</span>
-+
+            <div *ngIf="outboundPattern.value" class="ml-2 flex-grow-1">
-+
-+
+                <label for="constraint{{i}}">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-+
-+
+                <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-+
+                    <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-+
+                    <option *ngFor="let itemFilter of itemFilterList"
-+
+                            [value]="itemFilter.name">{{ itemFilter.name }}</option>
-+
+                </select>
-+
-+
+            </div>
-+
-+
+            <div class="d-flex align-items-end justify-content-center">
-+
+                <button (click)="removeOutboundPattern(patternGroup)" *ngIf="i > 0" class="btn btn-outline-dark trash-button ml-2">
-+
+                    <i class="fas fa-trash"></i>
-+
+                </button>
-+
+            </div>
-126
-127
+        </ng-container>
-128
-129
+    </div>
-130
--
+    <span (click)="addOutboundPattern()" class="add-pattern-link">+ Add more</span>
-+
+    <span (click)="addOutboundPattern()"
-+
+          class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
-+
+        </span>
-134
-135
+    <button class="btn btn-primary" type="submit">Submit</button>
--
-136
+</form>

Frontend

Commits

Jira Issues

Add shortcut