mgr/dashboard v2: Add cdRequired directive to mark a form field label…

… as required.

Signed-off-by: Volker Theile <vtheile@suse.com>

src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/required.directive.spec.ts

@@ -0,0 +1,8 @@
+import { RequiredDirective } from './required.directive';
+
+describe('RequiredDirective', () => {
+  it('should create an instance', () => {
+    const directive = new RequiredDirective(null, null);
+    expect(directive).toBeTruthy();
+  });
+});

src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/required.directive.ts

@@ -0,0 +1,42 @@
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+
+/**
+ * This directive adds a '*' to the label of a form field to indicate
+ * that this field is required.
+ *
+ * Example:
+ * <div class="form-group">
+ *   <label i18n
+ *          class="control-label col-sm-3"
+ *          for="bucket">Name</label>
+ *   <div class="col-sm-9">
+ *     <input id="bucket"
+ *            name="bucket"
+ *            class="form-control"
+ *            type="text"
+ *            placeholder="Name..."
+ *            [(ngModel)]="bucket.bucket"
+ *            autofocus
+ *            cdRequired="bucket">
+ *   </div>
+ * </div>
+ */
+@Directive({
+  selector: '[cdRequired]'
+})
+export class RequiredDirective implements OnInit {
+
+  constructor(private el: ElementRef, private renderer: Renderer2) { }
+
+  ngOnInit() {
+    const selector = `label[for='${this.el.nativeElement.id}']`;
+    const labelElement = document.body.querySelector(selector);
+    if (labelElement) {
+      const spanElement = this.renderer.createElement('span');
+      this.renderer.addClass(spanElement, 'fa');
+      this.renderer.addClass(spanElement, 'fa-asterisk');
+      this.renderer.addClass(spanElement, 'required');
+      this.renderer.appendChild(labelElement, spanElement);
+    }
+  }
+}

src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { ComponentsModule } from './components/components.module';
 import { DataTableModule } from './datatable/datatable.module';
 import { PasswordButtonDirective } from './directives/password-button.directive';
+import { RequiredDirective } from './directives/required.directive';
 import { PipesModule } from './pipes/pipes.module';
 import { AuthGuardService } from './services/auth-guard.service';
 import { AuthStorageService } from './services/auth-storage.service';
@@ -22,13 +23,15 @@ import { ServicesModule } from './services/services.module';
     DataTableModule
   ],
   declarations: [
-    PasswordButtonDirective
+    PasswordButtonDirective,
+    RequiredDirective
   ],
   exports: [
     ComponentsModule,
     PipesModule,
     ServicesModule,
     PasswordButtonDirective,
+    RequiredDirective,
     DataTableModule
   ],
   providers: [

src/pybind/mgr/dashboard_v2/frontend/src/openattic-theme.scss

@@ -1169,3 +1169,10 @@ hr.oa-hr-small {
     -moz-border-radius: 6px 0 6px 6px;
     border-radius: 6px 0 6px 6px;
 }
+
+/* Forms */
+.form-group>.control-label>.required {
+  font-size: 6px;
+  padding-left: 4px;
+  vertical-align: text-top;
+}