Skip to content

Home

Jump to bottom
Jose Ibañez edited this page Apr 14, 2020 · 15 revisions

Style Guide People Management

This document presents the syntax, conventions, and structure of the components. The purpose is to maintain a convention line to maintain the same line of code writing.
We follow the angular style guides: https://angular.io/guide/styleguide

General Naming Guidelines

  1. Consider creating a folder for a component when it has multiple accompanying files (.ts, .html, .css and .spec). e.g.
add-challenge.component.ts 
add-challenge.component.spect.ts
add-challenge.component.html
add-challenge.component.css
  1. Use consistent names for all symbols. Names of folders and files should clearly convey their intent. For example, app/candidate/candidates-list.component.ts may contain a component that manages a list of heroes.
  2. Use dashes to separate words in the descriptive name. For example, add-challenge.component.ts
  3. Use consistent names for all assets named after what they represent.
Symbol Name File Name
@Component({ ... }) export class AppComponent { } app.component.ts
  1. Use consistent names for all services named after their features.
Symbol Name File Name
@Injectable() export class ChallengeWorkFlowService { } challenge-workflow.service.ts
  1. Name test specification files the same as the component they test.0
  2. Name test specification files with a suffix of .spec. For example, add-interview.component.spec.ts
  3. Name end-to-end test specification files after the feature they test with a suffix of .e2e-spec.
  4. Extract templates and styles into a separate file.
  5. Use the @Input() and @Output() class decorators instead of the inputs and outputs properties of the @Directive and @Component metadata: Consider placing @Input() or @Output() on the same line as the property it decorates.
export class DataTableComponent {
 @Input('rowItems') rowItems: ResponseList = { content: [], totalCount: 0 };
 @Input('rowSettings') rowSettings: RowSetting[] = [];
 @Input('showFilter') showFilter: boolean = false;
 @Input('showPagination') showPagination: boolean = false;
 @Input('filteringFields') filteringFields: Object;
 @Output('getAllData') getAllData = new EventEmitter();
 @Input('itemsPerPage') itemsPerPage: number = 5;
 totalItems: any;
 page: any = 1;
}
  1. Limit logic in a component to only that required for the view. All other logic should be delegated to services. Move reusable logic to services and keep components simple and focused on their intended purpose.
  2. Create services with a single responsibility that is encapsulated by its context. Create a new service once the service begins to exceed that singular purpose.
  3. Use the @Injectable() class decorator instead of the @Inject parameter decorator when using types as tokens for the dependencies of a service.
@Injectable({
 providedIn: 'root'
})
export class CandidateService {}

CSS class and components

Typography: Montserrat, Sans-serif.

Icon we use “font-awesome” library

CSS for buttons save .ok-btn

CSS code for buttons save .ok-btn

  .ok-btn {
    float: right;
    height: 2.5rem;
    border: 0px;
    color: #FFF;
    border-radius: 0.3rem;
    background-color: #73BB83;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;
    box-shadow: 0px 4px 4px rgba(2, 0, 40, 0.25);
  }

  .ok-btn:hover, .ok-btn:focus{
    border: 2px solid #73BB83;
    background: #FFF;
    color: #73BB83;
    outline: none;
  }

CSS for buttons cancel .not-ok-btn

CSS code for buttons cancel .not-ok-btn

  .not-ok-btn {
    float: right;
    height: 2.5rem;
    border: 0px;
    font-size: 15px;
    border-radius: 0.3rem;
    background-color: #B46060;
    text-transform: uppercase;
    font-weight: 700;
    color: #FFF;
    text-align: center;
    box-shadow: 0px 4px 4px rgba(2, 0, 40, 0.25);
  }

  .not-ok-btn:hover, .not-ok-btn:focus{
    border: 2px solid #B46060;
    background: #FFF;
    color: #B46060;
    outline: none;
  }

CSS buttons ADD participants .btn btn-primary

Breadcrumbs: breadcrumbs component /shared/breadcrumbs/breadcrumbs

Title .form-title

Pagination: ngb-pagination component
https://ng-bootstrap.github.io/#/components/pagination/overview

DatePicker: ejs-datepicker component

Popups: ej2-angular-popups
https://www.npmjs.com/package/@syncfusion/ej2-angular-popups

Notification: ngx-toastr
https://www.npmjs.com/package/ngx-toastr
File: notification.service.ts

NavBar /shared/layout/header

SideBar /shared/layout/header

For create a new view

<div class="container">
 <div class="card card-signin">
   <div class="col-12 title form-title">
     <div class="row col-12 position">
       <div class="col-md-6">
         <label class="text-title">Your Title</label>
       </div>
     </div>
   </div>
 </div>

Structure of People Management Front end project

The shared directory contains components that are used throughout the application. For example, navbar, footers, etc. The services folder will have the logic to make the API calls. The two * .module.ts files will contain angular component configuration. The app folder contains the code of our application. We also look at the assets folder, which contains static files, environments, contains environment variables, and many other files that are part of our application. The models folder contains the models used across the application.

Form Guideline

In the case of creating and editing forms, it would be advisable to use only one component for both cases. The routes for the forms will be defined as follows:

<name> / add: For aggregation operations.
<name> / edit /: id: For editing operations.

In the case of DOM the following structure will be followed:

<div class="container">
 <div class="col-12 title form-title-pm">
   Your Title
 </div>
 <div class="form-pm">
   <form [formGroup]="dataForm" id="dataForm" (ngSubmit)="onSubmit()">

     <div class=" form-group">
       <label for="inputAttribute">Attribute:</label>
       <input type="text" formControlName="attribute" class="form-control" 
         id="inputAttribute" placeholder="attribute">
     </div>
     ...
     <div class="form-group">
       <button type="submit" class="ok-btn">SAVE</button>
     </div>
   </form>
 </div>
</div>

For a new field a new line will be added with the same format for the input “attribute” indicated in the code. It is recommended to use the same classes to follow the same line already defined. In the definition of the component, the FormControl class must be used for binding with the DOM form and to define the patterns for entering the attributes.

List Guideline

For the creation of tables simply use the generic data table component. The tag to use it is the following . The variables that are used are listed in the following table:

Name Type Description
rowItems: ResponseList Input This variable contains the data to be displayed.
rowSettings: RowSetting[] Input This variable indicates the guidelines for invoking each of the rowItemsd columns and the name of the columns.
showFilter: boolean Input Variable to show the filter.
showPagination: boolean Input Variable to display the pager.
filteringFields: { text: String, value: String } Input Variable that indicates which column is being filtered.
getAllData: function(DataRequest) Output Function that emits a callback by passing as an object an object of the DataRequest type

For the DOM it is recommended to follow the format indicated below:

<div class="container">
   <div class="col-12 title form-title-pm">
       Your Title
     </div>
   <app-data-table [rowItems]="rowItems" [rowSettings]="rowSettings" [showFilter]="true" [showPagination]="true" [filteringFields]='filteringFields' (getAllData)="getAllData($event)"></app-data-table>
</div>

The generic table component is located at: /shared/data-table

Clone this wiki locally