WIP Настроила inputDate на редактировании клиента

src/components/base/BaseInputDate.vue

@@ -37,6 +37,7 @@ export default {
 
 <style lang="sass" scoped>
 .field
+  height: 100%
   display: flex
   align-items: center
   border: 1.5px solid var(--border-light-grey-color)

src/pages/clients/components/ClientsTableRow.vue

@@ -55,7 +55,7 @@
           :is-open-change="isOpenChange",
           :width="columnBody.find(el => el.name === 'fullName').width"
         )
-        table-cell-body-age(
+        table-cell-body-birthday(
           v-if="!rowOverlay",
           :value="dataClient",
           :is-open-change="isOpenChange",
@@ -120,7 +120,7 @@ import TableCellBodyEmail from "@/pages/clients/components/cells/TableCellBodyEm
 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 TableCellBodyBirthday from "@/pages/clients/components/cells/TableCellBodyBirthday";
 import TableCellBodyName from "@/pages/clients/components/cells/TableCellBodyName";
 import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
@@ -141,7 +141,7 @@ export default {
     ClientsTableCheckbox,
     ClientsActionPopup,
     TableCellBodyName,
-    TableCellBodyAge,
+    TableCellBodyBirthday,
     TableCellBodyJobTitle,
     TableCellBodyPriority,
     TableCellBodyPhone,
@@ -243,19 +243,22 @@ export default {
       let clientName = `${this.client.last_name || ""} ${
         this.client.first_name || ""
       } ${this.client.patronymic || ""}`;
+      let age = this.dataClient.age
+        ? moment(this.dataClient.age).format("YYYY-MM-DD")
+        : null;
 
       if (!this.dataClient.fullName) this.dataClient.fullName = clientName;
       else if (this.dataClient.fullName !== clientName)
         data.full_name = this.dataClient.fullName;
-
+      if (age !== this.client.birth_date && age) data.birth_date = age;
-      if (this.dataClient.age !== this.client.birth_date && this.dataClient.age)
+      else if (!age && this.client.birth_date) {
-        data.birth_date = this.dataClient.age;
-      else if (!this.dataClient.age && this.client.birth_date) {
         this.addErrorNotification(
           "Некорректная дата рождения",
           "Пожалуйста, введите дату рождения корректно"
         );
-        this.dataClient.age = this.client.birth_date || "";
+        this.dataClient.age = this.client.birth_date
+          ? new Date(this.client.birth_date)
+          : null;
       }
       if (foundElement.id !== this.client.priority)
         data.priority = foundElement.id;
@@ -267,8 +270,10 @@ export default {
           "Некорректная дата рождения",
           "Дата рождения позже текущего дня"
         );
-        this.dataClient.age = this.client.birth_date || "";
+        this.dataClient.age = this.client.birth_date
-      } else if (!Object.keys(data).length === 0)
+          ? new Date(this.client.birth_date)
+          : null;
+      } else if (Object.keys(data).length !== 0)
         fetchWrapper
           .post(`general/person/${this.client.id}/update/`, {
             ...data,
@@ -691,7 +696,9 @@ export default {
             fullName: `${this.client.last_name || ""} ${
               this.client.first_name || ""
             } ${this.client.patronymic || ""}`,
-            age: this.client.birth_date || "",
+            age: this.client.birth_date
+              ? new Date(this.client.birth_date)
+              : null,
             priority: this.prioritySettings.settings.find(
               (el) =>
                 el.priority === this.client.priority ||

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

@@ -2,27 +2,39 @@
   .flex.box-border.px-4.items-center.w-full.text-sm(
     :style="{ minWidth : width + 'px', maxWidth : width + 'px' }"
   )
-    span(v-if="!isOpenChange") {{value.age ? value.age.split("-").reverse().join(".") : ""}}
+    span(v-if="!isOpenChange") {{ birthday }}
-    base-input-date.input.max-h-10(
+    base-input-date.input.h-10(
       v-if="isOpenChange",
       @click.stop,
-      v-model:value="value.age"
+      v-model="value.age"
     )
 </template>
 
 <script>
 import BaseInputDate from "@/components/base/BaseInputDate";
+import * as moment from "moment/moment";
 export default {
-  name: "TableCellBodyAge",
+  name: "TableCellBodyBirthday",
   components: { BaseInputDate },
   props: {
     value: Object,
     width: Number,
     isOpenChange: Boolean,
   },
+  computed: {
+    birthday() {
+      return this.value.age
+        ? moment(this.value.age)
+            .format("YYYY-MM-DD")
+            .split("-")
+            .reverse()
+            .join(".")
+        : "";
+    },
+  },
 };
 </script>
 <style lang="sass" scoped>
 .input
-  border: 1.5px solid var(--border-light-grey-color)
+  background-color: var(--default-white)
 </style>