pb-view v1.0.0

PbView

This library was generated with Angular CLI version 15.0.0.

Description

Compatible with Bootstrap 4 and Feather Icon

Library Dependency

• pb-subsection: can be installed using npm i pb-subsection@latest command.

Usage Example

Version : v1.0.0

<!-- FILE : file.component.html -->
<lib-pb-view [config]="SampleViewConfigObj"></lib-pb-view>

// FILE : file.component.ts

// first of all, import configuration file.
// configuration file will be explain in the last of Usage Example section.
import sampleViewConfigObj from 'src/app/objects/view/sample-view-config';

// Inside component class, declare 1 variable that has ViewConfigObj type.
SampleViewConfigObj: ViewConfigObj = new ViewConfigObj();

// And then assign sampleViewConfigObj to SampleViewConfigObj in ngOnInit function.
ngOnInit(){
  this.SampleViewConfigObj = sampleViewConfigObj;
}

// And its done.
// Now, we set up the configuration file.
// Create a file with name sample-view-config-obj.ts in view folder. Relative Path: src\app\objects\view\sample-view-config-obj.ts
// Then, configure your setting in that file like this.
// FILE : sample-view-config-obj.ts
import { ViewConfigObj } from '../global/view-config-obj';

const sampleViewConfigObj: ViewConfigObj = new ViewConfigObj();
sampleViewConfigObj.subsectionId = 'subsectionSampleInformation';
sampleViewConfigObj.subsectionTitle = 'Sample Information';
sampleViewConfigObj.queryKey = 'viewRefSample';
sampleViewConfigObj.conditions = ['Condition One Value', 'Condition Two Value'];
sampleViewConfigObj.body = [
  {
    title: 'Sample Code', // should be a string. It will be shown as field Title
    key: 'sample_code', // should be a string. It is a column in database which has value that will be paired with the Title
    link: null, // should be null or an object of link. It determines the type of the value that paired with the Title.
  },
  {
    title: 'Sample Value',
    key: 'sample_value',
    link: null,
  },
  {
    title: 'Sample Status',
    key: 'is_active',
    link: null,
  },
  {
    title: 'Go to Angular',
    key: 'is_active',
    link: {
      href: 'http://www.angular.io', // should be a string of link. You can use "http://another-page.com" or only "/path/to/another-router/"
      target: '_blank', // should be _blank or _self. with default value is _blank
    },
  },
];

export default sampleViewConfigObj;

// Those settings allow us to create a view component that support common field and also field with link value.
// And it is done.

Changeset :

Version Pattern : v(ComponentVersion),(ModuleVersion),(SyntaxVersion or README)

Version : v1.0.0

• Initial pb-view

Author

18 December 2022 - Firman Tri Anggara - firmantrianggara@gmail.com