README

vamtiger-user-registry

A webcomponent for viewing, adding and deleting users from a generalised registry.

Installation

<script src="https://cdn.jsdelivr.net/npm/vamtiger-user-registry@latest/build/vamtiger-user-registry.js">

Usage

<vamtiger-user-registry>
    data-get-users-url="/api/get-users"
    data-get-user-url="/api/get-user"
    data-add-new-user-url="/api/add-new-user"
    data-delete-user-url="/api/delete-user"
</vamtiger-user-registry>

Attribute	Method	Description
data-get-users-url	GET	Enpoint returning a paginted list of users
data-get-user-url	GET	Endpoint returning a single user record
data-add-new-user-url	POST	Enpoint for adding a new user record
data-delete-user-url	DELETE	Enpoint for removing a user record

data-get-users-url

An endpoint returning a paginated list of users.

interface IGetUsersResponse extends IResponseBase {
    data: {
        users: {
            next_page_url: string;
            data: IUser[]
        }
    }
}

interface IResponseBase {
    result: 'successful' | 'failed' | 'error';
    message: string;
}

interface IUser {
    id: number;
    name: string;
    surname: string;
    email: string;
    position: string;
}

data-get-user-url

An endpoint return a user record.

interface IGetUserSuccessResponse extends IResponseBase {
    result: 'successful',
    message: 'retrieved user(s)',
    data: {
        user: IUser
    }
}

interface IGetUserFailedResponse extends IResponseBase {
    result: "failed",
    message: "retrieved user(s) failed",
    data: {
        user: number;
    }
}

data-add-new-user-url

An enpoint for creating a new user record.

interface IAddNewUserSuccessRequestBody extends IUser{}

interface IAddNewUserSuccessResponse extends IResponseBase {
    result: 'successful';
    message: 'added new user',
    data: {
        user: number
    }
}

interface IAddNewUserFailedResponse extends IResponseBase {
    result: 'failed';
    message: 'failed to add new user',
    data: {
        [key: string]: {
            error: string;
            errorDescription?: string;
        }[]
    }
}

data-delete-user-url

An endpoint for removing a user record. e.g.some/url/${user_id}

interface IDeleteUserResponse extends IResponseBase {
    data: {
        user: number;
        delete: number;
    }
}

Test Mode

The custom element can also be rendered in test mode to toggle layout markers.

<vamtiger-user-registry>
    data-test-mode
</vamtiger-user-registry>

Demo

Angular Compatibility

Custom elements integrate fairly easily with Angular. To enable support, update app.module.ts:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
    ...,
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});

Create a placeholder component:

ng generate component vamtiger-user-registry

Define the required url properties for the newly created component, vamtiger-user-registry.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-vamtiger-user-registry',
  templateUrl: './vamtiger-user-registry.component.html',
  styleUrls: ['./vamtiger-user-registry.component.css']
})
export class VamtigerUserRegistryComponent implements OnInit {
  getUsersUrl = 'api/get-users';
  getUserUrl = 'api/get-user';
  addNewUserUrl = 'api/add-new-user';
  deleteUserUrl = 'api/delete-user';
  headerImageurl = 'https://some/heade/image/url';

  constructor() { }

  ngOnInit(): void {
  }

}

Reference vamtiger-user-registry in the component template (i.e. vamtiger-user-registry.component.html):

<vamtiger-user-registry
[attr.data-get-users-url]="getUsersUrl"
[attr.data-get-user-url]="getUserUrl"
[attr.add-new-user-url]="addNewUserUrl"
[attr.delete-user-url]="deleteUserUrl"
[slot]=""
>
    <img slot="header-image" [src]="headerImageurl">
    <div slot="header-caption">
        Vamtiger User Registry Angular
    </div>
</vamtiger-user-registry>

React Compatibility

Custom Elements can also be used with React:

class VamtigerUserRegistryReact extends React.Component {
    readonly vamtigerUserRegistry: React.RefObject<VamtigerUserRegistry>;

    constructor(props: any) {
        super(props);

        this.vamtigerUserRegistry = React.createRef();

        this.state = {
            data: {
                'data-test-mode': true,
                'data-get-users-url': '/api/get-users'
                'data-get-user-url': '/api/get-user',
                'add-new-user-url': '/api/add-new-user',
                'delete-user-url': '/api/delete-user'
            },
            headerImageUrl: 'https://some/heade/image/url'
        }
    }

    render() {
        const { data, headerImageurl } = this.state;

        return (
            <vamtiger-user-registry
                ref={this.vamtigerUserRegistry}
                {...data}
            >
                <img slot="header-image" src={headerImageurl}>
            </vamtiger-user-registry>
        );
    }
}

const container = document.createElement('div');
container.id = 'vamtiger-user-registry-react';
document.body.appendChild(container);

ReactDOM.render(
    <VamtigerUserRegistryReact />,
    container
);

Example Backend API

Usage no npm install needed!