From 56011797be2a8b8744be6be06379e50ddac200f0 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Thu, 13 Oct 2022 21:01:27 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BA=20=D0=B1=D0=BE=D0=BA=D1=81=D0=BE=D0=B2,=20=D0=B4?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=BE=20popup=20?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=BD=D0=BE=20=D0=B0=D0=BA=D1=82=D0=B8=D0=B2=D0=BD?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=B5=D0=B9=20=D0=BF=D0=BE=20=D0=BA=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=B5=D0=BD=D1=82=D1=83,=20=D0=B8=D1=81=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BE=D1=88=D0=B8=D0=B1?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=D0=B7=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/basket.svg                   |   3 +
 src/assets/icons/sort-number.svg              |   3 +
 src/assets/icons/star.svg                     |   3 +
 src/assets/sass/variables.sass                |   3 +-
 src/components/TheSidebar.vue                 |   1 +
 src/components/base/BaseSelect.vue            |   6 +-
 src/components/base/buttons/BaseAddEvent.vue  |   3 +-
 .../base/buttons/BaseButtonPlus.vue           |   5 +-
 .../base/buttons/BaseSidebarButton.vue        |   7 +-
 .../components/CalendarFormAddEvent.vue       |  27 ++---
 .../clients/components/ClientsActionPopup.vue |  37 ++++--
 src/pages/clients/components/ClientsTable.vue | 114 ++++++++++++++----
 .../components/ClientsTableCheckbox.vue       |   7 +-
 .../clients/components/ClientsTableRow.vue    |  22 +++-
 .../clients/components/ClientsWrapper.vue     |   2 -
 15 files changed, 168 insertions(+), 75 deletions(-)
 create mode 100644 src/assets/icons/basket.svg
 create mode 100644 src/assets/icons/sort-number.svg
 create mode 100644 src/assets/icons/star.svg

diff --git a/src/assets/icons/basket.svg b/src/assets/icons/basket.svg
new file mode 100644
index 0000000..f986272
--- /dev/null
+++ b/src/assets/icons/basket.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4.3607H2.8M19 4.3607H17.2M2.8 4.3607L4.49205 18.122C4.55369 18.6234 4.97948 19 5.48457 19H14.5154C15.0205 19 15.4463 18.6234 15.508 18.122L17.2 4.3607M2.8 4.3607H7.6M17.2 4.3607H12.4M8.2 8.30205V15.0587M11.8 8.30205V15.0587M7.6 4.3607C7.4 3.42229 7.6 1 10 1C12.4 1 12.6 3.42229 12.4 4.3607M7.6 4.3607H12.4" stroke="#FF6565" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/sort-number.svg b/src/assets/icons/sort-number.svg
new file mode 100644
index 0000000..36eb729
--- /dev/null
+++ b/src/assets/icons/sort-number.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H10.913M1 4.5H7.78261M1 8H5.17391M10.3913 3.5V11M10.3913 11L7.78261 8M10.3913 11L13 8" stroke="#252850" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/star.svg b/src/assets/icons/star.svg
new file mode 100644
index 0000000..554c12b
--- /dev/null
+++ b/src/assets/icons/star.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.48073 1.49871C9.67288 1.03674 10.3273 1.03673 10.5195 1.49871L12.6454 6.61017C12.7264 6.80493 12.9096 6.938 13.1199 6.95485L18.6381 7.39725C19.1369 7.43723 19.3391 8.05964 18.9591 8.38514L14.7548 11.9866C14.5946 12.1238 14.5246 12.3391 14.5736 12.5443L15.858 17.9292C15.9741 18.4159 15.4447 18.8005 15.0177 18.5397L10.2933 15.6541C10.1133 15.5441 9.88691 15.5441 9.7069 15.6541L4.98251 18.5397C4.55551 18.8005 4.02606 18.4159 4.14215 17.9292L5.42664 12.5443C5.47558 12.3391 5.40562 12.1238 5.24543 11.9866L1.04111 8.38514C0.661119 8.05964 0.863352 7.43723 1.36209 7.39725L6.88034 6.95485C7.0906 6.938 7.27375 6.80493 7.35476 6.61017L9.48073 1.49871Z" stroke="#4772F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 4631acd..848521f 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -1,6 +1,6 @@
 \:root
   --bg-lavender-color: #e9e9f6
