bro-js/challenge-admin-pl
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add isActive field to challenge chains and update localization; implement functionality to toggle chain status in the UI, enhancing task management and user experience.

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich
2025-12-10 12:02:11 +03:00
parent 4e1b290f99
commit 173954f685
8 changed files with 109 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
locales/en.json
View File

@@ -74,6 +74,8 @@
"challenge.admin.chains.button.add": "+ Add",
"challenge.admin.chains.button.save": "Save changes",
"challenge.admin.chains.button.create": "Create chain",
"challenge.admin.chains.field.isActive": "Active for students",
"challenge.admin.chains.field.isActive.helper": "If disabled, the chain will not appear in the user-facing list.",
"challenge.admin.chains.list.title": "Task Chains",
"challenge.admin.chains.list.create.button": "+ Create Chain",
"challenge.admin.chains.list.search.placeholder": "Search by name...",
@@ -84,8 +86,11 @@
"challenge.admin.chains.list.table.name": "Name",
"challenge.admin.chains.list.table.tasks.count": "Number of tasks",
"challenge.admin.chains.list.table.created": "Created date",
"challenge.admin.chains.list.table.status": "Status",
"challenge.admin.chains.list.table.actions": "Actions",
"challenge.admin.chains.list.badge.tasks": "tasks",
"challenge.admin.chains.list.status.active": "Active",
"challenge.admin.chains.list.status.inactive": "Inactive",
"challenge.admin.chains.list.button.edit": "Edit",
"challenge.admin.chains.list.button.delete": "Delete",
"challenge.admin.chains.deleted": "Chain deleted",

5
locales/ru.json
View File

@@ -73,6 +73,8 @@
"challenge.admin.chains.button.add": "+ Добавить",
"challenge.admin.chains.button.save": "Сохранить изменения",
"challenge.admin.chains.button.create": "Создать цепочку",
"challenge.admin.chains.field.isActive": "Активна для студентов",
"challenge.admin.chains.field.isActive.helper": "Если выключить, цепочка не будет отображаться в пользовательском списке.",
"challenge.admin.chains.list.title": "Цепочки заданий",
"challenge.admin.chains.list.create.button": "+ Создать цепочку",
"challenge.admin.chains.list.search.placeholder": "Поиск по названию...",
@@ -83,8 +85,11 @@
"challenge.admin.chains.list.table.name": "Название",
"challenge.admin.chains.list.table.tasks.count": "Количество заданий",
"challenge.admin.chains.list.table.created": "Дата создания",
"challenge.admin.chains.list.table.status": "Статус",
"challenge.admin.chains.list.table.actions": "Действия",
"challenge.admin.chains.list.badge.tasks": "заданий",
"challenge.admin.chains.list.status.active": "Включена",
"challenge.admin.chains.list.status.inactive": "Выключена",
"challenge.admin.chains.list.button.edit": "Редактировать",
"challenge.admin.chains.list.button.delete": "Удалить",
"challenge.admin.chains.deleted": "Цепочка удалена",

2
src/__data__/api/api.ts
View File

