From ccadde02ea52f04d25d7ba4445e9d26cb81d8abb Mon Sep 17 00:00:00 2001
From: Andrej <andrej@scinote.net>
Date: Mon, 28 Apr 2025 16:28:47 +0200
Subject: [PATCH] Add new fields to projects new/edit modal [SCI-11855]

---
 app/controllers/projects_controller.rb       |   5 +-
 app/javascript/vue/projects/list.vue         |  10 +-
 app/javascript/vue/projects/modals/edit.vue  | 116 ----------
 app/javascript/vue/projects/modals/form.vue  | 222 +++++++++++++++++++
 app/javascript/vue/projects/modals/new.vue   | 126 -----------
 app/javascript/vue/shared/tinymce_editor.vue |   6 +-
 config/locales/en.yml                        |   1 +
 7 files changed, 236 insertions(+), 250 deletions(-)
 delete mode 100644 app/javascript/vue/projects/modals/edit.vue
 create mode 100644 app/javascript/vue/projects/modals/form.vue
 delete mode 100644 app/javascript/vue/projects/modals/new.vue

diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index ee2b1a1db..504fedb3a 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -309,7 +309,10 @@ class ProjectsController < ApplicationController
           .permit(
             :name, :visibility,
             :archived, :project_folder_id,
-            :default_public_user_role_id
+            :default_public_user_role_id,
+            :due_date,
+            :start_on,
+            :description
           )
   end
 
diff --git a/app/javascript/vue/projects/list.vue b/app/javascript/vue/projects/list.vue
index 70bfa8d95..c590600e4 100644
--- a/app/javascript/vue/projects/list.vue
+++ b/app/javascript/vue/projects/list.vue
@@ -54,11 +54,11 @@
     @update="updateDescription"
     @close="descriptionModalObject = null"/>
   <ExportLimitExceededModal v-if="exportLimitExceded" :description="exportDescription" @close="exportLimitExceded = false"/>
-  <EditProjectModal v-if="editProject" :userRolesUrl="userRolesUrl"
+  <ProjectFormModal v-if="editProject" :userRolesUrl="userRolesUrl"
                     :project="editProject" @close="editProject = null" @update="updateTable(); updateNavigator()" />
   <EditFolderModal v-if="editFolder" :folder="editFolder"
                    @close="editFolder = null" @update="updateTable(); updateNavigator()" />
-  <NewProjectModal v-if="newProject" :createUrl="createUrl"
+  <ProjectFormModal v-if="newProject" :createUrl="createUrl"
                    :currentFolderId="currentFolderId" :userRolesUrl="userRolesUrl"
                    @close="newProject = false" @create="updateTable(); updateNavigator()" />
   <NewFolderModal v-if="newFolder" :createFolderUrl="createFolderUrl"
@@ -87,9 +87,8 @@ import DescriptionRenderer from '../shared/datatable/renderers/description.vue';
 import DescriptionModal from '../shared/datatable/modals/description.vue';
 import ProjectCard from './card.vue';
 import ConfirmationModal from '../shared/confirmation_modal.vue';
-import EditProjectModal from './modals/edit.vue';
+import ProjectFormModal from './modals/form.vue';
 import EditFolderModal from './modals/edit_folder.vue';
-import NewProjectModal from './modals/new.vue';
 import NewFolderModal from './modals/new_folder.vue';
 import MoveModal from './modals/move.vue';
 import AccessModal from '../shared/access_modal/modal.vue';
