shared-ritm 1.3.14 → 1.3.15

package/src/common/app-datepicker/AppDatepicker.vue

@@ -1,218 +1,218 @@
-<template>
-  <div class="datepicker">
-    <app-input-new
-      v-model="model"
-      readonly
-      input-class="cursor-pointer"
-      :label="label"
-      :required="required"
-      :rules="rules"
-      :error="error"
-      :disable="disabled"
-      placeholder="Выберите дату"
-    >
-      <q-popup-proxy v-if="!disabled" class="datepicker__wrapper" @update:model-value="updateError">
-        <q-date
-          :model-value="model"
-          :mask="time ? `DD.MM.YYYY ${timeFormat}` : 'DD.MM.YYYY'"
-          :options="disablePastDates"
-          @update:model-value="updateDate"
-        />
-        <q-time
-          v-if="time"
-          v-model="model"
-          :mask="`DD.MM.YYYY ${timeFormat}`"
-          format24h
-          :hour-options="hourOptions()"
-          :minute-options="minuteOptions()"
-        />
-      </q-popup-proxy>
-      <template #append>
-        <q-icon name="event" class="cursor-pointer"></q-icon>
-      </template>
-    </app-input-new>
-  </div>
-</template>
-
-<script setup lang="ts">
-import AppInputNew from '@/common/app-input-new/AppInputNew.vue'
-import { ref, withDefaults, defineEmits, defineProps, defineModel } from 'vue'
-import { date } from 'quasar'
-
-interface Props {
-  label?: string
-  modelValue?: string
-  rules?: ((val?: string | number | null) => boolean | string)[]
-  disableRuleDates?: string | string[]
-  time?: boolean
-  noPastDates?: boolean
-  disabled?: boolean
-  required?: boolean
-  timeFormat?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  label: '',
-  timeFormat: 'HH:mm',
-  rules: () => [],
-  disableRuleDates: undefined,
-  modelValue: undefined,
-})
-
-defineEmits(['update:modelValue'])
-
-const model = defineModel<string | null | undefined>()
-
-const error = ref(false)
-
-const updateError = (state: boolean) => {
-  if (props.required && !error.value && !model.value && !state) {
-    error.value = true
-  }
-}
-
-const updateDate = (value: string) => {
-  error.value = false
-
-  if (!props.noPastDates) {
-    model.value = value
-    return
-  }
-
-  const today = new Date()
-  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
-  const selectedDate = getSelectedDate(value)
-
-  if (selectedDate !== todayStr) {
-    model.value = value
-    return
-  }
-
-  const selectedHour = getSelectedHour(value)
-  const selectedMinutes = getSelectedMinutes(value)
-  const currentHour = today.getHours()
-  const currentMinutes = today.getMinutes()
-
-  if (
-    (selectedHour || selectedHour === 0) &&
-    (selectedMinutes || selectedMinutes === 0) &&
-    (selectedHour < currentHour || (selectedHour === currentHour && selectedMinutes < currentMinutes))
-  ) {
-    today.setHours(currentHour, currentMinutes, 0)
-    model.value = date.formatDate(today, `DD.MM.YYYY ${props.timeFormat}`)
-  } else {
-    model.value = value
-  }
-}
-
-const disablePastDates = (date: string) => {
-  if (!props.noPastDates && !props.disableRuleDates) return true
-
-  const [year, month, day] = date.split('/')
-  const currentDate = new Date(Number(year), Number(month) - 1, Number(day))
-  currentDate.setHours(0, 0, 0, 0)
-
-  if (props.disableRuleDates) {
-    if (Array.isArray(props.disableRuleDates)) {
-      const firstDate = props.disableRuleDates[0] ? new Date(props.disableRuleDates[0]) : null
-      firstDate?.setHours(0, 0, 0, 0)
-      const lastDate = props.disableRuleDates[1] ? new Date(props.disableRuleDates[1]) : null
-      lastDate?.setHours(0, 0, 0, 0)
-
-      return (!firstDate || currentDate >= firstDate) && (!lastDate || currentDate <= lastDate)
-    } else {
-      const firstDate = new Date(props.disableRuleDates)
-      return currentDate >= firstDate
-    }
-  }
-
-  const today = new Date()
-  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
-
-  return currentDate >= todayDate
-}
-
-function getSelectedDate(value = model.value) {
-  if (!value) return null
-
-  return value.toString().substring(0, 10)
-}
-
-function getSelectedHour(value = model.value) {
-  if (!value) return null
-
-  const timePart = value.toString().split(' ')[1]
-  return timePart ? Number(timePart.split(':')[0]) : null
-}
-
-function getSelectedMinutes(value = model.value) {
-  if (!value) return null
-
-  const timePart = value.toString().split(' ')[1]
-  return timePart ? Number(timePart.split(':')[1]) : null
-}
-
-function hourOptions(): number[] {
-  const today = new Date()
-  const selectedDate = getSelectedDate()
-  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
-
-  if (selectedDate !== todayStr) {
-    return Array.from({ length: 24 }, (_, i) => i)
-  }
-
-  const currentHour = today.getHours()
-  return Array.from({ length: 24 - currentHour }, (_, i) => currentHour + i)
-}
-
-function minuteOptions(): number[] {
-  const today = new Date()
-  const selectedDate = getSelectedDate()
-  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
-  const selectedHour = getSelectedHour()
-
-  if (selectedDate !== todayStr) {
-    return Array.from({ length: 60 }, (_, i) => i)
-  }
-
-  if (selectedHour === today.getHours()) {
-    const currentMinutes = today.getMinutes()
-    return Array.from({ length: 60 - currentMinutes }, (_, i) => currentMinutes + i)
-  }
-
-  return Array.from({ length: 60 }, (_, i) => i)
-}
-</script>
-
-<style scoped lang="scss">
-.datepicker {
-  :deep(input),
-  :deep(.q-field--readonly.q-field--float .q-field__native) {
-    cursor: pointer;
-  }
-
-  &__label {
-    font-size: 14px;
-    font-weight: 700;
-    color: #7d8592;
-
-    .required {
-      color: #f65160;
-      font-weight: bold;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.datepicker {
-  &__wrapper {
-    display: flex;
-
-    .q-time,
-    .q-date {
-      box-shadow: none;
-      border-radius: 0;
-    }
-  }
-}
-</style>
+<template>
+  <div class="datepicker">
+    <app-input-new
+      v-model="model"
+      readonly
+      input-class="cursor-pointer"
+      :label="label"
+      :required="required"
+      :rules="rules"
+      :error="error"
+      :disable="disabled"
+      placeholder="Выберите дату"
+    >
+      <q-popup-proxy v-if="!disabled" class="datepicker__wrapper" @update:model-value="updateError">
+        <q-date
+          :model-value="model"
+          :mask="time ? `DD.MM.YYYY ${timeFormat}` : 'DD.MM.YYYY'"
+          :options="disablePastDates"
+          @update:model-value="updateDate"
+        />
+        <q-time
+          v-if="time"
+          v-model="model"
+          :mask="`DD.MM.YYYY ${timeFormat}`"
+          format24h
+          :hour-options="hourOptions()"
+          :minute-options="minuteOptions()"
+        />
+      </q-popup-proxy>
+      <template #append>
+        <q-icon name="event" class="cursor-pointer"></q-icon>
+      </template>
+    </app-input-new>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppInputNew from '@/common/app-input-new/AppInputNew.vue'
+import { ref, withDefaults, defineEmits, defineProps, defineModel } from 'vue'
+import { date } from 'quasar'
+
+interface Props {
+  label?: string
+  modelValue?: string
+  rules?: ((val?: string | number | null) => boolean | string)[]
+  disableRuleDates?: string | string[]
+  time?: boolean
+  noPastDates?: boolean
+  disabled?: boolean
+  required?: boolean
+  timeFormat?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  timeFormat: 'HH:mm',
+  rules: () => [],
+  disableRuleDates: undefined,
+  modelValue: undefined,
+})
+
+defineEmits(['update:modelValue'])
+
+const model = defineModel<string | null | undefined>()
+
+const error = ref(false)
+
+const updateError = (state: boolean) => {
+  if (props.required && !error.value && !model.value && !state) {
+    error.value = true
+  }
+}
+
+const updateDate = (value: string) => {
+  error.value = false
+
+  if (!props.noPastDates) {
+    model.value = value
+    return
+  }
+
+  const today = new Date()
+  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
+  const selectedDate = getSelectedDate(value)
+
+  if (selectedDate !== todayStr) {
+    model.value = value
+    return
+  }
+
+  const selectedHour = getSelectedHour(value)
+  const selectedMinutes = getSelectedMinutes(value)
+  const currentHour = today.getHours()
+  const currentMinutes = today.getMinutes()
+
+  if (
+    (selectedHour || selectedHour === 0) &&
+    (selectedMinutes || selectedMinutes === 0) &&
+    (selectedHour < currentHour || (selectedHour === currentHour && selectedMinutes < currentMinutes))
+  ) {
+    today.setHours(currentHour, currentMinutes, 0)
+    model.value = date.formatDate(today, `DD.MM.YYYY ${props.timeFormat}`)
+  } else {
+    model.value = value
+  }
+}
+
+const disablePastDates = (date: string) => {
+  if (!props.noPastDates && !props.disableRuleDates) return true
+
+  const [year, month, day] = date.split('/')
+  const currentDate = new Date(Number(year), Number(month) - 1, Number(day))
+  currentDate.setHours(0, 0, 0, 0)
+
+  if (props.disableRuleDates) {
+    if (Array.isArray(props.disableRuleDates)) {
+      const firstDate = props.disableRuleDates[0] ? new Date(props.disableRuleDates[0]) : null
+      firstDate?.setHours(0, 0, 0, 0)
+      const lastDate = props.disableRuleDates[1] ? new Date(props.disableRuleDates[1]) : null
+      lastDate?.setHours(0, 0, 0, 0)
+
+      return (!firstDate || currentDate >= firstDate) && (!lastDate || currentDate <= lastDate)
+    } else {
+      const firstDate = new Date(props.disableRuleDates)
+      return currentDate >= firstDate
+    }
+  }
+
+  const today = new Date()
+  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+
+  return currentDate >= todayDate
+}
+
+function getSelectedDate(value = model.value) {
+  if (!value) return null
+
+  return value.toString().substring(0, 10)
+}
+
+function getSelectedHour(value = model.value) {
+  if (!value) return null
+
+  const timePart = value.toString().split(' ')[1]
+  return timePart ? Number(timePart.split(':')[0]) : null
+}
+
+function getSelectedMinutes(value = model.value) {
+  if (!value) return null
+
+  const timePart = value.toString().split(' ')[1]
+  return timePart ? Number(timePart.split(':')[1]) : null
+}
+
+function hourOptions(): number[] {
+  const today = new Date()
+  const selectedDate = getSelectedDate()
+  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
+
+  if (selectedDate !== todayStr) {
+    return Array.from({ length: 24 }, (_, i) => i)
+  }
+
+  const currentHour = today.getHours()
+  return Array.from({ length: 24 - currentHour }, (_, i) => currentHour + i)
+}
+
+function minuteOptions(): number[] {
+  const today = new Date()
+  const selectedDate = getSelectedDate()
+  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
+  const selectedHour = getSelectedHour()
+
+  if (selectedDate !== todayStr) {
+    return Array.from({ length: 60 }, (_, i) => i)
+  }
+
+  if (selectedHour === today.getHours()) {
+    const currentMinutes = today.getMinutes()
+    return Array.from({ length: 60 - currentMinutes }, (_, i) => currentMinutes + i)
+  }
+
+  return Array.from({ length: 60 }, (_, i) => i)
+}
+</script>
+
+<style scoped lang="scss">
+.datepicker {
+  :deep(input),
+  :deep(.q-field--readonly.q-field--float .q-field__native) {
+    cursor: pointer;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 700;
+    color: #7d8592;
+
+    .required {
+      color: #f65160;
+      font-weight: bold;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.datepicker {
+  &__wrapper {
+    display: flex;
+
+    .q-time,
+    .q-date {
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+}
+</style>

package/src/common/app-dialogs/AppConfirmDialog.vue

@@ -1,99 +1,99 @@
-<template>
-  <q-dialog ref="dialogRef" persistent transition-show="slide-up" transition-hide="slide-down" :class="$style.dialog">
-    <q-card :class="$style.modal">
-      <q-card-section :class="$style['modal__content']">
-        <div :class="$style['modal__content__header']">
-          <safety-icon v-if="type === 'edit'" />
-          <remove-icon v-if="type === 'delete'" />
-        </div>
-        <p>{{ content }}</p>
-      </q-card-section>
-      <q-card-section :class="$style.footer">
-        <app-button :class="$style['footer__btn--ok']" label="Подтвердить" @click="onDialogOK" />
-        <app-button :class="$style['footer__btn--cancel']" label="Отменить" @click="onDialogHide" />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { useDialogPluginComponent } from 'quasar'
-import AppButton from '@/common/app-button/AppButton.vue'
-import SafetyIcon from '@/icons/dialogs/SafetyIcon.vue'
-import RemoveIcon from '@/icons/dialogs/RemoveIcon.vue'
-
-const { onDialogHide, onDialogOK, dialogRef } = useDialogPluginComponent()
-
-interface Props {
-  content: string
-  type: 'delete' | 'edit'
-}
-
-const props = defineProps<Props>()
-</script>
-
-<style lang="scss" module>
-.modal {
-  font-family: NunitoSansFont, sans-serif;
-  display: flex;
-  flex-direction: column;
-  width: 400px;
-  border-radius: 8px !important;
-  justify-content: space-between;
-  &__content {
-    margin: 0 auto;
-    padding: 0;
-    flex-grow: 1;
-    &__header {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      gap: 16px;
-      padding-top: 18px;
-      h4 {
-        font-size: 24px;
-        font-weight: 600;
-      }
-    }
-  }
-  p {
-    margin: 0;
-    font-size: 16px;
-    text-align: center;
-    padding: 18px;
-  }
-}
-
-.footer {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0px 0px 2px 2px;
-  background: #f4f9fd;
-  padding: 18px 12px;
-  &__btn--ok,
-  &__btn--cancel {
-    background-color: #3f8cff;
-    border-radius: 4px;
-    color: white;
-    font-size: 16px;
-    font-weight: bold;
-    width: 165px;
-    height: 48px;
-    cursor: pointer;
-    span {
-      color: white;
-    }
-  }
-  &__btn--cancel {
-    background-color: white;
-    border: 1px solid #3f8cff;
-    span {
-      color: #3f8cff;
-    }
-  }
-}
-</style>
+<template>
+  <q-dialog ref="dialogRef" persistent transition-show="slide-up" transition-hide="slide-down" :class="$style.dialog">
+    <q-card :class="$style.modal">
+      <q-card-section :class="$style['modal__content']">
+        <div :class="$style['modal__content__header']">
+          <safety-icon v-if="type === 'edit'" />
+          <remove-icon v-if="type === 'delete'" />
+        </div>
+        <p>{{ content }}</p>
+      </q-card-section>
+      <q-card-section :class="$style.footer">
+        <app-button :class="$style['footer__btn--ok']" label="Подтвердить" @click="onDialogOK" />
+        <app-button :class="$style['footer__btn--cancel']" label="Отменить" @click="onDialogHide" />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { useDialogPluginComponent } from 'quasar'
+import AppButton from '@/common/app-button/AppButton.vue'
+import SafetyIcon from '@/icons/dialogs/SafetyIcon.vue'
+import RemoveIcon from '@/icons/dialogs/RemoveIcon.vue'
+
+const { onDialogHide, onDialogOK, dialogRef } = useDialogPluginComponent()
+
+interface Props {
+  content: string
+  type: 'delete' | 'edit'
+}
+
+const props = defineProps<Props>()
+</script>
+
+<style lang="scss" module>
+.modal {
+  font-family: NunitoSansFont, sans-serif;
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  border-radius: 8px !important;
+  justify-content: space-between;
+  &__content {
+    margin: 0 auto;
+    padding: 0;
+    flex-grow: 1;
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 16px;
+      padding-top: 18px;
+      h4 {
+        font-size: 24px;
+        font-weight: 600;
+      }
+    }
+  }
+  p {
+    margin: 0;
+    font-size: 16px;
+    text-align: center;
+    padding: 18px;
+  }
+}
+
+.footer {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0px 0px 2px 2px;
+  background: #f4f9fd;
+  padding: 18px 12px;
+  &__btn--ok,
+  &__btn--cancel {
+    background-color: #3f8cff;
+    border-radius: 4px;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    width: 165px;
+    height: 48px;
+    cursor: pointer;
+    span {
+      color: white;
+    }
+  }
+  &__btn--cancel {
+    background-color: white;
+    border: 1px solid #3f8cff;
+    span {
+      color: #3f8cff;
+    }
+  }
+}
+</style>