Merge pull request #600 from hpi-studyu/feat/improve-task-view

feat(app): directly show task description in task screen
hpi-studyu · Apr 17, 2024 · 984b58b · 984b58b
2 parents a99ad4b + 6509e85
commit 984b58b
Show file tree

Hide file tree

Showing 8 changed files with 5,454 additions and 5,470 deletions.
diff --git a/app/lib/screens/study/tasks/observation/questionnaire_task_widget.dart b/app/lib/screens/study/tasks/observation/questionnaire_task_widget.dart
@@ -40,51 +40,49 @@ class _QuestionnaireTaskWidgetState extends State<QuestionnaireTaskWidget> {
 
   @override
   Widget build(BuildContext context) {
-    final questionnaireWidget = QuestionnaireWidget(
-      widget.task.questions.questions,
-      header: widget.task.header,
-      footer: widget.task.footer,
-      onChange: _responseValidator,
-      onComplete: (qs) => setState(() {
-        response = qs;
-      }),
-    );
-    return Expanded(
-      child: Column(
-        children: [
-          Expanded(
-            child: Form(
-              key: formKey,
-              child: questionnaireWidget,
+    return Column(
+      children: [
+        Expanded(
+          child: Form(
+            key: formKey,
+            child: QuestionnaireWidget(
+              widget.task.questions.questions,
+              header: widget.task.header,
+              footer: widget.task.footer,
+              onChange: _responseValidator,
+              onComplete: (qs) => setState(() {
+                response = qs;
+              }),
             ),
           ),
-          if (response != null && responseValidator)
-            ElevatedButton.icon(
-              style: ButtonStyle(backgroundColor: MaterialStateProperty.all<Color>(Colors.green)),
-              onPressed: () async {
-                if (isRedundantClick(loginClickTime)) {
-                  return;
-                }
-                if (!formKey.currentState!.validate()) {
-                  return;
-                }
-                setState(() {
-                  _isLoading = true;
-                });
-                switch (response) {
-                  case QuestionnaireState questionnaireState:
-                    await _addQuestionnaireResult<QuestionnaireState>(questionnaireState, context);
-                    break;
-                }
-                setState(() {
-                  _isLoading = false;
-                });
-              },
-              icon: _isLoading ? const CircularProgressIndicator(color: Colors.white) : const Icon(Icons.check),
-              label: Text(AppLocalizations.of(context)!.complete),
-            ),
-        ],
-      ),
+        ),
+        response != null && responseValidator
+            ? ElevatedButton.icon(
+                style: ButtonStyle(backgroundColor: MaterialStateProperty.all<Color>(Colors.green)),
+                onPressed: () async {
+                  if (isRedundantClick(loginClickTime)) {
+                    return;
+                  }
+                  if (!formKey.currentState!.validate()) {
+                    return;
+                  }
+                  setState(() {
+                    _isLoading = true;
+                  });
+                  switch (response) {
+                    case QuestionnaireState questionnaireState:
+                      await _addQuestionnaireResult<QuestionnaireState>(questionnaireState, context);
+                      break;
+                  }
+                  setState(() {
+                    _isLoading = false;
+                  });
+                },
+                icon: _isLoading ? const CircularProgressIndicator(color: Colors.white) : const Icon(Icons.check),
+                label: Text(AppLocalizations.of(context)!.complete),
+              )
+            : const SizedBox.shrink(),
+      ],
     );
   }
 

diff --git a/app/lib/screens/study/tasks/task_screen.dart b/app/lib/screens/study/tasks/task_screen.dart
@@ -37,10 +37,22 @@ class _TaskScreenState extends State<TaskScreen> {
   Widget _buildTask() {
     switch (taskInstance.task) {
       case CheckmarkTask checkmarkTask:
-        return CheckmarkTaskWidget(
-          task: checkmarkTask,
-          key: UniqueKey(),
-          completionPeriod: taskInstance.completionPeriod,
+        return SingleChildScrollView(
+          child: SizedBox(
+            width: MediaQuery.of(context).size.width,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                HtmlText(taskInstance.task.header, centered: true),
+                const SizedBox(height: 20),
+                CheckmarkTaskWidget(
+                  task: checkmarkTask,
+                  key: UniqueKey(),
+                  completionPeriod: taskInstance.completionPeriod,
+                )
+              ],
+            ),
+          ),
         );
       case QuestionnaireTask questionnaireTask:
         return QuestionnaireTaskWidget(
@@ -55,47 +67,11 @@ class _TaskScreenState extends State<TaskScreen> {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
     return Scaffold(
-      appBar: AppBar(
-        title: Text(taskInstance.task.title ?? ''),
-      ),
+      appBar: AppBar(title: Text(taskInstance.task.title ?? '')),
       body: Padding(
         padding: const EdgeInsets.all(16),
-        child: Center(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Row(mainAxisAlignment: MainAxisAlignment.center, children: [
-                Flexible(
-                  child: Text(
-                    taskInstance.task.title ?? '',
-                    style: theme.textTheme.headlineMedium!.copyWith(fontSize: 24),
-                    overflow: TextOverflow.ellipsis,
-                    maxLines: 3,
-                  ),
-                ),
-                IconButton(
-                  icon: const Icon(Icons.info_outline, color: Colors.grey),
-                  onPressed: () => showDialog(
-                    context: context,
-                    builder: (context) {
-                      return AlertDialog(
-                        title: ListTile(
-                          dense: true,
-                          title: Text(taskInstance.task.title!, style: theme.textTheme.titleLarge),
-                        ),
-                        content: HtmlText(taskInstance.task.header),
-                      );
-                    },
-                  ),
-                ),
-              ]),
-              const SizedBox(height: 20),
-              _buildTask(),
-            ],
-          ),
-        ),
+        child: _buildTask(),
       ),
     );
   }

diff --git a/app/lib/widgets/html_text.dart b/app/lib/widgets/html_text.dart
@@ -5,27 +5,30 @@ class HtmlText extends StatelessWidget {
   const HtmlText(
     this.text, {
     this.style,
+    this.centered = false,
     super.key,
   });
 
   final String? text;
   final TextStyle? style;
+  final bool centered;
 
   @override
   Widget build(BuildContext context) {
+    Widget htmlWidget = HtmlWidget(
+      text ?? '',
+      textStyle: style,
+      // these callbacks are called when a complicated element is loading
+      // or failed to render allowing the app to render progress indicator
+      // and fallback widget
+      onErrorBuilder: (context, element, error) => Text('$element Error: $error'),
+      onLoadingBuilder: (context, element, loadingProgress) => const CircularProgressIndicator(),
+    );
+
     return SingleChildScrollView(
       child: SizedBox(
         width: double.maxFinite,
-        child: HtmlWidget(
-          text ?? '',
-          textStyle: style,
-
-          // these callbacks are called when a complicated element is loading
-          // or failed to render allowing the app to render progress indicator
-          // and fallback widget
-          onErrorBuilder: (context, element, error) => Text('$element Error: $error'),
-          onLoadingBuilder: (context, element, loadingProgress) => const CircularProgressIndicator(),
-        ),
+        child: centered ? Center(child: htmlWidget) : htmlWidget,
       ),
     );
   }