Commit 37f5eb1b by Jonathan Thomas

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)
parent 73a4a740
...@@ -10,13 +10,6 @@ ...@@ -10,13 +10,6 @@
</div> </div>
</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 --> <!-- Project thumbnails -->
<div class="row gy-2 gx-2 mb-2"> <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;"> <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 @@ ...@@ -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"/> <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> </svg>
<ul class="dropdown-menu small-dropdown"> <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><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> <li><a class="dropdown-item" href="#" @click="showDeletePrompt(project)">Delete</a></li>
</ul> </ul>
</div> </div>
...@@ -42,17 +36,24 @@ ...@@ -42,17 +36,24 @@
</div> </div>
<!-- Project thumbnail image --> <!-- 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>
</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 --> <!-- New Project Modal -->
<div class="modal fade" ref="newProjectModal" tabindex="-1" aria-labelledby="newModalLabel" aria-hidden="true"> <div class="modal fade" ref="newProjectModal" tabindex="-1" aria-labelledby="newModalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <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> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -87,7 +88,8 @@ ...@@ -87,7 +88,8 @@
</div> </div>
<div class="modal-footer"> <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-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> </div>
</div> </div>
...@@ -122,12 +124,13 @@ export default { ...@@ -122,12 +124,13 @@ export default {
name: "Projects.vue", name: "Projects.vue",
data() { data() {
return { return {
deletedProject: null, selectedProject: null,
project_name: 'New Project', project_name: null,
project_fps_num: 30, project_fps_num: 30,
project_fps_den: 1, project_fps_den: 1,
project_width: 1920, project_width: 1920,
project_height: 1080, project_height: 1080,
editing: false,
show_spinner: false, show_spinner: false,
selected_profile: 3031, selected_profile: 3031,
profiles profiles
...@@ -141,11 +144,41 @@ export default { ...@@ -141,11 +144,41 @@ export default {
this.project_fps_num = profile_details.fps_num this.project_fps_num = profile_details.fps_num
this.project_fps_den = profile_details.fps_den this.project_fps_den = profile_details.fps_den
}, },
editProject(project) { launchEditor(project) {
this.clearErrors() this.clearErrors()
this.$router.push(`/projects/${project.id}`) 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() { 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) let myModal = new Modal(this.$refs.newProjectModal)
myModal.show() myModal.show()
}, },
...@@ -165,18 +198,28 @@ export default { ...@@ -165,18 +198,28 @@ export default {
await this.createProject(payload) await this.createProject(payload)
this.$refs.CloseProjectModal.click(); 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) { showDeletePrompt(project) {
this.deletedProject = project; this.selectedProject = project;
this.$refs.prompt_project_name.innerText = this.deletedProject.name this.$refs.prompt_project_name.innerText = this.selectedProject.name
let myModal = new Modal(this.$refs.deleteModal) let myModal = new Modal(this.$refs.deleteModal)
myModal.show() myModal.show()
}, },
deleteProjectClick() { deleteProjectClick() {
this.deleteProject(this.deletedProject.id) this.deleteProject(this.selectedProject.id)
this.$refs.Close.click(); this.$refs.Close.click();
this.deletedProject = null this.selectedProject = null
}, },
...mapActions(['loadProjects', 'createProject', 'deleteProject']), ...mapActions(['loadProjects', 'createProject', 'deleteProject', 'updateProject']),
...mapMutations(['setProject', 'clearErrors']) ...mapMutations(['setProject', 'clearErrors'])
}, },
computed: { computed: {
......
...@@ -259,6 +259,14 @@ export default createStore({ ...@@ -259,6 +259,14 @@ export default createStore({
commit('addError', err.response.data) 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) { async deleteProject({commit}, project_id) {
try { try {
await instance.delete(`projects/${project_id}/`) await instance.delete(`projects/${project_id}/`)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment