si/iistwin
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(ui): горизонтальное расположение подполей в inline-редакторе

Browse Source 
- ContractNumberField compact: переключатель, select юрлица и input/preview в одну строку

- TaskDetail: date/datetime с автопролонгацией — input и чекбокс в одну строку

- Увеличена max-width обёртки contract-number до 640px
This commit is contained in:
Ильяс Султанов
2026-07-15 16:46:48 +03:00
parent 2b3a9f768b
commit 9e388fb644
2 changed files with 36 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
client/src/components/ContractNumberField.tsx
View File

@@ -130,38 +130,36 @@ export default function ContractNumberField({
const isGenerated = !!(parsed.mode === 'mine' && parsed.value && parsed.value !== '');
return (
<div className={cn(compact ? 'flex flex-col gap-2' : 'space-y-2')}>
<div className={cn('flex items-center', compact ? 'gap-3 flex-wrap' : 'space-x-3')}>
<div className="flex items-center space-x-3 shrink-0">
<Switch
id={`contract-number-mode-${fieldId}`}
checked={mode === 'mine'}
onCheckedChange={(checked: boolean) => handleModeChange(checked ? 'mine' : 'customer')}
disabled={disabled || isGenerated}
/>
<Label htmlFor={`contract-number-mode-${fieldId}`} className="cursor-pointer">
{mode === 'mine' ? 'Мой номер' : 'Номер заказчика'}
</Label>
</div>
<div className={cn(compact ? 'flex items-center gap-2 flex-wrap' : 'space-y-2')}>
<div className="flex items-center space-x-3 shrink-0">
<Switch
id={`contract-number-mode-${fieldId}`}
checked={mode === 'mine'}
onCheckedChange={(checked: boolean) => handleModeChange(checked ? 'mine' : 'customer')}
disabled={disabled || isGenerated}
/>
<Label htmlFor={`contract-number-mode-${fieldId}`} className="cursor-pointer">
{mode === 'mine' ? 'Мой номер' : 'Номер заказчика'}
</Label>
</div>
<div className={cn('flex-1 min-w-[180px]', compact && 'w-full')}>
<Select
value={legalEntityTaskId?.toString() || ''}
onValueChange={handleLegalEntityChange}
disabled={disabled || isGenerated}
>
<SelectTrigger>
<SelectValue placeholder="Выберите юрлицо" />
</SelectTrigger>
<SelectContent>
{tasksData?.tasks?.map((task) => (
<SelectItem key={task.id} value={task.id.toString()}>
#{task.id} {task.title}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className={cn('flex-1 min-w-[160px]', compact ? 'max-w-[200px]' : 'w-full')}>
<Select
value={legalEntityTaskId?.toString() || ''}
onValueChange={handleLegalEntityChange}
disabled={disabled || isGenerated}
>
<SelectTrigger>
<SelectValue placeholder="Выберите юрлицо" />
</SelectTrigger>
<SelectContent>
{tasksData?.tasks?.map((task) => (
<SelectItem key={task.id} value={task.id.toString()}>
#{task.id} {task.title}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{mode === 'customer' ? (
@@ -171,10 +169,10 @@ export default function ContractNumberField({
onChange={(e) => handleCustomerChange(e.target.value)}
placeholder="Введите шифр заказчика"
disabled={disabled}
className={cn(compact && 'h-7 leading-6 px-2')}
className={cn('flex-1 min-w-[160px]', compact && 'h-7 leading-6 px-2 max-w-[220px]')}
/>
) : (
<div className="relative">
<div className={cn('relative flex-1 min-w-[160px]', compact && 'max-w-[220px]')}>
<div className={cn(
'flex items-center space-x-2 rounded-md border border-input bg-muted/30',
compact ? 'px-2 h-7' : 'px-3 py-2'

10
client/src/pages/TaskDetail.tsx
View File

@@ -995,7 +995,7 @@ function FieldValueRow({
if (field.type === 'date') {
const isProlongation = editorValue === '__auto_prolongation__';
return (
<div className="space-y-1">
<div className="flex items-center gap-2 flex-wrap">
<input
type="date"
className={inputClass}
@@ -1007,7 +1007,7 @@ function FieldValueRow({
aria-invalid={!!errorMessage}
/>
{field.autoProlongation && (
<label className="flex items-center space-x-2 text-sm cursor-pointer">
<label className="flex items-center space-x-2 text-sm cursor-pointer shrink-0">
<input
type="checkbox"
checked={isProlongation}
@@ -1023,7 +1023,7 @@ function FieldValueRow({
if (field.type === 'datetime') {
const isProlongation = editorValue === '__auto_prolongation__';
return (
<div className="space-y-1">
<div className="flex items-center gap-2 flex-wrap">
<input
type="datetime-local"
className={inputClass}
@@ -1035,7 +1035,7 @@ function FieldValueRow({
aria-invalid={!!errorMessage}
/>
{field.autoProlongation && (
<label className="flex items-center space-x-2 text-sm cursor-pointer">
<label className="flex items-center space-x-2 text-sm cursor-pointer shrink-0">
<input
type="checkbox"
checked={isProlongation}
@@ -1153,7 +1153,7 @@ function FieldValueRow({
if (field.type === 'contract-number') {
const cnConfig = (field.options as any)?.contractNumber;
return (
<div className="w-full max-w-[320px]" onClick={e => e.stopPropagation()}>
<div className="w-full max-w-[640px]" onClick={e => e.stopPropagation()}>
<ContractNumberField
value={editorValue as any}
onChange={(val) => onDraftChange?.(JSON.stringify(val))}