Skip to content
GitLab
Commit 781f358e authored by ZeMKI's avatar ZeMKI
Browse files

Popup question when sorting in extremes 

* added properties in q-sort vue component (extremes object)
* added popup that shows when sorting in the extremes positions (looking only at the base)
* saved the answers in extreme.answers.
* app.js code cleanup
parent 83df6f21
Hide whitespace changes
Inline Side-by-side
resources/js/app.js
View file @ 781f358e
......@@ -138,7 +138,7 @@ Vue.mixin({
window.location.href = '../mesort';
}, 500);
}).catch(function (error) {
console.log(error);
self.loading = false;
self.$buefy.snackbar.open(
'There it was an error during the request - refresh page and try again');
......@@ -188,12 +188,11 @@ window.app = new Vue({
},
}, methods: {
iWantNewsletter(will) {
console.log(will);
let subscribed = will === 'true';
console.log(subscribed);
let self = this;
axios.post('users/subscribe', {subscribed: subscribed}).then((response) => {
console.log(response);
self.$buefy.snackbar.open(response.data.message);
let newsDiv = document.querySelector('.newsletter');
......@@ -206,7 +205,7 @@ window.app = new Vue({
self.$forceUpdate();
}).catch(function (error) {
console.log(error);
self.$buefy.snackbar.open(
'There it was an error during the request - refresh page and try again');
......@@ -235,7 +234,8 @@ window.app = new Vue({
}
}, togglePersonModal() {
this.$store.dispatch('togglePersonModal');
}, toggleModal(id = '') {
},
toggleModal(id = '') {
const body = document.querySelector('body');
const modal = document.querySelector('.modal');
modal.classList.toggle('opacity-0');
......@@ -401,7 +401,6 @@ window.app = new Vue({
else if (val === 'minus' && self.qsortSizeIndex > 0) this.$store.commit('updateqsortSizeIndex', self.qsortSizeIndex - 1);
},
updateqsortDistanceIndex: function (val) {
console.log(val);
let self = this;
if (val === 'plus' && self.qsortDistanceIndex < 8) this.$store.commit('updateqsortDistanceIndex', self.qsortDistanceIndex + 1);
else if (val === 'minus' && self.qsortDistanceIndex > 0) this.$store.commit('updateqsortDistanceIndex', self.qsortDistanceIndex - 1);
......
resources/js/components/Interview/q-sort.vue
View file @ 781f358e
<template>
<div class="flex">
<!--Modal-->
<div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div class="absolute w-full h-full bg-gray-900 opacity-50" @click="toggleModal()"></div>
<div class="modal-container bg-white w-1/2 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
<div class="absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50" @click="toggleModal()">
<svg class="fill-current text-white" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
<span class="text-sm">(Esc)</span>
</div>
<!-- Add margin if you want to see some of the overlay behind the modal-->
<div class="modal-content py-4 text-left px-6">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">{{ trans(extremes.question) }}</p>
<div class="cursor-pointer z-50" @click="toggleModal()">
<svg class="fill-current text-black" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</div>
</div>
<!--Body-->
<p>{{ trans(extremes.question) }}</p>
<textarea id="extreme_question" v-model="extremes.temporaryAnswer" class="bg-white focus:outline-none focus:ring border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal" type="text">
</textarea>
<!--Footer-->
<div class="flex justify-end pt-2">
<button class="px-4 bg-transparent p-3 rounded-lg text-blue-500 hover:bg-gray-100 hover:text-blue-400 mr-2" @click.prevent="answerExtremePlace">{{ trans('Save and Close') }}</button>
<button class="px-4 bg-blue-500 p-3 rounded-lg text-white hover:bg-blue-400" @click.prevent="toggleModal()">{{ trans('Close') }}</button>
</div>
</div>
</div>
</div>
<div v-show="toggleCards"
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"
......@@ -71,11 +113,19 @@ export default {
data() {
return {
sizes: [8, 12, 16, 24, 32],
distance: [0,2,3,4,5,6,7,8],
distance: [0, 2, 3, 4, 5, 6, 7, 8],
baseTop: 6,
tokens: [],
descriptionShowninToken: {},
arrayOfQsort: []
arrayOfQsort: [],
extremes: {
tokenId: -1,
question: "Why?",
temporaryAnswer: "",
answers: [],
replacingToken: -1
}
}
},
watch: {
......@@ -87,7 +137,7 @@ export default {
'basicWidth': function () {
return this.sizes[this.qsortSizeIndex];
},
'top': function(){
'top': function () {
return this.baseTop * this.distance[this.qsortDistanceIndex];
},
'containerWidth': function () {
......@@ -149,9 +199,48 @@ export default {
},
methods:
{
answerExtremePlace() {
// same token sorted again
let existingAnswer = _.find(this.extremes.answers, ['id', this.extremes.tokenId]);
if (this.extremes.replacingToken !== -1) {
console.log("something was in here")
let replaceExistingToken = _.find(this.extremes.answers, ['id', this.extremes.replacingToken]);
replaceExistingToken.id = this.extremes.tokenId;
replaceExistingToken.answer = this.extremes.temporaryAnswer;
}
else if (!existingAnswer) {
console.log("brend new token")
this.extremes.answers.push({id: this.extremes.tokenId, answer: this.extremes.temporaryAnswer})
}
else {
console.log("same token sorted again.")
existingAnswer.id = this.extremes.tokenId;
existingAnswer.answer = this.extremes.temporaryAnswer;
}
this.extremes.temporaryAnswer = "";
this.toggleModal(-1);
},
toggleModal(selectedTokenId = '') {
const body = document.querySelector('body');
const modal = document.querySelector('.modal');
modal.classList.toggle('opacity-0');
modal.classList.toggle('pointer-events-none');
body.classList.toggle('modal-active');
if (this.extremes.tokenId === -1) {
this.extremes.tokenId = selectedTokenId;
}
else {
this.extremes.tokenId = -1;
}
},
setCellSize: function () {
let windowSize = window.innerWidth;
let self = this;
let widthMultiplier = this.sizes[this.qsortSizeIndex];
let top = 6;
let mediaQuerySM = windowSize > 639 && windowSize < 768;
......@@ -181,22 +270,26 @@ export default {
},
assignTokenToCell: function (key, n, skip) {
if (key === 0 || key === this.columns.length - 1) {
if (!_.isEmpty(this.arrayOfQsort[key][n])) {
this.extremes.replacingToken = _.find(this.tokens, (t) => t.id === this.arrayOfQsort[key][n].id).id;
}
this.toggleModal(this.selectedToken.id);
}
if (!_.isEmpty(this.selectedToken) && !skip) {
let tokenToChange = _.find(this.tokens, (t) => t.id === this.selectedToken.id);
if(!_.isEmpty(this.arrayOfQsort[key][n])){
console.log("not empty");
let tokenAlreadySorted = !_.isEmpty(tokenToChange.arrayofQsortPosition)
if (tokenAlreadySorted) {
this.arrayOfQsort[tokenToChange.arrayofQsortPosition[0]][tokenToChange.arrayofQsortPosition[1]] = {};
}
if (!_.isEmpty(this.arrayOfQsort[key][n])) {
let tokenOccupyingSpace = _.find(this.tokens, (t) => t.id === this.arrayOfQsort[key][n].id);
console.log(tokenOccupyingSpace)
delete tokenOccupyingSpace.arrayofQsortPosition;
}
this.arrayOfQsort[key][n] = this.selectedToken;
let tokenAlreadySorted = !_.isEmpty(tokenToChange.arrayofQsortPosition)
if (tokenAlreadySorted) {
this.arrayOfQsort[tokenToChange.arrayofQsortPosition[0]][tokenToChange.arrayofQsortPosition[1]] = {};
}
tokenToChange.arrayofQsortPosition = [key, n];
this.$store.commit('updateselectedtoken', {});
......
Supports Markdown
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