Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/TeamVastsea/klpbbs_survey_f…
Browse files Browse the repository at this point in the history 
…rontend
  • Loading branch information
@damesck233
damesck233 committed Sep 10, 2024
2 parents dc2273d + f9699e8 commit 213c805
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 82 deletions.
2 changes: 1 addition & 1 deletion app/(root)/backstage/editor/[id]/DndTable.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,4 @@

.dragHandle:hover {
background-color: #f0f0f0;
}
}
12 changes: 5 additions & 7 deletions app/(root)/backstage/editor/[id]/components/question.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { useEffect, useState } from 'react';
import { notifications } from '@mantine/notifications';
import { Card, Stack } from '@mantine/core';
import { Stack } from '@mantine/core';
import QuestionApi, { QuestionProps, StringifyQuestionProps } from '@/api/QuestionApi';
import { PageQuestionProps } from '@/app/(root)/survey/[id]/components/question';
import EditCard from '@/app/(root)/backstage/editor/[id]/components/EditCard';
Expand Down Expand Up @@ -59,11 +59,9 @@ export default function Question(props: PageQuestionProps) {
}, []);

return (
<Card withBorder>
<Stack gap="xs">
{question ?
<EditCard question={question} setQuestion={setQuestion} save={save} /> : null}
</Stack>
</Card>
<Stack gap="xs">
{question ?
<EditCard question={question} setQuestion={setQuestion} save={save} /> : null}
</Stack>
);
}
142 changes: 68 additions & 74 deletions app/(root)/backstage/editor/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { Center, Container, Stack, Text, Title, Button, Space, Group } from '@mantine/core';
import { ActionIcon, Button, Card, Center, Container, Group, Space, Stack, Text, Title } from '@mantine/core';
import React, { useEffect, useRef, useState } from 'react';
import { notifications } from '@mantine/notifications';
import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
Expand Down Expand Up @@ -185,82 +185,76 @@ export default function SurveyPage({ params }: { params: { id: number } }) {
<Text size="md">加载中...</Text>
</Center>
) : (
<>
<Container maw={1600} w="90%">
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="questions-list" direction="vertical">
{(droppableProvided) => (
<Stack
{...droppableProvided.droppableProps}
ref={droppableProvided.innerRef}
>
{questions?.content.map((questionId, index) => (
<Draggable
key={questionId}
draggableId={questionId}
index={index}
>
{(draggableProvided, snapshot) => (
<div
ref={draggableProvided.innerRef}
{...draggableProvided.draggableProps}
className={cx(classes.item, {
[classes.itemDragging]:
snapshot.isDragging,
})}
>
<Stack>
<div
{...draggableProvided.dragHandleProps}
className={classes.dragHandle}
>
<IconGripHorizontal />
</div>
<Question
id={questionId}
value={getAnswerGetter(questionId)}
setValue={getAnswerSetter(questionId)}
setProps={getPropsSetter(questionId)}
checkAccess={() => true}
/>
</Stack>
</div>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</Stack>
)}
</Droppable>
</DragDropContext>
<Container maw={1600} w="90%">
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="questions-list" direction="vertical">
{(droppableProvided) => (
<Stack
{...droppableProvided.droppableProps}
ref={droppableProvided.innerRef}
>
{questions?.content.map((questionId, index) => (
<Draggable
key={questionId}
draggableId={questionId}
index={index}
>
{(draggableProvided, snapshot) => (
<Card
ref={draggableProvided.innerRef}
{...draggableProvided.draggableProps}
className={cx(classes.item, {
[classes.itemDragging]:
snapshot.isDragging,
})}
withBorder
radius="md"
>
<Stack>
<ActionIcon {...draggableProvided.dragHandleProps} variant="subtle" color="gray">
<IconGripHorizontal />
</ActionIcon>
<Question
id={questionId}
value={getAnswerGetter(questionId)}
setValue={getAnswerSetter(questionId)}
setProps={getPropsSetter(questionId)}
checkAccess={() => true}
/>
</Stack>
</Card>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</Stack>
)}
</Droppable>
</DragDropContext>

<Space h={20} />
<Space h={20} />

<Group grow>
<Button onClick={newQuestion}>新建问题</Button>
</Group>
<Group grow>
<Button onClick={newQuestion}>新建问题</Button>
</Group>
<Space h={20} />

{showNewQuestion && (
<>
<Space h={20} />
<div
style={{
backgroundColor: 'rgba(185, 190, 185, 0.3)',
borderRadius: '10px',
padding: '10px',
}}
>
<EditCard
question={newQuestionObject}
setQuestion={setNewQuestionObject}
cancel={() => setShowNewQuestion(false)}
save={saveNewQuestion}
/>
</div>
</>
)}
</Container>
</>
{showNewQuestion && (
<Card
style={{
backgroundColor: 'rgba(185, 190, 185, 0.3)',
}}
radius="md"
>
<EditCard
question={newQuestionObject}
setQuestion={setNewQuestionObject}
cancel={() => setShowNewQuestion(false)}
save={saveNewQuestion}
/>
</Card>
)}
</Container>
)}
</Stack>
);
Expand Down

0 comments on commit 213c805

Please sign in to comment.