shared-ritm 1.2.37 → 1.2.38

package/src/common/app-table/components/TableModal.vue

@@ -0,0 +1,368 @@
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits, nextTick, computed } from 'vue'
+
+type ModalMode = 'view' | 'edit' | 'create'
+type FieldType = 'text' | 'select'
+
+interface FieldOption {
+  label: string
+  value: string
+}
+
+interface FieldSchema {
+  key: string
+  label: string
+  type: FieldType
+  rules?: ((val: any) => boolean | string)[]
+  options?: FieldOption[]
+  placeholder?: string
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  title: string
+  mode: ModalMode
+  fields: FieldSchema[]
+  initialData?: Record<string, any>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'submit', data: Record<string, any>): void
+  (e: 'edit'): void
+  (e: 'delete'): void
+}>()
+
+const formData = ref<Record<string, any>>({})
+const formRef = ref()
+
+watch(
+  () => props.modelValue,
+  val => {
+    if (val) {
+      formData.value = { ...(props.initialData ?? {}) }
+    }
+  },
+  { immediate: true },
+)
+function isEqual(a: any, b: any): boolean {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false
+    return a.every((item, i) => isEqual(item, b[i]))
+  }
+  if (typeof a === 'object' && typeof b === 'object') {
+    return JSON.stringify(a) === JSON.stringify(b)
+  }
+  return a === b
+}
+
+function normalizeValue(val: any): any {
+  if (Array.isArray(val)) {
+    return val.map(v => (typeof v === 'object' && v !== null ? v.value ?? v : v))
+  }
+  return typeof val === 'object' && val !== null ? val.value ?? val : val
+}
+
+function submit() {
+  formRef.value?.validate().then(ok => {
+    if (!ok) return
+
+    const changed: Record<string, any> = {}
+
+    for (const field of props.fields) {
+      const key = field.key
+      const current = formData.value[key]
+      const initial = props.initialData?.[key]
+
+      const normalizedCurrent = field.type === 'select' ? normalizeValue(current) : current
+      const normalizedInitial = field.type === 'select' ? normalizeValue(initial) : initial
+
+      if (!isEqual(normalizedCurrent, normalizedInitial)) {
+        changed[key] = normalizedCurrent
+      }
+    }
+
+    emit('submit', changed)
+  })
+}
+
+function handleClear(key: string) {
+  const field = props.fields.find(f => f.key === key)
+  formData.value[key] = field?.type === 'select' ? [] : ''
+
+  nextTick(() => {
+    formRef.value?.validate()
+  })
+}
+const isSubmitDisabled = computed(() => {
+  if (props.mode === 'view') return false
+
+  const hasEmptyRequired = props.fields.some(field => {
+    const isRequired = field.rules?.some(rule => rule('') !== true)
+    const val = formData.value[field.key]
+    const normalized = normalizeValue(val)
+
+    const empty =
+      normalized === null ||
+      normalized === undefined ||
+      (typeof normalized === 'string' && normalized.trim() === '') ||
+      (Array.isArray(normalized) && normalized.length === 0)
+
+    return isRequired && empty
+  })
+
+  if (hasEmptyRequired) return true
+
+  const hasChanges = props.fields.some(field => {
+    const key = field.key
+    const current = normalizeValue(formData.value[key])
+    const initial = normalizeValue(props.initialData?.[key])
+    return !isEqual(current, initial)
+  })
+
+  return !hasChanges
+})
+function uuidv4() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+
+function generateUuid() {
+  formData.value.uuid = uuidv4()
+}
+const filteredOptions = ref<Record<string, FieldOption[]>>({})
+
+function onFilter(key: string) {
+  return (val: string, update: (cb: () => void) => void) => {
+    update(() => {
+      const field = props.fields.find(f => f.key === key)
+      if (!field?.options) return
+      const lower = val.toLowerCase()
+      filteredOptions.value[key] = field.options.filter(opt => opt.label.toLowerCase().includes(lower))
+    })
+  }
+}
+</script>
+
+<template>
+  <q-dialog :model-value="modelValue" @update:model-value="val => emit('update:modelValue', val)">
+    <q-card style="min-width: 700px">
+      <q-card-section>
+        <div class="modal-title">{{ title }}</div>
+      </q-card-section>
+
+      <q-card-section>
+        <q-form ref="formRef" @submit.prevent="submit">
+          <div v-for="field in fields" :key="field.key" class="field-wrapper">
+            <label class="field-label">
+              {{ field.label }}
+              <span v-if="field.rules?.length && mode !== 'view'" class="required">*</span>
+            </label>
+
+            <q-input
+              v-if="field.type === 'text'"
+              v-model="formData[field.key]"
+              :rules="field.rules"
+              :readonly="mode === 'view' || (field.key === 'uuid' && mode === 'edit')"
+              filled
+              :placeholder="field.placeholder"
+            >
+              <template v-if="mode !== 'view'" #append>
+                <q-icon
+                  v-if="formData[field.key] && !(field.key === 'uuid' && mode === 'edit')"
+                  name="close"
+                  class="cursor-pointer clear-input"
+                  @click="() => handleClear(field.key)"
+                />
+                <q-btn
+                  v-if="field.key === 'uuid' && mode === 'create'"
+                  flat
+                  no-caps
+                  label="UUID"
+                  size="sm"
+                  class="q-ml-sm uuid-btn"
+                  @click="generateUuid"
+                />
+              </template>
+            </q-input>
+
+            <q-select
+              v-else-if="field.type === 'select'"
+              v-model="formData[field.key]"
+              :options="filteredOptions[field.key] || field.options"
+              :rules="field.rules"
+              :readonly="mode === 'view'"
+              :placeholder="mode === 'view' ? '' : field.placeholder"
+              filled
+              multiple
+              use-input
+              input-debounce="0"
+              emit-value
+              map-options
+              use-chips
+              stack-label
+              popup-content-class="custom-select-menu"
+              @filter="(val, update) => onFilter(field.key)(val, update)"
+            >
+              <template v-if="mode !== 'view'" #append>
+                <q-icon
+                  v-if="formData[field.key]?.length"
+                  name="close"
+                  class="cursor-pointer clear-input"
+                  @click.stop="
+                    () => {
+                      handleClear(field.key)
+                      nextTick(() => formRef.value?.validate())
+                    }
+                  "
+                />
+              </template>
+            </q-select>
+          </div>
+        </q-form>
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn v-if="mode === 'view'" class="remove" flat label="Удалить" @click="emit('delete')" />
+        <q-btn
+          v-if="mode !== 'view'"
+          class="confirm"
+          flat
+          :label="mode === 'edit' ? 'Сохранить' : 'Создать'"
+          :disable="isSubmitDisabled"
+          @click="submit"
+        />
+        <q-btn v-else class="confirm" flat label="Редактировать" @click="$emit('edit')" />
+        <q-btn v-close-popup class="cancel" flat label="Закрыть" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style lang="scss">
+.custom-select-menu {
+  max-height: 250px !important;
+  overflow-y: auto !important;
+}
+</style>
+<style scoped lang="scss">
+.uuid-btn {
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid #3f8cff;
+  color: #3f8cff;
+  font-weight: 700;
+  font-size: 14px;
+  background: white;
+  border-radius: 6px;
+}
+
+.q-card {
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  font-family: NunitoSansFont, sans-serif;
+
+  .modal-title {
+    color: #1d425d;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 700;
+    padding: 18px 29px;
+  }
+
+  .q-card__section {
+    padding: 0;
+  }
+
+  .q-form {
+    padding: 0 29px;
+  }
+
+  .field-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 15px;
+  }
+
+  .field-label {
+    font-size: 14px;
+    font-weight: 700;
+    color: #7d8592;
+  }
+  ::v-deep(.q-placeholder) {
+    color: #7d8592;
+  }
+  ::v-deep(.q-field__control) {
+    border-radius: 8px;
+    border: 1px solid #d8e0f0;
+    background: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(184, 200, 224, 0.22);
+  }
+
+  ::v-deep(.q-field--filled .q-field__control:before) {
+    background: #fff !important;
+    border: none;
+  }
+
+  ::v-deep(.q-field--with-bottom) {
+    padding-bottom: 0;
+  }
+
+  ::v-deep(.q-field__bottom) {
+    padding: 0;
+  }
+
+  .clear-input {
+    color: #d8e0f0;
+  }
+  ::v-deep(.q-chip) {
+    border-radius: 4px;
+    background: #e9eff9;
+    color: #1d425d;
+    font-family: NunitoSansFont, sans-serif;
+    font-size: 14px;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    .q-chip__icon {
+      color: #3f8cff;
+      margin-left: 5px;
+    }
+  }
+  .required {
+    color: #f65160;
+    font-weight: bold;
+  }
+
+  &__actions {
+    padding: 18px 0;
+    border-radius: 0px 0px 16px 16px;
+    background: #f4f9fd;
+
+    button {
+      padding: 13px 37px;
+      border-radius: 4px;
+      font-size: 16px;
+      font-weight: 700;
+      text-transform: none;
+
+      &.remove {
+        border: 1px solid #f65160;
+        color: #f65160;
+      }
+      &.confirm {
+        background: #3f8cff;
+        color: #fff;
+      }
+
+      &.cancel {
+        color: #3f8cff;
+        border: 1px solid #3f8cff;
+      }
+    }
+  }
+}
+</style>

