Related
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 am using mui-datatables. I can already retrieve the data correctly. However, I am quite lost on how to display the data address, ID, and name, and date only in the table.
codesandbox link :https://codesandbox.io/s/infallible-feistel-bki5h?file=/src/App.js
This is the data in a JSON format.
[
{
name: "Sample Name",
items: {
id: "34234242",
selectedItem: "Item",
date: { seconds: 1636905600, nanoseconds: 0 },
item1: true,
item2: false,
},
address: "Ayala",
email: "sample email",
phone: "823840820943",
},
];
Below are the codes.
const filter = users.filter((d) => d?.items?.item2 == false);
const filtered = selection.filter((f) => f?.items?.date <= new Date());
return (
<div>
{" "}
<MUIDataTable title={"List"} columns={columns} data={filtered} />
</div>
);
};
export default UserTable;
You need columns options where you include address, ID, name, and date. You can also hide column (using display: false) that are included into your column list. please the below example and you can check MUI Datatable documentation too.
import MUIDataTable from "mui-datatables";
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
}
},
{
name: "company",
label: "Company",
options: {
filter: true,
sort: false,
}
},
{
name: "city",
label: "City",
options: {
filter: true,
sort: false,
display: false,
}
},
{
name: "state",
label: "State",
options: {
filter: true,
sort: false,
}
},
];
const data = [
{ name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
{ name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
{ name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
{ name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" },
];
const options = {
filterType: 'checkbox',
};
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
Update based on your comment
You need to consider two things:
Need to use customBodyRender to show complex json data like items.SelectedItem
{
name: "items",
label: "Item",
options: {
filter: true,
sort: true,
customBodyRender: (value, tableMeta, updateValue) => {
console.log(value, tableMeta, updateValue, "test");
return value.selectedItem;
}
}
}
Need to use setRowProps to show background color of selected row based on condition. you need options to use setRowProps
const options = {
filter: true,
filterType: "dropdown",
fixedSelectColumn: false,
rowHover: false,
setRowProps: (row, dataIndex, rowIndex) => {
return {
style: row[1] === "Item" ? { backgroundColor: "skyblue" } : {}
};
}
};
Here is the complete example:
Updated Example in Codesandbox
I have the Error: From members are not found in [] for join {"join":{"relationship":"belongsTo"},"from":"Conversations","to":"Advisers","originalFrom":"Conversations","originalTo":"Advisers"}. Please make sure join fields are referencing dimensions instead of columns. fallowing schemas with the fallowing schemas.
cube(`Conversations`, {
sql: `
select
appUUID, roomId, sessionId, count(1) Messages,
min(channel) channel,
min(createdAt) FirstMessage,
max(createdAt) LastMessage,
max(case when type='status' and status='ended' then \`payload.selectedOption\` else '' end) EndReason,
max(
case
when type='status' and status='ended' and sender='bot' then 'Robot'
when type='status' and status='ended' and sender <> 'bot' then
(
\`advisorId\`
)
else ''
end
) EndAdvisor,
max(userGuest) userGuest,
max(userGuestLocal) userGuestLocal
from
\`keybe-conversations\`.messages
where
${SECURITY_CONTEXT.appUUID.filter(
'appUUID'
)}
group by
appUUID, roomId, sessionId
`,
joins:{
Advisers: {
relationship: 'belongsTo',
sql: ` concat(${CUBE}.\`appUUID\`, '-', ${CUBE}.\`EndAdvisor\`) = concat(${Advisers}.\`appUUID\`, '-', ${Advisers}.\`userId\`)`
}
},
measures: {
count: {
type: `count`,
drillMembers: [userGuest, userGuestLocal, channel]
},
totalMessages: {
type: `sum`,
sql: `Messages`,
title: 'Total Messages'
},
ended: {
type: `count`,
filters: [
{
sql: `${CUBE}.EndReason <> ''`
}
],
drillMembers: [userGuest, userGuestLocal, channel]
},
notEnded: {
type: `count`,
filters: [
{
sql: `${CUBE}.EndReason = ''`
}
],
drillMembers: [userGuest, userGuestLocal, channel]
}
},
dimensions: {
pk: {
sql: `concat(${CUBE}.\`appUUID\`, '-', ${CUBE}.\`roomId\`, '-', ${CUBE}.\`sessionId\`)`,
type: `string`,
primaryKey: true
},
channel: {
sql: `channel`,
type: `string`
},
appUUID: {
sql: `${CUBE}.\`appUUID\``,
type: `string`,
title: `AppUUID`
},
roomId: {
sql: `${CUBE}.\`roomId\``,
type: `string`,
title: `RoomId`
},
sessionId: {
sql: `${CUBE}.\`sessionId\``,
type: `string`,
title: `Session Id`
},
endReason: {
sql: `${CUBE}.\`EndReason\``,
type: `string`,
title: `End Reason`
},
endAdvisor: {
sql: `${CUBE}.\`EndAdvisor\``,
type: `string`,
title: `End Advisor`
},
firstMessage: {
sql: `${CUBE}.\`FirstMessage\``,
type: `time`,
title: `First Message`
},
lastMessage: {
sql: `DATE_FORMAT(${CUBE}.\`LastMessage\`, '%Y-%m-%d %H:%m:%s')`,
type: `string`,
title: `Last Message`
},
initialMessage: {
sql: `DATE_FORMAT(${CUBE}.\`FirstMessage\`, '%Y-%m-%d %H:%m:%s')`,
type: `string`,
title: `Initial Message`
},
userGuest: {
sql: `${CUBE}.\`userGuest\``,
type: `string`,
title: `UserGuest`
},
userGuestLocal: {
sql: `${CUBE}.\`userGuestLocal\``,
type: `string`,
title: `UserGuestLocal`
},
takenTime: {
sql: `TIMESTAMPDIFF(HOUR,DATE_FORMAT(${CUBE}.\`FirstMessage\`, '%Y-%m-%d %H:%m:%s'),DATE_FORMAT(${CUBE}.\`LastMessage\`, '%Y-%m-%d %H:%m:%s'))`,
type: 'string',
title: 'TakenTime'
}
},
preAggregations: {
// main: {
// type: `originalSql`,
// external: true
// },
ConversationsRollup: {
type: `rollup`,
measureReferences: [Conversations.count],
dimensionReferences: [Conversations.appUUID, Conversations.channel, Conversations.endAdvisor, Conversations.firstMessage, Conversations.lastMessage, Conversations.userGuest, Conversations.userGuestLocal],
external: true
},
joinedWithAdvisersRollup: {
type: `rollupJoin`,
measureReferences: [Conversations.count],
dimensionReferences: [Advisers.name],
rollupReferences: [Advisers.AdvisersRollup, Conversations.ConversationsRollup],
external: true,
}
},
segments: {
humanAdvisor: {
sql: `${CUBE}.EndAdvisor <> 'Robot' AND ${CUBE}.EndAdvisor <> ''`,
},
robotAdvisor: {
sql: `${CUBE}.EndAdvisor = "Robot"`,
},
withoutAdvisor: {
sql: `${CUBE}.EndAdvisor = ''`,
}
}
})
cube(`Advisers`, {
sql: `
SELECT * FROM \`keybe-conversations\`.advisers where
${SECURITY_CONTEXT.appUUID.filter(
'appUUID'
)}
`,
joins: {
Rooms: {
relationship: 'hasMany',
sql: `concat(${CUBE}.\`appUUID\`, '-', ${CUBE}.\`userId\`) = concat(${Rooms}.\`appUUID\`, '-', ${Rooms}.\`advisorId\`)`
},
Conversations: {
relationship: 'hasMany',
sql: `concat(${CUBE}.\`appUUID\`, '-', ${CUBE}.\`userId\`) = concat(${Conversations}.\`appUUID\`, '-', ${Conversations}.\`EndAdvisor\`)`
}
},
measures: {
count: {
type: `count`,
drillMembers: [name, email, userId]
}
},
dimensions: {
pk: {
sql: `concat(${CUBE}.\`appUUID\`, '-', ${CUBE}.\`userId\`)`,
type: `string`,
primaryKey: true
},
appUUID: {
sql:`${CUBE}.\`appUUID\``,
type: `string`,
title: `AppUUID`
},
status: {
sql: `${CUBE}.\`status\``,
type: `string`,
title: `Status`
},
name: {
sql:`${CUBE}.\`name\``,
type: 'string',
title: `Name`
},
email: {
sql:`${CUBE}.\`email\``,
type: 'string',
title: `Email`
},
phone: {
sql:`concat(COALESCE(${CUBE}.\`countryCode\`, 'NO NULO-') , ${CUBE}.\`phone\`)`,
type: 'string',
title: `Phone`
},
userId: {
sql:`${CUBE}.\`userId\``,
type: 'string',
shown: false
}
},
preAggregations: {
AdvisersRollup: {
type: 'rollup',
measureReferences:[Advisers.count],
dimensionReferences:[Advisers.status, Advisers.name, Advisers.email, Advisers.phone, Advisers.appUUID],
external: true
}
}
})
Thank you in advanced.
Could you try updating the join in your Conversation cube to look like this:
joins:{
Advisers: {
relationship: 'belongsTo',
sql: ` concat(${CUBE.appUUID}, '-', ${CUBE.endAdvisor}) = concat(${Advisers.appUUID}, '-', ${Advisers.userId})`
}
},
Suppose we have following file dataset\test.js
var dataset={
HK_NetMovement_Censtad: {
name: 'HK_NetMovement_Censtad',
keys: [],
columns: [{
id: "dateiso",
name: {
en: "Mid_yr"
},
type: "datetime"
},
{
id: "value",
name: {
en: "Pop_size"
},
type: "numeric"
}
],
fearueServer: 'HK_KEY_VALUE'
},
HK_CPIchangeseason_Censtad: {
fearueServer: 'HK_KEY_VALUE',
columns: [{
id: "dateiso",
name: {
en: "Month"
},
type: "datetime"
},
{
id: "value",
name: {
en: "Monthly Rate"
},
type: "numeric"
}
],
keys: [],
name: 'HK_CPIchangeseason_Censtad'
}
}
I want to read it as an Object in Nodejs. One way is to read it using eval function as follows:
fs.readFile(filepath, 'utf8', function (err, data) {
eval(data)
console.log(dataset)
})
that works fine. But eval function has security holes. Is there any other workarounds to avoid using eval?
Thanks
If I convert those files to the following format
module.exports = function () {
this.dataset = {
HK_NetMovement_Censtad: {
name: 'HK_NetMovement_Censtad',
keys: [],
columns: [{
id: "dateiso",
name: {
en: "Mid_yr"
},
type: "datetime"
},
{
id: "value",
name: {
en: "Pop_size"
},
type: "numeric"
}
],
fearueServer: 'HK_KEY_VALUE'
},
HK_CPIchangeseason_Censtad: {
fearueServer: 'HK_KEY_VALUE',
columns: [{
id: "dateiso",
name: {
en: "Month"
},
type: "datetime"
},
{
id: "value",
name: {
en: "Monthly Rate"
},
type: "numeric"
}
],
keys: [],
name: 'HK_CPIchangeseason_Censtad'
}
}
I can use
var j = require('./datasets/'+file)
to import them into my file and work with them
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
});
}
});