Commit d93eea24 authored by ZeMKI's avatar ZeMKI

Nework sorting changes

* now you can add persons on a new modal
* icon by florian used
* now you can assign color to labels
parent ab35353c
......@@ -3,20 +3,14 @@
<component name="ChangeListManager">
<list default="true" id="b51d2beb-a115-4b2a-80a2-b27cfb404d6c" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/vendor/telescope/app-dark.css" beforeDir="false" afterPath="$PROJECT_DIR$/public/vendor/telescope/app-dark.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/vendor/telescope/app.css" beforeDir="false" afterPath="$PROJECT_DIR$/public/vendor/telescope/app.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/vendor/telescope/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/vendor/telescope/app.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/vendor/telescope/mix-manifest.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/vendor/telescope/mix-manifest.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/Sorting.php" beforeDir="false" afterPath="$PROJECT_DIR$/app/Sorting.php" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/app.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/components/Interview/circle-sorting.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/components/Interview/circle-sorting.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/components/Interview/network-sorting.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/components/Interview/network-sorting.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/components/Interview/newinterview.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/components/Interview/newinterview.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/components/Interview/newtokenmodal.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/components/Interview/newtokenmodal.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/components/newstudy.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/components/newstudy.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/store/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/store/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/views/layouts/navinterview.blade.php" beforeDir="false" afterPath="$PROJECT_DIR$/resources/views/layouts/navinterview.blade.php" afterDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.mix.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.mix.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
......@@ -314,7 +308,7 @@
<workItem from="1592325750797" duration="694000" />
<workItem from="1592468514684" duration="460000" />
<workItem from="1592470742506" duration="10972000" />
<workItem from="1592579701949" duration="13620000" />
<workItem from="1592579701949" duration="32252000" />
</task>
<servers />
</component>
......@@ -391,13 +385,14 @@
</state>
<state x="0" y="23" width="2048" height="1257" key="SettingsEditor/128.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590056101932" />
<state x="0" y="23" key="SettingsEditor/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590665405159" />
<state x="772" y="-751" width="560" height="443" key="StructurePopup" timestamp="1592652832362">
<screen x="65" y="-1080" width="1920" height="1080" />
<state x="754" y="390" width="597" height="524" key="StructurePopup" timestamp="1592851239030">
<screen x="0" y="0" width="2048" height="1280" />
</state>
<state x="754" y="390" width="597" height="524" key="StructurePopup/0.0.2048.1280@0.0.2048.1280" timestamp="1592473450752" />
<state x="754" y="390" width="597" height="524" key="StructurePopup/0.0.2048.1280@0.0.2048.1280" timestamp="1592851239030" />
<state x="754" y="390" width="597" height="524" key="StructurePopup/0.23.2048.1257@0.23.2048.1257" timestamp="1592850442037" />
<state x="754" y="390" width="597" height="524" key="StructurePopup/128.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590054141097" />
<state x="754" y="390" width="598" height="526" key="StructurePopup/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1591800275957" />
<state x="772" y="-751" width="560" height="443" key="StructurePopup/65.-1080.1920.1080/0.0.2048.1280@65.-1080.1920.1080" timestamp="1592652832362" />
<state x="772" y="-751" width="597" height="443" key="StructurePopup/65.-1080.1920.1080/0.0.2048.1280@65.-1080.1920.1080" timestamp="1592823642000" />
<state x="349" y="331" key="com.intellij.ide.ui.customization.CustomizableActionsPanel$EditIconDialog" timestamp="1590665402287">
<screen x="0" y="0" width="2048" height="1280" />
</state>
......@@ -408,12 +403,12 @@
<state x="799" y="561" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/0.0.2048.1280@0.0.2048.1280" timestamp="1591186286502" />
<state x="799" y="561" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/128.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590054170589" />
<state x="799" y="561" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590404098131" />
<state x="1038" y="-534" width="623" height="534" key="find.popup" timestamp="1592646049724">
<screen x="65" y="-1080" width="1920" height="1080" />
<state x="1038" y="650" width="632" height="534" key="find.popup" timestamp="1592827811428">
<screen x="0" y="0" width="2048" height="1280" />
</state>
<state x="1038" y="650" width="632" height="534" key="find.popup/0.0.2048.1280@0.0.2048.1280" timestamp="1592479454215" />
<state x="1038" y="650" width="632" height="534" key="find.popup/0.0.2048.1280@0.0.2048.1280" timestamp="1592827811428" />
<state x="708" y="373" width="632" height="534" key="find.popup/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590406250473" />
<state x="1038" y="-534" width="623" height="534" key="find.popup/65.-1080.1920.1080/0.0.2048.1280@65.-1080.1920.1080" timestamp="1592646049724" />
<state x="1038" y="-534" width="623" height="534" key="find.popup/65.-1080.1920.1080/0.0.2048.1280@65.-1080.1920.1080" timestamp="1592813531714" />
<state x="908" y="-645" width="235" height="235" key="jetbrains.javascript.buildTools.run-task-popup" timestamp="1592648699312">
<screen x="65" y="-1080" width="1920" height="1080" />
</state>
......@@ -432,14 +427,14 @@
</state>
<state x="824" y="505" key="scopes/128.-1057.1920.1057/0.0.2048.1280@0.0.2048.1280" timestamp="1590055889310" />
<state x="824" y="505" width="498" height="379" key="scopes/128.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590055356254" />
<state x="711" y="-834" width="670" height="571" key="search.everywhere.popup" timestamp="1592653213583">
<screen x="65" y="-1080" width="1920" height="1080" />
<state x="689" y="291" width="670" height="676" key="search.everywhere.popup" timestamp="1592851323751">
<screen x="0" y="0" width="2048" height="1280" />
</state>
<state x="689" y="291" width="670" height="676" key="search.everywhere.popup/0.0.2048.1280@0.0.2048.1280" timestamp="1592468560470" />
<state x="689" y="291" width="670" height="676" key="search.everywhere.popup/0.0.2048.1280@0.0.2048.1280" timestamp="1592851323751" />
<state x="689" y="291" width="670" height="676" key="search.everywhere.popup/0.23.2048.1257@0.23.2048.1257" timestamp="1591115561349" />
<state x="689" y="291" width="670" height="676" key="search.everywhere.popup/128.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590054146808" />
<state x="689" y="292" width="715" height="677" key="search.everywhere.popup/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1591800273623" />
<state x="711" y="-834" width="670" height="571" key="search.everywhere.popup/65.-1080.1920.1080/0.0.2048.1280@65.-1080.1920.1080" timestamp="1592653213583" />
<state x="711" y="-834" width="670" height="571" key="search.everywhere.popup/65.-1080.1920.1080/0.0.2048.1280@65.-1080.1920.1080" timestamp="1592823668152" />
<state x="711" y="-834" width="670" height="571" key="search.everywhere.popup/65.-1080.1920.1080/0.23.2048.1257@65.-1080.1920.1080" timestamp="1592643605962" />
</component>
</project>
\ No newline at end of file
......@@ -43,8 +43,12 @@ class Sorting extends Model
if ($request->input('sorting.id') == 2)
{
$sections = '||divisions|' . $request->input('sorting.sectionNumber');
$sectionNames = '||names|' . join("|",$request->input('sorting.sections'));
$sectionCenter = '||center|' . $request->input('sorting.centerLabel')."||";
$sectionNames = '||names|';
foreach ($request->input('sorting.sections') as $section)
{
$sectionNames .= $section['name'] . ";color:".($section['color'] === null ? 'casual' : $section['color'] )."|";
}
$sectionCenter = '|center|' . $request->input('sorting.centerLabel')."||";
} else
{
$sections = "";
......
......@@ -307,7 +307,7 @@ window.app = new Vue(
sortingtotal: state => state.newinterview.sortingtotal,
presortQuestions: state => state.newinterview.presortQuestions,
postsortQuestions: state => state.newinterview.postsortQuestions,
sortingType: state => state.newinterview.sorting,
sortingType: state => state.newinterview.sortingType,
}),
},
......
......@@ -298,6 +298,8 @@
timeend: '',
},
disableinput: false,
sectionsLabelColors: [],
sectionsLabelColorsAreCasual: false,
};
},
......@@ -352,7 +354,23 @@
}),
sectionNames: function()
{
return this.study.sortings[0].pivot.details.substr(this.study.sortings[0].pivot.details.indexOf('names|') + 6).split('||')[0].split('|');
let namesAndColor = this.study.sortings[0].pivot.details.substr(this.study.sortings[0].pivot.details.indexOf('names|') + 6).split('||')[0].split('|');
let outputNames = [];
let outputColors = [];
_.forEach(namesAndColor, function(value, key)
{
outputColors.push(value.substr(value.indexOf(';color:') + 7, value.length));
outputNames.push(value.substr(0, value.indexOf(';color:')));
});
if (outputColors.indexOf('casual') > -1)
{
this.sectionsLabelColorsAreCasual = true;
outputColors = ['#CC1F1A', '#DE751F', '#F2D024', '#1F9D55', '#38A89D', '#2779BD', '#5661B3', '#794ACF', '#EB5286'];
}
this.sectionsLabelColors = outputColors;
return outputNames;
},
centerLabel: function()
{
......@@ -373,7 +391,7 @@
this.getPresets();
this.addListeners();
this.$store.commit('typeofsorting',this.sorting[0].id);
this.$store.commit('typeofsorting', this.sorting[0].id);
if (this.questions.presort.length > 0)
{
......@@ -445,7 +463,8 @@
cl.classList.remove('border');
cl.classList.remove('border-red-500');
});
}, updateSelectedClassifier: function(index)
},
updateSelectedClassifier: function(index)
{
let c = document.getElementById('class' + index);
c.classList.toggle('border-4');
......@@ -806,21 +825,20 @@
let navHeight = document.getElementById('main-nav-interview').getBoundingClientRect().height + document.getElementById('sorting-instructions').getBoundingClientRect().height;
let diameter = document.querySelector('.round-sorting' + this.circles).offsetWidth;
let container = document.getElementById('sortingsdiv');
let colorArray = [
'#CC1F1A', '#DE751F', '#F2D024', '#1F9D55', '#38A89D', '#2779BD', '#5661B3', '#794ACF', '#EB5286'];
let commonClasses = 'md:max-w-md lg:max-w-lg lg:text-base md:text-xs shadow-inner shadow-outline text-center ';
var uniqueRandoms = [];
var numRandoms = colorArray.length - 1;
document.querySelector('.round-sorting' + this.circles).classList.add('overflow-hidden');
function makeUniqueRandom()
function makeUniqueRandom(length)
{
// refill the array if needed
if (!uniqueRandoms.length)
{
for (
var i = 0;
i < numRandoms;
i < length;
i++
)
{
......@@ -862,7 +880,7 @@
let p = document.createElement('p');
p.innerHTML = this.sectionNames[i];
p.className = 'fixed bg-transparent p-2 bg-gray-900 text-white sectionLabel ' + commonClasses;
p.style.backgroundColor = colorArray[makeUniqueRandom()];
p.style.backgroundColor = this.sectionsLabelColorsAreCasual ? this.sectionsLabelColors[makeUniqueRandom(this.sectionsLabelColors.length)] : this.sectionsLabelColors[i];
container.appendChild(p);
let width = p.getBoundingClientRect().width;
let height = p.getBoundingClientRect().height;
......
......@@ -179,7 +179,7 @@
let isAPreset = !isAFile;
if (isAFile) {
console.log("isFile");
this.newinterview.newtoken.file.ispreset = false;
this.newinterview.newtoken.file.image_path = "";
......@@ -242,7 +242,7 @@
else self.drawImageProp(ctx, im, 0, 0, canvas.width, canvas.height);
let newimgUri = canvas.toDataURL("image/*").toString();
console.log(newimgUri);
self.tokenimage = newimgUri;
self.newinterview.newtoken.file.base64 = newimgUri;
......
......@@ -146,34 +146,11 @@
v-model="sorting.numberofcircles" min="2" max="8"
:editable="editable" steps="1"></b-numberinput>
</b-field>
<div class="block w-full" v-if="selectedSorting === 2">
<div class="block">
<b-field :label="trans('Number of Sections')">
<b-numberinput controls-position="compact" type="is-light"
v-model="sorting.sectionNumber"
id="numberOfSections" min="2" max="6" :editable="editable"
steps="1"></b-numberinput>
</b-field>
</div>
<div class="w-full block">
<label class="label">{{trans('Label in the center of the sorting')}} *</label>
<input type="text" v-model="sorting.centerLabel"
:class="response.indexOf(errormessages.centerLabel) > -1 ? 'bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal inline border-red-500': 'bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal inline'"
maxlength="3">
</div>
<div class="w-full block">
<label class="label">{{trans('Name of the sections')}}</label>
<input v-for="section,index in sorting.sections" :key="index" v-model="sorting.sections[index]" type="text"
class="bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal inline" maxlength="20">
</div>
</div>
</div>
</div>
<div class="w-2/3 ml-2">
<div class="w-2/3 ml-2" v-if="selectedSorting == 1">
<div class="inline-block">
<b-field :label="trans('Number of tokens to be sorted')">
......@@ -237,6 +214,60 @@
</div>
</div>
<div class="w-2/3 ml-2" v-if="selectedSorting === 2">
<div class="block">
<b-field :label="trans('Number of Sections')+' (2-6)'">
<b-numberinput controls-position="compact" type="is-light"
v-model="sorting.sectionNumber"
id="numberOfSections" min="2" max="6" :editable="editable"
steps="1"></b-numberinput>
</b-field>
</div>
<div class="w-full block">
<label class="label">{{trans('Label in the center of the sorting')}} * (1-3)</label>
<input type="text" v-model="sorting.centerLabel"
:class="response.indexOf(errormessages.centerLabel) > -1 ? 'bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal inline border-red-500': 'bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal inline'"
maxlength="3">
</div>
<div class="w-full">
<label class="label inline">{{trans('Name of the sections')}}</label>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3"></div>
<label class="md:w-2/3 block font-bold">
<input class="mr-2 leading-tight" type="checkbox" v-model="sorting.casualcolors">
<span class="text-xs">
{{trans('Use casual colors')}}
</span>
</label>
</div>
<span v-for="section,index in sorting.sections" class="block relative">
<input :key="index" v-model="sorting.sections[index].name" type="text"
class="w-2/3 bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block appearance-none leading-normal inline" maxlength="20">
<div class="inline-block relative w-1/4">
<v-select :options="colors"
:disabled="sorting.casualcolors"
:value="sorting.sections[index].color"
class=" py-2"
@input="color => updateSectionColor(index,color)"
>
<template slot="option" slot-scope="option">
<div class="fa w-auto inline text-gray-100 p-1" :style="'background-color:'+option.label">{{ option.label }}</div>
</template>
</v-select>
</div>
<div v-if="sorting.sections[index].color.length > 0" class="w-full inline" :style="'background-color: '+sorting.sections[index].color+';color: '+sorting.sections[index].color">a</div>
</span>
</div>
</div>
</div>
<label class="label is-small mt-5">
......@@ -498,7 +529,7 @@
@click.prevent="showModal"
:class="{'is-loading' : loading}"
type="button"
v-show="openTab === 2"
v-show="openTab === 2 && selectedSorting == 2"
:value="trans('Check preview in Sorting')"
>
......@@ -548,6 +579,7 @@
data()
{
return {
colors: ['#CC1F1A', '#DE751F', '#F2D024', '#1F9D55', '#38A89D', '#2779BD', '#5661B3', '#794ACF', '#EB5286'],
sorting_preview: false,
openTab: 1,
inputLength: {
......@@ -563,7 +595,7 @@
author: '',
editable: false,
fetching: false,
selectedSorting: 1,
selectedSorting: 2,
sorting: {
id: 1,
minvalue: 0,
......@@ -573,7 +605,15 @@
tokennumber: 1,
description: '',
sectionNumber: 2,
sections: ['', ''],
casualcolors: false,
sections: [
{
name: '',
color: '',
}, {
name: '',
color: '',
}],
tokens: [
{
name: '',
......@@ -685,13 +725,13 @@
'selectedSorting': function(newVal, oldVal)
{
this.sorting.id = newVal;
while (this.sorting.tokennumber > 0) this.sorting.tokennumber--;
},
'sorting.sectionNumber': function(newVal, oldVal)
{
if (!this.fetching)
{
console.log('looking for section number');
if (newVal < 0 || oldVal < 0)
{
newVal = 0;
......@@ -707,7 +747,7 @@
i++
)
{
this.sorting.sections.push('');
this.sorting.sections.push({name: '', color: ''});
}
}
else
......@@ -890,6 +930,10 @@
},
},
methods: {
updateSectionColor: function(index, color)
{
this.sorting.sections[index].color = color;
},
showModal: function()
{
this.$refs['sorting-preview'].toggleSortingPreviewModal();
......@@ -1256,10 +1300,10 @@
this.response += this.errormessages.short_description;
}
if (_.find(this.sorting.tokens, {name: ''}))
{
this.response += this.errormessages.tokens;
}
if (_.find(this.sorting.tokens, {name: ''}))
{
this.response += this.errormessages.tokens;
}
if (this.sorting.id == 2 && this.sorting.centerLabel == '')
{
......
......@@ -202,7 +202,7 @@ export default new Vuex.Store(
state,
value)
{
state.newinterview.sorting = value;
state.newinterview.sortingType = value;
},
......
......@@ -67,9 +67,11 @@
</a>
</div>
<div class="flex items-center flex-shrink-1 text-white text-center">
<a class="text-center bg-green-500 hover:text-gray-300 hover:bg-green-800 p-2 ml-2" @click="interviewaddtoken">
<strong v-if="sortingType == 1">{{ __('Add Token') }}</strong>
<strong v-if="sortingType == 2">{{ __('Add Person') }}</strong>
<a class="text-center bg-green-500 hover:text-gray-300 hover:bg-green-800 p-2 ml-2" @click="interviewaddtoken" v-if="sortingType == 1">
<strong>{{ __('Add Token') }}</strong>
</a>
<a class="text-center bg-green-500 hover:text-gray-300 hover:bg-green-800 p-2 ml-2" @click="toggleModal()" v-if="sortingType == 2">
<strong>{{ __('Add Person') }}</strong>
</a>
</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