Skip to content

Commit

Permalink
fix: respnsive layout search criteria
Browse files Browse the repository at this point in the history
  • Loading branch information
@HenryT-CG
HenryT-CG committed Oct 12, 2024
1 parent 7d8361f commit 3de296d
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 45 deletions.
24 changes: 12 additions & 12 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,17 @@
"@ngrx/router-store": "^18.0.1",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@onecx/accelerator": "^5.13.0",
"@onecx/angular-accelerator": "^5.13.0",
"@onecx/angular-auth": "^5.13.0",
"@onecx/angular-integration-interface": "^5.13.0",
"@onecx/angular-remote-components": "^5.13.0",
"@onecx/angular-testing": "^5.13.0",
"@onecx/angular-webcomponents": "^5.13.0",
"@onecx/integration-interface": "^5.13.0",
"@onecx/keycloak-auth": "^5.13.0",
"@onecx/portal-integration-angular": "^5.13.0",
"@onecx/portal-layout-styles": "^5.13.0",
"@onecx/accelerator": "5.13.0",
"@onecx/angular-accelerator": "5.13.0",
"@onecx/angular-auth": "5.13.0",
"@onecx/angular-integration-interface": "5.13.0",
"@onecx/angular-remote-components": "5.13.0",
"@onecx/angular-testing": "5.13.0",
"@onecx/angular-webcomponents": "5.13.0",
"@onecx/integration-interface": "5.13.0",
"@onecx/keycloak-auth": "5.13.0",
"@onecx/portal-integration-angular": "5.13.0",
"@onecx/portal-layout-styles": "5.13.0",
"@webcomponents/webcomponentsjs": "^2.8.0",
"keycloak-angular": "^16.0.1",
"primeflex": "^3.3.1",
Expand All @@ -86,7 +86,7 @@
"@commitlint/cli": "^19.5.0",
"@commitlint/config-conventional": "^19.5.0",
"@openapitools/openapi-generator-cli": "^2.13.12",
"@schematics/angular": "18.2.6",
"@schematics/angular": "18.2.8",
"@types/jasmine": "~5.1.4",
"@types/node": "~22.7.3",
"@typescript-eslint/eslint-plugin": "^7.18.0",
Expand Down
4 changes: 2 additions & 2 deletions src/app/product-store/app-delete/app-delete.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<ng-template pTemplate="footer">
<div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
<p-button
id="ps_app_delete_button_no"
id="ps_app_delete_action_no"
icon="pi pi-times"
[label]="'ACTIONS.CONFIRMATION.NO' | translate"
(onClick)="onDialogHide()"
Expand All @@ -29,7 +29,7 @@
tooltipEvent="hover"
></p-button>
<p-button
id="ps_app_delete_button_yes"
id="ps_app_delete_action_yes"
icon="pi pi-check"
(onClick)="onConfirmDeletion()"
[label]="'ACTIONS.CONFIRMATION.YES' | translate"
Expand Down
6 changes: 3 additions & 3 deletions src/app/product-store/app-detail/app-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -526,7 +526,7 @@
<div class="flex flex-wrap justify-content-end gap-2 mb-1">
<p-button
*ngIf="!allowEditing()"
id="ps_app_detail_button_close"
id="ps_app_detail_action_close"
icon="pi pi-times"
(onClick)="onDialogHide()"
[label]="'ACTIONS.NAVIGATION.CLOSE' | translate"
Expand All @@ -536,7 +536,7 @@
></p-button>
<p-button
*ngIf="allowEditing()"
id="ps_app_detail_button_cancel"
id="ps_app_detail_action_cancel"
icon="pi pi-times"
(onClick)="onDialogHide()"
[label]="'ACTIONS.CANCEL' | translate"
Expand All @@ -546,7 +546,7 @@
></p-button>
<p-button
*ngIf="allowEditing()"
id="ps_app_detail_button_save"
id="ps_app_detail_action_save"
icon="pi pi-save"
(onClick)="onSave()"
[disabled]="
Expand Down
4 changes: 2 additions & 2 deletions src/app/product-store/product-detail/product-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
<ng-template pTemplate="footer">
<div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
<p-button
id="ps_product_delete_button_no"
id="ps_product_delete_action_no"
icon="pi pi-times"
(onClick)="productDeleteVisible = false"
[label]="'ACTIONS.CONFIRMATION.NO' | translate"
Expand All @@ -87,7 +87,7 @@
tooltipEvent="hover"
></p-button>
<p-button
id="ps_product_delete_button_yes"
id="ps_product_delete_action_yes"
icon="pi pi-check"
(onClick)="onDeleteConfirmation()"
[label]="'ACTIONS.CONFIRMATION.YES' | translate"
Expand Down
44 changes: 20 additions & 24 deletions src/app/product-store/product-search/product-search.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,54 +7,50 @@
[manualBreadcrumbs]="false"
[actions]="(actions$ | async) ?? []"
>
<div
id="product_search_criteria"
[formGroup]="productSearchCriteriaGroup"
class="flex flex-wrap gap-4 row-gap-3 md:px-2"
>
<div id="ps_product_search_criteria" [formGroup]="productSearchCriteriaGroup" class="flex flex-row flex-wrap gap-3">
<span class="p-float-label">
<input
id="product_search_criteria_display_name"
id="ps_product_search_criteria_display_name"
pInputText
type="text"
class="w-18rem"
class="w-11rem sm:w-18rem text-responsive"
[clear]="true"
formControlName="displayName"
[pTooltip]="('PRODUCT.TOOLTIPS.DISPLAY_NAME' | translate) + ('ACTIONS.SEARCH.WILDCARD_SUPPORT' | translate)"
tooltipPosition="top"
tooltipEvent="hover"
/>
<label for="product_search_criteria_display_name">{{ 'PRODUCT.DISPLAY_NAME' | translate }}</label>
<label for="ps_product_search_criteria_display_name">{{ 'PRODUCT.DISPLAY_NAME' | translate }}</label>
</span>
<span class="p-float-label">
<input
id="product_search_criteria_product_name"
id="ps_product_search_criteria_product_name"
pInputText
type="text"
class="w-18rem"
class="w-11rem sm:w-18rem text-responsive"
[clear]="true"
formControlName="productName"
[pTooltip]="('PRODUCT.TOOLTIPS.NAME' | translate) + ('ACTIONS.SEARCH.WILDCARD_SUPPORT' | translate)"
tooltipPosition="top"
tooltipEvent="hover"
/>
<label for="product_search_criteria_product_name">{{ 'PRODUCT.NAME' | translate }}</label>
<label for="ps_product_search_criteria_product_name">{{ 'PRODUCT.NAME' | translate }}</label>
</span>
</div>
</ocx-search-header>

