Angular components for displaying and managing SAP installed instruments (equipment) with details, service contracts, and activities.
npm install ngx-st-sap-installed-instrumentsngx-st-sap-installed-instruments library provides components for managing installed instruments/equipment in SAP including:
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
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`.