package/src/common/app-table/components/TablePagination.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { defineProps, defineEmits } from 'vue'
+
+const props = defineProps<{
+  modelValue: number
+  totalPages: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+  (e: 'page-change', value: number): void
+}>()
+
+const currentPage = computed({
+  get: () => props.modelValue,
+  set: (val: number) => {
+    emit('update:modelValue', val)
+    emit('page-change', val)
+  },
+})
+
+const pageArray = computed(() => {
+  const maxPagesToShow = 5
+  let startPage = 1
+  let endPage = props.totalPages
+  const pages: (number | string)[] = []
+
+  if (props.totalPages <= maxPagesToShow) {
+    for (let i = 1; i <= props.totalPages; i++) pages.push(i)
+  } else {
+    if (props.modelValue <= 3) {
+      startPage = 1
+      endPage = maxPagesToShow - 1
+    } else if (props.modelValue + 2 >= props.totalPages) {
+      startPage = props.totalPages - (maxPagesToShow - 2)
+      endPage = props.totalPages
+    } else {
+      startPage = props.modelValue - 2
+      endPage = props.modelValue + 2
+    }
+
+    for (let i = startPage; i <= endPage; i++) pages.push(i)
+
+    if (startPage > 1) {
+      pages.unshift('...')
+      pages.unshift(1)
+    }
+    if (endPage < props.totalPages) {
+      pages.push('...')
+      pages.push(props.totalPages)
+    }
+  }
+
+  return pages
+})
+
+function changePage(page: number | string) {
+  if (typeof page === 'number' && page !== props.modelValue) {
+    currentPage.value = page
+  }
+}
+
+function prevPage() {
+  if (props.modelValue > 1) currentPage.value = props.modelValue - 1
+}
+
+function nextPage() {
+  if (props.modelValue < props.totalPages) currentPage.value = props.modelValue + 1
+}
+</script>
+
+<template>
+  <div class="table-pagination">
+    <button class="arrow-button" :disabled="modelValue <= 1" @click="prevPage">
+      <q-icon name="mdi-chevron-left" :color="modelValue <= 1 ? 'grey-4' : 'primary'" />
+    </button>
+
+    <div class="pages">
+      <button
+        v-for="page in pageArray"
+        :key="page"
+        class="page-button"
+        :class="{ selected: page === modelValue, ellipsis: page === '...' }"
+        :disabled="page === modelValue || page === '...'"
+        @click="changePage(page)"
+      >
+        {{ page }}
+      </button>
+    </div>
+
+    <button class="arrow-button" :disabled="modelValue >= totalPages" @click="nextPage">
+      <q-icon name="mdi-chevron-right" :color="modelValue >= totalPages ? 'grey-4' : 'primary'" />
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.pages {
+  display: flex;
+  gap: 20px;
+}
+.table-pagination {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 17px;
+  margin-bottom: 15px;
+  .arrow-button,
+  .page-button {
+    width: 34px;
+    height: 34px;
+    border-radius: 4px;
+    background: white;
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    color: #3f8cff;
+    font-size: 16px;
+    transition: all 0.2s ease;
+  }
+
+  .page-button.selected {
+    background: #3f8cff;
+    color: white;
+    cursor: not-allowed;
+  }
+
+  .page-button.ellipsis {
+    cursor: default;
+    color: #aab2c8;
+    font-weight: 400;
+  }
+
+  .arrow-button:disabled {
+    cursor: not-allowed;
+    background: white;
+  }
+
+  @media (max-width: 768px) {
+    .arrow-button,
+    .page-button {
+      width: 32px;
+      height: 32px;
+      font-size: 14px;
+    }
+  }
+}
+</style>

