@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/base-input-dialog/base-input-dialog.component.css

@@ -0,0 +1,67 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 98%;
+}
+
+.title-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  margin: 2vh 0;
+}
+
+.full-column {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  margin-top: 2vh;
+}
+
+.half-column {
+  flex: 0 0 49%;
+  display: flex;
+  flex-direction: column;
+}
+
+.right-align {
+  align-items: flex-end;
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  margin: 1% 2%;
+}
+
+@media (max-width: 768px) {
+  .button-row {
+    flex-direction: column;
+  }
+
+  .half-column {
+    flex: 1 1 100%;
+  }
+
+  .right-align {
+    align-items: center;
+  }
+
+  .button-group {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+}

package/src/lib/components/base-input-dialog/base-input-dialog.component.html

@@ -1,42 +1,47 @@
-<div fxLayout="column" fxFlex="98">
-  <div fxLayout="row" fxLayoutAlign="start start" style="margin-top: 2vh;margin-bottom: 2vh; width: 100%">
-    <div fxLayout="column" fxFlex="100">
-      <app-title-bar [pageTitle]="getTitle()"></app-title-bar>
-    </div>
-  </div>
-
-  <ng-container *ngIf="isLoaded">
-    <app-base-form-canvas
-      [pageInfo]="pageInfo"
-      [fields]="fieldsInfo"
-      [editable]="true"
-      [item]="default"
-      (formUpdated)="captureForm($event)"></app-base-form-canvas>
-
-    <div fxLayout="row" fxLayoutAlign="start start" style="width: 100%">
-      <div fxLayout="column" fxFlex="49">
-      </div>
-      <div fxLayout="column" fxFlex="49">
-        <div align="right" style="margin: 1% 2%;">
-          <ng-container>
-            <button
-              mat-stroked-button class="btn-none-background-primary"
-              type="button"
-              (click)="doCancel('cancel')"
-              style="margin: 20px 10px;">Cancel
-            </button>
-          </ng-container>
-          <ng-container>
-            <button
-              [ngClass]="saveDisabled() ? 'btn-none-background-primary' : 'btn-background-primary'"
-              [disabled]="saveDisabled()"
-              mat-stroked-button
-              type="button"
-              (click)="doSave('save')">Save
-            </button>
-          </ng-container>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-</div>
+<div class="container">
+  <div class="title-row">
+    <div class="full-column">
+      <app-title-bar [pageTitle]="getTitle()"></app-title-bar>
+    </div>
+  </div>
+
+  <ng-container *ngIf="isLoaded">
+    <app-base-form-canvas
+      [pageInfo]="pageInfo"
+      [fields]="fieldsInfo"
+      [editable]="true"
+      [item]="default"
+      (formUpdated)="captureForm($event)">
+    </app-base-form-canvas>
+
+    <div class="button-row">
+      <div class="half-column"></div>
+      <div class="half-column right-align">
+        <div class="button-group">
+          <ng-container>
+            <button
+              mat-stroked-button
+              class="btn-none-background-primary"
+              type="button"
+              (click)="doCancel('cancel')"
+              id="base-input-cancel-btn">
+              Cancel
+            </button>
+          </ng-container>
+
+          <ng-container>
+            <button
+              [ngClass]="saveDisabled() ? 'btn-none-background-primary' : 'btn-background-primary'"
+              [disabled]="saveDisabled()"
+              mat-stroked-button
+              type="button"
+              (click)="doSave('save')"
+              id="base-input-save-btn">
+              Save
+            </button>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>

package/src/lib/components/base-input-dialog/base-input-dialog.component.spec.ts

@@ -1,23 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BaseInputDialogComponent } from './base-input-dialog.component';
-
-describe('BaseInputDialogComponent', () => {
-  let component: BaseInputDialogComponent;
-  let fixture: ComponentFixture<BaseInputDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [BaseInputDialogComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(BaseInputDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BaseInputDialogComponent } from './base-input-dialog.component';
+
+describe('BaseInputDialogComponent', () => {
+  let component: BaseInputDialogComponent;
+  let fixture: ComponentFixture<BaseInputDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BaseInputDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(BaseInputDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/base-input-dialog/base-input-dialog.component.ts

@@ -1,78 +1,77 @@
-import {Component, Inject, Input, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {FlexLayoutModule, FlexModule} from "@angular/flex-layout";
-import {NgClass, NgIf} from "@angular/common";
-import {MatIconModule} from "@angular/material/icon";
-import {MatSelectModule} from "@angular/material/select";
-import {MatInputModule} from "@angular/material/input";
-import {TranslateModule} from "@ngx-translate/core";
-import { BaseFormCanvasComponent } from '../base-form-canvas/base-form-canvas.component';
-import {TitleBarComponent} from "../title-bar/title-bar.component";
-import {FieldInfo, PageInfo} from "../../base-model";
-import {BaseUtils} from "../../utils/base-utils";
-
-@Component({
-  selector: 'lib-base-input-dialog',
-  standalone: true,
-  imports: [
-    FlexModule,
-    NgIf,
-    NgClass,
-    MatIconModule,
-    ReactiveFormsModule,
-    MatSelectModule,
-    MatInputModule,
-    BaseFormCanvasComponent,
-    FlexLayoutModule,
-    TranslateModule,
-    NgIf,
-    TranslateModule,
-    TitleBarComponent
-  ],
-  templateUrl: './base-input-dialog.component.html',
-  styleUrl: './base-input-dialog.component.css'
-})
-export class BaseInputDialogComponent extends BaseUtils implements OnInit {
-  fieldsInfo: FieldInfo[];
-  default: any;
-  isLoaded: boolean = false;
-  formGroup: FormGroup;
-
-  constructor(public dialogRef: MatDialogRef<BaseInputDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any) {
-    super()
-  }
-
-  ngOnInit(): void {
-    console.log('data' ,this.data);
-    this.fieldsInfo = this.data.fieldsInfo;
-    this.pageInfo = this.data.pageInfo;
-    this.default = this.data.element;
-    this.isLoaded = true;
-  }
-  captureForm($event: FormGroup) {
-    this.formGroup = $event;
-  }
-
-  saveDisabled() {
-    return !this.formGroup?.valid;
-  }
-
-  getTitle() {
-    return this.pageInfo.labelsSection + '.pop_up_title';
-  }
-
-  doSave(save: string) {
-    if (this.formGroup.valid) {
-      let id = this.default?.id;
-      this.default = this.formGroup.value;
-      this.default.id = id;
-      this.dialogRef.close(this.default);
-    }
-  }
-
-  doCancel(cancel: string) {
-    this.dialogRef.close(null);
-  }
-}
+import {Component, Inject, Input, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {NgClass, NgIf} from "@angular/common";
+import {MatIconModule} from "@angular/material/icon";
+import {MatSelectModule} from "@angular/material/select";
+import {MatInputModule} from "@angular/material/input";
+import {TranslateModule} from "@ngx-translate/core";
+import { BaseFormCanvasComponent } from '../base-form-canvas/base-form-canvas.component';
+import {TitleBarComponent} from "../title-bar/title-bar.component";
+import {FieldInfo, PageInfo} from "../../base-model";
+import {BaseUtils} from "../../utils/base-utils";
+import {MatButton} from "@angular/material/button";
+
+@Component({
+  selector: 'lib-base-input-dialog',
+  standalone: true,
+  imports: [
+    NgIf,
+    NgClass,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatSelectModule,
+    MatInputModule,
+    BaseFormCanvasComponent,
+    TranslateModule,
+    NgIf,
+    TranslateModule,
+    TitleBarComponent,
+    MatButton
+  ],
+  templateUrl: './base-input-dialog.component.html',
+  styleUrl: './base-input-dialog.component.css'
+})
+export class BaseInputDialogComponent extends BaseUtils implements OnInit {
+  fieldsInfo: FieldInfo[];
+  default: any;
+  isLoaded: boolean = false;
+  formGroup: FormGroup;
+
+  constructor(public dialogRef: MatDialogRef<BaseInputDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+    super()
+  }
+
+  ngOnInit(): void {
+    console.log('data' ,this.data);
+    this.fieldsInfo = this.data.fieldsInfo;
+    this.pageInfo = this.data.pageInfo;
+    this.default = this.data.element;
+    this.isLoaded = true;
+  }
+  captureForm($event: FormGroup) {
+    this.formGroup = $event;
+  }
+
+  saveDisabled() {
+    return !this.formGroup?.valid;
+  }
+
+  getTitle() {
+    return this.pageInfo.labelsSection + '.pop_up_title';
+  }
+
+  doSave(save: string) {
+    if (this.formGroup.valid) {
+      let id = this.default?.id;
+      this.default = this.formGroup.value;
+      this.default.id = id;
+      this.dialogRef.close(this.default);
+    }
+  }
+
+  doCancel(cancel: string) {
+    this.dialogRef.close(null);
+  }
+}