We Keep Coding

Lightning Web Component setting dynamic style not working as expected

I'm currently trying to render a specific class across two lightning-badge components that is suppose to change both badges from inverse to success, but am getting this instead:
When the value on the left badge equals the value on the right (so in this case both are 3), they should both be green, otherwise they should both be grey. They should never be seperate colours.
The value on the left increases as the user saves a record and is checked on status of "Completed". For some reason only the class on the second badge is being updated with the new class that includes slds-theme_success. I may be missing something small, but just haven't been able to figure it out. Please see code below:
badgeClass = "slds-badge_inverse slds-var-m-horizontal_x-small slds-col";
get patientsCompleted() {
if(this.records) {
let completedArr = this.records.filter(value => value.fields.Status__c.value == "Completed");
if(completedArr.length === this.patientsTotal) {
this.badgeClass = "slds-badge_inverse slds-theme_success slds-var-m-horizontal_x-small slds-col";
}
return completedArr.length;
}
};
get patientsTotal(){
if(this.records) {
return this.records.length;
}
};
<span class="slds-col_bump-left">
<div class="slds-grid slds-gutters">
<lightning-badge class={badgeClass} label={patientsCompleted}></lightning-badge>
<div class="slds-col"> of </div>
<lightning-badge class={badgeClass} label={patientsTotal}></lightning-badge>
</div>
</span>

Have you tried moving badgeClass to a getter? Something like this:
get patientsCompleted() {
if(this.records) {
let completedArr = this.records.filter(value => value.fields.Status__c.value == "Completed");
// No longer needed
// if(completedArr.length === this.patientsTotal) {
// this.badgeClass = "slds-badge_inverse slds-theme_success slds-var-m-horizontal_x-small slds-col";
// }
return completedArr.length;
}
};
get patientsTotal(){
if(this.records) {
return this.records.length;
}
};
get badgeClass() {
let baseClass = "slds-badge_inverse slds-var-m-horizontal_x-small slds-col";
return this.patientsCompleted === this.patientsTotal ? `${baseClass} slds-theme_success` : `${baseClass}`
}
I suspect LWC field tracking has some precautionary mechanism and didn't trigger the update.
I am not sure but perhaps if 0 records are available you want the badges to remain gray? In that case include this.patientsTotal > 0 in the get badgeClass() {...}.
Happy coding.

How to hide row after changing status in angularjs

I'm now trying to hide clicked row after changing status in angularjs. Here is my coding and please let me know how to do it?
table.table
tr(data-ng-repeat="application in job.applications", ng-hide="application.hideApplication")
td.status
div.bold #{getMessage('Change Status:')}
div.normal
a(ng-class="app_status === 'shortlist' ? 'admin_edit_bold' : 'admin_edit_normal'", ng-click="changeApplicationStatus(application.id, 'shortlist', application)") #{getMessage('Shortlist')}
td.rating
div(ng-init='rating = application.app_rating')
.star-rating(star-rating='', rating-value='rating', data-max='5', on-rating-selected='rateFunction(application.id, rating)')
Here is controllerjs.
$scope.changeApplicationStatus = function (appId, app_status, application) {
return jobsService.changeApplicationStatus(appId, app_status).then(
function () {
application.hideApplication = false;
}
);
};

Put this attribute on whichever element you're wanting to show/hide
ng-hide="application.hideApplication"
Edit subsequent to comment:
That attribute wouldn't work on the same element as the ng-repeat, I don't think the application variable would be in scope...
Instead, you could change your repeat to:
application in job.applications | filter: { hideApplication : false }

How to create Undo-Redo in kineticjs?

Is there any simple way how to create undo redo function in Kineticjs ?
I have found a Undo Manager for HTML 5 in https://github.com/ArthurClemens/Javascript-Undo-Manager, but I don't know how to put in Kineticjs, please help me.
thank you.

I was able to implement a simple solution based on a post by Chtiwi Malek at CodiCode. I also used some of the code from this problem as an example to draw rectangles, so credits go to them and Chtiwi.
The only difference in my solution is I used toJSON() to store each layer state in an array instead of toDataURL() on the canvas. I think toJSON() is needed over toDataURL() to be able to serialize all the data necessary to store each action on the canvas, but I'm not 100% on this so if someone else knows please leave a comment.
function makeHistory() {
historyStep++;
if (historyStep < history.length) {
history.length = historyStep;
}
json = layer.toJSON();
history.push(json);
}
Call this function everytime you want to save a step to undo or redo. In my case, I call this function on every mouseup event.
Bind these 2 functions to the Undo/Redo events.
function undoHistory() {
if (historyStep > 0) {
historyStep--;
layer.destroy();
layer = Kinetic.Node.create(history[historyStep], 'container')
stage.add(layer);
}
}
function redoHistory() {
if (historyStep < history.length-1) {
historyStep++;
layer.destroy();
layer = Kinetic.Node.create(history[historyStep], 'container')
stage.add(layer);
}
}
Here's the jsfiddle. Don't forget to initialize the array and step counter up top. Good luck!

