willaengine/resources/js/views/Website/Management.vue

<template>
    <div class="container_fluid">
        <PageTitle TitleFa=" مدیریت وبسایت " TitleEn=" Website Management " Color="green darken-3" TitleFaClass="WM-Color-Black"></PageTitle>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs WM-Margin-T-20" id="WMTabs">
            <template v-for="(Tab, index) in Tabs">
                <component :is="Tab.Type" :TitleFa="Tab.NameFa" :TitleEn="Tab.NameEn" :Status="Tab.Status" :SubItems="Tab.SubItems" :TabContent="index" Color="Green"></component>
            </template>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane container-fluid active" id="MembersClub">
                <PartTitle class="WM-Margin-T-20" TitleFa=" باشگاه مشتریان " TitleEn=" Members Club " Color="green darken-3"></PartTitle>
                <div class="row WM-Margin-T-20">
                    <v-flex xs12 sm4 md3>
                        <v-text-field label=" نام کاربر " color="green darken-3" prepend-icon="fas fa-user"></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm4 md3>
                        <v-menu :close-on-content-click="false" v-model="DateFilterBefore" :nudge-right="40" lazy transition="slide-y-transition" offset-y full-width min-width="290px">
                            <v-text-field slot="activator" v-model="date" label=" تاریخ عضویت قبل از تاریخ " prepend-icon="fas fa-calendar-alt" color="green darken-3" readonly></v-text-field>
                            <v-date-picker v-model="date" @input="DateFilterBefore = false" color="green darken-3" locale="fa-ir"></v-date-picker>
                        </v-menu>
                    </v-flex>
                    <v-flex xs12 sm4 md3>
                        <v-menu :close-on-content-click="false" v-model="DateFilterAfter" :nudge-right="40" lazy transition="slide-y-transition" offset-y full-width min-width="290px">
                            <v-text-field slot="activator" v-model="date" label="  تاریخ عضویت بعد از تاریخ " prepend-icon="fas fa-calendar-alt" color="green darken-3" readonly></v-text-field>
                            <v-date-picker v-model="date" @input="DateFilterAfter = false" color="green darken-3" locale="fa-ir"></v-date-picker>
                        </v-menu>
                    </v-flex>
                    <v-flex xs12 sm4 md3>
                        <ButtonShodowed BtnClass="WM-Btn-Green" Icon="filter" Text=" فیلتر "></ButtonShodowed>
                    </v-flex>
                </div>
                <table class="table table-striped WM-Margin-T-20 WM-Align-R RTL">
                    <thead>
                        <tr>
                            <th style="width:5%">#</th>
                            <th style="width:20%"> نام و نام خانوادگی </th>
                            <th style="width:20%"> شماره تماس / ایمیل </th>
                            <th style="width:55%" class="WM-Align-C"> ابزارها </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(User, index) in Users">
                            <td> {{ index }} </td>
                            <td> {{ User.Name }} </td>
                            <td class="WM-Align-L">
                                <div v-if="User.Email"> {{ User.Email }} </div>
                                <div v-if="User.CellNumber"> {{ User.CellNumber }} </div>
                            </td>
                            <td class="WM-Align-C">
                                <ButtonShodowed @click.native="$store.state.UserDetail = true" BtnClass="WM-Btn-Cyan WM-Btn-SM" Icon="info"></ButtonShodowed>
                                <ButtonShodowed @click.native="$store.state.UserRoles = true" BtnClass="WM-Btn-Black WM-Btn-SM" Icon="sliders"></ButtonShodowed>
                                <ButtonShodowed @click.native="$store.state.SendEmail = true" BtnClass="WM-Btn-Purple WM-Btn-SM" Icon="mail"></ButtonShodowed>
                                <ButtonShodowed @click.native="$store.state.SendSMS = true" BtnClass="WM-Btn-Orange WM-Btn-SM" Icon="message-text-outline"></ButtonShodowed>
                                <ButtonShodowed BtnClass="WM-Btn-Red WM-Btn-SM" Icon="trash"></ButtonShodowed>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-pane container fade" id="SpecialForms">...</div>
            <div class="tab-pane container fade" id="Reservation">...</div>
        </div>

        <template>
            <div class="text-xs-center ">
                <UserDetailsModal></UserDetailsModal>
                <UserRolesModal></UserRolesModal>
                <SendEmailModal></SendEmailModal>
                <SendSMSModal></SendSMSModal>
            </div>
        </template>



    </div>


</template>



<script>
import TabItem from "../../components/Misc/TabItem.vue";
import TabDropdownItem from "../../components/Misc/TabDropdownItem.vue";

import UserDetailsModal from "../../components/Modals/UserDetailsModal.vue";
import UserRolesModal from "../../components/Modals/UserRolesModal.vue";
import SendEmailModal from "../../components/Modals/SendEmailModal.vue";
import SendSMSModal from "../../components/Modals/SendSMSModal.vue";


export default {
    components: {
        TabItem,
        TabDropdownItem,
        UserDetailsModal,
        UserRolesModal,
        SendEmailModal,
        SendSMSModal
    },
    data: function ()  {
        return {
            date: new Date().toISOString().substr(0, 10),
            DateFilterAfter: false,
            DateFilterBefore: false,
            Tabs: {
                MembersClub: {
                    Type: 'TabItem',
                    NameFa: ' باشگاه مشتریان ',
                    NameEn: 'Members Club',
                    Status: 'Active',
                },
                SpecialForms: {
                    Type: 'TabDropdownItem',
                    NameFa: ' فرم های خاص من ',
                    NameEn: 'My Special Forms',
                    SubItems: {
                        Item1: { NameFa: ' فرم تماس با ما ', NameEn: 'Contact Us' },
                        Item2: { NameFa: ' فرم پیش ثبت نام من ', NameEn: 'My Pre SignUp Form' }
                    }
                },
                Reservation: {
                    Type: 'TabItem',
                    NameFa: ' رزرو وقت ',
                    NameEn: 'Reservation',
                },
            },


            Users: {
                1: { Name: ' علیرضا حسنی ', Email: 'Alireza-Hassani@outlook.com', CellNumber: '09127004945' },
                4: { Name: ' فرید ساروی ', CellNumber: '09127476990' },
                27:{ Name: ' سعید خاکبازان ', CellNumber: '09336541236' },
            },
        }
    }
};


</script>