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