NgxStSapInstalledInstruments

Angular components for displaying and managing SAP installed instruments (equipment) with details, service contracts, and activities.

Table of Contents

- Overview
- Installation
- Components
- Examples

---

Overview

The ngx-st-sap-installed-instruments library provides components for managing installed instruments/equipment in SAP including:
- Searchable list of installed instruments
- Detailed instrument information
- Service contracts view
- Service calls and activities
- Attachments management
- Territory filtering

---

Installation

``bash
npm install ngx-st-sap-installed-instruments
`

Import the module in your application:

`typescript
import { NgxStSapInstalledInstrumentsModule } from 'ngx-st-sap-installed-instruments';

@NgModule({
imports: [
NgxStSapInstalledInstrumentsModule
]
})
export class AppModule { }
`

---

Components

$3

Main component displaying searchable list of installed instruments.

#### Selector
`html

`

#### Inputs

##### accessToken
- Type: string
- Description: Authentication token for API requests.
- Example:
`typescript
[accessToken]="authToken"
`

##### territoryFilter (required)
- Type: boolean
- Description: When true, filters instruments by user's territory.
- Example:
`typescript
[territoryFilter]="true"
`

##### showWithCardContent
- Type: boolean
- Default: true
- Description: Wraps the component in a Material card.
- Example:
`typescript
[showWithCardContent]="false"
`

##### useMapButton
- Type: boolean
- Default: false
- Description: Shows a map button for location visualization.
- Example:
`typescript
[useMapButton]="true"
`

#### Features
- Search by multiple criteria:
- Customer name
- Instrument serial number
- Item code
- Installation date range
- Sort by various fields
- Territory-based filtering
- Pagination
- Direct navigation to details
- URL query parameter persistence

#### Example

`html
[accessToken]="token"
[territoryFilter]="true"
[showWithCardContent]="true"
[useMapButton]="false">

`

`typescript
export class InstrumentsComponent {
token = this.authService.getAccessToken();
}
`

---

$3

Table component showing the list of instruments.

Used internally by SapInstalledInstrumentList but can be used standalone.

#### Features
- Sortable columns
- Clickable rows for navigation
- Display key information:
- Customer name
- Item code and description
- Serial number
- Internal serial number
- Installation date
- Status

---

$3

Search form component for filtering instruments.

Used internally by SapInstalledInstrumentList.

#### Features
- Customer search
- Serial number search
- Item code search
- Date range picker for installation date
- Clear filters button
- Form validation

---

$3

Detailed view of a single installed instrument.

#### Selector
`html

`

#### Features
- Complete instrument information
- Service contracts section
- Service calls list
- Activities log
- Attachments
- Tabbed interface

---

$3

Displays the core data of the installed instrument.

#### Features
- Customer information
- Item details
- Serial numbers
- Installation date
- Location information
- Status
- Notes

---

$3

Shows active and historical service contracts.

#### Features
- Contract number and description
- Start and end dates
- Contract status
- Coverage details
- Link to contract details

---

$3

Detailed view of a single service contract.

---

$3

Displays service calls related to the instrument.

#### Features
- Call ID and subject
- Priority level
- Status
- Assigned technician
- Creation and resolution dates
- Call description

---

$3

Detailed view of a service call.

---

$3

Shows activities/notes related to the instrument.

#### Features
- Activity type
- Date and time
- Performed by
- Description
- Duration

---

$3

Detailed view of a single activity.

---

$3

Displays and manages attachments for the instrument.

Uses the ngx-st-attachments component internally.

---

Examples

$3

`html

Installed Instruments

[accessToken]="accessToken"
[territoryFilter]="true">

`

`typescript
export class InstrumentsPageComponent {
accessToken: string;

constructor(private authService: AuthService) {
this.accessToken = this.authService.getToken();
}
}
`

$3

`html
[accessToken]="accessToken"
[territoryFilter]="false"
[useMapButton]="true">

`

$3

`html


Equipment List
All installed instruments



[accessToken]="accessToken"
[territoryFilter]="filterByTerritory"
[showWithCardContent]="false">



`

$3

`html

arrow_back

Instrument Details


[instrumentId]="instrumentId">

`

`typescript
export class InstrumentDetailsComponent implements OnInit {
instrumentId: string;

constructor(
private route: ActivatedRoute,
private location: Location
) {}

ngOnInit() {
this.instrumentId = this.route.snapshot.params['id'];
}

goBack() {
this.location.back();
}
}
`

$3

`html

Installed Instruments

[(ngModel)]="filterByTerritory"
(change)="onFilterChange()">
My Territory Only



[accessToken]="accessToken"
[territoryFilter]="filterByTerritory">

`

`typescript
export class InstrumentsComponent {
accessToken: string;
filterByTerritory = true;

constructor(private authService: AuthService) {
this.accessToken = this.authService.getToken();
}

onFilterChange() {
console.log('Territory filter:', this.filterByTerritory);
}
}
`

$3

The component automatically saves search filters and sorting to URL query parameters, allowing users to bookmark or share specific searches.

`typescript
export class InstrumentsComponent {
// Component automatically reads from URL on init
// Example URL: /instruments?customerName=ABC&serialNumber=12345&active=asc
}
`

$3

`typescript
const routes: Routes = [
{
path: 'instruments',
component: InstrumentsListComponent
},
{
path: 'instruments/:id',
component: InstrumentDetailsComponent
}
];
`

---

Features

$3

- Multiple search criteria
- Date range filtering
- Real-time filtering
- Search persistence in URL

$3

- Sort by any column
- Ascending/descending
- Sort state persistence

$3

- Filter by user's assigned territory
- Optional - can show all instruments
- Useful for sales organizations

$3

- Click any row to view details
- Browser back button support
- Shareable URLs with search state

$3

- Card-based layout
- Mobile-friendly
- Responsive table

---

Data Models

$3

`typescript
interface SapInstalledInstrumentListModel {
insID: number; // Instrument ID
itemCode: string; // Item code
itemName: string; // Item description
manufacturerSerialNumber: string; // Serial number
internalSerialNum: string; // Internal serial number
customer: string; // Customer name
customerCode: string; // Customer code
installDate: Date; // Installation date
statusOfSerialNumber: string; // Status
location: string; // Installation location
}
`

$3

`typescript
interface InstalledInstrumentFormModel {
customerName?: string;
serialNumber?: string;
itemCode?: string;
installationDateFrom?: Date;
installationDateTo?: Date;
}
`

---

Build

Run ng build ngx-st-sap-installed-instruments to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-st-sap-installed-instruments, go to the dist folder cd dist/ngx-st-sap-installed-instruments and run npm publish`.