shared-ritm 1.2.99 → 1.2.101

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

@@ -1,331 +1,356 @@
-<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 v-if="field.type === 'text'" 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 #append>
-                <q-icon
-                  v-if="mode !== 'view' && 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"
-                />
-                <q-icon
-                  v-else-if="field.key === 'uuid' && mode !== 'create'"
-                  name="content_copy"
-                  class="cursor-pointer q-ml-sm copy-icon"
-                  color="primary"
-                  @click="copyToClipboard(formData[field.key])"
-                />
-              </template>
-            </q-input>
-
-            <app-modal-select
-              v-else-if="field.type === 'select'"
-              v-model="formData[field.key]"
-              :options="filteredOptions[field.key] || field.options"
-              :rules="field.rules"
-              :placeholder="mode === 'view' ? '' : field.placeholder"
-              :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>
-
-      <q-card-actions align="center">
-        <q-btn v-if="mode === 'view'" class="remove" flat label="Удалить" :loading="loading" @click="emit('delete')" />
-        <q-btn
-          v-if="mode !== 'view'"
-          class="confirm"
-          flat
-          :label="mode === 'edit' ? 'Сохранить' : 'Создать'"
-          :disable="isSubmitDisabled"
-          :loading="loading"
-          @click="submit"
-        />
-        <q-btn v-else class="confirm" flat label="Редактировать" :disable="loading" @click="$emit('edit')" />
-        <q-btn v-close-popup class="cancel" flat label="Закрыть" :disable="loading" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, defineProps, defineEmits, nextTick, computed } from 'vue'
-import { useQuasar } from 'quasar'
-import AppModalSelect from '../components/ModalSelect.vue'
-import { notificationSettings } from '@/utils/notification'
-import { isEqual, normalizeValue, uuidv4 } from '@/utils/helpers'
-
-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
-  onSearch?: (val: string) => void
-  onScroll?: () => void
-  loading?: boolean
-}
-
-const props = defineProps<{
-  modelValue: boolean
-  title: string
-  mode: ModalMode
-  fields: FieldSchema[]
-  initialData?: Record<string, any>
-  loading?: boolean
-}>()
-const emit = defineEmits<{
-  (e: 'update:modelValue', val: boolean): void
-  (e: 'submit', data: Record<string, any>): void
-  (e: 'edit'): void
-  (e: 'delete'): void
-}>()
-
-const $q = useQuasar()
-const formRef = ref()
-const formData = ref<Record<string, any>>({})
-const filteredOptions = ref<Record<string, FieldOption[]>>({})
-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 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()
-  })
-}
-function generateUuid() {
-  formData.value.uuid = uuidv4()
-}
-function copyToClipboard(text: string) {
-  navigator.clipboard.writeText(text).then(() => {
-    $q.notify(notificationSettings('success', 'UUID скопирован'))
-  })
-}
-
-watch(
-  () => props.modelValue,
-  val => {
-    if (val) {
-      formData.value = { ...(props.initialData ?? {}) }
-    }
-  },
-  { immediate: true },
-)
-</script>
-
-<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;
-  }
-
-  .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>
+<template>
+  <q-dialog :model-value="modelValue" @update:model-value="toggleModal">
+    <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 v-if="field.type === 'text'" 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 #append>
+                <q-icon
+                  v-if="mode !== 'view' && 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"
+                />
+                <q-icon
+                  v-else-if="field.key === 'uuid' && mode !== 'create'"
+                  name="content_copy"
+                  class="cursor-pointer q-ml-sm copy-icon"
+                  color="primary"
+                  @click="copyToClipboard(formData[field.key])"
+                />
+              </template>
+            </q-input>
+
+            <app-modal-select
+              v-else-if="field.type === 'select'"
+              v-model="formData[field.key]"
+              :options="filteredOptions[field.key] || field.options"
+              :rules="field.rules"
+              :placeholder="mode === 'view' ? '' : field.placeholder"
+              :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>
+
+      <q-card-actions align="center">
+        <q-btn v-if="mode === 'view'" class="remove" flat label="Удалить" :loading="loading" @click="emit('delete')" />
+        <q-btn
+          v-if="mode !== 'view'"
+          class="confirm"
+          flat
+          :label="mode === 'edit' ? 'Сохранить' : 'Создать'"
+          :disable="isSubmitDisabled"
+          :loading="loading"
+          @click="submit"
+        />
+        <q-btn v-else class="confirm" flat label="Редактировать" :disable="loading" @click="$emit('edit')" />
+        <q-btn class="cancel" flat label="Закрыть" :disable="loading" @click="close" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits, nextTick, computed } from 'vue'
+import { useQuasar } from 'quasar'
+import AppModalSelect from '../components/ModalSelect.vue'
+import { notificationSettings } from '@/utils/notification'
+import { isEqual, normalizeValue, uuidv4 } from '@/utils/helpers'
+
+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
+  onSearch?: (val: string) => void
+  onScroll?: () => void
+  loading?: boolean
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  title: string
+  mode: ModalMode
+  fields: FieldSchema[]
+  initialData?: Record<string, any>
+  loading?: boolean
+}>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean, hasChanges?: boolean): void
+  (e: 'submit', data: Record<string, any>): void
+  (e: 'edit'): void
+  (e: 'delete'): void
+}>()
+
+const $q = useQuasar()
+const formRef = ref()
+const formData = ref<Record<string, any>>({})
+const filteredOptions = ref<Record<string, FieldOption[]>>({})
+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 toggleModal(val: boolean) {
+  if (val) {
+    emit('update:modelValue', val)
+  } else {
+    close()
+  }
+}
+function checkChanges() {
+  if (props.mode === 'view') {
+    return false
+  }
+
+  if (!props.initialData || !Object.keys(props.initialData).length) {
+    return props.fields?.some(
+      field =>
+        formData.value?.[field.key] &&
+        !(Array.isArray(formData.value?.[field.key]) && !formData.value?.[field.key].length),
+    )
+  }
+
+  return props.fields?.some(field => !isEqual(formData.value?.[field.key], props.initialData?.[field.key]))
+}
+function close() {
+  emit('update:modelValue', false, checkChanges())
+}
+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()
+  })
+}
+function generateUuid() {
+  formData.value.uuid = uuidv4()
+}
+function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text).then(() => {
+    $q.notify(notificationSettings('success', 'UUID скопирован'))
+  })
+}
+
+watch(
+  () => props.modelValue,
+  val => {
+    if (val) {
+      formData.value = { ...(props.initialData ?? {}) }
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<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;
+  }
+
+  .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>