Reusable Components: Segment, Smart Segment, My View, Filters, and Chips
- Aman Singh
This document demonstrates how the Segment, Smart Segment, My View, Filters, and Chips components can be reused with minimal code changes based on your component requirements, with no CSS changes required.
Content of the Page:
Structure of Reusable Components
New Reusable Header Component Overview
New Reusable Segment, Smart Segment, and My View Component Overview
New Reusable Filters and Chip Component Overview
To extend reusability, each of the above components has been broken down so they can be used together or independently.
Important Points to Keep in Mind While Using Reusable Components:
Adhere to Standards and Reusability: Ensure that any code added to a reusable component follows established coding standards and promotes reusability.
Use Declared Variables: For any special handling, use declared variables and comments instead of hard-coded values. For example, use
ACTIVE_ACCOUNT = 1instead ofaccount == 1.Document Changes: Document any changes made to reusable components. This includes adding comments to the code and updating relevant documentation.
Test Thoroughly: Before integrating reusable components, thoroughly test them in isolation and within the context of the application to ensure they work as expected without causing regressions.
Seek Approval for Major Changes: Any significant modifications to reusable components should be discussed and approved by the Author to avoid unintended impacts on existing flows and pages.
Reusable components are always expandable and can be modified in the future to meet new requirements. Such modifications may necessitate changes to reusable components, which require proper discussion, communication, and approval from the Author to ensure proper implementation or update without impacting existing flows and pages.
1. Structure of Reusable Components
Shared
│
├── Component
│ ├── new-header
│ │
│ ├── reusable-filter
│ │ └── reusable-filter-options
│ │
│ ├── segment-with-count
│ │ ├── segment
│ │ └── store
│ │
│ └── segment-with-count
│
├── Service
│ └── segment-with-count
│ ├── new-segment
│ └── segment-count
│
└── Pipes
├── TruncateFilterPipe
├── SanitizeHtmlPipe
└── ChangeLabelPipe
2. New Reusable Header Component Overview
UI:
Sample Example Code:
This will be rendered using content projection: Angular Content Projection Guide.
The app-new-header component is responsible for UI reusability. By using this new component, we eliminate the need to write CSS for header alignment in our own components. This approach ensures consistent header alignment across different components by leveraging the reusable app-new-header component.
Below is the code snippet from src/app/orderV2/order-pageV2/containersV2/orderV2/order.component.html file:
<app-new-header
[learnMore]="{
link: 'https://help.eshopbox.com/en/collections/2444416-b2c-order-processing',
text: 'Learn more'
}"
>
<!-- Left -->
<ng-container left>All Orders</ng-container>
<!-- Center -->
<ng-container center>
<input
[(ngModel)]="searchQuery"
type="search"
name="searchQuery"
(keyup)="searchInput($event)"
(focus)="focusFunction()"
(blur)="focusoutFunction()"
matTooltip="Search by Order ID, Tracking ID and more..."
placeholder="Search by Order ID, Tracking ID and more..."
autocomplete="off"
matTooltipShowDelay="500"
matTooltipHideDelay="500"
matTooltipClass="custom-tooltip-new below"
placement="bottom"
#search
/>
<ng-container *ngIf="searchQuery">
<span class="enter-icon">
<img src="https://ik.imagekit.io/2gwij97w0o/corner-down-left.svg?updatedAt=1706771639513" alt="reply" />
enter
</span>
<span class="input-close-icon">
<img
src="https://ik.imagekit.io/2gwij97w0o/filter_icons/close_icon_filter.svg?updatedAt=1681108446693"
class="clear-field"
(click)="searchInput('')"
/>
</span>
</ng-container>
</ng-container>
<!-- Right -->
<ng-container right>
<a class="sync-btn mrg-right-10" (click)="syncOrderNCount()">
<img
[ngClass]="{ 'sync-rotate': isSync }"
src="https://ik.imagekit.io/2gwij97w0o/Client_portal_frontend_assets/img/sync-red-ic.svg?updatedAt=1625923385689"
alt="sync-icon"
/>
{{ isSync ? 'Syncing' : 'Sync' }}
</a>
<!-- <app-draft-return-button [showDownload]="false"></app-draft-return-button> -->
<a class="btn import-icon mrg-right-10" (click)="onOrderImport()"> Import </a>
<app-export-button [currentFilter]="currentFilter" (emitExportJob)="exportJobHandler($event)">
</app-export-button>
</ng-container>
</app-new-header>3. New Reusable Segment, Smart Segment, and My View Component Overview
UI:
Sample Example Code:
In the above section, all data is fetched via the API endpoint /api/v2/segment. For more details, refer to the related documents attached below. To understand the structure better, check out src/app/orderV2/order-pageV2/containersV2/orderV2/order.component.html.
Code Snippet:
<!-- Segment, Smart Segment, and My View -->
@queryFilterData: To get the query parameter from the parent component
@buildingBlock: This should be the same as the key (buildingBlock) value in the segment data object.
<app-segments [queryFilterData]="queryFilterData" [buildingBlock]="buildingBlock"></app-segments>
<!-- Segment, Smart Segment, and My View -->IMPORTANT || Count Integration
For count integration, each module's backend team needs to provide an API with the same response structure mentioned in the Frontend Segments, Smart Segment, and Filters Implementation document. Frontend members should implement this similar to the existing flow and create a new action in the segment store.
3. New Reusable Filters and Chip Component Overview
UI:
Sample Example Code:
In the above section, all data is fetched via the API endpoint /filtersNew this endpoint might be different depending on the backend service. For more details, refer to the related documents attached below. To understand the structure better, check out src/app/shared/component/segment-with-count/segment-with-count.component.html
Code Snippet:
<!-- Filters and Chip -->
<!-- To use filter pass the filter array from parent component -->
@queryFilterData: To get the query parameter from the parent component
@buildingBlock: This should be the same as the key (buildingBlock) value in the segment data object.
@filtersArray: All the filters of parent component or the screen where it is getting injected
<ng-container *ngIf="filtersArray && filtersArray.length > 0">
<app-reusable-filter
[queryFilterData]="queryFilterData"
(emitFilterData)="emitFilterData($event)"
[buildingBlock]="buildingBlock"
[allFilters]="filtersArray"
(emitSearchKey)="searchInput($event)"
></app-reusable-filter>
</ng-container>
<!-- Filters and Chip -->Some related documents:
Merge request: https://gitlab.com/eshopbox-team/eshopbox-client-portal-frontend/-/merge_requests/16803
https://auperator.atlassian.net/wiki/spaces/PLE/pages/4270686238
https://auperator.atlassian.net/wiki/spaces/PLE/pages/4307058767
Recording: https://tldv.io/app/meetings/66cf06ecafee7a0013f163fb