Giter VIP home page Giter VIP logo

cnfs.ts's Introduction

Cnfs

Tool

This project was generated using Nx.

Build for production

yarn build --prod

Output assets are in dist/apps/dashboard

Serve for development

yarn start

By default app is served on http://localhost:4200.

CI

Each pull request to master runs the following checks using github actions:

  • Unit tests: yarn affected:test --base=origin/master
  • Lint: yarn affected:lint --base=origin/master
  • Build: yarn affected:build --base=origin/master

Deploy

Currently it is deployed to https://rails-on-services.github.io/cnfs.ts/ using

yarn nx deploy

Contribute

Adding a new json-api data-object support.

  • Define dto making the split between the attributes that are computed (createdAt and updatedAt) vs the attribuets that are updated directly through the api. (e.g libs/iam/src/lib/models/group.dto.ts)

  • Declare and add to module a generic implementation

export abstract class IGroupsService extends ICRUDService<
  GroupDto,
  GroupAttributesDto
> {}

export class GroupsService extends GenericService<GroupDto, GroupAttributesDto>
  implements IGroupsService {
  public constructor(@Inject(BASE_URL) basePath: string, http: HttpClient) {
    super(basePath, TYPE, http);
  }
}

//in module:
{provide:IGroupsService, useClass: GroupsService}
  • Optionnaly there is also a generic mock implementation of the service:
export class GroupsService
  extends MockGenericService<GroupDto, GroupAttributesDto>
  implements IGroupsService {
  public constructor() {
    super(groups, TYPE);
  }
}

Using a crud endpoint data in a list view

  • Define an ITableService using the GenericAdapter implementation (eg. libs/iam/src/lib/services/groups.adapter.ts) and declare it in modules.

  • In your component define a CustomDataSource

  public dataSource: CustomDataSource<IGroup>;

  constructor(usersAdapter: GroupsAdapter) {
    this.dataSource = new CustomDataSource(groupsAdapter);
  }
  • Use the paginator and loader objects
<cnfs-loader [dataSource]="dataSource"></cnfs-loader>
<cnfs-paginator [dataSource]="dataSource"></cnfs-paginator>
  • Optionnaly, link the datasource with the sort object
<table mat-table [dataSource]="dataSource" matSort>
  <!-- ... -->
</table>
  @ViewChild(MatSort) public sort: MatSort;

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
  }
  • Optionally, link the dataSource with a filter form. The form control keys should be matching the data column keys.
    public filter: FormGroup;

    this.dataSource.filter$ = this.filter.valueChanges;

cnfs.ts's People

Contributors

jihoun avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.