From 7449b4609112d72e8e0f6a261343fb1badac8c24 Mon Sep 17 00:00:00 2001 From: Falknat Date: Tue, 13 Jan 2026 08:19:55 +0700 Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D1=80=D1=83=D0=BA=D1=82=D1=83?= =?UTF-8?q?=D1=80=D0=B0=20=D0=91=D0=94=20+=20=D0=A4=D1=80=D0=BE=D0=BD?= =?UTF-8?q?=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Обновил структуру БД 2. Сделал умное поведение календаря и выбора исполнителя --- front_vue/src/components/DatePicker.vue | 78 +++++++++++-------- .../src/components/ui/SelectDropdown.vue | 40 +++++++++- taskboard.sql | 9 ++- 3 files changed, 90 insertions(+), 37 deletions(-) diff --git a/front_vue/src/components/DatePicker.vue b/front_vue/src/components/DatePicker.vue index a735a21..435d70b 100644 --- a/front_vue/src/components/DatePicker.vue +++ b/front_vue/src/components/DatePicker.vue @@ -10,7 +10,7 @@ -
+
-
- -
@@ -59,7 +56,9 @@ const props = defineProps({ const emit = defineEmits(['update:modelValue']) const datepickerRef = ref(null) +const calendarRef = ref(null) const isOpen = ref(false) +const openUp = ref(false) const currentMonth = ref(new Date().getMonth()) const currentYear = ref(new Date().getFullYear()) @@ -136,7 +135,7 @@ const calendarDays = computed(() => { return days }) -const toggleCalendar = () => { +const toggleCalendar = async () => { isOpen.value = !isOpen.value if (isOpen.value) { // Устанавливаем текущий месяц на выбранную дату или сегодня @@ -148,9 +147,11 @@ const toggleCalendar = () => { currentMonth.value = new Date().getMonth() currentYear.value = new Date().getFullYear() } - nextTick(() => { - if (window.lucide) window.lucide.createIcons() - }) + + await nextTick() + updatePosition() + + if (window.lucide) window.lucide.createIcons() } } @@ -200,13 +201,38 @@ const handleClickOutside = (e) => { } } +// Пересчёт позиции при изменении размера/скролле +const updatePosition = () => { + if (isOpen.value && datepickerRef.value) { + const rect = datepickerRef.value.getBoundingClientRect() + const calendarHeight = 350 + const footerOffset = 80 // отступ для футера панели с кнопками + + // Ищем родительский контейнер со скроллом (SlidePanel) + const scrollParent = datepickerRef.value.closest('.panel-body') + let availableBottom = window.innerHeight - footerOffset + + if (scrollParent) { + const parentRect = scrollParent.getBoundingClientRect() + availableBottom = parentRect.bottom + } + + const spaceBelow = availableBottom - rect.bottom + openUp.value = spaceBelow < calendarHeight + } +} + onMounted(() => { document.addEventListener('click', handleClickOutside) + window.addEventListener('resize', updatePosition) + window.addEventListener('scroll', updatePosition, true) if (window.lucide) window.lucide.createIcons() }) onUnmounted(() => { document.removeEventListener('click', handleClickOutside) + window.removeEventListener('resize', updatePosition) + window.removeEventListener('scroll', updatePosition, true) }) watch(isOpen, () => { @@ -278,7 +304,7 @@ watch(isOpen, () => { .calendar { position: absolute; - bottom: calc(100% + 8px); + top: calc(100% + 8px); left: 0; right: 0; background: #1e1e24; @@ -286,6 +312,12 @@ watch(isOpen, () => { border-radius: 12px; padding: 16px; z-index: 1000; + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); +} + +.calendar.open-up { + top: auto; + bottom: calc(100% + 8px); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5); } @@ -385,29 +417,6 @@ watch(isOpen, () => { background: #00e6b8; } -.calendar-footer { - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid rgba(255, 255, 255, 0.06); - display: flex; - justify-content: center; -} - -.today-btn { - background: none; - border: none; - color: var(--accent); - font-size: 13px; - font-weight: 500; - cursor: pointer; - padding: 6px 12px; - border-radius: 6px; - transition: all 0.15s; -} - -.today-btn:hover { - background: var(--accent-soft); -} /* Transition */ .dropdown-enter-active, @@ -418,6 +427,11 @@ watch(isOpen, () => { .dropdown-enter-from, .dropdown-leave-to { opacity: 0; + transform: translateY(-8px); +} + +.calendar.open-up.dropdown-enter-from, +.calendar.open-up.dropdown-leave-to { transform: translateY(8px); } diff --git a/front_vue/src/components/ui/SelectDropdown.vue b/front_vue/src/components/ui/SelectDropdown.vue index c4cff71..f23dfe8 100644 --- a/front_vue/src/components/ui/SelectDropdown.vue +++ b/front_vue/src/components/ui/SelectDropdown.vue @@ -17,7 +17,7 @@ -
+
{ isOpen.value = !isOpen.value if (isOpen.value) { await nextTick() + updatePosition() searchInputRef.value?.focus() refreshIcons() } @@ -159,6 +161,27 @@ const handleClickOutside = (e) => { } } +// Пересчёт позиции при изменении размера/скролле +const updatePosition = () => { + if (isOpen.value && dropdownRef.value) { + const rect = dropdownRef.value.getBoundingClientRect() + const menuHeight = 300 + const footerOffset = 80 // отступ для футера панели с кнопками + + // Ищем родительский контейнер со скроллом (SlidePanel) + const scrollParent = dropdownRef.value.closest('.panel-body') + let availableBottom = window.innerHeight - footerOffset + + if (scrollParent) { + const parentRect = scrollParent.getBoundingClientRect() + availableBottom = parentRect.bottom + } + + const spaceBelow = availableBottom - rect.bottom + openUp.value = spaceBelow < menuHeight + } +} + // Обновление иконок const refreshIcons = () => { if (window.lucide) { @@ -168,11 +191,15 @@ const refreshIcons = () => { onMounted(() => { document.addEventListener('click', handleClickOutside) + window.addEventListener('resize', updatePosition) + window.addEventListener('scroll', updatePosition, true) refreshIcons() }) onUnmounted(() => { document.removeEventListener('click', handleClickOutside) + window.removeEventListener('resize', updatePosition) + window.removeEventListener('scroll', updatePosition, true) }) onUpdated(refreshIcons) @@ -233,6 +260,12 @@ onUpdated(refreshIcons) overflow: hidden; } +.dropdown-menu.open-up { + top: auto; + bottom: calc(100% + 6px); + box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4); +} + .dropdown-search { width: 100%; padding: 12px 14px; @@ -366,4 +399,9 @@ onUpdated(refreshIcons) opacity: 0; transform: translateY(-8px); } + +.dropdown-menu.open-up.dropdown-enter-from, +.dropdown-menu.open-up.dropdown-leave-to { + transform: translateY(8px); +} diff --git a/taskboard.sql b/taskboard.sql index fd53d3b..66f8780 100644 --- a/taskboard.sql +++ b/taskboard.sql @@ -11,7 +11,7 @@ Target Server Version : 90200 (9.2.0) File Encoding : 65001 - Date: 12/01/2026 01:11:18 + Date: 13/01/2026 08:18:18 */ SET NAMES utf8mb4; @@ -45,7 +45,7 @@ CREATE TABLE `accounts_session` ( `ip_address` varchar(45) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `user_agent` varchar(512) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE -) ENGINE = InnoDB AUTO_INCREMENT = 19 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; +) ENGINE = InnoDB AUTO_INCREMENT = 26 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Table structure for cards_task @@ -58,6 +58,7 @@ CREATE TABLE `cards_task` ( `id_account` int NULL DEFAULT NULL, `order` int NULL DEFAULT NULL, `column_id` int NULL DEFAULT NULL, + `archive` tinyint NULL DEFAULT NULL, `date` datetime NULL DEFAULT NULL, `date_create` datetime NULL DEFAULT NULL, `file_img` json NULL, @@ -65,7 +66,7 @@ CREATE TABLE `cards_task` ( `descript` varchar(2048) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `descript_full` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL, PRIMARY KEY (`id`) USING BTREE -) ENGINE = InnoDB AUTO_INCREMENT = 15 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; +) ENGINE = InnoDB AUTO_INCREMENT = 16 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Table structure for columns @@ -76,7 +77,7 @@ CREATE TABLE `columns` ( `name_columns` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `color` varchar(7) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE -) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; +) ENGINE = InnoDB AUTO_INCREMENT = 56 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Table structure for departments