package/src/common/app-table/components/TableSearch.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  placeholder: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'search', value: string): void
+}>()
+
+const input = ref(props.modelValue)
+let debounceTimer: ReturnType<typeof setTimeout>
+
+watch(
+  () => props.modelValue,
+  val => {
+    input.value = val
+  },
+)
+
+watch(input, val => {
+  emit('update:modelValue', val)
+  clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => {
+    emit('search', val)
+  }, 400)
+})
+
+const clearInput = () => {
+  input.value = ''
+  emit('search', '')
+}
+</script>
+
+<template>
+  <q-input v-model="input" :placeholder="placeholder" dense outlined>
+    <template v-if="input" #append>
+      <q-icon name="✕" class="cursor-pointer" @click.stop="clearInput" />
+    </template>
+  </q-input>
+</template>
+
+<style scoped lang="scss">
+.q-field {
+  background: #fff;
+  border-radius: 4px;
+  outline: none;
+  border-color: #f2f7fb;
+
+  ::v-deep(.q-field__control) {
+    height: 52px;
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep(.q-field__native) {
+    font-family: NunitoSansFont, sans-serif;
+    color: #1d425d;
+    padding-left: 8px;
+  }
+
+  ::v-deep(.q-field__native::placeholder) {
+    color: rgba(184, 184, 184, 0.87);
+  }
+
+  ::v-deep(.q-icon.cursor-pointer) {
+    color: #1d425d;
+    font-size: 20px;
+    line-height: 15px;
+  }
+  ::v-deep(.q-field__control:hover:before) {
+    border-color: #3f8cff;
+  }
+}
+</style>

package/src/common/app-table/controllers/useTableModel.ts

@@ -0,0 +1,104 @@
+import { Ref, computed, ref } from 'vue'
+
+export interface TableColumn {
+  name: string
+  label: string
+  style?: string
+  headerStyle?: string
+  field: string | ((row: any) => any)
+  sortable?: boolean
+  filterType: 'single' | 'multi' | null
+  align?: 'left' | 'center' | 'right'
+}
+
+export interface FilterOption {
+  id: string
+  name: string
+}
+
+export interface TableModel<T = any> {
+  columns: TableColumn[]
+  rows: T[] | Ref<T[]>
+  filtersOptions?: Ref<Record<string, FilterOption[]>>
+}
+
+export const useTableModel = <T = any>(model: TableModel<T>) => {
+  const columnFilters = ref<Record<string, string | string[] | undefined>>({})
+  const filterMenus = ref<Record<string, boolean>>({})
+
+  model.columns.forEach(({ name, filterType }) => {
+    if (filterType) {
+      columnFilters.value[name] = filterType === 'multi' ? [] : undefined
+      filterMenus.value[name] = false
+    }
+  })
+
+  const getFieldValue = (row: any, col: TableColumn) =>
+    typeof col.field === 'function' ? col.field(row) : row[col.field]
+
+  const resolvedRows = computed(() => (Array.isArray(model.rows) ? model.rows : (model.rows as Ref<T[]>).value))
+
+  const filteredRows = computed(() =>
+    resolvedRows.value.filter(row =>
+      model.columns.every(col => {
+        const filter = columnFilters.value[col.name]
+        if (!col.filterType || filter == null || (Array.isArray(filter) && filter.length === 0)) return true
+        const value = getFieldValue(row, col)
+        return col.filterType === 'single'
+          ? value === filter
+          : Array.isArray(value)
+          ? value.some(v => (filter as string[]).includes(v))
+          : (filter as string[]).includes(value)
+      }),
+    ),
+  )
+
+  const toggleFilterValue = (colName: string, value: string) => {
+    const col = model.columns.find(c => c.name === colName)
+    if (col?.filterType === 'multi') {
+      const current = columnFilters.value[colName] as string[]
+      const index = current.indexOf(value)
+      index > -1 ? current.splice(index, 1) : current.push(value)
+      columnFilters.value[colName] = [...current]
+    } else {
+      columnFilters.value[colName] = value
+      filterMenus.value[colName] = false
+    }
+  }
+
+  const selectedFilters = computed(() => {
+    const result: Record<string, string[]> = {}
+    for (const col of model.columns) {
+      const filter = columnFilters.value[col.name]
+      const options = model.filtersOptions?.value[col.name] || []
+
+      if (filter) {
+        result[col.name] = Array.isArray(filter)
+          ? options.filter(opt => filter.includes(opt.name)).map(opt => opt.id)
+          : options.filter(opt => opt.name === filter).map(opt => opt.id)
+      }
+    }
+    return result
+  })
+
+  const clearFilter = (colName: string) => {
+    const col = model.columns.find(c => c.name === colName)
+    columnFilters.value[colName] = col?.filterType === 'multi' ? [] : undefined
+  }
+
+  const openFilterMenu = (colName: string, isOpen: boolean) => {
+    filterMenus.value[colName] = isOpen
+  }
+
+  return {
+    rows: resolvedRows,
+    columns: computed(() => model.columns),
+    columnFilters,
+    filterMenus,
+    filteredRows,
+    toggleFilterValue,
+    clearFilter,
+    openFilterMenu,
+    selectedFilters,
+  }
+}