@@ -77,7 +77,7 @@ export const api = createApi({
// Chains
getChains: builder.query<ChallengeChain[], void>({
query: () => '/challenge/chains',
query: () => '/challenge/chains/admin',
transformResponse: (response: { body: ChallengeChain[] }) => response.body,
providesTags: ['Chain'],
}),

23
src/pages/chains/ChainFormPage.tsx
View File

@@ -42,11 +42,13 @@ export const ChainFormPage: React.FC = () => {
const [name, setName] = useState('')
const [selectedTasks, setSelectedTasks] = useState<ChallengeTask[]>([])
const [searchQuery, setSearchQuery] = useState('')
const [isActive, setIsActive] = useState(true)
useEffect(() => {
if (chain) {
setName(chain.name)
setSelectedTasks(chain.tasks)
setIsActive(chain.isActive !== false)
}
}, [chain])
@@ -80,6 +82,7 @@ export const ChainFormPage: React.FC = () => {
data: {
name: name.trim(),
taskIds: taskIds,
isActive,
},
}).unwrap()
toaster.create({
@@ -91,6 +94,7 @@ export const ChainFormPage: React.FC = () => {
await createChain({
name: name.trim(),
taskIds: taskIds,
isActive,
}).unwrap()
toaster.create({
title: t('challenge.admin.common.success'),
@@ -191,6 +195,25 @@ export const ChainFormPage: React.FC = () => {
/>
</Field.Root>
{/* Active flag */}
<Field.Root>
<HStack justify="space-between" align="flex-start">
<HStack gap={2}>
<input
type="checkbox"
checked={isActive}
onChange={(e) => setIsActive(e.target.checked)}
disabled={isLoading}
style={{ cursor: isLoading ? 'not-allowed' : 'pointer' }}
/>
<Text>{t('challenge.admin.chains.field.isActive')}</Text>
</HStack>
<Text fontSize="sm" color="gray.500" maxW="md">
{t('challenge.admin.chains.field.isActive.helper')}
</Text>
</HStack>
</Field.Root>
{/* Selected Tasks */}
<Box>
<Text fontWeight="bold" mb={3}>

48
src/pages/chains/ChainsListPage.tsx
View File

@@ -12,7 +12,7 @@ import {
Text,
Badge,
} from '@chakra-ui/react'
import { useGetChainsQuery, useDeleteChainMutation } from '../../__data__/api/api'
import { useGetChainsQuery, useDeleteChainMutation, useUpdateChainMutation } from '../../__data__/api/api'
import { URLs } from '../../__data__/urls'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { ErrorAlert } from '../../components/ErrorAlert'
@@ -29,6 +29,8 @@ export const ChainsListPage: React.FC = () => {
const [searchQuery, setSearchQuery] = useState('')
const [chainToDelete, setChainToDelete] = useState<ChallengeChain | null>(null)
const [updatingChainId, setUpdatingChainId] = useState<string | null>(null)
const [updateChain] = useUpdateChainMutation()
const handleDeleteChain = async () => {
if (!chainToDelete) return
@@ -50,6 +52,30 @@ export const ChainsListPage: React.FC = () => {
}
}
const handleToggleActive = async (chain: ChallengeChain, nextValue: boolean) => {
setUpdatingChainId(chain.id)
try {
await updateChain({
id: chain.id,
data: { isActive: nextValue },
}).unwrap()
toaster.create({
title: t('challenge.admin.common.success'),
description: t('challenge.admin.chains.updated'),
type: 'success',
})
} catch {
toaster.create({
title: t('challenge.admin.common.error'),
description: t('challenge.admin.chains.save.error'),
type: 'error',
})
} finally {
setUpdatingChainId(null)
}
}
if (isLoading) {
return <LoadingSpinner message={t('challenge.admin.chains.list.loading')} />
}
@@ -110,6 +136,7 @@ export const ChainsListPage: React.FC = () => {
<Table.ColumnHeader>{t('challenge.admin.chains.list.table.name')}</Table.ColumnHeader>
<Table.ColumnHeader>{t('challenge.admin.chains.list.table.tasks.count')}</Table.ColumnHeader>
<Table.ColumnHeader>{t('challenge.admin.chains.list.table.created')}</Table.ColumnHeader>
<Table.ColumnHeader>{t('challenge.admin.chains.list.table.status')}</Table.ColumnHeader>
<Table.ColumnHeader textAlign="right">{t('challenge.admin.chains.list.table.actions')}</Table.ColumnHeader>
</Table.Row>
</Table.Header>
@@ -127,6 +154,25 @@ export const ChainsListPage: React.FC = () => {
{formatDate(chain.createdAt)}
</Text>
</Table.Cell>
<Table.Cell>
<HStack gap={3} justify="flex-start">
<Badge colorPalette={chain.isActive ? 'green' : 'gray'} variant="subtle">
{chain.isActive
? t('challenge.admin.chains.list.status.active')
: t('challenge.admin.chains.list.status.inactive')}
</Badge>
<Button
size="xs"
variant="outline"
onClick={() => handleToggleActive(chain, !chain.isActive)}
isDisabled={updatingChainId === chain.id}
>
{chain.isActive
? t('challenge.admin.chains.list.status.inactive')
: t('challenge.admin.chains.list.status.active')}
</Button>
</HStack>
</Table.Cell>
<Table.Cell textAlign="right">
<HStack gap={2} justify="flex-end">
<Button

3
src/types/challenge.ts
View File

@@ -27,6 +27,7 @@ export interface ChallengeChain {
id: string
name: string
tasks: ChallengeTask[] // Populated
isActive: boolean
createdAt: string
updatedAt: string
}
@@ -132,11 +133,13 @@ export interface UpdateTaskRequest {
export interface CreateChainRequest {
name: string
taskIds: string[] // Array of task IDs
isActive?: boolean
}
export interface UpdateChainRequest {
name?: string
taskIds?: string[]
isActive?: boolean
}
// ========== Stats v2 Types ==========

3
stubs/api/data/chains.json
View File

@@ -21,6 +21,7 @@
"updatedAt": "2024-11-05T11:00:00.000Z"
}
],
"isActive": true,
"createdAt": "2024-11-01T09:00:00.000Z",
"updatedAt": "2024-11-05T12:00:00.000Z"
},
@@ -38,6 +39,7 @@
"updatedAt": "2024-11-03T09:15:00.000Z"
}
],
"isActive": false,
"createdAt": "2024-11-03T08:00:00.000Z",
"updatedAt": "2024-11-03T09:30:00.000Z"
},
@@ -63,6 +65,7 @@
"updatedAt": "2024-11-04T14:20:00.000Z"
}
],
"isActive": true,
"createdAt": "2024-11-02T11:00:00.000Z",
"updatedAt": "2024-11-04T15:00:00.000Z"
}

30
stubs/api/index.js
View File

@@ -184,8 +184,15 @@ router.delete('/challenge/task/:id', (req, res) => {
// ============= CHAINS =============
// GET /api/challenge/chains
// GET /api/challenge/chains (user-facing list: only active chains)
router.get('/challenge/chains', (req, res) => {
const chains = getChains();
const activeChains = chains.filter(c => c.isActive !== false);
respond(res, activeChains);
});
// GET /api/challenge/chains/admin (admin list: all chains)
router.get('/challenge/chains/admin', (req, res) => {
const chains = getChains();
respond(res, chains);
});
@@ -204,17 +211,17 @@ router.get('/challenge/chain/:id', (req, res) => {
// POST /api/challenge/chain
router.post('/challenge/chain', (req, res) => {
const { name, tasks } = req.body;
const { name, taskIds, isActive } = req.body;
if (!name || !tasks || !Array.isArray(tasks)) {
return respondError(res, 'Name and tasks array are required');
if (!name || !taskIds || !Array.isArray(taskIds)) {
return respondError(res, 'Name and taskIds array are required');
}
const chains = getChains();
const allTasks = getTasks();
// Populate tasks
const populatedTasks = tasks.map(taskId => {
const populatedTasks = taskIds.map(taskId => {
const task = allTasks.find(t => t.id === taskId);
return task ? {
_id: task._id,
@@ -231,6 +238,7 @@ router.post('/challenge/chain', (req, res) => {
id: `chain_${Date.now()}`,
name,
tasks: populatedTasks,
isActive: isActive !== undefined ? !!isActive : true,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString()
};
@@ -253,14 +261,16 @@ router.put('/challenge/chain/:id', (req, res) => {
return respondError(res, 'Chain not found', 404);
}
const { name, tasks } = req.body;
const { name, taskIds, tasks, isActive } = req.body;
const chain = chains[chainIndex];
if (name) chain.name = name;
if (tasks && Array.isArray(tasks)) {
const effectiveTaskIds = Array.isArray(taskIds) ? taskIds : (Array.isArray(tasks) ? tasks : null);
if (effectiveTaskIds) {
const allTasks = getTasks();
const populatedTasks = tasks.map(taskId => {
const populatedTasks = effectiveTaskIds.map(taskId => {
const task = allTasks.find(t => t.id === taskId);
return task ? {
_id: task._id,
@@ -274,6 +284,10 @@ router.put('/challenge/chain/:id', (req, res) => {
chain.tasks = populatedTasks;
}
if (isActive !== undefined) {
chain.isActive = !!isActive;
}
chain.updatedAt = new Date().toISOString();