20 changed files with 927 additions and 1046 deletions
@ -1,402 +1,398 @@
|
||||
export const hideAttr = [ |
||||
"geom", |
||||
"password", |
||||
"id", |
||||
"username", |
||||
"created_date", |
||||
"created_by", |
||||
"modified_date", |
||||
"modified_by", |
||||
"updated_by", |
||||
"updated_date", |
||||
"updated_at", |
||||
"session_login", |
||||
"company", |
||||
"buffer_radius", |
||||
"group_sales", |
||||
"OBJECTID", |
||||
"fcm_token", |
||||
"key", |
||||
"planning_id", |
||||
"subproyek_id", |
||||
"user_id", |
||||
"created_at", |
||||
"_type", // waspang
|
||||
"satuan_id", |
||||
"m_planning_nama", |
||||
"m_planning_target", |
||||
"m_satuan_description", |
||||
"m_subproyek_akhir_proyek", |
||||
"m_subproyek_area_kerja", |
||||
"m_subproyek_biaya", |
||||
"m_subproyek_biaya_actual", |
||||
"m_subproyek_color_progress", |
||||
"m_subproyek_jumlah_pekerja", |
||||
"m_subproyek_ket_progress", |
||||
"m_subproyek_lokasi_kantor", |
||||
"m_subproyek_mulai_proyek", |
||||
"m_subproyek_nama", |
||||
"m_subproyek_persentase_progress_actual", |
||||
"m_subproyek_persentase_progress_plan", |
||||
"m_users_email", |
||||
"m_users_username", |
||||
"m_planning_address", |
||||
"m_planning_jumlah_titik", |
||||
"m_planning_target_planning", |
||||
"m_satuan_name", |
||||
"m_subproyek_pic", |
||||
"m_users_gender", |
||||
"m_users_name", |
||||
"m_users_phone_number", |
||||
]; |
||||
|
||||
export const salesAttrShow = [ |
||||
"id", |
||||
"group_sales_name", |
||||
"name", |
||||
"phone_number", |
||||
"email", |
||||
"address" |
||||
]; |
||||
|
||||
export const dateColumns = [ |
||||
"created_date", |
||||
"modified_date", |
||||
"birth_date", |
||||
"datesend", // last_waypoint_employee
|
||||
"wptime", // last_waypoint_employee
|
||||
"tanggal", |
||||
"mulai_tugas", |
||||
"akhir_tugas" |
||||
]; |
||||
|
||||
export const DATE_TIME_FORMAT = "DD-MM-YYYY"; |
||||
|
||||
export const COLUMN_DAILY_INFO_TABLE = [ |
||||
{ |
||||
dataField: 'id', |
||||
text: 'ID', |
||||
hidden: true |
||||
}, |
||||
{ |
||||
dataField: 'join.group_employee_name', |
||||
text: 'Group Employee' |
||||
}, |
||||
{ |
||||
dataField: 'name', |
||||
text: 'Name' |
||||
}, |
||||
{ |
||||
dataField: 'phone_number', |
||||
text: 'Phone Number' |
||||
}, |
||||
{ |
||||
dataField: 'email', |
||||
text: 'Email' |
||||
}, |
||||
{ |
||||
dataField: 'address', |
||||
text: 'Address' |
||||
}, |
||||
{ |
||||
dataField: 'clock_in', |
||||
text: 'Clock In' |
||||
}, |
||||
{ |
||||
dataField: 'clock_out', |
||||
text: 'Clock Out' |
||||
} |
||||
] |
||||
|
||||
export const formatLabel = (label) => { |
||||
let output = ""; |
||||
|
||||
if (label.includes("_")) { |
||||
let words = label.split("_"); |
||||
for (let i=0; i < words.length; i++) { |
||||
words[i] = words[i].charAt(0).toUpperCase() + words[i].substr(1); |
||||
} |
||||
output = words.join(' '); |
||||
} |
||||
else { |
||||
output = label.charAt(0).toUpperCase() + label.slice(1); |
||||
} |
||||
return output; |
||||
} |
||||
|
||||
export const QUERY_BUILDER_FIELD_SALES = |
||||
{ |
||||
"properties->username": { |
||||
label: 'Username', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->name": { |
||||
label: 'Name', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->email": { |
||||
label: 'Email', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->address": { |
||||
label: 'Address', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->phone_number": { |
||||
label: 'Phone Number', |
||||
type: 'number', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->type_sales": { |
||||
label: 'Type Sales', |
||||
type: 'select', |
||||
valueSources: ['value'], |
||||
fieldSettings: { |
||||
listValues: [ |
||||
{ value: 'B2B', title: 'B2B' }, |
||||
{ value: 'B2C', title: 'B2C' }, |
||||
], |
||||
} |
||||
}, |
||||
} |
||||
|
||||
export const checkActMenup = (menuPath, actProp) => { |
||||
let foundObj; |
||||
let entireObj = JSON.parse(localStorage.getItem("menu_login")); |
||||
JSON.stringify(entireObj, (_, nestedValue) => { |
||||
if (nestedValue && nestedValue.url === menuPath) { |
||||
foundObj = nestedValue; |
||||
} |
||||
return nestedValue; |
||||
}); |
||||
|
||||
let output = false; |
||||
let actValue = actProp.trim().toLowerCase() |
||||
switch (actValue) { |
||||
case "create": |
||||
if (foundObj[actValue] === true) { |
||||
output = true; |
||||
} else { |
||||
output = false; |
||||
|
||||
} |
||||
case "read": |
||||
if (foundObj[actValue] === true) { |
||||
output = true; |
||||
} |
||||
case "update": |
||||
if (foundObj[actValue] === true) { |
||||
output = true; |
||||
} |
||||
case "delete": |
||||
if (foundObj[actValue] === true) { |
||||
output = true; |
||||
} |
||||
// default:
|
||||
// output = false
|
||||
} |
||||
|
||||
return output; |
||||
// return foundObj[actProp];
|
||||
}; |
||||
|
||||
export const QUERY_BUILDER_FIELD_CUSTOMER = |
||||
{ |
||||
"properties->name": { |
||||
label: 'Name', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->buffer_radius": { |
||||
label: 'Buffer Radius', |
||||
type: 'number', |
||||
fieldSettings: { |
||||
min: 1, |
||||
}, |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->address": { |
||||
label: 'Address', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->income": { |
||||
label: 'Income', |
||||
type: 'number', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->store_manager": { |
||||
label: 'Store Manager', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
} |
||||
|
||||
export const QUERY_BUILDER_FIELD_OFFICE = |
||||
{ |
||||
"properties->company": { |
||||
label: 'Company', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->name": { |
||||
label: 'Name', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->employes": { |
||||
label: 'Employe', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->address": { |
||||
label: 'Alamat', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
} |
||||
|
||||
|
||||
export const getChildrenTree = (data) => |
||||
data.map((item, index) => { |
||||
if (item.subproyeks && item.subproyeks.length > 0) { |
||||
return { |
||||
"children": getChildrenTree(item.subproyeks), |
||||
"title": item.nama, |
||||
"key": Math.random(), |
||||
"id": item.id, |
||||
...item |
||||
} |
||||
} |
||||
return { |
||||
"title": item.nama, |
||||
"key": Math.random(), |
||||
...item |
||||
} |
||||
}) |
||||
|
||||
export const formatRupiah = (angka, prefix) => { |
||||
var number_string = angka.replace(/[^,\d]/g, '').toString(), |
||||
split = number_string.split(','), |
||||
sisa = split[0].length % 3, |
||||
rupiah = split[0].substr(0, sisa), |
||||
ribuan = split[0].substr(sisa).match(/\d{3}/gi); |
||||
var separator = ""; |
||||
if(ribuan){ |
||||
separator = sisa ? '.' : ''; |
||||
rupiah += separator + ribuan.join('.'); |
||||
} |
||||
|
||||
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah; |
||||
return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : ''); |
||||
} |
||||
|
||||
export const renderFormatRupiah = (text, prefix) => { |
||||
text = text.split('.')[0]; |
||||
if (text) { |
||||
return formatRupiah(text, prefix) |
||||
} else { |
||||
return "-" |
||||
} |
||||
} |
||||
|
||||
export const formatNumber = (angka) => { |
||||
var number_string = angka.replace(/[^,\d]/g, '').toString(), |
||||
split = number_string.split(','), |
||||
sisa = split[0].length % 3, |
||||
rupiah = split[0].substr(0, sisa), |
||||
ribuan = split[0].substr(sisa).match(/\d{3}/gi); |
||||
var separator = ""; |
||||
if(ribuan){ |
||||
separator = sisa ? '.' : ''; |
||||
rupiah += separator + ribuan.join('.'); |
||||
} |
||||
|
||||
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah; |
||||
return rupiah |
||||
} |
||||
|
||||
|
||||
export const formatThousand = (x) => { |
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); |
||||
} |
||||
|
||||
export const formatLargeNumber = (num) => { |
||||
const formattedNum = formatThousand(num); |
||||
if (num >= 1000000000000) { |
||||
return `${(num / 1000000000000).toFixed(1)}T`; |
||||
} else if (num >= 1000000000) { |
||||
return `${(num / 1000000000).toFixed(1)}M`; |
||||
} else if (num >= 1000000) { |
||||
return `${(num / 1000000).toFixed(1)}Jt`; |
||||
} |
||||
return formattedNum; |
||||
}; |
||||
/* |
||||
Using it: |
||||
sortBy(data, { |
||||
prop: "date", |
||||
desc: true, |
||||
parser: function (item) { |
||||
return item.toUpperCase(); |
||||
} |
||||
}); |
||||
*/ |
||||
export const sortBy = (function () { |
||||
var toString = Object.prototype.toString, |
||||
parse = function (x) { return x; }, |
||||
getItem = function (x) { |
||||
var isObject = x != null && typeof x === "object"; |
||||
var isProp = isObject && this.prop in x; |
||||
return this.parser(isProp ? x[this.prop] : x); |
||||
}; |
||||
|
||||
/** |
||||
* Sorts an array of elements. |
||||
* |
||||
* @param {Array} array: the collection to sort |
||||
* @param {Object} cfg: the configuration options |
||||
* @property {String} cfg.prop: property name (if it is an Array of objects) |
||||
* @property {Boolean} cfg.desc: determines whether the sort is descending |
||||
* @property {Function} cfg.parser: function to parse the items to expected type |
||||
* @return {Array} |
||||
*/ |
||||
return function sortby (array, cfg) { |
||||
if (!(array instanceof Array && array.length)) return []; |
||||
if (toString.call(cfg) !== "[object Object]") cfg = {}; |
||||
if (typeof cfg.parser !== "function") cfg.parser = parse; |
||||
cfg.desc = !!cfg.desc ? -1 : 1; |
||||
return array.sort(function (a, b) { |
||||
a = getItem.call(cfg, a); |
||||
b = getItem.call(cfg, b); |
||||
return cfg.desc * (a < b ? -1 : +(a > b)); |
||||
}); |
||||
}; |
||||
|
||||
}()); |
||||
|
||||
|
||||
export const uniqueKeyValues = (arr, key) => { |
||||
return [... new Set(arr.map((obj) => {return obj[key]}))]; |
||||
} |
||||
|
||||
export const renderLabelStatus = (text) => { |
||||
let label = text; |
||||
if (text === 'fom' || text === 'fot' || text === 'po') { |
||||
label = text.toUpperCase(); |
||||
} |
||||
return label; |
||||
} |
||||
|
||||
export const formatRibuanDecimal = (n) => { |
||||
let parts=n.toString().split("."); |
||||
return "Rp. " + parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".") + (parts[1] ? "," + parts[1] : ""); |
||||
} |
||||
|
||||
export const capitalizeFirstLetter = (string) => { |
||||
return string.charAt(0).toUpperCase() + string.slice(1); |
||||
} |
||||
export const hideAttr = [ |
||||
"geom", |
||||
"password", |
||||
"id", |
||||
"username", |
||||
"created_date", |
||||
"created_by", |
||||
"modified_date", |
||||
"modified_by", |
||||
"updated_by", |
||||
"updated_date", |
||||
"updated_at", |
||||
"session_login", |
||||
"company", |
||||
"buffer_radius", |
||||
"group_sales", |
||||
"OBJECTID", |
||||
"fcm_token", |
||||
"key", |
||||
"planning_id", |
||||
"subproyek_id", |
||||
"user_id", |
||||
"created_at", |
||||
"_type", // waspang
|
||||
"satuan_id", |
||||
"m_planning_nama", |
||||
"m_planning_target", |
||||
"m_satuan_description", |
||||
"m_subproyek_akhir_proyek", |
||||
"m_subproyek_area_kerja", |
||||
"m_subproyek_biaya", |
||||
"m_subproyek_biaya_actual", |
||||
"m_subproyek_color_progress", |
||||
"m_subproyek_jumlah_pekerja", |
||||
"m_subproyek_ket_progress", |
||||
"m_subproyek_lokasi_kantor", |
||||
"m_subproyek_mulai_proyek", |
||||
"m_subproyek_nama", |
||||
"m_subproyek_persentase_progress_actual", |
||||
"m_subproyek_persentase_progress_plan", |
||||
"m_users_email", |
||||
"m_users_username", |
||||
"m_planning_address", |
||||
"m_planning_jumlah_titik", |
||||
"m_planning_target_planning", |
||||
"m_satuan_name", |
||||
"m_subproyek_pic", |
||||
"m_users_gender", |
||||
"m_users_name", |
||||
"m_users_phone_number", |
||||
]; |
||||
|
||||
export const salesAttrShow = [ |
||||
"id", |
||||
"group_sales_name", |
||||
"name", |
||||
"phone_number", |
||||
"email", |
||||
"address" |
||||
]; |
||||
|
||||
export const dateColumns = [ |
||||
"created_date", |
||||
"modified_date", |
||||
"birth_date", |
||||
"datesend", // last_waypoint_employee
|
||||
"wptime", // last_waypoint_employee
|
||||
"tanggal", |
||||
"mulai_tugas", |
||||
"akhir_tugas" |
||||
]; |
||||
|
||||
export const DATE_TIME_FORMAT = "DD-MM-YYYY"; |
||||
|
||||
export const COLUMN_DAILY_INFO_TABLE = [ |
||||
{ |
||||
dataField: 'id', |
||||
text: 'ID', |
||||
hidden: true |
||||
}, |
||||
{ |
||||
dataField: 'join.group_employee_name', |
||||
text: 'Group Employee' |
||||
}, |
||||
{ |
||||
dataField: 'name', |
||||
text: 'Name' |
||||
}, |
||||
{ |
||||
dataField: 'phone_number', |
||||
text: 'Phone Number' |
||||
}, |
||||
{ |
||||
dataField: 'email', |
||||
text: 'Email' |
||||
}, |
||||
{ |
||||
dataField: 'address', |
||||
text: 'Address' |
||||
}, |
||||
{ |
||||
dataField: 'clock_in', |
||||
text: 'Clock In' |
||||
}, |
||||
{ |
||||
dataField: 'clock_out', |
||||
text: 'Clock Out' |
||||
} |
||||
] |
||||
|
||||
export const formatLabel = (label) => { |
||||
let output = ""; |
||||
|
||||
if (label.includes("_")) { |
||||
let words = label.split("_"); |
||||
for (let i=0; i < words.length; i++) { |
||||
words[i] = words[i].charAt(0).toUpperCase() + words[i].substr(1); |
||||
} |
||||
output = words.join(' '); |
||||
} |
||||
else { |
||||
output = label.charAt(0).toUpperCase() + label.slice(1); |
||||
} |
||||
return output; |
||||
} |
||||
|
||||
export const QUERY_BUILDER_FIELD_SALES = |
||||
{ |
||||
"properties->username": { |
||||
label: 'Username', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->name": { |
||||
label: 'Name', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->email": { |
||||
label: 'Email', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->address": { |
||||
label: 'Address', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->phone_number": { |
||||
label: 'Phone Number', |
||||
type: 'number', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->type_sales": { |
||||
label: 'Type Sales', |
||||
type: 'select', |
||||
valueSources: ['value'], |
||||
fieldSettings: { |
||||
listValues: [ |
||||
{ value: 'B2B', title: 'B2B' }, |
||||
{ value: 'B2C', title: 'B2C' }, |
||||
], |
||||
} |
||||
}, |
||||
} |
||||
|
||||
export const checkActMenup = (menuPath, actProp) => { |
||||
let foundObj; |
||||
let entireObj = JSON.parse(localStorage.getItem("menu_login")); |
||||
JSON.stringify(entireObj, (_, nestedValue) => { |
||||
if (nestedValue && nestedValue.url === menuPath) { |
||||
foundObj = nestedValue; |
||||
} |
||||
return nestedValue; |
||||
}); |
||||
|
||||
let output = false; |
||||
let actValue = actProp.trim().toLowerCase() |
||||
switch (actValue) { |
||||
case "create": |
||||
if (foundObj[actValue] === true) { |
||||
output = true; |
||||
} else { |
||||
output = false; |
||||
|
||||
} |
||||
case "read": |
||||
if (foundObj[actValue] === true) { |
||||
output = true; |
||||
} |
||||
case "update": |
||||
if (foundObj[actValue] === true) { |
||||
output = true; |
||||
} |
||||
case "delete": |
||||
if (foundObj[actValue] === true) { |
||||
output = true; |
||||
} |
||||
} |
||||
return output; |
||||
}; |
||||
|
||||
export const QUERY_BUILDER_FIELD_CUSTOMER = |
||||
{ |
||||
"properties->name": { |
||||
label: 'Name', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->buffer_radius": { |
||||
label: 'Buffer Radius', |
||||
type: 'number', |
||||
fieldSettings: { |
||||
min: 1, |
||||
}, |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->address": { |
||||
label: 'Address', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->income": { |
||||
label: 'Income', |
||||
type: 'number', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->store_manager": { |
||||
label: 'Store Manager', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
} |
||||
|
||||
export const QUERY_BUILDER_FIELD_OFFICE = |
||||
{ |
||||
"properties->company": { |
||||
label: 'Company', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->name": { |
||||
label: 'Name', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->employes": { |
||||
label: 'Employe', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
"properties->address": { |
||||
label: 'Alamat', |
||||
type: 'text', |
||||
valueSources: ['value'], |
||||
}, |
||||
} |
||||
|
||||
|
||||
export const getChildrenTree = (data) => |
||||
data.map((item, index) => { |
||||
if (item.subproyeks && item.subproyeks.length > 0) { |
||||
return { |
||||
"children": getChildrenTree(item.subproyeks), |
||||
"title": item.nama, |
||||
"key": Math.random(), |
||||
"id": item.id, |
||||
...item |
||||
} |
||||
} |
||||
return { |
||||
"title": item.nama, |
||||
"key": Math.random(), |
||||
...item |
||||
} |
||||
}) |
||||
|
||||
export const formatRupiah = (angka, prefix) => { |
||||
var number_string = angka.replace(/[^,\d]/g, '').toString(), |
||||
split = number_string.split(','), |
||||
sisa = split[0].length % 3, |
||||
rupiah = split[0].substr(0, sisa), |
||||
ribuan = split[0].substr(sisa).match(/\d{3}/gi); |
||||
var separator = ""; |
||||
if(ribuan){ |
||||
separator = sisa ? '.' : ''; |
||||
rupiah += separator + ribuan.join('.'); |
||||
} |
||||
|
||||
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah; |
||||
return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : ''); |
||||
} |
||||
|
||||
export const renderFormatRupiah = (text, prefix) => { |
||||
text = text.split('.')[0]; |
||||
if (text) { |
||||
return formatRupiah(text, prefix) |
||||
} else { |
||||
return "-" |
||||
} |
||||
} |
||||
|
||||
export const formatNumber = (angka) => { |
||||
var number_string = angka.replace(/[^,\d]/g, '').toString(), |
||||
split = number_string.split(','), |
||||
sisa = split[0].length % 3, |
||||
rupiah = split[0].substr(0, sisa), |
||||
ribuan = split[0].substr(sisa).match(/\d{3}/gi); |
||||
var separator = ""; |
||||
if(ribuan){ |
||||
separator = sisa ? '.' : ''; |
||||
rupiah += separator + ribuan.join('.'); |
||||
} |
||||
|
||||
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah; |
||||
return rupiah |
||||
} |
||||
|
||||
|
||||
export const formatThousand = (x) => { |
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); |
||||
} |
||||
|
||||
export const formatLargeNumber = (num) => { |
||||
const formattedNum = formatThousand(num); |
||||
if (num >= 1000000000000) { |
||||
return `${(num / 1000000000000).toFixed(1)}T`; |
||||
} else if (num >= 1000000000) { |
||||
return `${(num / 1000000000).toFixed(1)}M`; |
||||
} else if (num >= 1000000) { |
||||
return `${(num / 1000000).toFixed(1)}Jt`; |
||||
} |
||||
return formattedNum; |
||||
}; |
||||
/* |
||||
Using it: |
||||
sortBy(data, { |
||||
prop: "date", |
||||
desc: true, |
||||
parser: function (item) { |
||||
return item.toUpperCase(); |
||||
} |
||||
}); |
||||
*/ |
||||
export const sortBy = (function () { |
||||
var toString = Object.prototype.toString, |
||||
parse = function (x) { return x; }, |
||||
getItem = function (x) { |
||||
var isObject = x != null && typeof x === "object"; |
||||
var isProp = isObject && this.prop in x; |
||||
return this.parser(isProp ? x[this.prop] : x); |
||||
}; |
||||
|
||||
/** |
||||
* Sorts an array of elements. |
||||
* |
||||
* @param {Array} array: the collection to sort |
||||
* @param {Object} cfg: the configuration options |
||||
* @property {String} cfg.prop: property name (if it is an Array of objects) |
||||
* @property {Boolean} cfg.desc: determines whether the sort is descending |
||||
* @property {Function} cfg.parser: function to parse the items to expected type |
||||
* @return {Array} |
||||
*/ |
||||
return function sortby (array, cfg) { |
||||
if (!(array instanceof Array && array.length)) return []; |
||||
if (toString.call(cfg) !== "[object Object]") cfg = {}; |
||||
if (typeof cfg.parser !== "function") cfg.parser = parse; |
||||
cfg.desc = !!cfg.desc ? -1 : 1; |
||||
return array.sort(function (a, b) { |
||||
a = getItem.call(cfg, a); |
||||
b = getItem.call(cfg, b); |
||||
return cfg.desc * (a < b ? -1 : +(a > b)); |
||||
}); |
||||
}; |
||||
|
||||
}()); |
||||
|
||||
|
||||
export const uniqueKeyValues = (arr, key) => { |
||||
return [... new Set(arr.map((obj) => {return obj[key]}))]; |
||||
} |
||||
|
||||
export const renderLabelStatus = (text) => { |
||||
let label = text; |
||||
if (text === 'fom' || text === 'fot' || text === 'po') { |
||||
label = text.toUpperCase(); |
||||
} |
||||
return label; |
||||
} |
||||
|
||||
export const formatRibuanDecimal = (n) => { |
||||
let parts=n.toString().split("."); |
||||
return "Rp. " + parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".") + (parts[1] ? "," + parts[1] : ""); |
||||
} |
||||
|
||||
export const capitalizeFirstLetter = (string) => { |
||||
return string.charAt(0).toUpperCase() + string.slice(1); |
||||
} |
||||
|
||||
@ -1,154 +1,172 @@
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row |
||||
} from 'reactstrap'; |
||||
import { Select } from 'antd'; |
||||
import moment from 'moment'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
const { Option } = Select |
||||
|
||||
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, company_id, listCompany, role_name }) => { |
||||
const [id, setId] = useState(0) |
||||
const [projectType, setProjectType] = useState('') |
||||
const [uom, setUom] = useState('') |
||||
const [description, setDescription] = useState('') |
||||
const [unitPrice, setUnitPrice] = useState() |
||||
const [selectedCompany, setSelectedCompany] = useState(null) |
||||
const { t } = useTranslation(); |
||||
|
||||
|
||||
|
||||
useEffect(() => { |
||||
if (typeDialog === "Edit") { |
||||
setId(dataEdit.id) |
||||
setDescription(dataEdit.description) |
||||
setUnitPrice(dataEdit.unit_price) |
||||
setUom(dataEdit.uom) |
||||
setProjectType(dataEdit.name) |
||||
setSelectedCompany(dataEdit.company_id) |
||||
} else { |
||||
setId(0) |
||||
} |
||||
}, [dataEdit, openDialog]) |
||||
|
||||
const handleSave = () => { |
||||
let data = ''; |
||||
if (typeDialog === "Save") { |
||||
if (role_name === 'Super Admin') { |
||||
company_id = selectedCompany |
||||
} |
||||
data = { |
||||
name: projectType, |
||||
description, |
||||
company_id: company_id |
||||
} |
||||
|
||||
closeDialog('save', data); |
||||
} else { |
||||
if (role_name === 'Super Admin') { |
||||
company_id = selectedCompany |
||||
} |
||||
data = { |
||||
id, |
||||
name: projectType, |
||||
description, |
||||
company_id: company_id |
||||
} |
||||
closeDialog('edit', data); |
||||
} |
||||
setId(0) |
||||
setDescription('') |
||||
setSelectedCompany(null) |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
setId(0) |
||||
setDescription('') |
||||
setSelectedCompany(null) |
||||
} |
||||
|
||||
const onChangeCompany = (val) => { |
||||
setSelectedCompany(val); |
||||
}; |
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('nameProjectType')}</Label> |
||||
<Input type="text" value={projectType} onChange={(e) => setProjectType(e.target.value)} placeholder={t('inputName')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('description')}</Label> |
||||
<Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
{role_name === 'Super Admin' && |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize"> |
||||
{t('company')}<span style={{ color: "red" }}>*</span> |
||||
</Label> |
||||
<Select |
||||
showSearch |
||||
filterOption={(inputValue, option) => |
||||
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
||||
} |
||||
value={selectedCompany} |
||||
defaultValue={selectedCompany} |
||||
onChange={onChangeCompany} |
||||
style={{ width: "100%" }} |
||||
> |
||||
{listCompany.map((res) => ( |
||||
<Option key={res.id} value={res.id}> |
||||
{res.company_name} |
||||
</Option> |
||||
))} |
||||
</Select> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
} |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Resource</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
|
||||
{/* <DialogMap |
||||
openDialog={openDialogMap} |
||||
closeDialog={handleCloseDialogMap} |
||||
toggleDialog={() => toggleMapDialog} |
||||
dataEdit={dataEdit} |
||||
workArea_={workArea} |
||||
lat_={lat} |
||||
lon_={lon} |
||||
radius_={radius} |
||||
/> */} |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default DialogForm; |
||||
import React, { useEffect, useState } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row, CustomInput |
||||
} from 'reactstrap'; |
||||
import { Select } from 'antd'; |
||||
import moment from 'moment'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
const { Option } = Select |
||||
|
||||
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, company_id, listCompany, role_name }) => { |
||||
const [id, setId] = useState(0) |
||||
const [projectType, setProjectType] = useState('') |
||||
const [uom, setUom] = useState('') |
||||
const [description, setDescription] = useState('') |
||||
const [unitPrice, setUnitPrice] = useState() |
||||
const [selectedCompany, setSelectedCompany] = useState(null) |
||||
const [isMultiLocation, setIsMultiLocation] = useState(false); |
||||
const { t } = useTranslation(); |
||||
|
||||
const handleIsMultiLocationChange = () => { |
||||
setIsMultiLocation(!isMultiLocation); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
if (typeDialog === "Edit") { |
||||
setId(dataEdit.id) |
||||
setDescription(dataEdit.description) |
||||
setUnitPrice(dataEdit.unit_price) |
||||
setUom(dataEdit.uom) |
||||
setProjectType(dataEdit.name) |
||||
setSelectedCompany(dataEdit.company_id) |
||||
setIsMultiLocation(dataEdit.is_multiLocation) |
||||
} else { |
||||
handleClear() |
||||
} |
||||
}, [dataEdit, openDialog]) |
||||
|
||||
const handleSave = () => { |
||||
let data = ''; |
||||
if (role_name === 'Super Admin') { |
||||
company_id = selectedCompany |
||||
} |
||||
if (typeDialog === "Save") { |
||||
data = { |
||||
name: projectType, |
||||
description, |
||||
company_id: parseInt(company_id), |
||||
is_multiLocation: isMultiLocation |
||||
} |
||||
|
||||
closeDialog('save', data); |
||||
} else { |
||||
data = { |
||||
id, |
||||
name: projectType, |
||||
description, |
||||
company_id: parseInt(company_id), |
||||
is_multiLocation: isMultiLocation |
||||
} |
||||
closeDialog('edit', data); |
||||
} |
||||
handleClear(); |
||||
} |
||||
|
||||
const handleClear = () => { |
||||
setId(0) |
||||
setProjectType('') |
||||
setDescription('') |
||||
setSelectedCompany(null) |
||||
setIsMultiLocation(false) |
||||
|
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none'); |
||||
handleClear(); |
||||
} |
||||
|
||||
const onChangeCompany = (val) => { |
||||
setSelectedCompany(val); |
||||
}; |
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('nameProjectType')}</Label> |
||||
<Input type="text" value={projectType} onChange={(e) => setProjectType(e.target.value)} placeholder={t('inputName')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('description')}</Label> |
||||
<Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Is Multi Location</Label> |
||||
<div> |
||||
<CustomInput type="switch" id="isMultiLocationSwitch" name="isMultiLocationSwitch" checked={isMultiLocation} onChange={handleIsMultiLocationChange} /> |
||||
</div> |
||||
</FormGroup> |
||||
</Col> |
||||
{ |
||||
role_name === 'Super Admin' && ( |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize"> |
||||
{t('company')}<span style={{ color: "red" }}>*</span> |
||||
</Label> |
||||
<Select |
||||
showSearch |
||||
filterOption={(inputValue, option) => |
||||
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
||||
} |
||||
value={selectedCompany} |
||||
defaultValue={selectedCompany} |
||||
onChange={onChangeCompany} |
||||
style={{ width: "100%" }} |
||||
> |
||||
{listCompany.map((res) => ( |
||||
<Option key={res.id} value={res.id}> |
||||
{res.company_name} |
||||
</Option> |
||||
))} |
||||
</Select> |
||||
</FormGroup> |
||||
</Col> |
||||
) |
||||
} |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Resource</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
|
||||
{/* <DialogMap |
||||
openDialog={openDialogMap} |
||||
closeDialog={handleCloseDialogMap} |
||||
toggleDialog={() => toggleMapDialog} |
||||
dataEdit={dataEdit} |
||||
workArea_={workArea} |
||||
lat_={lat} |
||||
lon_={lon} |
||||
radius_={radius} |
||||
/> */} |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default DialogForm; |
||||
|
||||
Loading…
Reference in new issue