shared-ritm 1.2.46 → 1.2.48

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

@@ -1,211 +1,211 @@
-<script setup lang="ts">
-import { defineProps, defineEmits, ref, computed } 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>]
-}
-
-const emit = defineEmits<TableEmits>()
-
-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 }>
-}>()
-
-const localSearches = ref<Record<string, string>>({})
-
-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
-})
-</script>
-
-<template>
-  <q-page class="flex flex-col" style="min-height: 100%">
-    <q-table
-      :rows="rows.value"
-      :columns="columns"
-      row-key="id"
-      flat
-      bordered
-      hide-bottom
-      class="full-width"
-      :rows-per-page-options="[0]"
-      @row-click="(_, row) => emit('row-click', row)"
-    >
-      <template #body-cell-index="props">
-        <q-td :props="props" class="text-center">
-          {{ props.rowIndex + 1 + (meta.value.currentPage - 1) * meta.value.perPage }}
-        </q-td>
-      </template>
-
-      <template v-for="col in columns" :key="col.name" #[`header-cell-${col.name}`]="propsSlot">
-        <q-th :props="propsSlot" :class="{ 'cursor-pointer': col.filterType }">
-          <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>
-            <template v-if="col.filterType === 'multi' && columnFilters.value[col.name]?.length">
-              <div class="label-length">- {{ columnFilters.value[col.name]?.length }}</div>
-            </template>
-          </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="props">
-        <q-td :props="props">
-          <q-badge
-            v-if="props.col.badge && typeof props.value === 'boolean'"
-            :color="
-              props.col.badge.colorTrue && props.value
-                ? props.col.badge.colorTrue
-                : props.col.badge.colorFalse && !props.value
-                ? props.col.badge.colorFalse
-                : props.value
-                ? 'green'
-                : 'red'
-            "
-            outline
-            class="text-bold"
-          >
-            {{ props.value ? props.col.badge.true ?? 'Да' : props.col.badge.false ?? 'Нет' }}
-          </q-badge>
-          <span v-else-if="props.col.html" v-html="props.value"></span>
-          <span v-else>{{ props.value }}</span>
-        </q-td>
-      </template>
-    </q-table>
-  </q-page>
-</template>
-
-<style scoped lang="scss">
-.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: 0px;
-  }
-  ::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) {
-  background: #f2f7fb;
-}
-
-::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;
-}
-
-::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>
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, computed } 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>]
+}
+
+const emit = defineEmits<TableEmits>()
+
+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 }>
+}>()
+
+const localSearches = ref<Record<string, string>>({})
+
+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
+})
+</script>
+
+<template>
+  <q-page class="flex flex-col" style="min-height: 100%">
+    <q-table
+      :rows="rows.value"
+      :columns="columns"
+      row-key="id"
+      flat
+      bordered
+      hide-bottom
+      class="full-width"
+      :rows-per-page-options="[0]"
+      @row-click="(_, row) => emit('row-click', row)"
+    >
+      <template #body-cell-index="props">
+        <q-td :props="props" class="text-center">
+          {{ props.rowIndex + 1 + (meta.value.currentPage - 1) * meta.value.perPage }}
+        </q-td>
+      </template>
+
+      <template v-for="col in columns" :key="col.name" #[`header-cell-${col.name}`]="propsSlot">
+        <q-th :props="propsSlot" :class="{ 'cursor-pointer': col.filterType }">
+          <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>
+            <template v-if="col.filterType === 'multi' && columnFilters.value[col.name]?.length">
+              <div class="label-length">- {{ columnFilters.value[col.name]?.length }}</div>
+            </template>
+          </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="props">
+        <q-td :props="props">
+          <q-badge
+            v-if="props.col.badge && typeof props.value === 'boolean'"
+            :color="
+              props.col.badge.colorTrue && props.value
+                ? props.col.badge.colorTrue
+                : props.col.badge.colorFalse && !props.value
+                ? props.col.badge.colorFalse
+                : props.value
+                ? 'green'
+                : 'red'
+            "
+            outline
+            class="text-bold"
+          >
+            {{ props.value ? props.col.badge.true ?? 'Да' : props.col.badge.false ?? 'Нет' }}
+          </q-badge>
+          <span v-else-if="props.col.html" v-html="props.value"></span>
+          <span v-else>{{ props.value }}</span>
+        </q-td>
+      </template>
+    </q-table>
+  </q-page>
+</template>
+
+<style scoped lang="scss">
+.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: 0px;
+  }
+  ::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) {
+  background: #f2f7fb;
+}
+
+::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;
+}
+
+::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>

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

