Before dogovors

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <h1>Сделка</h1>
-    <div><a href="#" @click.prevent="createDeal(17539)">Создать новую сделку</a></div>
+    <div><a href="#" @click.prevent="createDeal(1481170)">Создать новую сделку</a></div>
-    <div><a href="#" @click.prevent="editDeal(17539, 46)">Открыть тестовую сделку</a></div>
+    <div><a href="#" @click.prevent="editDeal(1481170, 46)">Открыть тестовую сделку</a></div>
   </div>
   <DynamicDialog />
 </template>

src/components/deal/DealModal.vue

@@ -343,6 +343,7 @@
                     dateFormat="dd.mm.yy"
                     :showIcon="true"
                     class="w-full"
+                    :class="{ 'p-invalid': errors.deal_date }"
                 />
                 <small v-if="errors.deal_date" class="p-error">{{ errorMessages.deal_date }}</small>
               </div>
@@ -403,7 +404,7 @@
 
 <script setup>
 import MyButton from "@/shared/UI/MyButton.vue";
-import {computed, inject, onMounted, ref, watch} from "vue";
+import {computed, inject, onMounted, ref, watch, nextTick } from "vue";
 import {useLaravelApi} from '@/composables/useLaravelApi';
 //import useDeal from '@/composables/useDeal';
 import {useToast} from "primevue/usetoast";
@@ -1160,11 +1161,31 @@ const removeInnerDoc = async (docId) => {
   }
 };
 
+const scrollToFirstError = () => {
+  const firstErrorField = document.querySelector('.p-invalid');
+
+  if (firstErrorField) {
+    firstErrorField.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    });
+
+    firstErrorField.classList.add('error-highlight');
+    setTimeout(() => {
+      firstErrorField.classList.remove('error-highlight');
+    }, 2000);
+  }
+};
+
 // Сохранение сделки
 const saveDeal = async () => {
 
   // Проверяем валидацию перед сохранением
   if (!validateForm()) {
+
+    await nextTick();
+    scrollToFirstError();
+
     toast.add({
       severity: 'error',
       summary: 'Ошибка',

src/components/deal/addEdit/DocsCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 pr-4">
     <div class="document-card p-4 rounded flex">
-      <div class="deal-document-thumbnail w-16 h-16 flex-shrink-0 rounded-lg overflow-hidden">
+      <div class="deal-document-thumbnail w-16 h-16 shrink-0 rounded-lg overflow-hidden">
         <img v-if="isImage" :src="fileUrl" alt="Превью документа" class="w-full h-full object-cover" />
 
         <img v-else
@@ -12,7 +12,7 @@
       </div>
 
       <!-- Название документа -->
-      <div class="ml-4 flex flex-col justify-between flex-grow">
+      <div class="ml-4 flex flex-col justify-between grow">
         <div class="font-bold text-gray-800">{{ doc.name || 'N/A' }}</div>
         <div class="flex">
           <img src="@/shared/assets/icons/doc.svg" alt="Договор" class="w-5 h-5">
@@ -20,10 +20,10 @@
         </div>
       </div>
 
-<!--      <button @click="confirmDelete" class="ml-auto mt-2 px-4 py-2 rounded">-->
+      <button @click="confirmDelete" class="ml-auto mt-2 px-4 py-2 rounded">
-<!--&lt;!&ndash;        <img src="@/shared/assets/icons/trash.svg" alt="Удалить" class="w-6 h-6">&ndash;&gt;-->
+<!--        <img src="@/shared/assets/icons/trash.svg" alt="Удалить" class="w-6 h-6">-->
-<!--        <span class="simple-button delete" title="Удалить"><i class="jw-action-icon-delete"></i></span>-->
+        <span class="simple-button delete" title="Удалить"><i class="jw-action-icon-delete"></i></span>
-<!--      </button>-->
+      </button>
     </div>
   </div>
 
@@ -34,6 +34,8 @@
 // import { useToast } from 'primevue/usetoast';
  import { computed } from "vue";
 import defaultIconUrl from '@/shared/assets/images/deal/deal-doc-icon.png';
+import {useConfirm} from "primevue/useconfirm";
+import {useToast} from "primevue/usetoast";
 
 const props = defineProps({
   doc: {
@@ -67,49 +69,49 @@ const fileExtension = computed(() => {
 const getFileName = (fullPath) => {
   return fullPath.split('/').pop();
 }
-//
+
-//
+
-// const emit = defineEmits(['remove']);
+const emit = defineEmits(['remove']);
-//
+
-// const confirm = useConfirm();
+const confirm = useConfirm();
-// const toast = useToast();
+const toast = useToast();
-//
+
-// const confirmDelete = (event) => {
+const confirmDelete = (event) => {
-//   confirm.require({
+  confirm.require({
-//     target: event.currentTarget,
+    target: event.currentTarget,
-//     message: `Удалить документ "${props.doc.name}"?`,
+    message: `Удалить документ "${props.doc.name}"?`,
-//     header: 'Подтверждение удаления',
+    header: 'Подтверждение удаления',
-//     acceptLabel: 'Удалить',
+    acceptLabel: 'Удалить',
-//     rejectLabel: 'Отмена',
+    rejectLabel: 'Отмена',
-//     acceptClass: 'p-button-danger',
+    acceptClass: 'p-button-danger',
-//     accept: async () => {
+    accept: async () => {
-//       try {
+      try {
-//         emit('remove', props.doc.id);
+        emit('remove', props.doc.id);
-//         toast.add({
+        toast.add({
-//           severity: 'success',
+          severity: 'success',
-//           summary: 'Успешно',
+          summary: 'Успешно',
-//           detail: 'Документ удален',
+          detail: 'Документ удален',
-//           life: 3000
+          life: 3000
-//         });
+        });
-//       } catch (error) {
+      } catch (error) {
-//         toast.add({
+        toast.add({
-//           severity: 'error',
+          severity: 'error',
-//           summary: 'Ошибка',
+          summary: 'Ошибка',
-//           detail: 'Не удалось удалить документ',
+          detail: 'Не удалось удалить документ',
-//           life: 3000
+          life: 3000
-//         });
+        });
-//       }
+      }
-//     },
+    },
-//     reject: () => {
+    reject: () => {
-//       toast.add({
+      toast.add({
-//         severity: 'info',
+        severity: 'info',
-//         summary: 'Отменено',
+        summary: 'Отменено',
-//         detail: 'Удаление отменено',
+        detail: 'Удаление отменено',
-//         life: 2000
+        life: 2000
-//       });
+      });
-//     }
+    }
-//   });
+  });
-// };
+};
 </script>
 
 <style scoped>