@agung_dhewe/webapps 1.1.2

package/src/generator/templates/module-context.ejs

@@ -0,0 +1,16 @@
+const app = new $fgta5.Application('mainapp')
+const urlDir = 'public/modules/<%=moduleName%>'
+const Crsl = new $fgta5.SectionCarousell(app.Nodes.Main) 
+
+export default {
+	moduleName: '<%=moduleName%>',
+	app: app,
+	urlDir: urlDir,
+	Crsl: Crsl,
+	Sections: { <% sections.forEach(section => { %>
+		<%= section.sectionName %>: '<%= section.sectionElementId %>', <% }) %>
+	},
+	SectionMap: { <% sections.forEach(section => { %>
+		'<%= section.sectionElementId %>' : '<%= section.sectionName %>', <% }) %>
+	}
+}

package/src/generator/templates/module-ext-about.ejs

@@ -0,0 +1 @@
+<!-- about text here -->

package/src/generator/templates/module-ext-record.ejs

@@ -0,0 +1 @@
+<!-- tambahan informasi record, misalnya postby commitby, dlll -->

package/src/generator/templates/module-ext.html.ejs

@@ -0,0 +1,3 @@
+<!-- Additional Search Parameter-->
+<template name="custom-search-panel">
+</template>

package/src/generator/templates/module-ext.mjs.ejs

@@ -0,0 +1,21 @@
+import Context from './<%=moduleName%>-context.mjs'
+
+export async function init(self, args) {
+	console.log('initializing <%=moduleName%>Extender ...')
+
+	// tambahkan extender inisiasi module <%=moduleName%>
+
+
+	/* // contoh menambahkan content dari template extender
+	{
+		const target = secRec.querySelector('#fRecord-section div[name="column"][exteder]')
+		const tpl = document.querySelector('template[name="record-panel"]')
+		if (tpl!=null) {
+			const clone = tpl.content.cloneNode(true); // salin isi template
+			target.prepend(clone)
+		}
+	}
+	*/	
+}
+
+

package/src/generator/templates/module-logs.ejs

@@ -0,0 +1,14 @@
+	<table cellpadding="0" cellspacing="0">
+		<thead>
+			<tr>
+				<td class="logheader">Date Time</td>
+				<td class="logheader">User</td>
+				<td class="logheader">Action</td>
+				<td class="logheader">IP</td>
+				<td class="logheader">Remark</td>
+			</tr>
+		</thead>
+		<tbody>
+
+		</tbody>
+	</table>

package/src/generator/templates/module.ejs.ejs

@@ -0,0 +1,48 @@
+<% sections.forEach(section => { %><section id="<%= section.sectionElementId %>" class="fgta5-carousell" data-title="<%= section.sectionTitle %>">
+<%- '<' %>%- include(`${moduleDir}/<%= section.sectionName %>.html`) %<%- '>' %>
+</section>
+
+<% }) %>
+
+<section id="fRecord-section" class="fgta5-carousell" data-title="Record Status">
+	<div name="panel">
+
+		<!-- LEFT: Standard Info -->
+		<div name="column">
+			<div name="row">
+				<span name="caption">Create By</span>
+				<span name="value" id="fRecord-section-createby">-</span>
+			</div>
+			<div name="row">
+				<span name="caption">Create Date</span>
+				<span name="value" id="fRecord-section-createdate">-</span>
+			</div>
+			<div name="row">
+				<span name="caption">Modify By</span>
+				<span name="value" id="fRecord-section-modifyby">-</span>
+			</div>
+			<div name="row">
+				<span name="caption">Modify Date</span>
+				<span name="value"id="fRecord-section-modifydate">-</span>
+			</div>
+
+		</div>
+
+
+		<!-- RIGHT: Extended Info -->
+		<div name="column" exteder>
+		<%- '<' %>%- include(`${moduleDir}/<%= moduleName %>-ext-record.html`) %<%- '>' %>	
+		</div> 
+
+	</div>	
+</section>
+
+<section id="fLogs-section" class="fgta5-carousell" data-title="Logs">
+<%- '<' %>%- include(`${moduleDir}/<%= moduleName %>-logs.html`) %<%- '>' %>	
+</section>
+
+<section id="fAbout-section" class="fgta5-carousell" data-title="About">
+<%- '<' %>%- include(`${moduleDir}/<%= moduleName %>-ext-about.html`) %<%- '>' %>	
+</section>
+
+

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

