Merge pull request #33 from dderbentsov/UC-14

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

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 {

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>

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>

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>

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>

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

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>

src/components/base/buttons/BaseAddEvent.vue

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

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>

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>

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>

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

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>

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" }],