Merge pull request #29 from dderbentsov/UC-13

Настроена работа чек боксов и всплывающих окон
2022-10-13 21:09:03 +03:00
parent c0fff7fda3 b41f093d9f
commit 9586ea4b2a
14 changed files with 157 additions and 55 deletions
--- a/src/assets/icons/basket.svg
+++ 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>
--- a/src/assets/icons/sort-number.svg
+++ 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>
--- a/src/assets/icons/star.svg
+++ 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>
--- 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: var(--default-white)
  border-top-right-radius: 4px
 </style>
--- 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.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
--- 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>
--- 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>
--- 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>

--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/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
-          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>

--- 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>
--- 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>
--- 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>

--- 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>
--- 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>