From f5e948d0b4f3e2d0a9713f1e95bbb0b3453cb2fb Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Thu, 13 Oct 2022 04:11:02 +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=D0=B0=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D0=B0=20?=
 =?UTF-8?q?=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20=D0=B8=20pop?=
 =?UTF-8?q?up=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D0=B4=D0=BB=D1=8F=20=D1=83?=
 =?UTF-8?q?=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B8=20=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  2 +-
 src/assets/sass/variables.sass                |  3 +
 src/components/TheSidebar.vue                 |  5 +-
 src/pages/calendar/TheCalendar.vue            | 20 ++++
 src/pages/clients/TheClients.vue              | 11 +++
 .../clients/components/ClientsActionPopup.vue | 33 +++++++
 src/pages/clients/components/ClientsTable.vue | 99 +++++++++++++++++++
 .../components/ClientsTableCheckbox.vue       | 14 +++
 .../clients/components/ClientsTableRow.vue    | 72 ++++++++++++++
 .../clients/components/ClientsWrapper.vue     | 14 +++
 src/pages/user/TheUser.vue                    |  9 --
 src/router.js                                 |  4 +-
 tailwind.config.js                            |  1 +
 13 files changed, 273 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/clients/TheClients.vue
 create mode 100644 src/pages/clients/components/ClientsActionPopup.vue
 create mode 100644 src/pages/clients/components/ClientsTable.vue
 create mode 100644 src/pages/clients/components/ClientsTableCheckbox.vue
 create mode 100644 src/pages/clients/components/ClientsTableRow.vue
 create mode 100644 src/pages/clients/components/ClientsWrapper.vue
 delete mode 100644 src/pages/user/TheUser.vue

diff --git a/src/App.vue b/src/App.vue
index 8d75741..31469bc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.w-full.h-full.gap-y-2
+  .flex.flex-col.w-full.h-full.gap-y-4
     the-header
     .flex.flex-auto
       the-sidebar
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index a2f56a6..b23ee0b 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -8,3 +8,6 @@
   --font-grey-color: #9294A7
   --border-light-grey-color: #9294A7
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
+  --bg-hover-row-table: rgba(215, 217, 255, 0.25)
+  --default-white: #FFFFFF
+  --btn-red-color: #FF6F6F
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index beeaa9f..2b766ba 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -5,7 +5,7 @@
         .icon-home
       the-button-sidebar(id="calendar" path="#/calendar")
         .icon-calendar-2
-      the-button-sidebar(id="user" path="#/user")
+      the-button-sidebar(id="user" path="#/clients")
         .icon-person-2
     .flex.text-4xl.flex-col.gap-y-6
       the-button-sidebar(id="settings" path="#/settings")
