willaengine/resources/js/components/Modals/UserRolesModal.vue

<template>
    <v-dialog v-model="$store.state.UserRoles" width="60%" transition="slide-x-transition">
        <v-card class="RTL">
            <v-card-title class=" grey lighten-3" primary-title>
                <PartTitle class="WM-Margin-T-20" TitleFa=" دسترسی های این کاربر " TitleEn=" Member's Roles "></PartTitle>
            </v-card-title>

            <v-card-text>
                <table class="table table-striped WM-Margin-T-20 WM-Align-R RTL">
                    <thead>
                        <tr>
                            <th style="width:25%"></th>
                            <th style="width:25%" class="WM-Color-Cyan"><i class="WMi-plus"></i> قابلیت ثبت </th>
                            <th style="width:25%" class="WM-Color-Orange"><i class="WMi-edit"></i> قابلیت ویرایش </th>
                            <th style="width:25%" class="WM-Color-Red"><i class="WMi-trash"></i> قابلیت حذف </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(Permission, index) in Permissions">
                            <td class="WM-Align-C">
                                <i class="WM-Font-36 WM-Float-R" :class="[Permission.Icon]"></i>
                                <!-- <div style="margin-top:-15px;"> {{ Permission.Name }} </div> -->
                                <div class="WM-Float-R WM-Margin-R-10">
                                    <h4 class="WM-Font-16"> {{ Permission.Name }} </h4>
                                    <h4 class="WM-Font-14"> {{ index }} </h4>
                                </div>
                            </td>
                            <td>
                                <Checkbox ItemText=" امکان افزودن آیتم " :ItemID="index+'Add'"></Checkbox>
                            </td>
                            <td class="WM-Align-L">
                                <Checkbox ItemText=" امکان ویرایش آیتم های متعلق به خود " :ItemID="index+'EditSelfOwned'"></Checkbox>
                                <Checkbox ItemText=" امکان ویرایش همه ی آیتم ها " :ItemID="index+'EditAll'"></Checkbox>
                            </td>
                            <td>
                                <Checkbox ItemText=" امکان ویرایش آیتم های متعلق به خود " :ItemID="index+'DeleteSelfOwned'"></Checkbox>
                                <Checkbox ItemText=" امکان ویرایش همه ی آیتم ها " :ItemID="index+'DeleteAll'"></Checkbox>
                            </td>
                        </tr>
                        <tr>
                            <td class="WM-Align-C">
                                <i class="WM-Font-36 WM-Float-R WMi-shop"></i>
                                <div class="WM-Float-R WM-Margin-R-10">
                                    <h4 class="WM-Font-16"> سفارشات </h4>
                                    <h4 class="WM-Font-14"> Orders </h4>
                                </div>
                            </td>
                            <td></td>
                            <td class="WM-Align-L">
                                <Checkbox ItemText=" مدیریت سفارشات " ItemID="OrdersManagement"></Checkbox>
                            </td>
                            <td></td>
                        </tr>

                        <tr>
                            <td class="WM-Align-C">
                                <i class="WM-Font-36 WM-Float-R WMi-globe"></i>
                                <div class="WM-Float-R WM-Margin-R-10">
                                    <h4 class="WM-Font-16"> وبسایت </h4>
                                    <h4 class="WM-Font-14"> Website </h4>
                                </div>
                            </td>
                            <td></td>
                            <td class="WM-Align-L">
                                <Checkbox ItemText=" ویرایش وبسایت " ItemID="WebsiteEdit"></Checkbox>
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="black" depressed dark @click="$store.state.UserRoles = false">
                    <v-icon dark right>fas fa-check</v-icon> ذخیره ی دسترسی ها
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
export default {
    props: {
        Color:     { default: 'grey darken-4' },
    },
    data: function ()  {
        return {
            Permissions: {
                'BusinessItem': { Name: ' کالاها و خدمات ', Icon: 'WMi-dropbox', Color: 'WM-Color-Red' },
                'News': { Name: ' اخبار ', Icon: 'WMi-rss', Color: 'WM-Color-Orange' },
                'Portfolio': { Name: ' نمونه کار ها ', Icon: 'WMi-picture', Color: 'WM-Color-Purple' },
            }

        }
    },
};
</script>