Commit 1b4270a5 authored by ZeMKI's avatar ZeMKI
Browse files

Bugfix Edit study + improving qsort sorting

* now questions appear in edit study.
* you can zoom in and out the qsort.
* you can't sort the cards into hidden boxes anymore (duh).
parent 69e00cbd
......@@ -291,6 +291,7 @@ class StudyController extends Controller
$data['study']['sorting'] = $study->sortings;
$data['study']['tokens'] = Token::formatForEdit($data['study']['tokens']);
$data['study']['q'] = Question::formatForEdit($study);
ray($data['study']['q']);
$data['isedit'] = 'true';
$data['presetimages'] = Helper::getPresetImages();
$data['classifiers'] = Helper::getClassifiers();
......
......@@ -4,6 +4,7 @@ namespace App;
use Illuminate\Database\Eloquent\Model;
use Interview;
use Str;
/**
* App\Question
......@@ -50,7 +51,8 @@ class Question extends Model
if ($questionToEdit->detail === 'presort') {
$questionToEdit['answers'] = Answer::where('question_id', $questionToEdit->id)->get()->toArray();
array_push($questions['presort'], $questionToEdit);
} elseif ($questionToEdit->detail === 'postsort') {
} elseif (Str::contains($questionToEdit->detail, 'postsort')) {
if(Str::contains($questionToEdit->detail, 'showsorting')) $questionToEdit['canShowSorting'] = true;
$questionToEdit['answers'] = Answer::where('question_id', $questionToEdit->id)->get()->toArray();
array_push($questions['postsort'], $questionToEdit);
}
......
......@@ -136,6 +136,8 @@ window.app = new Vue({
sortingType: (state) => state.newinterview.sortingType,
toggleCards: (state) => state.newinterview.toggleCards,
selectedToken: (state) => state.newinterview.selectedToken,
qsortSizeIndex: (state) => state.newinterview.qsortSizeIndex
}),
}, data: {
newstudy: {}, users: {}, newuser: {
......@@ -364,6 +366,16 @@ window.app = new Vue({
}, showtoast: function (message) {
window.app.$buefy.snackbar.open(message);
},
updateqsortSizeIndex: function(val){
console.log("clicked "+val);
console.log("clicked "+this.qsortSizeIndex);
let self = this;
if(val === 'plus' && self.qsortSizeIndex < 4) this.$store.commit('updateqsortSizeIndex', self.qsortSizeIndex+1);
else if(val === 'minus' && self.qsortSizeIndex > 0) this.$store.commit('updateqsortSizeIndex', self.qsortSizeIndex-1);
}
},
});
......@@ -4,19 +4,19 @@
class="flex-wrap w-1/3 m-0 bg-green-400 py-2 font-bold relative sm:text-xs md:text-xs lg:text-base z-30 h-64 remove-from-screenshot overflow-visible" style="left:51%;">
<div v-for="(t,index) in tokens" :id="t.id"
class="z-50 m-1 inline-flex"
@mouseover="hovertrue(index)"
@mouseleave="hoverfalse(index)"
style="width: 50px;height: 50px;z-index:100;"
@click="updateselecttoken(t)"
@mouseleave="hoverfalse(index)"
@mouseover="hovertrue(index)"
>
<div :class="t.arrayofQsortPosition ? 'block opacity-50' : 'block'">
<img :src="t.image_path"
alt="token"
style="width: 50px;height: 50px;z-index:100;">
</div>
<div id="tokendescription" v-show="t.hover" class="absolute p-2 bg-gray-700 text-white z-50 cards-description overflow-visible w-auto">
<img :src="t.image_path"
:alt="t.properties.description"
<div v-show="t.hover" id="tokendescription" class="absolute p-2 bg-gray-700 text-white z-50 cards-description overflow-visible w-auto">
<img :alt="t.properties.description"
:src="t.image_path"
class="block" style="min-width: 150px;min-height: 150px;z-index:100;">
<p class="text-2xl text-white font-bold">{{ t.name }}</p>
<p class="text-sm text-gray-100">{{ t.properties.description }}</p>
......@@ -32,27 +32,27 @@
>
<div v-for="(array,key) in columns" :style="'height:'+ eachContainerHeight+'px'" class="grid grid-cols-1 gap-0 align-middle">
<div :class="'qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 grid grid-rows-'+(maxnumber+1)+' grid-flow-row gap-0 '">
<div v-for="(column,key) in columns" :style="'height:'+ eachContainerHeight+'px'" class="grid grid-cols-1 gap-0 align-middle">
<div :class="'qsortlg:w-'+sizes[qsortSizeIndex]+' qsortmd:w-16 qsortsm:w-12 grid grid-rows-'+(maxnumber+1)+' grid-flow-row gap-0 '">
<div v-for="n in array.length-2" :class="(array[n-1] === '---blank---')?
'bg-pink-400 opacity-0 qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 qsortlg:h-24 qsortmd:h-16 qsortsm:h-12' :
'bg-gray-900 text-white border border-solid border-white qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 qsortlg:h-24 qsortmd:h-16 qsortsm:h-12 select-none inline-block align-middle justify-center' "
v-model="arrayOfQsort[key][n]"
@click="assignTokenToCell(key,n)"
<div v-for="index in column.length-2" v-model="arrayOfQsort[key][index]"
:class="(column[index-1] === '---blank---')?
'bg-pink-400 opacity-0 qsortlg:w-'+sizes[qsortSizeIndex]+' qsortmd:w-16 qsortsm:w-12 qsortlg:h-'+sizes[qsortSizeIndex]+' qsortmd:h-16 qsortsm:h-12' :
'bg-gray-900 text-white border border-solid border-white qsortlg:w-'+sizes[qsortSizeIndex]+' qsortmd:w-16 qsortsm:w-12 qsortlg:h-'+sizes[qsortSizeIndex]+' qsortmd:h-16 qsortsm:h-12 select-none inline-block align-middle justify-center' "
@click="assignTokenToCell(key,index,(column[index-1] === '---blank---'))"
>
<img v-if="arrayOfQsort[key][n]" :src="arrayOfQsort[key][n].image_path">
<img v-if="arrayOfQsort[key][index]" :src="arrayOfQsort[key][index].image_path">
</div>
<div class="bg-white text-black qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 qsortlg:h-12 qsortmd:h-8 qsortsm:h-8 select-none inline-block align-middle justify-center"
v-if="qsortshownumbers">
{{ array[array.length - 2] !== '--empty--' ? array[array.length - 2] : '' }}
<div v-if="qsortshownumbers"
class="bg-white text-black qsortlg:w-sizes[qsortSizeIndex] qsortmd:w-16 qsortsm:w-12 qsortlg:h-12 qsortmd:h-8 qsortsm:h-8 select-none inline-block align-middle justify-center">
{{ column[column.length - 2] !== '--empty--' ? column[column.length - 2] : '' }}
</div>
<div class="bg-white text-black qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 qsortlg:h-24 qsortmd:h-16 qsortsm:h-12 select-none inline-block align-top justify-center"
<div class="bg-white text-black qsortlg:w-sizes[qsortSizeIndex] qsortmd:w-16 qsortsm:w-12 qsortlg:h-sizes[qsortSizeIndex] qsortmd:h-16 qsortsm:h-12 select-none inline-block align-top justify-center"
>
{{ array[array.length - 1] !== '--empty--' ? array[array.length - 1] : '' }}
{{ column[column.length - 1] !== '--empty--' ? column[column.length - 1] : '' }}
</div>
</div>
</div>
......@@ -64,28 +64,35 @@
<script>
import {mapState} from "vuex"
import store from "../../store"
export default {
name: "q-sort",
props: ['columns', 'itemsnumber', 'maxnumber', 'availabletokens','qsortshownumbers'],
props: ['columns', 'itemsnumber', 'maxnumber', 'availabletokens', 'qsortshownumbers'],
data() {
return {
basicWidth: 24,
containerWidth: 24 * this.itemsnumber * 2 * 2,
eachContainerHeight: 24 * this.maxnumber * 2,
sizes: [8, 12, 16, 24, 32],
tokens: [],
descriptionShowninToken: {},
arrayOfQsort: []
}
},
computed: {
'basicWidth': function () {
return this.sizes[this.qsortSizeIndex];
},
'containerWidth': function () {
return this.sizes[this.qsortSizeIndex] * this.itemsnumber * 2 * 2;
},
'eachContainerHeight': function () {
return this.sizes[this.qsortSizeIndex] * this.maxnumber * 2;
},
...mapState({
toggleCards: (state) => state.newinterview.toggleCards,
sortingtotal: state => state.newinterview.sortingtotal,
currentsorting: state => state.newinterview.sorting,
currentpage: state => state.newinterview.page,
selectedToken: state => state.newinterview.selectedToken
selectedToken: state => state.newinterview.selectedToken,
qsortSizeIndex: (state) => state.newinterview.qsortSizeIndex
})
},
mounted() {
......@@ -97,7 +104,7 @@ export default {
this.arrayOfQsort = this.columns;
this.arrayOfQsort.forEach((o, i, a) => a[i].forEach((x, j, b) => b[j] = '' ));
this.arrayOfQsort.forEach((o, i, a) => a[i].forEach((x, j, b) => b[j] = ''));
setTimeout(function () {
let tokens = document.getElementsByClassName("cards");
......@@ -121,84 +128,86 @@ export default {
});
};
},1500
}, 1500
);
let self = this;
setTimeout(function () {
let windowSize = window.innerWidth;
let widthMultiplier = 24;
let top = 6;
let mediaQuerySM = windowSize > 639 && windowSize < 768;
let mediaQueryMD = windowSize >= 768 && windowSize < 1366;
let mediaQueryLG = windowSize >= 1366;
if (mediaQuerySM) {
widthMultiplier = 12;
top *= 3;
console.log("SM")
}
else if (mediaQueryMD) {
console.log("MD")
widthMultiplier = 16;
top *= 2;
}
else if (mediaQueryLG) {
console.log("LG?")
//@todo check the resolution on various tablets
top *= 2
widthMultiplier = 24;
}
let containerWidth = widthMultiplier * this.itemsnumber * 2 * 2;
let element = document.getElementById('qsort');
element.style.width = containerWidth.toString() + 'px';
element.style.top = top.toString() + '%';
self.setCellSize()
}, 75);
},
methods:
{
assignTokenToCell: function(key,n) {
setCellSize: function () {
let windowSize = window.innerWidth;
let widthMultiplier = this.sizes[this.qsortSizeIndex];
let top = 6;
let mediaQuerySM = windowSize > 639 && windowSize < 768;
let mediaQueryMD = windowSize >= 768 && windowSize < 1366;
let mediaQueryLG = windowSize >= 1366;
if (mediaQuerySM) {
widthMultiplier = 12;
top *= 3;
console.log("SM")
if(!_.isEmpty(this.selectedToken))
{
}
else if (mediaQueryMD) {
console.log("MD")
widthMultiplier = 16;
top *= 2;
}
else if (mediaQueryLG) {
console.log("LG?")
//@todo check the resolution on various tablets
top *= 2
widthMultiplier = sizes[qsortSizeIndex];
}
let containerWidth = widthMultiplier * this.itemsnumber * 2 * 2;
let element = document.getElementById('qsort');
element.style.width = containerWidth.toString() + 'px';
element.style.top = top.toString() + '%';
},
assignTokenToCell: function (key, n, skip) {
if (!_.isEmpty(this.selectedToken) && !skip) {
// @todo if I put the token in a position that is occupied by another token remove the position from the token array and assign that to the new moved token
let tokenToChange = _.find(this.tokens, (o) => o.id === this.selectedToken.id);
this.arrayOfQsort[key][n] = this.selectedToken;
if(!_.isEmpty(tokenToChange.arrayofQsortPosition))
{
if (!_.isEmpty(tokenToChange.arrayofQsortPosition)) {
this.arrayOfQsort[tokenToChange.arrayofQsortPosition[0]][tokenToChange.arrayofQsortPosition[1]] = {};
}
tokenToChange.arrayofQsortPosition = [key,n];
tokenToChange.arrayofQsortPosition = [key, n];
this.$store.commit('updateselectedtoken',{});
this.$store.commit('updateselectedtoken', {});
this.$forceUpdate()
tokenToChange.position = [key,Math.abs(n-(this.arrayOfQsort[key].length-1))]
tokenToChange.position = [key, Math.abs(n - (this.arrayOfQsort[key].length - 1))]
}else{
}
else {
}
},
updateselecttoken: function(token){
this.$store.commit('updateselectedtoken',token);
this.$store.commit('updateToggleCards',!this.toggleCards);
updateselecttoken: function (token) {
this.$store.commit('updateselectedtoken', token);
this.$store.commit('updateToggleCards', !this.toggleCards);
this.$forceUpdate()
},
hovertrue: function (i){
Vue.set(this.tokens[i],'hover',true);
hovertrue: function (i) {
Vue.set(this.tokens[i], 'hover', true);
this.descriptionShowninToken = this.tokens[i];
this.$forceUpdate();
},
hoverfalse: function (i){
hoverfalse: function (i) {
Vue.set(this.tokens[i],'hover',false);
Vue.set(this.tokens[i], 'hover', false);
this.descriptionShowninToken.hover = false;
this.$forceUpdate();
},
......
......@@ -352,7 +352,7 @@
</button>
</div>
</div>
<div class="w-1/2 overflow-hidden sm:my-px sm:px-px">
<div class="w-full overflow-hidden sm:my-px sm:px-px">
<label class="inline-flex items-center mt-3">
<input v-model="sorting.qsortshownumbers" class="form-checkbox h-5 w-5 text-blue-600" type="checkbox"><span class="ml-2 text-gray-700">{{
trans('During the interview, show numbers below q-sort')
......@@ -681,7 +681,7 @@
<div
v-for="(block,cindex) in column"
v-if="cindex > 1"
class="w-16 ml-2 bg-gray-200 "
class="lg:w-16 md:w-8 sm:w-4 ml-2 bg-gray-900"
></div>
</div>
</div>
......@@ -1616,7 +1616,7 @@ export default {
i < direction;
i++) {
let questiontemplate = {
question: '', isopen: true, ismultiple: true, isonechoice: false, isscale: false, scalemin: 0, scalemax: 100, minlabel: '', maxlabel: '', numberofanswer: 1, answers: [],
question: '', isopen: true, ismultiple: true, isonechoice: false, isscale: false,canShowSorting:false, scalemin: 0, scalemax: 100, minlabel: '', maxlabel: '', numberofanswer: 1, answers: [],
};
this.postsort.questions.push(Object.assign({}, questiontemplate));
}
......@@ -1778,7 +1778,8 @@ export default {
this.$refs['sorting-preview'].toggleSortingPreviewModal();
}, toggleTabs: function (tabNumber) {
this.openTab = tabNumber;
}, fetchAndFormatDataForedit: function () {
},
fetchAndFormatDataForedit: function () {
function substrInBetween(whole_str, str1, str2) {
return whole_str.substring(whole_str.indexOf(str1) + str1.length, whole_str.lastIndexOf(str2));
......@@ -1961,7 +1962,9 @@ export default {
self.postsort.questions[i].ismultiple = false;
self.postsort.questions[i].isscale = false;
self.postsort.questions[i].isonechoice = false;
console.log(self.studydata.q.postsort[i].canShowSorting);
self.postsort.questions[i].canShowSorting = self.studydata.q.postsort[i].canShowSorting;
console.log(self.postsort.questions[i].canShowSorting);
_.times(self.studydata.q.postsort[i].answers.length, function (k) {
if (self.studydata.q.postsort[i].answers[k].answer.type == 'open') {
......
......@@ -12,6 +12,7 @@ export default new Vuex.Store(
state: {
newinterview: {
toggleCards: false,
qsortSizeIndex: 3,
center_x: 0,
center_y: 0,
bounds: {},
......@@ -176,10 +177,12 @@ export default new Vuex.Store(
},
typeofsorting: function (state, value) {
state.newinterview.sortingType = value;
},
updateToggleCards: function (state, value) {
state.newinterview.toggleCards = value;
},
updateqsortSizeIndex: function (state, value) {
state.newinterview.qsortSizeIndex = value;
}
},
......
......@@ -9,7 +9,7 @@
<p class="font-bold">{{session()->get('message') ? session()->get('message') : $message}}</p>
</div>
@endif
<div class="md:hidden bg-orange-100 w-full border-orange-100 border-2 text-orange-900 p-4" role="alert">
<div class="md:hidden bg-yellow-300 w-full border-orange-100 border-2 text-yellow-900 p-4" role="alert">
{{__('Mesort is intended to be used on a Tablet or Computer')}}
</div>
<form method="POST" action="{{ route('login') }}">
......
......@@ -11,8 +11,8 @@
</a>
<a
class="bg-gray-800"
v-if="interviewpage == 1 || (interviewpage == 2 && !presortQuestions)"
class="bg-gray-800"
v-if="interviewpage == 1 || (interviewpage == 2 && !presortQuestions)"
>
</a>
<a @click="interviewconfirmpreviouspage"
......@@ -21,7 +21,7 @@
>
< {{__('Questions')}}
</a>
<a @click="interviewconfirmpreviouspage"w
<a @click="interviewconfirmpreviouspage" w
class="bg-red-600 text-white p-2 mx-2"
v-else-if="interviewpage == 1 && sorting > 1"
>
......@@ -60,7 +60,7 @@
</div>
<span v-show="interviewpage == 1" class="flex">
<div class="flex items-center flex-shrink-1 text-white text-center " v-if="sortingType !== 3">
<div class="flex items-center flex-shrink-1 text-white text-center " v-if="sortingType !== 3">
<a class="text-center bg-green-500 hover:text-gray-300 hover:bg-green-800 p-2 ml-2"
@click="interviewaddsorting">
<strong> {{ __('Add Sorting') }}</strong>
......@@ -83,6 +83,18 @@
<div class="flex flex-shrink-1 ml-2 items-center" v-if="sortingType == 3">
<img v-if="selectedToken" :src="selectedToken.image_path" style="width: 50px;height: 50px;z-index:100;">
<button
class="bg-green-500 text-gray-500 hover:text-gray-300 hover:bg-green-800 h-8 w-16 rounded-0 cursor-pointer ml-2"
@click.prevent="updateqsortSizeIndex('minus')">
<span
class="m-auto text-2xl font-thin">-</span>
</button>
<button
class="bg-green-500 text-gray-500 hover:text-gray-300 hover:bg-green-800 h-8 w-16 rounded-0 cursor-pointer ml-2"
@click.prevent="updateqsortSizeIndex('plus')">
<span
class="m-auto text-2xl font-thin">+</span>
</button>
</div>
</span>
......
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