Rewrite sync to use new features

This commit is contained in:
Rich Lott / Artful Robot 2025-02-24 13:16:05 +00:00
parent b0983603e5
commit 16f2b6235d
7 changed files with 502 additions and 365 deletions

View file

@ -15,6 +15,7 @@ crm-contact-category-settings .crm-contact-cats-move-target {
transition: opacity 0.3s ease, transform 0.3s ease, display 0.001s allow-discrete, max-height 0.3s ease;
transform-origin: top left;
display: none;
text-align: right;
}
crm-contact-category-settings .moving .crm-contact-cats-move-target {
display: block;

View file

@ -15,21 +15,44 @@
// supposed to use for components.
// v: '<'
},
controller: function($scope, $timeout, crmApi4, $document) {
controller: function($scope, $timeout, crmApi4, crmStatus, $document) {
var ts = ($scope.ts = CRM.ts(null)),
ctrl = this;
// this.$onInit gets run after the this controller is called, and after the bindings have been applied.
this.$onInit = async function() {
ctrl.saved = false;
ctrl.dirty = 'pristine'; //pristine|dirty
ctrl.view = 'list';
ctrl.moveIdx = null;
ctrl.categoryToEdit = null;
ctrl.categoryDefinitions = null;
ctrl.categoryDefinitions = await crmApi4("ContactCategoryDefinition", 'get', { orderBy: { label: 'ASC' }, withLabels: true });
updateOrders();
console.log("Got", ctrl.categoryDefinitions);
$scope.$digest();
/**
* Presentation order is by label. Promoting "0123 label" type labels.
*
* We set execution_order to the array index to keep things simpler.
*/
function updateOrders() {
// re-set execution_order.
ctrl.categoryDefinitions.forEach((item, idx) => {
item.execution_order = idx;
});
const po = ctrl.categoryDefinitions.slice();
po.sort((a, b) => {
if (a.label < b.label) return -1;
if (a.label > b.label) return 1;
return (a.execution_order ?? 1) - (b.execution_order ?? 1);
});
ctrl.presentationOrder = po;
}
ctrl.edit = idx => {
if (idx === -1) {
// New item.
@ -42,7 +65,8 @@
// Create a blank
ctrl.categoryToEdit = {
idx: ctrl.categoryDefinitions.length,
id: 0,
execution_order: ctrl.categoryDefinitions.length,
label: '',
search_type: 'search',
search_data: { saved_search_id: null },
@ -52,7 +76,7 @@
};
}
else {
ctrl.categoryToEdit = Object.assign({idx}, JSON.parse(JSON.stringify(ctrl.categoryDefinitions[idx])));
ctrl.categoryToEdit = Object.assign({}, JSON.parse(JSON.stringify(ctrl.categoryDefinitions[idx])));
}
ctrl.view = 'edit';
};
@ -64,7 +88,10 @@
}
ctrl.categoryDefinitions.splice(idx, 0, item);
ctrl.moveIdx = null;
updateOrders();
$ctrl.dirty = 'dirty';
};
ctrl.deleteCategory = idx => {
if (!confirm(ts(
'Confirm deleting category %1. You will lose history related to this category. Sure?',
@ -74,36 +101,36 @@
}
ctrl.categoryDefinitions[idx].deleted = true;
ctrl.categoryToEdit = null;
updateOrders();
ctrl.view = 'list';
ctrl.dirty = 'dirty';
};
ctrl.updateEditedThing = () => {
const edited = ctrl.categoryToEdit;
// @todo validate, e.g.
if (!ctrl.categoryToEdit.label) {
if (!edited.label) {
alert("No name");
return;
}
const search_data = ctrl.categoryToEdit.search_data;
console.log("search_data", search_data);
if (ctrl.categoryToEdit.search_type === 'group') {
const search_data = edited.search_data;
if (edited.search_type === 'group') {
// Only store what we need.
const {group_id} = search_data;
console.log("group_id", group_id, search_data);
ctrl.categoryToEdit.search_data = {group_id};
edited.search_data = {group_id};
}
else if (ctrl.categoryToEdit.search_type === 'search') {
else if (edited.search_type === 'search') {
const {saved_search_id} = search_data;
ctrl.categoryToEdit.search_data = {saved_search_id};
edited.search_data = {saved_search_id};
}
const edited = ctrl.categoryToEdit;
const idx = edited.idx;
delete(edited.idx);
const idx = edited.execution_order;
ctrl.categoryDefinitions[idx] = edited;
ctrl.categoryToEdit = null;
updateOrders();
ctrl.dirty = 'dirty';
ctrl.view = 'list';
console.log("done editing");
}
// We need to ensure the search_data object contains the fields required for the selected search_type
@ -121,74 +148,29 @@
}
};
ctrl.save = async () => {
ctrl.save = () => {
if (!confirm(ts("Confirm saving changes to categories? Note that categories will not be fully applied until tomorrow."))) { return; }
// Handle deletions first.
const deletedIds = ctrl.categoryDefinitions.filter(d => d.deleted && d.id > 0).map(d => d.id);
const chain = Promise.resolve();
if (deletedIds.length) {
chain.then(() => crmApi4('ContactCategoryDefinition', 'delete', { where: [ ['id', 'IN', deletedIds] ] }));
}
// Now enact the deletions on our local model.
ctrl.categoryDefinitions = ctrl.categoryDefinitions.filter(d => !d.deleted);
// Tidy execution_order
updateOrders();
if (ctrl.categoryDefinitions.length) {
chain.then(() => crmApi4('ContactCategoryDefinition', 'save', {records:ctrl.categoryDefinitions}));
}
chain.then(() => {
ctrl.dirty = 'pristine';
})
crmStatus({ start: ts('Saving...'), success: ts('Saved')}, chain);
};
// ctrl.deleteRow = idx => {
// ctrl.catmap.splice(idx, 1);
// };
// ctrl.getGroupsFor = idx => {
// let groupsInUse = ctrl.catmap.map(c => c.groupID);
// groupsInUse.splice(idx, 1);
// return ctrl.groups.filter(
// g => !groupsInUse.includes(g.id.toString())
// );
// };
// ctrl.save = async () => {
// console.log("save", ctrl.catmap);
// // reconstruct everything.
//
// const optValsRecords = [];
// ctrl.catmap.forEach(r => {
// if (!r.name || r.groupID === "") {
// return;
// }
// // Do we have an option value for this group ID?
// let c = various.cats.find(cat => cat.value == r.groupID);
// if (c) {
// if (c.label != r.name) {
// optValsRecords.push({
// id: c.id,
// label: r.name
// });
// }
// } else {
// optValsRecords.push({
// label: r.name,
// value: r.groupID,
// "option_group_id:name": "contact_categories"
// });
// }
// });
// console.log("optionValue updates", optValsRecords, ctrl.catmap);
// const updates = {
// saveSetting: [
// "Setting",
// "set",
// {
// values: {
// contact_categories: {
// groupIDs: ctrl.catmap.map(i => i.groupID),
// updateAfter: 0
// }
// }
// }
// ]
// };
// if (optValsRecords.length) {
// updates.saveOptions = [
// "OptionValue",
// "save",
// { records: optValsRecords }
// ];
// }
// await crmApi4(updates);
// console.log("saved", updates);
// ctrl.saved = true;
// $scope.$digest();
// };
};
// this.$onChange = function(changes) {
// // changes is object keyed by name what '<' binding changed in

View file

@ -1,149 +1,168 @@
<div ng-if="$ctrl.categoryDefinitions === null">
Loading...
</div>
<form ng-if="$ctrl.categoryDefinitions"
ng-show="$ctrl.view === 'list'"
crm-ui-id-scope>
<div id=bootstrap-theme>
<div ng-if="$ctrl.categoryDefinitions === null">
Loading...
</div>
<form ng-if="$ctrl.categoryDefinitions"
ng-show="$ctrl.view === 'list'"
crm-ui-id-scope
>
<!-- I can see use of
presentation order/grouping
short title, "amazing"
longer title/description. "regular givers who..."
-->
<!-- I can see use of
presentation order/grouping
short title, "amazing"
longer title/description. "regular givers who..."
-->
<ol class="crm-catmap {{$ctrl.moveIdx !== null ? 'moving' : ''}}" >
<li ng-repeat="(idx, row) in $ctrl.categoryDefinitions" class="{{idx === $ctrl.moveIdx ? 'being-moved' : ''}} {{row.deleted ? 'deleted' : ''}}">
<!-- higher idx : {{idx}} moveIdx {{$ctrl.moveIdx}} -->
<div class="crm-contact-cats-move-target" ng-show="(idx === 0 && $ctrl.moveIdx > 0)" >
<button ng-click="$ctrl.moveTo(0)" >{{ts('Move to here')}}</button>
</div>
<h2>{{ts('Execution order')}}</h2>
<p>{{ts('A contact is assigned the first category that matches according to the order defined here. Categories are presented in order of their label - see list below - so you may want to consider this when naming your categories.')}}</p>
<ol class="crm-catmap {{$ctrl.moveIdx !== null ? 'moving' : ''}}">
<li ng-repeat="(idx, row) in $ctrl.categoryDefinitions" class="{{idx === $ctrl.moveIdx ? 'being-moved' : ''}} {{row.deleted ? 'deleted' : ''}}">
<div class=panel>
<div class=panel-body>
<div class=panel-body>
<span style="color: {{row.color ? row.color : 'inherit'}};" >
<i ng-if="row.icon" class="crm-i {{row.icon}}" ></i>
{{row.label}}
</span>
<!-- button group? -->
<span>
<button ng-if="$ctrl.moveIdx === null && !row.deleted" ng-click="$ctrl.edit(idx)" >
<i class="fa-pencil crm-i"></i> {{ts('Edit')}}
</button>
<button ng-if="$ctrl.moveIdx === null && !row.deleted" ng-click="$ctrl.deleteCategory(idx)">
<i class="fa-trash crm-i"></i> {{ts('Delete')}}
</button>
<button ng-if="$ctrl.moveIdx === null && row.deleted" ng-click="row.deleted = false;$ctrl.dirty = 'dirty';">
<i class="fa-trash crm-i"></i> {{ts('Un-Delete')}}
</button>
<button ng-if="$ctrl.moveIdx === null && !row.deleted" ng-click="$ctrl.moveIdx = idx"
class="btn"
ng-disabled="$ctrl.categoryDefinitions.length === 1"
>
<i class="fa-arrows-up-down crm-i"></i> {{ts('Move')}}
</button>
<button ng-if="$ctrl.moveIdx !== null && idx === $ctrl.moveIdx"
class="btn btn-secondary"
ng-click="$ctrl.moveIdx = null" >
<i class="fa-circle-xmark crm-i"></i> {{ts('Cancel Move')}}
</button>
<button ng-click="$ctrl.moveTo(idx+1)" ng-show="$ctrl.moveIdx !== null && (idx === 0 && $ctrl.moveIdx > 0)" ><i class="fa-sort-up crm-i" ></i>{{ts('Before this')}}</button>
<button ng-click="$ctrl.moveTo(idx+1)" ng-show="$ctrl.moveIdx !== null && (idx + 1 < $ctrl.moveIdx || idx > $ctrl.moveIdx)"><i class="fa-sort-down crm-i" ></i>{{ts('After this')}}</button>
</span>
</div>
</div>
<!-- lower idx : {{idx}} moveIdx {{$ctrl.moveIdx}} -->
<!-- <div class="crm-contact-cats-move-target" ng-show="($ctrl.moveIdx < idx) || (idx +1 < $ctrl.moveIdx)" > -->
<!-- <button ng-click="$ctrl.moveTo(idx+1)" ><i class="fa-right-long crm-i" ></i>{{ts('Move to here')}}</button> -->
<!-- </div> -->
</li>
</ol>
<p>
<button ng-click="$ctrl.edit(-1)"
class="btn btn-secondary"
><i class="crm-i fa-add"></i> Add new category</button>
</p>
<p><button ng-click="$ctrl.save()" class="btn" ng-disabled="$ctrl.dirty === 'pristine'"><i class="crm-i fa-save"></i>
{{ts('Save changes')}}</button></p>
<div ng-if="$ctrl.saved" class="help">
Categories saved. Contacts will be updated shortly (when the next Scheduled
Job run happens).
</div>
<h2>Presentation order</h2>
<ol style="padding-left: 3ch;list-style: decimal;">
<li ng-repeat="(idx, row) in $ctrl.presentationOrder" >
<span style="color: {{row.color ? row.color : 'inherit'}};" >
<i ng-if="row.icon" class="crm-i {{row.icon}}" ></i>
{{row.label}}
</span>
</li>
</ol>
</form>
<!-- button group? -->
<span>
<button ng-if="$ctrl.moveIdx === null && !row.deleted" ng-click="$ctrl.edit(idx)" >
<i class="fa-pencil crm-i"></i> {{ts('Edit')}}
</button>
<button ng-if="$ctrl.moveIdx === null && !row.deleted" ng-click="$ctrl.deleteCategory(idx)">
<i class="fa-trash crm-i"></i> {{ts('Delete')}}
</button>
<button ng-if="$ctrl.moveIdx === null && row.deleted" ng-click="row.deleted = false;">
<i class="fa-trash crm-i"></i> {{ts('Un-Delete')}}
</button>
<button ng-if="$ctrl.moveIdx === null && !row.deleted" ng-click="$ctrl.moveIdx = idx" >
<i class="fa-pencil crm-i"></i> {{ts('Move')}}
</button>
<button ng-if="$ctrl.moveIdx !== null && idx === $ctrl.moveIdx" ng-click="$ctrl.moveIdx = null" >
<i class="fa-pencil crm-i"></i> {{ts('Cancel Move')}}
</button>
</span>
<form ng-show="$ctrl.view === 'edit'"
crm-ui-id-scope>
<div>
<h2 ng-if="$ctrl.categoryDefinitions.length > $ctrl.categoryToEdit.idx">{{ts('Edit category %1', {1 : $ctrl.categoryDefinitions[$ctrl.categoryToEdit.idx].label })}}</h2>
<h2 ng-if="$ctrl.categoryDefinitions.length == $ctrl.categoryToEdit.idx" >{{ts('Add new category')}}</h2>
<div crm-ui-field="{name: 'cc.label', title: ts('Category label'), required: 1}" >
<input
crm-ui-id="ci.label"
name="label"
ng-model="$ctrl.categoryToEdit.label"
class="crm-form-text"
placeholder="{{ts('0123 Super lovely supporters')}}"
style="width: 100%"
/>
</div>
</div>
<!-- lower idx : {{idx}} moveIdx {{$ctrl.moveIdx}} -->
<div class="crm-contact-cats-move-target" ng-show="($ctrl.moveIdx < idx) || (idx +1 < $ctrl.moveIdx)" >
<button ng-click="$ctrl.moveTo(idx+1)" >{{ts('Move to here')}}</button>
</div>
</li>
</ol>
<p>
<button ng-click="$ctrl.edit(-1)"><i class="crm-i fa-add"></i> Add new category</button>
</p>
<div crm-ui-field="{name: 'cc.color', title: ts('Color')}" >
<input
crm-ui-id="ci.color"
name="color"
type="color"
ng-model="$ctrl.categoryToEdit.color"
class="crm-form-color"
/>
</div>
<div crm-ui-field="{name: 'cc.icon', title: ts('Icon')}" >
<input
crm-ui-id="cc.icon"
crm-ui-icon-picker
ng-model="$ctrl.categoryToEdit.icon"
/>
</div>
<div crm-ui-field="{name: 'cc.description', title: ts('Description')}" >
<input
crm-ui-id="ci.description"
name="description"
ng-model="$ctrl.categoryToEdit.description"
class="crm-form-textarea"
style="width: 100%"
/>
</div>
<div crm-ui-field="{name: 'cc.search_type', title: ts('How are contacts identified?')}" >
<select
crm-ui-id="ci.search_type"
name="search_type"
ng-model="$ctrl.categoryToEdit.search_type"
ng-change="$ctrl.fixSearchData()"
>
<option value="search" >{{ts('Search Kit search')}}</option>
<option value="group" >{{ts('Group')}}</option>
<!-- future? <option value="sql_template" >{{ts('SQL template')}}</option> -->
</select>
</div>
<!-- fields for search kit -->
<div ng-if="$ctrl.categoryToEdit.search_type === 'search'" crm-ui-field="{name:'cc.saved_search_id', title: ts('Search Kit search')}" >
<input crm-ui-id='cc.saved_search_id' crm-entityref="{entity: 'SavedSearch', select: {allowClear:false}}"
ng-model="$ctrl.categoryToEdit.search_data.saved_search_id" />
</div>
<!-- fields for groups -->
<div ng-if="$ctrl.categoryToEdit.search_type === 'group'" crm-ui-field="{name:'cc.group_id', title: ts('Group')}" >
<input crm-ui-id='cc.group_id' crm-entityref="{entity: 'Group', select: {allowClear:false}}"
ng-model="$ctrl.categoryToEdit.search_data.group_id" />
</div>
<!-- type=button means when you hit Enter in an input above this button is skipped while it looks for the first submit button. -->
<button type=button ng-click="$ctrl.view = 'list'"
class="btn btn-secondary"
>Cancel</button>
<button ng-click="$ctrl.updateEditedThing()" >Done</button>
<p>
<button ng-click="$ctrl.save()"><i class="crm-i fa-save"></i> Save</button>
</p>
<div ng-if="$ctrl.saved" class="help">
Categories saved. Contacts will be updated shortly (when the next Scheduled
Job run happens).
</div>
</form>
<form ng-show="$ctrl.view === 'edit'"
crm-ui-id-scope>
<div>
<h2 ng-if="$ctrl.categoryDefinitions.length > $ctrl.categoryToEdit.idx">{{ts('Edit category %1', {1 : $ctrl.categoryDefinitions[$ctrl.categoryToEdit.idx].label })}}</h2>
<h2 ng-if="$ctrl.categoryDefinitions.length == $ctrl.categoryToEdit.idx">{{ts('Add new category')}}</h2>
<div crm-ui-field="{name: 'cc.label', title: ts('Category label'), required: 1}" >
<input
crm-ui-id="ci.label"
name="label"
ng-model="$ctrl.categoryToEdit.label"
class="crm-form-text"
placeholder="{{ts('0123 Super lovely supporters')}}"
style="width: 100%"
/>
</div>
<div crm-ui-field="{name: 'cc.color', title: ts('Color')}" >
<input
crm-ui-id="ci.color"
name="color"
type="color"
ng-model="$ctrl.categoryToEdit.color"
class="crm-form-color"
/>
</div>
<div crm-ui-field="{name: 'cc.icon', title: ts('Icon')}" >
<input
crm-ui-id="cc.icon"
crm-ui-icon-picker
ng-model="$ctrl.categoryToEdit.icon"
/>
</div>
<div crm-ui-field="{name: 'cc.description', title: ts('Description')}" >
<input
crm-ui-id="ci.description"
name="description"
ng-model="$ctrl.categoryToEdit.description"
class="crm-form-textarea"
style="width: 100%"
/>
</div>
<div crm-ui-field="{name: 'cc.search_type', title: ts('How are contacts identified?')}" >
<select
crm-ui-id="ci.search_type"
name="search_type"
ng-model="$ctrl.categoryToEdit.search_type"
ng-change="$ctrl.fixSearchData()"
>
<option value="search" >{{ts('Search Kit search')}}</option>
<option value="group" >{{ts('Group')}}</option>
<!-- future? <option value="sql_template" >{{ts('SQL template')}}</option> -->
</select>
</div>
<!-- fields for search kit -->
<div ng-if="$ctrl.categoryToEdit.search_type === 'search'" crm-ui-field="{name:'cc.saved_search_id', title: ts('Search Kit search')}" >
<input crm-ui-id='cc.saved_search_id' crm-entityref="{entity: 'SavedSearch', select: {allowClear:false}}"
ng-model="$ctrl.categoryToEdit.search_data.saved_search_id" />
</div>
<!-- fields for groups -->
<div ng-if="$ctrl.categoryToEdit.search_type === 'group'" crm-ui-field="{name:'cc.group_id', title: ts('Group')}" >
<input crm-ui-id='cc.group_id' crm-entityref="{entity: 'Group', select: {allowClear:false}}"
ng-model="$ctrl.categoryToEdit.search_data.group_id" />
</div>
<!-- type=button means when you hit Enter in an input above this button is skipped while it looks for the first submit button. -->
<button type=button ng-click="$ctrl.view = 'list'" >Cancel</button>
<button ng-click="$ctrl.updateEditedThing()" >Done</button>
</div>
</form>
</form>
</div>
<!-- <pre>{{ $ctrl.categoryToEdit }}</pre> -->