willaengine/resources/js/Common/components/Task/Timeline/Item.vue

<template>
    <v-timeline-item :color="props.item.color" small style="margin-bottom:30px;">
        <v-layout pt-1 class="Task">
            <v-flex lg2 class="text-lg-right">
                <strong> {{ props.item.title }} </strong>
                <div class="caption grey--text"> {{ props.item.date }} </div>
            </v-flex>
            <v-flex lg1 class="text-lg-center">
                <v-chip @click="$store.state.ClientStatus = true" slot="activator" color="grey lighten-4" :text-color="props.item.color"> بسته شده </v-chip>
            </v-flex>
            <v-flex lg2 class="text-lg-center">
                <div class="caption grey--text"> مشتری مورد نظر </div>
                <span class="black--text WM-Pointer" @click="$store.state.ClientDetails = true" slot="activator">
                    {{ props.item.taskable_name }}
                </span>
                <v-tooltip top color="black">
                    <v-btn class="XS" small @click.native="$store.state.SendSMS = true" slot="activator" fab color="orange" dark>
                        <v-icon dark>fas fa-comment-alt</v-icon>
                    </v-btn>
                    <span> ارسال پیام کوتاه </span>
                </v-tooltip>
            </v-flex>
            <v-flex lg4 class="text-lg-right Persons grey lighten-4">
                <div>
                    <div class="caption grey--text"> تعریف کننده ی وظیفه </div>
                    <span class="black--text">
                        {{ props.item.issuer_name }}
                    </span>
                </div>
                <div class="Icon"> <v-icon class="grey--text text--lighten-2"> fas fa-chevron-left </v-icon> </div>
                <div>
                    <div class="caption grey--text"> مسئول وظیفه </div>
                    <span class="black--text">
                        {{ props.item.task_responsible_name }}
                    </span>
                </div>
            </v-flex>
            <v-flex lg3 class="text-lg-left">
                <v-tooltip top color="black">
                    <v-btn small  @click.native="$store.state.TaskAdd = true" slot="activator" fab color="grey lighten-4"><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
                    <span> ویرایش </span>
                </v-tooltip>
                <v-badge color="black" overlap >
                    <template v-slot:badge >
                        <span> 4 </span>
                    </template>
                    <v-tooltip top color="black">
                        <v-btn small @click.native="$store.state.Comments = true" slot="activator" fab color="black" dark><v-icon dark>fas fa-comments</v-icon></v-btn>
                        <span> کامنت ها </span>
                    </v-tooltip>
                </v-badge>
                <v-tooltip top color="black">
                    <v-btn small slot="activator" fab color="red" dark><v-icon dark>fas fa-trash-alt</v-icon></v-btn>
                    <span> حذف آیتم </span>
                </v-tooltip>
            </v-flex>
        </v-layout>
        <v-layout pt-1 class="Desc">
            <v-flex lg12 class="text-lg-right">
                <div class="caption grey--text"> توضیحات </div>
                <span class="black--text">
                    {{ props.item.desc }}
                </span>
            </v-flex>
        </v-layout>
        <hr>
    </v-timeline-item>
</template>


<script>

export default {
    props: {
        props: { default: "" },
    },
    data () {
        return {
        }
    }

};
</script>
<style scoped lang="scss">
    .Task .Persons {
        display: flex;
        border: 2px solid #E0E0E0 !important;
        padding: 5px 15px;
        justify-content: center;
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;

    }
    .Persons .Icon {
        margin: 5px 20px;
    }
    .Persons .v-icon {
        font-size: 32px;
    }
</style>