85 lines
2.1 KiB
Vue
85 lines
2.1 KiB
Vue
<template lang="pug">
|
|
tr.row-client.text-ms.cursor-pointer(:id="id")
|
|
td.py-5
|
|
.px-4.items-center.w-fit
|
|
clients-table-checkbox(:is-check="isCheck" :check="check" :id="id")
|
|
td.py-5
|
|
.px-4.font-semibold.whitespace-nowrap {{fullName}}
|
|
td.py-5
|
|
.px-4.whitespace-nowrap {{age}}
|
|
td.py-5
|
|
.px-4.whitespace-nowrap {{jobTitle}}
|
|
td.py-5
|
|
.px-4.whitespace-nowrap.flex.items-center.gap-x-2
|
|
.circle.w-2.h-2
|
|
span {{priority}}
|
|
td.py-5
|
|
.px-4.whitespace-nowrap {{phone}}
|
|
td.py-5
|
|
.px-4.whitespace-nowrap {{email}}
|
|
td.py-5
|
|
.px-4.whitespace-nowrap.flex
|
|
.w-fit.h-fit(v-for="network in networks" :key="network")
|
|
td.py-5
|
|
.px-4.whitespace-nowrap.gap-x-2.flex
|
|
span {{meetingTime.date}}
|
|
span.meeting-time.text-xs.leading-5 {{meetingTime.time}}
|
|
td.py-5
|
|
.px-4
|
|
.relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6(@click="openPopup")
|
|
clients-action-popup(v-if="isOpenPopup")
|
|
</template>
|
|
|
|
<script>
|
|
import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
|
|
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
|
|
export default {
|
|
name: "ClientsTableRow",
|
|
components: { ClientsTableCheckbox, ClientsActionPopup },
|
|
data() {
|
|
return {
|
|
isOpenPopup: false,
|
|
};
|
|
},
|
|
props: {
|
|
id: String,
|
|
check: Function,
|
|
isCheck: Boolean,
|
|
fullName: String,
|
|
age: String,
|
|
jobTitle: String,
|
|
priority: String,
|
|
phone: String,
|
|
email: String,
|
|
networks: Array,
|
|
meetingTime: Object,
|
|
},
|
|
methods: {
|
|
openPopup() {
|
|
this.isOpenPopup = !this.isOpenPopup;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.row-client
|
|
color: var(--font-dark-blue-color)
|
|
border-bottom: 1px solid #D3D4DC
|
|
&:hover
|
|
background-color: var(--bg-hover-row-table)
|
|
.circle
|
|
background-color: var(--font-grey-color)
|
|
border-radius: 50%
|
|
.meeting-time
|
|
color: var(--font-grey-color)
|
|
.dots-button
|
|
width: 20px
|
|
height: 20px
|
|
border-radius: 50%
|
|
color: var(--font-grey-color)
|
|
&:hover
|
|
background-color: var(--btn-blue-color)
|
|
color: var(--default-white)
|
|
</style>
|