From dc891cafc92afa24012c0eafda8178e1f90e7e69 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Fri, 14 Oct 2022 18:54:05 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20header=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D1=8B=20?=
 =?UTF-8?q?=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/iconfonts.css                  |  2 +-
 src/assets/icons/edit.svg                     |  3 +
 src/assets/icons/export.svg                   |  3 +
 src/assets/icons/group.svg                    |  3 +
 src/assets/icons/search-black.svg             |  3 +
 src/assets/sass/variables.sass                |  1 +
 src/components/base/BaseInput.vue             | 37 ++++++++++++
 src/components/base/buttons/BaseAddEvent.vue  | 19 -------
 .../base/buttons/BaseButtonPlus.vue           |  2 +-
 .../base/buttons/BaseCreateButton.vue         | 28 ++++++++++
 .../base/buttons/BassExportButton.vue         | 27 +++++++++
 .../components/CalendarFormAddEvent.vue       |  2 +-
 .../components/ClientsActionButton.vue        | 32 +++++++++++
 src/pages/clients/components/ClientsTable.vue |  6 +-
 .../clients/components/ClientsTableHeader.vue | 37 ++++++++++++
 .../components/ClientsTableHeaderActions.vue  | 56 +++++++++++++++++++
 tailwind.config.js                            |  1 +
 17 files changed, 238 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/icons/edit.svg
 create mode 100644 src/assets/icons/export.svg
 create mode 100644 src/assets/icons/group.svg
 create mode 100644 src/assets/icons/search-black.svg
 create mode 100644 src/components/base/BaseInput.vue
 delete mode 100644 src/components/base/buttons/BaseAddEvent.vue
 create mode 100644 src/components/base/buttons/BaseCreateButton.vue
 create mode 100644 src/components/base/buttons/BassExportButton.vue
 create mode 100644 src/pages/clients/components/ClientsActionButton.vue
 create mode 100644 src/pages/clients/components/ClientsTableHeader.vue
 create mode 100644 src/pages/clients/components/ClientsTableHeaderActions.vue

diff --git a/src/assets/css/iconfonts.css b/src/assets/css/iconfonts.css
index 08d3431..a98d367 100644
--- a/src/assets/css/iconfonts.css
+++ b/src/assets/css/iconfonts.css
@@ -84,7 +84,7 @@
 .icon-files:before {
   content: "\e90f";
 }
