Merge pull request #8476 from andrej-scinote/aj_SCI_11856

Add new fields to experiments new/edit modal [SCI-11856]

app/javascript/vue/experiments/list.vue

@@ -46,12 +46,12 @@
     :experiment="moveModalObject"
     @close="moveModalObject = null"
     @move="updateTable"/>
-  <EditModal
+  <ExperimentFormModal
     v-if="editModalObject"
     :experiment="editModalObject"
     @close="editModalObject = null"
     @update="updateTable"/>
-  <NewModal
+  <ExperimentFormModal
     v-if="newModalOpen"
     :createUrl="createUrl"
     @close="newModalOpen = false"
@@ -72,8 +72,7 @@ import NameRenderer from './renderers/name.vue';
 import DescriptionModal from '../shared/datatable/modals/description.vue';
 import DuplicateModal from './modals/duplicate.vue';
 import MoveModal from './modals/move.vue';
-import EditModal from './modals/edit.vue';
-import NewModal from './modals/new.vue';
+import ExperimentFormModal from './modals/form.vue';
 import AccessModal from '../shared/access_modal/modal.vue';
 import StatusRenderer from './renderers/status.vue';
 import DueDateRenderer from '../shared/datatable/renderers/date.vue';
@@ -88,8 +87,7 @@ export default {
     DescriptionModal,
     DuplicateModal,
     MoveModal,
-    EditModal,
-    NewModal,
+    ExperimentFormModal,
     AccessModal,
     ExperimentCard,
     StatusRenderer,

app/javascript/vue/experiments/modals/edit.vue

@@ -1,94 +0,0 @@
-<template>
-  <div ref="modal" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-      <form @submit.prevent="submit">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <i class="sn-icon sn-icon-close"></i>
-            </button>
-            <h4 class="modal-title truncate !block" :title="experiment.name">
-              {{ i18n.t('experiments.edit.modal_title', { experiment: experiment.name }) }}
-            </h4>
-          </div>
-          <div class="modal-body">
-            <label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
-            <div  class="sci-input-container-v2 mb-4">
-              <input type="text" class="sci-input-field"
-                     v-model="name"
-                     autofocus
-                     ref="input"
-                    :placeholder="i18n.t('experiments.new.name_placeholder')">
-            </div>
-            <label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
-            <div class="sci-input-container-v2 h-40">
-              <textarea class="sci-input-field"
-                        ref="description"
-                        v-model="description">
-              </textarea>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button type="submit" :disabled="submitting || !validName" class="btn btn-primary">
-              {{ i18n.t('experiments.edit.modal_create') }}
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script>
-/* global HelperModule SmartAnnotation */
-
-import axios from '../../../packs/custom_axios.js';
-import modalMixin from '../../shared/modal_mixin';
-
-export default {
-  name: 'EditModal',
-  props: {
-    experiment: Object,
-  },
-  data() {
-    return {
-      name: this.experiment.name,
-      description: this.experiment.description,
-      submitting: false
-    };
-  },
-  computed: {
-    validName() {
-      return this.name.length > 0;
-    },
-  },
-  mounted() {
-    SmartAnnotation.init($(this.$refs.description), false);
-    $(this.$refs.modal).on('hidden.bs.modal', this.handleAtWhoModalClose);
-  },
-  mixins: [modalMixin],
-  methods: {
-    submit() {
-      this.submitting = true;
-
-      axios.patch(this.experiment.urls.update, {
-        experiment: {
-          name: this.name,
-          description: this.$refs.description.value,
-        },
-      }).then((response) => {
-        this.$emit('update');
-        this.submitting = false;
-        HelperModule.flashAlertMsg(response.data.message, 'success');
-      }).catch((error) => {
-        this.submitting = false;
-        HelperModule.flashAlertMsg(error.response.data.message, 'danger');
-      });
-    },
-    handleAtWhoModalClose() {
-      $('.atwho-view.old').css('display', 'none');
-    }
-  },
-};
-</script>

app/javascript/vue/experiments/modals/form.vue

@@ -0,0 +1,184 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" :title="experiment?.name">
+              {{ modalHeader }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
+            <div class="sci-input-container-v2 mb-6" :class="{'error': error}" :data-error="error">
+              <input type="text" class="sci-input-field"
+                     v-model="name"
+                     autofocus ref="input"
+                    :placeholder="i18n.t('experiments.new.name_placeholder')">
+            </div>
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("experiments.index.start_date") }}</label>
+              <DateTimePicker
+                @change="updateStartDate"
+                :defaultValue="startDate"
+                mode="date"
+                :clearable="true"
+                :placeholder="i18n.t('experiments.index.add_start_date')"
+              />
+            </div>
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("experiments.index.due_date") }}</label>
+              <DateTimePicker
+                @change="updateDueDate"
+                :defaultValue="dueDate"
+                mode="date"
+                :clearable="true"
+                :placeholder="i18n.t('experiments.index.add_due_date')"
+              />
+            </div>
+            <div class="mb-6">
+              <TinymceEditor
+                v-model="description"
+                textareaId="descriptionModelInput"
+                :placeholder="i18n.t('experiments.index.add_description')"
+              ></TinymceEditor>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button type="submit" :disabled="submitting || !validName" class="btn btn-primary">
+              {{ submitButtonLabel }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+/* global HelperModule SmartAnnotation */
+
+import axios from '../../../packs/custom_axios.js';
+import modalMixin from '../../shared/modal_mixin.js';
+import DateTimePicker from '../../shared/date_time_picker.vue';
+import TinymceEditor from '../../shared/tinymce_editor.vue';
+
+export default {
+  name: 'NewEditModal',
+  props: {
+    experiment: Object,
+    createUrl: String
+  },
+  components: {
+    DateTimePicker,
+    TinymceEditor
+  },
+  data() {
+    return {
+      name: this.experiment?.name || '',
+      description: this.experiment?.description || '',
+      error: null,
+      submitting: false,
+      startDate: null,
+      dueDate: null
+    };
+  },
+  computed: {
+    validName() {
+      return this.name.length > 0;
+    },
+    modalHeader() {
+      if (this.createUrl) {
+        return this.i18n.t('experiments.new.modal_title');
+      }
+
+      return this.i18n.t('experiments.edit.modal_title', { experiment: this.experiment.name });
+    },
+    submitButtonLabel() {
+      if (this.createUrl) {
+        return this.i18n.t('experiments.new.modal_create');
+      }
+
+      return this.i18n.t('experiments.edit.modal_create');
+    }
+  },
+  mounted() {
+    SmartAnnotation.init($(this.$refs.description), false);
+    $(this.$refs.modal).on('hidden.bs.modal', this.handleAtWhoModalClose);
+  },
+  created() {
+    if (this.experiment?.start_date_cell?.value) {
+      this.startDate = new Date(this.experiment.start_date_cell?.value);
+    }
+    if (this.experiment?.due_date_cell?.value) {
+      this.dueDate = new Date(this.experiment.due_date_cell?.value);
+    }
+  },
+  mixins: [modalMixin],
+  methods: {
+    submit() {
+      this.submitting = true;
+
+      const experimentData = {
+        name: this.name,
+        description: this.description,
+        start_on: this.startDate,
+        due_date: this.dueDate
+      };
+      if (this.createUrl) {
+        this.createExperiment(experimentData);
+      } else {
+        this.updateExperiment(experimentData);
+      }
+    },
+    createExperiment(experimentData) {
+      axios.post(this.createUrl, {
+        experiment: experimentData
+      }).then((response) => {
+        this.$emit('create');
+        window.location.replace(response.data.path);
+      }).catch((error) => {
+        this.submitting = false;
+        [this.error] = error.response.data.name;
+      });
+    },
+    updateExperiment(experimentData) {
+      axios.patch(this.experiment.urls.update, {
+        experiment: experimentData
+      }).then((response) => {
+        this.$emit('update');
+        this.submitting = false;
+        HelperModule.flashAlertMsg(response.data.message, 'success');
+      }).catch((error) => {
+        this.submitting = false;
+        HelperModule.flashAlertMsg(error.response.data.message, 'danger');
+      });
+    },
+    updateStartDate(startDate) {
+      this.startDate = this.stripTime(startDate);
+    },
+    updateDueDate(dueDate) {
+      this.dueDate = this.stripTime(dueDate);
+    },
+    stripTime(date) {
+      if (date) {
+        return new Date(Date.UTC(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate(),
+          0, 0, 0, 0
+        ));
+      }
+
+      return date;
+    },
+    handleAtWhoModalClose() {
+      $('.atwho-view.old').css('display', 'none');
+    }
+  }
+};
+</script>

app/javascript/vue/experiments/modals/new.vue

@@ -1,89 +0,0 @@
-<template>
-  <div ref="modal" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-      <form @submit.prevent="submit">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <i class="sn-icon sn-icon-close"></i>
-            </button>
-            <h4 class="modal-title truncate !block">
-              {{ i18n.t('experiments.new.modal_title') }}
-            </h4>
-          </div>
-          <div class="modal-body">
-            <label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
-            <div class="sci-input-container-v2 mb-6" :class="{'error': error}" :data-error="error">
-              <input type="text" class="sci-input-field"
-                     v-model="name"
-                     autofocus ref="input"
-                    :placeholder="i18n.t('experiments.new.name_placeholder')">
-            </div>
-            <label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
-            <div class="sci-input-container-v2 h-40">
-              <textarea class="sci-input-field"
-                        ref="description"
-                        v-model="description">
-              </textarea>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button type="submit" :disabled="submitting || !validName" class="btn btn-primary">
-              {{ i18n.t('experiments.new.modal_create') }}
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script>
-/* global HelperModule SmartAnnotation */
-
-import axios from '../../../packs/custom_axios.js';
-import modalMixin from '../../shared/modal_mixin';
-
-export default {
-  name: 'NewModal',
-  props: {
-    createUrl: String,
-  },
-  data() {
-    return {
-      name: '',
-      description: '',
-      error: null,
-      submitting: false
-    };
-  },
-  computed: {
-    validName() {
-      return this.name.length > 0;
-    },
-  },
-  mounted() {
-    SmartAnnotation.init($(this.$refs.description), false);
-  },
-  mixins: [modalMixin],
-  methods: {
-    submit() {
-      this.submitting = true;
-
-      axios.post(this.createUrl, {
-        experiment: {
-          name: this.name,
-          description: this.$refs.description.value,
-        },
-      }).then((response) => {
-        this.$emit('create');
-        window.location.replace(response.data.path);
-      }).catch((error) => {
-        this.submitting = false;
-        this.error = error.response.data.name[0];
-      });
-    },
-  },
-};
-</script>

config/locales/en.yml

@@ -1742,6 +1742,11 @@ en:
       restore_option: "Restore"
       more_link: "More"
       experiment_access: "Access"
+      add_due_date: "Add due date"
+      add_start_date: "Add start date"
+      add_description: "Add description"
+      due_date: "Due date"
+      start_date: "Start date"
       details_modal:
         description: "%{name} description"
       filters: