* Adjust tip when the story is empty.

module/task/css/create.ui.css

@@ -1,15 +1 @@
-.flex-none {flex: none !important;}
-#taskCreateForm #pri {width: 5rem;}
-#taskCreateForm .empty-story-tip input {padding: 0;}
-#taskCreateForm .empty-story-tip .input-control-suffix {padding-right: 0;}
-#taskCreateForm .empty-story-tip .input-control-suffix .btn:hover:before {background: none;}
-#taskCreateForm .selectStoryLabel {top: 50%;}
-#testStoryBox th.required:before {content: '*'; color: rgba(var(--color-danger-500-rgb),var(--tw-text-opacity)); margin-right: 0.25rem; position: relative; top: 0.125rem;}
-
-#multipleBox {min-width: 100px}
-
-.assignedToBox {align-items: center !important}
-.assignedToBox .add-team {margin-bottom: 5px}
-.assignedToList {display: flex; align-items: center; flex-wrap: wrap;}
-.assignedToList .picker-multi-selection, .assignedToList .icon{margin-right: 5px; margin-bottom: 5px}
-.noCopyBox {width: 40px !important;}
+.empty-story-tip .input-control-prefix {z-index: 2;}

module/task/js/create.ui.js

@@ -190,13 +190,13 @@ window.loadExecutionStories = function()
         /* If there is no story option, select will be hidden and text will be displayed; otherwise, the opposite is true */
         if(stories.length)
         {
-            $('#story').closest('.form-group').removeClass('hidden');
-            $('.empty-story-tip').closest('.form-group').addClass('hidden');
+            $('.setStoryBox').removeClass('hidden');
+            $('.empty-story-tip').addClass('hidden');
         }
         else
         {
-            $('#story').closest('.form-group').addClass('hidden');
-            $('.empty-story-tip').closest('.form-group').removeClass('hidden');
+            $('.setStoryBox').addClass('hidden');
+            $('.empty-story-tip').removeClass('hidden');
         }
 
     });

module/task/ui/create.field.php

@@ -9,15 +9,76 @@ if(empty(data('features.story'))) $nameWidth .= ' full:w-full';
 if(data('execution.type') == 'kanban') $nameWidth .= ' lite:w-full';
 $fields->field('name')->className($nameWidth);
 
+$buildStoryBox = function($props)
+{
+    if(!empty(data('execution.hasProduct')))
+    {
+        $executionID      = data('execution.id');
+        $storyEmptyPreTip = span
+            (
+                setClass('input-control-prefix'),
+                span(data('lang.task.noticeLinkStory')),
+                a
+                (
+                    set::href(createLink('execution', 'linkStory', "executionID={$executionID}")),
+                    setClass('text-primary'),
+                    isInModal() ? setData('toggle', 'modal') : null,
+                    data('lang.execution.linkStory')
+                )
+            );
+    }
+    else
+    {
+        $storyEmptyPreTip = span
+            (
+                setClass('input-control-prefix'),
+                span(data('lang.task.noticeLinkStoryNoProduct'))
+            );
+    }
+
+    return div
+        (
+            inputGroup
+            (
+                setClass('setStoryBox'),
+                setClass(empty(data('stories')) ? 'hidden' : ''),
+                picker
+                (
+                    set::name('story'),
+                    set::value(data('task.story')),
+                    set::items(data('stories'))
+                ),
+                btn
+                (
+                    setID('preview'),
+                    setClass('hidden'),
+                    setData('toggle', 'modal'),
+                    setData('url', '#'),
+                    setData('size', 'lg'),
+                    icon('eye text-gray')
+                )
+            ),
+            inputGroup
+            (
+                setClass('empty-story-tip input-control has-prefix has-suffix'),
+                setClass(empty(data('stories')) ? '' : 'hidden'),
+                $storyEmptyPreTip,
+                input
+                (
+                    set::name(''),
+                    set('readonly'),
+                    set('onfocus', 'this.blur()')
+                ),
+            )
+        );
+};
+
 $fields->field('storyBox')
     ->label($lang->task->story)
     ->checkbox(array('text' => $lang->task->syncStory, 'name' => 'copyButton'))
     ->hidden(!data('features.story'))
     ->foldable(data('features.story'))
-    ->control('inputgroup')
-    ->items(false)
-    ->itemBegin('story')->control('picker')->items(data('stories'))->value(data('task.story'))->itemEnd()
-    ->itemBegin()->control('btn', array('id' => 'preview', 'data-toggle' => 'modal', 'data-url' => '#', 'data-size' => 'lg', 'className' => 'hidden'))->icon('eye text-gray')->itemEnd();
+    ->control($buildStoryBox);
 
 if(!isAjaxRequest('modal'))
 {

module/task/ui/create.html.php

@@ -21,6 +21,7 @@ formGridPanel
 (
     set::title($lang->task->create),
     set::fields($fields),
+    on::change('[name=module]', 'loadExecutionStories'),
     on::change('[name=story]', 'setStoryRelated'),
     on::click('[name=isShowAllModule]', 'showAllModule'),
     on::click('[name=copyButton]', 'copyStoryTitle'),