@veeqo/custom-views

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

Usage

In your route:

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

const CustomViewsContext = CustomViewsProviderFactory({
  customViewModelType,
  postMode,
  apiHandlers,
  fixedViews,
});

ReactDOM.renderer(
  <CustomViewsContext>
    <MyAwesomeApp />
  </CustomViewsContext>,
  document.getElementById('root'),
);

In your components directory

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

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

export default ViewsComponent;

Views here is the component, that implement Views from veeqo/components with TabsStore. You can also make it by yourself:

import { observer } from 'mobx-react';
import { useCustomViewsStore } from '@veeqo/custom-views';

const { Views } = VeeqoUI;

const ViewsComponent = observer((props) => (
  {...viewsProps}
));

export default ViewsComponent;

Props

Custom Views provider factory

Name	Type	Description
customViewModelType	string	Describes your current route. Can be used in apiHandlers functions
postMode	api | localStorage	Describes where is saved custom tabs should be located
fixedViews	{ key: string, label: string, type: 'fixed' }[]

Api Handlers props

Name	Type	Description
fetch	({ type: string }, user: 'user') => (Promise({ data: { key: number | string, id: string | number, label: string, count?: number, default?: boolean, editable: boolean, filters: any[], user: any }[]))	filters and user here can be everything because it's not use in Custom Views
post	({ type: 'custom_view', attributes: { title: string, type: 'draft', filters: any[] }) => (Promise({ data: { id: string | number } }))	Post occurs only when new View was saved
patch	({ type: 'custom_view', id: string | number, attributes: { title: string, type: 'saved', filters: any[] } }) => void	Post occurs only when saved View changes
delete	(viewId: string | number) => void

Custom Views props

Name	Type	Description
includedFilters	{ label: string, text: string | string[] }	Array of changed filters. Shows when you create new custom view
hasUnsavedChanges	boolean	Used to understand is something was changed when saved View is active It's used to show the bottom pill about unsaved changes
handleChangeActiveTab	(viewId: string | number) => void
handleDiscardUnsavedChanges	() => void	Fires when the user click Discard changes button in bottom pill
handleCreateCreateCustomView	() => void	Fires when the user create new view via the button with plus icon You should reset all filters to default on this event

Views Props

Name	Type	Description
tabs	{ key: number | string, label: string, type: 'fixed' | 'draft | 'saved, count: number }[]	Should include all tabs (fixed too)
fixedTabs	{ key: number, label: string, type: 'fixed' | 'draft | 'saved', count: number }[]	Used to show fixed tabs separately from custom tabs in Reorder component
customTabs	{ key: number | string, label: string }[]	Used to show custom tabs separately from fixed tabs in Reorder component
activeTabKey	number | string
includedFilters	{ label: string, text: string | string }[]	Array of changed filters. Shows when you create new custom view
hasUnsavedChanges	boolean	Used to understand is something was changed when saved View is active It's used to show the bottom pill about unsaved changes
isLoading	boolean	Shows Spinner if variable is true and disable create custom view button
onSave	(viewId: number | string, viewName: string) => void
onDelete	(viewId: number | string) => void
handleDuplicateTab	(viewId: number | string) => void	Should create new tab from selected one but with draft type
handleChangeActiveTab	(viewId: number | string) => void
handleCreateCustomView	(viewId: number | string) => void	Fires when user click on button with plus icon
handleSetCustomTab	(treeData: { key: number, label: string, type: 'fixed' | 'draft | 'saved', count: number }[]) => void	Fires when order of custom tabs is changed in Reorder component
handleDiscardUnsavedChanges	() => void	Fires when the user click Discard changes button in bottom pill
handleSaveToCurrentView	(viewId: number | string) => void	Fires when the user click Save to current view in bottom pill Should only save current filters