Skip to content

Commit b45ebdf

Browse files
malinnsnieskeMailn Nifeli Snieske
malinnsnieske
and
Mailn Nifeli Snieske
authored
endre detaljsiden etter skissene (#733)
Co-authored-by: Mailn Nifeli Snieske <[email protected]>
1 parent d46d3b2 commit b45ebdf

16 files changed

+277
-303
lines changed

‎frontend/beCompliant/src/components/answers/CheckboxAnswer.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,14 @@ export function CheckboxAnswer({
4343
: choices[1]
4444
: ''}
4545
</Checkbox>
46-
<LastUpdated
47-
updated={updated}
48-
answerExpiry={answerExpiry}
49-
submitAnswer={submitAnswer}
50-
value={value}
51-
isActivityPageView={isActivityPageView}
52-
/>
46+
{isActivityPageView && (
47+
<LastUpdated
48+
updated={updated}
49+
answerExpiry={answerExpiry}
50+
submitAnswer={submitAnswer}
51+
value={value}
52+
/>
53+
)}
5354
</Stack>
5455
);
5556
}

‎frontend/beCompliant/src/components/answers/PercentAnswer.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,14 @@ export function PercentAnswer({
5454
/>
5555
</InputGroup>
5656
</Stack>
57-
<LastUpdated
58-
updated={updated}
59-
answerExpiry={answerExpiry}
60-
submitAnswer={submitAnswer}
61-
value={value}
62-
isActivityPageView={isActivityPageView}
63-
/>
57+
{isActivityPageView && (
58+
<LastUpdated
59+
updated={updated}
60+
answerExpiry={answerExpiry}
61+
submitAnswer={submitAnswer}
62+
value={value}
63+
/>
64+
)}
6465
</Stack>
6566
);
6667
}

‎frontend/beCompliant/src/components/answers/SingleSelectAnswer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ export function SingleSelectAnswer({
7777
submitAnswer={submitAnswer}
7878
value={value}
7979
answerExpiry={answerExpiry}
80-
isActivityPageView
8180
/>
8281
</Stack>
8382
);

‎frontend/beCompliant/src/components/answers/TextAnswer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ export function TextAnswer({
5252
answerExpiry={answerExpiry}
5353
submitAnswer={submitAnswer}
5454
value={value}
55-
isActivityPageView
5655
/>
5756
</Stack>
5857
);

‎frontend/beCompliant/src/components/answers/TimeAnswer.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -98,14 +98,15 @@ export function TimeAnswer({
9898
disabled={disabled}
9999
></Input>
100100
</InputGroup>
101-
<LastUpdated
102-
updated={updated}
103-
answerExpiry={answerExpiry}
104-
submitAnswer={submitAnswer}
105-
value={value}
106-
unitAnswer={unit}
107-
isActivityPageView={isActivityPageView}
108-
/>
101+
{isActivityPageView && (
102+
<LastUpdated
103+
updated={updated}
104+
answerExpiry={answerExpiry}
105+
submitAnswer={submitAnswer}
106+
value={value}
107+
unitAnswer={unit}
108+
/>
109+
)}
109110
</Stack>
110111
);
111112
}

‎frontend/beCompliant/src/components/questionPage/QuestionAnswer.tsx

Lines changed: 85 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Answer, AnswerType, Question, User } from '../../api/types';
33
import { PercentAnswer } from '../answers/PercentAnswer';
44
import { RadioAnswer } from './RadioAnswer';
55
import { TextAreaAnswer } from './TextAreaAnswer';
6-
import { Flex, Text } from '@kvib/react';
6+
import { Flex, Text, Button } from '@kvib/react';
77
import { TimeAnswer } from '../answers/TimeAnswer';
88
import { CheckboxAnswer } from '../answers/CheckboxAnswer';
99
import { useSubmitAnswers } from '../../hooks/useAnswers';
@@ -48,75 +48,89 @@ export function QuestionAnswer({
4848
});
4949
};
5050

