Исправлена верстка таблицы

server.js

@@ -14,7 +14,7 @@ export function clientsServer() {
             phone: "+7 (915) 657–21–14",
             email: "Superboyband@yandex.ru",
             networks: [],
-            meetingTime: {
+            meeting: {
               date: "02.06.22",
               time: "18:30–19:30",
             },
@@ -28,7 +28,7 @@ export function clientsServer() {
             phone: "+7 (574) 364–53–36",
             email: "antimag@gmail.com",
             networks: [],
-            meetingTime: {
+            meeting: {
               date: "14.07.22",
               time: "17:30–21:30",
             },

src/pages/clients/components/ClientsTable.vue

@@ -1,45 +1,11 @@
 <template lang="pug">
   .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" :open-form-create="openFormCreate" )
+    clients-table-hat(:is-open-actions="marked.length" :open-form-create="openFormCreate")
-    table.w-full
+    .flex.flex-col.h-full.gap-y-2
-      thead.head-table
+      clients-table-header(:check="selectedCheck" :is-check="selectAll")
-        tr.head-row
+      .flex.flex-col
-          th.w-3
+        clients-table-row(
-            .px-4.py-3
+          v-for="client in dataClients"
-              clients-table-checkbox(:is-check="selectAll" :check="selectedCheck" id="all")
-          th
-            .flex.px-4.justify-between
-              span.text-sm ФИО
-              img.cursor-pointer(src="@/assets/icons/sort-number.svg" alt="SortNumber")
-          th
-            .flex.px-4.justify-between.gap-x-6
-              span.text-sm Возраст
-              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
-          th
-            .px-4.text-left
-              span.text-sm Должность
-          th
-            .flex.relative.px-4.justify-between.gap-x-3
-              span.text-sm Приоритет
-              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
-          th
-            .px-4.text-left
-              span.text-sm Телефон
-          th
-            .px-4.text-left
-              span.text-sm Email
-          th
-            .px-4.text-left
-              span.text-sm.leading-8 Сети
-          th
-            .flex.px-4.justify-between.gap-x-11
-              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
-        clients-table-row(v-for="client in dataClients"
           :key="client.id"
           :id="client.id"
           :is-check="marked.includes(client.id)"
@@ -51,17 +17,23 @@
           :phone="client.phone"
           :email="client.email"
           :networks="client.networks"
-          :meeting-time="client.meetingTime"
+          :meeting-time="client.meeting"
           )
 </template>
 
 <script>
 import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
+import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
 import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 export default {
   name: "ClientsTable",
-  components: { ClientsTableCheckbox, ClientsTableRow, ClientsTableHeader },
+  components: {
+    ClientsTableCheckbox,
+    ClientsTableRow,
+    ClientsTableHat,
+    ClientsTableHeader,
+  },
   props: {
     openFormCreate: Function,
   },
@@ -81,7 +53,7 @@ export default {
       fetch("/api/clients").then((res) => res.json()).then((data) => this.saveDataClients(data))
     },
     selectedCheck(e) {
-      if (e.target.id === "all") {
+      if (e.target.id === "checkbox") {
         this.selectAll = !this.selectAll;
         this.marked = this.dataClients.map((el) => el.id);
         !this.selectAll && (this.marked = []);
@@ -107,21 +79,9 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.icon
+.row-body
-  color: var(--font-dark-blue-color)
+  min-height: 56px
-  &.priority-open
+  border-bottom: 1px solid var(--border-light-grey-color)
-    transform: rotate(180deg)
-.head-table
-  color: var(--font-grey-color)
-.tbody:before
-    content: "-"
-    display: block
-    line-height: 8px
-    color: transparent
-.head-row
-  border-bottom: 1px solid #D3D4DC
 .wrapper
   background-color: var(--default-white)
-.color
-  background-color: red
 </style>

src/pages/clients/components/ClientsTableHat.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+  .flex.justify-between.w-full.h-fit
+    .flex.gap-2.w-fit.h-fit
+      .input
+        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===1")
+    .flex.w-fit.h-fit.gap-x-2
+      bass-export-button(:only-icon="true")
+      base-create-button(@click="openFormCreate" :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: {
+    openFormCreate: Function,
+    isOpenActions: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.input
+  width: 280px
+  height: fit-content
+.filter-button
+  border-radius: 4px
+  border: 2px solid var(--border-light-grey-color)
+</style>

src/pages/clients/components/ClientsTableHeader.vue

@@ -1,42 +1,35 @@
 <template lang="pug">
-  .flex.justify-between.w-full.h-fit
+  .flex.row.text-base.font-semibold
-    .flex.gap-2.w-fit.h-fit
+    clients-table-cell-header(v-for="cell in columnHead" :title="cell.title" :width="cell.width" :class="!cell.title && 'px-3'")
-      .input
+      .icon-down-arrow.icon.text-xsm.cursor-pointer(v-if="cell.iconHead && cell.name !== 'fullName'" )
-        base-input(:with-icon="true")
+      img.cursor-pointer(v-if="cell.iconHead && cell.name === 'fullName'" src="@/assets/icons/sort-number.svg" alt="SortNumber")
-      button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
+      clients-table-checkbox(v-if="cell.name === 'checkbox'" :id="cell.name" :check="check" :is-check="isCheck")
-        .icon-filter.text-xl.leading-4
-    clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
-    .flex.w-fit.h-fit.gap-x-2
-      bass-export-button(:only-icon="true")
-      base-create-button(@click="openFormCreate" :with-icon="true")
-
 </template>
 
 <script>
-import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
+import { column } from "@/pages/clients/utils/tableConfig";
-import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+import ClientsTableCellHeader from "@/pages/clients/components/cells/ClientsTableCellHeader";
-import BassExportButton from "@/components/base/buttons/BassExportButton";
+import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
-import BaseInput from "@/components/base/BaseInput";
 export default {
-  name: "ClientsTAbleHeader",
+  name: "ClientsTableHead",
-  components: {
+  components: { ClientsTableCheckbox, ClientsTableCellHeader },
-    BaseInput,
-    BassExportButton,
-    BaseCreateButton,
-    ClientsTableHeaderActions,
-  },
   props: {
-    openFormCreate: Function,
+    check: Function,
-    isOpenActions: Number,
+    isCheck: Boolean,
+  },
+  data() {
+    return {
+      columnHead: column,
+    };
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.input
+.row
-  width: 280px
+  min-height: 36px
-  height: fit-content
+  color: var(--font-grey-color)
-.filter-button
+  border-bottom: 1px solid var(--border-light-grey-color)
-  border-radius: 4px
+.icon
-  border: 2px solid var(--border-light-grey-color)
+  color: var(--font-dark-blue-color)
 </style>

src/pages/clients/components/ClientsTableRow.vue

@@ -1,44 +1,50 @@
 <template lang="pug">
-  tr.row-client.text-ms.cursor-pointer(:id="id")
+  .row-body.flex.w-full.cursor-pointer
-    td.py-5
+    .check-box.flex.justify-center.items-center
-      .px-4.items-center.w-fit
+      clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
-        clients-table-checkbox(:is-check="isCheck" :check="check" :id="id")
+    table-cell-body-name(:value="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
-    td.py-5
+    table-cell-body-age(:value="age" :width="columnBody.find(el => el.name === 'age').width")
-      .px-4.font-semibold.whitespace-nowrap {{fullName}}
+    table-cell-body-job-title(:value="jobTitle" :width="columnBody.find(el => el.name === 'jobTitle').width")
-    td.py-5
+    table-cell-body-priority(:value="priority" :width="columnBody.find(el => el.name === 'priority').width")
-      .px-4.whitespace-nowrap {{age}}
+    table-cell-body-phone(:value="phone" :width="columnBody.find(el => el.name === 'phone').width")
-    td.py-5
+    table-cell-body-email(:value="email" :width="columnBody.find(el => el.name === 'email').width")
-      .px-4.whitespace-nowrap {{jobTitle}}
+    table-cell-body-networks(:networks="networks" :width="columnBody.find(el => el.name === 'networks').width")
-    td.py-5
+    table-cell-body-meeting(:date="meetingTime.date" :time="meetingTime.time" :width="columnBody.find(el => el.name === 'meeting').width")
-      .px-4.whitespace-nowrap.flex.items-center.gap-x-2
+    .dots.flex.justify-center.items-center
-        .circle.w-2.h-2
+      .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
-        span {{priority}}
+        clients-action-popup(v-if="isOpenPopup")
-    td.py-5
-      .px-4.whitespace-nowrap {{phone}}
-    td.py-5
-      .px-4.whitespace-nowrap {{email}}
-    td.py-5
-      .px-4.whitespace-nowrap.flex
-        .w-fit.h-fit(v-for="network in networks" :key="network")
-    td.py-5
-      .px-4.whitespace-nowrap.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(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
-          clients-action-popup(v-if="isOpenPopup")
 </template>
 
 <script>
+import TableCellBodyMeeting from "@/pages/clients/components/cells/TableCellBodyMeeting";
+import TableCellBodyNetworks from "@/pages/clients/components/cells/TableCellBodyNetworks";
+import TableCellBodyEmail from "@/pages/clients/components/cells/TableCellBodyEmail";
+import TableCellBodyPhone from "@/pages/clients/components/cells/TableCellBodyPhone";
+import TableCellBodyPriority from "@/pages/clients/components/cells/TableCellBodyPriority";
+import TableCellBodyJobTitle from "@/pages/clients/components/cells/TableCellBodyJobTitle";
+import TableCellBodyAge from "@/pages/clients/components/cells/TableCellBodyAge";
+import TableCellBodyName from "@/pages/clients/components/cells/TableCellBodyName";
 import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
+import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "ClientsTableRow",
-  components: { ClientsTableCheckbox, ClientsActionPopup },
+  components: {
+    ClientsTableCheckbox,
+    ClientsActionPopup,
+    TableCellBodyName,
+    TableCellBodyAge,
+    TableCellBodyJobTitle,
+    TableCellBodyPriority,
+    TableCellBodyPhone,
+    TableCellBodyEmail,
+    TableCellBodyNetworks,
+    TableCellBodyMeeting,
+  },
   data() {
     return {
       isOpenPopup: false,
+      columnBody: column,
     };
   },
   props: {
@@ -67,16 +73,15 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.row-client
+.row-body
   color: var(--font-dark-blue-color)
   border-bottom: 1px solid #D3D4DC
   &:hover
     background-color: var(--bg-hover-row-table)
-.circle
+.check-box
-  background-color: var(--font-grey-color)
+  min-width: 36px
-  border-radius: 50%
+.dots
-.meeting-time
+  min-width: 53px
-  color: var(--font-grey-color)
 .dots-button
   width: 20px
   height: 20px

src/pages/clients/components/cells/ClientsTableCellHeader.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+  .flex.box-border.justify-between.px-4.items-center(:style="{ minWidth : width + 'px' }" :class="{width:generateWidth}")
+    span.text-sm(v-if="title") {{title}}
+    slot
+</template>
+
+<script>
+export default {
+  name: "ClientsTableCellHeader",
+  props: {
+    title: String,
+    width: Number,
+  },
+  computed: {
+    generateWidth() {
+      if (!this.title || this.title === "Do") {
+        return false;
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.width
+  width: 100%
+</style>

src/pages/clients/components/cells/TableCellBodyAge.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+    span.text-sm {{value}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyAge",
+  props: {
+    value: String,
+    width: Number,
+  },
+};
+</script>

src/pages/clients/components/cells/TableCellBodyEmail.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+    span.text-sm {{value}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyEmail",
+  props: {
+    value: String,
+    width: Number,
+  },
+};
+</script>

src/pages/clients/components/cells/TableCellBodyJobTitle.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+    span.text-sm {{value}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyJobTitle",
+  props: {
+    value: String,
+    width: Number,
+  },
+};
+</script>

src/pages/clients/components/cells/TableCellBodyMeeting.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.gap-x-2.w-full(:style="{ minWidth : width + 'px' }")
+    span.text-sm {{date}}
+    span.time.text-xs {{time}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyMeeting",
+  props: {
+    date: String,
+    time: String,
+    width: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.time
+  color: var(--font-grey-color)
+</style>

src/pages/clients/components/cells/TableCellBodyName.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.gap-x-3.w-full(:style="{ minWidth : width + 'px' }")
+    img(v-if="imgUrl" :src="imgUrl" alt="Avatar")
+    span.text-sm.font-semibold {{value}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyName",
+  props: {
+    value: String,
+    width: Number,
+    imgUrl: String,
+  },
+};
+</script>

src/pages/clients/components/cells/TableCellBodyNetworks.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+    .w-5.h-5(v-for="network in networks")
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyNetworks",
+  props: {
+    networks: Array,
+    width: Number,
+  },
+};
+</script>

src/pages/clients/components/cells/TableCellBodyPhone.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+    span.text-sm {{value}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyPhone",
+  props: {
+    value: String,
+    width: Number,
+  },
+};
+</script>

src/pages/clients/components/cells/TableCellBodyPriority.vue

@@ -0,0 +1,24 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.gap-x-2.w-full(:style="{ minWidth : width + 'px' }")
+    .dot.w-2.h-2
+    span.text-sm(:style="{ color : color }") {{value}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyPriority",
+  props: {
+    value: String,
+    width: Number,
+    color: {
+      default: "#9294A7",
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.dot
+  background-color: var(--font-grey-color)
+  border-radius: 50%
+</style>

src/pages/clients/utils/tableConfig.js

@@ -0,0 +1,61 @@
+export const column = [
+  {
+    name: "checkbox",
+    iconHead: false,
+    width: 36,
+  },
+  {
+    name: "fullName",
+    title: "ФИО",
+    iconHead: true,
+    width: 400,
+  },
+  {
+    name: "age",
+    title: "Возраст",
+    iconHead: true,
+    width: 140,
+  },
+  {
+    name: "jobTitle",
+    title: "Должность",
+    iconHead: false,
+    width: 200,
+  },
+  {
+    name: "priority",
+    title: "Приоритет",
+    iconHead: true,
+    width: 124,
+  },
+  {
+    name: "phone",
+    title: "Телефон",
+    iconHead: false,
+    width: 170,
+  },
+  {
+    name: "email",
+    title: "Email",
+    iconHead: false,
+    width: 250,
+  },
+  {
+    name: "networks",
+    title: "Сети",
+    iconHead: false,
+    width: 152,
+  },
+  {
+    name: "meeting",
+    title: "Ближайшая встреча",
+    iconHead: true,
+    width: 220,
+  },
+  {
+    name: "dots",
+    title: "Do",
+    iconHead: false,
+    width: 53,
+  },
+];