Related
Why 1st iteration data is getting replaced in 2nd iteration?
Is there any other simpler method in ES6 to achieve this?
a = [
{ name: 'NameOne', weekName: 'WeekOne' },
{ name: 'NameTwo', weekName: 'WeekTwo' },
];
b = [
{ id: 'Name', type: 'text', data: '' },
{ id: 'Week', type: 'text', data: '' },
];
c = [];
showOutput() {
this.a.forEach((element) => {
this.b.map((item) => {
if (item.id == 'Name') {
item.data = element.name;
}
if (item.id == 'Week') {
item.data = element.weekName;
}
this.c.push(item);
console.log('c', this.c);
});
});
}
Current Output :
[{ id: 'Name', type: 'text', data: 'NameTwo' },
{ id: 'Week', type: 'text', data: 'WeekTwo' },
{ id: 'Name', type: 'text', data: 'NameTwo' },
{ id: 'Week', type: 'text', data: 'WeekTwo' }]
Desired Output:
[{ id: 'Name', type: 'text', data: 'NameOne' },
{ id: 'Week', type: 'text', data: 'WeekOne' },
{ id: 'Name', type: 'text', data: 'NameTwo' },
{ id: 'Week', type: 'text', data: 'WeekTwo' }]
Problem with your code is that this.c.push(item); here the same object is getting referenced so in 2nd iteration it's changing the data that modified by 1st iteration. In order to solve this, you will have to clone the object (dereference somehow)
I have used c.push(Object.assign({}, item)); or you can use c.push(JSON.parse(JSON.stringify(item))); or any other way to clone the object before pushing into array (c in your case)
Note: This is just to point out the root cause of the issue, and it may not be the perfect solution for your scenario.
e.g.
a = [
{ name: 'NameOne', weekName: 'WeekOne' },
{ name: 'NameTwo', weekName: 'WeekTwo' },
];
b = [
{ id: 'Name', type: 'text', data: '' },
{ id: 'Week', type: 'text', data: '' },
];
c = [];
function showOutput() {
a.forEach((element) => {
b.map((item) => {
if (item.id == 'Name') {
item.data = element.name;
}
if (item.id == 'Week') {
item.data = element.weekName;
}
c.push(Object.assign({}, item)); // clone object
});
});
}
showOutput();
console.log('c', c);
For more information: https://javascript.info/object-copy
Master menus not working smoothly. Please check below observations:
Scenario-1
1.Click on Project menu
2.Select 1st sub-menu, respective page opens up and menu remains open
3.Select 2nd sub-menu, respective page opens up and menu gets closed
4.Same happens with 3rd menu too
It should be: The way menu is working on selecting 1st option, same has to be implemented for other sub-menu’s.
Scenario-2
Click on Project menu
It expands and displays all of its options
Now Click on Client menu
It expands and displays all of its options but project menu still remains expanded
It should be: As soon as another menu is clicked, all previously expanded menu’s should get collapsed.
It is working fine at https://coreui.io/angular/demo/free/2.11.1/#/dashboard
default-layout\default-layout.component.html
<app-sidebar #appSidebar [fixed]="true" [display]="'lg'" [minimized]="sidebarMinimized" (minimizedChange)="toggleMinimize($event)" class="pb-1">
<div class="sidebar-brand d-md-none d-sm-none d-lg-block"><img src="assets/img/brand/logo.png"></div>
<app-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="appSidebar.minimized" class="pt-1"></app-sidebar-nav>
</app-sidebar>
sidebar.service.ts
import { Injectable } from '#angular/core';
import { Router } from '#angular/router';
#Injectable({
providedIn: 'root'
})
export class SidebarService {
constructor(private router : Router) { }
menuItems: any = [];
makeNavItemModuleBased(module, role) {
let url = (role == 'ROLE_ADMIN') ? '/dashboard/admin' : (role == 'ROLE_MANAGER') ? '/dashboard/manager' : '/dashboard/employee';
let manuItem: any;
if (module == 'USER_MANAGEMENT') {
manuItem = {
name: 'User',
url: '/user/existing-users',
};
}
if (module == 'REPORT_MANAGEMENT') {
manuItem = {
name: 'Reports',
url: '/reports',
// icon: 'cil-building',
children: [
{
name: 'Project',
url: '/reports/project-progress-report',
// icon: 'icon-puzzle',
class: 'nav-link',
}
]
};
}
if (module == 'EMPLOYEE_MANAGEMENT') {
manuItem = {
name: 'Employee',
url: '/employee',
// icon: 'cil-group',
children: [
{
name: 'Employees',
url: '/employee/existing-employees',
// icon: 'cil-library',
class: 'nav-link',
},
{
name: 'Employee Allocation',
url: '/project/allocation',
// icon: 'cil-library',
class: 'nav-link',
},
]
};
}
if (module == 'PROJECT_MANAGEMENT') {
manuItem = {
name: 'Project',
url: '/project',
// icon: 'icon-menu',
children: [
{
name: 'Projects',
url: '/project/existing-projects',
// icon: 'cil-library',
class: 'nav-link',
},
{
name: 'Clients',
url: '/client/existing-clients',
// icon: 'cil-library',
class: 'nav-link',
}
]
};
}
return manuItem;
}
makeNavItem(role: any) {
let emClass ='nav-link';
if(this.router.url == '/employee/add-new-employee' || this.router.url == '/employee/edit-employee/:employeeId' )
{
console.log('url',this.router.url);
emClass ='nav-link active';
}
let url = (role == 'ROLE_ADMIN') ? '/dashboard/admin' : (role == 'ROLE_MANAGER') ? '/dashboard/manager' : '/dashboard/employee';
this.menuItems.push(
{
name: 'Dashboard',
url: url,
type: 'dashboard',
attributes: { hidden: false },
title: false,
},
{
title: true,
name: 'Resource Management',
type: 'resource',
attributes: { hidden: false }
},
{
name: 'Human Resource',
attributes: { hidden: true },
type: 'EMPLOYEE_MANAGEMENT',
url: '/employee/existing-employees',
title: false,
},
{
name: 'Clients',
attributes: { hidden: true },
type: 'PROJECT_MANAGEMENT',
url: '/client/existing-clients',
title: false,
},
{
name: 'Projects',
attributes: { hidden: true },
type: 'PROJECT_MANAGEMENT',
url: '/project/existing-projects',
title: false,
},
{
name: 'Request',
attributes: { hidden: true },
type: 'PROJECT_MANAGEMENT',
url: '/request',
title: false,
},
{
name: 'Assets',
attributes: { hidden: true },
type: 'PROJECT_MANAGEMENT',
url: '/assets',
title: false,
},
{
name: 'Reports',
attributes: { hidden: true },
type: 'REPORT_MANAGEMENT',
url: '/reports',
title: false,
children: [
{
name: 'Project',
url: '/reports/project-progress-report',
class: 'nav-link',
}
]
},
{
title: true,
name: "ADMIN",
attributes: { hidden: true },
url: '/admin',
type: 'ROLE_ADMIN',
},
{
name: 'General',
attributes: { hidden: true },
type: 'ROLE_ADMIN',
url: '/department',
title: false,
children: [
{
name: 'Department',
url: '/department/existing-departments',
class: 'nav-link',
},
]
},
{
name: 'Client',
attributes: { hidden: true },
type: 'ROLE_ADMIN',
url: '/client',
title: false,
children: [
{
name: 'Lead Type',
url: '/client/existing-lead-type',
class: 'nav-link',
},
{
name: 'Industry Type',
url: '/client/existing-industry-type',
class: 'nav-link',
},
]
},
{
name: 'Project',
attributes: { hidden: true },
type: 'ROLE_ADMIN',
url: '/project',
title: false,
children: [
{
name: 'Project Status',
url: '/project/existing-projects-status',
class: 'nav-link',
},
{
name: 'Technology',
url: '/technology/existing-technologies',
class: 'nav-link',
},
{
name: 'Skill',
url: '/skill/existing-skills',
class: 'nav-link',
},
]
},
{
name: 'Employee',
attributes: { hidden: true },
type: 'ROLE_ADMIN',
url: '/employee',
title: false,
children: [
{
name: 'Designation',
url: '/designation/existing-designations',
class: 'nav-link',
},
{
name: 'Employee Allocation Percentage',
url: '/employee/existing-employees-allocation-percentage',
class: 'nav-link',
},
{
name: 'Allocation Type',
url: '/project/existing-allocation-type',
class: 'nav-link',
},
]
},
{
name: 'User',
type: 'ROLE_ADMIN',
url: '/user/existing-users',
title: false,
},
{
name: 'Asset',
attributes: { hidden: true },
type: 'ROLE_ADMIN',
url: '/asset',
title: false,
children: [
{
name: 'Asset',
url: '/asset/existing-assets',
class: 'nav-link',
},
]
},
{
name: 'Security',
attributes: { hidden: true },
type: 'ROLE_ADMIN',
url: '/settings',
title: false,
children: [
{
name: 'Settings',
url: '/settings',
class: 'nav-link',
},
{
name: 'Roles & Permissions',
url: '/role/existing-roles',
class: 'nav-link',
},
{
name: 'Roles Module',
url: '/role/existing-module',
class: 'nav-link',
},
]
},
)
return this.menuItems;
}
makeItemShow(menuItem: any, modules: any, role: any) {
console.log('role', role);
let menus = [];
menuItem.forEach(menu => {
if (menu.type == 'dashboard' || menu.type == 'resource') {
let index = menus.findIndex(p => p.name == menu.name)
if (index === -1) {
menus.push({
name: menu.name,
attributes: { hidden: null },
url: menu.url,
type: menu.type,
title: menu.title,
children: menu.children
},
{ divider: true }
)
}
}
modules.forEach(async (element, index) => {
if (menu.type == element) {
let index = menus.findIndex(p => p.name == menu.name)
if (index === -1) {
menus.push({
name: menu.name,
attributes: { hidden: null },
url: menu.url,
type: menu.type,
title: menu.title,
children: menu.children
},
{ divider: true }
)
}
}
});
if (menu.type == role) {
let index = menus.findIndex(p => p.name == menu.name)
if (index === -1) {
menus.push({
name: menu.name,
attributes: { hidden: null },
url: menu.url,
type: menu.type,
title: menu.title,
children: menu.children
},
{ divider: true }
)
}
}
})
console.log('menus', menus);
return menus;
}
}
It only happening with some menus not on all and I am an UI developer so unable to figure out the issue. Any help would be appreciated Thanks in adnvance :)
I have the following code which tries to remove duplicates from a randomly selected array items but it did'nt work,
items[] is the array containing its and i have usea sript to remove duplicates.
how do i change it to remove duplicates
what is the mistake?
window.onload = rnumber();
function rnumber() {
const
items = [
{ label: '1', url: '1.jpg' },
{ label: '2', url: '2.jpg' },
{ label: '3', url: '3.jpg' },
{ label: '4', url: '4.jpg' },
{ label: '5', url: '5.jpg' },
{ label: '6', url: '6.jpg' },
{ label: '7', url: '7.jpg' },
{ label: '8', url: '8.jpg' },
{ label: '9', url: '9.jpg' },
{ label: '10',url: '10.jpg' }
];
var lastnumber=0;
for (let index = 0; index < 9; index++)
{
randomIndex = Math.floor(Math.random() * items.length);
if(lastnumber!=randomIndex)
{
item = items[randomIndex];
lastnumber=randomIndex;
console.log(randomIndex);
}
else
{
rnumber()
}
}
}
You can use reduce to get rid of duplicates
const distinctShuffle = array =>
array ? array.reduce((arr, item) => {
if (!(item in arr)) {
arr.splice(Math.floor(Math.random() * (arr.length + 1)), 0, item);
}
return arr;
}, []) : array;
function rnumber() {
const items = [
{ label: '1', url: '1.jpg' },
{ label: '2', url: '2.jpg' },
{ label: '3', url: '3.jpg' },
{ label: '4', url: '4.jpg' },
{ label: '5', url: '5.jpg' },
{ label: '6', url: '6.jpg' },
{ label: '7', url: '7.jpg' },
{ label: '8', url: '8.jpg' },
{ label: '9', url: '9.jpg' },
{ label: '10',url: '10.jpg' }
];
return distinctShuffle(items);
}
console.log(rnumber());
You have some syntax errors in your code. Watch out for using semicolons at the end of the statement - not commas.
If you're using ES6 you can write something like this:
let distinct = [...new Set(items.map(item => item.label))]
Use Following Simple Function to Remove Duplicates from array using jquery
var YourArray = [
{ label: '1', url: '1.jpg' },
{ label: '1', url: '2.jpg' },
{ label: '3', url: '3.jpg' },
{ label: '4', url: '4.jpg' },
{ label: '1', url: '5.jpg' },
{ label: '6', url: '6.jpg' },
{ label: '1', url: '7.jpg' },
{ label: '8', url: '8.jpg' },
{ label: '9', url: '9.jpg' },
{ label: '10',url: '10.jpg' }
];
var SortedArray = YourArray.filter(
function(a){if (!this[a.label]) {this[a.label] = 1; return a;}},
{}
);
alert(JSON.stringify(SortedArray));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a store in sencha, in the store I have 2 date fields, start_date and end_date, I want to get this data from my store, and compare it to the current day, then if the end_date from the store matches todays date, I need to output an ext.toast message, that shows the respective data. This is based on licenses and their start and end dates.
I just need to know how I would set this up, ultimately I want it in the launch function, so it launches on first startup
this is my store
Ext.define('ClientInfo.store.LicenseAllStore', {
extend: 'Ext.data.Store',
requires: [
'ClientInfo.model.LicenseAllModel',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'LicenseAllStore',
autoLoad: true,
model: 'ClientInfo.model.LicenseAllModel',
proxy: {
type: 'ajax',
extraParams: {
class: 'LicenseAll',
method: 'get'
},
url: 'system/index.php',
reader: {
type: 'json',
rootProperty: 'topics'
}
}
}, cfg)]);
}
});
and this is my model
Ext.define('ClientInfo.model.LicenseAllModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Field'
],
fields: [
{
name: 'license_id'
},
{
name: 'license_number'
},
{
name: 'start_date'
},
{
name: 'end_date'
},
{
name: 'duration'
},
{
name: 'expiry_date'
},
{
name: 'product_id'
},
{
name: 'product_name'
},
{
name: 'version'
},
{
name: 'company_id'
},
{
name: 'name'
},
{
name: 'physical_address'
},
{
name: 'postal_address'
},
{
name: 'people_id'
},
{
name: 'firstname'
},
{
name: 'lastname'
},
{
name: 'occupation'
},
{
name: 'office_number'
},
{
name: 'cell_number'
},
{
name: 'email'
},
{
name: 'harware_id'
},
{
name: 'server_url'
},
{
name: 'ip_address'
},
{
name: 'mac_address'
},
{
name: 'os_id'
},
{
name: 'os_name'
},
{
name: 'os_version'
},
{
name: 'os_build'
}
]
});
So far I have this in the launch function
var start = Ext.getCmp('overviewGrid').store.data.start_date;
var end = Ext.getCmp('overviewGrid').store.data.end_date;
var today = new Date();
if(end.setHours(0,0,0,0) == today.setHours(0,0,0,0));
{
Ext.toast({
html: 'Expiring Licenses',
title: 'Licenses',
width: 200,
align: 't',
autoClose: false
});
}
var allRecords = Ext.getCmp('overviewGrid').store.data;
var today = new Date();
//and loop like this
allRecords.each( function(record){
var start = record.data.start_date;
var end = record.data.end_date;
if(Ext.Date.format(end, 'Y-m-d') == Ext.Date.format(today, 'Y-m-d'));
{
Ext.toast({
html: 'Expiring Licenses',
title: 'Licenses',
width: 200,
align: 't',
autoClose: false
});
}
});
I am using EXT JS 5.1, in my application there is a grid panel which gets data from the grails server. I need the data to be paginated from client side i.e. all the data from the server should be retrieved at once and on click of "next" or "prev", it should not go to the server again to fetch the data. Instead it should get the local data. Is there any way to achieve this.
I had tried with two stores. One store gets the data from the server which has the proxy of AJAX and the other store which has the proxy as MEMORY which is assigned to the grid.
Data from AJAX proxy store is copied to the Memory proxy store and Memory proxy store is assigned to the grid so that every time the server is not hit.
To load the data, I am using loadRawData. But this is disrupting the pagingtoolbar configurations. I tried overriding the loadRawData to reset the configuration of the store but still the paging toolbar is not showing proper results.
Below is the code:
Ext.define('MVC.model.WorkOrderStatic', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Selected', type: 'boolean' },
{ name: 'workOrderBatchId', type: 'string' },
{ name: 'territory', type: 'string' },
{ name: 'apo', type: 'string' },
{ name: 'eventRefId', type: 'string' },
{ name: 'product', type: 'string' },
{ name: 'Received', type: 'string' },
{ name: 'DueDate', type: 'string' },
{ name: 'priority', type: 'string' },
{ name: 'AssignedTo', type: 'string' },
{ name: 'Ready', type: 'boolean' },
{ name: 'InProgress', type: 'boolean' },
{ name: 'partial', type: 'boolean' },
{ name: 'Complete', type: 'boolean' },
{ name: 'hold', type: 'boolean' },
{ name: 'account', type: 'string' },
{ name: 'id', type: 'string' }
],
idProperty: 'id'
});
Ext.define('MVC.model.WorkOrder', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Selected', type: 'boolean' },
{ name: 'workOrderBatchId', type: 'string' },
{ name: 'territory', type: 'string' },
{ name: 'apo', type: 'string' },
{ name: 'eventRefId', type: 'string' },
{ name: 'product', type: 'string' },
{ name: 'Received', type: 'string' },
{ name: 'DueDate', type: 'string' },
{ name: 'priority', type: 'string' },
{ name: 'AssignedTo', type: 'string' },
{ name: 'Ready', type: 'boolean' },
{ name: 'InProgress', type: 'boolean' },
{ name: 'partial', type: 'boolean' },
{ name: 'Complete', type: 'boolean' },
{ name: 'hold', type: 'boolean' },
{ name: 'account', type: 'string' },
{ name: 'id', type: 'string' }
],
idProperty: 'id'
});
var datar = '';
var jsonDataEncode= '';
var workOrderData = '';
//var workOrderStore = Ext.data.StoreManager.lookup('WorkOrder');
var workOrderStaticStore = Ext.create('Ext.data.Store', {
requires : [
'MVC.model.WorkOrderStatic',
],
storeId: 'workOrderStatic',
model : 'MVC.model.WorkOrderStatic',
pageSize : 4,
//buffered: true,
//autoLoad: false,
//autoLoad: true,
//data: workOrderData,
//data:[],
autoLoad: {params: {start: 0, limit: 40}},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'workOrders'
},
enablePaging : true
}/*,
listeners:{
beforeload: function(store, operation, options){
alert("In before load of workOrderStatic");
console.log("In before load of workOrderStatic");
console.log(workOrderData);
}//End of beforeLoad listener
}*/
});//end of workOrderStatic store
var grid = Ext.create('Ext.grid.Panel', {
alias: 'app.gridPanelAlias',
//extend : 'Ext.grid.Panel',
xtype : 'WorkOrderView',
title : 'Work Order Batches',
//store : 'WorkOrder',
//store: 'WorkOrderStatic',
//store: Ext.data.StoreManager.lookup('workOrderStatic'),
//bind: '{workOrderStatic}',
store : workOrderStaticStore,
multiSelect: true,
requires: ['Ext.ux.CheckColumn',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
// 'Ext.ModelManager',
],
loadMask: true,
columns: [
{text:"id",width: 15,dataIndex: 'id', sortable: true},
{text: "Work Order Batch", width: 55, dataIndex: 'workOrderBatchId', sortable: true},
{text: "Territory", width: 35, dataIndex: 'territory', sortable: true}
],
listeners: {
render: function(){
alert("In render of grid");
}
},
dockedItems:
[
{ xtype: 'pagingtoolbar',
dock: 'bottom',
displayMsg: '{0} - {1} of {2}',
emptyMsg: 'No data to display',
store: workOrderStaticStore,
//store: 'woStatic',
//store: Ext.StoreMgr.lookup('WorkOrderStatic'),
displayInfo: true
}
],
forceFit: true,
height:210,
split: true,
region: 'north'
});
var workOrderStore = Ext.create('Ext.data.Store', {
requires : [
'MVC.model.WorkOrder'
],
storeId : 'WorkOrder',
model : 'MVC.model.WorkOrder',
pageSize : 6,
//buffered: true,
remoteSort: false,
//autoload: false,
autoLoad: false,
proxy: {
type: 'ajax',
url: '/CommandAndControl/workOrderList/getReadyWorkOrders',
actionMethods :{
read : 'POST'
},
reader: {
type: 'json',
rootProperty: 'workOrders'
}
},
listeners:{
load:function(store, record, success, opts){
var responseText = store.proxy.reader.rawData;
var responseString = Ext.encode(responseText);
}
}
});
workOrderStore.load({
scope : this,
callback: function(records, operation, success) {
datar= new Array();
records1 = workOrderStore.getRange();
console.log("length of records ");
console.log(records1.length);
for (var i = 0; i < records1.length; i++) {
datar.push(records1[i].data);
}//End of for loop
jsonDataEncode = Ext.util.JSON.encode(datar);
console.log("datar");
console.log(datar);
console.log("jsonDataEncode");
console.log(jsonDataEncode);
var jsonEncodeData= jsonDataEncode.replace(/^"(.*)"$/, '$1');
console.log("replaced json encoded data");
console.log(jsonEncodeData);
var bracket1= "{";
var bracket2= "}";
workOrderData = bracket1.concat("workOrders").concat(":").concat(jsonDataEncode).concat(bracket2);
workOrderData=Ext.JSON.decode(workOrderData);
console.log("data1 data");
console.log(workOrderData);
workOrderStaticStore.loadRawData(workOrderData);
//this.reconfigure(workOrderStaticStore, columns);
//grid.reconfigure(workOrderStaticStore, workOrderData.columns);
/*var result=workOrderStaticStore.proxy.reader.read(workOrderData);
var records=result.records;
workOrderStaticStore.add(records);
workOrderStaticStore.load({add:true,
params:{
start:0,
limit:4
}
});*/
//workOrderStaticStore.loadRawData(workOrderData, true);
//Ext.StoreMgr.lookup('WorkOrderStatic').load();
}//End of call back
});//End of workorderstore
Ext.override(Ext.data.Store, {
loadRawData : function(data, append){
var me = this,
result = me.proxy.reader.read(data),
records = result.records;
if (result.success) {
me.totalCount = result.total;
console.log("total count");
console.log(me.totalCount);
me.loadRecords(records, { addRecords: append });
//me.currentPage = 2;
me.fireEvent('load', me, records, true);
}
}
});
Ext.define("MVC.view.WorkCenterPanel",{
extend: "Ext.panel.Panel",
alias: 'widget.workcenterpanel',
requires : [
'Ext.grid.Panel','MVC.GridPanel','MVC.controller.WorkCenterPanel'
],
requires: 'MVC.view.Device',
items:
[
grid
,
{
xtype: 'devicepanel'
}
]
});
Thanks in advance!!