Fix table and button layout (#152)

* fix: correct table row and footer button layout * fix: update primeng version * fix: detail and form layout * fix: detail and form layout
onecx · Aug 10, 2024 · fae5cf3 · fae5cf3
1 parent 3762bdd
commit fae5cf3
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 121 deletions.
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
     "ngx-color": "^9.0.0",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primeng": "^17.18.6",
+    "primeng": "^17.18.8",
     "rxjs": "7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "~0.14.8"

diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -138,6 +138,14 @@
   }
 }
 
+@mixin footer-buttons {
+  :host ::ng-deep {
+    .p-dialog .p-dialog-footer button {
+      margin: 0;
+    }
+  }
+}
+
 @mixin correct-autocomplete {
   :host ::ng-deep {
     .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {

diff --git a/src/app/help/help-detail/help-detail.component.html b/src/app/help/help-detail/help-detail.component.html
@@ -20,20 +20,20 @@
   <app-help-form [changeMode]="changeMode" [helpItem]="helpItem" [products]="products"></app-help-form>
 
   <ng-template pTemplate="footer">
-    <div class="flex flex-wrap justify-content-end gap-2 mb-1">
+    <div class="flex flex-wrap justify-content-end column-gap-2 row-gap-1">
       <p-button
         id="help_detail_button_close"
-        (onClick)="onDialogHide()"
         icon="pi pi-times"
+        (onClick)="onDialogHide()"
         [label]="'ACTIONS.CANCEL' | translate"
         [pTooltip]="'ACTIONS.TOOLTIPS.CANCEL' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
       ></p-button>
       <p-button
         id="help_detail_button_save"
-        (onClick)="onSave()"
         icon="pi pi-save"
+        (onClick)="onSave()"
         [disabled]="!helpFormComponent.formGroup.valid"
         [label]="'ACTIONS.SAVE' | translate"
         [pTooltip]="'ACTIONS.TOOLTIPS.SAVE' | translate"

diff --git a/src/app/help/help-detail/help-detail.component.scss b/src/app/help/help-detail/help-detail.component.scss
diff --git a/src/app/help/help-detail/help-detail.component.ts b/src/app/help/help-detail/help-detail.component.ts
@@ -6,8 +6,7 @@ import { HelpFormComponent } from '../help-form/help-form.component'
 
 @Component({
   selector: 'app-help-detail',
-  templateUrl: './help-detail.component.html',
-  styleUrls: ['./help-detail.component.scss']
+  templateUrl: './help-detail.component.html'
 })
 export class HelpDetailComponent implements OnChanges {
   @Input() public helpItem: Help | undefined

diff --git a/src/app/help/help-form/help-form.component.html b/src/app/help/help-form/help-form.component.html
@@ -3,70 +3,81 @@
     <span>{{ 'HELPITEM_CREATION.HEADER' | translate }}</span>
   </ng-template>
   <div class="flex flex-wrap flex-column gap-4 justify-content-between mt-2">
-    <div [pTooltip]="'HELP_ITEM.TOOLTIPS.APPLICATION_NAME' | translate" tooltipPosition="top" tooltipEvent="hover">
-      <span class="p-float-label">
-        <p-autoComplete
-          id="help_detail_form_product_name_autocomplete"
-          styleClass="w-full"
-          inputStyleClass="pt-3 pb-2"
-          formControlName="product"
-          field="displayName"
-          ngDefaultControl
-          [readonly]="changeMode === 'EDIT'"
-          [suggestions]="productsFiltered"
-          (completeMethod)="filterProducts($event)"
-          [dropdown]="true"
-          [forceSelection]="true"
-          appendTo="body"
-        ></p-autoComplete>
-        <label class="ocx-required-label" for="help_detail_form_product_name_autocomplete"
-          >{{ 'HELP_ITEM.APPLICATION_NAME' | translate }}
-        </label>
-      </span>
-    </div>
-    <div [pTooltip]="'HELP_ITEM.TOOLTIPS.HELP_ITEM_ID' | translate" tooltipPosition="top" tooltipEvent="hover">
-      <span class="p-float-label" controlErrorAnchor>
-        <input pInputText type="text" id="help_detail_form_item_id" class="w-full pt-3 pb-2" formControlName="itemId" />
-        <label class="ocx-required-label" for="help_detail_form_item_id">
-          {{ 'HELP_ITEM.HELP_ITEM_ID' | translate }}</label
-        >
-      </span>
-    </div>
-    <div [pTooltip]="'HELP_ITEM.TOOLTIPS.BASE_URL' | translate" tooltipPosition="top" tooltipEvent="hover">
-      <span class="p-float-label">
-        <input
-          pInputText
-          type="text"
-          id="help_detail_form_base_url"
-          class="w-full pt-3 pb-2"
-          formControlName="baseUrl"
-        />
-        <label class="" for="help_detail_form_base_url">{{ 'HELP_ITEM.BASE_URL' | translate }}</label>
-      </span>
-    </div>
-    <div [pTooltip]="'HELP_ITEM.TOOLTIPS.RESOURCE_URL' | translate" tooltipPosition="top" tooltipEvent="hover">
-      <span class="p-float-label">
-        <input
-          pInputText
-          type="text"
-          id="help_detail_form_resource_url"
-          class="w-full pt-3 pb-2"
-          formControlName="resourceUrl"
-        />
-        <label class="" for="help_detail_form_resource_url">{{ 'HELP_ITEM.RESOURCE_URL' | translate }}</label>
-      </span>
-    </div>
-    <div [pTooltip]="'HELP_ITEM.TOOLTIPS.CONTEXT' | translate" tooltipPosition="top" tooltipEvent="hover">
-      <span class="p-float-label">
-        <input
-          pInputText
-          type="text"
-          id="help_detail_form_context"
-          class="w-full pt-3 pb-2"
-          formControlName="context"
-        />
-        <label class="" for="help_detail_form_context">{{ 'HELP_ITEM.CONTEXT' | translate }}</label>
-      </span>
-    </div>
+    <span class="p-float-label">
+      <p-autoComplete
+        id="help_detail_form_product_name_autocomplete"
+        styleClass="w-full"
+        inputStyleClass="pt-3 pb-2 text-responsive"
+        formControlName="product"
+        field="displayName"
+        ngDefaultControl
+        appendTo="body"
+        [dropdown]="true"
+        [forceSelection]="true"
+        [readonly]="changeMode === 'EDIT'"
+        [suggestions]="productsFiltered"
+        (completeMethod)="filterProducts($event)"
+        [pTooltip]="'HELP_ITEM.TOOLTIPS.APPLICATION_NAME' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      ></p-autoComplete>
+      <label class="ocx-required-label" for="help_detail_form_product_name_autocomplete"
+        >{{ 'HELP_ITEM.APPLICATION_NAME' | translate }}
+      </label>
+    </span>
+    <span class="p-float-label" controlErrorAnchor>
+      <input
+        pInputText
+        type="text"
+        id="help_detail_form_item_id"
+        class="w-full pt-3 pb-2 text-responsive"
+        formControlName="itemId"
+        [pTooltip]="'HELP_ITEM.TOOLTIPS.HELP_ITEM_ID' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      />
+      <label class="ocx-required-label" for="help_detail_form_item_id">
+        {{ 'HELP_ITEM.HELP_ITEM_ID' | translate }}</label
+      >
+    </span>
+    <span class="p-float-label">
+      <input
+        pInputText
+        type="text"
+        id="help_detail_form_base_url"
+        class="w-full pt-3 pb-2 text-responsive"
+        formControlName="baseUrl"
+        [pTooltip]="'HELP_ITEM.TOOLTIPS.BASE_URL' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      />
+      <label class="" for="help_detail_form_base_url">{{ 'HELP_ITEM.BASE_URL' | translate }}</label>
+    </span>
+    <span class="p-float-label">
+      <input
+        pInputText
+        type="text"
+        id="help_detail_form_resource_url"
+        class="w-full pt-3 pb-2 text-responsive"
+        formControlName="resourceUrl"
+        [pTooltip]="'HELP_ITEM.TOOLTIPS.RESOURCE_URL' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      />
+      <label class="" for="help_detail_form_resource_url">{{ 'HELP_ITEM.RESOURCE_URL' | translate }}</label>
+    </span>
+    <span class="p-float-label">
+      <input
+        pInputText
+        type="text"
+        id="help_detail_form_context"
+        class="w-full pt-3 pb-2 text-responsive"
+        formControlName="context"
+        [pTooltip]="'HELP_ITEM.TOOLTIPS.CONTEXT' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      />
+      <label class="" for="help_detail_form_context">{{ 'HELP_ITEM.CONTEXT' | translate }}</label>
+    </span>
   </div>
 </form>
diff --git a/src/app/help/help-search/help-search.component.html b/src/app/help/help-search/help-search.component.html
@@ -167,34 +167,25 @@
     </div>
   </div>
   <ng-template pTemplate="footer">
-    <div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
-      <button
-        pButton
-        autofocus
-        type="button"
-        class="m-0"
+    <div class="flex flex-wrap justify-content-end column-gap-2 row-gap-1">
+      <p-button
+        id="help_delete_button_no"
         icon="pi pi-times"
-        iconPos="left"
-        [id]="'help_delete_button_no'"
-        [label]="'ACTIONS.CONFIRMATION.NO' | translate"
         (click)="displayDeleteDialog = false"
+        [label]="'ACTIONS.CONFIRMATION.NO' | translate"
         [pTooltip]="'ACTIONS.CONFIRMATION.NO.TOOLTIP' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
-      ></button>
-      <button
-        pButton
-        type="button"
-        class="m-0"
+      ></p-button>
+      <p-button
+        id="help_delete_button_yes"
         icon="pi pi-check"
-        iconPos="left"
-        [id]="'help_delete_button_yes'"
-        [label]="'ACTIONS.CONFIRMATION.YES' | translate"
         (click)="onDeleteConfirmation()"
+        [label]="'ACTIONS.CONFIRMATION.YES' | translate"
         [pTooltip]="'ACTIONS.CONFIRMATION.YES.TOOLTIP' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
-      ></button>
+      ></p-button>
     </div>
   </ng-template>
 </p-dialog>
@@ -226,20 +217,16 @@
     />
   </div>
   <ng-template pTemplate="footer">
-    <div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
-      <button
-        pButton
-        type="button"
+    <div class="flex flex-wrap justify-content-end column-gap-2 row-gap-1">
+      <p-button
         id="help_import_button_cancel"
-        class="m-0"
         icon="pi pi-times"
-        iconPos="left"
         (click)="onCloseImportDialog()"
         [label]="'ACTIONS.CANCEL' | translate"
         [pTooltip]="'ACTIONS.TOOLTIPS.CANCEL' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
-      ></button>
+      ></p-button>
     </div>
   </ng-template>
 </p-dialog>
@@ -267,34 +254,26 @@
     />
   </div>
   <ng-template pTemplate="footer">
-    <div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
-      <button
-        pButton
-        type="button"
+    <div class="flex flex-wrap justify-content-end column-gap-2 row-gap-1">
+      <p-button
         id="help_export_button_cancel"
-        class="m-0"
         icon="pi pi-times"
-        iconPos="left"
         (click)="onCloseExportDialog()"
         [label]="'ACTIONS.CANCEL' | translate"
         [pTooltip]="'ACTIONS.TOOLTIPS.CANCEL' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
-      ></button>
-      <button
-        pButton
-        type="button"
-        id="help_export_button_save"
-        class="m-0"
+      ></p-button>
+      <p-button
+        id="help_export_button_export"
         icon="pi pi-download"
-        iconPos="left"
+        (click)="onExportConfirmation()"
         [disabled]="selectedProductNames.length === 0"
         [label]="'ACTIONS.EXPORT.LABEL' | translate"
-        (click)="onExportConfirmation()"
         [pTooltip]="'ACTIONS.EXPORT.ITEMS_SELECTED.TOOLTIP' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
-      ></button>
+      ></p-button>
     </div>
   </ng-template>
 </p-dialog>

diff --git a/src/app/help/help-search/help-search.component.scss b/src/app/help/help-search/help-search.component.scss
@@ -1,6 +1,7 @@
 @import '/src/_mixins.scss';
 
 @include danger-action;
+@include footer-buttons;
 @include table-inline-buttons;
 @include listbox-zebra-rows;
 @include correct-search-criteria;

diff --git a/src/app/help/help-search/help-search.component.ts b/src/app/help/help-search/help-search.component.ts
@@ -63,18 +63,36 @@ export class HelpSearchComponent implements OnInit {
       header: 'APPLICATION_NAME',
       active: true,
       translationPrefix: 'HELP_ITEM',
-      css: 'hidden sm:table-cell'
+      css: 'hidden sm:table-cell px-2 py-1 sm:py-2 '
+    },
+    {
+      field: 'itemId',
+      header: 'HELP_ITEM_ID',
+      active: true,
+      translationPrefix: 'HELP_ITEM',
+      css: 'px-2 py-1 sm:py-2 '
+    },
+    {
+      field: 'baseUrl',
+      header: 'BASE_URL',
+      active: true,
+      translationPrefix: 'HELP_ITEM',
+      css: 'hidden lg:table-cell px-2 py-1 sm:py-2 '
     },
-    { field: 'itemId', header: 'HELP_ITEM_ID', active: true, translationPrefix: 'HELP_ITEM' },
-    { field: 'baseUrl', header: 'BASE_URL', active: true, translationPrefix: 'HELP_ITEM', css: 'hidden lg:table-cell' },
     {
       field: 'resourceUrl',
       header: 'RESOURCE_URL',
       active: true,
       translationPrefix: 'HELP_ITEM',
-      css: 'hidden xl:table-cell'
+      css: 'hidden xl:table-cell px-2 py-1 sm:py-2 '
     },
-    { field: 'context', header: 'CONTEXT', active: true, translationPrefix: 'HELP_ITEM', css: 'hidden xl:table-cell' }
+    {
+      field: 'context',
+      header: 'CONTEXT',
+      active: true,
+      translationPrefix: 'HELP_ITEM',
+      css: 'hidden xl:table-cell px-2 py-1 sm:py-2 '
+    }
   ]
 
   constructor(