51-
switch (question.metadata.answerMetadata.type) {
52-
case AnswerType.SELECT_SINGLE:
53-
return (
54-
<RadioAnswer
55-
question={question}
56-
latestAnswer={answers.at(-1)?.answer ?? ''}
57-
contextId={contextId}
58-
user={user}
59-
lastUpdated={answers.at(-1)?.updated}
60-
answerExpiry={answerExpiry}
61-
/>
62-
);
63-
case AnswerType.TEXT_MULTI_LINE:
64-
return (
65-
<TextAreaAnswer
66-
question={question}
67-
latestAnswer={answers.at(-1)?.answer ?? ''}
68-
contextId={contextId}
69-
user={user}
70-
lastUpdated={answers.at(-1)?.updated}
71-
answerExpiry={answerExpiry}
72-
/>
73-
);
74-
case AnswerType.PERCENT:
75-
return (
76-
<Flex flexDirection="column" gap="2" width="50%">
77-
<Text fontSize="lg" fontWeight="bold">
78-
Svar
79-
</Text>
80-
<PercentAnswer
81-
value={answerInput}
82-
updated={answers.at(-1)?.updated}
83-
setAnswerInput={setAnswerInput}
84-
submitAnswer={submitAnswer}
85-
answerExpiry={answerExpiry}
86-
/>
87-
</Flex>
88-
);
89-
case AnswerType.TIME:
90-
return (
91-
<Flex flexDirection="column" gap="2" width="50%">
92-
<Text fontSize="lg" fontWeight="bold">
93-
Svar
94-
</Text>
95-
<TimeAnswer
96-
value={answerInput}
97-
updated={answers.at(-1)?.updated}
98-
setAnswerInput={setAnswerInput}
99-
submitAnswer={submitAnswer}
100-
setAnswerUnit={setAnswerUnit}
101-
unit={answerUnit}
102-
units={question.metadata.answerMetadata.units}
103-
answerExpiry={answerExpiry}
104-
/>
105-
</Flex>
106-
);
107-
case AnswerType.CHECKBOX:
108-
return (
109-
<CheckboxAnswer
110-
value={answerInput}
111-
updated={answers.at(-1)?.updated}
112-
setAnswerInput={setAnswerInput}
113-
submitAnswer={submitAnswer}
114-
choices={choices}
115-
answerExpiry={answerExpiry}
116-
/>
117-
);
51+
return (
52+
<Flex flexDirection="column" gap="2">
53+
<Text fontSize="lg" fontWeight="bold">
54+
Svar
55+
</Text>
56+
{(() => {
57+
switch (question.metadata.answerMetadata.type) {
58+
case AnswerType.SELECT_SINGLE:
59+
return (
60+
<RadioAnswer
61+
question={question}
62+
latestAnswer={answers.at(-1)?.answer ?? ''}
63+
contextId={contextId}
64+
user={user}
65+
/>
66+
);
67+
case AnswerType.TEXT_MULTI_LINE:
68+
return (
69+
<TextAreaAnswer
70+
question={question}
71+
latestAnswer={answers.at(-1)?.answer ?? ''}
72+
contextId={contextId}
73+
user={user}
74+
/>
75+
);
76+
case AnswerType.PERCENT:
77+
return (
78+
<PercentAnswer
79+
value={answerInput}
80+
updated={answers.at(-1)?.updated}
81+
setAnswerInput={setAnswerInput}
82+
submitAnswer={submitAnswer}
83+
answerExpiry={answerExpiry}
84+
/>
85+
);
86+
case AnswerType.TIME:
87+
return (
88+
<TimeAnswer
89+
value={answerInput}
90+
updated={answers.at(-1)?.updated}
91+
setAnswerInput={setAnswerInput}
92+
submitAnswer={submitAnswer}
93+
setAnswerUnit={setAnswerUnit}
94+
unit={answerUnit}
95+
units={question.metadata.answerMetadata.units}
96+
answerExpiry={answerExpiry}
97+
/>
98+
);
99+
case AnswerType.CHECKBOX:
100+
return (
101+
<CheckboxAnswer
102+
value={answerInput}
103+
updated={answers.at(-1)?.updated}
104+
setAnswerInput={setAnswerInput}
105+
submitAnswer={submitAnswer}
106+
choices={choices}
107+
answerExpiry={answerExpiry}
108+
/>
109+
);
118110

119-
default:
120-
return <Text>Denne svartypen blir ikke støttet</Text>;
121-
}
111+
default:
112+
return <Text>Denne svartypen blir ikke støttet</Text>;
113+
}
114+
})()}
115+
{answers.length > 0 && (
116+
<Button
117+
aria-label="Forny svaret"
118+
rightIcon="autorenew"
119+
color="black"
120+
variant={'tertiary'}
121+
size="xs"
122+
alignSelf="start"
123+
p="0"
124+
onClick={() => {
125+
submitAnswer(
126+
answers.at(-1)?.answer ?? '',
127+
answers.at(-1)?.answerUnit
128+
);
129+
}}
130+
>
131+
Forny svar
132+
</Button>
133+
)}
134+
</Flex>
135+
);
122136
}

