Merge pull request #29 from dderbentsov/UC-13

Настроена работа чек боксов и всплывающих окон

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/components/TheSidebar.vue

@@ -24,6 +24,7 @@ export default {
 <style lang="sass" scoped>
 .sidebar
   max-width: 80px
+  min-width: 80px
   background-color: var(--default-white)
   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.items-center.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.cursor-pointer

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>

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>

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>
 

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -25,16 +25,16 @@
             input.item-input.no-italic.text-base.cursor-pointer(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>
 

src/pages/clients/components/ClientsActionPopup.vue

@@ -1,13 +1,15 @@
 <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
+    .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 Редактировать
-    .keep-redaction.flex.gap-x-3
+      .button.keep-redaction.flex.gap-x-3
-      .icon-star.icon-redaction
+        img(src="@/assets/icons/star.svg" alt="Star")
         span На ведение
-    .delete.flex.gap-x-3
+      .button.delete.flex.gap-x-3
-      .icon-basket
+        img(src="@/assets/icons/basket.svg" alt="Basket")
         span Удалить
 </template>
 
@@ -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>