Edit project & Launch Editor menus added, updateProject action added, fixed some…

Edit project & Launch Editor menus added, updateProject action added, fixed some bugs on Project Create vs Edit. Moved project loading spinner below project list (to keep the screen from jumping)

src/components/Projects.vue

@@ -10,13 +10,6 @@
     </div>
   </div>
 
-  <!-- Loading spinner -->
-  <div v-if="show_spinner" class="md-5 p-4 text-center">
-    <div class="spinner-border" role="status">
-      <span class="visually-hidden">Loading...</span>
-    </div>
-  </div>
-
   <!-- Project thumbnails -->
   <div class="row gy-2 gx-2 mb-2">
     <div v-for="project in thumbnailedProjects" :key="project.id" class="col-sm-12 col-md-6 col-lg-3" style="position: relative;">
@@ -30,8 +23,9 @@
           <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
         </svg>
         <ul class="dropdown-menu small-dropdown">
-          <li><a class="dropdown-item" href="#" @click="editProject(project)">Edit</a></li>
+          <li><a class="dropdown-item" href="#" @click="launchEditor(project)">Launch Editor</a></li>
           <li><hr class="dropdown-divider"></li>
+          <li><a class="dropdown-item" href="#" @click="editProjectClick(project)">Edit</a></li>
           <li><a class="dropdown-item" href="#" @click="showDeletePrompt(project)">Delete</a></li>
         </ul>
       </div>
@@ -42,17 +36,24 @@
       </div>
 
       <!-- Project thumbnail image -->
-      <img @click="editProject(project)" class="img-fluid img-thumbnail project-thumbnail" :title="project.name" :src="project.thumbnail"/>
+      <img @click="launchEditor(project)" class="img-fluid img-thumbnail project-thumbnail" :title="project.name" :src="project.thumbnail"/>
     </div>
   </div>
 
+  <!-- Loading spinner -->
+  <div v-if="show_spinner" class="md-5 p-4 text-center">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
 
   <!-- New Project Modal -->
   <div class="modal fade" ref="newProjectModal" tabindex="-1" aria-labelledby="newModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title" id="newModalLabel">Create Project</h5>
+          <h5 v-if="!editing" class="modal-title" id="newModalLabel">Create Project</h5>
+          <h5 v-if="editing" class="modal-title" id="newModalLabel">Edit Project</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
@@ -87,7 +88,8 @@
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" ref="CloseProjectModal" data-bs-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-primary" @click="createProjectClick">Create Project</button>
+          <button v-if="!editing" type="button" class="btn btn-primary" @click="createProjectClick">Create Project</button>
+          <button v-if="editing" type="button" class="btn btn-primary" @click="updateProjectClick">Save Project</button>
         </div>
       </div>
     </div>
@@ -122,12 +124,13 @@ export default {
   name: "Projects.vue",
   data() {
     return {
-      deletedProject: null,
-      project_name: 'New Project',
+      selectedProject: null,
+      project_name: null,
       project_fps_num: 30,
       project_fps_den: 1,
       project_width: 1920,
       project_height: 1080,
+      editing: false,
       show_spinner: false,
       selected_profile: 3031,
       profiles
@@ -141,11 +144,41 @@ export default {
       this.project_fps_num = profile_details.fps_num
       this.project_fps_den = profile_details.fps_den
     },
-    editProject(project) {
+    launchEditor(project) {
       this.clearErrors()
       this.$router.push(`/projects/${project.id}`)
     },
+    editProjectClick(project) {
+      this.clearErrors()
+      this.selectedProject = project
+      this.editing = true
+
+      // Set profile to match current project settings
+      let profile_details = this.profiles.filter(p => p.width == project.width &&
+                                                      p.height == project.height &&
+                                                      p.fps_num == project.fps_num &&
+                                                      p.fps_den == project.fps_den)
+      if (profile_details.length > 0) {
+        this.selected_profile = profile_details[0].id
+      }
+      this.project_name = project.name
+      this.project_width = project.width
+      this.project_height = project.height
+      this.project_fps_num = project.fps_num
+      this.project_fps_den = project.fps_den
+      let myModal = new Modal(this.$refs.newProjectModal)
+      myModal.show()
+    },
     showNewProjectModal() {
+      this.selectedProject = null
+      this.editing = false
+      this.project_name = 'New Project'
+      this.project_fps_num = 30
+      this.project_fps_den = 1
+      this.project_width = 1920
+      this.project_height = 1080
+      this.selected_profile = 3031
+
       let myModal = new Modal(this.$refs.newProjectModal)
       myModal.show()
     },
@@ -165,18 +198,28 @@ export default {
       await this.createProject(payload)
       this.$refs.CloseProjectModal.click();
     },
+    async updateProjectClick() {
+      this.selectedProject.name = this.project_name
+      this.selectedProject.width = this.project_width
+      this.selectedProject.height = this.project_height
+      this.selectedProject.fps_num = this.project_fps_num
+      this.selectedProject.fps_den = this.project_fps_den
+
+      await this.updateProject(this.selectedProject)
+      this.$refs.CloseProjectModal.click();
+    },
     showDeletePrompt(project) {
-      this.deletedProject = project;
-      this.$refs.prompt_project_name.innerText = this.deletedProject.name
+      this.selectedProject = project;
+      this.$refs.prompt_project_name.innerText = this.selectedProject.name
       let myModal = new Modal(this.$refs.deleteModal)
       myModal.show()
     },
     deleteProjectClick() {
-      this.deleteProject(this.deletedProject.id)
+      this.deleteProject(this.selectedProject.id)
       this.$refs.Close.click();
-      this.deletedProject = null
+      this.selectedProject = null
     },
-    ...mapActions(['loadProjects', 'createProject', 'deleteProject']),
+    ...mapActions(['loadProjects', 'createProject', 'deleteProject', 'updateProject']),
     ...mapMutations(['setProject', 'clearErrors'])
   },
   computed: {

src/store/index.js

@@ -259,6 +259,14 @@ export default createStore({
         commit('addError', err.response.data)
       }
     },
+    async updateProject({commit}, payload) {
+      try {
+        await instance.patch(`${payload.url}`, payload)
+        commit('setProject', payload)
+      } catch(err) {
+        commit('addError', err.response.data)
+      }
+    },
     async deleteProject({commit}, project_id) {
       try {
         await instance.delete(`projects/${project_id}/`)