@@ -1,93 +1,93 @@
-<script setup lang="ts">
-import { AppTable, AppTablePagination, AppTableSearch } from 'shared-ritm'
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  search: string
-  loading: boolean
-  currentPage: number
-  totalPages: number
-  tableProps: any
-  tableEvents: any
-  onSearch: (val: string) => void
-  onPageChange: (page: number) => void
-  actionsSlot?: boolean
-  modalSlot?: boolean
-}>()
-</script>
-
-<template>
-  <div class="table-layout">
-    <div class="table-controls">
-      <app-table-search
-        :model-value="props.search"
-        class="search-input"
-        placeholder="Введите наименование"
-        @search="props.onSearch"
-      />
-      <slot v-if="actionsSlot" name="actions" />
-    </div>
-
-    <div class="table-wrapper">
-      <app-table v-bind="props.tableProps" v-on="props.tableEvents" />
-      <div v-if="props.loading" class="loader-overlay">
-        <q-spinner-audio class="loader-spinner" size="md" :thickness="3" color="primary" />
-      </div>
-    </div>
-
-    <app-table-pagination
-      :model-value="props.currentPage"
-      :total-pages="props.totalPages"
-      @page-change="props.onPageChange"
-    />
-
-    <slot v-if="modalSlot" name="modal" />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.table-layout {
-  height: calc(100vh - 100px);
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
-.table-controls {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  margin-bottom: 20px;
-
-  .search-input {
-    flex: 1;
-  }
-
-  ::v-deep(.q-btn) {
-    flex-shrink: 0;
-    border-radius: 2px;
-    background: #fff;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    color: #3f8cff;
-    height: 50px;
-    width: 50px;
-  }
-}
-.table-wrapper {
-  position: relative;
-  flex: 1;
-  overflow-y: auto;
-}
-.loader-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 10;
-  background: rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.loader-spinner {
-  z-index: 11;
-}
-</style>
+<script setup lang="ts">
+import { AppTable, AppTablePagination, AppTableSearch } from 'shared-ritm'
+import { defineProps } from 'vue'
+
+const props = defineProps<{
+  search: string
+  loading: boolean
+  currentPage: number
+  totalPages: number
+  tableProps: any
+  tableEvents: any
+  onSearch: (val: string) => void
+  onPageChange: (page: number) => void
+  actionsSlot?: boolean
+  modalSlot?: boolean
+}>()
+</script>
+
+<template>
+  <div class="table-layout">
+    <div class="table-controls">
+      <app-table-search
+        :model-value="props.search"
+        class="search-input"
+        placeholder="Введите наименование"
+        @search="props.onSearch"
+      />
+      <slot v-if="actionsSlot" name="actions" />
+    </div>
+
+    <div class="table-wrapper">
+      <app-table v-bind="props.tableProps" v-on="props.tableEvents" />
+      <div v-if="props.loading" class="loader-overlay">
+        <q-spinner-audio class="loader-spinner" size="md" :thickness="3" color="primary" />
+      </div>
+    </div>
+
+    <app-table-pagination
+      :model-value="props.currentPage"
+      :total-pages="props.totalPages"
+      @page-change="props.onPageChange"
+    />
+
+    <slot v-if="modalSlot" name="modal" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.table-layout {
+  height: calc(100vh - 100px);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+.table-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 20px;
+
+  .search-input {
+    flex: 1;
+  }
+
+  ::v-deep(.q-btn) {
+    flex-shrink: 0;
+    border-radius: 2px;
+    background: #fff;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    color: #3f8cff;
+    height: 50px;
+    width: 50px;
+  }
+}
+.table-wrapper {
+  position: relative;
+  flex: 1;
+  overflow-y: auto;
+}
+.loader-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.loader-spinner {
+  z-index: 11;
+}
+</style>