Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve responsive layout search criteria #269

Merged
merged 1 commit into from
Oct 12, 2024
Merged

Improve responsive layout search criteria #269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading