Настроена работа чек боксов, добавлено popup окно активностей по клиенту, исправлены ошибки стилизации

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>

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>

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>

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

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>

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

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)

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>

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>

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
+          .form-item.cursor-pointer.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")
+            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
+          .form-item.cursor-pointer.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")
+            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
+        .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
+          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
+        .form-item.cursor-pointer.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="Что-то важное")
+          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
+        .form-item.cursor-pointer.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")
+          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)

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
+  .flex.flex-col.items-end.absolute.right-2.top-5
-    .keep-redaction.flex.gap-x-3
+    .corner
-      .icon-edit.icon-redaction
+    .popup-wrapper.flex.flex-col.gap-y-3.w-10.h-10.p-4
-      span Редактировать
+      .button.keep-redaction.flex.gap-x-3
-    .keep-redaction.flex.gap-x-3
+        .icon-edit.icon-redaction
-      .icon-star.icon-redaction
+        span Редактировать
-      span На ведение
+      .button.keep-redaction.flex.gap-x-3
-    .delete.flex.gap-x-3
+        img(src="@/assets/icons/star.svg" alt="Star")
-      .icon-basket
+        span На ведение
-      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>

src/pages/clients/components/ClientsTable.vue

@@ -4,43 +4,45 @@
       thead.head-table
         tr.head-row
           th.w-3
-            .checkbox.px-4.py-3
+            .px-4.py-3
-              clients-table-checkbox
+              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
+              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
-          th
+          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
+              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
-          th
+          th.phone
-            .phone.px-4.text-left
+            .px-4.text-left
               span.text-sm Телефон
-          th
+          th.email
-            .email.px-4.text-left
+            .px-4.text-left
               span.text-sm Email
-          th
+          th.networks
-            .networks.px-4.text-left
+            .px-4.text-left
-              span.text-sm Сети
+              span.text-sm.leading-8 Сети
           th.meeting
             .flex.px-4.justify-between.gap-x-11
-              span.text-sm Ближайшая встреча
+              span.text-sm.leading-4.whitespace-nowrap Ближайшая встреча
-              .icon-down-arrow.text-xsm.mt-1
+              .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
+.tbody:before
-  border-bottom: 8px solid transparent
+    content: "-"
-.meeting
+    display: block
-  max-width: 180px
+    line-height: 8px
-.priority
+    color: transparent
-  max-width: 80px
 .head-row
   border-bottom: 1px solid #D3D4DC
 .wrapper
-  background-color: var(--default-white)
+  background-color: var(--bg-white-color)
 .color
   background-color: red
 </style>

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>
 

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
+      .px-4.items-center.w-fit
-        clients-table-checkbox
+        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
+        .relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6(@click="openPopup")
-          clients-action-popup
+          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>

src/pages/clients/components/ClientsWrapper.vue

@@ -10,5 +10,3 @@ export default {
   components: { ClientsTable },
 };
 </script>
-
-<style lang="sass" scoped></style>