@agung_dhewe/webapps 1.1.2

package/modules/generator/generator.mjs

@@ -0,0 +1,195 @@
+import Context from './generator-context.mjs'
+import * as generatorList from './generatorList.mjs'
+import * as generatorEdit from './generatorEdit.mjs'
+import * as generatorExtender from './generator-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('Generator')
+		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 = {
+			generatorList,
+			generatorEdit,
+			generatorExtender
+		}
+
+		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.targetDirectory = result.targetDirectory
+				Context.appsUrls = result.appsUrls
+
+			} catch (err) {
+				throw err
+			} 
+
+
+			await Promise.all([
+				generatorList.init(self, args),
+				generatorEdit.init(self, args),
+				generatorExtender.init(self, args)
+			])
+
+			// render dan setup halaman
+			await render(self)
+
+			// listen keyboard action
+			listenUserKeys(self)	
+
+			// kalau user melakukan reload, konfirm dulu
+			const isFormDirty = true
+			window.onbeforeunload = (evt)=>{ 
+				if (isFormDirty) {
+					evt.preventDefault();
+					return  "Changes you made may not be saved."
+				}
+			};
+		} catch (err) {
+			throw err
+		}
+	}
+
+
+	numberboxDatatypeChange(el) {
+		const datatype = el.value
+		const designField = el.closest('div[name="design-data-field"]');
+		const gridFormatter = designField.querySelector('input[name="gridformatter"]')
+
+		// datatype: int, smallint, bigint, decimal
+		// format: decimal, int
+		if (datatype=='smallint') {
+			gridFormatter.value = 'int(v)'
+		} else if (datatype=='decimal') {
+			gridFormatter.value = 'decimal(v, 2)'
+		} else {
+			gridFormatter.value = 'decimal(v, 0)'
+		}
+	}
+}
+
+
+
+async function render(self) {
+	try {
+		const footerButtonsContainer =  document.getElementsByClassName('footer-buttons-container')
+		Module.renderFooterButtons(footerButtonsContainer)
+	
+		Crsl.setIconUrl('/generator/generator.png')
+
+		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')
+				}
+			}
+		})
+
+		// generator-ext.mjs, export function extendPage(self) {} 
+		// jangan exekusi langsung dari userExtender, karena akan error saat di rollup
+		const extendPage = self.Modules.generatorExtender.extendPage
+		if (typeof extendPage === 'function') {
+			extendPage(self)
+		} else {
+			console.warn(`'extendPage' tidak diimplementasikan di extender`)
+		}
+
+	} catch (err) {
+		throw err
+	}
+}
+
+
+function listenUserKeys(self) {
+	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.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/modules/generator/generatorEdit.html

@@ -0,0 +1,185 @@
+<!-- 
+* Designer Editor
+* nama program, deskripsi, table utama
+* data2 detil related ke data utama
+* drag and drop componen-component ke masing2 header / detail, kemudian dikonfigurasi
+* -->
+<div id="appgen-datadesign-layout">
+	<div id="layout-definition">
+		<div class="subtitle" style="grid-column: span 3;">Module Definition</div>
+		
+		<label for="obj_programid">ID</label>
+		<input type="text" id="obj_programid" placeholder="[auto-id]"  disabled>
+
+		<!-- kalau mau nambah baru, row span harus disesuaikan  -->
+		<div id="upload-icon" style="grid-row: span 6;">
+			<label>
+				change
+				<input id="btn_IconUpload" type="file" accept=".svg,.png" style="display: none;" />
+			</label>
+		</div>
+
+		<label for="obj_appname">App Name</label>
+		<input type="text" id="obj_appname" style="text-transform: lowercase;">
+
+		<label for="obj_programname">Program Name</label>
+		<input type="text" id="obj_programname" style="text-transform: lowercase;">
+
+		<label for="obj_programname">Title</label>
+		<input type="text" id="obj_programtitle">
+
+		<label for="obj_directory">Directory</label>
+		<input type="text" id="obj_directory">
+		
+		<label for="obj_programdescription">Description</label>
+		<input type="text" id="obj_programdescription">
+	
+	</div>
+	
+	<div id="layout-action">
+		<div class="subtitle">Actions</div>
+		<table cellpadding="0" cellspacing="0">
+			<tbody id="action-lists">
+			</tbody>
+			<tfoot>
+				<tr>
+					<td>
+						<input type="textbox" placeholder="action name" id="txt_action_name" class="action-input  action-name">
+					</td>
+					<td>
+						<input type="textbox" placeholder="title" id="txt_action_title" class="action-input action-title">
+					</td>
+					<td>
+						<input type="textbox" placeholder="permission" id="txt_action_permission" class="action-input action-permission">
+					</td>					
+					<td>
+						<button id="btn_action_add" class="action-button-add">Add</button>
+					</td>
+				</tr>
+			</tfoot>
+		</table>
+	</div>
+
+	<!-- Definisi Header Detil -->
+	<div id="layout-entity">
+		<div class="subtitle">Entites</div>
+		<table id="tbl_entity" cellpadding="0" cellspacing="0">
+			<thead>
+				<tr>
+					<th name="col_name">Name</th>
+					<th name="col_title">Title</th>
+					<th name="col_table">Table</th>
+					<th name="col_pk">PK</th>
+					<th name="col_btndesign"></th>
+					<th name="col_btnremove"></th>
+					<th name="col_id">ID</th>
+				</tr>
+			</thead>
+			<tbody id="data-entities">
+
+			</tbody>
+			<tfoot>
+				<tr>
+					<td colspan="7" style="padding-left: 0;"><button id="btn_addentity">Add Entity</button></td>
+				</tr>
+			</tfoot>
+
+		</table>
+		
+	</div>
+
+	<!-- Table Editor, menerima drag and drop dari component -->
+	<div id="layout-editor" class="hidden">
+		<div class="subtitle">Data Editor</div>
+		<div id="entities-design"></div>
+	</div>
+
+	<!-- Side Bar, untuk daftar komponen yang bisa di drag and drop, dan lain2 -->
+	<div id="layout-sidebar" class="hidden">
+		<div >
+			<div class="subtitle">Components</div>
+			<div id="crud-component-list">
+			</div>
+			<div class="subtitle">Design</div>
+			<div class="design-tools-container">
+				<a id="btn_ShowSummary" class="design-button">
+					<svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+					<g fill="#e6e6e6" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+					<path d="m3 40h42v5h-42z"/>
+					<path d="m3 31.5h42v5h-42z"/>
+					<path d="m3 22h42v5h-42z"/>
+					<path d="m3 12.5h42v5h-42z"/>
+					<path d="m3 3h42v5h-42z"/>
+					</g>
+					</svg>
+				</a>
+				<a id="btn_ShowDetail" class="design-button">
+					<svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+					<g fill="#e6e6e6" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+					<path d="m3 3h42v16h-42z"/>
+					<path d="m3 23h42v10h-42z"/>
+					<path d="m3 37h42v8h-42z"/>
+					</g>
+					</svg>
+				</a>
+			</div>
+			<div class="design-tools-container" style="margin-top: 30px">
+				<a id="btn_ShowFields" class="design-button">
+					<svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+					<rect x="5" y="11" width="39" height="25" fill="#e6e6e6"/>
+					<path d="m20.5 10.25h-16.5v27h16.5" fill="none" stroke="#000" stroke-linecap="square" stroke-width="3"/>
+					<path d="m38 10.25h6v27h-6" fill="none" stroke="#000" stroke-linecap="square" stroke-width="3"/>
+					<path d="m30 3.4251v41.15" fill="none" stroke="#000" stroke-linecap="square" stroke-width="3"/>
+					<path d="m25 3.0239h10" fill="none" stroke="#000" stroke-linecap="square" stroke-width="3"/>
+					<path d="m25 44.575h10" fill="none" stroke="#000" stroke-linecap="square" stroke-width="3"/>
+					<path d="m21.791 30.263h-2.2408l-1.5505-4.2631h-6.8392l-1.5505 4.2631h-2.1346l5.7559-15.296h2.8036zm-4.4391-6.0094-2.7718-7.5091-2.7824 7.5091z" fill="#1a1a1a" stroke-linecap="square" stroke-width="3" aria-label="A"/>
+					</svg>
+				</a>
+
+				<a id="btn_ShowUniq" class="design-button">
+					<svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+					<g fill="#1a1a1a">
+					<ellipse cx="24.5" cy="11" rx="16.5" ry="8"/>
+					<path d="m18.25 6.4615v30.462l5 5.5385 8.3333-6.9231v-2.7692l-5-2.7692 6.6667-4.1538-6.6667-4.1538 5.4167-4.1538v-11.077z"/>
+					</g>
+					</svg>
+				</a>
+
+				<a id="btn_ShowSearch" class="design-button">
+					<svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+					<g fill="#e6e6e6" stroke="#000" stroke-linecap="square">
+					<circle cx="29.75" cy="18.75" r="13.25" stroke-width="3"/>
+					<path d="m15 32-8 7" stroke-width="6"/>
+					</g>
+					</svg>
+				</a>
+			</div>
+		</div>
+	</div>
+
+</div>
+<div style="margin-top: 100px" class="hidden">
+	
+	
+</div>
+
+
+
+
+<div class="footer-buttons-container hidden">
+	<div></div>
+	<div>
+		<button id="generatorEdit-btn_save">Save</button>
+		
+		<button id="generatorEdit-btn_new" data-action="generator-new">New</button>
+
+		<button id="btnAppGenLoad" class="hidden">
+			Import<input id="input-file" type="file" style="display: none;">
+		</button>
+
+		<button id="btnAppGenSave" class="hidden">Export</button>
+
+		<button id="generatorEdit-btn_generate">Generate</button>
+	</div>
+	<div></div>
+</div>

package/modules/generator/generatorEdit.mjs

@@ -0,0 +1,238 @@
+import Context from './generator-context.mjs'
+import AppGenUI from './appgen-ui.mjs'
+import * as Extender from './generator-ext.mjs'
+
+
+const CurrentState = {}
+const Crsl =  Context.Crsl
+const CurrentSectionId = Context.Sections.generatorEdit
+const CurrentSection = Crsl.Items[CurrentSectionId]
+
+const ui = new AppGenUI(Context.app)
+const btn_new = new $fgta5.ActionButton('generatorEdit-btn_new', 'generator-new')
+const btn_save = new $fgta5.ActionButton('generatorEdit-btn_save')
+const btn_generate = new $fgta5.ActionButton('generatorEdit-btn_generate')
+
+const obj_appname = document.getElementById('obj_appname')
+const obj_directory = document.getElementById('obj_directory')
+
+
+export const Section = CurrentSection
+
+export async function init(self, args) {
+	console.log('initializing generatorEdit ...')
+
+	CurrentSection.addEventListener($fgta5.Section.EVT_BACKBUTTONCLICK, async (evt)=>{
+			backToList(self, evt)
+		})
+
+
+	btn_new.addEventListener('click', (evt)=>{ btn_new_click(self, evt)})
+	btn_save.addEventListener('click', (evt)=>{ btn_save_click(self, evt)})
+	btn_generate.addEventListener('click', (evt)=>{ btn_generate_click(self, evt) })
+
+	obj_appname.addEventListener('change', (evt)=>{ obj_appname_change(self, evt) })
+
+	await ui.Init(Context)
+
+	ui.pauseAutoSave(true)
+
+}
+
+export async function openSelectedData(self, params) {
+	console.log('openSelectedData')
+
+	let mask = $fgta5.Modal.createMask()
+	try {
+		const id = params.keyvalue
+		
+		console.log(params)
+		const result = await openData(self, id)
+		const data = result.generator_data
+
+		data.id = result.generator_id
+	
+		ui.load(data)
+	} catch (err) {
+		throw err
+	} finally {
+		mask.close()
+		mask = null
+	}
+}
+
+
+export function keyboardAction(self, actionName) {
+	if (actionName=='save') {
+		btn_save.click()
+	} else if (actionName=='escape') {
+		const listSection = Crsl.Items[Context.Sections.generatorList]
+		listSection.show({direction:1})
+	}
+}
+
+async function openData(self, id) {
+	const apiOpen = new $fgta5.ApiEndpoint(`/${Context.moduleName}/open`)
+	try {
+		const result = await apiOpen.execute({ id })
+		return result
+	} catch (err) {
+		CurrentState.currentOpenedId = null
+		throw err
+	} finally {
+		apiOpen.dispose()
+	}
+}
+
+async function backToList(self, evt) {
+	let goback = true
+	if (goback) {
+		evt.detail.fn_ShowNextSection()
+	}
+}
+
+
+async function obj_appname_change(self, evt) {
+	const el = evt.target
+	const value = el.value
+
+	if (Context.appsUrls[value]===undefined) {
+		const resp = await $fgta5.MessageBox.error(`nama apps '${value}' tidak teregister di daftar apps`)
+		return
+	}
+	
+	// console.log(Context.appsUrls[value].directory)
+	obj_directory.value = Context.appsUrls[value].directory
+}
+
+
+async function btn_new_click(self, evt) {
+	console.log('btn_new_click')
+	const sourceSection = evt.target.getAttribute('data-sectionsource') 
+	const generatorList = self.Modules.generatorList
+	const listsecid = generatorList.Section.Id
+	const fromListSection = sourceSection===listsecid
+	if (fromListSection) {
+		// btn new di klik dari list
+		await CurrentSection.show()
+
+		// cek id, jika tidak kosong, perlu di-reset
+		const id = document.getElementById('obj_programid')
+		if (id!='') {
+			await ui.reset()
+			await ui.NewData()
+			ui.updateCache()
+		}
+
+	} else {
+		const resp = await $fgta5.MessageBox.confirm('apakah anda yakin akan membuat data baru?')
+		if (resp=='ok') {
+			await ui.reset()
+			await ui.NewData()
+			ui.updateCache()
+		}
+	} 
+	
+}
+
+async function btn_save_click(self, evt) {
+	console.log('btn_save_click')
+	const data = await ui.getCurrentData()
+	
+	let mask = $fgta5.Modal.createMask()
+	try {
+		const result = await Save(self, data)
+		ui.setCurrentId(result.generator_id)
+
+		console.log(result)
+	} catch (err) {
+		console.error(err)
+		$fgta5.MessageBox.error(err.message)
+	} finally {
+		mask.close()
+		mask = null
+	}
+}
+
+
+async function btn_generate_click(self, evt)  {
+	console.log('btn_generate_click')
+	const data = await ui.getCurrentData()
+	
+	let mask = $fgta5.Modal.createMask()
+	btn_generate.disabled = true
+	ui.pauseAutoSave(true)
+	try {
+		if (data.id=='') {
+			throw new Error('save dahulu sebelum generate')
+		}
+		const result = await Generate(self, data, mask)
+		console.log(result)
+		$fgta5.MessageBox.info('done')
+	} catch (err) {
+		console.error(err)
+		$fgta5.MessageBox.error(err.message)
+	} finally {
+		btn_generate.disabled = false
+		ui.pauseAutoSave(false)
+		mask.close()
+		mask = null
+	}
+
+}
+
+
+async function Save(self, data) {
+	const url = `/${Context.moduleName}/save`
+	try {
+		const result = await Module.apiCall(url, { data }) 
+		return result 
+	} catch (err) {
+		throw err	
+	} 
+}
+
+async function Generate(self, data, mask) {
+	return new Promise(async (resolve, reject)=>{
+		const jobId = Date.now()
+		const clientId = `${Context.notifierId}-${jobId}`
+		const notifierSocket = Context.notifierSocket
+ 		const ws = new WebSocket(`${notifierSocket}/?clientId=${clientId}`);
+ 
+		ws.onmessage = (event) => {
+			const data = JSON.parse(event.data);
+			if (data.status === 'done') {
+				ws.close();
+				resolve(data);
+			} else if (data.status=='error') {
+				ws.close();
+				reject(new Error(data.info.message))
+			} else if (data.status=='message') {	
+				console.log(data)
+				mask.setText(data.info.message)
+			} else if (data.status==='timeout') {
+				ws.close();
+				reject(new Error('generate timeout'));
+			}
+		};
+
+		ws.onerror = (err) => {
+			ws.close();
+			console.error(err)
+			reject(err);
+		};
+
+
+		const apiGen = new $fgta5.ApiEndpoint(`/${Context.moduleName}/generate`)
+		try {
+			const result = await apiGen.execute({ data, notifierSocket, clientId })
+			console.log(result)
+
+			// di sini tidak perlu resolve, karena resolve akan menunggu message dari websocket
+		} catch (err) {
+			reject(err)
+		} finally {
+			apiGen.dispose()
+		}
+	})
+}

package/modules/generator/generatorList.html

@@ -0,0 +1,32 @@
+<div class="search-container">
+	<div id="generatorList-pnl_search" class="search-parameters">
+		<input id="generatorList-txt_appname" fgta5-component="Textbox" placeholder="application" autocomplete="off" spellcheck="false" binding="appname">
+		<input id="generatorList-txt_searchtext" fgta5-component="Textbox" placeholder="search" autocomplete="off" spellcheck="false" binding="searchtext">
+	</div>
+	<button id="generatorList-btn_gridload">Load</button>
+</div>
+
+<table id="generatorList-tbl" fgta5-component="Gridview">
+	<thead>
+		<tr data-header key="generator_id">
+			<th data-name="generator_id" binding="generator_id">ID</th>
+			<th data-name="generator_modulename" binding="generator_modulename"  sorting="true">Module</th>
+			<th data-name="generator_appname" binding="generator_appname" sorting="true">Application</th>
+		</tr>
+	</thead>
+</table>
+
+
+
+
+
+
+
+
+<div class="footer-buttons-container">
+	<div></div>
+	<div>
+		<button id="generatorList-btn_new" data-action="generator-new" data-sectionsource="generatorList-section">New</button>
+	</div>
+	<div></div>
+</div>