#ARC-12 Integrate specialization selection widgets into a project editing view

remotes/origin/setup
ArturBaybulatov 10 years ago
parent a046acb0d6
commit bd68eea24e
  1. 39
      api/views.py
  2. 170
      assets/index.js
  3. 19
      projects/forms.py
  4. 19
      projects/templates/customer_project_create.html
  5. 16
      projects/templates/customer_project_edit.html

@ -20,37 +20,38 @@ from chat.models import Message
from chat.serializers import MessageSerializer from chat.serializers import MessageSerializer
from chat.filters import MessageFilterSet from chat.filters import MessageFilterSet
class ProjectViewSet(ModelViewSet): class ProjectViewSet(ModelViewSet):
queryset = Project.objects.all() queryset = Project.objects.all()
serializer_class = ProjectSerializer serializer_class = ProjectSerializer
filter_class = ProjectFilterSet filter_class = ProjectFilterSet
class MessageViewSet(ModelViewSet): class MessageViewSet(ModelViewSet):
queryset = Message.objects.all() queryset = Message.objects.all()
serializer_class = MessageSerializer serializer_class = MessageSerializer
filter_class = MessageFilterSet filter_class = MessageFilterSet
class RealtyViewSet(ModelViewSet): class RealtyViewSet(ModelViewSet):
queryset = Realty.objects.all() queryset = Realty.objects.all()
serializer_class = RealtySerializer serializer_class = RealtySerializer
filter_class = RealtyFilterSet filter_class = RealtyFilterSet
class SpecializationViewSet(ModelViewSet): class SpecializationViewSet(ModelViewSet):
queryset = Specialization.objects.all() queryset = Specialization.objects.root_nodes()[0].get_descendants()
serializer_class = SpecializationSerializer serializer_class = SpecializationSerializer
filter_class = SpecializationFilterSet filter_class = SpecializationFilterSet
class UserViewSet(ModelViewSet): class UserViewSet(ModelViewSet):
queryset = User.objects.all() queryset = User.objects.all()
serializer_class = UserSerializer serializer_class = UserSerializer
filter_class = UserFilterSet filter_class = UserFilterSet
class LocationViewSet(ModelViewSet): class LocationViewSet(ModelViewSet):
queryset = Location.objects.all() queryset = Location.objects.root_nodes()[0].get_descendants()
serializer_class = LocationSerializer serializer_class = LocationSerializer
filter_class = LocationFilterSet filter_class = LocationFilterSet

