Drag & drop reorder
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
Jonas Rittershofer
parent
6c8c17fcfc
commit
56d16fce4d
|
|
@ -302,7 +302,7 @@ class ApiController extends Controller {
|
|||
* @NoAdminRequired
|
||||
* Updates the Order of all Questions of a Form.
|
||||
* @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 {
|
||||
$this->logger->debug('Reordering Questions on Form {formId} as Question-Ids {newOrder}', [
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@
|
|||
<Draggable v-model="form.questions"
|
||||
:animation="200"
|
||||
tag="ul"
|
||||
@change="onQuestionOrderChange"
|
||||
@start="isDragging = true"
|
||||
@end="isDragging = false">
|
||||
<Questions ref="questions"
|
||||
|
|
@ -323,9 +324,9 @@ export default {
|
|||
async saveForm() {
|
||||
try {
|
||||
// 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) {
|
||||
showError(t('forms', 'Error on saving form, see console'))
|
||||
showError(t('forms', 'Error while saving form'))
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
|
|
@ -368,6 +369,27 @@ export default {
|
|||
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>
|
||||
|
|
@ -454,94 +476,94 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
/* Transitions for inserting and removing list items */
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all .5s ease;
|
||||
}
|
||||
// /* Transitions for inserting and removing list items */
|
||||
// .list-enter-active,
|
||||
// .list-leave-active {
|
||||
// transition: all .5s ease;
|
||||
// }
|
||||
|
||||
.list-enter,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
// .list-enter,
|
||||
// .list-leave-to {
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
.list-move {
|
||||
transition: transform .5s;
|
||||
}
|
||||
// .list-move {
|
||||
// transition: transform .5s;
|
||||
// }
|
||||
|
||||
#form-item-selector-text {
|
||||
> input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// #form-item-selector-text {
|
||||
// > input {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
.form-table {
|
||||
> li {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: baseline;
|
||||
min-height: 24px;
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
line-height: 24px;
|
||||
// .form-table {
|
||||
// > li {
|
||||
// display: flex;
|
||||
// overflow: hidden;
|
||||
// align-items: baseline;
|
||||
// min-height: 24px;
|
||||
// padding-right: 8px;
|
||||
// padding-left: 8px;
|
||||
// white-space: nowrap;
|
||||
// border-bottom: 1px solid var(--color-border);
|
||||
// line-height: 24px;
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
transition: var(--background-dark) .3s ease;
|
||||
background-color: var(--color-background-dark); //$hover-color;
|
||||
}
|
||||
// &:active,
|
||||
// &:hover {
|
||||
// transition: var(--background-dark) .3s ease;
|
||||
// background-color: var(--color-background-dark); //$hover-color;
|
||||
// }
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding-right: 4px;
|
||||
white-space: normal;
|
||||
opacity: .7;
|
||||
font-size: 1.2em;
|
||||
&.avatar {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
// > div {
|
||||
// display: flex;
|
||||
// flex-grow: 1;
|
||||
// padding-right: 4px;
|
||||
// white-space: normal;
|
||||
// opacity: .7;
|
||||
// font-size: 1.2em;
|
||||
// &.avatar {
|
||||
// flex-grow: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
> div:nth-last-child(1) {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// > div:nth-last-child(1) {
|
||||
// flex-grow: 0;
|
||||
// flex-shrink: 0;
|
||||
// justify-content: center;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
button {
|
||||
&.button-inline {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
// button {
|
||||
// &.button-inline {
|
||||
// border: 0;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// }
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.selectUnit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
> label {
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
// .tab {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// }
|
||||
// .selectUnit {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// flex-wrap: nowrap;
|
||||
// > label {
|
||||
// padding-right: 4px;
|
||||
// }
|
||||
// }
|
||||
|
||||
#shiftDates {
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
padding-left: 34px;
|
||||
text-align: left;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px center;
|
||||
}
|
||||
// #shiftDates {
|
||||
// min-width: 16px;
|
||||
// min-height: 16px;
|
||||
// margin: 0;
|
||||
// padding: 10px;
|
||||
// padding-left: 34px;
|
||||
// text-align: left;
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: 10px center;
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue