deblan/forms
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Drag & drop reorder

Browse source 
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2020-04-21 18:23:28 +02:00 committed by Jonas Rittershofer
parent 6c8c17fcfc
commit 56d16fce4d
2 changed files with 104 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/Controller/ApiController.php
View file

@ -302,7 +302,7 @@ class ApiController extends Controller {
* @NoAdminRequired * @NoAdminRequired
* Updates the Order of all Questions of a Form. * Updates the Order of all Questions of a Form.
* @param int $formId Id of the form to reorder * @param int $formId Id of the form to reorder
* @param int $newOrder Array of Question-Ids in new order. * @param int[] $newOrder Array of Question-Ids in new order.
*/ */
public function reorderQuestions(int $formId, array $newOrder): Http\JSONResponse { public function reorderQuestions(int $formId, array $newOrder): Http\JSONResponse {
$this->logger->debug('Reordering Questions on Form {formId} as Question-Ids {newOrder}', [ $this->logger->debug('Reordering Questions on Form {formId} as Question-Ids {newOrder}', [

184
src/views/Create.vue
View file

@ -105,6 +105,7 @@
<Draggable v-model="form.questions" <Draggable v-model="form.questions"
:animation="200" :animation="200"
tag="ul" tag="ul"
@change="onQuestionOrderChange"
@start="isDragging = true" @start="isDragging = true"
@end="isDragging = false"> @end="isDragging = false">
<Questions ref="questions" <Questions ref="questions"
@ -323,9 +324,9 @@ export default {
async saveForm() { async saveForm() {
try { try {
// TODO: add loading status feedback ? // TODO: add loading status feedback ?
await axios.post(OC.generateUrl('/apps/forms/update/form'), this.form) await axios.post(OC.generateUrl('/apps/forms/api/v1/question/update'), this.form)
} catch (error) { } catch (error) {
showError(t('forms', 'Error on saving form, see console')) showError(t('forms', 'Error while saving form'))
console.error(error) console.error(error)
} }
}, },
@ -368,6 +369,27 @@ export default {
e.target.select() e.target.select()
} }
}, },
/**
* Reorder questions on dragEnd
*/
async onQuestionOrderChange() {
this.isLoadingQuestions = true
const newOrder = this.form.questions.map(question => question.id)
console.info(newOrder);
try {
await axios.post(OC.generateUrl('/apps/forms/api/v1/question/reorder'), {
formId: this.form.id,
newOrder,
})
} catch (error) {
showError(t('forms', 'Error while saving form'))
console.error(error)
} finally {
this.isLoadingQuestions = false
}
},
}, },
} }
</script> </script>
@ -454,94 +476,94 @@ export default {
} }
} }
/* Transitions for inserting and removing list items */ // /* Transitions for inserting and removing list items */
.list-enter-active, // .list-enter-active,
.list-leave-active { // .list-leave-active {
transition: all .5s ease; // transition: all .5s ease;
} // }
.list-enter, // .list-enter,
.list-leave-to { // .list-leave-to {
opacity: 0; // opacity: 0;
} // }
.list-move { // .list-move {
transition: transform .5s; // transition: transform .5s;
} // }
#form-item-selector-text { // #form-item-selector-text {
> input { // > input {
width: 100%; // width: 100%;
} // }
} // }
.form-table { // .form-table {
> li { // > li {
display: flex; // display: flex;
overflow: hidden; // overflow: hidden;
align-items: baseline; // align-items: baseline;
min-height: 24px; // min-height: 24px;
padding-right: 8px; // padding-right: 8px;
padding-left: 8px; // padding-left: 8px;
white-space: nowrap; // white-space: nowrap;
border-bottom: 1px solid var(--color-border); // border-bottom: 1px solid var(--color-border);
line-height: 24px; // line-height: 24px;
&:active, // &:active,
&:hover { // &:hover {
transition: var(--background-dark) .3s ease; // transition: var(--background-dark) .3s ease;
background-color: var(--color-background-dark); //$hover-color; // background-color: var(--color-background-dark); //$hover-color;
} // }
> div { // > div {
display: flex; // display: flex;
flex-grow: 1; // flex-grow: 1;
padding-right: 4px; // padding-right: 4px;
white-space: normal; // white-space: normal;
opacity: .7; // opacity: .7;
font-size: 1.2em; // font-size: 1.2em;
&.avatar { // &.avatar {
flex-grow: 0; // flex-grow: 0;
} // }
} // }
> div:nth-last-child(1) { // > div:nth-last-child(1) {
flex-grow: 0; // flex-grow: 0;
flex-shrink: 0; // flex-shrink: 0;
justify-content: center; // justify-content: center;
} // }
} // }
} // }
button { // button {
&.button-inline { // &.button-inline {
border: 0; // border: 0;
background-color: transparent; // background-color: transparent;
} // }
} // }
.tab { // .tab {
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
} // }
.selectUnit { // .selectUnit {
display: flex; // display: flex;
align-items: center; // align-items: center;
flex-wrap: nowrap; // flex-wrap: nowrap;
> label { // > label {
padding-right: 4px; // padding-right: 4px;
} // }
} // }
#shiftDates { // #shiftDates {
min-width: 16px; // min-width: 16px;
min-height: 16px; // min-height: 16px;
margin: 0; // margin: 0;
padding: 10px; // padding: 10px;
padding-left: 34px; // padding-left: 34px;
text-align: left; // text-align: left;
background-repeat: no-repeat; // background-repeat: no-repeat;
background-position: 10px center; // background-position: 10px center;
} // }
</style> </style>