Requirements to begin working on the app

1: install nodeJS from nodejs.org

2: install yarn package manager from https://yarnpkg.com/en/docs/install#windows-stable

3: install Git from https://www.git-scm.com/

4: After installing all previous applications, open a terminal and type npm install --global @angular/cli@latest

Steps to work on the application.

1: Clone the repo from github using git clone git@github.com:XephyLon/HeartCare.git.

2: Go inside the repo's folder and open a terminal.

3: type yarn to install all the needed dependencies to begin working

4: Create and switch to a new branch after installing dependencies by using git checkout -b <branch-name>

5: type ng serve to serve the application at Http://localhost:4200

6: After making changes, you can check which files were edited by using terminal command git status

7: To stage all the changes, use the terminal command git add .

8: To commit the changes, use the terminal command git commit -m"<commit-message-goes-here>"

• Try to commit frequently not to undo big changes if something goes wrong.

9: To push the new branch and the commit to GitHub, type git push -u origin <branch-name>

Template grid and responsive design

• We use flex-layout to handle shaping templates and implementing responsive design
• Link to the repository : https://github.com/angular/flex-layout

Steps to create a new page

1: Create a module for the new page using ng g m <module-name>

2: Add SharedModule to imports in the new module after creating it

3: Create a main component that would be rendered when you navigate to that page using ng g c <component-name> -m <module-name>

• It's better that the page's root component has the same name as the module
• All components that have states must have its Change Detection Strategy set to OnPush

  @Component({
  selector: "app-test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush // Setting this gives a huge performance boost since Angular only detects state changes.
})
export class TestComponent {  }

4: Add the page path to the app-routing.module.ts module. Use the other paths are reference to lazy-load it.

const Routes: [] = [
  ...,
  {
    path: "page",
    loadChildren: () => import("./page/page.module").then(m => m.PageModule)
  }
]

5: Create a state for the new page using AngularConsole VSCode extension or use an existing state for reference and LazyLoad it by importing it as a feature for the page module

• more info at https://www.ngxs.io/advanced/lazy

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    SharedModule, // Must add
    NgxsModule.forFeature([StockState]) // Adding the state as a feature lazy-loads it
  ]
})
export class NewPageModule { }

regarding references

Angular: Angular docs can be found at https://angular.io/

RxJS: Angular makes heavy use of RxJS and understanding reactive pattern is a must. Documentation can be found at https://rxjs-dev.firebaseapp.com/

Adding a table/grid to a component

1: In the component you wish yo add a grid for, go to the HTML file and add the pbl-ngrid component

<pbl-ngrid
  class="min-height selectable"
  [dataSource]="dataSource"
  [columns]="columns"
  vScrollNone>
  </pbl-ngrid>

• Check out the nGrid docs at https://shlomiassaf.github.io/ngrid/

2: Go to the TypeScript file and define the columns. You can use the columns object in SpecializationsComponent or StockComponent as reference or check out the nGrid docs

• You mainly need a property name
  Example :

export const ITEMS_COLUMNS = columnFactory().table(
  { prop: "number", label: "#", type: "id", width: "24px" },
  { prop: "ItemLevel.Code", pIndex: true, width: "128px" }, // prop take an object property chain as a string
  { prop: "ItemLevel.Name", label: "Name", editable: true, width: "128px" } // Use label to set a different column name than the property's
);

3: build the columns inside the component TS class

4: The data is always fetched from the Store which calls the API and returns an observable we can use here as a selector

• Check out Selectors in NGXS Docs to learn more

@Component({
  // ...
})
export class SomeComponent {
  @Selector(SomeState.getStateData) stateData$ // Observable must always be affixed with a dollarsign "$"
  dataSource = createDS().onTrigger(() => this.stateData$).create() // This is the dataSource you'll be passing to the dataSource directive 
  columns = ITEMS_COLUMNS.build() // This variable is what you will be passing to the columns directive in <pbl-ngrid> component 
}

Creating a Form

• Check out Angular docs' Reactive forms https://angular.io/guide/reactive-forms
• Check out NGXS Forms plugin at https://www.ngxs.io/plugins/form

Adding CRUD operations to a form

1: In the form component, add the CRUD component tag at the end of it

<app-crud [crud]="crud" [id]="dataId" [form]="someForm.value"></app-crud>

2: In the state file, define the CRUD operations, injecting the API service into the state class

• For example, check out stock.state.ts for CRUD implementation for the state

@State({
  name: 'newPage',
  defaults: {
    // ...
  },
  children: [ ... ] // Children is used to lazy-load sub-states. You can read about it in NGXS docs.
})
@Injectable() // Required for Angular 9+
export class newPageState {
  constructor(private api: ApiService) {} // Injhecting the API service to create state actions that handle the CRUD operations for this page/module/state
}

3: In the form component TS file, define a crud object which has the create, update, and delete as methods

• Check out stock-form.component.ts for crud object implementation.