@agung_dhewe/webapps 1.1.2

package/src/generator/templates/moduleHeaderEdit.mjs.ejs

@@ -0,0 +1,807 @@
+import Context from './<%= moduleName %>-context.mjs'
+import * as Extender from './<%= moduleName %>-ext.mjs'
+import * as pageHelper from '/public/libs/webmodule/pagehelper.mjs'
+
+const CurrentState = {}
+const Crsl =  Context.Crsl
+const CurrentSectionId = Context.Sections.<%= modulePart %>
+const CurrentSection = Crsl.Items[CurrentSectionId]
+const Source = Context.Source
+
+
+const TitleWhenNew = 'New <%= title  %>'
+const TitleWhenView = 'View <%= title  %>'
+const TitleWhenEdit = 'Edit <%= title  %>'
+const EditModeText = 'Edit'
+const LockModeText = 'Lock'
+
+const btn_edit = new $fgta5.ActionButton('<%= modulePart %>-btn_edit')
+const btn_save = new $fgta5.ActionButton('<%= modulePart %>-btn_save')
+const btn_new = new $fgta5.ActionButton('<%= modulePart %>-btn_new', '<%= moduleSection %>-new')
+const btn_del = new $fgta5.ActionButton('<%= modulePart %>-btn_delete')
+const btn_reset = new $fgta5.ActionButton('<%= modulePart %>-btn_reset')
+const btn_prev = new $fgta5.ActionButton('<%= modulePart %>-btn_prev')
+const btn_next = new $fgta5.ActionButton('<%= modulePart %>-btn_next')
+
+const btn_recordstatus = document.getElementById('<%= moduleSection %>-btn_recordstatus')
+const btn_logs = document.getElementById('<%= moduleSection %>-btn_logs')
+const btn_about = document.getElementById('<%= moduleSection %>-btn_about')
+
+const frm = new $fgta5.Form('<%= modulePart %>-frm');<% fields.forEach(field => { %>
+const <%= field.inputname %> = frm.Inputs['<%= field.elementId %>']<% }) %>	
+const obj_createby = document.getElementById('fRecord-section-createby')
+const obj_createdate = document.getElementById('fRecord-section-createdate')
+const obj_modifyby = document.getElementById('fRecord-section-modifyby')
+const obj_modifydate = document.getElementById('fRecord-section-modifydate')
+
+
+export const Section = CurrentSection
+
+export async function init(self, args) {
+	console.log('initializing <%= modulePart %> ...')
+	
+
+	CurrentSection.addEventListener($fgta5.Section.EVT_BACKBUTTONCLICK, async (evt)=>{
+		backToList(self, evt)
+	})
+
+	frm.addEventListener('locked', (evt) => { frm_locked(self, evt) });
+	frm.addEventListener('unlocked', (evt) => { frm_unlocked(self, evt) });
+	frm.render()
+
+	btn_edit.addEventListener('click', (evt)=>{ btn_edit_click(self, evt) })
+	btn_save.addEventListener('click', (evt)=>{ btn_save_click(self, evt)  })
+	btn_new.addEventListener('click', (evt)=>{ btn_new_click(self, evt)})
+	btn_del.addEventListener('click', (evt)=>{ btn_del_click(self, evt)})
+	btn_reset.addEventListener('click', (evt)=>{ btn_reset_click(self, evt)})
+	btn_prev.addEventListener('click', (evt)=>{ btn_prev_click(self, evt)})
+	btn_next.addEventListener('click', (evt)=>{ btn_next_click(self, evt)})
+
+
+	btn_recordstatus.addEventListener('click', evt=>{ btn_recordstatus_click(self, evt) })	
+	btn_logs.addEventListener('click', evt=>{ btn_logs_click(self, evt) })	
+	btn_about.addEventListener('click', evt=>{ btn_about_click(self, evt) })
+
+
+	<% fieldHandles.forEach(field => { %>
+	// <%= field.component %>: <%= field.inputname %><% field.handles.forEach(hnd => { %>
+	<%= field.inputname %>.addEventListener('<%= hnd.eventname %>', <% if (hnd.eventname=='selecting') { %>async <% } %>(evt)=>{
+		const fn_<%= hnd.eventname %>_name = '<%= field.inputname %>_<%= hnd.eventname %>'
+		const fn_<%= hnd.eventname %> = Extender[fn_<%= hnd.eventname %>_name]
+		if (typeof fn_<%= hnd.eventname %> === 'function') {
+			// create function di Extender<% if (field.component=='Combobox' && hnd.eventname=='selecting') { %> (jika perlu)<% } %>:
+			// export async function <%= field.inputname %>_<%= hnd.eventname %>(self, <%= field.inputname %>, frm, evt)
+			fn_<%= hnd.eventname %>(self, <%= field.inputname %>, frm, evt)
+		} else {<% if (field.component=='Combobox' && hnd.eventname=='selecting') { %>
+			// default selecting
+			const cbo = evt.detail.sender
+			const dialog = evt.detail.dialog
+			const searchtext = evt.detail.searchtext!=null ? evt.detail.searchtext : ''
+			const url = `${Context.appsUrls.<%= hnd.appId %>.url}/<%- hnd.path %>`
+			const criteria = {
+				searchtext: searchtext,
+			}
+
+			const fn_<%= hnd.eventname %>_criteria_name = '<%= field.inputname %>_<%= hnd.eventname %>_criteria'
+			const fn_<%= hnd.eventname %>_criteria = Extender[fn_<%= hnd.eventname %>_criteria_name]
+			if (typeof fn_<%= hnd.eventname %>_criteria === 'function') {
+				fn_<%= hnd.eventname %>_criteria(self, <%= field.inputname %>, criteria)
+			}
+
+			cbo.wait()
+			try {
+				const result = await Module.apiCall(url, {
+					criteria,
+					offset: evt.detail.offset,
+					limit: evt.detail.limit,
+				}) 
+
+				for (var row of result.data) {
+					evt.detail.addRow(row.<%= hnd.field_value %>, row.<%= hnd.field_text %>, row)
+				}
+
+				dialog.setNext(result.nextoffset, result.limit)
+			} catch (err) {
+				$fgta5.MessageBox.error(err.message)
+			} finally {
+				cbo.wait(false)
+			}
+
+			<% } else { %>	
+			console.warn('Extender.<%= field.inputname %>_<%= hnd.eventname %> is not implemented')<% } %>
+		}		
+	})
+	<% }) %>
+	<% }) %>	
+	
+}
+
+export async function openSelectedData(self, params) {
+	console.log('openSelectedData')
+
+	let mask = $fgta5.Modal.createMask()
+	try {
+		<% comboboxList.forEach(cbo => { %><%= cbo.inputname %>.clear()
+		<% }) %>			
+		const id = params.keyvalue
+		const data = await openData(self, id)
+
+		<% if (headerHasUpload) { %>
+		dataOpened(self, data)<% } %>
+
+		CurrentState.currentOpenedId = id
+
+		const fn_iseditdisabled_name = '<%= modulePart %>_isEditDisabled'
+		const fn_iseditdisabled = Extender[fn_iseditdisabled_name]
+		if (typeof fn_iseditdisabled === 'function') {
+			const editDisabled = fn_iseditdisabled(self, data)
+			CurrentState.editDisabled = editDisabled
+		}
+
+		// disable primary key
+		setPrimaryKeyState(self, {disabled:true})
+
+		frm.setData(data)
+		frm.acceptChanges()
+		frm.lock()
+
+		const fn_formopened_name = '<%= modulePart %>_formOpened'
+		const fn_formopened = Extender[fn_formopened_name]
+		if (typeof fn_formopened === 'function') {
+			fn_formopened(self, frm, CurrentState)
+		}
+
+	} catch (err) {
+		CurrentState.currentOpenedId = null
+		throw err
+	} finally {
+		mask.close()
+		mask = null
+	}
+}
+
+
+
+export function getHeaderForm(self) {
+	return frm
+}
+
+export function getForm(self) {
+	return frm
+}
+
+export function clearForm(self, text) {
+	frm.clear(text)
+}
+
+export function disableNextButton(self, disabled=true) {
+	btn_next.disabled = disabled
+}
+
+export function disablePrevButton(self, disabled=true) {
+	btn_prev.disabled = disabled
+}
+
+export function keyboardAction(self, actionName) {
+	if (actionName=='save') {
+		frm.acceptInput()
+		btn_save.click()
+	} else if (actionName=='new') {
+		frm.acceptInput()
+		btn_new.click()
+	} else if (actionName=='escape') {
+		frm.acceptInput()
+		if (frm.isLocked() || frm.isNew()) {
+			backToList(self)
+		} else {
+			btn_edit.click() // untuk lock data
+		}
+	} else if (actionName=='togleEdit') {
+		frm.acceptInput()
+		btn_edit.click()
+	} else if (actionName=='right') {
+		btn_next.click()
+	} else if (actionName=='left') {
+		btn_prev.click()
+	}
+}
+
+
+async function newData(self, datainit) {
+	try {
+		<% if (headerHasUpload) { %>
+		<% uploadFields.forEach(uploadfield => { %>
+		<%= uploadfield.inputname %>.setDownloadLink(null)
+		
+		<% }) %><% } %>frm.newData(datainit)
+		frm.acceptChanges()
+		frm.setAsNewData()
+	} catch (err) {
+		throw err
+	}
+}
+
+async function openData(self, id) {
+	const url = `/${Context.moduleName}/header-open`
+	try {
+		const result = await Module.apiCall(url, { id }) 
+		return result 
+	} catch (err) {
+		throw err	
+	} 	
+}
+
+async function createData(self, data, formData) {
+	const url = `/${Context.moduleName}/header-create`
+	try {
+		const result = await Module.apiCall(url, { data, source: Source }, formData) 
+		return result 
+	} catch (err) {
+		throw err	
+	} 	
+}
+
+
+async function updateData(self, data, formData) {
+	const url = `/${Context.moduleName}/header-update`
+	try {
+		const result = await Module.apiCall(url, { data, source: Source }, formData) 
+		return result 
+	} catch (err) {
+		throw err	
+	} 
+}
+
+
+async function deleteData(self, id) {
+	const url = `/${Context.moduleName}/header-delete`
+	try {
+		const result = await Module.apiCall(url, { id, source: Source }) 
+		return result 
+	} catch (err) {
+		throw err	
+	} 
+}
+
+
+async function backToList(self, evt) {
+	// cek apakah ada perubahan data
+	let goback = false
+	if (frm.isChanged()) {
+		// ada perubahan data, konfirmasi apakah mau lanjut back
+		var ret = await $fgta5.MessageBox.confirm(Module.BACK_CONFIRM)
+		if (ret=='ok') {
+			// user melanjutkan back, walaupun data berubah
+			// reset dahulu data form
+			frm.reset()
+			goback = true
+		}
+	} else {
+		goback = true
+	}
+
+	if (goback) {
+		frm.lock()
+		const listId =  Context.Sections.<%= moduleSection %>List
+		const listSection = Crsl.Items[listId]
+		listSection.show({direction: 1})
+	}
+}
+
+async function  frm_locked(self, evt) {
+	console.log('frm_locked')
+
+	CurrentSection.Title = TitleWhenView
+
+	btn_edit.setText(EditModeText)
+
+	btn_edit.disabled = false
+	btn_save.disabled = true
+	btn_new.disabled = false
+	btn_del.disabled = true
+	btn_reset.disabled = true
+	btn_prev.disabled = false
+	btn_next.disabled = false
+
+	
+	// Extender untuk event locked
+	const fn_name = '<%= modulePart %>_formLocked'
+	const fn = Extender[fn_name]
+	if (typeof fn === 'function') {
+		fn(self, frm, CurrentState)
+	}
+
+	if (CurrentState.editDisabled) {
+		// jika karena suatu kondisi data mengharuskan data tidak boleh diedit
+		btn_edit.disabled = true
+	}
+
+	<% entitiesDetil.forEach(entity => { %>
+	// trigger lock event di <%= entity.name %>
+	self.Modules.<%= entity.moduleSection %>List.headerLocked(self)
+	self.Modules.<%= entity.moduleSection %>Edit.headerLocked(self)
+	<% }) %>	
+
+}
+
+async function  frm_unlocked(self, evt) {
+	console.log('frm_unlocked')
+
+	if (frm.isNew()) {
+		CurrentSection.Title = TitleWhenNew
+	} else {
+		CurrentSection.Title = TitleWhenEdit
+	}
+
+	btn_edit.setText(LockModeText)
+
+	btn_edit.disabled = false
+	btn_save.disabled = false
+	btn_new.disabled = true
+	btn_del.disabled = false
+	btn_reset.disabled = false
+	btn_prev.disabled = true
+	btn_next.disabled = true
+
+
+	// Extender untuk event Unlocked
+	const fn_name = '<%= modulePart %>_formUnlocked'
+	const fn = Extender[fn_name]
+	if (typeof fn === 'function') {
+		fn(self, frm)
+	}
+
+	<% entitiesDetil.forEach(entity => { %>
+	// trigger unlock event di <%= entity.name %>
+	self.Modules.<%= entity.moduleSection %>List.headerUnlocked(self)
+	self.Modules.<%= entity.moduleSection %>Edit.headerUnlocked(self)	
+	<% }) %>	
+}
+
+async function setPrimaryKeyState(self, opt) {
+	const obj_pk = frm.getPrimaryInput()
+	obj_pk.disabled = opt.disabled===true
+	if (opt.placeholder!==undefined) {
+		obj_pk.placeholder = opt.placeholder
+	}
+	if (opt.value!==undefined) {
+		obj_pk.value = opt.value
+	}
+}
+
+<% if (headerHasUpload) { %>
+async function downloadFile(self, objectname, filename) {
+	console.log(`downloading ${filename}`)
+	const url = `/download`
+	try {
+		const param = {
+			bucketname: Context.moduleName,
+			objectname: objectname
+		}
+		await Module.download(url, param) 
+	} catch (err) {
+		console.error(err)
+		await $fgta5.MessageBox.error(err.message)
+	}
+}
+
+async function dataOpened(self, data) {
+	const docid = data.<%= headerPrimaryKey %>
+
+	<% uploadFields.forEach(uploadfield => { %>
+	<%= uploadfield.inputname %>.setDownloadLink(data.<%= uploadfield.fieldname %>, async ()=>{
+		const filename = data.<%= uploadfield.fieldname %>
+		const objectname = `${docid}/<%= uploadfield.fieldname %>`
+		await downloadFile(self, objectname, filename)
+	})
+	<% }) %>	
+}
+<% } %>
+
+async function btn_edit_click(self, evt) {
+	console.log('btn_edit_click')
+
+	if (frm.isLocked()) {
+		// user mau inlock
+		frm.lock(false)
+	} else {
+		if (frm.isChanged() || frm.isNew()) {
+			await $fgta5.MessageBox.warning(Module.EDIT_WARNING)
+			return
+		}
+		frm.lock(true)
+	}
+}
+
+async function btn_new_click(self, evt) {
+	console.log('btn_new_click')
+	const sourceSection = evt.target.getAttribute('data-sectionsource') 
+
+	const <%= moduleList %> = self.Modules.<%= moduleList %>
+	const listsecid = <%= moduleList %>.Section.Id
+	const fromListSection = sourceSection===listsecid
+	if (fromListSection) {
+		// klik new dari list (tidak perlu cek ada perubahan data)
+		// tampilkan dulu form
+		await CurrentSection.show()
+	} else {
+		// klik new dari form
+		let cancel_new = false
+		if (frm.isChanged()) {
+			const ret = await $fgta5.MessageBox.confirm(Module.NEWDATA_CONFIRM)
+			if (ret=='cancel') {
+				cancel_new = true
+			}
+		}
+		if (cancel_new) {
+			return
+		}
+	}
+
+	if (frm.AutoID) {
+		setPrimaryKeyState(self, {disabled:true, placeholder:'[AutoID]'})
+	} else {
+		setPrimaryKeyState(self, {disabled:false, placeholder:'ID'})
+	}
+
+	try {
+
+		// inisiasi data baru
+		let datainit = {<% defaultInits.forEach(setdefault => { %>
+			<%- setdefault %>,
+		<% }) %>}
+
+
+		// jika perlu modifikasi data initial,
+		// atau dialog untuk opsi data baru, dapat dibuat di Extender
+		const fn_newdata_name = '<%= modulePart %>_newData'
+		const fn_newdata = Extender[fn_newdata_name]
+		if (typeof fn_newdata === 'function') {
+			await fn_newdata(self, datainit, frm)
+		}
+
+		// buat data baru
+		await newData(self, datainit)
+
+		// buka lock, agar user bisa edit
+		frm.lock(false)
+
+		// matikan tombol edit dan del saat kondisi form adalah data baru 
+		btn_edit.disabled = true
+		btn_del.disabled = true
+	} catch (err) {
+		console.error(err)
+		await $fgta5.MessageBox.error(err.message)
+		if (fromListSection) {
+			// jika saat tombol baru dipilih saat di list, tampilan kembalikan ke list
+			self.Modules.<%= moduleList %>.Section.show()
+		}
+	}
+}
+
+async function btn_save_click(self, evt) {
+	console.log('btn_save_click')
+
+
+	// Extender Autofill
+	const fn_autofill_name = '<%= modulePart %>_autofill'
+	const fn_autofill = Extender[fn_autofill_name]
+	if (typeof fn_autofill === 'function') {
+		await fn_autofill(self, frm)
+	}
+
+	// cek apakah data valid
+	const valid = frm.validate()
+	if (!valid) {
+		const message = frm.getLastError()
+		console.warn(message)
+		$fgta5.MessageBox.warning(message)
+		return
+	}
+
+
+	// abaikan jika bukan data baru dan tidak ada perubahan
+	let dataToSave
+	const isNewData = frm.isNew()
+	if (!isNewData) {
+		// cek dulu apakah ada perubahaan
+		if (!frm.isChanged()) {
+			// skip save jika tidak ada perubahan data
+			console.log('tidak ada perubahan data, skip save')
+			return
+		} 
+		
+		// ambil hanya data yang berubah
+		dataToSave = frm.getDataChanged()
+
+	} else {
+
+		// untuk posisi data baru, ambil semua data
+		dataToSave = frm.getData()		
+	}
+
+	// Extender Saving
+	const fn_datasaving_name = '<%= modulePart %>_dataSaving'
+	const fn_datasaving = Extender[fn_datasaving_name]
+	if (typeof fn_datasaving === 'function') {
+		await fn_datasaving(self, dataToSave, frm)
+	}
+
+
+	// bila ada file, upload filenya
+	let formData = null
+	const files = frm.getFiles()
+	if (files!=null) {
+		formData = new FormData();
+		for (let name in files) {
+			const file = files[name]
+			formData.append(name, file)
+		}
+	}	
+
+	let mask = $fgta5.Modal.createMask()
+	try {
+		let result
+
+		if (isNewData) {
+			result = await createData(self, dataToSave, formData)
+		} else {
+ 			result = await updateData(self, dataToSave, formData)
+		}
+
+		console.log('result', result)
+		const obj_pk = frm.getPrimaryInput()
+		const pk = obj_pk.getBindingData()
+		const idValue = result[pk]
+
+		console.log(`get data id ${idValue}`)
+		const data = await openData(self, idValue)
+		console.log('data', data)
+
+		<% if (headerHasUpload) { %>
+		dataOpened(self, data)<% } %>
+
+		CurrentState.currentOpenedId = idValue
+
+		if (frm.AutoID) {
+			console.log('update field ID di form')
+			obj_pk.value = idValue
+		} else {
+			// jika bukan autoID, kunci field PK menjadi disabled
+			setPrimaryKeyState(self, {disabled:true})
+
+		}
+
+		// update form
+		frm.setData(data)	
+
+
+		// Extender Saving
+		const fn_datasaved_name = '<%= modulePart %>_dataSaved'
+		const fn_datasaved = Extender[fn_datasaved_name]
+		if (typeof fn_datasaved === 'function') {
+			await fn_datasaved(self, data, frm)
+		}
+
+
+		// persist perubahan di form
+		frm.acceptChanges()
+
+
+		if (isNewData) {
+			// saat new data, posisi button toggle edit akan disabled
+			// setelah berhasil save, nyalakan button edit (untuk lock)
+			btn_edit.disabled = false
+
+			// buat baris baru di grid
+			console.log('tamabah baris baru di grid')
+			self.Modules.<%= moduleList %>.addNewRow(self, data)
+		} else {
+			console.log('update data baris yang dibuka')
+			self.Modules.<%= moduleList %>.updateCurrentRow(self, data)
+		}
+
+	} catch (err) {
+		console.error(err)
+		await $fgta5.MessageBox.error(err.message)
+	} finally {
+		mask.close()
+		mask = null
+	}
+}
+
+async function btn_del_click(self, evt) {
+	console.log('btn_del_click')
+
+	// jika data masih dalam kondisi baru (belum di save, 
+	// perintah delete harus dibatalkan, 
+	// karena belum ada data di database)
+	const isNewData = frm.isNew()
+	if (isNewData) {
+		console.log('posisi data baru, skip delete')
+		return
+	}
+
+	const obj_pk = frm.getPrimaryInput()
+	const idValue = obj_pk.value
+
+	// konfirmasi untuk delete data
+	const resp = await $fgta5.MessageBox.confirm(Module.DELETE_CONFIRM + `id: ${idValue}`)
+	if (resp!='ok') {
+		return
+	}
+
+	console.log('delete data')
+	let mask = $fgta5.Modal.createMask()
+	try {
+		const result = await deleteData(self, idValue)
+		
+		// hapus current row yang dipilih di list
+		self.Modules.<%= moduleList %>.removeCurrentRow(self)
+		
+		// kembali ke list
+		self.Modules.<%= moduleList %>.Section.show()
+
+
+		// lock kembali form
+		frm.lock()
+
+	} catch (err) {
+		console.error(err)
+		await $fgta5.MessageBox.error(err.message)
+	} finally {
+		mask.close()
+		mask = null
+	}
+
+}
+
+
+async function btn_reset_click(self, evt) {
+	console.log('btn_reset_click')
+
+	const isNewData = frm.isNew()
+	if (isNewData) {
+		// untuk data baru, di reset berarti sama seperti membuat data baru
+		console.log('reset: buat data baru')
+		newData(self)
+	} else {
+		if (frm.isChanged()) {
+			// ada perubahan data, tampilkan konfirmasi perubahan data
+			var resp = await $fgta5.MessageBox.confirm(Module.RESET_CONFIRM)
+			if (resp!='ok') {
+				// user klik tombil cancel
+				console.log('cancel reset')
+				return
+			}
+			console.log('reset form')
+			frm.reset()
+		} else {
+			console.log('tidak ada perubahan data, reset data tidak dieksekusi')
+		}
+	}
+
+}
+
+async function btn_prev_click(self, evt) {
+	console.log('btn_prev_click')
+	self.Modules.<%= moduleList %>.selectPreviousRow(self)
+}
+
+async function btn_next_click(self, evt) {
+	console.log('btn_next_click')
+	self.Modules.<%= moduleList %>.selectNextRow(self)
+}
+
+
+
+
+async function btn_recordstatus_click(self, evt) {
+	console.log('btn_recordstatus_click')
+	const params = {
+		Context,
+		sectionReturn: CurrentSection
+	}
+	
+	pageHelper.openSection(self, 'fRecord-section', params, async ()=>{
+
+		let mask = $fgta5.Modal.createMask()
+		try {
+			// ambil data
+			const pk = frm.getPrimaryInput()
+			const id = pk.value
+			const data = await openData(self, id)
+
+			obj_createby.innerHTML = data._createby
+			obj_createdate.innerHTML = data._createdate
+			obj_modifyby.innerHTML = data._modifyby
+			obj_modifydate.innerHTML = data._modifydate
+
+			const fn_addrecordinfo_name = '<%= modulePart %>_addRecordInfo'
+			const fn_addrecordinfo = Extender[fn_addrecordinfo_name]
+			if (typeof fn_addrecordinfo === 'function') {
+				await fn_addrecordinfo(self, data)
+			}
+
+		} catch (err) {
+			console.error(err)
+			$fgta5.MessageBox.error(err.message)
+		} finally {
+			mask.close()
+			mask = null
+		}
+	})
+
+}
+
+async function btn_logs_click(self, evt) {
+	const params = {
+		Context,
+		sectionReturn: CurrentSection
+	}
+
+	pageHelper.openSection(self, 'fLogs-section', params, async ()=>{
+		// get log data
+		const pk = frm.getPrimaryInput()
+		const id = pk.value
+
+
+		let mask = $fgta5.Modal.createMask()
+		try {
+
+			const url = `${Context.appsUrls.core.url}/logs/list`
+			const criteria = {
+				module: Context.moduleName,
+				table: '<%= tablename %>',
+				id: id
+			}
+
+			const result = await Module.apiCall(url, {  
+				criteria
+			}) 
+
+			const sc = document.getElementById('fLogs-section')
+			const tbody = sc.querySelector('tbody')
+			pageHelper.renderLog(tbody, result.data)
+		} catch (err) {
+			console.error(err)
+			$fgta5.MessageBox.error(err.message)
+		} finally {
+			mask.close()
+			mask = null
+		}
+
+	})
+}
+
+async function btn_about_click(self, evt) {
+	const params = {
+		Context,
+		sectionReturn: CurrentSection
+	}
+	pageHelper.openSection(self, 'fAbout-section', params, async ()=>{
+		
+		const AboutSection = Crsl.Items['fAbout-section']
+		AboutSection.Title = 'About <%= title %>'
+
+		const section = document.getElementById('fAbout-section')
+
+		if ( document.getElementById('fAbout-section-fdescr') == null) {
+			const divDescr = document.createElement('div')
+			divDescr.setAttribute('id', 'fAbout-section-fdescr')
+			divDescr.setAttribute('style', 'padding: 0 0 10px 0')
+			divDescr.innerHTML = '<%= moduleDescription %>'
+			const divTopbar = section.querySelector('div[data-topbar]')
+			divTopbar.parentNode.insertBefore(divDescr, divTopbar.nextSibling);
+		}
+
+		if ( document.getElementById('fAbout-section-footer') == null) {
+			const divFooter = document.createElement('div')
+			divFooter.setAttribute('id', 'fAbout-section-footer')
+			divFooter.setAttribute('style', 'border-top: 1px solid #ccc; padding: 5px 0 0 0; margin-top: 50px')
+			divFooter.innerHTML = 'This module is generated by fgta5 generator at <%= timeGenerated %>'
+			section.appendChild(divFooter)
+		}
+		
+	})
+}