shared-ritm 1.2.46 → 1.2.48

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

@@ -0,0 +1,215 @@
+<template>
+  <label class="field-label">
+    {{ label }}
+    <span v-if="rules?.length && isShowRequired" class="required">*</span>
+  </label>
+  <q-select
+    ref="select"
+    v-model="selected"
+    :options="filteredOptions"
+    :disable="isDisabled"
+    :multiple="multiple"
+    :popup-content-class="'custom-select-menu'"
+    :hide-selected="!showChip"
+    :placeholder="placeholder"
+    :loading="loading"
+    :option-value="optionValue || 'value'"
+    :option-label="optionLabel || 'label'"
+    emit-value
+    filled
+    map-options
+    stack-label
+    use-input
+    use-chips
+    input-debounce="100"
+    autocomplete=""
+    :rules="rules"
+    @virtual-scroll="onScroll"
+    @filter="filterFn"
+  >
+    <template v-if="multiple || showChip" #selected-item="scope">
+      <q-chip
+        v-if="scope.opt"
+        removable
+        :tabindex="scope.tabindex"
+        :style="{ backgroundColor: chipColor }"
+        icon-remove="close"
+        text-color="secondary"
+        @remove="scope.removeAtIndex(scope.index)"
+      >
+        {{ scope.opt[optionLabel || 'label'] }}
+      </q-chip>
+    </template>
+
+    <template #append>
+      <q-icon
+        v-if="!isDisabled && selected && selected.length"
+        name="close"
+        class="cursor-pointer clear-input"
+        @click.stop="handleClear"
+      />
+    </template>
+
+    <template #no-option>
+      <q-item>{{ emptyText }}</q-item>
+    </template>
+
+    <template #option="scope">
+      <q-item v-if="scope.opt.__loading" class="q-py-md q-ml-md">
+        <q-spinner-dots size="24px" color="primary" />
+      </q-item>
+      <q-item v-else v-bind="scope.itemProps">
+        <q-item-section>{{ scope.opt[optionLabel || 'label'] }}</q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, ref, Ref } from 'vue'
+
+type Option = Record<string, any>
+
+interface AppQSelectProps {
+  modelValue: any
+  options: Option[]
+  placeholder: string | undefined
+  emptyText: string
+  optionLabel?: string
+  optionValue?: string
+  label?: string
+  multiple?: boolean
+  loading?: boolean
+  isShowRequired?: boolean
+  isDisabled?: boolean
+  isSearch?: boolean
+  showChip?: boolean
+  chipColor?: string
+  height?: string
+  borderColor?: string
+  borderRadius?: string
+  menuWidth?: string
+  rules?: ((val: any) => boolean | string)[]
+}
+
+const props = defineProps<AppQSelectProps>()
+const emit = defineEmits(['update:modelValue', 'update:scroll', 'update:search', 'clear'])
+
+const select = ref({})
+const lcText: Ref<string> = ref('')
+
+const selected = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+function handleClear() {
+  selected.value = props.multiple ? [] : null
+  lcText.value = ''
+  emit('update:modelValue', selected.value)
+  emit('clear')
+}
+
+const filteredOptions = computed(() => {
+  const baseOptions = props.options.filter(x => x[props?.optionLabel || 'label'].toLowerCase().includes(lcText.value))
+
+  if (props.loading) {
+    return [
+      ...baseOptions,
+      {
+        __loading: true,
+        label: '__loading__',
+        value: '__loading__',
+      },
+    ]
+  }
+
+  return baseOptions
+})
+
+function filterFn(val: string, update: (cb: () => void) => void) {
+  debouncedFilter(val, update)
+}
+
+const debouncedFilter = debounce((val: string, update: (cb: () => void) => void) => {
+  emit('update:search', val)
+  update(() => {
+    lcText.value = val.toLowerCase()
+  })
+}, 500)
+
+function onScroll({ to, ref: qSelectRef }) {
+  const totalOptions = qSelectRef.options.length
+  if (to >= totalOptions - 1 && !lcText.value) {
+    emit('update:scroll')
+  }
+}
+
+function debounce<T>(fn: T, ms) {
+  let timeoutId
+
+  return function (...args) {
+    clearTimeout(timeoutId)
+
+    return new Promise(resolve => {
+      timeoutId = setTimeout(() => {
+        resolve(fn(...args))
+      }, ms)
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.field-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #7d8592;
+}
+.required {
+  color: #f65160;
+  font-weight: bold;
+}
+
+::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--highlighted .q-field__control:before),
+::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 15px;
+  .q-chip__icon {
+    color: #3f8cff;
+    margin-left: 5px;
+  }
+}
+</style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, defineProps, defineEmits, nextTick, computed } from 'vue'
+import { AppModalSelect } from 'shared-ritm'
 
 type ModalMode = 'view' | 'edit' | 'create'
 type FieldType = 'text' | 'select'
@@ -16,6 +17,9 @@ interface FieldSchema {
   rules?: ((val: any) => boolean | string)[]
   options?: FieldOption[]
   placeholder?: string
+  onSearch?: (val: string) => void
+  onScroll?: () => void
+  loading?: boolean
 }
 
 const props = defineProps<{
@@ -134,17 +138,6 @@ 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>
@@ -157,7 +150,7 @@ function onFilter(key: string) {
       <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">
+            <label v-if="field.type === 'text'" class="field-label">
               {{ field.label }}
               <span v-if="field.rules?.length && mode !== 'view'" class="required">*</span>
             </label>
@@ -189,38 +182,31 @@ function onFilter(key: string) {
               </template>
             </q-input>
 
-            <q-select
+            <app-modal-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>
+              :multiple="true"
+              :show-chip="true"
+              :is-disabled="mode === 'view'"
+              :loading="field.loading"
+              :label="field.label"
+              :is-show-required="mode !== 'view'"
+              empty-text="Ничего не найдено"
+              option-label="label"
+              option-value="value"
+              chip-color="#e9eff9"
+              @update:search="val => field.onSearch?.(val)"
+              @update:scroll="() => field.onScroll?.()"
+              @clear="
+                () => {
+                  handleClear(field.key)
+                  nextTick(() => formRef.value?.validate())
+                }
+              "
+            />
           </div>
         </q-form>
       </q-card-section>
@@ -318,20 +304,7 @@ function onFilter(key: string) {
   .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;

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

@@ -1,151 +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>
+<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>