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