-.icon-filtre:before {
+.icon-filter:before {
   content: "\e910";
 }
 .icon-google:before {
diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
new file mode 100644
index 0000000..6dee7f1
--- /dev/null
+++ b/src/assets/icons/edit.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.2929 6.29289L19.7626 6.82322L20.2929 6.29289ZM20.2929 7.70711L19.7626 7.17678L20.2929 7.70711ZM4.29289 15.7071L4.82322 16.2374L4.29289 15.7071ZM4.75 19V16.4142H3.25V19H4.75ZM17.1768 4.23744L19.7626 6.82322L20.8232 5.76256L18.2374 3.17678L17.1768 4.23744ZM7.58579 19.25H5V20.75H7.58579V19.25ZM19.7626 7.17678L17.4697 9.46967L18.5303 10.5303L20.8232 8.23744L19.7626 7.17678ZM17.4697 9.46967L7.76256 19.1768L8.82322 20.2374L18.5303 10.5303L17.4697 9.46967ZM4.82322 16.2374L14.5303 6.53033L13.4697 5.46967L3.76256 15.1768L4.82322 16.2374ZM14.5303 6.53033L16.8232 4.23744L15.7626 3.17678L13.4697 5.46967L14.5303 6.53033ZM18.5303 9.46967L14.5303 5.46967L13.4697 6.53033L17.4697 10.5303L18.5303 9.46967ZM7.58579 20.75C8.04991 20.75 8.49503 20.5656 8.82322 20.2374L7.76256 19.1768C7.71568 19.2237 7.65209 19.25 7.58579 19.25V20.75ZM19.7626 6.82322C19.8602 6.92085 19.8602 7.07914 19.7626 7.17678L20.8232 8.23744C21.5066 7.55402 21.5066 6.44598 20.8232 5.76256L19.7626 6.82322ZM18.2374 3.17678C17.554 2.49336 16.446 2.49336 15.7626 3.17678L16.8232 4.23744C16.9209 4.13981 17.0791 4.13981 17.1768 4.23744L18.2374 3.17678ZM4.75 16.4142C4.75 16.3479 4.77634 16.2843 4.82322 16.2374L3.76256 15.1768C3.43437 15.505 3.25 15.9501 3.25 16.4142H4.75ZM3.25 19C3.25 19.9665 4.0335 20.75 5 20.75V19.25C4.86193 19.25 4.75 19.1381 4.75 19H3.25Z" fill="#4772F2"/>
+</svg>
diff --git a/src/assets/icons/export.svg b/src/assets/icons/export.svg
new file mode 100644
index 0000000..840a2ed
--- /dev/null
+++ b/src/assets/icons/export.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="M5.99998 7.91663H4.33331C3.78103 7.91663 3.33331 8.36434 3.33331 8.91663V16.5C3.33331 17.0522 3.78103 17.5 4.33331 17.5H15.6666C16.2189 17.5 16.6666 17.0522 16.6666 16.5V8.91662C16.6666 8.36434 16.2189 7.91663 15.6666 7.91663H14M9.99998 11.25V1.66663M9.99998 1.66663L6.44442 4.99996M9.99998 1.66663L13.5555 4.99996" stroke="#4772F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/group.svg b/src/assets/icons/group.svg
new file mode 100644
index 0000000..57efd66
--- /dev/null
+++ b/src/assets/icons/group.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 20H4C4 20 4 10.0531 4 4H7M7 8H20M7 12H20M7 16H20" stroke="#4772F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/search-black.svg b/src/assets/icons/search-black.svg
new file mode 100644
index 0000000..acd2515
--- /dev/null
+++ b/src/assets/icons/search-black.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5003 17.5L13.762 13.755M15.8337 8.75C15.8337 10.6286 15.0874 12.4303 13.759 13.7587C12.4306 15.0871 10.6289 15.8333 8.75033 15.8333C6.87171 15.8333 5.07004 15.0871 3.74165 13.7587C2.41327 12.4303 1.66699 10.6286 1.66699 8.75C1.66699 6.87138 2.41327 5.06971 3.74165 3.74132C5.07004 2.41294 6.87171 1.66666 8.75033 1.66666C10.6289 1.66666 12.4306 2.41294 13.759 3.74132C15.0874 5.06971 15.8337 6.87138 15.8337 8.75V8.75Z" stroke="#252850" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index a3177c6..4f6576b 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -17,3 +17,4 @@
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff
   --btn-red-color: #ff6f6f
+  --br-grey-color: #D3D4DC
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
new file mode 100644
index 0000000..bcaf570
--- /dev/null
+++ b/src/components/base/BaseInput.vue
@@ -0,0 +1,37 @@
+<template lang="pug">
+  .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5")
+    img.cursor-pointer( v-if="withIcon" :class="position" src="@/assets/icons/search-black.svg" alt="SearchTable")
+    input.input-search.outline-0.text-base.not-italic(placeholder="Искать")
+</template>
+
+<script>
+export default {
+  name: "BaseInput",
+  props: {
+    withIcon: {
+      default: false,
+    },
+    iconPosition: String,
+  },
+  computed: {
+    position() {
+      if (this.iconPosition === "right") {
+        return "right";
+      }
+      return "left";
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.left
+  order: 0
+.right
+  order: 1
+.input-wrapper
+  border: 2px solid var(--br-grey-color)
+  border-radius: 4px
+.input-search
+  min-width: 220px
+</style>
diff --git a/src/components/base/buttons/BaseAddEvent.vue b/src/components/base/buttons/BaseAddEvent.vue
deleted file mode 100644
index 06695d6..0000000
--- a/src/components/base/buttons/BaseAddEvent.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template lang="pug">
-  button.event-button.cursor-pointer.not-italic.leading-5.text-base.py-3.px-4 Создать событие
-</template>
-
-<script>
-export default {
-  name: "AddEventButton",
-};
-</script>
-
-<style lang="sass" scoped>
-.event-button
-  outline: none
-  border: none
-  width: fit-content
-  color: var(--default-white)
-  background-color: var(--btn-blue-color)
-  border-radius: 4px
-</style>
diff --git a/src/components/base/buttons/BaseButtonPlus.vue b/src/components/base/buttons/BaseButtonPlus.vue
index 3249601..cde6574 100644
--- a/src/components/base/buttons/BaseButtonPlus.vue
+++ b/src/components/base/buttons/BaseButtonPlus.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  button..cursor-pointer.icon-plus.button-plus.text-xs.pt-1
+  button.cursor-pointer.icon-plus.button-plus.text-xs.pt-1
 </template>
 
 <script>
diff --git a/src/components/base/buttons/BaseCreateButton.vue b/src/components/base/buttons/BaseCreateButton.vue
new file mode 100644
index 0000000..9b62519
--- /dev/null
+++ b/src/components/base/buttons/BaseCreateButton.vue
@@ -0,0 +1,28 @@
+<template lang="pug">
+  button.button.flex.gap-x-2.text-base.pt-3.pb-2.px-6
+    .flex.text-xs.w-fit.pt-1(v-if="withIcon")
+      span.icon-plus
+    span.text-base.font-semibold {{text}}
+</template>
+
+<script>
+export default {
+  name: "BaseCreateButton",
+  props: {
+    text: {
+      default: "Создать",
+    },
+    withIcon: {
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.button
+  border: none
+  color: var(--default-white)
+  background-color: var(--btn-blue-color)
+  border-radius: 4px
+</style>
diff --git a/src/components/base/buttons/BassExportButton.vue b/src/components/base/buttons/BassExportButton.vue
new file mode 100644
index 0000000..e2003de
--- /dev/null
+++ b/src/components/base/buttons/BassExportButton.vue
@@ -0,0 +1,27 @@
+<template lang="pug">
+  button.button.flex.gap-x-2.px-6.box-border(class="py-2.5")
+    img(v-if="withIcon || onlyIcon" src="@/assets/icons/export.svg" alt="Export")
+    span.text.text-base.font-semibold(v-if="!onlyIcon" ) Сохранить
+</template>
+
+<script>
+export default {
+  name: "BaseExportButton",
+  props: {
+    withIcon: {
+      default: false,
+    },
+    onlyIcon: {
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.button
+  border: 2px solid var(--btn-blue-color)
+  border-radius: 4px
+.text
+  color: var(--btn-blue-color)
+</style>
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index d4ae927..251e3a7 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -59,7 +59,7 @@
 
 <script>
 import BaseSelect from "@/components/base/BaseSelect";
-import AddEventButton from "@/components/base/buttons/BaseAddEvent";
+import AddEventButton from "@/components/base/buttons/BaseCreateButton";
 import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
 export default {
   name: "FormChangeEvent",
diff --git a/src/pages/clients/components/ClientsActionButton.vue b/src/pages/clients/components/ClientsActionButton.vue
new file mode 100644
index 0000000..610f918
--- /dev/null
+++ b/src/pages/clients/components/ClientsActionButton.vue
@@ -0,0 +1,32 @@
+<template lang="pug">
+  .button.relative.w-8.h-8.flex.justify-center.items-center.cursor-pointer
+    .prompt.absolute.w-fit.left-1.px-2.py-3.bottom-10.bg-amber-600
+      span.text-sm {{prompt}}
+    img(:src="img" :alt="prompt")
+</template>
+
+<script>
+export default {
+  name: "ClientsActionButton.vue",
+  props: {
+    img: String,
+    prompt: String,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.button
+  border-radius: 50%
+  &:hover
+    background-color: rgba(71, 114, 242, 0.15)
+    .prompt
+      visibility: visible
+.prompt
+  color: var(--font-dark-blue-color)
+  backdrop-filter: blur(4px)
+  background: rgba(37, 40, 80, 0.1)
+  visibility: hidden
+  z-index: 2
+  border-radius: 4px
+</style>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index faf6a10..97fbf92 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -1,5 +1,6 @@
 <template lang="pug">
-  .wrapper.px-6.pt-6.h-full.w-full.min-w-fit
+  .wrapper.flex.flex-col.gap-y-8.px-6.pt-6.h-full.w-full.min-w-fit
+    clients-table-header(:is-open-actions="marked.length")
     table.w-full
       thead.head-table
         tr.head-row
@@ -55,11 +56,12 @@
 </template>
 
 <script>
+import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
 import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 export default {
   name: "ClientsTable",
-  components: { ClientsTableCheckbox, ClientsTableRow },
+  components: { ClientsTableCheckbox, ClientsTableRow, ClientsTableHeader },
   data() {
     return {
       selectAll: false,
diff --git a/src/pages/clients/components/ClientsTableHeader.vue b/src/pages/clients/components/ClientsTableHeader.vue
new file mode 100644
index 0000000..8ed0803
--- /dev/null
+++ b/src/pages/clients/components/ClientsTableHeader.vue
@@ -0,0 +1,37 @@
+<template lang="pug">
+  .flex.justify-between.w-full.h-fit
+    .flex.gap-2.w-fit.h-fit
+      base-input(:with-icon="true")
+      button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
+        .icon-filter.text-xl.leading-4
+    clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions")
+    .flex.w-fit.h-fit.gap-x-2
+      bass-export-button(:only-icon="true")
+      base-create-button(:with-icon="true")
+
+</template>
+
+<script>
+import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+import BassExportButton from "@/components/base/buttons/BassExportButton";
+import BaseInput from "@/components/base/BaseInput";
+export default {
+  name: "ClientsTAbleHeader",
+  components: {
+    BaseInput,
+    BassExportButton,
+    BaseCreateButton,
+    ClientsTableHeaderActions,
+  },
+  props: {
+    isOpenActions: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.filter-button
+  border-radius: 4px
+  border: 2px solid var(--br-grey-color)
+</style>
diff --git a/src/pages/clients/components/ClientsTableHeaderActions.vue b/src/pages/clients/components/ClientsTableHeaderActions.vue
new file mode 100644
index 0000000..3cf375e
--- /dev/null
+++ b/src/pages/clients/components/ClientsTableHeaderActions.vue
@@ -0,0 +1,56 @@
+<template lang="pug">
+  .wrapper.flex.px-5.items-center.gap-x-2
+    clients-action-button(v-for="data in dataBtn" :key="data.prompt" :img="data.img" :prompt="data.prompt")
+</template>
+
+<script>
+import group from "@/assets/icons/group.svg";
+import edit from "@/assets/icons/edit.svg";
+import star from "@/assets/icons/star.svg";
+import basket from "@/assets/icons/basket.svg";
+import ClientsActionButton from "@/pages/clients/components/ClientsActionButton";
+export default {
+  name: "ClientsTableHeaderActions",
+  components: { ClientsActionButton },
+  props: {
+    isSelectedOne: Number,
+  },
+  data() {
+    return {
+      dataBtn: [
+        {
+          img: group,
+          prompt: "сгрупировать",
+        },
+        {
+          img: edit,
+          prompt: "редактировать",
+        },
+        {
+          img: star,
+          prompt: "ведение",
+        },
+        {
+          img: basket,
+          prompt: "удалить",
+        },
+      ],
+    };
+  },
+  created() {
+    if (this.isSelectedOne > 1) {
+      this.dataBtn = this.dataBtn.filter((el) => el.prompt !== "ведение");
+    }
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  border-radius: 22px
+  background-color: #EFF1FF
+.button
+  border-radius: 50%
+  &:hover
+    background-color: rgba(71, 114, 242, 0.15)
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4081d3a..f1a6ef5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
       },
       fontSize: {
         xsm: ["10px", { lineHeight: "12px" }],
+        ins: ["11px", { lineHeight: "12px" }],
         xxs: ["12px", { lineHeight: "14px" }],
         xs: ["13px", { lineHeight: "15px" }],
         sm: ["14px", { lineHeight: "16px" }],