@agung_dhewe/webapps 1.1.2

package/src/generator/templates/moduleDetilList.html.ejs

@@ -0,0 +1,26 @@
+<div id="<%= modulePart %>-head">
+
+</div>
+
+
+<table id="<%= modulePart %>-tbl" fgta5-component="Gridview">
+	<thead>
+		<tr data-header key="<%= section.primaryKey %>">
+			<th rowselector></th><% fields.forEach(field => { %>
+			<th data-name="<%= field.dataName %>" binding="<%= field.binding %>" <%- field.additionalAttributes %>><%= field.label %></th><% }); %>
+		</tr>
+	</thead>
+</table>
+
+<div id="<%= modulePart %>-foot">
+
+</div>
+
+<div class="footer-buttons-container hidden">
+	<div></div>
+	<div>
+		<button id="<%=modulePart%>-btn_addrow" data-action="<%= moduleSection %>-addrow" data-sectionsource="<%=modulePart%>-section">Add Row</button>
+		<button id="<%=modulePart%>-btn_delrow">Delete Row</button>
+	</div>
+	<div></div>
+</div>

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

@@ -0,0 +1,319 @@
+import Context from './<%= moduleName %>-context.mjs'
+import * as Extender from './<%= moduleName %>-ext.mjs'
+
+const Crsl =  Context.Crsl
+const CurrentSectionId = Context.Sections.<%= modulePart %>
+const CurrentSection = Crsl.Items[CurrentSectionId]
+const CurrentState = {}
+
+const tbl =  new $fgta5.Gridview('<%= modulePart %>-tbl')
+
+const btn_addrow = document.getElementById('<%= modulePart %>-btn_addrow') // tidak perlu pakai action, karna action didefine di edit
+const btn_delrow = new $fgta5.ActionButton('<%= modulePart %>-btn_delrow')
+
+let headerForm
+
+export const Section = CurrentSection
+
+
+export async function init(self, args) {
+
+	// Back
+	CurrentSection.addEventListener($fgta5.Section.EVT_BACKBUTTONCLICK, async (evt)=>{
+		const sectionId =  Context.Sections.<%= headerModulePartEdit %>
+		const section = Crsl.Items[sectionId]
+		section.show({direction: 1})
+	})
+
+
+	tbl.addEventListener('nextdata', async evt=>{ tbl_nextdata(self, evt) })
+	tbl.addEventListener('sorting', async evt=>{ tbl_sorting(self, evt) })
+
+	// tambahkan event lain di extender: rowrender, rowremoving
+	// dapatkan parameternya di evt.detail
+	const fn_addTableEvents_name = '<%= sectionName %>List_addTableEvents'
+	const fn_addTableEvents = Extender[fn_addTableEvents_name]
+	if (typeof fn_addTableEvents === 'function') {
+		fn_addTableEvents(self, tbl)
+	}
+
+	if (Module.isMobileDevice()) {
+		tbl.addEventListener('cellclick', async evt=>{ tbl_cellclick(self, evt) })
+	} else {
+		tbl.addEventListener('celldblclick', async evt=>{ tbl_cellclick(self, evt) })
+	}
+
+
+	btn_delrow.addEventListener('click', (evt)=>{ btn_delrow_click(self, evt) })
+	
+	// Extend list detil
+	const fn_name = '<%= modulePart %>_init'
+	const fn_<%= modulePart %>_init = Extender[fn_name]
+	if (typeof fn_<%= modulePart %>_init === 'function') {
+		fn_<%= modulePart %>_init(self)
+	}
+
+	CurrentState.headerFormLocked = true 
+}
+
+export async function openList(self, params) {
+	const moduleHeaderEdit = params.moduleHeaderEdit
+	
+	headerForm = moduleHeaderEdit.getHeaderForm() 
+	const pk = headerForm.getPrimaryInput()
+	const id = pk.value 
+
+
+	// apabila mau menambahkan informasi saat detil list dibuka,
+	// misalnya menambahkan informasi beberapa data dari formHeader
+	// bisa di set pada Extender.<%= modulePart %>_openList :  bisa menggunakan template untuk di embed ke header pada detil list
+	const fn_name = '<%= modulePart %>_openList'
+	const fn_<%= modulePart %>_openList = Extender[fn_name]
+	if (typeof fn_<%= modulePart %>_openList === 'function') {
+		fn_<%= modulePart %>_openList(self, headerForm)
+	}
+	
+	const criteria={
+		<%= headerPrimaryKey %>: id
+	}
+	const sort = tbl.getSort()
+
+	tbl.clear()
+	tbl_loadData(self, {criteria, sort})
+
+
+	if (CurrentState.headerFormLocked) {
+ 		btn_addrow.setAttribute('disabled', '')
+		btn_delrow.disabled = true
+	} else {
+		btn_addrow.removeAttribute('disabled')
+		btn_delrow.disabled = false
+	}
+}
+
+export function getGrid(self) {
+	return tbl
+}
+
+export function getCurrentRow(self) {
+	return CurrentState.SelectedRow
+}
+
+export function addNewRow(self, data) {
+	const tr = tbl.addRow(data)
+	setCurrentRow(self, tr)
+}
+
+export function updateCurrentRow(self, data) {
+	const tr = CurrentState.SelectedRow
+
+	try {
+		tbl.updateRow(tr, data)
+	} catch (err) {
+		throw err
+	}
+}
+
+export function removeCurrentRow(self) {
+	const tr = CurrentState.SelectedRow
+	tbl.removeRow(tr)
+}
+
+export function selectNextRow(self) {
+	const tr = CurrentState.SelectedRow
+	if (tr.nextElementSibling) {
+		tbl.CurrentRow = tr.nextElementSibling
+		openRow(self, tr.nextElementSibling)
+	}
+}
+
+export function selectPreviousRow(self) {
+	const tr = CurrentState.SelectedRow
+	if (tr.previousElementSibling) {
+		tbl.CurrentRow = tr.previousElementSibling
+		openRow(self, tr.previousElementSibling)
+	}
+}
+
+export function setPagingButton(self,  editModule) {
+	const tr = CurrentState.SelectedRow
+	
+	if (tr.previousElementSibling) {
+		editModule.disablePrevButton(self, false)
+	} else {
+		editModule.disablePrevButton(self, true)
+	}
+
+	if (tr.nextElementSibling) {
+		editModule.disableNextButton(self, false)
+	} else {
+		editModule.disableNextButton(self, true)
+	}
+
+}
+
+export function headerLocked(self) {
+	console.log('header locked')
+	CurrentState.headerFormLocked = true 
+}
+
+export function headerUnlocked(self) {
+	console.log('header unlocked')
+	CurrentState.headerFormLocked = false
+}
+
+
+export function keyboardAction(self, actionName) {
+	if (actionName=='up') {
+		tbl.previousRecord()
+	} else if (actionName=='down') {
+		tbl.nextRecord()
+	} else if (actionName=='enter') {
+		const <%= moduleEdit %> = self.Modules.<%= moduleEdit %>
+		<%= moduleEdit %>.Section.show({}, (evt)=>{
+			openRow(self, tbl.CurrentRow)
+		})
+	}
+}
+
+
+function setCurrentRow(self, tr) {
+	CurrentState.SelectedRow = tr
+}
+
+
+async function openRow(self, tr) {
+	const keyvalue = tr.getAttribute('keyvalue')
+	const key = tr.getAttribute('key')
+
+	const <%= moduleEdit %> = self.Modules.<%= moduleEdit %>
+	<%= moduleEdit %>.clearForm(self, 'loading...')
+
+	try {
+		setCurrentRow(self, tr)
+		CurrentState.SelectedRow.keyValue = keyvalue
+		CurrentState.SelectedRow.key = key
+		await <%= moduleEdit %>.openSelectedData(self, {key:key, keyvalue:keyvalue})
+	} catch (err) {
+		console.error(err)
+		await $fgta5.MessageBox.error(err.message)
+
+		setCurrentRow(self, null)
+		CurrentSection.show() // kembalikan ke list kalau error saat buka data
+	}
+
+	// matikan atau nyalakan button prev/next sesuai kondisi
+	setPagingButton(self, <%= moduleEdit %>)
+}
+
+
+async function listRows(self, criteria, offset, limit, sort) {
+	const url = `/${Context.moduleName}/<%= sectionName %>-list`
+	try {
+		const columns = []
+		const result = await Module.apiCall(url, {  
+			columns,
+			criteria,
+			offset,
+			limit,
+			sort
+		}) 
+		return result 
+	} catch (err) {
+		throw err	
+	} 
+}
+
+
+async function deleteRows(self, data) {
+	const url = `/${Context.moduleName}/<%= sectionName %>-delete-rows`
+	try {
+		
+		const result = await Module.apiCall(url, { data }) 
+		if (result.deleted) {
+			return true
+		} else {
+			throw new Error(result.message)
+		}	
+	} catch (err) {
+		throw err	
+	} 
+}
+
+async function tbl_nextdata(self, evt) {
+	const criteria = evt.detail.criteria
+	const limit = evt.detail.limit
+	const offset = evt.detail.nextoffset
+	const sort = evt.detail.sort
+
+	await tbl_loadData(self, {criteria, limit, offset, sort})
+	tbl.scrollToFooter()
+}
+
+async function tbl_sorting(self, evt) {
+	tbl.clear()
+	const sort = evt.detail.sort
+	const criteria = evt.detail.Criteria
+	tbl_loadData(self, {criteria, sort})
+}
+
+async function tbl_cellclick(self, evt) {
+	const tr = evt.detail.tr
+
+	const <%= moduleEdit %> = self.Modules.<%= moduleEdit %>
+	<%= moduleEdit %>.Section.show({}, (evt)=>{
+		openRow(self, tr)
+	})
+}
+
+
+async function tbl_loadData(self, params={}) {
+	const { criteria={}, limit=0, offset=0, sort={} } = params
+	
+	let mask = $fgta5.Modal.createMask()
+	try {
+		const result = await listRows(self, criteria, offset,limit, sort)
+
+		if (offset===0) {
+			tbl.clear()
+		}
+		tbl.addRows(result.data)
+		tbl.setNext(result.nextoffset, result.limit)
+	} catch (err) {
+		console.error(err)
+		$fgta5.MessageBox.error(err.message)
+	} finally {
+		mask.close()
+		mask = null
+	}	
+}
+
+
+async function btn_delrow_click(self, evt) {
+	// cek dahulu apakah ada data yang dipilih
+	const selected = tbl.getSelected()
+	if (selected.length==0) {
+		return
+	}
+
+	// konfirmasi apakah yakin mau dihapus
+	var ret = await $fgta5.MessageBox.confirm(`Apakah anda yakin akan menghappus ${selected.length} data yang dipilih?`)
+	if (ret!='ok') {
+		return
+	}
+
+	let mask = $fgta5.Modal.createMask()
+	try {
+		const deleted = await deleteRows(self, selected)
+		if (deleted) {
+			tbl.removeSelected()
+		}
+	} catch (err) {
+		console.error(err)
+		$fgta5.MessageBox.error(err.message)
+	} finally {
+		mask.close()
+		mask = null
+	}
+	
+}

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

