willaengine/resources/js/Common/components/Comment/Modal-Layout.vue

<!-- --------------------------------------------------------------------
                            task Timeline
-------------------------------------------------------------------- -->
<template>
    <v-dialog v-model="$store.state.Comments" width="90%" transition="slide-x-transition">
        <v-card class="RTL">
            <v-card-title class=" grey lighten-3" primary-title>
                <WM-PartTitle class="WM-Margin-T-20" TitleFa=" نظرات " TitleEn=" Comments " Color="black"></WM-PartTitle>
            </v-card-title>
            <v-card-text>
                <v-layout row wrap class="WM-Padding-RL-20">
                    <v-flex md11>
                        <v-card-text class="WM-JustSide">
                            <v-textarea name="input-7-1" label="لطفا متن کامنت خود را بنویسید" value="" hint="هر پیام 53 کاراکتر " color="black" prepend-icon="fas fa-comment-alt"></v-textarea>
                        </v-card-text>
                    </v-flex>
                    <v-flex md1 class="AddComment">
                        <v-btn fab color="black" dark><v-icon dark>fas fa-chevron-left</v-icon></v-btn>
                    </v-flex>
                </v-layout>
                <v-divider></v-divider>
                <v-data-iterator :items="comments" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" select-all row wrap rows-per-page-text="آیتم به ازای هر صفحه">
                    <template v-slot:item="props">
                        <wm-timeline-item :props="props"></wm-timeline-item>
                    </template>
                    <template v-slot:pageText="props">
                        آیتم {{ props.pageStart }} - {{ props.pageStop }} از {{ props.itemsLength }}
                    </template>
                </v-data-iterator>
                <v-divider></v-divider>
                <!-- <wm-timeline-item :tasks="tasks"></wm-timeline-item> -->
            </v-card-text>



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

</template>

<script>
import TimelineItem from "@Common/components/Comment/Item.vue";
export default {
    components: {
        'wm-timeline-item' : TimelineItem,
    },
    props: {
        Color:     { default: 'grey darken-4' },
    },
    data: () => ({
        rowsPerPageItems: [12, 24, 48],
        pagination: {
            rowsPerPage: 12
        },
        comments: [
            {
                text: ' بیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شده بیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شده',
                user_id: 12,
                user_name: ' دکتر علیرضا حسنی ',
                date: 'شنبه ، 22 مهر ماه 1397، 12:37',
                side: 'Left Cyan',
            },
            {
                text: ' بیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شده بیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شدهبیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شده',
                user_id: 12,
                user_name: ' عمه ی فرید ساروی ',
                date: 'شنبه ، 22 مهر ماه 1397، 14:47',
                side: 'Right Gray',
            },
            {
                text: ' بیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شده ',
                user_id: 12,
                user_name: ' دکتر علیرضا حسنی ',
                date: 'شنبه ، 22 مهر ماه 1397، 12:37',
                side: 'Left Cyan',
            },
            {
                text: ' بیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شده ',
                user_id: 12,
                user_name: ' عمه ی فرید ساروی ',
                date: 'شنبه ، 22 مهر ماه 1397، 14:47',
                side: 'Right Gray',
            },
            {
                text: ' بیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شده ',
                user_id: 12,
                user_name: ' دکتر علیرضا حسنی ',
                date: 'شنبه ، 22 مهر ماه 1397، 12:37',
                side: 'Left Red',
            },
            {
                text: ' بیمار پیگیری شد، نتیجه بهبودی بیمار رو میگه، بسیار سیستم خوب و پیشرفته ای آماده شده ',
                user_id: 12,
                user_name: ' عمه ی فرید ساروی ',
                date: 'شنبه ، 22 مهر ماه 1397، 14:47',
                side: 'Right Gray',
            },
        ]
    })

};
</script>

<style scoped lang="scss">
    .AddComment {
        display: flex;
        justify-content: center;
        align-items: center;    
    }
</style>