Hello Experts,
Issue:
I'm working with ESC portal. I've added a widget with the counters to my page.
The counter is not incrementing from ) even though multiple records are created by user.
Acceptance Criteria:
I want the counter on each of the widget should increment based on item count.
HTML:
<div ng-if="isLoading" class="my-items-container panel panel-default b panel-wrapper">
<div class="panel-heading b-b">
<h3 class="panel-title">{{::data.title}}</h3>
</div>
<div class="activity-check" ng-if="c.checkForData()">
<p class="no-items">${You don't have any items yet.}</p>
</div>
<div class="my-items-body panel-body" ng-class="c.primaryActivity ? '' : 'no-primary-activity'">
<div class="summary-view">
<a class="primary" ng-if="c.primaryActivity" ng-href="{{c.primaryActivity.itemUrl}}" target="{{c.primaryActivity.target}}" aria-label="{{c.primaryActivity.itemCount}} {{c.primaryActivity.itemName}} {{::data.title}}" ng-keydown="c.keyboardAction($event)">
<div class="primary-activity" ng-class=" c.primaryActivity.itemCount == 0 ? 'text-grey' : '' ">
<h3 class="primary-item-count" aria-label="{{c.primaryActivity.itemCount}} {{c.primaryActivity.itemName}}">{{c.primaryActivity.itemCount}}</h3>
<span class="primary-item-name" ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{c.primaryActivity.itemName}}">{{c.primaryActivity.itemName}}s</span>
</div>
</a>
<div class="secondary" ng-class="(c.primaryActivity) ? 'primary-width' : 'secondary-width'">
<div class="activity-container" ng-repeat="item in c.secondaryActivity track by $index">
<a class="secondary-activity" ng-class=" item.itemCount == 0 ? 'text-grey' : '' " ng-href="{{item.itemUrl}}" target="{{item.target}}" aria-label="{{item.itemCount}} {{item.itemName}} {{::data.title}}" ng-keydown="c.keyboardAction($event)">
<span class="secondary-item-count">{{item.itemCount}}</span>
<span class="secondary-item-name" ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{item.itemName}}">{{item.itemName}}</span>
</a>
</div>
</div>
</div>
<div class="list-view" ng-if="c.listViewData.length > 0">
<div class="header">
<h3 class="list-header">{{::data.list_title}}</h3>
<a class="view-all" ng-if="c.showViewAll" ng-href="{{c.primaryActivity.itemUrl}}" target="{{c.primaryActivity.target}}">${View all}
<i aria-hidden="true" class="right-arrow fa fa-chevron-right"></i>
</a>
</div>
<div class="card-container">
<a class="flex-item-card" ng-repeat="item in c.listViewData track by $index | limitTo:data.recordLimit" ng-href="{{item.itemUrl}}" target="{{item.target}}">
<div class="item-description"><span ng-if="item.badge" class="item-badge" ng-attr-style="background-color:{{item.badgeColor || ''}};color:{{item.badgeTextColor || ''}}">{{::item.badge}}</span></div>
<div class="card-image"> <img ng-if="item.image" class="image-item" aria-hidden="true" ng-src="{{item.image}}" />
<div ng-class="item.image ? 'card-text-container' : ''">
<div ng-if="item.title" class="item-title text-ellipsis-two-line text-ellipsis"><p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.title}}">{{::item.title}}</p> </div>
<div ng-if="item.description" class="item-description text-ellipsis-two-line text-ellipsis"><p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.description}}">{{::item.description}}</p> </div>
</div>
</div>
<div class="field-name">
<div ng-if="item.field1Value" class="item-field text-ellipsis-two-line text-ellipsis flex-grow" ng-class="item.field2Value ? 'fix-width' : 'full-fix-width'"> <p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.field1Label}}">{{::item.field1Label}}</p> </div>
<div ng-if="item.field2Value" class="item-field text-ellipsis-two-line text-ellipsis flex-grow" ng-class="item.field1Value ? 'fix-width' : 'full-fix-width'"> <p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.field2Label}}">{{::item.field2Label}}</p> </div>
</div>
<div class="field-value">
<div ng-if="item.field1Value" class="item-value field-container text-ellipsis" ng-class="item.field2Value ? 'fix-width' : 'full-fix-width'"> <p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.field1Value}}">{{::item.field1Value}}</p> </div>
<div ng-if="item.field2Value" class="item-value field-container text-ellipsis" ng-class="item.field1Value ? 'fix-width' : 'full-fix-width'"> <p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.field2Value}}">{{::item.field2Value}}</p> </div>
</div>
</a>
</div>
</div>
</div>
</div>
Client Script:
api.controller = function($scope, $window, $timeout) {
var c = this;
$scope.isLoading = false;
c.checkForData = function() {
if (!(c.primaryActivity) && !(c.secondaryActivity && c.secondaryActivity.length))
return true;
return false;
};
var changeCSS = function(element, css) {
Array.prototype.slice.call(document.querySelectorAll(element)).map(function(x) {
x.setAttribute("style", css);
});
};
var isSingleElement = function(selector) {
var elmnts = document.querySelectorAll(selector);
if (elmnts && elmnts.length === 1) {
return true;
}
return false;
};
//The purpose of this method is to ensure proper responsive behaviour of summary view on different scenarios.
var flexSummaryView = function() {
var summaryView = document.querySelector('.summary-view');
var listView = document.querySelector('.list-view');
var isSingleSecActivity = isSingleElement('.secondary-activity');
//There should not be a scenario where list view exists and summary view does not.
if(listView){
if(isSingleSecActivity){
changeCSS('.secondary','grid-template-columns: none');
changeCSS('.secondary-activity','justify-content:center');
}
if(listView.offsetLeft === summaryView.offsetLeft){
changeCSS('.summary-view','flex: 1 0 242px');
}
else{
changeCSS('.summary-view','flex: 0 0 242px');
}
}
else if(summaryView){
var myitems = document.querySelector('.my-items-container');
if(myitems.clientWidth > 460){
changeCSS('.summary-view','flex: 1 0 242px; flex-flow: row wrap;');
changeCSS('.primary','width: 218px; margin-right: 16px');
if(!isSingleSecActivity){
changeCSS('.secondary',
'padding-top:0; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); flex: 1 0 104px;');
}
else{
changeCSS('.secondary','padding-top:0; grid-template-columns: none; flex: 1 0 104px;');
changeCSS('.secondary-activity','justify-content:center; max-width:218px;');
}
}
else{
changeCSS('.summary-view','flex: 1 0 242px');
$('.primary').removeAttr('style');
if(!isSingleSecActivity){
$('.secondary').removeAttr('style');
$('.secondary-activity').removeAttr('style');
}
else{
changeCSS('.secondary','grid-template-columns: none;');
changeCSS('.secondary-activity','justify-content:center; min-width:218px;');
}
}
}
//Following lines of code is only meant for IE11 to fix responsiveness.
var secondaryDisplay = $('.secondary').css('display');
//Detect IE11
if(secondaryDisplay && secondaryDisplay !== 'grid'){
var secondaryActivity = document.querySelectorAll('.activity-container');
if(secondaryActivity && secondaryActivity.length > 0){
changeCSS('.activity-container','');
var commonWidth = secondaryActivity[0].clientWidth;
var property = 'max-width: ' + commonWidth + 'px !important';
changeCSS('.activity-container', property);
}
}
};
c.asyncGet = function() {
c.data.action = "loadData";
c.server.update().then(function(response) {
fetchMyItemsData();
});
};
var fetchMyItemsData = function() {
if (!c.data.hideWidget) {
$scope.isLoading = true;
c.primaryActivity = c.data.activityDetails.primaryCountData.length ? c.data.activityDetails.primaryCountData[0] : null;
c.secondaryActivity = c.data.activityDetails.summaryCountData;
c.listViewData = c.data.activityDetails.listViewData;
c.showViewAll = c.data.activityDetails.showViewAll;
var debouncedSummaryView = _.debounce(flexSummaryView, 100);
window.addEventListener('resize', debouncedSummaryView);
//unregister the event when directive is destroyed
$scope.$on("$destroy", function() {
window.removeEventListener('resize', debouncedSummaryView);
});
$timeout(flexSummaryView);
}
};
var load_config = c.data.load_config;
if (load_config === "async")
$timeout(c.asyncGet);
else
fetchMyItemsData();
Server Script:
(function() {
data.load_config = options.load_config;
if (data.load_config === "async" && !input)
return;
try {
data.recordLimit = options.list_view_count;
var activityConfigUtil = new sn_ex_sp.ActivityConfigurationUtil();
data.activityDetails = activityConfigUtil.getActivityData(data.recordLimit);
data.title = gs.getMessage("My active items");
if (data.activityDetails.primaryCountData && data.activityDetails.primaryCountData.length > 0)
data.list_title = gs.getMessage(options.list_heading);
data.hideWidget = false;
return data;
} catch (e) {
data.hideWidget = true;
gs.addErrorMessage(gs.getMessage("Error in loading the My Items widget"));
return data;
}
})();Let me know issues with the code.
Please help with the issue as attached
