laravel-inertia-element-ui-crud-vue3/docs/list.md

Laravel CRUD view library for Element-UI (Vue3)

# Laravel InertiaJs Element-UI CURD

## List page

### List page with search

```html
<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { ElCrudList } from "laravel-inertia-element-ui-crud-vue3";
import { ElMessage } from 'element-plus'
import { onMounted, onUpdated, ref } from "vue";
import { Inertia } from '@inertiajs/inertia'

const props = defineProps({
    errors: {
        type: Object,
        default: () => {
            return {};
        }
    },
    searched: String,
    success: String,
    error: String,
    sort_by: String,
    sort_order: String,
    flash: {
        type: Object,
        default: () => {
            return {};
        }
    }
})
const columns = [
    {
        "name": "id",
        "title": "#Id",
        "sortable": true,
        "width": "80px"
    },
    {
        "name": "name",
        "title": "Name",
        "sortable": true
    },
    {
        "name": "email",
        "title": "Email",
        "sortable": true
    }
    {
        "name": "status",
        "title": "Status",
        "sortable": true,
        "type": "status"
    }
];

const records = ref({
    data: [{
        id: 1,
        name: 'John Doe',
        email: 'john.doe@example.com'
    }, {
        id: 2,
        name: 'John Doe 2',
        email: 'john.doe2@example.com'
    }, {
        id: 3,
        name: 'John Doe 3',
        email: 'john.doe3@example.com'
    }],
    current_page: 1,
    from: 1,
    last_page: 3,
    per_page: 10,
    to: 10,
    total: 30
});

// OR
/*const records = ref({
    data: [{
        id: 1,
        name: 'John Doe',
        email: 'john.doe@example.com'
    }, {
        id: 2,
        name: 'John Doe 2',
        email: 'john.doe2@example.com'
        registered_at: '2021-01-01 00:00:00'
    }, {
        id: 3,
        name: 'John Doe 3',
        email: 'john.doe3@example.com',
        registered_at: '2021-01-01 00:00:00'
    }],
    meta: {
        current_page: 1,
        from: 1,
        last_page: 3,
        per_page: 10,
        to: 10,
        total: 30
    }
});*/

onMounted(() => {
    handleNotifications();
});

onUpdated(() => {
    handleNotifications();
});

function handleNotifications(){
    if(props.success){
        ElMessage({
            showClose: true,
            message: props.success,
            type: 'success'
        });
    }
    if(props.error){
        ElMessage({
            showClose: true,
            message: props.error,
            type: 'error'
        });
    }

    if(props.flash && props.flash.message){
        ElMessage({
            showClose: true,
            message: props.flash.message,
        });
    }
}

function create(){
    Inertia.get(route('users.create'));
}
</script>

<template>
    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Users
                <el-button class="float-right" size="small" @click="create">Add</el-button>
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <el-crud-list :records="records"
                        :isSearch="true"
                        :isEdit="true"
                        :isDelete="true"
                        :sort="{field: sort_by, order: sort_order}"
                        :searchText="searched"
                        :indexRoute="'users.index'"
                        :updateRoute="'users.edit'"
                        :deleteRoute="'users.destroy'"
                        :action-width="'80px'"
                        :columns="columns"
                    >
                    </el-crud-list>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>
```


### List page with column filter

```html
<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { ElCrudList } from "laravel-inertia-element-ui-crud-vue3";
import { ref } from "vue";

const props = defineProps({
    errors: {
        type: Object,
        default: () => {
            return {};
        }
    },
    searched: String,
    success: String,
    error: String,
    sort_by: String,
    sort_order: String,
    flash: {
        type: Object,
        default: () => {
            return {};
        }
    }
})
const columns = [
    {
        "name": "id",
        "title": "#Id",
        "sortable": true,
        "width": "80px"
    },
    {
        "name": "name",
        "title": "Name",
        "sortable": true
    },
    {
        "name": "email",
        "title": "Email",
        "sortable": true
    }
    {
        "name": "registered_at",
        "title": "Registered At",
        "sortable": true
    }
];

const records = ref({
    data: [{
        id: 1,
        name: 'John Doe',
        email: 'john.doe@example.com'
    }, {
        id: 2,
        name: 'John Doe 2',
        email: 'john.doe2@example.com'
        registered_at: '2021-01-01 00:00:00'
    }, {
        id: 3,
        name: 'John Doe 3',
        email: 'john.doe3@example.com',
        registered_at: '2021-01-01 00:00:00'
    }],
    current_page: 1,
    from: 1,
    last_page: 3,
    per_page: 10,
    to: 10,
    total: 30
});

const filters = ref([{
    'property': 'date',
    'label' : 'Date',
    'type': 'date',
    'value': '2021-01-01'
}, {
    'property': 'id',
    'label' : 'User Id',
    'type': 'text',
    'value': ''
}, {
    'property': 'email',
    'label' : 'User Email',
    'type': 'text',
    'value': ''
}]);
</script>

<template>
    <BreezeAuthenticatedLayout>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <el-crud-list :records="records"
                        :filters="filters"
                        :sort="{field: sort_by, order: sort_order}"
                        :indexRoute="'users.index'"
                        :updateRoute="'users.edit'"
                        :deleteRoute="'users.destroy'"
                        :action-width="'80px'"
                        :columns="columns"
                    >
                        <!-- Customed Email Filter -->
                        <template #filter_email="{entity}"> 
                            <el-form-item label="Custom Email">
                                <el-input v-model="entity.email" placeholder="Email"></el-input>
                            </el-form-item>
                        </template>
                    </el-crud-list>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>
```