@agung_dhewe/webapps 1.1.2 → 1.2.4

package/{libs → lib}/webmodule/module-edit.css

@@ -1,8 +1,8 @@
 .module-form {
-	display: flex; 
-	column-gap: 10px; 
-	row-gap: 5px; 
-	flex-wrap: wrap; 
+	display: flex;
+	column-gap: 10px;
+	row-gap: 5px;
+	flex-wrap: wrap;
 	margin-bottom: 20px;
 }
 
@@ -15,42 +15,87 @@
 	/* background-color: aliceblue; */
 }
 
-.input-field > label {
+.input-field>label {
 	margin-top: 4px;
 	font-size: 0.8rem;
 	font-weight: bold;
-	
+
 }
 
 @media screen and (max-width: 500px) {
 	.input-field {
 		flex-direction: column;
+		flex-basis: 100%;
 	}
 
-	.input-field > div[label],
-	.input-field > label {
+	.input-field>div[label],
+	.input-field>label {
 		text-align: left;
 		margin-bottom: 5px;
 		width: fit-content;
 		min-width: unset;
 	}
+
+	.fgta5-entry-container[fgta5-component=Combobox] {
+		width: 100%
+	}
 }
 
 
 @media screen and (min-width: 501px) {
-	.input-field > label {
+	.input-field>label {
 		text-align: right;
 		width: 80px;
 		min-width: 80px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+
+
+/* ACTION */
+.panel-action {
+	display: flex;
+}
+
+@media screen and (max-width: 500px) {
+	.panel-action {
+		padding-top: 30px;
+		justify-content: center;
+		column-gap: 8px;
 	}
+
 }
 
 
 
 
+@media screen and (min-width: 501px) {
+	.panel-action {
+		/* padding-top: 20px; */
+		/* padding-left: 100px; */
+		column-gap: 10px;
+		margin: 20px 20px 20px 20px;
+		padding: 20px;
+		border: 1px solid #c8cbf4;
+		border-radius: 10px;
+		background: #d9d9d9;
+	}
+}
+
+@media screen and (min-width: 501px) and (max-width: 900px) {
+	.panel-action {
+		width: 787px
+			/* 827 dikurangi padding kiri kanan total 40px */
+	}
+}
 
+/* DETIL */
 
 @media screen and (max-width: 500px) {
+
 	/* Box information detil */
 	.panel-detil {
 		margin: 50px 0 0 0;
@@ -58,12 +103,20 @@
 }
 
 @media screen and (min-width: 501px) {
+
 	/* Box information detil */
 	.panel-detil {
 		margin: 50px 20px 20px 20px;
 	}
 }
 
+@media screen and (min-width: 501px) and (max-width: 900px) {
+	.panel-detil {
+		width: 827px
+	}
+}
+
+
 
 .panel-detil [panel-title] {
 	font-weight: bold;
@@ -78,14 +131,17 @@
 	background-color: #ececec;
 	padding: 5px 0 10px 0;
 	border-radius: 0 0 10px 10px;
-	
+
 }
 
 .panel-detil-row {
 	display: grid;
-	grid-template-columns: 1fr 1fr; /* 2 kolom */
-	grid-template-rows: auto auto; /* 2 baris */
-	column-gap: 10px; /* jarak antar item */
+	grid-template-columns: 1fr 1fr;
+	/* 2 kolom */
+	grid-template-rows: auto auto;
+	/* 2 baris */
+	column-gap: 10px;
+	/* jarak antar item */
 	padding: 10px 15px 10px 15px;
 	color: rgb(80, 80, 80);
 
@@ -143,13 +199,13 @@
 }
 
 
-.panel-recordbar > div {
+.panel-recordbar>div {
 	padding: 2px 10px 2px 10px;
 	border-left: 1px solid #bebebe;
-	
+
 }
 
-.panel-recordbar > div:first-child {
+.panel-recordbar>div:first-child {
 	border-left: 0
 }
 
@@ -159,5 +215,4 @@
 
 .panel-recordbar a:hover {
 	color: #000
-	
-}
+}

package/{libs → lib}/webmodule/module-list.css

@@ -22,4 +22,17 @@
 
 @media screen and (min-width: 501px) {
 	
+}
+
+
+
+
+.section-detil-title {
+	font-size: 1.4em;
+	font-weight: bold;
+}
+
+.section-detil-descr {
+	margin: 8px  0 20px;
+	font-style: italic;
 }

package/lib/webmodule/module-print.css

@@ -0,0 +1,28 @@
+@media screen {
+	#print-media-container {
+		background-color: #fff;
+		border: 2px solid #666;
+		visibility: hidden;
+	}
+}
+
+@media print {
+	body * {
+		visibility: hidden;
+	}
+
+	/* 2. Tampilkan kembali (visibility: visible) hanya div yang ingin dicetak */
+	#print-media-container,
+	#print-media-container * {
+		visibility: visible;
+	}
+
+	/* 3. Posisikan div cetak agar menempati seluruh halaman cetak */
+	#print-media-container {
+		border: 0px;
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+
+}

package/{libs → lib}/webmodule/module.css

@@ -1,6 +1,13 @@
 @import url('./module-list.css');
 @import url('./module-edit.css');
 @import url('./module-footer.css');
+@import url('./module-print.css');
+
+:root {
+	--max-mobile-width: 500px;
+	--min-desktop-width: 501px;
+}
+
 
 
 body {
@@ -8,10 +15,14 @@ body {
 
 }
 
+#fRecord-section [name="value"] {
+	user-select: text;
+}
 
 
-#fRecord-section  [name="panel"] {
+#fRecord-section [name="panel"] {
 	display: flex;
+	margin-bottom: 15px;
 }
 
 
@@ -45,8 +56,4 @@ body {
 	border-bottom: 1px solid #8d8d8d;
 	font-size: 0.8rem;
 
-}
-
-
-
-
+}

package/{libs → lib}/webmodule/module.js

@@ -118,7 +118,7 @@ class Module {
 			const result = await api.execute(args, formData)
 			return result 
 		} catch (err) {
-			this.processError(err)
+			await this.processError(err)
 			throw err
 		}
 	}
@@ -129,8 +129,10 @@ class Module {
 		const currentUrl = window.location.href;
 		if (err.status==401) {
 			console.error(err)
-			await $fgta5.MessageBox.error(err.message)
+			window.onbeforeunload = null
+
 			if (inFrane) {
+				await $fgta5.MessageBox.error(`${err.message}!`)  // perlu tambah tanda seru !, agar gak diproses reload di messagebox
 				window.parent.postMessage({
 					action:'REDIRECT_TO_LOGIN',
 					href: '/login',
@@ -138,9 +140,13 @@ class Module {
 
 				}, '*')
 			} else {
-				location.href = `/login?nexturl=${currentUrl}`
+				
+				document.body.innerHTML = `<div style="font-size: 18px; padding: 30px;">Your session was expired.<br>You need to <a href="/login?nexturl=${currentUrl}">relogin</a></div>`
+				setTimeout(()=>{
+					location.href = `/login?nexturl=${currentUrl}`
+				}, 100000)
 			}
-			await this.sleep(10000)
+			// await this.sleep(10000)
 			throw err				
 		} else {
 			throw err
@@ -187,6 +193,10 @@ class Module {
 			input.setSelectionRange(start, start);
 		}
 	}
+
+
+	
+
 }
 
 

package/lib/webmodule/pagehelper.mjs

@@ -0,0 +1,129 @@
+
+export async function openSection(self, sectionName, params, fnOpened) {
+	const context = params.Context
+	const Crsl = context.Crsl
+	const section = Crsl.Items[sectionName]
+	section.setSectionReturn(params.sectionReturn)
+	section.show({}, fnOpened)
+}
+
+
+export function renderLog(tbody, data) {
+	tbody.innerHTML = ''
+
+	for (var row of data) {
+		const tr = document.createElement('tr')
+
+		const tdTime = document.createElement('td')
+		tdTime.innerHTML = row.log_time
+		tdTime.classList.add('logcell')
+
+		const tdUser = document.createElement('td')
+		tdUser.innerHTML = row.log_user_name
+		tdUser.classList.add('logcell')
+
+		const tdAction = document.createElement('td')
+		tdAction.innerHTML = row.log_action
+		tdAction.classList.add('logcell')
+
+		const tdIP = document.createElement('td')
+		tdIP.innerHTML = row.log_ipaddress
+		tdIP.classList.add('logcell')
+
+		const tdRemark = document.createElement('td')
+		tdRemark.innerHTML = row.log_remark
+		tdRemark.classList.add('logcell')
+
+
+		tr.appendChild(tdTime)
+		tr.appendChild(tdUser)
+		tr.appendChild(tdAction)
+		tr.appendChild(tdIP)
+		tr.appendChild(tdRemark)
+		tbody.appendChild(tr)
+	}
+}
+
+
+export async function sleep(ms) {
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			resolve()
+		}, ms)
+	})
+}
+
+
+export function setCssRule(selector, properties) {
+	let found = false;
+
+	for (const sheet of document.styleSheets) {
+		for (let i = 0; i < sheet.cssRules.length; i++) {
+			const rule = sheet.cssRules[i];
+
+			if (rule.selectorText === selector) {
+				for (const [prop, val] of Object.entries(properties)) {
+					rule.style[prop] = val;
+				}
+				found = true;
+			}
+		}
+	}
+
+	// jika rule belum ada, tambahkan
+	if (!found) {
+		const firstSheet = document.styleSheets[0];
+		const props = Object.entries(properties)
+			.map(([p, v]) => `${p}: ${v}`)
+			.join('; ');
+		firstSheet.insertRule(`${selector} { ${props} }`, firstSheet.cssRules.length);
+	}
+}
+
+
+export function formatDecimal(num, prec) {
+	return new Intl.NumberFormat("en-EN", {
+		minimumFractionDigits: prec,
+		maximumFractionDigits: prec
+	}).format(num);
+}
+
+export function formatISODate(isoString, format) {
+	const date = new Date(isoString);
+
+	// Mengambil komponen waktu dalam UTC
+	const day = String(date.getUTCDate()).padStart(2, '0');
+	const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+	const year = String(date.getUTCFullYear());
+
+	// Mapping pola format ke nilai asli
+	const map = {
+		'dd': day,
+		'mm': month,
+		'yyyy': year,
+		'yy': year.slice(-2) // Mengambil 2 angka terakhir tahun
+	};
+
+	// Mengganti pola dalam string format berdasarkan map di atas
+	return format.replace(/dd|mm|yyyy|yy/gi, matched => map[matched.toLowerCase()]);
+}
+
+export function formatNumber(num, decimalPrecision = 0) {
+	return new Intl.NumberFormat("en-EN", {
+		minimumFractionDigits: decimalPrecision,
+		maximumFractionDigits: decimalPrecision
+	}).format(num);
+}
+
+export function setVisibility(el_name, visible) {
+	const el = document.getElementById(el_name)
+	if (el == null) {
+		return
+	}
+
+	if (visible == true) {
+		el.classList.remove('hidden')
+	} else {
+		el.classList.add('hidden')
+	}
+}