@@ -103,9 +102,8 @@ export default {
     NameRenderer,
     ProjectCard,
     ConfirmationModal,
-    EditProjectModal,
+    ProjectFormModal,
     EditFolderModal,
-    NewProjectModal,
     NewFolderModal,
     MoveModal,
     AccessModal,
diff --git a/app/javascript/vue/projects/modals/edit.vue b/app/javascript/vue/projects/modals/edit.vue
deleted file mode 100644
index 2f8dd4450..000000000
--- a/app/javascript/vue/projects/modals/edit.vue
+++ /dev/null
@@ -1,116 +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" id="edit-project-modal-label" :title="project.name">
-              {{ i18n.t('projects.index.modal_edit_project.modal_title', {project: project.name}) }}
-            </h4>
-          </div>
-          <div class="modal-body">
-            <div class="mb-6">
-              <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
-              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-                <input type="text" v-model="name" class="sci-input-field"
-                       autofocus="true" ref="input"
-                       :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
-              </div>
-            </div>
-            <div class="flex gap-2 text-xs items-center">
-              <div class="sci-checkbox-container">
-                <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
-                <span class="sci-checkbox-label"></span>
-              </div>
-              <span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
-            </div>
-            <div class="mt-6" :class="{'hidden': !visible}">
-              <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
-              <SelectDropdown :options="userRoles" :value="defaultRole" @change="changeRole" />
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button class="btn btn-primary" type="submit" :disabled="visible && !defaultRole || submitting">
-              {{ i18n.t('projects.index.modal_edit_project.submit') }}
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script>
-
-import SelectDropdown from '../../shared/select_dropdown.vue';
-import axios from '../../../packs/custom_axios.js';
-import modalMixin from '../../shared/modal_mixin';
-
-export default {
-  name: 'EditProjectModal',
-  props: {
-    project: Object,
-    userRolesUrl: String,
-  },
-  mixins: [modalMixin],
-  components: {
-    SelectDropdown,
-  },
-  watch: {
-    visible(newValue) {
-      if (newValue) {
-        [this.defaultRole] = this.userRoles.find((role) => role[1] === 'Viewer');
-      } else {
-        this.defaultRole = null;
-      }
-    }
-  },
-  mounted() {
-    this.fetchUserRoles();
-  },
-  data() {
-    return {
-      name: this.project.name,
-      visible: !this.project.hidden,
-      defaultRole: this.project.default_public_user_role_id,
-      error: null,
-      userRoles: [],
-      submitting: false
-    };
-  },
-  methods: {
-    submit() {
-      this.submitting = true;
-      axios.put(this.project.urls.update, {
-        project: {
-          name: this.name,
-          visibility: (this.visible ? 'visible' : 'hidden'),
-          default_public_user_role_id: this.defaultRole,
-        },
-      }).then(() => {
-        this.error = null;
-        this.$emit('update');
-        this.submitting = false;
-      }).catch((error) => {
-        this.submitting = false;
-        this.error = error.response.data.errors.name;
-      });
-    },
-    changeRole(role) {
-      this.defaultRole = role;
-    },
-    fetchUserRoles() {
-      if (this.userRolesUrl) {
-        axios.get(this.userRolesUrl)
-          .then((response) => {
-            this.userRoles = response.data.data;
-          });
-      }
-    }
-  },
-};
-</script>
diff --git a/app/javascript/vue/projects/modals/form.vue b/app/javascript/vue/projects/modals/form.vue
new file mode 100644
index 000000000..fa56d59e1
--- /dev/null
+++ b/app/javascript/vue/projects/modals/form.vue
@@ -0,0 +1,222 @@
+<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" id="edit-project-modal-label" :title="project?.name">
+              {{ modalHeader }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
+              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
+                <input type="text" v-model="name" class="sci-input-field"
+                       autofocus="true" ref="input"
+                       :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
+              </div>
+            </div>
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("projects.index.start_date") }}</label>
+              <DateTimePicker
+                @change="updateStartDate"
+                :defaultValue="startDate"
+                mode="date"
+                :clearable="true"
+                :placeholder="i18n.t('projects.index.add_start_date')"
+              />
+            </div>
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("projects.index.due_date") }}</label>
+              <DateTimePicker
+                @change="updateDueDate"
+                :defaultValue="dueDate"
+                mode="date"
+                :clearable="true"
+                :placeholder="i18n.t('projects.index.add_due_date')"
+              />
+            </div>
+            <div class="mb-6">
+              <TinymceEditor
+                v-model="description"
+                textareaId="descriptionModelInput"
+                :placeholder="i18n.t('projects.index.add_description')"
+              ></TinymceEditor>
+            </div>
+            <div class="flex gap-2 text-xs items-center">
+              <div class="sci-checkbox-container">
+                <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
+                <span class="sci-checkbox-label"></span>
+              </div>
+              <span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
+            </div>
+            <div class="mt-6" :class="{'hidden': !visible}">
+              <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
+              <SelectDropdown :options="userRoles" :value="defaultRole" @change="changeRole" />
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit" :disabled="submitting || (visible && !defaultRole) || !validName">
+              {{ submitButtonLabel }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import SelectDropdown from '../../shared/select_dropdown.vue';
+import DateTimePicker from '../../shared/date_time_picker.vue';
+import TinymceEditor from '../../shared/tinymce_editor.vue';
+import axios from '../../../packs/custom_axios.js';
+import modalMixin from '../../shared/modal_mixin';
+
+export default {
+  name: 'ProjectFormModal',
+  props: {
+    project: Object,
+    userRolesUrl: String,
+    currentFolderId: String,
+    createUrl: String
+  },
+  mixins: [modalMixin],
+  components: {
+    SelectDropdown,
+    DateTimePicker,
+    TinymceEditor
+  },
+  watch: {
+    visible(newValue) {
+      if (newValue) {
+        [this.defaultRole] = this.userRoles.find((role) => role[1] === 'Viewer');
+      } else {
+        this.defaultRole = null;
+      }
+    }
+  },
+  computed: {
+    validName() {
+      return this.name.length >= GLOBAL_CONSTANTS.NAME_MIN_LENGTH;
+    },
+    modalHeader() {
+      if (this.createUrl) {
+        return this.i18n.t('projects.index.modal_new_project.modal_title');
+      }
+
+      return this.i18n.t('projects.index.modal_edit_project.modal_title', { project: this.project?.name });
+    },
+    submitButtonLabel() {
+      if (this.createUrl) {
+        return this.i18n.t('projects.index.modal_new_project.create');
+      }
+
+      return this.i18n.t('projects.index.modal_edit_project.submit');
+    }
+  },
+  mounted() {
+    this.fetchUserRoles();
+  },
+  data() {
+    return {
+      name: this.project?.name || '',
+      visible: this.project ? !this.project.hidden : false,
+      defaultRole: this.project?.default_public_user_role_id,
+      error: null,
+      userRoles: [],
+      submitting: false,
+      startDate: null,
+      dueDate: null,
+      description: this.project?.description || ''
+    };
+  },
+  created() {
+    if (this.project?.start_on_cell?.value) {
+      this.startDate = new Date(this.project.start_on_cell?.value);
+    }
+
+    if (this.project?.due_date_cell?.value) {
+      this.dueDate = new Date(this.project.due_date_cell?.value);
+    }
+  },
+  methods: {
+    async submit() {
+      this.submitting = true;
+
+      const projectData = {
+        name: this.name,
+        start_on: this.startDate,
+        due_date: this.dueDate,
+        description: this.description,
+        visibility: (this.visible ? 'visible' : 'hidden'),
+        default_public_user_role_id: this.defaultRole
+      };
+
+      if (this.createUrl) {
+        projectData.project_folder_id = this.currentFolderId;
+        this.createProject(projectData);
+      } else {
+        this.updateProject(projectData);
+      }
+    },
+    async createProject(projectData) {
+      await axios.post(this.createUrl, {
+        project: projectData
+      }).then(() => {
+        this.error = null;
+        this.$emit('create');
+      }).catch((error) => {
+        this.error = error.response.data.name;
+      });
+      this.submitting = false;
+    },
+    async updateProject(projectData) {
+      await axios.put(this.project.urls.update, {
+        project: projectData
+      }).then(() => {
+        this.error = null;
+        this.$emit('update');
+      }).catch((error) => {
+        this.error = error.response.data.errors.name;
+      });
+      this.submitting = false;
+    },
+    changeRole(role) {
+      this.defaultRole = role;
+    },
+    updateStartDate(startDate) {
+      this.startDate = this.stripTime(startDate);
+    },
+    updateDueDate(dueDate) {
+      this.dueDate = this.stripTime(dueDate);
+    },
+    fetchUserRoles() {
+      if (this.userRolesUrl) {
+        axios.get(this.userRolesUrl)
+          .then((response) => {
+            this.userRoles = response.data.data;
+          });
+      }
+    },
+    stripTime(date) {
+      if (date) {
+        return new Date(Date.UTC(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate(),
+          0, 0, 0, 0
+        ));
+      }
+
+      return date;
+    }
+  }
+};
+</script>
diff --git a/app/javascript/vue/projects/modals/new.vue b/app/javascript/vue/projects/modals/new.vue
deleted file mode 100644
index 6d8223d71..000000000
--- a/app/javascript/vue/projects/modals/new.vue
+++ /dev/null
@@ -1,126 +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" id="edit-project-modal-label">
-              {{ i18n.t('projects.index.modal_new_project.modal_title') }}
-            </h4>
-          </div>
-          <div class="modal-body">
-            <div class="mb-6">
-              <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
-              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-                <input type="text" v-model="name"
-                       class="sci-input-field"
-                       ref="input"
-                       autofocus="true"
-                       :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
-              </div>
-            </div>
-            <div class="flex gap-2 text-xs items-center">
-              <div class="sci-checkbox-container">
-                <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
-                <span class="sci-checkbox-label"></span>
-              </div>
-              <span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
-            </div>
-            <div class="mt-6" :class="{'hidden': !visible}">
-              <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
-              <SelectDropdown :options="userRoles" :value="defaultRole" @change="changeRole" />
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button class="btn btn-primary" type="submit" :disabled="submitting || (visible && !defaultRole) || !validName">
-              {{ i18n.t('projects.index.modal_new_project.create') }}
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script>
-/* global GLOBAL_CONSTANTS */
-
-import SelectDropdown from '../../shared/select_dropdown.vue';
-import axios from '../../../packs/custom_axios.js';
-import modalMixin from '../../shared/modal_mixin';
-
-export default {
-  name: 'NewProjectModal',
-  props: {
-    createUrl: String,
-    userRolesUrl: String,
-    currentFolderId: String,
-  },
-  mixins: [modalMixin],
-  components: {
-    SelectDropdown,
-  },
-  watch: {
-    visible(newValue) {
-      if (newValue) {
-        [this.defaultRole] = this.userRoles.find((role) => role[1] === 'Viewer');
-      } else {
-        this.defaultRole = null;
-      }
-    }
-  },
-  computed: {
-    validName() {
-      return this.name.length >= GLOBAL_CONSTANTS.NAME_MIN_LENGTH;
-    }
-  },
-  mounted() {
-    this.fetchUserRoles();
-  },
-  data() {
-    return {
-      name: '',
-      visible: false,
-      defaultRole: null,
-      error: null,
-      submitting: false,
-      userRoles: []
-    };
-  },
-  methods: {
-    async submit() {
-      this.submitting = true;
-
-      await axios.post(this.createUrl, {
-        project: {
-          name: this.name,
-          visibility: (this.visible ? 'visible' : 'hidden'),
-          default_public_user_role_id: this.defaultRole,
-          project_folder_id: this.currentFolderId,
-        },
-      }).then(() => {
-        this.error = null;
-        this.$emit('create');
-      }).catch((error) => {
-        this.error = error.response.data.name;
-      });
-      this.submitting = false;
-    },
-    changeRole(role) {
-      this.defaultRole = role;
-    },
-    fetchUserRoles() {
-      if (this.userRolesUrl) {
-        axios.get(this.userRolesUrl)
-          .then((response) => {
-            this.userRoles = response.data.data;
-          });
-      }
-    }
-  },
-};
-</script>
diff --git a/app/javascript/vue/shared/tinymce_editor.vue b/app/javascript/vue/shared/tinymce_editor.vue
index 33a1b6f0f..8d4bd7b4a 100644
--- a/app/javascript/vue/shared/tinymce_editor.vue
+++ b/app/javascript/vue/shared/tinymce_editor.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <textarea :id="textareaId" ref="inputField"></textarea>
+    <textarea :id="textareaId" :placeholder="placeholder" ref="inputField"></textarea>
   </div>
 </template>
 
@@ -60,6 +60,10 @@ export default {
       default: '',
       required: true
     },
+    placeholder: {
+      type: String,
+      default: ''
+    },
     plugins: {
       default: () => `
           table autoresize link advlist codesample code autolink lists
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 76a1093cb..e89db8e90 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -654,6 +654,7 @@ en:
       start_date: "Start date"
       add_start_date: "Add start date"
       no_start_date: "No start date"
+      add_description: 'Add description'
       status:
         not_started: "Not started"
         started: "In progress"