@@ -0,0 +1,256 @@
+import Context from './<%= moduleName %>-context.mjs'  <% sections.forEach(section => { %>
+import * as <%= section.sectionName %> from './<%= section.sectionName %>.mjs' <% }) %>
+import * as Extender from './<%= moduleName %>-ext.mjs'
+
+const app = Context.app
+const Crsl = Context.Crsl
+
+
+export default class extends Module {
+	constructor() {
+		super()
+	}
+
+	async main(args={}) {
+		
+		console.log('initializing module...')
+		app.setTitle('<%= title  %>')
+		app.showFooter(true)
+		
+		args.autoLoadGridData = true
+
+		const self = this
+
+		// module-module yang di load perlu di pack dulu ke dalam variable
+		// jangan import lagi module-module ini di dalam mjs tersebut
+		// karena akan terjadi cyclic redudancy pada saat di rollup
+		self.Modules = { <% sections.forEach(section => { %>
+			<%= section.sectionName %>, <% }) %>
+		}
+
+		try {
+
+			// inisiasi sisi server
+			try {
+				const result = await Module.apiCall(`/${Context.moduleName}/init`, { })
+				Context.notifierId = result.notifierId
+				Context.notifierSocket = result.notifierSocket
+				Context.userId = result.userId
+				Context.userFullname = result.userFullname
+				Context.sid = result.sid
+				Context.appsUrls = result.appsUrls
+			} catch (err) {
+				throw err
+			} 
+
+			await Promise.all([ <% sections.forEach(section => { %>
+				<%= section.sectionName %>.init(self, args), <% }) %>
+				Extender.init(self, args)
+			])
+
+			// render dan setup halaman
+			await render(self)
+
+			// listen keyboard action
+			listenUserKeys(self)
+			
+
+			// kalau user melakukan reload, konfirm dulu
+			const modNameList = [<%- entityNameList %>]
+			window.onbeforeunload = (evt)=>{ 
+				// cek dulu semua form
+				let isFormDirty = false
+				for (var modname of modNameList) {
+					const module = self.Modules[modname]
+					const frm = module.getForm(self)
+					if (frm.isChanged()) {
+						isFormDirty = isFormDirty || true
+					}
+				}
+				if (isFormDirty) {
+					evt.preventDefault();
+					return  "Changes you made may not be saved."
+				}
+			};
+
+
+		} catch (err) {
+			throw err
+		}
+	}
+
+}
+
+async function render(self) {
+	try {
+		const footerButtonsContainer =  document.getElementsByClassName('footer-buttons-container')
+		Module.renderFooterButtons(footerButtonsContainer)
+	
+		// Setup Icon
+		Crsl.setIconUrl('<%= iconUrl %>')
+
+
+		// Set listener untuk section carousel
+		Crsl.addEventListener($fgta5.SectionCarousell.EVT_SECTIONSHOWING, (evt)=>{
+			var sectionId = evt.detail.commingSection.Id
+			for (let cont of footerButtonsContainer) {
+				var currContainerSectionId = cont.getAttribute('data-section')
+				if (currContainerSectionId==sectionId) {
+					setTimeout(()=>{
+						cont.classList.remove('hidden')
+						cont.style.animation = 'dropped 0.3s forwards'
+						setTimeout(()=>{
+							cont.style.animation = 'unset'	
+						}, 300)
+					}, 500)
+				} else {
+					cont.classList.add('hidden')
+				}
+			}
+		})
+		
+		Crsl.Items['fRecord-section'].addEventListener($fgta5.Section.EVT_BACKBUTTONCLICK, async (evt)=>{
+			evt.detail.fn_ShowNextSection()
+		})
+
+		Crsl.Items['fLogs-section'].addEventListener($fgta5.Section.EVT_BACKBUTTONCLICK, async (evt)=>{
+			evt.detail.fn_ShowNextSection()
+		})
+
+		Crsl.Items['fAbout-section'].addEventListener($fgta5.Section.EVT_BACKBUTTONCLICK, async (evt)=>{
+			evt.detail.fn_ShowNextSection()
+		})
+		
+
+		// Set panel detil saat hover di detil item
+		const detilpanel = document.getElementById('panel-detil-selector')
+		detilpanel.querySelectorAll('.panel-detil-row a').forEach(link => {
+			link.addEventListener('mouseenter', () => {
+				link.closest('.panel-detil-row').classList.add('panel-detil-row-highligted');
+			});
+
+			link.addEventListener('mouseleave', () => {
+				link.closest('.panel-detil-row').classList.remove('panel-detil-row-highligted');
+			});
+
+
+			const sectionTargetName = link.getAttribute('data-target-section')
+			const sectionCurrentName = link.getAttribute('data-current-section')
+			
+			link.addEventListener('click', (evt)=>{
+				openDetilSection(self, sectionTargetName, sectionCurrentName)
+			})
+
+			// jika ada event-event yang khusus untuk mobile device
+			// if (Module.isMobileDevice()) {
+			// }
+		});
+
+		
+		// <%= moduleName %>-ext.mjs, export function extendPage(self) {} 
+		const fn_name = 'extendPage'
+		const fn_extendPage = Extender[fn_name]
+		if (typeof fn_extendPage === 'function') {
+			fn_extendPage(self)
+		} else {
+			console.warn(`'extendPage' tidak diimplementasikan di extender`)
+		}
+
+	} catch (err) {
+		throw err
+	}
+}
+
+
+function openDetilSection(self, sectionTargetName, sectionCurrentName) {
+	const sectionCurrentId = Context.Sections[sectionCurrentName]
+	const sectionCurrent =   Crsl.Items[sectionCurrentId]
+
+	const sectionId = Context.Sections[sectionTargetName]
+	const section = Crsl.Items[sectionId]
+
+	section.setSectionReturn(sectionCurrent)
+	section.show({}, ()=>{
+		const moduleTarget = self.Modules[sectionTargetName]
+		const moduleHeaderEdit = self.Modules[sectionCurrentName]
+		moduleTarget.openList(self, {
+			moduleHeaderEdit
+		})
+	})
+}
+
+
+function listenUserKeys(self) {
+
+	// capture tombol
+	const allowedKeys = /^[a-zA-Z0-9 ]$/; // huruf, angka, spasi
+	document.addEventListener('keydown', (evt) => {
+		if (evt.ctrlKey || evt.metaKey || evt.altKey) {
+			// bebaskan jika tekan Ctrl / alt
+		} else if (allowedKeys.test(evt.key) || evt.key === 'Backspace' || evt.key === 'Delete') {
+			// Tangani huruf, angka, spasi, backspace dan delete
+			const id = Crsl.CurrentSection.Id
+			const moduleId = Context.SectionMap[id]
+			const module = self.Modules[moduleId]
+			keyboardAction(self, module, 'typing', evt)
+		}
+	}, true)
+
+	// handle keyboard event	
+	document.addEventListener('keydown', (evt) => {
+		const id = Crsl.CurrentSection.Id
+		const moduleId = Context.SectionMap[id]
+		const module = self.Modules[moduleId]
+
+		// jika ada dialog yang terbuka, semua event keyboard abaikan dulu, keculai tombol escape
+		const dialog = document.querySelector('dialog[open]');
+		if (dialog) {
+			if (evt.key.toLowerCase()=='escape') {
+				dialog.close();
+				evt.preventDefault();
+			} else if ((evt.ctrlKey || evt.metaKey) && evt.key.toLowerCase() === 's') {
+				evt.preventDefault(); 
+			}
+			return
+		}
+
+		// Cek apakah tombol Ctrl (atau Cmd di Mac) ditekan bersamaan dengan huruf 'S'
+		const key = evt.key.toLowerCase()
+		if ((evt.ctrlKey || evt.metaKey) && key === 's') {
+			evt.preventDefault(); // Mencegah aksi default (save page)
+			keyboardAction(self, module, 'save', evt)
+		} else if (((evt.ctrlKey || evt.metaKey) && key === 'n') || (evt.ctrlKey && key==='f2')) {
+			evt.preventDefault(); // Mencegah aksi default
+			keyboardAction(self, module, 'new', evt)
+		} else if ( key ==='escape') {
+			evt.preventDefault();
+			keyboardAction(self, module, 'escape', evt)
+		} else if ( key === 'f2' ) {
+			keyboardAction(self, module, 'togleEdit', evt)
+		} else if ( key === 'arrowup' ) {
+			keyboardAction(self, module, 'up', evt)
+		} else if ( key === 'arrowdown' ) {	
+			keyboardAction(self, module, 'down', evt)
+		} else if ( key === 'arrowright' ) {
+			keyboardAction(self, module, 'right', evt)
+		} else if ( key === 'arrowleft' ) {	
+			keyboardAction(self, module, 'left', evt)
+		} else if ( key === 'enter' ) {	
+			keyboardAction(self, module, 'enter', evt)
+		}
+	});
+}
+
+
+function keyboardAction(self, module, actionName, evt) {
+
+	if (module!=null) {
+		module.keyboardAction(self,  actionName, evt)
+	} else {
+		// untuk keperluan log dan about, saat escape: back
+		if (actionName=='escape') {
+			Crsl.CurrentSection.back()
+		}
+	}
+
+}

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

@@ -0,0 +1,34 @@
+<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 class="panel-recordbar" 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>
+
+
+<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 %>-addrow">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>