Custom Views

Implement Views from veeqo-components library

Installation

Using npm:

npm install @veeqo/components
npm install @veeqo/custom-views

Using yarn:

yarn add @veeqo/components
yarn add @veeqo/custom-views

Step by step Custom Views implementing to your project:

Step 1: Go to your root file where you call ReactDOM render

Step 2: Create fixedViews array

It's fixed views so the user can't delete them

Example of fixed views:

const fixedViews = [
  {
    id: 'default1',
    key: 'default1',
    label: 'First default',
    type: 'fixed',
  },
  {
    id: 'default1',
    key: 'default2',
    label: 'Second default',
    type: 'fixed',
  },
];

Also, you can provide some additional info:

• duplicatable. This prop control is Duplicate item visible in options. By default it's true
• filters. This prop can be any type you want, this is what you will get at some points when you need to change the saved filters

Example of fixed view with those props:

{
  id: 'default',
  key: 'default',
  label: 'Not duplicatable default',
  type: 'fixed',
  duplicatable: false,
  filters: {
    metric: 'units_sold',
    groupBy: 'by_variants',
  },
},

Step 3: Create apiHandlers object

Example of apiHandlers:

const apiHandlers = {
  fetch: (customViewModelType) => new Promise((resolve) => (
    fetchViews(customViewModelType)
      .then((result) => resolve({ data: result })))),
  post: (view) => new Promise((resolve) => (
    saveView(view, store.dispatch)
      .then(((result) => {
        resolve({
          data: {
            id: result.body.data.id,
          },
        });
      }))
  )),
  patch: (view) => {
    saveView(view);
    setFiltersToView(view.key, view.attributes.filters);
  },
  delete: (viewId) => deleteView(viewId),
};

This object should have 4 functions:

• fetch. Used when the store started initialization. Should be a Promise. Arguments:

1. customViewModelType, string. Name of your page, for example: inventory or sales

• persist. Used when view saved and its type was draft so you need to send this new view to server. Should be a Promise and resolve with id that you will get from the server. Arguments:

1. view, object. View with all attributes. Example:

{
  type: 'custom_view',
  key: 'l6PJGo-UKXeGJNFBFzCde',
  user: {
    userId: 'XOBDXR15v0mkOoNaYp24K',
  },
  attributes: {
    title: 'Some Draft Tab',
    type: 'sales',
    filters: {
      metric: 'units_sold',
      groupBy: 'by_variants',
    },
    editable: true,
    shared: true,
  },
}

• patch. Same as persist, but view already has saved type so you don't need to return Promise and resolve id, but you still should send changed view to server. Arguments are the same as in persist

• delete. Used when saved view deleted. Arguments:

1. viewId, string

Step 4: Create CustomViewsProviderFactory

This factory will create a store and pass the first data to it. Here you should use variables that you create in step 3 and step 4

Example:

const CustomViewsContextProvider = CustomViewsProviderFactory({
  customViewModelType: getLocation(),
  apiHandlers,
  fixedViews,
});

Step 5: Add provider to your ReactDOM render

Example:

ReactDOM.render(
  <Provider store={store}>
    <CustomViewsContextProvider>
      <App />
    </CustomViewsContextProvider>
  </Provider>,
  root,
);

Step 6: Create CustomViews component

Example:

import React from 'react';

import { CustomViews } from '@veeqo/custom-views';

const CustomViewsComponent = (props) => (
  <CustomViews {...props} />
);

export default CustomViewsComponent;

Step 7: Pass props to component

Props required for initialization

Those props you should get from user XHR, until you don't, pass null. You can't change those values inside store after initialization

| Name | Type | Description | |---------------------|------------------|-------------------------------------------------------------| | customViewPositions | string[] | null | Initialization doesn't start until you don't pass an array | | defaultViewId | string | null | Initialization doesn't start until you don't pass a string |

Props required for proper work

| Name | Type | Description | Example | |-------------------|-----------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------| | filters | any | This prop can be any type you want, this is what you will get at some points when you need to change the saved filters | | | includedFilters | { label: string, text: string }[] | Used to show filter values in edit/save dropdown | [{ label: 'filter name', text: 'filter values' }] | | hasUnsavedChanges | boolean | Used to understand should we should show unsaved changes pill. You need just to check the equality of your current filters and filters inside the current view | |

Optional props

| Name | Type | Description | Example | |--------------------------|---------|-------------------------------------------------------------------|---------| | user | any | Adds user info to view attributes | | | isLoading | boolean | | | | pageName | string | Adds page name to success notifications | 'sales' | | currentView | string | You should pass view key. Used to the manual set current view | | | isSortingDropdownEnabled | boolean | | |

Handlers

You should use those handlers to keep your store actual

| Name | Type | Description | |-----------------------------------------|----------------------------------------------------------------|-------------------------------------------------------------| | handleChangeActiveView | (key: string) => void | | | handleDiscardUnsavedChanges | () => void | | | handleCreateDraftView | (key: string) => void | Used when draft view created from plus button in controls | | handleCreateDraftViewWithCurrentFilters | (key: string) => void | Used when draft view created from unsaved changes pill | | handleDuplicateView | (key: string, newViewKey: string) => void | | | handleCustomViewPositionsChange | (viewPositions: string[], customViewModelType: string) => void | | | handleDefaultViewChange | (id: string, customViewModelType: string) => void | | | handleSaveView | (key: string, filters: any) => void | Used when draft view saved | | handleSaveToCurrentView | (key: string, filters: any) => void | |