fix_error

src/pages/CompanyMaskPage.vue

@@ -1,17 +1,27 @@
 <template>
   <pn-page-card>
     <template #title>
-      {{$t('company__mask')}}
-      <q-btn
-        v-if="!checkIsDirty(mask, originalMask)"
-        @click = "updateCompanies()"
-        flat round
-        icon="mdi-check"
-      />
+      {{$t('mask__title')}}
     </template>
+
+    <template #footer>
+      <q-btn
+        rounded color="primary"
+        class="w100 q-mt-md q-mb-xs fix-disabled-btn"
+        @click="updateCompanies()"
+        >
+        {{ $t('mask__btn_ok') }}
+      </q-btn>
+    </template>
+
     <pn-scroll-list>
       <template #card-body-header>
-        <div style="min-height: var(--top-raduis);"/>
+        <div class="q-ma-sm q-pa-sm bg-grey-11 flex no-wrap items-center" style="border-radius: var(--top-raduis);">
+          <q-icon name="mdi-information q-pr-xs" size="sm" color="primary"/>
+          <span class="text-caption">
+             {{ $t('mask__info_block')}}
+          </span>
+        </div>
       </template>
       <q-table
         flat
@@ -48,7 +58,6 @@
             </q-th>
           </q-tr>
         </template>
-
               
         <template #body="props">
           <q-tr :props="props">
@@ -144,7 +153,6 @@
         <q-card-section class="q-pt-sm">
           <p>{{ $t('mask__help_message1')}}</p>
           <p>{{ $t('mask__help_message2')}}</p>
-          <p>{{ $t('mask__help_message3')}}</p>
         </q-card-section>
       </q-card>
     </q-dialog>
@@ -152,9 +160,8 @@
 </template>
     
 <script setup lang="ts">
-  import { ref, computed, onMounted } from 'vue'
+  import { ref, computed, watch } from 'vue'
   import { useCompaniesStore } from 'stores/companies'
-  import type { CompanyMask } from 'types/Company'
   import { useRouter } from 'vue-router'
 
   const showDialogHelp = ref<boolean>(false)
@@ -164,6 +171,12 @@
   const companies = computed(() => companiesStore.companies)
   const companiesMask = computed(() => companiesStore.companiesMask)
 
+  const tableColumns = [
+    { name: 'checkbox', field: 'checkbox', label: 'checkbox', sortable: false, style: "width: 10%" },
+    { name: 'name', field: 'name', align: 'left' as const, label: 'name', sortable: false, style: "width: 45% !important; text-wrap: auto" },
+    { name: 'visible', field: 'visible', align: 'center' as const, label: 'visible', sortable: false, style: "width: 45% !important" }
+  ]
+  
   interface DisplayCompany {
     id: number
     name: string
@@ -174,15 +187,36 @@
     hasFocus: boolean
   }
 
-  // 
   const displayCompanies = ref<DisplayCompany[]>([])
-  const originalMask = ref<CompanyMask[]>([])
 
-  const tableColumns = [
-    { name: 'checkbox', field: 'checkbox', label: 'checkbox', sortable: false, style: "width: 10%" },
-    { name: 'name', field: 'name', align: 'left' as const, label: 'name', sortable: false, style: "width: 45% !important; text-wrap: auto" },
-    { name: 'visible', field: 'visible', align: 'center' as const, label: 'visible', sortable: false, style: "width: 45% !important" }
-  ]
+  watch(
+    () => [companies.value, companiesMask.value],
+    () => {
+      updateDisplayCompanies()
+    },
+    { immediate: true, deep: true }
+  )
+
+  function updateDisplayCompanies() {
+    if (companies.value.length === 0 || companiesMask.value.length === 0) return
+    
+    displayCompanies.value = companies.value
+      .filter(el => !el.is_own)
+      .map(el => ({
+        id: el.id,
+        name: el.name,
+        logo: el.logo ?? '',
+        masked: companiesStore.checkCompanyMasked(el.id),
+        company_list: getList(el.id),
+        isMenuOpen: false,
+        hasFocus: false
+      }))
+  }
+
+  function getList (companyId: number) {
+    const company = companiesMask.value.find(el => Number(el.company_id) === companyId)
+    return company?.company_list ?? []
+  }
 
   const mask = computed(() => displayCompanies.value
     .filter(el => el.masked)
@@ -193,8 +227,8 @@
     .sort((a, b) => compareNumbers(a.company_id, b.company_id))
   )
 
-  function getCompanyById(id: number) {
-    return companies.value.find(c => c.id === id);
+  function getCompanyById (id: number) {
+    return companies.value.find(c => c.id === id)
   }
 
   function companiesSelect (id :number) {
@@ -220,61 +254,6 @@
     return a < b ? -1 : 1
   }
 
-  function checkIsDirty (arr1: CompanyMask[], arr2: CompanyMask[]): boolean {
-    // Проверка длины массивов
-    if (arr1.length !== arr2.length) return false
-
-    // Функция для нормализации объекта в строковый ключ
-    const getKey = (obj: { company_id: number; company_list: number[] }): string => {
-        const sortedList = [...obj.company_list].sort(compareNumbers)
-        return `${obj.company_id}|${sortedList.join(',')}`
-    }
-
-    // Создаем Map для подсчета объектов в первом массиве
-    const countMap = new Map<string, number>()
-    for (const item of arr1) {
-        const key = getKey(item)
-        countMap.set(key, (countMap.get(key) || 0) + 1)
-    }
-
-    // Проверяем объекты второго массива
-    for (const item of arr2) {
-        const key = getKey(item)
-        const count = countMap.get(key) || 0
-        
-        if (count === 0) return false
-        
-        countMap.set(key, count - 1)
-    }
-
-    return true
-  }
-
-  onMounted(() => {
-
-    function getList (companyId: number) {
-      const company = companiesMask.value.find(el => el.company_id === companyId)
-      return company?.company_list ?? []
-    }
-
-    displayCompanies.value = companies.value
-      .filter(el => !el.is_own)
-      .map(el => ({
-        id: el.id,
-        name: el.name,
-        logo: el?.logo ?? '',
-        masked: companiesStore.checkCompanyMasked(el.id),
-        company_list: getList(el.id),
-        isMenuOpen: false,
-        hasFocus: false
-      }))
-
-      console.log(companies.value)
-      console.log(displayCompanies.value)
-
-    originalMask.value = [ ...(companiesMask.value.sort((a, b) => compareNumbers(a.company_id, b.company_id))) ]
-  })
-
 </script>
 
 <style scoped lang="scss">
@@ -306,4 +285,3 @@
     color: 'brand';
   }
 </style>
-