I am not familiar with KineticJS, but the approach should be similar to the provided demo (that also uses a canvas).
Perhaps another example helps. Let's say I have an app to create/move/delete colored shapes that represent musical notes. I have a way to click-drag and highlight a selection of notes. Pressing Delete on the keyboard invokes the function onDeleteGroup:
onDeleteGroup: function(gridModel) {
// collect all notes in an array
// ...
this._deleteGroup(notes);
this.undoManager.register(
this, this._createGroup, [notes], 'Undo delete',
this, this._deleteGroup, [notes], 'Redo delete'
);
}
All notes are deleted, and 2 methods are registered with the undo manager:
The undo function (undo of delete will be create)
The redo function (after undo/create will be delete again)
Both functions are straightforward:
_deleteGroup:function(notes) {
// removes each note from the model
// thereby removing them from the canvas
// ...
}
_createGroup:function(notes) {
// add each note to the model
// thereby adding them to the canvas
// ...
}
As you can see, the data object (array of notes) is passed around for creation and deleting. You can do the same for manipulating singular objects.

i have written a class for the functionality:
http://www.sebastianviereck.de/en/redo-undo-class-kinetic-js/

To solve event listeners problem, work on by making clones
$scope.makeHistory=function() {
$scope.historyStep++;
if ($scope.historyStep < $scope.history.length) {
$scope.history.length = $scope.historyStep;
}
var layerC = $scope.topLayer.clone();
$scope.history.push(layerC);
};
$scope.undoObject = function(){
if($scope.historyStep > 0) {
$scope.historyStep--;
$scope.topLayer.destroy();
if($scope.historyStep==0){
$scope.topLayerAdd(2); // will put empty layer
}
else{
var layer = $scope.history[$scope.historyStep-1].clone();
$scope.topLayerAdd(1,layer);
}
$scope.topLayer.draw();
}
};
$scope.redoObject = function(){
if($scope.historyStep <= $scope.history.length-1) {
$scope.historyStep++;
$scope.topLayer.destroy();
var layer = $scope.history[$scope.historyStep-1].clone();
if($scope.historyStep==0){
$scope.topLayerAdd(2); // will put empty layer
}
else{
$scope.topLayerAdd(1,layer);
}
$scope.topLayer.draw();
}
};
works perfectly for me.

Changing Tab on Image Click

I try for some time now to set the active Tab of this theme when the user clicks an image (above the tabs).
http://www.elegantthemes.com/preview/Nova/
I found the normal tab change code in the scripts.php, but I have no idea of how to change it to make it work with clicking any image that are above the tabs.
$service_li.find('a').click(function(){
var $a = jQuery(this),
next_tab = $a.parent('li').prevAll().length,
next_tab_height = $service_tabs.find('>div').eq(next_tab).outerHeight();
if ( next_tab != active_tab ) {
$service_tabs.css({height:next_tab_height});
$service_div.filter(':visible')
.animate( {opacity: 'hide'},500, function(){
jQuery(this).parent().find('>div').eq(next_tab).animate( {opacity: 'show'},500 );
} )
;
$service_li.removeClass(active_tabstate).filter(':eq('+next_tab+')').addClass(active_tabstate);
active_tab = next_tab;
}
return false;
}).hover(function(){
if ( !jQuery(this).parent('li').hasClass(active_tabstate) && !is_ie ) jQuery(this).fadeTo('slow',.7);
}, function(){
if (!is_ie) jQuery(this).fadeTo('slow',1);
});
}
Maybe someone can help out ?

I don't quite understand what or better yet, why you've conjured that thing over there, but i would use jQuery Tabs, so you can easily access the tab object by entering the id in the URL (firefox only) or by using something like.. .tabs( "select" , index ) , you can find more documentation in the URL above.

TIBCO GI + JAVASCRIPT

How reset label property.
It means, initially we set the cursor property as #Hand Pointer, then i want to change cursor property value as reset. i should not get hand symbol while doing some other operation. it should be fully disabled.
i tried one way but its not working.
function disableCancelLbl() {
log.info("inside disableCancelLbl");
var lblCancel = createCustomer.getServer().getJSXByName("lbl_ctId_cancel");
lblCancel.setEvent("", jsx3.gui.Interactive.JSXCLICK);
lblCancel.setClassName("buttonTextStyleOff");
lblCancel.setCursor("default",true);
log.info(lblCancel.getCursor());
lblCancel.repaint();
//reset(lblCancel.getCursor());
log.info(lblCancel.getCursor());
}
after repainting, again its changing to hand pointer.

Here's what I use to set/reset the cursor on a button. The setCursor methods seem to work, but the reset to default doesn't work for Chrome :-(
rsh.setWaitCursor = function(button)
{
button.setEnabled(jsx3.gui.Form.STATEDISABLED); button.repaint();
// WaitCursor reset not working in Chrome !!
// 'root' not overwriting wait cursor !
if( !rsh.isChrome ) {
button.setCursor("wait",true);
}
}
rsh.resetWaitCursor = function(button)
{
button.setEnabled(jsx3.gui.Form.STATEENABLED); button.repaint();
// WaitCursor reset not working in Chrome !!
if( !rsh.isChrome ) {
button.setCursor("default",true);
}
}