Skip to content

Commit

Permalink
feat: save plugin files form
Browse files Browse the repository at this point in the history
  • Loading branch information
henrychoy committed Oct 8, 2024
1 parent 63bb4fc commit 2afd4f7
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 34 deletions.
3 changes: 2 additions & 1 deletion src/frontend/src/stores/LoginStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ export const useLoginStore = defineStore('login', () => {


const savedForms = ref({
jobs: {}
jobs: {},
files: {},
})


Expand Down
138 changes: 105 additions & 33 deletions src/frontend/src/views/CreatePluginFile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
<fieldset :class="`${isMobile ? 'col-12' : 'col q-ml-md'}`">
<legend>Plugin Tasks</legend>
<TableComponent
:rows="tasks"
:rows="pluginFile.tasks"
:columns="taskColumns"
title="Plugin Tasks"
ref="tableRef"
Expand Down Expand Up @@ -91,7 +91,7 @@
dense
clickable
removable
@remove="tasks[props.rowIndex].inputParams.splice(i, 1)"
@remove="pluginFile.tasks[props.rowIndex].inputParams.splice(i, 1)"
@click="handleSelectedParam('edit', props, i, 'inputParams'); showEditParamDialog = true"
>
{{ `${param.name}` }}
Expand All @@ -118,7 +118,7 @@
clickable
removable
@click="handleSelectedParam('edit', props, i, 'outputParams'); showEditParamDialog = true"
@remove="tasks[props.rowIndex].outputParams.splice(i, 1)"
@remove="pluginFile.tasks[props.rowIndex].outputParams.splice(i, 1)"
:label="`${param.name}: ${pluginParameterTypes.filter((type) => type.id === param.parameterType)[0]?.name}`"
/>
<q-btn
Expand Down Expand Up @@ -199,7 +199,12 @@
style="height: 10px"
class="q-mr-sm"
@click="addInputParam()"
/>
>
<span class="sr-only">Add Input Param</span>
<q-tooltip>
Add Input Param
</q-tooltip>
</q-btn>
</div>
</q-form>
Expand Down Expand Up @@ -246,24 +251,22 @@
style="height: 10px"
class="q-mr-sm"
@click="addOutputParam()"
/>
>
<span class="sr-only">Add Output Param</span>
<q-tooltip>
Add Output Param
</q-tooltip>
</q-btn>
</div>
</q-form>
<q-card-actions align="right">
<q-btn
label="Add Task"
color="secondary"
icon="add"
type="submit"
>
<span class="sr-only">Add Task</span>
<q-tooltip>
Add Task
</q-tooltip>
</q-btn>
/>
</q-card-actions>
</q-form>
</q-card>
Expand Down Expand Up @@ -306,6 +309,7 @@
color="negative"
label="Cancel"
class="q-mr-lg"
@click="confirmLeave = true"
/>
<q-btn
@click="submit()"
Expand All @@ -331,7 +335,7 @@
</InfoPopupDialog>
<DeleteDialog
v-model="showDeleteDialog"
@submit="tasks.splice(selectedTaskProps.rowIndex, 1); showDeleteDialog = false"
@submit="pluginFile.tasks.splice(selectedTaskProps.rowIndex, 1); showDeleteDialog = false"
type="Plugin Task"
:name="selectedTaskProps?.row?.name"
/>
Expand All @@ -343,11 +347,21 @@
@updateParam="updateParam"
@addParam="addParam"
/>
<LeaveFormDialog
v-model="showLeaveDialog"
type="plugin file"
:edit="route.params.fileId === 'new' ? false : true"
@leaveForm="leaveForm"
/>
<ReturnToFormDialog
v-model="showReturnDialog"
@cancel="clearForm"
/>
</template>
<script setup>
import { ref, inject, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ref, inject, watch, onMounted, computed } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import CodeEditor from '@/components/CodeEditor.vue'
import * as api from '@/services/dataApi'
import * as notify from '../notify'
Expand All @@ -356,13 +370,39 @@
import PageTitle from '@/components/PageTitle.vue'
import DeleteDialog from '@/dialogs/DeleteDialog.vue'
import EditPluginTaskParamDialog from '@/dialogs/EditPluginTaskParamDialog.vue'
import LeaveFormDialog from '@/dialogs/LeaveFormDialog.vue'
import ReturnToFormDialog from '@/dialogs/ReturnToFormDialog.vue'
import { useLoginStore } from '@/stores/LoginStore'
const store = useLoginStore()
const route = useRoute()
const router = useRouter()
const isMobile = inject('isMobile')
const pluginFile = ref({})
const pluginFile = ref({
filename: '',
description: '',
contents: '',
tasks: []
})
const initialCopy = ref({
filename: '',
description: '',
contents: '',
tasks: [],
})
const valuesChanged = computed(() => {
for (const key in initialCopy.value) {
if(JSON.stringify(initialCopy.value[key]) !== JSON.stringify(pluginFile.value[key])) {
return true
}
}
return false
})
const uploadedFile = ref(null)
const selectedTaskProps = ref()
Expand All @@ -381,15 +421,19 @@
onMounted(async () => {
if(route.params.fileId === 'new') {
title.value = 'Create File'
if(store.savedForms.files[route.params.id]) {
pluginFile.value = store.savedForms.files[route.params.id]
showReturnDialog.value = true
}
return
}
try {
const res = await api.getFile(route.params.id, route.params.fileId)
console.log('getFile = ', res)
pluginFile.value = res.data
title.value = `Edit ${res.data.filename}`
tasks.value = res.data.tasks
tasks.value.forEach((task) => {
pluginFile.value.tasks = res.data.tasks
pluginFile.value.tasks.forEach((task) => {
[...task.inputParams, ... task.outputParams].forEach((param) => {
param.parameterType = param.parameterType.id
})
Expand Down Expand Up @@ -433,23 +477,18 @@
}
async function addOrModifyFile() {
const pluginFileSubmit = {
filename: pluginFile.value.filename,
contents: pluginFile.value.contents,
description: pluginFile.value.description,
tasks: tasks.value
}
try {
let res
if(route.params.fileId === 'new') {
res = await api.addFile(route.params.id, pluginFileSubmit)
res = await api.addFile(route.params.id, pluginFile.value)
} else {
res = await api.updateFile(route.params.id, route.params.fileId, pluginFileSubmit)
res = await api.updateFile(route.params.id, route.params.fileId, pluginFile.value)
}
store.savedForms.files[route.params.id] = null
notify.success(`Successfully ${route.params.fileId === 'new' ? 'created' : 'updated'} '${res.data.filename}'`)
confirmLeave.value = true
router.push(`/plugins/${route.params.id}/files`)
} catch(err) {
console.log('err = ', err)
notify.error(err.response.data.message)
}
}
Expand All @@ -472,7 +511,6 @@
reader.readAsText(file); // Reads the file as text
}
const selected = ref([])
const tableRef = ref(null)
const pluginParameterTypes = ref([])
const displayStructure = ref(false)
Expand All @@ -497,7 +535,6 @@
const inputParams = ref([])
const outputParams = ref([])
const tasks = ref([])
const task = ref({
})
Expand Down Expand Up @@ -554,7 +591,7 @@
function addTask() {
taskForm.value.validate().then(success => {
if (success) {
tasks.value.push({
pluginFile.value.tasks.push({
name: task.value.name,
inputParams: inputParams.value,
outputParams: outputParams.value
Expand Down Expand Up @@ -584,11 +621,46 @@
}
function updateParam(updatedParam) {
tasks.value[selectedTaskProps.value.rowIndex][selectedTaskProps.value.type][selectedTaskProps.value.paramIndex] = updatedParam
pluginFile.value.tasks[selectedTaskProps.value.rowIndex][selectedTaskProps.value.type][selectedTaskProps.value.paramIndex] = updatedParam
}
function addParam(newParam) {
tasks.value[selectedTaskProps.value.rowIndex][selectedTaskProps.value.type].push(newParam)
pluginFile.value.tasks[selectedTaskProps.value.rowIndex][selectedTaskProps.value.type].push(newParam)
}
onBeforeRouteLeave((to, from, next) => {
toPath.value = to.path
if(confirmLeave.value) {
next(true)
} else if(valuesChanged.value) {
showLeaveDialog.value = true
} else {
next(true)
}
})
const showLeaveDialog = ref(false)
const showReturnDialog = ref(false)
const confirmLeave = ref(false)
const toPath = ref()
function leaveForm() {
if(route.params.fileId === 'new') {
store.savedForms.files[route.params.id] = pluginFile.value
}
confirmLeave.value = true
router.push(toPath.value)
}
function clearForm() {
pluginFile.value = {
filename: '',
description: '',
contents: '',
tasks: [],
}
basicInfoForm.value.reset()
store.savedForms.files[route.params.id] = null
}
</script>

0 comments on commit 2afd4f7

Please sign in to comment.