@@ -0,0 +1,53 @@
+<form id="<%= modulePart %>-frm" class="module-form" locked="true" autoid="<%= autoid %>" primarykey="<%= primaryKeyElementId %>"><% fields.forEach(field => { %>
+
+	<!-- <%= field.component %>: <%= field.fieldname %>-->	
+	<div id="<%= field.elementId %>-container" class="<%= field.cssContainer %>" field="<%= field.elementId %>">
+		<label for="<%= field.elementId %>"><%= field.label %></label>
+		<input id="<%= field.elementId %>"  fgta5-component="<%= field.component %>" placeholder="<%= field.placeholder %>" autocomplete="off" spellcheck="false" 
+			binding="<%= field.binding %>"<% field.additionalAttributes.forEach(config => { %>
+			<%- config %> <% }) %>
+		>
+	</div>
+<% }) %>	
+</form>
+
+
+<div id="panel-detil-selector" class="panel-detil <% if (detilCount==0) { %>hidden<% } %>">
+	<div panel-title>
+		Information Detil
+	</div>
+	<div panel-content><% sectionDetils.forEach(detil => { %>
+		<div class="panel-detil-row">
+			<div data-label><a href="javascript:void(0)" data-target-section="<%= detil.listModulePart %>" data-current-section="<%= modulePart %>"><%= detil.title %></a></div>
+			<div data-info>&nbsp</div>
+		</div><% }) %>
+
+		<div id="panel-detil-additionalinfo">
+			<!-- tambahkan additional info disini -->
+		</div>
+	</div>
+</div>
+ 
+
+<div class="panel-recordbar" <% if (detilCount==0) { %>data-view="nodetil"<% } %>>
+	<div><a id="<%= moduleSection %>-btn_recordstatus" href="javascript:void(0)" tabindex="-1">Record Status</a></div>
+	<div><a id="<%= moduleSection %>-btn_logs" href="javascript:void(0)" tabindex="-1">Logs</a></div>
+	<div><a id="<%= moduleSection %>-btn_about" href="javascript:void(0)" tabindex="-1">About</a></div>
+</div>
+
+
+<div class="footer-buttons-container hidden">
+	<div>
+		<button id="<%= modulePart %>-btn_prev"><span>&laquo;&laquo;</span></button>
+	</div>
+	<div>
+		<button id="<%= modulePart %>-btn_save">Save</button>
+		<button id="<%= modulePart %>-btn_edit">Edit</button>
+		<button id="<%= modulePart %>-btn_new" data-action="<%= moduleSection %>-new">New</button>
+		<button id="<%= modulePart %>-btn_reset">Reset</button>
+		<button id="<%= modulePart %>-btn_delete">Delete</button>
+	</div>
+	<div>
+		<button id="<%= modulePart %>-btn_next"><span>&raquo;&raquo;</span></button>
+	</div>
+</div>