@tripup-company/element-ui-extended NPM

Element-ui-extended

Install

# using in your project
npm i @tripup-company/element-ui-extended

Features

Create the table with filters and pagination (CompositeTable)
Use directly components:
- CompositeTable
- EditableField
- GenericFilter
- GenericTable
- GeneticPaginator
- NewField
- PartColumnEdit
- PartColumnNew
- PartForm
- QuickSearchFilter

Usage

CompositeTable

CompositeTable is component that combine such components GenericTable, GenericFilters, GenericTopFilters

CompositeTable diagram

CompositeTable docs

<composite-table :storage-key="key" :fields="fields" :top-filter="topFilter" :filters="filters" :repository="$api.countries()" />

import config from '../settings/config';
import { CompositeTable } from '@tripup-company/element-ui-extended';
export default {
  components: { CompositeTable },
  data () {
    return {
      fields: config.tableFields(this.$router),
      filters: config.filters,
      key: 'storage.key',
      topFilter: {
        name: 'first_name,last_name,email,phone,mobile,position,street,city,state,second_email,department',
        label: 'Search',
        type: 'string',
        operator: 'like_fields',
      }
    };
  }
}

config.js

export default {
  tableFields: ($router) => 
  [
    {
      prop: 'id',
      label: '#',
      width: 70,
      callback: (field, index, row) => {
        $router.push('/cruises/edit/' + row.id);
      },
    },
    {
      prop: 'ship.data.ship', label: 'Ship', callback: (field, index, row) => {
        $router.push('/cruises/edit/' + row.id);
      },
      formatter: row => {
        return row.ship.data.ship;
      },
    },
  ],
  filters: [
    {
      name: 'created_at',
      label: 'Created at',
      type: 'date',
      operator: 'between_date',
    },
    {
      name: 'country',
      label: 'Country',
      type: 'string',
    },
  ]
}

EditableField

NewField, EditableField- components that combine such components of element io: el-checkbox, el-input-number, el-select, el-date-picker, el-input

These components are quickly configurable through the config and are needed to shorten the code, we can render elements use loop

EditableField docs

<editable-field
    v-model="data[prop]"
    :type="'select'"
    :select-list="selectList"
    :select-multiple="selectMultiple"
    :select-key="'value'"
    :select-label="'name'
    :select-value="'value'"
    :field="prop"
    :remote-method="remoteMethod"
    :filterable="filterable"
    @editable:save="updateValue"
/>

GenericFilter

GenericFilter - component for work with filter ( template with checkbox for use selected filters)

GenericFilter docs

<generic-filter
  v-if="filters.length"
  :filters="filters"
  :search="search"
  @apply:filter="handleApplyFilter"
  @reset:filter="handleResetFilter"
/>

PartColumn is component that show part of form with it title and configured column resolution

This component is wrapper for column it need for quick create part of form and transfer errors from backend to form elements

 <part-column
    :data="form.partner"
    :fields="partnerConfig.commissionFields"
    :prop-prefix="'partner.'"
    :errors="errors"
    @save="partnerUpdateValue"
/>

Attributes

Attribute name	Description	Type	Accepted values	Default
col-resolution	col resolution for this column	Object	—	{xl: 24, lg: 24, md: 24, sm: 24, xs: 24}
col-inner-resolution	col resolution for current field	Object	—	{xl: 24, lg: 24, md: 24, sm: 24, xs: 24}
column-name	column label (title)	String	—	''
prop-prefix	prefix for all fields in column	String	—	''
fields	fields array	Array	—	[]
data	data biding values for fields	Object	—	{}
errors	errors for fields	Object	—	{}

Attributes

Attribute name	Description	Type	Default
filters	all filters for show	Array	[]
search	selected filters	Array	[]

Example filters:

[
    {
        name: 'state',
        label: 'State',
        type: 'string',
    },
    {
        name: 'created_at',
        label: 'Created at',
        type: 'date',
        operator: 'between_date',
    }
]

Example search:

{
    title: {
        title: Object
        operator: ""
        value: ""
    },
    first_name: {
        operator: "like_fields"
        value: ""
    }
}