shared-ritm 1.2.99 → 1.2.101

package/src/common/app-table/AppTable.vue

@@ -1,305 +1,312 @@
-<template>
-  <div class="flex flex-col" style="height: 100%; min-height: 100%">
-    <q-table
-      v-model:selected="selected"
-      :rows="rows.value"
-      :columns="resCols"
-      row-key="id"
-      flat
-      bordered
-      hide-bottom
-      class="full-width"
-      :rows-per-page-options="[0]"
-      :selection="props.enableMultiSelect ? 'multiple' : 'none'"
-      style="height: 100%"
-      @row-click="rowClick"
-    >
-      <template #header-selection="scope">
-        <q-toggle v-model="scope.selected" />
-      </template>
-
-      <template #body-selection="scope">
-        <q-toggle v-model="scope.selected" />
-      </template>
-
-      <template #body-cell-index="cellProps">
-        <q-td :props="cellProps" class="text-center" :class="{ 'q-td--no-hover': noHover }">
-          {{ cellProps.rowIndex + 1 + (meta.value.currentPage - 1) * meta.value.perPage }}
-        </q-td>
-      </template>
-
-      <template v-for="col in resCols" :key="col.name" #[`header-cell-${col.name}`]="propsSlot">
-        <q-th
-          :props="propsSlot"
-          :class="{ 'cursor-pointer': col.filterType, actions: col.name === 'actions' }"
-          :style="col.style"
-        >
-          <div
-            v-if="col.filterType"
-            class="row items-center no-wrap"
-            @click.stop="emit('open-filter-menu', col.name, !filterMenus.value[col.name])"
-          >
-            <filter-icon class="q-mr-xs" />
-            <span>{{ col.label }}</span>
-            <div
-              v-if="['multi', 'single'].includes(col.filterType) && columnFilters.value[col.name]?.length"
-              class="label-length"
-            >
-              - {{ col.filterType === 'multi' ? columnFilters.value[col.name]?.length : 1 }}
-            </div>
-          </div>
-          <div v-else>{{ col.label }}</div>
-
-          <q-menu
-            v-if="col.filterType"
-            :model-value="filterMenus.value[col.name]"
-            fit
-            max-height="300px"
-            class="filter-menu"
-            @update:model-value="isOpen => emit('open-filter-menu', col.name, isOpen)"
-          >
-            <div class="filter-content">
-              <q-input v-model="localSearches[col.name]" dense outlined placeholder="Поиск" class="q-mb-sm" clearable />
-              <q-scroll-area style="height: 200px">
-                <q-list style="min-width: 200px">
-                  <q-item v-for="option in filteredOptions[col.name]" :key="`${col.name}-${option.id}`" tag="label">
-                    <q-item-section avatar>
-                      <q-checkbox
-                        v-if="col.filterType === 'multi'"
-                        dense
-                        :model-value="
-                          Array.isArray(columnFilters.value[col.name]) &&
-                          columnFilters.value[col.name]?.includes(option.name)
-                        "
-                        @update:model-value="() => emit('toggle-filter-value', col.name, option.name)"
-                      />
-                      <q-radio
-                        v-else
-                        dense
-                        :model-value="columnFilters.value[col.name]"
-                        :val="option.name"
-                        @update:model-value="emit('toggle-filter-value', col.name, $event)"
-                      />
-                    </q-item-section>
-                    <q-item-section>{{ option.name }}</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-scroll-area>
-
-              <div class="filter-footer">
-                <q-btn color="negative" flat dense label="Сбросить фильтр" @click="emit('clear-filter', col.name)" />
-              </div>
-            </div>
-          </q-menu>
-        </q-th>
-      </template>
-
-      <template #body-cell="cellProps">
-        <q-td
-          :props="cellProps"
-          :class="{
-            'q-td--no-hover': noHover || cellProps.col.name === 'actions',
-            actions: cellProps.col.name === 'actions',
-          }"
-        >
-          <div v-if="cellProps.col.name === 'actions'" class="actions__btns">
-            <q-btn square icon="edit" size="sm" unelevated title="Редактировать" @click="emit('edit', cellProps.row)" />
-          </div>
-          <q-badge
-            v-else-if="cellProps.col.badge && typeof cellProps.value === 'boolean'"
-            :color="
-              cellProps.col.badge.colorTrue && cellProps.value
-                ? cellProps.col.badge.colorTrue
-                : cellProps.col.badge.colorFalse && !cellProps.value
-                ? cellProps.col.badge.colorFalse
-                : cellProps.value
-                ? 'green'
-                : 'red'
-            "
-            outline
-            class="text-bold"
-          >
-            {{ cellProps.value ? cellProps.col.badge.true ?? 'Да' : cellProps.col.badge.false ?? 'Нет' }}
-          </q-badge>
-          <span v-else-if="cellProps.col.html" v-html="cellProps.value"></span>
-          <slot v-else-if="hasSlot(cellProps.col.name)" :name="cellProps.col.name" :cellProps="cellProps" />
-          <span v-else :title="cellProps.value">{{ cellProps.value }}</span>
-        </q-td>
-      </template>
-    </q-table>
-  </div>
-</template>
-<script setup lang="ts">
-import { defineProps, defineEmits, ref, computed, watch, Slots } from 'vue'
-import type { Ref } from 'vue'
-import FilterIcon from '@/icons/components/table-filter-icon.vue'
-
-interface FilterOption {
-  id: string
-  name: string
-}
-
-interface TableEmits {
-  'toggle-filter-value': [colName: string, value: string]
-  'clear-filter': [colName: string]
-  'open-filter-menu': [colName: string, isOpen: boolean]
-  'row-click': [row: Record<string, any>]
-  'update:selectedRows': [rows: any[]] // синтаксис defineEmits для эмита с именованными параметрами
-  edit: [row: Record<string, any>]
-}
-
-const props = defineProps<{
-  rows: Ref<any[]>
-  columns: any[]
-  columnFilters: Ref<Record<string, string | string[] | undefined>>
-  filterMenus: Ref<Record<string, boolean>>
-  filtersOptions: Record<string, FilterOption[]>
-  meta: Ref<{ currentPage: number; perPage: number }>
-  enableMultiSelect?: boolean
-  noHover?: boolean
-  selectedRows: any[]
-  actions?: string[]
-  slots?: Slots
-}>()
-const emit = defineEmits<TableEmits>()
-
-const localSearches = ref<Record<string, string>>({})
-const selected = ref<any[]>([])
-
-const resCols = computed(() => {
-  if (!props.actions?.length) return props.columns
-
-  return [...props.columns, { name: 'actions', label: 'Действия', align: 'center' }]
-})
-
-const filteredOptions = computed(() => {
-  const result: Record<string, FilterOption[]> = {}
-  for (const col of props.columns) {
-    const search = localSearches.value[col.name]?.toLowerCase() || ''
-    const options = props.filtersOptions[col.name] || []
-    result[col.name] = options.filter(opt => opt.name.toLowerCase().includes(search))
-  }
-  return result
-})
-
-const hasSlot = (name: string) => props.slots && name in props.slots
-
-const rowClick = (e: Event, row: Record<string, any>) => {
-  const target = e?.target
-
-  if (!(target instanceof HTMLElement) || target.closest('.actions') || document.getSelection()?.toString()) return
-
-  emit('row-click', row)
-}
-
-watch(
-  () => props.selectedRows,
-  val => {
-    selected.value = val
-  },
-  { immediate: true },
-)
-
-watch(
-  selected,
-  val => {
-    emit('update:selectedRows', val)
-  },
-  { deep: true },
-)
-</script>
-<style scoped lang="scss">
-.actions {
-  width: 100px;
-  background-color: #f2f7fb;
-  position: sticky;
-  right: 0;
-  z-index: 1;
-  border-left: 1px solid #d7e0ef;
-
-  &__btns {
-    display: flex;
-    justify-content: center;
-    gap: 0.5rem;
-
-    button {
-      background-color: #a4b4cf50;
-      width: 32px;
-      height: 32px;
-      border-radius: 8px;
-    }
-  }
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.filter-menu {
-  padding: 10px;
-}
-.label-length {
-  margin-left: 5px;
-}
-.filter-content {
-  display: flex;
-  flex-direction: column;
-  color: #1d425d;
-  .q-item {
-    padding: 0 5px;
-    min-height: 40px;
-  }
-  .q-item__section {
-    min-width: 30px;
-    padding: 0;
-  }
-  ::v-deep(.q-radio__inner),
-  ::v-deep(.q-checkbox__inner) {
-    color: #a4b4cf;
-  }
-}
-
-.filter-footer {
-  border-top: 1px solid #eee;
-  display: flex;
-  justify-content: center;
-}
-
-::v-deep(.q-table thead) {
-  position: sticky;
-  top: 0;
-  background: #f2f7fb;
-  z-index: 2;
-}
-
-::v-deep(.q-table th) {
-  font-family: NunitoSansFont, sans-serif;
-  color: #a4b4cf;
-  font-size: 15px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 20px;
-  height: 61px;
-}
-
-::v-deep(.q-table tbody td) {
-  height: 61px;
-  font-size: 14px;
-}
-
-.q-td--no-hover {
-  cursor: default;
-}
-
-::v-deep(.q-table tbody) {
-  font-family: NunitoSansFont, sans-serif;
-  border-color: #d7e0ef;
-  color: #1d425d;
-  line-height: 20px;
-  font-size: 14px;
-}
-
-::v-deep(.q-table tbody tr:last-child td) {
-  border-bottom: 1px solid #d7e0ef;
-}
-</style>
+<template>
+  <div class="flex flex-col" style="height: 100%; min-height: 100%">
+    <q-table
+      v-model:selected="selected"
+      :rows="rows.value"
+      :columns="resCols"
+      row-key="id"
+      flat
+      bordered
+      hide-bottom
+      class="full-width"
+      :rows-per-page-options="[0]"
+      :selection="props.enableMultiSelect ? 'multiple' : 'none'"
+      style="height: 100%"
+      @row-click="rowClick"
+    >
+      <template #header-selection="scope">
+        <q-toggle v-model="scope.selected" />
+      </template>
+
+      <template #body-selection="scope">
+        <q-toggle v-model="scope.selected" />
+      </template>
+
+      <template #body-cell-index="cellProps">
+        <q-td :props="cellProps" class="text-center" :class="{ 'q-td--no-hover': noHover }">
+          {{ getIndex(cellProps.rowIndex) }}
+        </q-td>
+      </template>
+
+      <template v-for="col in resCols" :key="col.name" #[`header-cell-${col.name}`]="propsSlot">
+        <q-th
+          :props="propsSlot"
+          :class="{ 'cursor-pointer': col.filterType, actions: col.name === 'actions' }"
+          :style="col.style"
+        >
+          <div
+            v-if="col.filterType"
+            class="row items-center no-wrap"
+            @click.stop="emit('open-filter-menu', col.name, !filterMenus.value[col.name])"
+          >
+            <filter-icon class="q-mr-xs" />
+            <span>{{ col.label }}</span>
+            <div
+              v-if="['multi', 'single'].includes(col.filterType) && columnFilters.value[col.name]?.length"
+              class="label-length"
+            >
+              - {{ col.filterType === 'multi' ? columnFilters.value[col.name]?.length : 1 }}
+            </div>
+          </div>
+          <div v-else>{{ col.label }}</div>
+
+          <q-menu
+            v-if="col.filterType"
+            :model-value="filterMenus.value[col.name]"
+            fit
+            max-height="300px"
+            class="filter-menu"
+            @update:model-value="isOpen => emit('open-filter-menu', col.name, isOpen)"
+          >
+            <div class="filter-content">
+              <q-input v-model="localSearches[col.name]" dense outlined placeholder="Поиск" class="q-mb-sm" clearable />
+              <q-scroll-area style="height: 200px">
+                <q-list style="min-width: 200px">
+                  <q-item v-for="option in filteredOptions[col.name]" :key="`${col.name}-${option.id}`" tag="label">
+                    <q-item-section avatar>
+                      <q-checkbox
+                        v-if="col.filterType === 'multi'"
+                        dense
+                        :model-value="
+                          Array.isArray(columnFilters.value[col.name]) &&
+                          columnFilters.value[col.name]?.includes(option.name)
+                        "
+                        @update:model-value="() => emit('toggle-filter-value', col.name, option.name)"
+                      />
+                      <q-radio
+                        v-else
+                        dense
+                        :model-value="columnFilters.value[col.name]"
+                        :val="option.name"
+                        @update:model-value="emit('toggle-filter-value', col.name, $event)"
+                      />
+                    </q-item-section>
+                    <q-item-section>{{ option.name }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-scroll-area>
+
+              <div class="filter-footer">
+                <q-btn color="negative" flat dense label="Сбросить фильтр" @click="emit('clear-filter', col.name)" />
+              </div>
+            </div>
+          </q-menu>
+        </q-th>
+      </template>
+
+      <template #body-cell="cellProps">
+        <q-td
+          :props="cellProps"
+          :class="{
+            'q-td--no-hover': noHover || cellProps.col.name === 'actions',
+            actions: cellProps.col.name === 'actions',
+          }"
+        >
+          <div v-if="cellProps.col.name === 'actions'" class="actions__btns">
+            <q-btn square icon="edit" size="sm" unelevated title="Редактировать" @click="emit('edit', cellProps.row)" />
+          </div>
+          <q-badge
+            v-else-if="cellProps.col.badge && typeof cellProps.value === 'boolean'"
+            :color="
+              cellProps.col.badge.colorTrue && cellProps.value
+                ? cellProps.col.badge.colorTrue
+                : cellProps.col.badge.colorFalse && !cellProps.value
+                ? cellProps.col.badge.colorFalse
+                : cellProps.value
+                ? 'green'
+                : 'red'
+            "
+            outline
+            class="text-bold"
+          >
+            {{ cellProps.value ? cellProps.col.badge.true ?? 'Да' : cellProps.col.badge.false ?? 'Нет' }}
+          </q-badge>
+          <span v-else-if="cellProps.col.html" v-html="cellProps.value"></span>
+          <slot v-else-if="hasSlot(cellProps.col.name)" :name="cellProps.col.name" :cellProps="cellProps" />
+          <span v-else :title="cellProps.value">{{ cellProps.value }}</span>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, computed, watch, Slots } from 'vue'
+import type { Ref } from 'vue'
+import FilterIcon from '@/icons/components/table-filter-icon.vue'
+
+interface FilterOption {
+  id: string
+  name: string
+}
+
+interface TableEmits {
+  'toggle-filter-value': [colName: string, value: string]
+  'clear-filter': [colName: string]
+  'open-filter-menu': [colName: string, isOpen: boolean]
+  'row-click': [row: Record<string, any>]
+  'update:selectedRows': [rows: any[]] // синтаксис defineEmits для эмита с именованными параметрами
+  edit: [row: Record<string, any>]
+}
+
+const props = defineProps<{
+  rows: Ref<any[]>
+  columns: any[]
+  columnFilters: Ref<Record<string, string | string[] | undefined>>
+  filterMenus: Ref<Record<string, boolean>>
+  filtersOptions: Record<string, FilterOption[]>
+  meta: Ref<{ currentPage: number; perPage: number }>
+  enableMultiSelect?: boolean
+  noHover?: boolean
+  hidePagination?: boolean
+  selectedRows: any[]
+  actions?: string[]
+  slots?: Slots
+}>()
+const emit = defineEmits<TableEmits>()
+
+const localSearches = ref<Record<string, string>>({})
+const selected = ref<any[]>([])
+
+const resCols = computed(() => {
+  if (!props.actions?.length) return props.columns
+
+  return [...props.columns, { name: 'actions', label: 'Действия', align: 'center' }]
+})
+
+const filteredOptions = computed(() => {
+  const result: Record<string, FilterOption[]> = {}
+  for (const col of props.columns) {
+    const search = localSearches.value[col.name]?.toLowerCase() || ''
+    const options = props.filtersOptions[col.name] || []
+    result[col.name] = options.filter(opt => opt.name.toLowerCase().includes(search))
+  }
+  return result
+})
+
+const hasSlot = (name: string) => props.slots && name in props.slots
+
+const rowClick = (e: Event, row: Record<string, any>) => {
+  const target = e?.target
+
+  if (!(target instanceof HTMLElement) || target.closest('.actions') || document.getSelection()?.toString()) return
+
+  emit('row-click', row)
+}
+
+const getIndex = (rowIndex: number) => {
+  if (props.hidePagination) return rowIndex + 1
+
+  return rowIndex + 1 + (props.meta.value.currentPage - 1) * props.meta.value.perPage
+}
+
+watch(
+  () => props.selectedRows,
+  val => {
+    selected.value = val
+  },
+  { immediate: true },
+)
+
+watch(
+  selected,
+  val => {
+    emit('update:selectedRows', val)
+  },
+  { deep: true },
+)
+</script>
+<style scoped lang="scss">
+.actions {
+  width: 100px;
+  background-color: #f2f7fb;
+  position: sticky;
+  right: 0;
+  z-index: 1;
+  border-left: 1px solid #d7e0ef;
+
+  &__btns {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+
+    button {
+      background-color: #a4b4cf50;
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+    }
+  }
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.filter-menu {
+  padding: 10px;
+}
+.label-length {
+  margin-left: 5px;
+}
+.filter-content {
+  display: flex;
+  flex-direction: column;
+  color: #1d425d;
+  .q-item {
+    padding: 0 5px;
+    min-height: 40px;
+  }
+  .q-item__section {
+    min-width: 30px;
+    padding: 0;
+  }
+  ::v-deep(.q-radio__inner),
+  ::v-deep(.q-checkbox__inner) {
+    color: #a4b4cf;
+  }
+}
+
+.filter-footer {
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: center;
+}
+
+::v-deep(.q-table thead) {
+  position: sticky;
+  top: 0;
+  background: #f2f7fb;
+  z-index: 2;
+}
+
+::v-deep(.q-table th) {
+  font-family: NunitoSansFont, sans-serif;
+  color: #a4b4cf;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  height: 61px;
+}
+
+::v-deep(.q-table tbody td) {
+  height: 61px;
+  font-size: 14px;
+}
+
+.q-td--no-hover {
+  cursor: default;
+}
+
+::v-deep(.q-table tbody) {
+  font-family: NunitoSansFont, sans-serif;
+  border-color: #d7e0ef;
+  color: #1d425d;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+::v-deep(.q-table tbody tr:last-child td) {
+  border-bottom: 1px solid #d7e0ef;
+}
+</style>