-  --bg-white-color: #f8f8ff
+  --bg-white-color: #FFFFFF
   --bg-ligth-blue-color: #e6eafc
   --font-dark-blue-color: #252850
   --font-black-color: #090a15
@@ -10,5 +10,4 @@
   --border-light-grey-color: #d3d4dc
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
-  --default-white: #FFFFFF
   --btn-red-color: #FF6F6F
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 2b766ba..193f5b5 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -24,6 +24,7 @@ export default {
 <style lang="sass" scoped>
 .sidebar
   max-width: 80px
+  min-width: 80px
   background-color: #FFFFFF
   border-top-right-radius: 4px
 </style>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 547cc0f..b53ce4d 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-  .flex.gap-2.py-2.px-4.w-full.container(@click="selectOpen")
+  .flex.gap-2.py-2.px-4.w-full.container.cursor-pointer(@click="selectOpen")
     .relative.flex.flex-col
-      .not-italic.text-base.select(:style="{ minWidth : width}") {{optionData}}
+      .not-italic.text-base.select.cursor-pointer(:style="{ minWidth : width}") {{optionData}}
         .absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
           .not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
     .select-form-separator
@@ -26,7 +26,6 @@ export default {
 <style lang="sass" scoped>
 .container
   align-items: center
-  cursor: pointer
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
@@ -34,7 +33,6 @@ export default {
   appearance: none
   border: none
   outline: none
-  cursor: pointer
   color: rgba(9, 10, 21, 0.5)
   background-color: rgba(9, 10, 21, 0)
   &::-webkit-calendar-picker-indicator
diff --git a/src/components/base/buttons/BaseAddEvent.vue b/src/components/base/buttons/BaseAddEvent.vue
index 1243148..dee58d0 100644
--- a/src/components/base/buttons/BaseAddEvent.vue
+++ b/src/components/base/buttons/BaseAddEvent.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.event-button.not-italic.leading-5.text-base.py-3.px-4 Создать событие
+  button.event-button.cursor-pointer.not-italic.leading-5.text-base.py-3.px-4 Создать событие
 </template>
 
 <script>
@@ -12,7 +12,6 @@ export default {
 .event-button
   outline: none
   border: none
-  cursor: pointer
   width: fit-content
   color: var(--bg-white-color)
   background-color: var(--btn-blue-color)
diff --git a/src/components/base/buttons/BaseButtonPlus.vue b/src/components/base/buttons/BaseButtonPlus.vue
index cb7e280..e12b91e 100644
--- a/src/components/base/buttons/BaseButtonPlus.vue
+++ b/src/components/base/buttons/BaseButtonPlus.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.icon-plus.button-plus.text-xs.pt-1
+  button..cursor-pointer.icon-plus.button-plus.text-xs.pt-1
 </template>
 
 <script>
@@ -12,11 +12,10 @@ export default {
 .button-plus
   outline: none
   border: none
-  cursor: pointer
   width: 24px
   height: 24px
   max-height: 24px
-  color: #4772F2
+  color: var(--btn-blue-color)
   background-color: rgba(65, 105, 225, 0.25)
   border-radius: 50%
 </style>
diff --git a/src/components/base/buttons/BaseSidebarButton.vue b/src/components/base/buttons/BaseSidebarButton.vue
index 72d2e4b..2524361 100644
--- a/src/components/base/buttons/BaseSidebarButton.vue
+++ b/src/components/base/buttons/BaseSidebarButton.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   a(:href="path")
-    button.button.text-4xl.py-3.pr-4.pl-3(:id="id")
+    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3(:id="id")
       slot
 </template>
 
@@ -23,7 +23,6 @@ export default {
 <style lang="sass" scoped>
 .button
   width: fit-content
-  cursor: pointer
   background-color: rgba(65, 105, 225, 0)
   border-radius: 0 4px 4px 0
   border-left-color: rgba(65, 105, 225, 0)
@@ -35,9 +34,9 @@ export default {
 .button:focus
   background-color: rgba(65, 105, 225, 0.3)
   border-left-color: rgba(65, 105, 225, 1)
-  color: #4169E1
+  color: var(--btn-blue-color)
 .button:hover
   background-color: rgba(65, 105, 225, 0.3)
   border-left-color: rgba(65, 105, 225, 1)
-  color: #4169E1
+  color: var(--btn-blue-color)
 </style>
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index 909e55a..d26ac5f 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -3,7 +3,7 @@
     .flex.flex-col.gap-y-2
       .flex.justify-between.pt-2
         span.not-italic.text-xs.opacity-40.leading-3 Ответственный
-        .icon-cancel.close-icon.text-xs(@click="closeEventForm")
+        .icon-cancel.close-icon.cursor-pointer.text-xs(@click="closeEventForm")
       base-select(
         id="responsible"
         width="205px"
@@ -14,27 +14,27 @@
         :select-open="openSelectResponsible"
       )
     .flex.flex-col.gap-y-2
-      span.not-italic.text-xs.opacity-40.leading-3 Оновная информация
+      span.not-italic.text-xs.opacity-40.leading-3 Основная информация
       .flex.gap-x-4.items-center
         .icon-time.text-xl.icon
         .flex.gap-x-2.items-center
-          .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+          .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+            input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
           span —
-          .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+          .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+            input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
       .flex.gap-x-4.items-center
         .icon-person.text-xl.icon
-        .form-item.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
+        .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+          input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
     .flex.flex-col.gap-y-2(class='additional-information')
       .flex.gap-x-4.items-center
         span.not-italic.text-xs.opacity-40.leading-3 Дополнительная информация
         button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
       .flex.gap-x-4.items-center(v-for="(info, index) in listFriendInfo" :key="index")
         span.ml-1 {{info}}
-        .form-item.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
+        .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+          input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
     .flex.flex-col.gap-y-2
       span.not-italic.text-xs.opacity-40.leading-3 Вид события
       base-select(
@@ -52,8 +52,8 @@
         button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
       .flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
         .icon-mail.text-xl.icon
-        .form-item.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
+        .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+          input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
     add-event-button(@click="createEvent")
 </template>
 
@@ -135,7 +135,6 @@ export default {
   box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
   border-radius: 4px
 .form-item
-  cursor: pointer
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
@@ -143,7 +142,6 @@ export default {
   appearance: none
   border: none
   outline: none
-  cursor: pointer
   color: rgba(9, 10, 21, 0.5)
   background-color: rgba(9, 10, 21, 0)
   &::-webkit-calendar-picker-indicator
@@ -154,7 +152,6 @@ export default {
   height: 24px
   color: var(--font-dark-blue-color)
 .close-icon
-  cursor: pointer
   color: var(--font-dark-blue-color)
   &:hover
     color: var(--btn-blue-color)
diff --git a/src/pages/clients/components/ClientsActionPopup.vue b/src/pages/clients/components/ClientsActionPopup.vue
index 67d5918..cd19111 100644
--- a/src/pages/clients/components/ClientsActionPopup.vue
+++ b/src/pages/clients/components/ClientsActionPopup.vue
@@ -1,14 +1,16 @@
 <template lang="pug">
-  .popup-wrapper.absolute.flex.flex-col.gap-y-3.w-10.h-10.right-2.top-5.p-4
-    .keep-redaction.flex.gap-x-3
-      .icon-edit.icon-redaction
-      span Редактировать
-    .keep-redaction.flex.gap-x-3
-      .icon-star.icon-redaction
-      span На ведение
-    .delete.flex.gap-x-3
-      .icon-basket
-      span Удалить
+  .flex.flex-col.items-end.absolute.right-2.top-5
+    .corner
+    .popup-wrapper.flex.flex-col.gap-y-3.w-10.h-10.p-4
+      .button.keep-redaction.flex.gap-x-3
+        .icon-edit.icon-redaction
+        span Редактировать
+      .button.keep-redaction.flex.gap-x-3
+        img(src="@/assets/icons/star.svg" alt="Star")
+        span На ведение
+      .button.delete.flex.gap-x-3
+        img(src="@/assets/icons/basket.svg" alt="Basket")
+        span Удалить
 </template>
 
 <script>
@@ -20,14 +22,25 @@ export default {
 <style lang="sass" scoped>
 .popup-wrapper
   width: 180px
-  height: 136px
+  height: 128px
   border-radius: 4px 0 4px 4px
-  background-color: var(--default-white)
+  background-color: var(--bg-white-color)
   box-shadow: var(--default-shadow)
+  z-index: 1
 .keep-redaction
   color: var(--font-dark-blue-color)
 .icon-redaction
   color: var(--btn-blue-color)
 .delete
   color: var(--btn-red-color)
+.button
+  &:hover
+    opacity: 0.7
+.corner
+  width: 8px
+  height: 8px
+  border-top-left-radius: 100%
+  background-color: var(--bg-white-color)
+  z-index: 2
+  overflow: hidden
 </style>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index 3b86f01..4ef5858 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -4,43 +4,45 @@
       thead.head-table
         tr.head-row
           th.w-3
-            .checkbox.px-4.py-3
-              clients-table-checkbox
+            .px-4.py-3
+              clients-table-checkbox(:is-check="selectAll" :check="selectedCheck" id="all")
           th.name
-            .flex.px-4.justify-between.gap-x-40
+            .flex.px-4.justify-between
               span.text-sm ФИО
-              .icon-down-arrow.text-xsm.mt-1
+              img.cursor-pointer(src="@/assets/icons/sort-number.svg" alt="SortNumber")
           th.age
             .flex.px-4.justify-between
               span.text-sm Возраст
-              .icon-down-arrow.text-xsm.mt-1
-          th
+              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
+          th.job-title
             .px-4.text-left
               span.text-sm Должность
           th.priority
-            .flex.px-4.justify-between
+            .flex.relative.px-4.justify-between
               span.text-sm Приоритет
-              .icon-down-arrow.text-xsm.mt-1
-          th
-            .phone.px-4.text-left
+              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
+          th.phone
+            .px-4.text-left
               span.text-sm Телефон
-          th
-            .email.px-4.text-left
+          th.email
+            .px-4.text-left
               span.text-sm Email
-          th
-            .networks.px-4.text-left
-              span.text-sm Сети
+          th.networks
+            .px-4.text-left
+              span.text-sm.leading-8 Сети
           th.meeting
             .flex.px-4.justify-between.gap-x-11
-              span.text-sm Ближайшая встреча
-              .icon-down-arrow.text-xsm.mt-1
+              span.text-sm.leading-4.whitespace-nowrap Ближайшая встреча
+              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
           th.w-5
             .do.px-4
               span.text-sm Do
-      tbody
+      tbody.tbody
         clients-table-row(v-for="client in dataClients"
           :key="client.id"
           :id="client.id"
+          :is-check="marked.includes(client.id)"
+          :check="selectedCheck"
           :full-name="client.fullName"
           :age="client.age"
           :job-title="client.jobTitle"
@@ -60,6 +62,8 @@ export default {
   components: { ClientsTableCheckbox, ClientsTableRow },
   data() {
     return {
+      selectAll: false,
+      marked: [],
       dataClients: [
         {
           id: "1",
@@ -75,25 +79,85 @@ export default {
             time: "18:30–19:30",
           },
         },
+        {
+          id: "2",
+          fullName: "Астафоркина Екатерина Геннадьевна",
+          age: "54",
+          jobTitle: "Менеджер",
+          priority: "-",
+          phone: "+7 (574) 364–53–36",
+          email: "antimag@gmail.com",
+          networks: [],
+          meetingTime: {
+            date: "14.07.22",
+            time: "17:30–21:30",
+          },
+        },
       ],
     };
   },
+  methods: {
+    selectedCheck(e) {
+      if (e.target.id === "all") {
+        this.selectAll = !this.selectAll;
+        this.marked = this.dataClients.map((el) => el.id);
+        !this.selectAll ? (this.marked = []) : true;
+      } else {
+        if (e.target.checked) {
+          this.marked = [...this.marked, e.target.id];
+        }
+        if (!e.target.checked) {
+          this.marked = this.marked.filter((el) => el !== e.target.id);
+        }
+        if (this.marked.length !== this.dataClients.length) {
+          this.selectAll = false;
+        } else {
+          this.selectAll = true;
+        }
+      }
+    },
+  },
 };
 </script>
 
 <style lang="sass" scoped>
+.check-box
+  min-width: 36px
+  max-width: 36px
+.name
+  min-width: 400px
+.age
+  min-width: 140px
+.job-title
+  min-width: 200px
+.priority
+  min-width: 124px
+.phone
+  min-width: 190px
+.email
+  min-width: 250px
+.network
+  min-width: 152px
+.meeting
+  max-width: 220px
+.dots
+  min-width: 53px
+  max-width: 53px
+.icon
+  color: var(--font-dark-blue-color)
+  &.priority-open
+    transform: rotate(180deg)
 .head-table
   color: var(--font-grey-color)
-  border-collapse: separate
-  border-bottom: 8px solid transparent
-.meeting
-  max-width: 180px
-.priority
-  max-width: 80px
+.tbody:before
+    content: "-"
+    display: block
+    line-height: 8px
+    color: transparent
 .head-row
   border-bottom: 1px solid #D3D4DC
 .wrapper
-  background-color: var(--default-white)
+  background-color: var(--bg-white-color)
 .color
   background-color: red
 </style>
diff --git a/src/pages/clients/components/ClientsTableCheckbox.vue b/src/pages/clients/components/ClientsTableCheckbox.vue
index 876d62a..94b9147 100644
--- a/src/pages/clients/components/ClientsTableCheckbox.vue
+++ b/src/pages/clients/components/ClientsTableCheckbox.vue
@@ -1,10 +1,15 @@
 <template lang="pug">
-  input.checkbox(type="checkbox")
+  input.checkbox.cursor-pointer(type="checkbox" :id="id" :checked="isCheck" @change="(e) => check(e)")
 </template>
 
 <script>
 export default {
   name: "ClientsTableCheckBox",
+  props: {
+    id: String,
+    check: Function,
+    isCheck: Boolean,
+  },
 };
 </script>
 
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
index 894a858..1f1c881 100644
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
   tr.row-client.text-ms.cursor-pointer(:id="id")
     td.py-5
-      .px-4.items-center
-        clients-table-checkbox
+      .px-4.items-center.w-fit
+        clients-table-checkbox(:is-check="isCheck" :check="check" :id="id")
     td.py-5
       .px-4.font-semibold {{fullName}}
     td.py-5
@@ -26,8 +26,8 @@
         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
-          clients-action-popup
+        .relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6(@click="openPopup")
+          clients-action-popup(v-if="isOpenPopup")
 </template>
 
 <script>
@@ -36,8 +36,15 @@ import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbo
 export default {
   name: "ClientsTableRow",
   components: { ClientsTableCheckbox, ClientsActionPopup },
+  data() {
+    return {
+      isOpenPopup: false,
+    };
+  },
   props: {
     id: String,
+    check: Function,
+    isCheck: Boolean,
     fullName: String,
     age: String,
     jobTitle: String,
@@ -47,6 +54,11 @@ export default {
     networks: Array,
     meetingTime: Object,
   },
+  methods: {
+    openPopup() {
+      this.isOpenPopup = !this.isOpenPopup;
+    },
+  },
 };
 </script>
 
@@ -68,5 +80,5 @@ export default {
   color: var(--font-grey-color)
   &:hover
     background-color: var(--btn-blue-color)
-    color: var(--default-white)
+    color: var(--bg-white-color)
 </style>
diff --git a/src/pages/clients/components/ClientsWrapper.vue b/src/pages/clients/components/ClientsWrapper.vue
index efea2e3..be1d1d4 100644
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -10,5 +10,3 @@ export default {
   components: { ClientsTable },
 };
 </script>
-
-<style lang="sass" scoped></style>