@ -1,89 +1,126 @@
// Fancy widget initializations ------------------------ // Fancy widget initializations ------------------------
$(function() { var $specSelects = $('.-spec-select')
var $specSelects = $('.-spec-select')
var select2Options = {
language: 'ru',
//minimumInputLength: 1, // Commented out to immediately load remote data
placeholder: '', // Required by `allowClear`
allowClear: true,
var select2Options = { ajax: {
language: 'ru', url: '/api/specializations/',
//minimumInputLength: 1, // Commented out to immediately load remote data dataType: 'json',
placeholder: '', // Required by `allowClear` quietMillis: 250,
allowClear: true, cache: true,
ajax: { data: function(term, page) {
url: '/api/specializations/', return {
dataType: 'json', 'name__icontains': term,
quietMillis: 250, page: page,
cache: true, }
data: function(term, page) {
return {
'name__icontains': term,
page: page,
}
},
results: function(data, page) {
return {
results: _.map(function(item) {
return {
text: item.name,
id: item.id,
origItem: item,
}
}, data.results),
more: (page * 10) < data.count,
}
},
}, },
initSelection: function(element, callback) { results: function(data, page) {
var id = $(element).val() return {
results: _.map(function(item) {
if (id !== '') { return {
$.ajax('/api/specializations/' + id, {dataType: 'json'}) text: item.name,
.then(function(data) {callback(data)}) id: item.id,
origItem: item,
}
}, data.results),
more: (page * 10) < data.count,
} }
},
},
initSelection: function(element, callback) {
var id = $(element).val()
if (id !== '') {
$.ajax('/api/specializations/' + id + '/', {dataType: 'json'})
.then(function(data) {callback(data)})
} }
} }
}
$specSelects.select2(select2Options)
$specSelects.select2(select2Options)
var $specSelect1 = $('.-spec-select-level-1')
var $specSelect2 = $('.-spec-select-level-2') var $specSelect1 = $('.-spec-select-level-1')
var $specSelect3 = $('.-spec-select-level-3') var $specSelect2 = $('.-spec-select-level-2')
var $specSelect4 = $('.-spec-select-level-4') var $specSelect3 = $('.-spec-select-level-3')
var $specSelect4 = $('.-spec-select-level-4')
$specSelects.on('change', function($evt) {
getSpecializationTree($evt.added.origItem).then(function(specs) {
$specSelect1.select2('data', specs.specLevel1 ? {id: specs.specLevel1.id, text: specs.specLevel1.name, origItem: specs.specLevel1} : null) var chosenSpecId = $('#chosenSpecId').val()
$specSelect2.select2('data', specs.specLevel2 ? {id: specs.specLevel2.id, text: specs.specLevel2.name, origItem: specs.specLevel2} : null)
$specSelect3.select2('data', specs.specLevel3 ? {id: specs.specLevel3.id, text: specs.specLevel3.name, origItem: specs.specLevel3} : null) if (chosenSpecId) {
$specSelect4.select2('data', specs.specLevel4 ? {id: specs.specLevel4.id, text: specs.specLevel4.name, origItem: specs.specLevel4} : null) $.ajax({url: '/api/specializations/' + chosenSpecId + '/', method: 'GET'})
.then(function(spec) {
return updateSpecializationWidgets(spec)
}) })
}) }
})
$specSelects.on('change', function($evt) {
updateSpecializationWidgets($evt.added.origItem)
})
function updateSpecializationWidgets(spec) {
return getSpecializationTree(spec).then(function(specs) {
var specLevel1 = specs.specLevel1
var specLevel2 = specs.specLevel2
var specLevel3 = specs.specLevel3
var specLevel4 = specs.specLevel4
var chosenSpecId = specs.chosenSpecId
$specSelect1.select2('data', specLevel1 ? {id: specLevel1.id, text: specLevel1.name, origItem: specLevel1} : null)
$specSelect2.select2('data', specLevel2 ? {id: specLevel2.id, text: specLevel2.name, origItem: specLevel2} : null)
$specSelect3.select2('data', specLevel3 ? {id: specLevel3.id, text: specLevel3.name, origItem: specLevel3} : null)
$specSelect4.select2('data', specLevel4 ? {id: specLevel4.id, text: specLevel4.name, origItem: specLevel4} : null)
$('#chosenSpecId').val(chosenSpecId)
})
}
function getSpecializationTree(spec) { function getSpecializationTree(spec) {
var specLevel1, specLevel2, specLevel3, specLevel4 var specLevel1, specLevel2, specLevel3, specLevel4
specLevel1 = specLevel2 = specLevel3 = specLevel4 = null specLevel1 = specLevel2 = specLevel3 = specLevel4 = null
var chosenSpecId = ''
if (spec.level === 1) { if (spec.level === 1) {
specLevel1 = spec specLevel1 = spec
return $.when({specLevel1: specLevel1, specLevel2: specLevel2, specLevel3: specLevel3, specLevel4: specLevel4}) chosenSpecId = spec.id
return $.when({
specLevel1: specLevel1,
specLevel2: specLevel2,
specLevel3: specLevel3,
specLevel4: specLevel4,
chosenSpecId: chosenSpecId,
})
} else if (spec.level === 2) { } else if (spec.level === 2) {
specLevel2 = spec specLevel2 = spec
chosenSpecId = spec.id
return $.ajax({url: '/api/specializations/' + specLevel2.parent.id + '/', method: 'GET'}) return $.ajax({url: '/api/specializations/' + specLevel2.parent.id + '/', method: 'GET'})
.then(function(spec) { .then(function(spec) {
specLevel1 = spec specLevel1 = spec
return {specLevel1: specLevel1, specLevel2: specLevel2, specLevel3: specLevel3, specLevel4: specLevel4}
return {
specLevel1: specLevel1,
specLevel2: specLevel2,
specLevel3: specLevel3,
specLevel4: specLevel4,
chosenSpecId: chosenSpecId,
}
}) })
} else if (spec.level === 3) { } else if (spec.level === 3) {
specLevel3 = spec specLevel3 = spec
chosenSpecId = spec.id
return $.ajax({url: '/api/specializations/' + specLevel3.parent.id + '/', method: 'GET'}) return $.ajax({url: '/api/specializations/' + specLevel3.parent.id + '/', method: 'GET'})
.then(function(spec) { .then(function(spec) {
@ -92,11 +129,19 @@ function getSpecializationTree(spec) {
return $.ajax({url: '/api/specializations/' + specLevel2.parent.id + '/', method: 'GET'}) return $.ajax({url: '/api/specializations/' + specLevel2.parent.id + '/', method: 'GET'})
.then(function(spec) { .then(function(spec) {
specLevel1 = spec specLevel1 = spec
return {specLevel1: specLevel1, specLevel2: specLevel2, specLevel3: specLevel3, specLevel4: specLevel4}
return {
specLevel1: specLevel1,
specLevel2: specLevel2,
specLevel3: specLevel3,
specLevel4: specLevel4,
chosenSpecId: chosenSpecId,
}
}) })
}) })
} else if (spec.level === 4) { } else if (spec.level === 4) {
specLevel4 = spec specLevel4 = spec
chosenSpecId = spec.id
return $.ajax({url: '/api/specializations/' + specLevel4.parent.id + '/', method: 'GET'}) return $.ajax({url: '/api/specializations/' + specLevel4.parent.id + '/', method: 'GET'})
.then(function(spec) { .then(function(spec) {
@ -109,7 +154,14 @@ function getSpecializationTree(spec) {
return $.ajax({url: '/api/specializations/' + specLevel2.parent.id + '/', method: 'GET'}) return $.ajax({url: '/api/specializations/' + specLevel2.parent.id + '/', method: 'GET'})
.then(function(spec) { .then(function(spec) {
specLevel1 = spec specLevel1 = spec
return {specLevel1: specLevel1, specLevel2: specLevel2, specLevel3: specLevel3, specLevel4: specLevel4}
return {
specLevel1: specLevel1,
specLevel2: specLevel2,
specLevel3: specLevel3,
specLevel4: specLevel4,
chosenSpecId: chosenSpecId,
}
}) })
}) })
}) })

@ -4,6 +4,7 @@ from django.forms.models import inlineformset_factory
from mptt.forms import TreeNodeChoiceField from mptt.forms import TreeNodeChoiceField
from .models import Project, ProjectFile, Portfolio, Answer, Realty, PortfolioPhoto, Stage, Specialization from .models import Project, ProjectFile, Portfolio, Answer, Realty, PortfolioPhoto, Stage, Specialization
from common.models import Location
from users.models import User from users.models import User
@ -52,7 +53,7 @@ class CustomerProjectEditForm(forms.ModelForm):
self.fields['realty'].empty_label = 'Создать новый' self.fields['realty'].empty_label = 'Создать новый'
self.fields['specialization'].queryset = Specialization.objects.exclude(id=1) self.fields['specialization'].queryset = Specialization.objects.root_nodes()[0].get_descendants()
self.fields['specialization'].widget.attrs = {'class': '-spec-select', 'style': 'width: 100%'} self.fields['specialization'].widget.attrs = {'class': '-spec-select', 'style': 'width: 100%'}
if self.instance.pk: if self.instance.pk:
@ -78,6 +79,8 @@ class RealtyForm(forms.ModelForm):
def __init__(self, *args, **kwargs): def __init__(self, *args, **kwargs):
self.request = kwargs.pop('request') self.request = kwargs.pop('request')
super().__init__(*args, **kwargs) super().__init__(*args, **kwargs)
self.fields['location'].queryset = Location.objects.root_nodes()[0].get_descendants()
class Realty1Form(forms.Form): class Realty1Form(forms.Form):
@ -131,20 +134,6 @@ class StageForm(forms.ModelForm):
PortfolioPhotoFormSet = inlineformset_factory(Portfolio, PortfolioPhoto, fields=('img',)) PortfolioPhotoFormSet = inlineformset_factory(Portfolio, PortfolioPhoto, fields=('img',))
# class CustomerProjectEditForm(forms.ModelForm):
# pk = forms.ModelChoiceField(queryset=Project.objects.none())
#
# class Meta:
# model = Project
# fields = '__all__'
#
# def __init__(self, *args, **kwargs):
# self.req = kwargs.pop('req')
# super().__init__(*args, **kwargs)
#
# self.fields['pk'].queryset = self.req.user.projects.filter(state='active')
class CustomerProjectTrashForm(forms.Form): class CustomerProjectTrashForm(forms.Form):
pk = forms.ModelChoiceField(queryset=Project.objects.none()) pk = forms.ModelChoiceField(queryset=Project.objects.none())

@ -82,23 +82,6 @@
<div class="col-lg-3"></div>--> <div class="col-lg-3"></div>-->
</div> </div>
<div class="polsF1 disTab"> <div class="polsF1 disTab">
{# <div class="col-lg-3">#}
{# {{ form.specialization }}#}
{# </div>#}
{# <div class="col-lg-3">#}
{# <select class="-spec-select -spec-select-level-1" style="width: 100%"></select>#}
{# </div>#}
{# <div class="col-lg-3">#}
{# <select class="-spec-select -spec-select-level-2" style="width: 100%"></select>#}
{# </div>#}
{# <div class="col-lg-3">#}
{# <select class="-spec-select -spec-select-level-3" style="width: 100%"></select>#}
{# </div>#}
{# <div class="col-lg-3">#}
{# <select class="-spec-select -spec-select-level-4" style="width: 100%"></select>#}
{# </div>#}
<div class="col-lg-3"> <div class="col-lg-3">
<input type='hidden' class="-spec-select -spec-select-level-1" style="width: 100%"> <input type='hidden' class="-spec-select -spec-select-level-1" style="width: 100%">
</div> </div>
@ -114,6 +97,8 @@
<div class="col-lg-3"> <div class="col-lg-3">
<input type='hidden' class="-spec-select -spec-select-level-4" style="width: 100%"> <input type='hidden' class="-spec-select -spec-select-level-4" style="width: 100%">
</div> </div>
<input type="hidden" id="chosenSpecId" name="{{ form.specialization.html_name }}" value="{{ form.specialization.value }}">
</div> </div>
<div class="titleF1 titleF2 disTab"> <div class="titleF1 titleF2 disTab">
<div class="col-lg-12">Бюджет <span style="color: red">{{ form.budget.errors.as_text }}</span></div> <div class="col-lg-12">Бюджет <span style="color: red">{{ form.budget.errors.as_text }}</span></div>

@ -91,20 +91,22 @@
</div> </div>
<div class="polsF1 disTab"> <div class="polsF1 disTab">
<div class="col-lg-3"> <div class="col-lg-3">
{{ form.specialization }} <input type='hidden' class="-spec-select -spec-select-level-1" style="width: 100%">
</div> </div>
<div class="col-lg-3"> <div class="col-lg-3">
<select class="selectpicker" disabled> <input type='hidden' class="-spec-select -spec-select-level-2" style="width: 100%">
</select>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-3">
<select class="selectpicker" disabled> <input type='hidden' class="-spec-select -spec-select-level-3" style="width: 100%">
</select>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-3">
<select class="selectpicker" disabled> <input type='hidden' class="-spec-select -spec-select-level-4" style="width: 100%">
</select>
</div> </div>
<input type="hidden" id="chosenSpecId" name="{{ form.specialization.html_name }}" value="{{ form.specialization.value }}">
</div> </div>
<div class="titleF1 titleF2 disTab"> <div class="titleF1 titleF2 disTab">
<div class="col-lg-12">Бюджет <span style="color: red">{{ form.budget.errors.as_text }}</span></div> <div class="col-lg-12">Бюджет <span style="color: red">{{ form.budget.errors.as_text }}</span></div>

Loading…
Cancel
Save