co-admin-view

v5.6.11

Published

8 months ago

## Install

0High
0Medium
0Low

riochr17

Co Admin View

Install

yarn add co-admin-view

npm install --save co-admin-view

How to Use

General Table

Table Search & Filter

Form Data

Usage Example

// lokasi import css mungkin berbeda-beda tergantung framework yang digunakan
// pada NextJS, tambahkan import css di _app.tsx
// pada Create React App tambahkan di file yang sama
import 'co-admin-view/dist/index.css'

import { CAInput, CAPage } from "co-admin-view";

export function Minimal() {
  const table: CAInput.TableStructure = {
    title: 'List Order Data X',
    columns: [
      'id:ID',
      'nama:Nama',
      'email:Email',
      'phone_number:Nomor HP',
      'type:Jenis',
      'tanggal_lahir:Tgl. Lahir',
      'alamat:Alamat'
    ],
    column_key: 'id',
    urls: {
      get_url: 'http://localhost:3000/users'
    }
  };

  return (
    <CAPage
      title={'Users'}
      table={table} />
  );
}

import 'co-admin-view/dist/index.css'

import { CAInput, CAPage } from "co-admin-view";

export function Preview() {
  const table: CAInput.TableStructure = {

    // General
    title: 'List Order Data X',
    columns: [
      'id:ID',
      'nama:Nama',
      'email:Email',
      'phone_number:Nomor HP',
      'type:Jenis',
      'tanggal_lahir:Tgl. Lahir',
      'alamat:Alamat'
    ],
    column_key: 'id',
    urls: {
      get_url: 'http://localhost:3000/users',
      delete_url: 'http://localhost:3000/user'
    },

    // Search & Filter
    search_query_key: 'q',
    filters: [
      'freetext:nama:Nama Lengkap',
      'select:type:User Type',
      'select:fb:F-B'
    ],
    filter_options_data_source: [
      'type,fb@http://localhost:3000/user/types'
    ],

    // Advanced Features
    request_init: {
      get: {
        headers: {
          'Authorization': 'Bearer XYZ'
        }
      }
    },
    custom_view: {
      nama(value: string) {
        return (
          <div style={{ color: 'red', fontWeight: 'bold' }}>{ value }</div>
        );
      },
      type(value: string) {
        return (
          <div style={{ display: 'flex' }}>
            <div 
              style={{
                borderRadius: 8,
                padding: '6px 12px',
                background: '#AAA',
                color: 'white'
              }}>
              { value }
            </div>
          </div>
        );
      }
    }
  };

  const form: CAInput.FormStructure = {
    
    // General
    title: 'User Data',
    items: [
      'Section A',
      'INPUT-TEXT:nama:nama:Nama',
      [
        'INPUT-TEXT:email:email:Email',
        'INPUT-TEXT:phone_number:phone_number:Nomor HP',
      ],
      [
        'SELECT:type:type:Jenis',
        'INPUT-TEXT:tanggal_lahir:tanggal_lahir:Tanggal Lahir (YYYY-MM-DD)',
      ],
      'TEXTAREA:alamat:alamat:Alamat',
      'INPUT-NUMBER:n:n:N',
    ],
    options_data_source: [
      'type@http://localhost:3000/user/types'
    ],
    urls: {
      get_detail_url: 'http://localhost:3000/user',
      create_new_url: 'http://localhost:3000/user',
      update_data_url: 'http://localhost:3000/user'
    },

    // Advanced Features
    custom_view: {
      alamat(value: string, setValue: (value: string) => void) {
        return (
          <textarea
            style={{ outline: 'none' }}
            value={value}
            onChange={e => setValue(e.target.value)} />
        );
      }
    },
    allow_anonymous_data_key: true
  };

  return (
    <CAPage
      title={'Orders Data'}
      table={table}
      form={form} />
  );
}

API Specification

Table GET

Request

Query

Basic

limit number (required)
offset number (required)

<search query key> string (optional). Look at Table Search & Filter diagram above

Filters

<filter key 1> string (optional). Look at Table Search & Filter diagram above
<filter key 2> string (optional). Look at Table Search & Filter diagram above
<filter key N> string (optional). Look at Table Search & Filter diagram above

Response

total number
data array of object. Object must be at least contains all keys from columns specifications. Look at General Table diagram above.

Example

