fix: заявки в разработке (склад/снабжение, часть кадров) отображаются заблокированными плитками
Tests / frontend-test (push) Successful in 1m11s
Tests / frontend-test (push) Successful in 1m11s
This commit is contained in:
@@ -46,6 +46,31 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tileDisabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
background: $gray-50;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: $sh-1;
|
||||||
|
transform: none;
|
||||||
|
border-color: $gray-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::before {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tileIcon {
|
||||||
|
background: $gray-100;
|
||||||
|
border-color: $gray-200;
|
||||||
|
color: $gray-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tileTitle {
|
||||||
|
color: $gray-400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tileIcon {
|
.tileIcon {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import styles from './RequestGrid.module.scss';
|
import styles from './RequestGrid.module.scss';
|
||||||
import { Icon } from '@tnsu/ui-kit';
|
import { Badge, Icon } from '@tnsu/ui-kit';
|
||||||
import { IRequestType } from '../../models/types';
|
import { IRequestType } from '../../models/types';
|
||||||
|
|
||||||
interface IRequestGridProps {
|
interface IRequestGridProps {
|
||||||
@@ -19,7 +19,8 @@ export const RequestGrid: React.FC<IRequestGridProps> = ({ requests, onSelect })
|
|||||||
<button
|
<button
|
||||||
key={request.id}
|
key={request.id}
|
||||||
type="button"
|
type="button"
|
||||||
className={styles.tile}
|
className={request.comingSoon ? `${styles.tile} ${styles.tileDisabled}` : styles.tile}
|
||||||
|
disabled={request.comingSoon}
|
||||||
onClick={() => onSelect(request)}
|
onClick={() => onSelect(request)}
|
||||||
>
|
>
|
||||||
<span className={styles.tileIcon}>
|
<span className={styles.tileIcon}>
|
||||||
@@ -27,11 +28,19 @@ export const RequestGrid: React.FC<IRequestGridProps> = ({ requests, onSelect })
|
|||||||
</span>
|
</span>
|
||||||
<span className={styles.tileBody}>
|
<span className={styles.tileBody}>
|
||||||
<span className={styles.tileTitle}>{request.title}</span>
|
<span className={styles.tileTitle}>{request.title}</span>
|
||||||
{request.description && <span className={styles.tileDesc}>{request.description}</span>}
|
{request.comingSoon ? (
|
||||||
</span>
|
<Badge variant="muted" size="sm">
|
||||||
<span className={styles.tileArrow}>
|
В разработке
|
||||||
<Icon name="chevron-right" size="sm" />
|
</Badge>
|
||||||
|
) : (
|
||||||
|
request.description && <span className={styles.tileDesc}>{request.description}</span>
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
|
{!request.comingSoon && (
|
||||||
|
<span className={styles.tileArrow}>
|
||||||
|
<Icon name="chevron-right" size="sm" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -17,14 +17,32 @@ export const REQUEST_TYPES: IRequestType[] = [
|
|||||||
// Отдел кадров
|
// Отдел кадров
|
||||||
{ id: 'hr-vacation', categoryId: 'hr', title: 'Заявка на трудовой отпуск', icon: 'calendar' },
|
{ id: 'hr-vacation', categoryId: 'hr', title: 'Заявка на трудовой отпуск', icon: 'calendar' },
|
||||||
{ id: 'hr-unpaid-leave', categoryId: 'hr', title: 'Заявка на отпуск без содержания', icon: 'document' },
|
{ id: 'hr-unpaid-leave', categoryId: 'hr', title: 'Заявка на отпуск без содержания', icon: 'document' },
|
||||||
{ id: 'hr-dismissal', categoryId: 'hr', title: 'Заявление на увольнение', icon: 'document' },
|
{ id: 'hr-dismissal', categoryId: 'hr', title: 'Заявление на увольнение', icon: 'document', comingSoon: true },
|
||||||
{ id: 'clearance-form', categoryId: 'hr', title: 'Обходной лист', icon: 'clipboard' },
|
{ id: 'clearance-form', categoryId: 'hr', title: 'Обходной лист', icon: 'clipboard', comingSoon: true },
|
||||||
{ id: 'hr-transfer', categoryId: 'hr', title: 'Заявка на перемещение сотрудника', icon: 'people' },
|
{
|
||||||
|
id: 'hr-transfer',
|
||||||
|
categoryId: 'hr',
|
||||||
|
title: 'Заявка на перемещение сотрудника',
|
||||||
|
icon: 'people',
|
||||||
|
comingSoon: true
|
||||||
|
},
|
||||||
|
|
||||||
// Склад / Снабжение
|
// Склад / Снабжение
|
||||||
{ id: 'wh-tmc-transfer', categoryId: 'warehouse', title: 'СЗ на перемещение ТМЦ', icon: 'send' },
|
{ id: 'wh-tmc-transfer', categoryId: 'warehouse', title: 'СЗ на перемещение ТМЦ', icon: 'send', comingSoon: true },
|
||||||
{ id: 'wh-service-request', categoryId: 'warehouse', title: 'Заявка на услуги', icon: 'document' },
|
{
|
||||||
{ id: 'wh-concrete-request', categoryId: 'warehouse', title: 'Заявка на бетон', icon: 'vehicle' }
|
id: 'wh-service-request',
|
||||||
|
categoryId: 'warehouse',
|
||||||
|
title: 'Заявка на услуги',
|
||||||
|
icon: 'document',
|
||||||
|
comingSoon: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'wh-concrete-request',
|
||||||
|
categoryId: 'warehouse',
|
||||||
|
title: 'Заявка на бетон',
|
||||||
|
icon: 'vehicle',
|
||||||
|
comingSoon: true
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
/** Заявки, относящиеся к указанной категории. */
|
/** Заявки, относящиеся к указанной категории. */
|
||||||
|
|||||||
@@ -19,6 +19,8 @@ export interface IRequestType {
|
|||||||
/** Короткое пояснение под заголовком плитки. Необязательно. */
|
/** Короткое пояснение под заголовком плитки. Необязательно. */
|
||||||
description?: string;
|
description?: string;
|
||||||
icon: IconName;
|
icon: IconName;
|
||||||
|
/** Заявка ещё не готова к использованию: плитка видна, но заблокирована. */
|
||||||
|
comingSoon?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user