Add start date to tasks table and change status representation [SCI-11801]

app/javascript/vue/my_modules/list.vue

@@ -25,6 +25,7 @@
     @restore="restore"
     @duplicate="duplicate"
     @updateDueDate="updateDueDate"
+    @updateStartDate="updateStartDate"
     @editTags="editTags"/>
 
   <TagsModal v-if="tagsModalObject"
@@ -62,6 +63,7 @@ import NameRenderer from './renderers/name.vue';
 import ResultsRenderer from './renderers/results.vue';
 import StatusRenderer from './renderers/status.vue';
 import DueDateRenderer from '../shared/datatable/renderers/date.vue';
+import StartDateRenderer from '../shared/datatable/renderers/date.vue';
 import DesignatedUsers from './renderers/designated_users.vue';
 import TagsModal from './modals/tags.vue';
 import TagsRenderer from './renderers/tags.vue';
@@ -130,6 +132,20 @@ export default {
         headerName: this.i18n.t('experiments.table.column.id_html'),
         sortable: true
       },
+      {
+        field: 'start_date',
+        headerName: this.i18n.t('experiments.table.column.start_date_html'),
+        sortable: true,
+        cellRenderer: StartDateRenderer,
+        cellRendererParams: {
+          placeholder: this.i18n.t('my_modules.details.no_start_date_placeholder'),
+          field: 'start_date_cell',
+          mode: 'datetime',
+          emptyPlaceholder: this.i18n.t('my_modules.details.no_due_date'),
+          emitAction: 'updateStartDate'
+        },
+        minWidth: 200
+      },
       {
         field: 'due_date',
         headerName: this.i18n.t('experiments.table.column.due_date_html'),
@@ -292,6 +308,15 @@ export default {
         this.updateTable();
       });
     },
+    updateStartDate(value, params) {
+      axios.put(params.data.urls.update_start_date, {
+        my_module: {
+          started_on: this.formatDate(value)
+        }
+      }).then(() => {
+        this.updateTable();
+      });
+    },
     formatDate(date) {
       if (!(date instanceof Date)) return null;
 

app/javascript/vue/my_modules/renderers/status.vue

@@ -1,11 +1,14 @@
 <template>
-  <span
+  <div class="flex items-center gap-2">
-    class="px-2 py-1 border border-solid rounded truncate"
+    <div
-    :class="{'text-sn-white' : !params.data.status.light_color}"
+      class="w-4 h-4 rounded-full"
-    :style="{'background-color': params.data.status.color}"
+      :class="{ 'bg-sn-grey-500': params.data.status.light_color }"
-  >
+      :style="!params.data.status.light_color && { backgroundColor: params.data.status.color }"
+    ></div>
+    <span class="truncate">
       {{ params.data.status.name }}
     </span>
+  </div>
 </template>
 
 <script>

app/serializers/lists/my_module_serializer.rb

@@ -23,6 +23,7 @@ module Lists
       comments
       due_date_formatted
       due_date_cell
+      start_date_cell
       permissions
       default_public_user_role_id
       team
@@ -71,6 +72,7 @@ module Lists
       urls_list[:update_access] = access_permissions_my_module_path(object) if can_manage_project_users?(object.experiment.project)
 
       urls_list[:update_due_date] = my_module_path(object, user, format: :json) if can_update_my_module_due_date?(object)
+      urls_list[:update_start_date] = my_module_path(object, user, format: :json) if can_update_my_module_start_date?(object)
 
       urls_list
     end
@@ -96,6 +98,14 @@ module Lists
       }
     end
 
+    def start_date_cell
+      {
+        value: start_date,
+        value_formatted: start_date_formatted,
+        editable: can_update_my_module_due_date?(object)
+      }
+    end
+
     def due_date_status
       if (archived || object.completed?) && object.due_date
         return :ok
@@ -175,5 +185,15 @@ module Lists
     def team
       object.team.name
     end
+
+    private
+
+    def start_date
+      I18n.l(object.started_on, format: :default) if object.started_on
+    end
+
+    def start_date_formatted
+      I18n.l(object.started_on, format: :full_date) if object.started_on
+    end
   end
 end

app/services/lists/my_modules_service.rb

@@ -40,6 +40,7 @@ module Lists
 
     def sortable_columns
       @sortable_columns ||= {
+        start_date: 'start_date',
         due_date: 'due_date',
         name: 'name',
         code: 'id',
@@ -60,6 +61,10 @@ module Lists
       sort = "#{sortable_columns[order_params[:column].to_sym]}_#{sort_direction(order_params)}"
 
       case sort
+      when 'start_date_ASC'
+        @records = @records.order(:started_on, :name)
+      when 'start_date_DESC'
+        @records = @records.order(started_on: :desc, name: :asc)
       when 'due_date_ASC'
         @records = @records.order(:due_date, :name)
       when 'due_date_DESC'

config/locales/en.yml

@@ -1783,6 +1783,7 @@ en:
         id_html: 'ID'
         task_name_html: 'Task name'
         due_date_html: 'Due date'
+        start_date_html: 'Start date'
         archived_html: 'Archived on'
         age_html: 'Age'
         results_html: 'Results'