URL http://localhost:3000/users

Request

curl -X GET 'http://localhost:3000/users?limit=10&offset=0&q=Andi&nama=&type=Regular'

Response

{
  "total": 4,
  "data": [
    {
      "id": 16,
      "email": "[email protected]",
      "phone_number": "08121111111",
      "nama": "Andi",
      "type": "Regular",
      "tanggal_lahir": "2020-01-09T17:00:00.000Z",
      "alamat": "Bandung 999",
      "created_at": "2025-03-20T23:45:33.444Z"
    },
    ...
  ]
}

Table DELETE

Request

Query

keys string (required). String contains array of <column key> with comma separated value. Look at Table General Table diagram above

Response

Any response is accepted as long as returned HTTP code 200 (OK)

Example

URL http://localhost:3000/user

Request

curl -X DELETE 'http://localhost:3000/user?keys=16,18,20'

Response

true

Form GET Detail Data

Request

Query

key string (required). Key is extracted from selected row on table with data key of <column key> (see table specifications).

Response

Object where at least contains all keys from columns specifications. Look at General Table diagram above.

Example

URL http://localhost:3000/user

Request

curl -X GET 'http://localhost:3000/user?key=16'

Response

{
  "id": 16,
  "email": "[email protected]",
  "phone_number": "08121111111",
  "nama": "Andi",
  "type": "Regular",
  "tanggal_lahir": "2020-01-09T17:00:00.000Z",
  "alamat": "Bandung 999",
  "created_at": "2025-03-20T23:45:33.444Z"
}

Form POST Create Data

Request

Headers

Content-Type → application/json

Body

<column key 1> string/number/boolean/object (required). Key is defined on form data <items> specification. Look at Form Data diagram above.
<column key 2> string/number/boolean/object (required). Key is defined on form data <items> specification. Look at Form Data diagram above.
<column key N> string/number/boolean/object (required). Key is defined on form data <items> specification. Look at Form Data diagram above.

Response

Any response is accepted as long as returned HTTP code 200 (OK)

Example

URL http://localhost:3000/user

Request

curl -X POST 'http://localhost:3000/user' \
  -H 'Content-Type: application/json' \
  --data-raw '{"nama":"Didi","email":"[email protected]","phone_number":"081233","type":"VIP","tanggal_lahir":"2020-02-02","alamat":"test"}'

Response

{
  "id": 22,
  "email": "[email protected]",
  "phone_number": "081233",
  "nama": "Didi",
  "type": "VIP",
  "tanggal_lahir": "2020-01-09T17:00:00.000Z",
  "alamat": "test",
  "created_at": "2025-03-20T23:45:33.444Z"
}

Form PUT Update Data

Request

Headers

Content-Type → application/json

Query

key string (required). Key is extracted from selected row on table with data key of <column key> (see table specifications).

Body

<column key 1> string/number/boolean/object (required). Key is defined on form data <items> specification. Look at Form Data diagram above.
<column key 2> string/number/boolean/object (required). Key is defined on form data <items> specification. Look at Form Data diagram above.
<column key N> string/number/boolean/object (required). Key is defined on form data <items> specification. Look at Form Data diagram above.

Response

Any response is accepted as long as returned HTTP code 200 (OK)

Example

URL http://localhost:3000/user

Request

curl -X PUT 'http://localhost:3000/user?key=22' \
  -H 'Content-Type: application/json' \
  --data-raw '{"nama":"Dedi","email":"[email protected]","phone_number":"081233","type":"VIP","tanggal_lahir":"2020-02-02","alamat":"Jalan Jakarta"}'

Response

{
  "id": 22,
  "email": "[email protected]",
  "phone_number": "081233",
  "nama": "Dedi",
  "type": "VIP",
  "tanggal_lahir": "2020-01-09T17:00:00.000Z",
  "alamat": "Jalan Jakarta",
  "created_at": "2025-03-20T23:45:33.444Z"
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Co Admin View

Install

How to Use

General Table

Table Search & Filter

Form Data

Usage Example

API Specification

Table GET

Request

Query

Response

Example

Table DELETE

Request

Query

Response

Example

Form GET Detail Data

Request

Query

Response

Example

Form POST Create Data

Request

Headers

Body

Response

Example

Form PUT Update Data

Request

Headers

Query

Body

Response

Example