‎frontend/beCompliant/src/components/questionPage/QuestionComment.tsx

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
useDisclosure,
66
Button,
77
FlexProps,
8-
Separator,
98
} from '@kvib/react';
109
import { KeyboardEvent, useEffect, useRef, useState } from 'react';
1110
import { DeleteCommentModal } from '../table/DeleteCommentModal';
@@ -80,12 +79,11 @@ export function QuestionComment({
8079

8180
return (
8281
<Flex flexDirection="column" {...rest}>
83-
<Separator marginBottom="2" borderWidth="1px" borderColor="gray.300" />
84-
<Text fontWeight="bold" fontSize="lg">
82+
<Text fontWeight="bold" fontSize="lg" pb="4">
8583
Kommentar
8684
</Text>
87-
{isEditing && (
88-
<Flex gap="6" flexDirection="column">
85+
{isEditing ? (
86+
<Flex gap="4" flexDirection="column">
8987
<Textarea
9088
ref={textAreaRef}
9189
defaultValue={editedComment ?? latestComment}
@@ -96,12 +94,13 @@ export function QuestionComment({
9694
handleKeyDown(ev);
9795
}}
9896
/>
99-
<Flex justifyContent="right" gap="4">
97+
<Flex gap="6">
10098
<Button
10199
aria-label="Lagre kommentar"
102100
colorPalette="blue"
103101
leftIcon="check"
104102
variant="secondary"
103+
size="sm"
105104
onClick={handleCommentSubmit}
106105
loading={isLoading}
107106
disabled={editedComment === latestComment}
@@ -113,16 +112,28 @@ export function QuestionComment({
113112
colorPalette="red"
114113
leftIcon="close"
115114
variant="secondary"
115+
size="sm"
116116
onClick={handleDiscardChanges}
117117
>
118118
Avbryt
119119
</Button>
120120
</Flex>
121121
</Flex>
122-
)}
123-
{!isEditing && (
122+
) : latestComment === '' ? (
123+
<Button
124+
aria-label="Legg til kommentar"
125+
size="sm"
126+
variant="secondary"
127+
colorPalette="blue"
128+
leftIcon="add"
129+
onClick={() => setIsEditing(true)}
130+
w="fit-content"
131+
>
132+
Ny kommentar
133+
</Button>
134+
) : (
124135
<>
125-
<Flex gap="2" flexDirection="column">
136+
<Flex gap="4" flexDirection="column">
126137
<Text
127138
maxWidth="328px"
128139
overflow="hidden"
@@ -131,12 +142,13 @@ export function QuestionComment({
131142
>
132143
{latestComment}
133144
</Text>
134-
<Flex justifyContent="right">
145+
<Flex gap="6">
135146
<Button
136147
aria-label="Rediger kommentar"
137148
colorPalette="blue"
138149
leftIcon="edit"
139-
variant="tertiary"
150+
variant="secondary"
151+
size="sm"
140152
onClick={() => {
141153
setEditedComment(latestComment);
142154
setIsEditing(true);
@@ -148,7 +160,8 @@ export function QuestionComment({
148160
aria-label="Slett kommentar"
149161
colorPalette="red"
150162
leftIcon="delete"
151-
variant="tertiary"
163+
variant="secondary"
164+
size="sm"
152165
onClick={onDeleteOpen}
153166
>
154167
Slett
@@ -164,7 +177,6 @@ export function QuestionComment({
164177
/>
165178
</>
166179
)}
167-
<Separator marginTop="6" borderWidth="1px" borderColor="gray.300" />
168180
</Flex>
169181
);
170182
}

0 commit comments

Comments
 (0)