Skip to content

Commit

Permalink
Allows users to manage resource models and their corresponding cards.…
Browse files Browse the repository at this point in the history 
… re #4357
  • Loading branch information
@chiatt
chiatt committed Dec 22, 2018
1 parent f7921f0 commit 5ec83d1
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 170 deletions.
126 changes: 62 additions & 64 deletions arches/app/media/js/viewmodels/mobile-survey.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ define([
var MobileSurveyViewModel = function(params) {
var self = this;
this.dateFormat = 'YYYY-MM-DD';
this.allResources = params.resources;

this.identityList = new IdentityList({
items: ko.observableArray(params.identities)
Expand All @@ -45,7 +46,7 @@ define([

this.mobilesurvey = new MobileSurveyModel({source: params.mobilesurvey, identities: params.identities});

this.getRootCards = function(r) {
this.getRootCards = function(allcards) {
var subCardIds = [];
var rootCards;
var getSubCardIds = function(cards){
Expand All @@ -58,8 +59,9 @@ define([
}
});
};
getSubCardIds(r.cards);
rootCards = r.cards.filter(function(card){
getSubCardIds(allcards);

rootCards = allcards.filter(function(card){
var isRootCard = _.contains(subCardIds, card.cardid) === false;
if (isRootCard) {
card.approved = ko.observable(_.contains(self.mobilesurvey.cards(), card.cardid));
Expand All @@ -72,81 +74,77 @@ define([
return ko.observableArray(rootCards);
};

_.each(params.resources, function(r){
this.updateResourceCards = function(resource){
$.ajax({
url: arches.urls.resource_cards.replace('//', '/' + resource.id + '/')
})
.done(function(data){
var rootCards = self.getRootCards(data.cards);
resource.cards(ko.unwrap(rootCards));
})
.fail(function(data){console.log('card request failed', data);});
};

this.initializeResource = function(r) {
r.istopnode = false;
r.childNodes = ko.observableArray([]);
r.pageid = 'resourcemodel';
r.selected = ko.observable(false);
r.namelong = 'Model Details';
r.description = 'Summary of how this model participates in the survey';
r.cards = self.getRootCards(r);
});

this.resourceList = ko.observableArray(params.resources);

this.processResource = function(data) {
self.resourceList.initCards(data.cards);
self.resourceList.selected().cards(data.cards);
self.flattenCards(self.resourceList.selected());
r.cards = self.getRootCards(r.cards);
r.added = ko.observable(r.cards().length > 0);
r.hasApprovedCards = ko.pureComputed(function(){
return r.cards().filter(function(c){return ko.unwrap(c.approved) === true;}).length > 0;
});
r.added.subscribe(function(val){
if (val === true && r.cards().length === 0) {
self.updateResourceCards(r);
} else if (val === false) {
r.cards().forEach(function(c){
c.approved(false);
});
}
});
};

this.processResources = function(data) {
if (_.some(self.resourceList.items(), function(r) {return data.id === r.id;}) === false) {
data.cards = ko.observableArray(data.cards);
data.cardsflat = ko.observableArray();
self.resourceList.initCards(data.cards);
self.resourceList.items.push(data);
}
};
_.each(this.allResources, this.initializeResource);

this.getMobileSurveyResources = function(){
var successCallback = function(data){
self.mobilesurvey.collectedResources(true);
_.each(data.resources, self.processResources);
_.each(self.resourceList.items(), self.flattenCards);
};
if (!this.mobilesurvey.collectedResources()) {
$.ajax({
url: arches.urls.mobile_survey_resources(this.mobilesurvey.id)
})
.done(successCallback)
.fail(function(data){console.log('request failed', data);});
}
};
this.selectedResourceIds = ko.computed({
read: function() {
return this.allResources.filter(function(r) {
if (r.added()) {
return r;
}
}).map(function(rr){return rr.id;});
},
write: function(value) {
_.each(this.allResources, function(r){
r.added(_.contains(value, r.id));
});
},
owner: this
});

this.resourceList.subscribe(function(val){
if (val) {
if (ko.unwrap(val.cards).length === 0) {
$.ajax({
url: arches.urls.resource_cards.replace('//', '/' + val.id + '/')
})
.done(self.processResource)
.fail(function(data){console.log('card request failed', data);});
}
}
}, self);

// viewModel.selectedResourceIds = ko.computed(function(val){
// return [];
// });
//
this.selectedResources = ko.computed(function(){
var resources = params.resources.filter(function(r){
if (r.cards().length > 0) {
this.selectedResources = ko.pureComputed(function(){
var resources = this.allResources.filter(function(r){
if (r.added() || (r.cards().length > 0 && r.hasApprovedCards())) {
return r;
}
});
return resources;
});

this.select2Config = {
clickBubble: true,
disabled: false,
data: {results: params.resources.map(function(r){return {text: r.name, id: r.id};})},
value: ko.observableArray([]),
multiple: true,
placeholder: "select a model",
allowClear: true
}, this);

this.getSelect2Config = function(){
return {
clickBubble: true,
disabled: false,
data: {results: this.allResources.map(function(r){return {text: r.name, id: r.id};})},
value: this.selectedResourceIds,
multiple: true,
placeholder: "select a model",
allowClear: true
};
};

this.loading = ko.observable(false);
Expand Down
107 changes: 1 addition & 106 deletions arches/app/templates/views/mobile-survey-designer.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,115 +364,10 @@ <h1 class="page-header text-overflow mobile-designer-title">
<div class="">
<input style="width:30%; display:inline-block;"
data-bind="select2Query: {
select2Config: select2Config
select2Config: getSelect2Config()
}">
</div>
<div>
<div class="flex relative">

<div class="msm-resource-panel" style="" data-bind="with:resourceList">
{% include 'views/mobile-survey-manager/resource-list.htm' %}
</div>

<div class="msm-resource-cards" data-bind="style: {top: ((resourceList.selectedIndex() * 60 + 120) + (resourceList.selectedIndex() * 15.0)) + 'px' }, visible: resourceList.selected() && resourceList.hideResourceList() != true">

<div class="relative">

<p class="mpm-instructions">
Drag &amp; drop the forms you want in your project from the list on the left to the "Selected forms" column. <strong> Note that the order of the forms in the "Selected forms" column determines the order of display in the mobile app.</strong>
</p>

<!--ko if: resourceList.selected() -->
<!--ko if: resourceList.selected().cards().length > 0 -->
<div class="mpm-card-container">
<div class="mpm-card-list available">
<div class="mpm-selector-header relative">
<input class="form-control input-lg mpm-form-finder" placeholder="{% trans 'find a form...' %}" type="text" data-bind="value: resourceList.cardFilter, valueUpdate: 'keyup'">

<!-- select all switch -->
<div class="mpm-selector-btns">
<a class="" data-bind="click: function(val) {mobilesurvey.addAllCardsByResource(val)}">{% trans 'Select all' %}</a>
</div>
</div>

<div class="mpm-card-list-items">
<div data-bind="sortable: {data:resourceList.selected().cards, afterMove: mobilesurvey.updateUnapproved, addToSelf: true}" class="ko_container ui-sortable">
<div class="list-group-item get-user-detail" data-bind="click: function(){ $data.expanded(!$data.expanded()) }, visible: ($data.filtered() === false && $data.approved() === false)">
<div class="mpm-user-title mpm-user-name">
<h4 data-bind='text: $data.name'></h4>
</div>

<p class="mpm-user-subtitle resource">
<span>{% trans 'Fields:' %}</span><span class="mpm-widget-labels" data-bind="text: $data.widgetlabels"></span>
</p>

<div class="mpm-user-summary" data-bind="css: {'expanded': $data.expanded()}">
<!-- ko foreach: { data:$data.nodes, as: 'node'} -->
<!--ko if: node.datatype != 'semantic' -->
<div class="mpm-model-detail-panel">
<div class="mpm-node-name" data-bind="text:node.name"></div>
<ul class="mpm-node-detail-metadata">
<li class=""><span>{% trans 'Type: ' %}</span><span data-bind="text:node.datatype"></span></li>
<li class=""><span>{% trans 'Required: ' %}</span><span data-bind="text: node.isrequired ? 'Yes' : 'No'"></span></li>
</ul>
</div>
<!--/ko-->
<!--/ko-->
</div>

</div>
</div>
</div>
</div>

<div class="mpm-card-list approved">
<div class="mpm-selector-header relative">
<div class="mpm-selector-header-txt">
<strong>{% trans 'Selected forms' %}</strong>

<!-- remove all switch -->
<span class="mpm-select-switch-label">
<a class="pad-lft" data-bind="click: function(val) {mobilesurvey.removeAllCardsByResource(val)}">{% trans 'Remove all' %}</a>
</span>
</div>
</div>

<div class="mpm-card-list-items">
<div data-bind="sortable: {data: resourceList.selected().cards, afterMove: mobilesurvey.updateApproved, addToSelf: true}" class="ko_container ui-sortable" style="min-height:100%">

<div class="list-group-item get-user-detail" data-bind="click: function(){ $data.expanded(!$data.expanded()) }, visible: ($data.filtered() === false && $data.approved() === true)">
<div class="mpm-user-title mpm-user-name">
<h4 data-bind='text: $data.name'></h4>
</div>

<p class="mpm-user-subtitle resource">
<span>{% trans 'Fields:' %}</span>
<span class="mpm-widget-labels" data-bind="text: $data.widgetlabels"></span>
</p>

<div class="mpm-user-summary" data-bind="css: {'expanded': $data.expanded()}">
<!-- ko foreach: { data:$data.nodes, as: 'node'} -->
<!--ko if: node.datatype != 'semantic' -->
<div class="mpm-model-detail-panel">
<div class="mpm-node-name" data-bind="text:node.name"></div>
<ul class="mpm-node-detail-metadata">
<li class=""><span>{% trans 'Type: ' %}</span><span data-bind="text:node.datatype"></span></li>
<li class=""><span>{% trans 'Required: ' %}</span><span data-bind="text: node.isrequired ? 'Yes' : 'No'"></span></li>
</ul>
</div>
<!--/ko-->
<!--/ko-->
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ko-->
<!--/ko-->
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 5ec83d1

Please sign in to comment.