@@ -182,15 +186,15 @@ export function DevicesPage() {
-
-
-
- {device.lastLocation? 'Исправно' : 'Требует ТО'}
+
+
+
+ {device.lastLocation ? 'Исправно' : 'Требует ТО'}
|
-
+
+
)
}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.scss b/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.scss
new file mode 100644
index 0000000..c936bbc
--- /dev/null
+++ b/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.scss
@@ -0,0 +1,163 @@
+@use '../../../../shared/styles/variables' as *;
+
+.add-device-modal__overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 80;
+
+ background: rgba(15, 23, 42, 0.42);
+ backdrop-filter: blur(2px);
+
+ animation: addDeviceOverlayShow 0.18s ease;
+}
+
+.add-device-modal {
+ position: fixed;
+ z-index: 90;
+ top: 50%;
+ left: 50%;
+
+ width: min(520px, calc(100vw - 32px));
+ padding: 24px;
+
+ border-radius: 24px;
+ background: #ffffff;
+ box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
+
+ transform: translate(-50%, -50%);
+ animation: addDeviceModalShow 0.2s ease;
+}
+
+.add-device-modal__header {
+ margin-bottom: 22px;
+
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+.add-device-modal__title {
+ margin: 0;
+
+ color: #111827;
+ font-size: 24px;
+ font-weight: 650;
+}
+
+.add-device-modal__description {
+ margin: 6px 0 0;
+
+ color: $gray50;
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 1.4;
+}
+
+.add-device-modal__close {
+ width: 40px;
+ height: 40px;
+
+ border: none;
+ border-radius: 12px;
+ background: $color-bg;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $gray50;
+ cursor: pointer;
+ transition: 0.2s ease;
+
+ &:hover {
+ color: $blue;
+ background: $gray20;
+ }
+}
+
+.add-device-qr {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+
+ p {
+ margin: 0;
+
+ color: $gray50;
+ font-size: 14px;
+ line-height: 1.45;
+ text-align: center;
+ }
+}
+
+.add-device-qr__box {
+ min-height: 260px;
+ border-radius: 22px;
+ border: 1px dashed rgba(3, 29, 154, 0.32);
+ background: $color-bg;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 14px;
+
+ color: $blue;
+
+ span {
+ color: #111827;
+ font-size: 18px;
+ font-weight: 600;
+ }
+}
+
+.add-device-modal__footer {
+ margin-top: 22px;
+
+ display: flex;
+ justify-content: flex-end;
+}
+
+.add-device-cancel {
+ height: 42px;
+ padding: 0 18px;
+
+ border: none;
+ border-radius: 14px;
+ background: $color-bg;
+
+ color: $gray50;
+ font-size: 15px;
+ font-weight: 600;
+ cursor: pointer;
+
+ transition: 0.2s ease;
+
+ &:hover {
+ background: $gray20;
+ color: #111827;
+ }
+}
+
+@keyframes addDeviceOverlayShow {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes addDeviceModalShow {
+ from {
+ opacity: 0;
+ transform: translate(-50%, -48%) scale(0.98);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(1);
+ }
+}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.tsx b/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.tsx
new file mode 100644
index 0000000..752a130
--- /dev/null
+++ b/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.tsx
@@ -0,0 +1,55 @@
+import * as Dialog from '@radix-ui/react-dialog'
+import { QrCode, X } from 'lucide-react'
+
+import './AddDeviceModal.scss'
+
+type AddDeviceModalProps = {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+}
+
+export function AddDeviceModal({ open, onOpenChange }: AddDeviceModalProps) {
+ return (
+
+
+
+
+
+
+
+
+ Добавить устройство
+
+
+
+ Отсканируйте QR-код на устройстве для привязки к системе
+
+
+
+
+
+
+
+
+
+ Здесь будет QR-код
+
+
+
+ После сканирования устройство появится в списке и будет доступно
+ для назначения сотруднику.
+
+
+
+ Закрыть
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.scss b/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.scss
index 36f9a90..2552105 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.scss
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.scss
@@ -3,18 +3,18 @@
.devices-tabs {
display: flex;
align-items: center;
- gap: 10px;
+ gap: 8px;
}
.devices-tabs__item {
position: relative;
min-height: 36px;
- padding: 8px 18px;
+ padding: 12px 20px;
border: none;
- border-radius: 10px;
+ border-radius: 12px;
background: #ffffff;
color: #4f5b73;
- font-size: 16px;
+ font-size: 18px;
font-weight: 400;
cursor: pointer;
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesToolbar/DevicesToolbar.scss b/mdm-front/src/pages/DevicesPage/components/DevicesToolbar/DevicesToolbar.scss
index 833c984..ee00a4d 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesToolbar/DevicesToolbar.scss
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesToolbar/DevicesToolbar.scss
@@ -45,8 +45,9 @@
gap: 6px;
button {
- padding: 12px;
+ padding: 12px 20px;
font-size: 16px;
+ font-weight: 450;
background-color: $color-bg;
border-radius: 20px;
border: none;
@@ -55,35 +56,124 @@
.add-device {
background-color: $blue;
color: white;
+ cursor: pointer;
}
}
.devices-sort {
- display: flex;
- flex-direction: row;
- gap: 8px;
- align-items: center;
- background: #ffffff;
- color: $gray50;
- font-size: 16px;
- cursor: pointer;
+ //height: 32px;
+ padding: 12px 14px 12px 20px !important;
+
+ border: none;
+ border-radius: 20px;
+ background: #ffffff;
+
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+
+ color: $gray50;
+ font-size: 14px;
+ font-weight: 500;
+
+ cursor: pointer;
+ transition: 0.2s ease;
+
+ &:hover {
+ color: $blue;
+ }
+}
+
+.devices-sort__chevron {
+ transition: transform 0.2s ease;
+}
+
+.devices-sort[data-state='open'] {
+ color: $blue;
+
+ .devices-sort__chevron {
+ transform: rotate(180deg);
+ }
+}
+
+.devices-sort-menu {
+ z-index: 100;
+
+ min-width: 230px;
+ padding: 6px;
+
+ border-radius: 16px;
+ background: #ffffff;
+
+ box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
+
+ animation: devicesSortMenuShow 0.16s ease;
+}
+
+.devices-sort-menu__item {
+ min-height: 38px;
+ padding: 0 10px;
+ border-radius: 10px;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+
+ color: #30394b;
+ font-size: 14px;
+ font-weight: 500;
+
+ outline: none;
+ cursor: pointer;
+
+ &[data-highlighted] {
+ background: #f1f4f8;
+ color: $blue;
+ }
+}
+
+.devices-sort-menu__check {
+ width: 7px;
+ height: 7px;
+
+ border-radius: 50%;
+ background: $blue;
+ flex: 0 0 7px;
+}
+
+@keyframes devicesSortMenuShow {
+ from {
+ opacity: 0;
+ transform: translateY(-4px) scale(0.98);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
}
.devices-filter {
position: relative;
border: none;
border-radius: 20px;
- color: $blue;
-
+ color: $gray50;
+ padding: 12px !important;
display: inline-flex;
align-items: center;
justify-content: center;
+ transition: .2s ease;
cursor: pointer;
+ &--active{
+ color: $blue;
+ }
+
svg {
- height: 16px;
+ height: 19px;
width: auto;
}
}
@@ -92,8 +182,8 @@
position: absolute;
top: -2px;
right: -1px;
- width: 8px;
- height: 8px;
+ width: 12px;
+ height: 12px;
border-radius: 50%;
background: $blue;
}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesToolbar/DevicesToolbar.tsx b/mdm-front/src/pages/DevicesPage/components/DevicesToolbar/DevicesToolbar.tsx
index 0596ed6..6ab2f59 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesToolbar/DevicesToolbar.tsx
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesToolbar/DevicesToolbar.tsx
@@ -1,38 +1,98 @@
-import { Search, SlidersHorizontal } from 'lucide-react'
+import { useState } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { ChevronDown, Search, SlidersHorizontal } from 'lucide-react'
+
import './DevicesToolbar.scss'
type DevicesToolbarProps = {
- isFiltersOpen: boolean
- onToggleFilters: () => void
+ isFiltersOpen: boolean
+ onToggleFilters: () => void
+ onAddDevice: () => void
}
-export function DevicesToolbar({ isFiltersOpen, onToggleFilters }: DevicesToolbarProps) {
- return (
-
-
+const sortOptions = [
+ {
+ value: 'default',
+ label: 'По умолчанию',
+ },
+ {
+ value: 'id-asc',
+ label: 'ID по возрастанию',
+ },
+ {
+ value: 'id-desc',
+ label: 'ID по убыванию',
+ },
+ {
+ value: 'serial-asc',
+ label: 'Заводской номер А–Я',
+ },
+ {
+ value: 'serial-desc',
+ label: 'Заводской номер Я–А',
+ }
+]
-
-
-
+export function DevicesToolbar({
+ isFiltersOpen,
+ onToggleFilters,
+ onAddDevice,
+}: DevicesToolbarProps) {
+ const [selectedSort, setSelectedSort] = useState(sortOptions[0])
-
- )
+ {option.label}
+
+ {selectedSort.value === option.value && (
+
+ )}
+
+ ))}
+
+
+
+
+
+
+ Сотрудники
+ const client = useApolloClient()
+
+ const [currentPage, setCurrentPage] = useState(1)
+ const [loadedPages, setLoadedPages] = useState([])
+ const [loadedNextKeys, setLoadedNextKeys] = useState>([])
+ const [isPageLoading, setIsPageLoading] = useState(false)
+
+ const [isAddEmployeeOpen, setIsAddEmployeeOpen] = useState(false)
+
+ const {
+ data: firstPageData,
+ loading: isFirstPageLoading,
+ error,
+ } = useQuery(GET_USERS_PAGE_QUERY, {
+ variables: {},
+ fetchPolicy: 'network-only',
+ })
+
+ const firstPageEmployees = firstPageData?.getUsersPage.page ?? []
+ const firstPageNextKey = firstPageData?.getUsersPage.nextKey ?? null
+
+ const pages = [firstPageEmployees, ...loadedPages]
+ const employees = pages[currentPage - 1] ?? []
+
+ const nextKey =
+ currentPage === 1
+ ? firstPageNextKey
+ : loadedNextKeys[currentPage - 2] ?? null
+
+ const loading = isFirstPageLoading || isPageLoading
+
+ async function handleNextPage() {
+ const alreadyLoadedNextPage = pages[currentPage]
+
+ if (alreadyLoadedNextPage) {
+ setCurrentPage((prev) => prev + 1)
+ return
+ }
+
+ if (!nextKey) return
+
+ setIsPageLoading(true)
+
+ try {
+ const result = await client.query({
+ query: GET_USERS_PAGE_QUERY,
+ variables: {
+ key: nextKey,
+ },
+ fetchPolicy: 'network-only',
+ })
+
+ const nextPageData = result.data?.getUsersPage
+
+ if (!nextPageData) {
+ return
+ }
+
+ setLoadedPages((prev) => [...prev, nextPageData.page])
+ setLoadedNextKeys((prev) => [...prev, nextPageData.nextKey])
+ setCurrentPage((prev) => prev + 1)
+ } finally {
+ setIsPageLoading(false)
+ }
+ }
+
+ function handlePrevPage() {
+ setCurrentPage((prev) => Math.max(1, prev - 1))
+ }
+
+ return (
+
+ setIsAddEmployeeOpen(true)} />
+
+
+
+ {loading && employees.length === 0 && (
+ Загрузка сотрудников...
+ )}
+
+ {error && (
+
+ Не удалось загрузить сотрудников
+
+ )}
+
+ {!loading && !error && employees.length === 0 && (
+ Сотрудники не найдены
+ )}
+
+ {!error && employees.length > 0 && (
+
+
+
+ | ID |
+ Роль |
+
+
+
+
+ {employees.map((employee) => (
+
+ | {employee.id} |
+
+ {employee.role}
+ |
+
+ ))}
+
+
+ )}
+
+
+
+ Страница {currentPage}
+
+
+
+
+
+
+
+
+
+
+
+
+ Добавить сотрудника
+
+
+
+ Создание пользователя для доступа к смартфонам
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {sortOptions.map((option) => (
+ setSelectedSort(option)}
+ >
+ {option.label}
+
+ {selectedSort.value === option.value && (
+
+ )}
+
+ ))}
+
+
+
+
+ Карта
+ const { data, loading, error } = useQuery(
+ GET_PHONES_PAGE_QUERY,
+ {
+ variables: {},
+ fetchPolicy: 'network-only',
+ },
+ )
+
+ const devices = data?.getPhonesPage.page ?? []
+ const devicesWithLocation = devices.filter((device) => device.lastLocation)
+
+ const firstLocation = devicesWithLocation[0]?.lastLocation
+
+ const mapCenter: [number, number] = firstLocation
+ ? [firstLocation.lat, firstLocation.lng]
+ : [55.397243, 86.117034]
+
+ return (
+
+ {/*
+
+
+ {loading && Загрузка устройств... }
+
+ {error && (
+
+ Не удалось загрузить устройства
+
+ )}
+
+ {!loading && !error && (
+ <>
+
+
+ {devicesWithLocation.map((device) => (
+
+ {device.serial || `Устройство #${device.id}`}
+
+ {device.lastLocation
+ ? formatLocationDate(device.lastLocation.date)
+ : 'Нет данных'}
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ {devicesWithLocation.map((device) => {
+ if (!device.lastLocation) return null
+
+ return (
+
+
+
+
+ {device.serial || `Устройство #${device.id}`}
+
+
+
+ {formatLocationDate(device.lastLocation.date)}
+
+
+
+ {device.lastLocation.lat}, {device.lastLocation.lng}
+
+
+
{title}
-
- Администратор
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Текущая роль
+ {userRole}
+
+
+
+
+
+
+ Выйти
+
+
+
+
)
|