GridList

Основной компонент для отображения списков. Состоит из трёх основных компонентов:

• GridFilterComponent
• GridCardComponent
• GridPaginationComponent

GridFilterComponent

Отвечает за фильтрацию данных в компоненте.

Props:

• filter

Фильтры собираются по модели переданной через props filter

{
    label: "№ Договора",
    type: "orders",
    filter_name: "contract.bank_number",
    filterType: "input",
    filterRules: "EQ",
    methodName: "getAllOrders",
    class: "col-4",
    notCollapsed: true,
}

• type - тип сущности, по которой происходит фильтрация
• filter_name - поле, по которому будет происходить фильтрация
• filterType - тип поля, которое будет отрисовано для фильтра
• methodName - метод обращения к api, который будет использоваться для запроса
• class - css-класс
• notCollapsed - свёрнут ли фильтр или нет

GridCardComponent

Отвечает за отрисовку данных в карточке списка.

Props:

• activeId
• entry
• tabs
• componentData
• noGutters"
• card-index
• loadCurrentItemFn

Вкладки собираются по модели переданной через props tabs.

 tabs: [
        {
            icon: (item) => {
                const statusColor = OrderStatusColorHelper(item?.status?.slug || "new");
                return {
                    border: `icon-border-wrap border-${statusColor.bg}`,
                    icon: `info-mask first-icon icn-${statusColor.bg}`,
                };
            },
            col: "5",
            items: [
                {
                    customClass: "status-border",
                    renderFunction: function (item) {
                        const statusColor = OrderStatusColorHelper(item?.status?.slug || "new");

                        return `<div class="status-border-bg ${statusColor.bg}"></div>`;
                    },
                },
                {
                    col: "4",
                    renderFunction: function (item) {
                        return `${item?.id}<span> ${moment(item?.created_at).format(
                            "DD.MM.YYYY в HH:mm"
                        )}</span>`;
                    },
                },

              
            ],
            component: "Order/OrderInfo",
        },
    ]

• icon - иконка, которая будет отрисована в шапке вкладки
• col - bootstrap класс для размера шапки вкладки
• items - элементы, которые будут отрисованы в шапке (например: доп информация о клиенте)
• renderFunction - функция, отвечающая за отрисовку элементов в шапке. Props item в данном случае, это props entry компонента
• component - компонент, который будет отрисован при раскрытии вкладки.

GridPaginationComponent

Отвечает за пагинацию. Основан на компоненте b-pagination-nav, поэтому всё пропсы и данные передаются солгасно документации Vue Bootstrap.