CompanyTable.vue

<template>
    <div>
        <SortableTable :columns="columnsToShow" :items="items" itemKey="company_id">
            <template slot="col-photo-cell" slot-scope="{ item: { image } }">
                <td class="col-photo"><Avatar v-if="image" :src="image['60x60']" size="60px" rounded>{{ image.id }}</Avatar></td>
            </template>
            <template slot="col-name" slot-scope="{ item, item: { full_name, type } }">
                <div class="user-row__name">{{ full_name }}</div>
                <div class="user-row__role">{{ formatCompanyType(type) }}</div>
                <div class="user-row__role">{{ item.warehouses }}</div>
            </template>
            <template slot="col-owner" slot-scope="{ item: { master } }">
                <div v-if="master">
                    {{ master.last_name }} {{ master.middle_name }} {{ master.first_name }}
                </div>
                <div v-if="!master">
                </div>
            </template>
            <template slot="col-goods_qty" slot-scope="{ item: { productsCount } }">
                {{ productsCount }}
            </template>
            <template slot="col-created_at" slot-scope="{ item: { created_at } }">
                {{ formatDate(created_at) }}
            </template>
            <template slot="col-moderation_status" slot-scope="{ item }">
                <Label variant="info">{{ moderationStatus(item) }}</Label>
            </template>
            <template slot="col-changes" slot-scope="{ item }">
                <Label variant="info">список изменений</Label>
            </template>
            <template slot="col-blocked_at" slot-scope="{ item: { banned_at } }">
                {{ formatDate(banned_at) }}
            </template>
            <template slot="col-blocked_by" slot-scope="{ item: { banned_by } }">
                {{ banned_by }}
            </template>
        </SortableTable>
        <ItemPager :meta="pagerMeta"></ItemPager>
    </div>
</template>

<script>
import SortableTable from "~/components/Tables/SortableTable";
import ItemPager from "~/components/ItemPager/ItemPager";
import Label from "@/components/Common/Label";
import Icon from "@/components/Common/Icon";
import Avatar from '~/components/Common/Avatar'

import { formatCompanyType } from "~/helpers/company";

const STATUSES = {
    create: 'Первичная модерация',
    active: 'Активированный',
    update: 'Модерация изменений',
    delete: 'Удаленный',
    ban: 'Заблокированный'
}

export default {
    name: "CompanyTable",
    components: {Avatar, Label, Icon, ItemPager, SortableTable},
    props: ['pagerMeta', 'items', 'showColumns', 'modalState', 'softDelete'],
    data: function() {
        const self = this;
        return {
            columns: [
                {
                    id: 'photo',
                    name: 'Логотип',
                    style: '',
                    sortable: 'image',
                    click: self.cellClick
                },
                {
                    id: 'name',
                    name: 'Название компании',
                    style: '',
                    sortable: 'name',
                    click: self.cellClick
                },
                {
                    id: 'owner',
                    name: 'Владелец',
                    style: '',
                    sortable: 'owner',
                    click: self.cellClick
                },
                {
                    id: 'goods_qty',
                    name: 'Количество товара',
                    style: '',
                    sortable: 'goods_qty',
                    click: self.cellClick
                },
                {
                    id: 'changes',
                    name: 'Изменения',
                    style: '',
                    sortable: 'changes',
                    click: self.cellClick
                },
                {
                    id: 'created_at',
                    name: 'Дата регистрации',
                    style: '',
                    sortable: false,
                    click: self.cellClick
                },
                {
                    id: 'moderation_status',
                    name: 'Статус',
                    style: '',
                    sortable: false,
                    click: self.cellClick
                },
                {
                    id: 'blocked_at',
                    name: 'Дата блокировки',
                    style: '',
                    sortable: false,
                    click: self.cellClick
                },
                {
                    id: 'blocked_by',
                    name: 'Заблокировал',
                    style: '',
                    sortable: false,
                    click: self.cellClick
                },
                {
                    id: 'actions',
                    name: '',
                    style: '',
                    sortable: false,
                },
            ]
        }
    },
    async created(){
    },
    computed: {
        columnsToShow(){
            return this.showColumns.map(columnId => {
                return this.columns.find(column => column.id === columnId);
            })
        }
    },
    methods: {
        formatCompanyType,
        formatStatus(status){
            return STATUSES[status];
        },
        parseDate(apiDateString){
            if (!apiDateString){
                return null
            }
            return new Date(apiDateString.replace(' ', 'T'))
        },
        formatDate(apiDateString){
            const date = this.parseDate(apiDateString);
            if (!date){
                return ''
            }
            return date.toLocaleDateString('ru')
        },
        formatDatePlusInterval(apiDateString, period){
            return (new Date(this.parseDate(apiDateString).valueOf() + period * 1000)).toLocaleDateString('ru')
        },
        moderationStatus(item){
            return 'Ожидает модерации';
        },
        cellClick: function(company){
            this.$router.push({
                path: '/company/id/' + company.company_id
            })
        }
    }
}
</script>

<style scoped>
tr{
    border: 1px solid #dadee3;
}
td{
    padding: 0.5rem 0.625rem;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    height: 5rem;
}
div .col-photo{
    width: 100px;
}
button>svg{
    color: #9B9B9B;
    font-size: 1.5em;
}

</style>