@agung_dhewe/webapps 1.1.2 → 1.2.3

package/modules/generator/generatorEdit.mjs

@@ -4,7 +4,7 @@ import * as Extender from './generator-ext.mjs'
 
 
 const CurrentState = {}
-const Crsl =  Context.Crsl
+const Crsl = Context.Crsl
 const CurrentSectionId = Context.Sections.generatorEdit
 const CurrentSection = Crsl.Items[CurrentSectionId]
 
@@ -22,16 +22,16 @@ 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)
-		})
+	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) })
+	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) })
+	obj_appname.addEventListener('change', (evt) => { obj_appname_change(self, evt) })
 
 	await ui.Init(Context)
 
@@ -45,13 +45,16 @@ export async function openSelectedData(self, params) {
 	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
-	
+
+		const el_title = document.getElementById('application-title')
+		el_title.innerHTML = `Generator: ${data.title}`
+
 		ui.load(data)
 	} catch (err) {
 		throw err
@@ -63,11 +66,14 @@ export async function openSelectedData(self, params) {
 
 
 export function keyboardAction(self, actionName) {
-	if (actionName=='save') {
+	if (actionName == 'save') {
 		btn_save.click()
-	} else if (actionName=='escape') {
+	} else if (actionName == 'escape') {
 		const listSection = Crsl.Items[Context.Sections.generatorList]
-		listSection.show({direction:1})
+		listSection.show({ direction: 1 })
+
+		const el_title = document.getElementById('application-title')
+		el_title.innerHTML = `Generator`
 	}
 }
 
@@ -88,6 +94,8 @@ async function backToList(self, evt) {
 	let goback = true
 	if (goback) {
 		evt.detail.fn_ShowNextSection()
+		const el_title = document.getElementById('application-title')
+		el_title.innerHTML = `Generator`
 	}
 }
 
@@ -96,11 +104,11 @@ async function obj_appname_change(self, evt) {
 	const el = evt.target
 	const value = el.value
 
-	if (Context.appsUrls[value]===undefined) {
+	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
 }
@@ -108,17 +116,17 @@ async function obj_appname_change(self, evt) {
 
 async function btn_new_click(self, evt) {
 	console.log('btn_new_click')
-	const sourceSection = evt.target.getAttribute('data-sectionsource') 
+	const sourceSection = evt.target.getAttribute('data-sectionsource')
 	const generatorList = self.Modules.generatorList
 	const listsecid = generatorList.Section.Id
-	const fromListSection = sourceSection===listsecid
+	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!='') {
+		if (id != '') {
 			await ui.reset()
 			await ui.NewData()
 			ui.updateCache()
@@ -126,19 +134,19 @@ async function btn_new_click(self, evt) {
 
 	} else {
 		const resp = await $fgta5.MessageBox.confirm('apakah anda yakin akan membuat data baru?')
-		if (resp=='ok') {
+		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)
@@ -155,15 +163,15 @@ async function btn_save_click(self, evt) {
 }
 
 
-async function btn_generate_click(self, evt)  {
+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=='') {
+		if (data.id == '') {
 			throw new Error('save dahulu sebelum generate')
 		}
 		const result = await Generate(self, data, mask)
@@ -185,32 +193,32 @@ async function btn_generate_click(self, evt)  {
 async function Save(self, data) {
 	const url = `/${Context.moduleName}/save`
 	try {
-		const result = await Module.apiCall(url, { data }) 
-		return result 
+		const result = await Module.apiCall(url, { data })
+		return result
 	} catch (err) {
-		throw err	
-	} 
+		throw err
+	}
 }
 
 async function Generate(self, data, mask) {
-	return new Promise(async (resolve, reject)=>{
+	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}`);
- 
+		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') {
+			} else if (data.status == 'error') {
 				ws.close();
 				reject(new Error(data.info.message))
-			} else if (data.status=='message') {	
+			} else if (data.status == 'message') {
 				console.log(data)
 				mask.setText(data.info.message)
-			} else if (data.status==='timeout') {
+			} else if (data.status === 'timeout') {
 				ws.close();
 				reject(new Error('generate timeout'));
 			}

package/modules/generator/generatorList.mjs

@@ -11,6 +11,9 @@ const tbl =  new $fgta5.Gridview('generatorList-tbl')
 const pnl_search = document.getElementById('generatorList-pnl_search')
 const btn_gridload = new $fgta5.ActionButton('generatorList-btn_gridload') 
 
+
+
+
 export const Section = CurrentSection
 export const SearchParams = {}
 
@@ -50,6 +53,30 @@ export async function init(self, args) {
 		} else {
 			console.warn(`'initSearchParams' tidak diimplementasikan di extender`)
 		}
+
+
+		// keyboard listener  in search parameter
+		const el_txt_appname = document.getElementById('generatorList-txt_appname')
+		const el_txt_searchtext = document.getElementById('generatorList-txt_searchtext')
+		const el_btn_search = document.getElementById('generatorList-btn_gridload')
+
+		el_txt_appname.addEventListener('keydown', evt=>{
+			if (evt.key=='Enter') {
+				el_txt_searchtext.focus()
+				evt.stopPropagation()
+				evt.preventDefault()
+			}
+		})
+
+		el_txt_searchtext.addEventListener('keydown', evt=>{
+			if (evt.key=='Enter') {
+				el_btn_search.click()	
+				el_txt_searchtext.blur()
+				evt.stopPropagation()
+				evt.preventDefault()
+			}
+		})
+
 		
 	} catch (err) {
 		throw err

package/modules/generator/tpl-designerinfo.html

@@ -0,0 +1,100 @@
+<!-- DESIGNER INFO -->
+<div name="designer-info" class="designer-info">
+	<div name="col_title" data-tag="content">
+		{title}
+	</div>
+
+	<div data-tag="label" style="margin-top: 8px">Name</div>
+	<div data-tag="content" name="col_name" style="margin-top: 8px">{name}</div>
+
+	<div data-tag="label" style="margin-top: 15px">Table</div>
+	<div data-tag="content" name="col_table" style="margin-top: 15px">{table}</div>
+	
+	<div data-tag="label" style="margin-top: 5px">PK</div>
+	<div data-tag="content" name="col_pk" style="margin-top: 5px">{pk}</div>
+
+	<div data-tag="label" style="margin-top: 10px">Table Desc</div>
+	<div data-tag="content" style="border: 0; margin-top: 10px">
+		<input name="table-descr" type="text" style="padding: 3px 0 3px 3px; width: 100%; background-color: #fcffd1; border-width: 0 0 1px 0">
+	</div>
+
+	<div data-tag="label">&nbsp;</div>
+	<div data-tag="content" style="border: 0; margin-top: 5px; display: flex; gap: 20px">
+		<label style="font-weight: normal;">
+			<input type="checkbox" name="skip-regenerate-table">
+			Skip Regenerate Table
+		</label>
+	</div>
+
+
+
+	<div data-tag="label" style="margin-top: 15px" data-bindhead>bind h.title</div>
+	<div data-tag="content" style="border: 0; margin-top: 15px" data-bindhead>
+		<input name="bind_head_title" type="text" style="padding: 3px 0 3px 3px; width: 300px;">
+	</div>
+
+	<div data-tag="label" style="margin-top: 15px" data-bindhead>bind h.descr</div>
+	<div data-tag="content" style="border: 0; margin-top: 15px" data-bindhead>
+		<input name="bind_head_descr" type="text" style="padding: 3px 0 3px 3px; width: 300px;">
+	</div>	
+
+
+	<div data-tag="label" style="margin-top: 15px">Form</div>
+	<div data-tag="content" style="border: 0;  margin-top: 15px; display: flex; gap: 20px">
+		<label>
+			<input type="checkbox" name="form-grid-layout">
+			Grid Layout
+		</label>
+		<label data-entity-header>
+			<input type="checkbox" name="allow-form-new">
+			Allow New Data
+		</label>
+		<label data-entity-header>
+			<input type="checkbox" name="allow-form-edit">
+			Allow Edit Data
+		</label>
+	</div>
+
+	<div data-tag="label" style="margin-top: 15px" data-control>Data Control</div>
+	<div data-tag="content" style="border: 0;  margin-top: 15px; display: flex; gap: 20px" data-control>
+		<label>
+			<input type="checkbox" name="allow-row-add">
+			Allow Add Row
+		</label>
+		<label>
+			<input type="checkbox" name="allow-row-remove">
+			Allow Remove Row
+		</label>
+		<label>
+			<input type="checkbox" name="allow-row-edit">
+			Allow Edit Row
+		</label>
+	</div>
+
+	<div data-tag="label" style="margin-top: 15px" data-autoid>Row Identifier</div>
+	<div data-tag="content" style="border: 0;  margin-top: 15px; display: flex; gap: 20px" data-autoid>
+		<div>
+			<select name="identifier-method">
+				<option value="manual" selected>Manual</option>
+				<option value="auto-by-default">Auto By Default (Numeric Only)</option>
+				<option value="auto-always">Auto Always (Numeric Only)</option>
+				<option value="auto-yearly">Auto Yearly (for Document) </option>
+				<option value="auto-monthly">Auto Monthly (for Document)</option>
+				<option value="auto-yearly-short">Auto Yearly (short, for entity)</option>
+				<option value="auto-custom">Auto Custom Sequencer</option>
+			</select>
+
+			<label style="margin-left: 40px; margin-right: 5px;">Prefix (doc_id)</label>
+			<input name="identifier-prefix" type="text" style="width: 40px; padding: 3px 0 3px 3px;" maxlength="4">
+
+			<label style="margin-left: 15px; margin-right: 5px;">Block</label>
+			<input name="identifier-block" type="text" style="width: 30px; padding: 3px 0 3px 3px;" value="3">
+
+			<label style="margin-left: 15px; margin-right: 5px;">Length</label>
+			<input name="identifier-length" type="number" style="width: 30px; padding: 3px 0 3px 3px;" value="6">
+		</div>
+
+
+	</div>
+
+</div>

package/modules/generator/tpl-field-checkbox.html

@@ -0,0 +1,200 @@
+<!-- CHECKBOX  -->
+<div name="design-data-field" class="design-data-field" data-template="checkbox">
+	<div name="component-type" data-detil data-fieldtitle>
+		<div style="display: flex; justify-content: left; align-items: center; gap: 5px;" field-handle-bar class="field-handle-bar">
+			<div name="icon-pk" class="design-data-field-icon-pk"></div>
+			<div name="icon" class="design-data-field-icon">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M3 8h42v32H3z" style="fill:#fff;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"/><path d="m12 24.5 8 9.5 16-19" style="fill:none;stroke:#000;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"/></svg>
+			</div>
+			<div name="title">
+				Checkbox
+			</div>
+			<div class="field-remove-button">
+			</div>
+		</div>
+	</div>
+	<div data-detil data-fieldform>
+	<!--     1                    2                        3              4                  5                6  -->
+		<label>Field name</label><div>
+		<input type="text" name="fieldname"></div>  
+		
+		<label>Type</label>
+		<div>
+			<select name="datatype">
+				<option value="boolean" selected>boolean</option>
+			</select>
+		</div>  
+		
+		<div></div>
+		<div></div>
+
+
+
+		<label>Default Value</label>
+		<div>
+			<label>
+				<input name="defaultvalue" type="checkbox" value="1">
+				Checked
+			</label>
+		</div>
+		<div></div>
+		<div></div>
+		<div>
+			<input name="allownull" type="checkbox" value="1" style="transform: translateY(2px); visibility: hidden;" disabled> <!-- AllowNull-->
+		</div>
+		<div>
+			<input type="text" style="visibility: hidden;">
+		</div>
+
+
+		<label>Description</label>
+		<div style="grid-column: span 5;"><input type="text" name="description"></div>
+
+
+
+
+		<div>
+			<input type="text" style="visibility: hidden;"> <!-- agar tinggi baris tidak terlihat sempet, karena di baris ini hanya checkbox-->
+		</div>
+		<div style="grid-column: span 5; display: flex; align-items: center;">
+			<label>
+				<input type="checkbox" name="showingrid" style="transform: translateY(2px);" checked >
+				Show in GridView
+			</label>
+			<label style="margin-left: 40px">
+				<input type="checkbox" name="showinform" style="transform: translateY(2px);" checked>
+				Show in Form
+			</label>
+			<label style="margin-left: 20px">
+				<input type="checkbox" name="disabledinform" style="transform: translateY(2px);">
+				Disabled
+			</label>
+		</div>
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+
+
+		<label>Object Name</label>
+		<input type="text" name="objectname">
+		<div style="grid-column: span 4;"></div>
+
+		<label>D.Position</label>
+		<div style="grid-column: span 5; display: flex; column-gap: 10px; align-items: center;">
+			<label style="transform: translateY(-1px); margin-left: 20px">Row</label>
+			<input type="text" name="input-dposrow" style="width: 30px" value="auto">
+			
+			<label style="transform: translateY(-1px);">Span</label>
+			<input type="text" name="input-dposrowspan" style="width: 30px">
+			
+			<label style="transform: translateY(-1px); margin-left: 50px">Col</label>
+			<input type="text" name="input-dposcol" style="width: 30px" value="1">
+			
+			<label style="transform: translateY(-1px);">Span</label>
+			<input type="text" name="input-dposcolspan" style="width: 30px" value="2">
+			
+			<label style="transform: translateY(-1px); margin-left: 50px">Style</label>
+			<input type="text" name="input-dposstyle" style="width: 100%">			
+		</div>
+
+
+
+		<label>Text</label>
+		<input type="text" name="labeltext">
+		<label>Caption</label>
+		<div style="grid-column: span 3;">
+			<input type="text" name="caption">
+		</div>
+
+
+		<label>Information</label>
+		<div style="grid-column: span 5;">
+			<input name="information" type="text" >
+		</div>
+
+
+		<label>Container CSS</label>
+		<input type="text" name="input-containercss">
+		
+		<label>InLine Style</label>
+		<div style="grid-column: span 3;">
+			<input type="text" name="input-inlinestyle">
+		</div> 
+	
+
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label>Grid</label>
+		<div style="grid-column: span 5;" name="validation">
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Formatter</label>
+			<input name="gridformatter" type="text" value="checkmark(value)">
+			
+			<label style="grid-column: span 2; transform: translateY(5px); ">CSS</label>
+			<input name="gridcss" type="text">
+						
+			<label style="grid-column: span 2; transform: translateY(5px); ">Inline Style</label>
+			<input name="gridinlinestyle" type="text" value='text-align:center'>
+
+			<label style="grid-column: span 2; transform: translateY(5px); ">Index</label>
+			<div style="display: flex">
+				<input type="text" name="index" value="0" style="width: 50px"> 
+				<label style="margin-left: 20px">
+					<input name="gridsorting" type="checkbox" value="1" style="transform: translateY(2px);" >
+					Sorting
+				</label>
+			</div>
+
+		</div>	
+
+
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label>Validation</label>
+		<div style="grid-column: span 5;" name="validation">
+			<div name="defaultinvalidmessage" style="grid-column: span 2;">Default Invalid Message</div>
+			<input type="text" name="msg_invalid_default" placeholder="invalid message">
+
+			<label style="grid-column: span 2;">
+				<input name="hascustomvalidator" type="checkbox" value="1" style="transform: translateY(2px);" >
+				Custom Validator
+			</label>
+			<input name="validator" type="text" >
+
+		</div>	
+
+		<div style="display: block; height: 1rem; grid-column: span 6;"></div>
+		<label name="validation" style="transform: translateY(10px);">Handle Event</label>
+		<div style="grid-column: span 5; padding-left: 10px; display: flex; gap: 30px; flex-wrap: wrap;" >
+
+			<label>
+				<input name="ishandlechanged" type="checkbox" value="1" style="transform: translateY(2px);" >
+				Changed
+			</label>
+
+			<label>
+				<input name="ishandlechecked" type="checkbox" value="1" style="transform: translateY(2px);" >
+				Checked
+			</label>
+
+			<label>
+				<input name="ishandleunchecked" type="checkbox" value="1" style="transform: translateY(2px);">
+				UnChecked
+			</label>
+
+		</div>	
+
+	</div>
+
+
+	
+	<div name="component-summary" data-summary style="display: none;" draggable="true" field-handle-bar class="field-handle-bar">
+		<div name="icon-pk" class="design-data-field-icon-pk"></div>
+		<div name="icon" class="design-data-field-icon">
+		</div>
+		<div name="title">
+			<input type="text" name="fieldname-summary" placeholder="checkbox field name">
+		</div>
+		<div class="field-remove-button">
+		</div>
+	</div>
+
+</div>