<ocx-page-content>
<div *ngIf="exceptionKey" id="product_search_criteria_error" class="card px-3 align-items-center">
<div *ngIf="exceptionKey" id="ps_product_search_criteria_error" class="card px-3 align-items-center">
<p-message
id="product_search_criteria_error_message"
id="ps_product_search_criteria_error_message"
severity="error"
styleClass="p-2"
[text]="exceptionKey | translate"
></p-message>
</div>
<p-dataView
*ngIf="!exceptionKey"
id="product_search_dataview"
id="ps_product_search_dataview"
[value]="(products$ | async)?.stream!.sort(sortProductsByDisplayName)"
[paginator]="true"
[alwaysShowPaginator]="true"
Expand All @@ -70,7 +66,7 @@
>
<ng-template pTemplate="header">
<ocx-data-view-controls
id="product_search_dataview_controls"
id="ps_product_search_dataview_controls"
[enableFiltering]="true"
[enableSorting]="true"
[supportedViews]="['grid', 'list']"
Expand Down Expand Up @@ -101,13 +97,13 @@
<div class="p-grid p-nogutter grid grid-nogutter">
<div *ngFor="let product of products; index as i" class="col-12 md:col-6">
<div
[id]="'product_search_data_list_row_' + i"
[id]="'ps_product_search_data_list_row_' + i"
class="flex flex-row flex-nowrap justify-content-start align-items-center column-gap-3 py-1 sm:px-3 hover:bg-gray-200 cursor-pointer"
[routerLink]="['./' + product.name]"
>
<div class="p-0 col-3 text-center">
<app-image-container
[id]="'product_search_data_list_row_' + i + '_image'"
[id]="'ps_product_search_data_list_row_' + i + '_image'"
[small]="true"
styleClass="h-2rem sm:h-3rem max-h-2rem sm:max-h-3rem max-w-5rem"
[imageUrl]="getLogoUrl(product)"
Expand All @@ -116,7 +112,7 @@
<div class="p-0 col-9">
<div class="flex flex-column justify-content-center gap-1">
<div
[id]="'product_search_data_list_row_' + i + '_product_display_name'"
[id]="'ps_product_search_data_list_row_' + i + '_product_display_name'"
class="font-bold text-md text-responsive"
[class.danger-action-text]="product.undeployed"
[pTooltip]="
Expand All @@ -130,7 +126,7 @@
</div>
<div
class="text-sm text-responsive"
[id]="'product_search_data_list_row_' + i + '_product_name'"
[id]="'ps_product_search_data_list_row_' + i + '_product_name'"
[pTooltip]="'PRODUCT.NAME' | translate"
tooltipPosition="top"
tooltipEvent="hover"
Expand All @@ -149,22 +145,22 @@
<div class="grid grid-nogutter">
<div *ngFor="let product of products; index as i" class="col-6 md:col-4 xl:col-3 p-2 md:px-3">
<div
[id]="'product_search_data_grid_row_' + i"
[id]="'ps_product_search_data_grid_row_' + i"
class="card relative px-2 p-1 sm:p-2 flex flex-column sm:gap-1 justify-content-between text-center hover:bg-gray-200 cursor-pointer"
[routerLink]="['./', product.name]"
>
<!-- BADGES -->
<span
*ngIf="product?.undeployed"
[id]="'product_search_data_grid_row_' + i + '_undeployed'"
[id]="'ps_product_search_data_grid_row_' + i + '_undeployed'"
class="card-badge-right badge-1 p-2 pi pi-ban danger-action-text font-bold"
[pTooltip]="'PRODUCT.TOOLTIPS.UNDEPLOYED_SEARCH' | translate"
tooltipPosition="top"
tooltipEvent="hover"
></span>
<div class="h-2rem sm:h-3rem flex flex-column justify-content-center align-items-center text-center">
<app-image-container
[id]="'product_search_data_grid_row_' + i + '_image'"
[id]="'ps_product_search_data_grid_row_' + i + '_image'"
[small]="false"
styleClass="h-2rem sm:h-3rem max-h-2rem sm:max-h-3rem max-w-10rem"
[imageUrl]="getLogoUrl(product)"
Expand All @@ -173,7 +169,7 @@
<!-- CONTENT -->
<div class="flex flex-column justify-content-between sm:gap-1 text-center">
<div
[id]="'product_search_data_grid_row_' + i + '_product_display_name'"
[id]="'ps_product_search_data_grid_row_' + i + '_product_display_name'"
class="mt-2 font-bold text-md text-responsive"
[class.danger-action-text]="product.undeployed"
[pTooltip]="product.displayName.length <= 20 ? '' : product.displayName"
Expand All @@ -183,7 +179,7 @@
{{ product.displayName }}
</div>
<div
[id]="'product_search_data_grid_row_' + i + '_product_name'"
[id]="'ps_product_search_data_grid_row_' + i + '_product_name'"
class="text-sm text-responsive"
[pTooltip]="product.name.length <= 25 ? '' : product.name"
tooltipPosition="top"
Expand Down
4 changes: 2 additions & 2 deletions src/app/product-store/slot-delete/slot-delete.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<ng-template pTemplate="footer">
<div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
<p-button
id="ps_slot_delete_button_no"
id="ps_slot_delete_action_no"
icon="pi pi-times"
[label]="'ACTIONS.CONFIRMATION.NO' | translate"
(onClick)="onDialogHide()"
Expand All @@ -29,7 +29,7 @@
tooltipEvent="hover"
></p-button>
<p-button
id="ps_slot_delete_button_yes"
id="ps_slot_delete_action_yes"
icon="pi pi-check"
(onClick)="onConfirmDeletion()"
[label]="'ACTIONS.CONFIRMATION.YES' | translate"
Expand Down

0 comments on commit 3de296d

Please sign in to comment.