Добавлен header таблицы клиентов

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>

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,

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>

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>