@@ -24,5 +24,6 @@ export default {
 <style lang="sass" scoped>
 .sidebar
   max-width: 80px
-  background-color: #F8F8FF
+  background-color: #FFFFFF
+  border-top-right-radius: 4px
 </style>
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 99ae760..25f590f 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,8 +1,28 @@
 <template lang="pug">
+    div {{persons["person"]}}
 </template>
 
 <script>
+/* eslint-disable */
+
 export default {
   name: "TheCalendar",
+  data() {
+    return {
+      persons: { person: "dasda"},
+    };
+  },
+  methods: {
+    savePersons(data) {
+      console.log(data)
+      this.persons = data
+    },
+  },
+  mounted() {
+    fetch("https://afae35de-056c-4544-96a5-07f01c158778.mock.pstmn.io/urban")
+        .then((res) => res.json())
+        .then((data) => this.savePersons(data))
+  },
 };
 </script>
+,
diff --git a/src/pages/clients/TheClients.vue b/src/pages/clients/TheClients.vue
new file mode 100644
index 0000000..bfe6a5f
--- /dev/null
+++ b/src/pages/clients/TheClients.vue
@@ -0,0 +1,11 @@
+<template lang="pug">
+  clients-wrapper
+</template>
+
+<script>
+import ClientsWrapper from "@/pages/clients/components/ClientsWrapper";
+export default {
+  name: "TheClients",
+  components: { ClientsWrapper },
+};
+</script>
diff --git a/src/pages/clients/components/ClientsActionPopup.vue b/src/pages/clients/components/ClientsActionPopup.vue
new file mode 100644
index 0000000..67d5918
--- /dev/null
+++ b/src/pages/clients/components/ClientsActionPopup.vue
@@ -0,0 +1,33 @@
+<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 Удалить
+</template>
+
+<script>
+export default {
+  name: "ClientsActionPopup",
+};
+</script>
+
+<style lang="sass" scoped>
+.popup-wrapper
+  width: 180px
+  height: 136px
+  border-radius: 4px 0 4px 4px
+  background-color: var(--default-white)
+  box-shadow: var(--default-shadow)
+.keep-redaction
+  color: var(--font-dark-blue-color)
+.icon-redaction
+  color: var(--btn-blue-color)
+.delete
+  color: var(--btn-red-color)
+</style>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
new file mode 100644
index 0000000..3b86f01
--- /dev/null
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -0,0 +1,99 @@
+<template lang="pug">
+  .wrapper.px-6.pt-6.h-full.w-full.min-w-fit
+    table.w-full
+      thead.head-table
+        tr.head-row
+          th.w-3
+            .checkbox.px-4.py-3
+              clients-table-checkbox
+          th.name
+            .flex.px-4.justify-between.gap-x-40
+              span.text-sm ФИО
+              .icon-down-arrow.text-xsm.mt-1
+          th.age
+            .flex.px-4.justify-between
+              span.text-sm Возраст
+              .icon-down-arrow.text-xsm.mt-1
+          th
+            .px-4.text-left
+              span.text-sm Должность
+          th.priority
+            .flex.px-4.justify-between
+              span.text-sm Приоритет
+              .icon-down-arrow.text-xsm.mt-1
+          th
+            .phone.px-4.text-left
+              span.text-sm Телефон
+          th
+            .email.px-4.text-left
+              span.text-sm Email
+          th
+            .networks.px-4.text-left
+              span.text-sm Сети
+          th.meeting
+            .flex.px-4.justify-between.gap-x-11
+              span.text-sm Ближайшая встреча
+              .icon-down-arrow.text-xsm.mt-1
+          th.w-5
+            .do.px-4
+              span.text-sm Do
+      tbody
+        clients-table-row(v-for="client in dataClients"
+          :key="client.id"
+          :id="client.id"
+          :full-name="client.fullName"
+          :age="client.age"
+          :job-title="client.jobTitle"
+          :priority="client.priority"
+          :phone="client.phone"
+          :email="client.email"
+          :networks="client.networks"
+          :meeting-time="client.meetingTime"
+          )
+</template>
+
+<script>
+import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
+import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
+export default {
+  name: "ClientsTable",
+  components: { ClientsTableCheckbox, ClientsTableRow },
+  data() {
+    return {
+      dataClients: [
+        {
+          id: "1",
+          fullName: "Вильгейльм Арнольд Витальевич",
+          age: "34",
+          jobTitle: "Менеджер",
+          priority: "Высокий",
+          phone: "+7 (915) 657–21–14",
+          email: "Superboyband@yandex.ru",
+          networks: [],
+          meetingTime: {
+            date: "02.06.22",
+            time: "18:30–19:30",
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.head-table
+  color: var(--font-grey-color)
+  border-collapse: separate
+  border-bottom: 8px solid transparent
+.meeting
+  max-width: 180px
+.priority
+  max-width: 80px
+.head-row
+  border-bottom: 1px solid #D3D4DC
+.wrapper
+  background-color: var(--default-white)
+.color
+  background-color: red
+</style>
diff --git a/src/pages/clients/components/ClientsTableCheckbox.vue b/src/pages/clients/components/ClientsTableCheckbox.vue
new file mode 100644
index 0000000..876d62a
--- /dev/null
+++ b/src/pages/clients/components/ClientsTableCheckbox.vue
@@ -0,0 +1,14 @@
+<template lang="pug">
+  input.checkbox(type="checkbox")
+</template>
+
+<script>
+export default {
+  name: "ClientsTableCheckBox",
+};
+</script>
+
+<style lang="sass" scoped>
+.checkbox
+  border-color: var(--font-grey-color)
+</style>
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
new file mode 100644
index 0000000..894a858
--- /dev/null
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -0,0 +1,72 @@
+<template lang="pug">
+  tr.row-client.text-ms.cursor-pointer(:id="id")
+    td.py-5
+      .px-4.items-center
+        clients-table-checkbox
+    td.py-5
+      .px-4.font-semibold {{fullName}}
+    td.py-5
+      .px-4 {{age}}
+    td.py-5
+      .px-4 {{jobTitle}}
+    td.py-5
+      .px-4.flex.items-center.gap-x-2
+        .circle.w-2.h-2
+        span {{priority}}
+    td.py-5
+      .px-4 {{phone}}
+    td.py-5
+      .px-4 {{email}}
+    td.py-5
+      .px-4.flex
+        .w-fit.h-fit(v-for="network in networks" :key="network")
+    td.py-5
+      .px-4.gap-x-2.flex
+        span {{meetingTime.date}}
+        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
+</template>
+
+<script>
+import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
+import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
+export default {
+  name: "ClientsTableRow",
+  components: { ClientsTableCheckbox, ClientsActionPopup },
+  props: {
+    id: String,
+    fullName: String,
+    age: String,
+    jobTitle: String,
+    priority: String,
+    phone: String,
+    email: String,
+    networks: Array,
+    meetingTime: Object,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.row-client
+  color: var(--font-dark-blue-color)
+  border-bottom: 1px solid #D3D4DC
+  &:hover
+    background-color: var(--bg-hover-row-table)
+.circle
+  background-color: var(--font-grey-color)
+  border-radius: 50%
+.meeting-time
+  color: var(--font-grey-color)
+.dots-button
+  width: 20px
+  height: 20px
+  border-radius: 50%
+  color: var(--font-grey-color)
+  &:hover
+    background-color: var(--btn-blue-color)
+    color: var(--default-white)
+</style>
diff --git a/src/pages/clients/components/ClientsWrapper.vue b/src/pages/clients/components/ClientsWrapper.vue
new file mode 100644
index 0000000..efea2e3
--- /dev/null
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.w-full.mx-6
+    clients-table
+</template>
+
+<script>
+import ClientsTable from "@/pages/clients/components/ClientsTable";
+export default {
+  name: "ClientsWrapper",
+  components: { ClientsTable },
+};
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/pages/user/TheUser.vue b/src/pages/user/TheUser.vue
deleted file mode 100644
index ebea190..0000000
--- a/src/pages/user/TheUser.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template lang="pug">
-  div UserPage
-</template>
-
-<script>
-export default {
-  name: "TheUser",
-};
-</script>
diff --git a/src/router.js b/src/router.js
index cd09548..4465bdc 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import TheHome from "@/pages/home/TheHome.vue";
 import TheCalendar from "@/pages/calendar/TheCalendar";
-import TheUser from "@/pages/user/TheUser";
+import TheUser from "@/pages/clients/TheClients";
 import TheSettings from "@/pages/settings/TheSettings";
 
 export default createRouter({
@@ -9,7 +9,7 @@ export default createRouter({
   routes: [
     { path: "/", component: TheHome },
     { path: "/calendar", component: TheCalendar },
-    { path: "/user", component: TheUser },
+    { path: "/clients", component: TheUser },
     { path: "/settings", component: TheSettings },
   ],
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index 608c681..126b82f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
         sans: ["Raleway", "sans-serif"],
       },
       fontSize: {
+        xsm: ["10px", { lineHeight: "12px" }],
         xxs: ["12px", { lineHeight: "14px" }],
         xs: ["13px", { lineHeight: "15px" }],
         sm: ["14px", { lineHeight: "16px" }],