andy/corporate_portal_westerindo
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases Wiki Activity

Update project from local

Browse Source
This commit is contained in:
adibwp
2026-07-06 09:36:50 +07:00
parent 0b1cd60738
commit d3c395e45f
2117 changed files with 5151241 additions and 1710497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
component/breadcrumbadmin/breadcrumbadmin.templ
View File

@@ -1,23 +1,23 @@
package breadcrumadmin
templ MainBreadcrumbAdmin() {
<div class="col-11">
<h1 class="title text-black" style="margin-bottom: 0">
PT. Sadhana Abiyasa Sampoerna
</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb" style="margin-bottom: 0">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item">
<a href="#">Employee Health Medical Analytic</a>
</li>
<li class="breadcrumb-item">
<a href="#">PT. Sadhana Abiyasa Sampoerna</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Mcu Karyawan
</li>
</ol>
</nav>
</div>
}
package breadcrumadmin
templ MainBreadcrumbAdmin() {
<div class="col-11">
<h1 class="title text-black" style="margin-bottom: 0">
PT. Sadhana Abiyasa Sampoerna
</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb" style="margin-bottom: 0">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item">
<a href="#">Employee Health Medical Analytic</a>
</li>
<li class="breadcrumb-item">
<a href="#">PT. Sadhana Abiyasa Sampoerna</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Mcu Karyawan
</li>
</ol>
</nav>
</div>
}

52
component/breadcrumbadmin/breadcrumbadminv1.templ
View File

@@ -1,26 +1,26 @@
package breadcrumadmin
import "cpone/models"
templ MainBreadcrumbAdminV1(data models.BreadCrumbV1) {
<div class="col-11">
<h1 class="title text-black" style="margin-bottom: 0">
{ data.Title }
</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb" style="margin-bottom: 0">
for idx, d := range data.Item {
if (idx != len(data.Item) - 1) {
// tidak active
<li class="breadcrumb-item"><a href={ templ.SafeURL(d.Url) }>{ d.Item }</a></li>
} else {
// active
<li class="breadcrumb-item active" aria-current="page">
{ d.Item }
</li>
}
}
</ol>
</nav>
</div>
}
package breadcrumadmin
import "cpone/models"
templ MainBreadcrumbAdminV1(data models.BreadCrumbV1) {
<div class="col-11">
<h1 class="title text-black" style="margin-bottom: 0">
{ data.Title }
</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb" style="margin-bottom: 0">
for idx, d := range data.Item {
if (idx != len(data.Item) - 1) {
// tidak active
<li class="breadcrumb-item"><a href={ templ.SafeURL(d.Url) }>{ d.Item }</a></li>
} else {
// active
<li class="breadcrumb-item active" aria-current="page">
{ d.Item }
</li>
}
}
</ol>
</nav>
</div>
}

196
component/chart/chart.templ
View File

@@ -1,99 +1,99 @@
package chart
templ ShowChart(idDiv string, udata string) {
<div id={ idDiv } class="mx-auto"></div>
@GenerateChart(idDiv, udata)
}
script GenerateChart(idDiv string, udata string) {
htmx.onLoad(function(elt) {
console.log("elt ",elt)
var element = document.getElementById(idDiv);
console.log("element ",element)
if (element) {
element.style.height = "450px";
element.style.width = "100%";
}
var myChart = {};
var option = {};
// var myChart_001 = echarts.init(document.getElementById(idDiv));
myChart[idDiv] = echarts.init(element);
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
console.log("option ", option)
// myChart_001.setOption(option_001);
myChart[idDiv].setOption(option[idDiv]);
});
}
templ ShowChartFixed(idDiv string, udata string, width string, height string) {
<div id={ idDiv } class="mx-auto"></div>
@GenerateChartFixed(idDiv, udata, width, height)
}
script GenerateChartFixed(idDiv string, udata string, width string, height string) {
htmx.onLoad(function(elt) {
// console.log("elt ",elt)
var element = document.getElementById(idDiv);
// console.log("element ",element)
if (element) {
element.style.height = height;
element.style.width = width;
}
var myChart = {};
var option = {};
// var myChart_001 = echarts.init(document.getElementById(idDiv));
myChart[idDiv] = echarts.init(element);
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
// console.log("option ", option)
// myChart_001.setOption(option_001);
myChart[idDiv].setOption(option[idDiv]);
});
}
templ ShowChartResponsiveWidth(idDiv string, udata string, height string) {
<div id={ idDiv } class="mx-auto" style="width: 100%;"></div>
@GenerateChartResponsive(idDiv, udata, height)
}
script GenerateChartResponsive(idDiv string, udata string, height string) {
htmx.onLoad(function(elt) {
// console.log("elt ",elt)
var element = document.getElementById(idDiv);
// console.log("element ",element)
if (element) {
element.style.height = height;
}
var myChart = {};
var option = {};
// var myChart_001 = echarts.init(document.getElementById(idDiv));
myChart[idDiv] = echarts.init(element);
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
// console.log("option ", option)
// myChart_001.setOption(option_001);
if (option[idDiv]['series']['radius']) {
option[idDiv]['series']['radius'] = ['30%', '55%'];
} else {
option[idDiv]['series'][0]['radius'] = ['30%', '55%'];
}
myChart[idDiv].setOption(option[idDiv]);
var resizeObserver = new ResizeObserver(function() {
myChart[idDiv].resize();
});
resizeObserver.observe(element);
});
package chart
templ ShowChart(idDiv string, udata string) {
<div id={ idDiv } class="mx-auto"></div>
@GenerateChart(idDiv, udata)
}
script GenerateChart(idDiv string, udata string) {
htmx.onLoad(function(elt) {
console.log("elt ",elt)
var element = document.getElementById(idDiv);
console.log("element ",element)
if (element) {
element.style.height = "450px";
element.style.width = "100%";
}
var myChart = {};
var option = {};
// var myChart_001 = echarts.init(document.getElementById(idDiv));
myChart[idDiv] = echarts.init(element);
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
console.log("option ", option)
// myChart_001.setOption(option_001);
myChart[idDiv].setOption(option[idDiv]);
});
}
templ ShowChartFixed(idDiv string, udata string, width string, height string) {
<div id={ idDiv } class="mx-auto"></div>
@GenerateChartFixed(idDiv, udata, width, height)
}
script GenerateChartFixed(idDiv string, udata string, width string, height string) {
htmx.onLoad(function(elt) {
// console.log("elt ",elt)
var element = document.getElementById(idDiv);
// console.log("element ",element)
if (element) {
element.style.height = height;
element.style.width = width;
}
var myChart = {};
var option = {};
// var myChart_001 = echarts.init(document.getElementById(idDiv));
myChart[idDiv] = echarts.init(element);
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
// console.log("option ", option)
// myChart_001.setOption(option_001);
myChart[idDiv].setOption(option[idDiv]);
});
}
templ ShowChartResponsiveWidth(idDiv string, udata string, height string) {
<div id={ idDiv } class="mx-auto" style="width: 100%;"></div>
@GenerateChartResponsive(idDiv, udata, height)
}
script GenerateChartResponsive(idDiv string, udata string, height string) {
htmx.onLoad(function(elt) {
// console.log("elt ",elt)
var element = document.getElementById(idDiv);
// console.log("element ",element)
if (element) {
element.style.height = height;
}
var myChart = {};
var option = {};
// var myChart_001 = echarts.init(document.getElementById(idDiv));
myChart[idDiv] = echarts.init(element);
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
// console.log("option ", option)
// myChart_001.setOption(option_001);
if (option[idDiv]['series']['radius']) {
option[idDiv]['series']['radius'] = ['30%', '55%'];
} else {
option[idDiv]['series'][0]['radius'] = ['30%', '55%'];
}
myChart[idDiv].setOption(option[idDiv]);
var resizeObserver = new ResizeObserver(function() {
myChart[idDiv].resize();
});
resizeObserver.observe(element);
});
}

50
component/customcheckbox/customcheckboxv1.templ
View File

@@ -1,25 +1,25 @@
package customcheckbox
import "cpone/models"
templ MainCustomCheckboxInput(inp models.CustomCheckboxv1Prm) {
<div class="form-control bg-field border-0 h-auto">
<div class="form-group">
<label>{ inp.Label }</label>
<div class="checkbox-list">
<label class="checkbox">
if (inp.Value == "on") {
<input type="checkbox" name={ inp.Name } id={ inp.ID } checked/>
} else {
<input type="checkbox" name={ inp.Name } id={ inp.ID }/>
}
<span></span>
{ inp.Text }
</label>
</div>
</div>
<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
{ inp.ErrorMsg }
</div>
</div>
}
package customcheckbox
import "cpone/models"
templ MainCustomCheckboxInput(inp models.CustomCheckboxv1Prm) {
<div class="form-control bg-field border-0 h-auto">
<div class="form-group">
<label>{ inp.Label }</label>
<div class="checkbox-list">
<label class="checkbox">
if (inp.Value == "on") {
<input type="checkbox" name={ inp.Name } id={ inp.ID } checked/>
} else {
<input type="checkbox" name={ inp.Name } id={ inp.ID }/>
}
<span></span>
{ inp.Text }
</label>
</div>
</div>
<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
{ inp.ErrorMsg }
</div>
</div>
}

238
component/customdropdown/customdropdown.templ
View File

@@ -1,119 +1,119 @@
package customdropdown;
import "cpone/models"
templ MainCustomDropdown(inp models.CustomDropdownv1Prm, listItem templ.Component) {
<div class="form-control bg-field border-0 h-auto">
<select
name={ inp.Name }
class="form-control bg-field selectpicker"
data-live-search="true"
data-size="5"
id={ inp.ID }
hx-get={ inp.HxGet }
hx-target={ inp.HxTarget }
hx-indicator={ inp.HxIndicator }
hx-trigger={ inp.HxTrigger }
hx-include={ inp.HxInclude }
>
@listItem
</select>
<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
{ inp.ErrorMsg }
</div>
</div>
}
templ MainCustomDropdownInput(inp models.CustomDropdownv1Prm, listItem templ.Component) {
<div class="form-control bg-field border-0 h-auto">
<select
name={ inp.Name }
class="form-control bg-field selectpicker"
data-live-search="true"
data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
data-size="5"
id={ inp.ID }
>
@listItem
</select>
<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
{ inp.ErrorMsg }
</div>
</div>
}
templ MainCustomDropdownV1(name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string, listItem templ.Component) {
<div class="form-control bg-field border-0 h-auto">
<select
name={ name }
class="form-control bg-field selectpicker"
data-live-search="true"
data-size="5"
id={ id }
hx-get={ hxGet }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
hx-trigger={ hxTrigger }
hx-include={ hxInclude }
>
@listItem
</select>
</div>
}
templ CustomDropdownFilter(
idCmp string,
hxName string,
hxInclude string,
hxGet string,
hxSwap string,
hxTarget string,
hxTrigger string,
hxBeforeRequest templ.ComponentScript,
hxAfterRequest templ.ComponentScript,
listItem templ.Component) {
<select
class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker"
data-live-search="true"
data-size="5"
data-style="btn-field btn-lg rounded-lg"
data-live-search-placeholder="cari ..."
id={ idCmp }
name={ hxName }
hx-include={ hxInclude }
hx-get={ hxGet }
hx-swap={ hxSwap }
hx-target={ hxTarget }
hx-trigger={ hxTrigger }
hx-on::before-request={ hxBeforeRequest }
hx-on::after-request={ hxAfterRequest }
>
@listItem
</select>
}
templ CustomDropdownForm(
inp models.CustomDropdownV2Prm) {
<div class="form-group">
<label class="text-black" style="font-family: Poppins; font-weight: 600;">{ inp.Label } </label>
<select
if inp.ErrorMsg =="" {
class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker"
} else {
class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker is-invalid"
}
data-live-search="true"
data-size="5"
title={ inp.Placeholder }
data-style="btn-field btn-lg rounded-lg"
data-live-search-placeholder="cari ..."
name={ inp.Name }
id={ inp.ID }
>
@inp.ListItem
</select>
<div class="invalid-feedback text-danger mt-3 ml-2">
{ inp.ErrorMsg }
</div>
</div>
}
package customdropdown;
import "cpone/models"
templ MainCustomDropdown(inp models.CustomDropdownv1Prm, listItem templ.Component) {
<div class="form-control bg-field border-0 h-auto">
<select
name={ inp.Name }
class="form-control bg-field selectpicker"
data-live-search="true"
data-size="5"
id={ inp.ID }
hx-get={ inp.HxGet }
hx-target={ inp.HxTarget }
hx-indicator={ inp.HxIndicator }
hx-trigger={ inp.HxTrigger }
hx-include={ inp.HxInclude }
>
@listItem
</select>
<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
{ inp.ErrorMsg }
</div>
</div>
}
templ MainCustomDropdownInput(inp models.CustomDropdownv1Prm, listItem templ.Component) {
<div class="form-control bg-field border-0 h-auto">
<select
name={ inp.Name }
class="form-control bg-field selectpicker"
data-live-search="true"
data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
data-size="5"
id={ inp.ID }
>
@listItem
</select>
<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
{ inp.ErrorMsg }
</div>
</div>
}
templ MainCustomDropdownV1(name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string, listItem templ.Component) {
<div class="form-control bg-field border-0 h-auto">
<select
name={ name }
class="form-control bg-field selectpicker"
data-live-search="true"
data-size="5"
id={ id }
hx-get={ hxGet }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
hx-trigger={ hxTrigger }
hx-include={ hxInclude }
>
@listItem
</select>
</div>
}
templ CustomDropdownFilter(
idCmp string,
hxName string,
hxInclude string,
hxGet string,
hxSwap string,
hxTarget string,
hxTrigger string,
hxBeforeRequest templ.ComponentScript,
hxAfterRequest templ.ComponentScript,
listItem templ.Component) {
<select
class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker"
data-live-search="true"
data-size="5"
data-style="btn-field btn-lg rounded-lg"
data-live-search-placeholder="cari ..."
id={ idCmp }
name={ hxName }
hx-include={ hxInclude }
hx-get={ hxGet }
hx-swap={ hxSwap }
hx-target={ hxTarget }
hx-trigger={ hxTrigger }
hx-on::before-request={ hxBeforeRequest }
hx-on::after-request={ hxAfterRequest }
>
@listItem
</select>
}
templ CustomDropdownForm(
inp models.CustomDropdownV2Prm) {
<div class="form-group">
<label class="text-black" style="font-family: Poppins; font-weight: 600;">{ inp.Label } </label>
<select
if inp.ErrorMsg =="" {
class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker"
} else {
class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker is-invalid"
}
data-live-search="true"
data-size="5"
title={ inp.Placeholder }
data-style="btn-field btn-lg rounded-lg"
data-live-search-placeholder="cari ..."
name={ inp.Name }
id={ inp.ID }
>
@inp.ListItem
</select>
<div class="invalid-feedback text-danger mt-3 ml-2">
{ inp.ErrorMsg }
</div>
</div>
}

44
component/customradiobutton/customradiobuttoninline.templ
View File

@@ -1,22 +1,22 @@
package customradiobuttoninline
import "cpone/models"
templ MainCustomRadioButtonInput(inp models.CustomRadioButtonv1Prm) {
<div class="mt-5">
<label for="input1" style="font-family: Poppins; font-weight: 600">{ inp.Label }</label>
<div class="form-control">
<div class="form-group">
<div style="display: flex; gap: 20px">
<label style="display: flex; align-items: center; gap: 5px">
<input type="radio" name="nationality" value={ inp.Value }/>
<p style="margin: 0">{ inp.Text }</p>
</label>
</div>
</div>
</div>
<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
{ inp.ErrorMsg }
</div>
</div>
}
package customradiobuttoninline
import "cpone/models"
templ MainCustomRadioButtonInput(inp models.CustomRadioButtonv1Prm) {
<div class="mt-5">
<label for="input1" style="font-family: Poppins; font-weight: 600">{ inp.Label }</label>
<div class="form-control">
<div class="form-group">
<div style="display: flex; gap: 20px">
<label style="display: flex; align-items: center; gap: 5px">
<input type="radio" name="nationality" value={ inp.Value }/>
<p style="margin: 0">{ inp.Text }</p>
</label>
</div>
</div>
</div>
<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
{ inp.ErrorMsg }
</div>
</div>
}

34
component/customtextfield/customtextfield.templ
View File

@@ -1,17 +1,17 @@
package customtextfield
templ MainCustomTextField(inpLabelText,
inpName,
inpPlaceHolder,
inpType string) {
<div class="form-group">
<label class="text-black" style="font-family: Poppins; font-weight: 600;">{ inpLabelText } </label>
<input
id={ inpName }
name={ inpName }
type={ inpType }
placeholder={ inpPlaceHolder }
class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
/>
</div>
}
package customtextfield
templ MainCustomTextField(inpLabelText,
inpName,
inpPlaceHolder,
inpType string) {
<div class="form-group">
<label class="text-black" style="font-family: Poppins; font-weight: 600;">{ inpLabelText } </label>
<input
id={ inpName }
name={ inpName }
type={ inpType }
placeholder={ inpPlaceHolder }
class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
/>
</div>
}

62
component/customtextfield/customtextfieldv2.templ
View File

@@ -1,31 +1,31 @@
package customtextfield
import "cpone/models"
templ CustomTextFieldv2(inp models.CustomTextFieldv2Prm) {
<div class="form-group">
<label
if inp.Type == "hidden" {
class="text-black d-none"
} else {
class="text-black"
}
style="font-family: Poppins; font-weight: 600;"
>{ inp.Label } </label>
<input
id={ inp.Name }
name={ inp.Name }
type={ inp.Type }
placeholder={ inp.Placeholder }
value={ inp.Value }
if inp.ErrorMsg =="" {
class="form-control bg-field border-0 form-control-lg bg-field rounded-lg"
} else {
class="form-control bg-field border-1 form-control-lg bg-field rounded-lg is-invalid"
}
/>
<div class="invalid-feedback text-danger mt-3 ml-2">
{ inp.ErrorMsg }
</div>
</div>
}
package customtextfield
import "cpone/models"
templ CustomTextFieldv2(inp models.CustomTextFieldv2Prm) {
<div class="form-group">
<label
if inp.Type == "hidden" {
class="text-black d-none"
} else {
class="text-black"
}
style="font-family: Poppins; font-weight: 600;"
>{ inp.Label } </label>
<input
id={ inp.Name }
name={ inp.Name }
type={ inp.Type }
placeholder={ inp.Placeholder }
value={ inp.Value }
if inp.ErrorMsg =="" {
class="form-control bg-field border-0 form-control-lg bg-field rounded-lg"
} else {
class="form-control bg-field border-1 form-control-lg bg-field rounded-lg is-invalid"
}
/>
<div class="invalid-feedback text-danger mt-3 ml-2">
{ inp.ErrorMsg }
</div>
</div>
}

252
component/customtextfieldautocomplete/customtextfieldautocomplete.templ
View File

@@ -1,126 +1,126 @@
package customtextfieldautocomplete;
import (
"cpone/layout"
"cpone/models"
)
templ MainCustomAutoComplete(value string) {
<div id="initial" class="form-group">
<input
class="form-control bg-field"
type="text"
autocomplete="off"
placeholder="Search Data..."
id="searchAutocomplete"
name="searchAutocomplete"
hx-get="/client/autocomplete"
hx-trigger="input changed delay:500ms, search"
hx-target="#hasilAutoComplete"
hx-indicator="#indicator"
value={ value }
/>
<div id="hasilAutoComplete">
<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
}
templ ListCustomAutoCompleteHide() {
<div id="hasilAutoComplete"></div>
}
templ ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []models.AutoComplete) {
<div id="contentList" class="bootstrap-autocomplete dropdown-menu-custom bg-white show">
if len(data) == 0 {
<a class="dropdown-item" href="#" style="overflow: hidden; text-overflow: ellipsis;">Data Tidak Ditemukan</a>
} else {
for _, d := range data {
<a
hx-trigger="click"
hx-get={ "/client/autoCompleteSetValue/" + d.Name }
hx-swap="outerHTML"
hx-target="#initial"
class="dropdown-item"
style="overflow: hidden; text-overflow: ellipsis;"
>{ d.Name }</a>
}
}
<div class="container px-4">
<div class="row mb-4">
<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<p style="font-style: italic; margin: 0; text-align: left;">{ textFound }</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
if foundCount == totalDataInt {
<a href="#" class="btn btn-link-primary text-primary mr-2 disabled">Show More</a>
} else {
<a
href="#"
hx-get={ "/client/autoCompleteLoadMore/" + pageOf + "/" + param + "/" + limit }
hx-trigger="click"
hx-target="#contentList"
hx-swap="outerHTML"
hx-select="#contentList"
hx-indicator="#indicator"
class="text-dark-75 text-hover-primary mr-2"
>Show More</a>
}
</div>
</div>
</div>
</div>
}
templ JsCustomAutoComplete() {
}
templ CssCustomAutoComplete() {
<style>
.htmx-indicator{
display:none;
}
.htmx-request .htmx-indicator{
display:inline;
opacity:1;
}
.htmx-request.htmx-indicator{
display:inline;
opacity:1;
}
.dropdown-menu-custom {
/* position: absolute; */
/* top: 100%; */
/* left: 0; */
/* z-index: 1000; */
/* display: none; */
width: 100%;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
/* color: #212529; */
text-align: left;
list-style: none;
/* background-color: #fff; */
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
</style>
}
templ ShowCustomAutoComplete(title string, cmp templ.Component, css templ.Component, js templ.Component) {
@layout.PlaygroundLayout(title, css, js) {
@cmp
}
}
package customtextfieldautocomplete;
import (
"cpone/layout"
"cpone/models"
)
templ MainCustomAutoComplete(value string) {
<div id="initial" class="form-group">
<input
class="form-control bg-field"
type="text"
autocomplete="off"
placeholder="Search Data..."
id="searchAutocomplete"
name="searchAutocomplete"
hx-get="/client/autocomplete"
hx-trigger="input changed delay:500ms, search"
hx-target="#hasilAutoComplete"
hx-indicator="#indicator"
value={ value }
/>
<div id="hasilAutoComplete">
<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
}
templ ListCustomAutoCompleteHide() {
<div id="hasilAutoComplete"></div>
}
templ ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []models.AutoComplete) {
<div id="contentList" class="bootstrap-autocomplete dropdown-menu-custom bg-white show">
if len(data) == 0 {
<a class="dropdown-item" href="#" style="overflow: hidden; text-overflow: ellipsis;">Data Tidak Ditemukan</a>
} else {
for _, d := range data {
<a
hx-trigger="click"
hx-get={ "/client/autoCompleteSetValue/" + d.Name }
hx-swap="outerHTML"
hx-target="#initial"
class="dropdown-item"
style="overflow: hidden; text-overflow: ellipsis;"
>{ d.Name }</a>
}
}
<div class="container px-4">
<div class="row mb-4">
<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<p style="font-style: italic; margin: 0; text-align: left;">{ textFound }</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
if foundCount == totalDataInt {
<a href="#" class="btn btn-link-primary text-primary mr-2 disabled">Show More</a>
} else {
<a
href="#"
hx-get={ "/client/autoCompleteLoadMore/" + pageOf + "/" + param + "/" + limit }
hx-trigger="click"
hx-target="#contentList"
hx-swap="outerHTML"
hx-select="#contentList"
hx-indicator="#indicator"
class="text-dark-75 text-hover-primary mr-2"
>Show More</a>
}
</div>
</div>
</div>
</div>
}
templ JsCustomAutoComplete() {
}
templ CssCustomAutoComplete() {
<style>
.htmx-indicator{
display:none;
}
.htmx-request .htmx-indicator{
display:inline;
opacity:1;
}
.htmx-request.htmx-indicator{
display:inline;
opacity:1;
}
.dropdown-menu-custom {
/* position: absolute; */
/* top: 100%; */
/* left: 0; */
/* z-index: 1000; */
/* display: none; */
width: 100%;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
/* color: #212529; */
text-align: left;
list-style: none;
/* background-color: #fff; */
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
</style>
}
templ ShowCustomAutoComplete(title string, cmp templ.Component, css templ.Component, js templ.Component) {
@layout.PlaygroundLayout(title, css, js) {
@cmp
}
}

248
component/customtextfieldsearch/customtextfieldsearch.templ
View File

@@ -1,124 +1,124 @@
package customtextfieldsearch
templ MainCustomTextFieldSearch(
inpName,
inpPlaceHolder,
inpType,
hxPost,
hxTrigger,
hxTarget,
hxIndicator string) {
<input
class="form-control bg-field border-0"
type={ inpType }
name={ inpName }
id={ inpName }
placeholder={ inpPlaceHolder }
hx-post={ hxPost }
hx-trigger={ hxTrigger }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
autocomplete="off"
/>
}
templ MainCustomTextFieldSearchV1(
inpId,
inpName,
inpPlaceHolder,
inpType,
hxGet,
hxTrigger,
hxTarget,
hxIndicator,
value,
hxExt string) {
<input
class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
type={ inpType }
name={ inpName }
id={ inpId }
placeholder={ inpPlaceHolder }
hx-get={ hxGet }
hx-trigger={ hxTrigger }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
value={ value }
hx-ext={ hxExt }
autocomplete="off"
/>
}
templ MainCustomTextFieldSearchV2(
inpId,
inpName,
inpPlaceHolder,
inpType,
hxGet,
hxTrigger,
hxTarget,
hxIndicator,
value,
hxSwap string,
hxInclude string) {
<input
class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
type={ inpType }
name={ inpName }
id={ inpId }
placeholder={ inpPlaceHolder }
hx-get={ hxGet }
hx-trigger={ hxTrigger }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
value={ value }
hx-include={ hxInclude }
hx-swap={ hxSwap }
autocomplete="off"
/>
<script>
document.body.addEventListener('htmx:targetError', function(event) {
console.error('Error updating target element:', event.detail);
alert('There was an error updating the target element.');
});
</script>
}
templ MainCustomTextFieldSearchV3(
inpId,
inpName,
inpPlaceHolder,
inpType,
hxGet,
hxTrigger,
hxTarget,
hxIndicator,
value,
hxSwap string,
hxInclude string,
hxBeforeRequest templ.ComponentScript,
hxAfterRequest templ.ComponentScript) {
<input
class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
type={ inpType }
name={ inpName }
id={ inpId }
placeholder={ inpPlaceHolder }
hx-get={ hxGet }
hx-trigger={ hxTrigger }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
value={ value }
hx-include={ hxInclude }
hx-swap={ hxSwap }
hx-on::before-request={ hxBeforeRequest }
hx-on::after-request={ hxAfterRequest }
autocomplete="off"
/>
<script>
document.body.addEventListener('htmx:targetError', function(event) {
console.error('Error updating target element:', event.detail);
alert('There was an error updating the target element.');
});
</script>
}
package customtextfieldsearch
templ MainCustomTextFieldSearch(
inpName,
inpPlaceHolder,
inpType,
hxPost,
hxTrigger,
hxTarget,
hxIndicator string) {
<input
class="form-control bg-field border-0"
type={ inpType }
name={ inpName }
id={ inpName }
placeholder={ inpPlaceHolder }
hx-post={ hxPost }
hx-trigger={ hxTrigger }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
autocomplete="off"
/>
}
templ MainCustomTextFieldSearchV1(
inpId,
inpName,
inpPlaceHolder,
inpType,
hxGet,
hxTrigger,
hxTarget,
hxIndicator,
value,
hxExt string) {
<input
class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
type={ inpType }
name={ inpName }
id={ inpId }
placeholder={ inpPlaceHolder }
hx-get={ hxGet }
hx-trigger={ hxTrigger }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
value={ value }
hx-ext={ hxExt }
autocomplete="off"
/>
}
templ MainCustomTextFieldSearchV2(
inpId,
inpName,
inpPlaceHolder,
inpType,
hxGet,
hxTrigger,
hxTarget,
hxIndicator,
value,
hxSwap string,
hxInclude string) {
<input
class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
type={ inpType }
name={ inpName }
id={ inpId }
placeholder={ inpPlaceHolder }
hx-get={ hxGet }
hx-trigger={ hxTrigger }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
value={ value }
hx-include={ hxInclude }
hx-swap={ hxSwap }
autocomplete="off"
/>
<script>
document.body.addEventListener('htmx:targetError', function(event) {
console.error('Error updating target element:', event.detail);
alert('There was an error updating the target element.');
});
</script>
}
templ MainCustomTextFieldSearchV3(
inpId,
inpName,
inpPlaceHolder,
inpType,
hxGet,
hxTrigger,
hxTarget,
hxIndicator,
value,
hxSwap string,
hxInclude string,
hxBeforeRequest templ.ComponentScript,
hxAfterRequest templ.ComponentScript) {
<input
class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
type={ inpType }
name={ inpName }
id={ inpId }
placeholder={ inpPlaceHolder }
hx-get={ hxGet }
hx-trigger={ hxTrigger }
hx-target={ hxTarget }
hx-indicator={ hxIndicator }
value={ value }
hx-include={ hxInclude }
hx-swap={ hxSwap }
hx-on::before-request={ hxBeforeRequest }
hx-on::after-request={ hxAfterRequest }
autocomplete="off"
/>
<script>
document.body.addEventListener('htmx:targetError', function(event) {
console.error('Error updating target element:', event.detail);
alert('There was an error updating the target element.');
});
</script>
}

168
component/modal/modal.templ
View File

@@ -1,85 +1,85 @@
package modalcomponent
templ Modal(modalID string, modalTitle string, modalBody templ.Component, modalAction templ.Component, btnClose templ.Component) {
<div
class="modal fade"
style="display: none"
id={ modalID }
tabindex="-1"
role="dialog"
data-backdrop="static"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content rounded-lg">
<div class="modal-header border-bottom-0">
<h6 class="modal-title text-black font-weight-bolder">
{ modalTitle }
</h6>
@btnClose
</div>
<div class="modal-body border-bottom-0">
@modalBody
</div>
<div class="modal-footer border-top-0">
@modalAction
</div>
</div>
</div>
</div>
}
templ ModalXL(modalID string, modalTitle string, modalBody templ.Component, modalAction templ.Component, btnClose templ.Component) {
<div
class="modal fade"
style="display: none"
id={ modalID }
tabindex="-1"
role="dialog"
data-backdrop="static"
aria-hidden="true"
>
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
<div class="modal-content rounded-lg">
<div class="modal-header border-bottom-0">
<h6 class="modal-title text-black font-weight-bolder">
{ modalTitle }
</h6>
@btnClose
</div>
<div class="modal-body border-bottom-0">
@modalBody
</div>
<div class="modal-footer border-top-0">
@modalAction
</div>
</div>
</div>
</div>
}
templ ModalViewXL(modalID string, modalTitle string, modalBody templ.Component, btnClose templ.Component) {
<div
class="modal fade"
style="display: none"
id={ modalID }
tabindex="-1"
role="dialog"
data-backdrop="static"
aria-hidden="true"
>
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
<div class="modal-content rounded-lg">
<div class="modal-header border-bottom-0">
<h6 class="modal-title text-black font-weight-bolder">
{ modalTitle }
</h6>
@btnClose
</div>
<div class="modal-body border-bottom-0">
@modalBody
</div>
</div>
</div>
</div>
package modalcomponent
templ Modal(modalID string, modalTitle string, modalBody templ.Component, modalAction templ.Component, btnClose templ.Component) {
<div
class="modal fade"
style="display: none"
id={ modalID }
tabindex="-1"
role="dialog"
data-backdrop="static"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content rounded-lg">
<div class="modal-header border-bottom-0">
<h6 class="modal-title text-black font-weight-bolder">
{ modalTitle }
</h6>
@btnClose
</div>
<div class="modal-body border-bottom-0">
@modalBody
</div>
<div class="modal-footer border-top-0">
@modalAction
</div>
</div>
</div>
</div>
}
templ ModalXL(modalID string, modalTitle string, modalBody templ.Component, modalAction templ.Component, btnClose templ.Component) {
<div
class="modal fade"
style="display: none"
id={ modalID }
tabindex="-1"
role="dialog"
data-backdrop="static"
aria-hidden="true"
>
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
<div class="modal-content rounded-lg">
<div class="modal-header border-bottom-0">
<h6 class="modal-title text-black font-weight-bolder">
{ modalTitle }
</h6>
@btnClose
</div>
<div class="modal-body border-bottom-0">
@modalBody
</div>
<div class="modal-footer border-top-0">
@modalAction
</div>
</div>
</div>
</div>
}
templ ModalViewXL(modalID string, modalTitle string, modalBody templ.Component, btnClose templ.Component) {
<div
class="modal fade"
style="display: none"
id={ modalID }
tabindex="-1"
role="dialog"
data-backdrop="static"
aria-hidden="true"
>
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
<div class="modal-content rounded-lg">
<div class="modal-header border-bottom-0">
<h6 class="modal-title text-black font-weight-bolder">
{ modalTitle }
</h6>
@btnClose
</div>
<div class="modal-body border-bottom-0">
@modalBody
</div>
</div>
</div>
</div>
}

104
component/modal/modal_confirmation.templ
View File

@@ -1,52 +1,52 @@
package modalcomponent
templ ModalConfirmation(
id string,
modalTitle string,
message string,
btnClose templ.Component,
datHeader []string,
dataText []string,
modalAction templ.Component) {
<div
class="modal fade"
id={ id }
tabindex="-1"
aria-labelledby="exampleModalLabel"
data-backdrop="static"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-lg">
<div class="modal-header border-bottom-0">
<h6 class="modal-title text-black font-weight-bolder">
{ modalTitle }
</h6>
@btnClose
</div>
<div class="modal-body border-bottom-0">
<p>{ message }</p>
<div class="card rounded-lg">
<div class="card-body d-flex flex-row">
<div class="d-flex flex-column">
for _, v := range datHeader {
<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
}
</div>
<div class="d-flex flex-column ">
for _, v := range dataText {
<div class="mb-1 mt-1 font-weight-bold">
{ v }
</div>
}
</div>
</div>
</div>
</div>
<div class="modal-footer border-top-0">
@modalAction
</div>
</div>
</div>
</div>
}
package modalcomponent
templ ModalConfirmation(
id string,
modalTitle string,
message string,
btnClose templ.Component,
datHeader []string,
dataText []string,
modalAction templ.Component) {
<div
class="modal fade"
id={ id }
tabindex="-1"
aria-labelledby="exampleModalLabel"
data-backdrop="static"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-lg">
<div class="modal-header border-bottom-0">
<h6 class="modal-title text-black font-weight-bolder">
{ modalTitle }
</h6>
@btnClose
</div>
<div class="modal-body border-bottom-0">
<p>{ message }</p>
<div class="card rounded-lg">
<div class="card-body d-flex flex-row">
<div class="d-flex flex-column">
for _, v := range datHeader {
<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
}
</div>
<div class="d-flex flex-column ">
for _, v := range dataText {
<div class="mb-1 mt-1 font-weight-bold">
{ v }
</div>
}
</div>
</div>
</div>
</div>
<div class="modal-footer border-top-0">
@modalAction
</div>
</div>
</div>
</div>
}

236
component/navbar/navbar.templ
View File

@@ -1,118 +1,118 @@
package navbar
import (
"cpone/component/sidebarmaster"
"cpone/models"
)
templ Navbar(dataUser models.User) {
<div id="kt_header" class="header header-fixed ">
<!--begin::Container-->
<div class="container-fluid d-flex align-items-stretch justify-content-between">
<!--begin::Header Menu Wrapper-->
<div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper"></div>
<!--end::Header Menu Wrapper-->
<!--begin::Topbar-->
<div class="topbar">
<!--begin::User-->
<div class="topbar-item">
<div
class="btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2"
id="kt_quick_user_toggle"
>
<span
class="text-muted font-weight-bold font-size-base d-none d-md-inline mr-1"
>Hi,</span>
<span
class="text-dark-50 font-weight-bolder font-size-base d-none d-md-inline mr-3"
>{ dataUser.Username }</span>
<span class="bg-primary-transparent p-3" style="border-radius: 50%; width: 40px; height: 40px;">
<span class="iconify text-primary" data-icon="gravity-ui:person"></span>
</span>
</div>
</div>
<!--end::User-->
</div>
<!--end::Topbar-->
</div>
<!--end::Container-->
</div>
}
templ NavbarWithLogo(dataUser models.User) {
<div id="kt_header" class="header">
<!--begin::Container-->
<div class="container-fluid d-flex align-items-stretch justify-content-between">
<!--begin::Header Menu Wrapper-->
<div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper">
<a class="navbar-brand" href="#">
<img
src="/asset-corporate-portal/media/landingpage/logo.png"
width="126"
height="40"
class="d-inline-block align-top"
alt="Your Brand"
/>
</a>
</div>
<!--end::Header Menu Wrapper-->
<!--begin::Topbar-->
<div class="topbar">
<!--begin::User-->
<div class="topbar-item">
<div
class="btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2"
id="kt_quick_user_toggle"
>
<span
class="text-muted font-weight-bold font-size-base d-none d-md-inline mr-1"
>Hi,</span>
<span
class="text-dark-50 font-weight-bolder font-size-base d-none d-md-inline mr-3"
>{ dataUser.Username }</span>
<span class="bg-primary-transparent p-3" style="border-radius: 50%; width: 40px; height: 40px;">
<span class="iconify text-primary" data-icon="gravity-ui:person"></span>
</span>
</div>
</div>
<!--end::User-->
</div>
<!--end::Topbar-->
</div>
<!--end::Container-->
</div>
}
templ NavbarMenu(datamenu []models.Menu) {
<div class="aside-menu-wrapper flex-column-fluid" id="kt_aside_menu_wrapper">
<!--begin::Menu Container-->
<div
id="kt_aside_menu"
class="aside-menu my-4 "
data-menu-vertical="1"
data-menu-scroll="1"
data-menu-dropdown-timeout="500"
>
<!--begin::Menu Nav-->
<ul class="menu-nav ">
for index, d := range datamenu {
if index == 0 {
// @MenuDashboard(d.ParentMenuName, d.ParentUrl)
@sidebarmaster.MenuDashboard(d.ParentMenuName, d.ParentUrl)
<li class="menu-section ">
<h4 class="menu-text">Menu</h4>
<i class="menu-icon ki ki-bold-more-hor icon-md"></i>
</li>
}
if index+1 < len(datamenu) {
// @ListMenuNavbar(datamenu[index+1].ParentMenuName, d.Children)
@sidebarmaster.ListMenuNavbar(datamenu[index+1].ParentMenuName, datamenu[index+1].Children)
}
}
</ul>
<!--end::Menu Nav-->
</div>
<!--end::Menu Container-->
</div>
}
package navbar
import (
"cpone/component/sidebarmaster"
"cpone/models"
)
templ Navbar(dataUser models.User) {
<div id="kt_header" class="header header-fixed ">
<!--begin::Container-->
<div class="container-fluid d-flex align-items-stretch justify-content-between">
<!--begin::Header Menu Wrapper-->
<div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper"></div>
<!--end::Header Menu Wrapper-->
<!--begin::Topbar-->
<div class="topbar">
<!--begin::User-->
<div class="topbar-item">
<div
class="btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2"
id="kt_quick_user_toggle"
>
<span
class="text-muted font-weight-bold font-size-base d-none d-md-inline mr-1"
>Hi,</span>
<span
class="text-dark-50 font-weight-bolder font-size-base d-none d-md-inline mr-3"
>{ dataUser.Username }</span>
<span class="bg-primary-transparent p-3" style="border-radius: 50%; width: 40px; height: 40px;">
<span class="iconify text-primary" data-icon="gravity-ui:person"></span>
</span>
</div>
</div>
<!--end::User-->
</div>
<!--end::Topbar-->
</div>
<!--end::Container-->
</div>
}
templ NavbarWithLogo(dataUser models.User) {
<div id="kt_header" class="header">
<!--begin::Container-->
<div class="container-fluid d-flex align-items-stretch justify-content-between">
<!--begin::Header Menu Wrapper-->
<div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper">
<a class="navbar-brand" href="#">
<img
src="/asset-corporate-portal/media/landingpage/logo.png"
width="126"
height="40"
class="d-inline-block align-top"
alt="Your Brand"
/>
</a>
</div>
<!--end::Header Menu Wrapper-->
<!--begin::Topbar-->
<div class="topbar">
<!--begin::User-->
<div class="topbar-item">
<div
class="btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2"
id="kt_quick_user_toggle"
>
<span
class="text-muted font-weight-bold font-size-base d-none d-md-inline mr-1"
>Hi,</span>
<span
class="text-dark-50 font-weight-bolder font-size-base d-none d-md-inline mr-3"
>{ dataUser.Username }</span>
<span class="bg-primary-transparent p-3" style="border-radius: 50%; width: 40px; height: 40px;">
<span class="iconify text-primary" data-icon="gravity-ui:person"></span>
</span>
</div>
</div>
<!--end::User-->
</div>
<!--end::Topbar-->
</div>
<!--end::Container-->
</div>
}
templ NavbarMenu(datamenu []models.Menu) {
<div class="aside-menu-wrapper flex-column-fluid" id="kt_aside_menu_wrapper">
<!--begin::Menu Container-->
<div
id="kt_aside_menu"
class="aside-menu my-4 "
data-menu-vertical="1"
data-menu-scroll="1"
data-menu-dropdown-timeout="500"
>
<!--begin::Menu Nav-->
<ul class="menu-nav ">
for index, d := range datamenu {
if index == 0 {
// @MenuDashboard(d.ParentMenuName, d.ParentUrl)
@sidebarmaster.MenuDashboard(d.ParentMenuName, d.ParentUrl)
<li class="menu-section ">
<h4 class="menu-text">Menu</h4>
<i class="menu-icon ki ki-bold-more-hor icon-md"></i>
</li>
}
if index+1 < len(datamenu) {
// @ListMenuNavbar(datamenu[index+1].ParentMenuName, d.Children)
@sidebarmaster.ListMenuNavbar(datamenu[index+1].ParentMenuName, datamenu[index+1].Children)
}
}
</ul>
<!--end::Menu Nav-->
</div>
<!--end::Menu Container-->
</div>
}

118
component/pagination/pagination.templ
View File

@@ -1,59 +1,59 @@
package pagination
import "strconv"
templ Pagination(length int, currentPage int, link string, contentID string) {
// hx-on::before-request={ HideContent(contentID) }
// hx-on::after-request="alert('Done making a request!')"
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
for i:=0; i<length; i++ {
if (i+1) == currentPage {
<a
hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID }
class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
hx-swap="outerHTML"
hx-indicator="#indicator"
hx-trigger="click"
hx-on::before-request={ HideContent(contentID) }
hx-on::after-request={ ShowContent(contentID) }
hx-target={ "#" + contentID }
>{ strconv.Itoa(i+1) }</a>
} else {
<a
hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID }
class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
hx-swap="outerHTML"
hx-indicator="#indicator"
hx-trigger="click"
hx-on::before-request={ HideContent(contentID) }
hx-on::after-request={ ShowContent(contentID) }
hx-target={ "#" + contentID }
>{ strconv.Itoa(i+1) }</a>
}
}
</div>
</div>
}
script ShowContent(contentID string) {
console.log("Show Content");
console.log(contentID);
document.getElementById(contentID).setAttribute("visible","");
// document.querySelector('#'+contentID).style.display = 'block';
// document.querySelector('#'+contentID).setAttribute("visible","");
}
script HideContent(contentID string) {
console.log("Hide Content");
console.log(contentID);
document.getElementById(contentID).setAttribute("hidden","");
// document.querySelector('#'+contentID).style.display = 'none';
// document.querySelector('#'+contentID).setAttribute("hidden","");
}
script CobaContent(contentID string) {
console.log(contentID);
}
package pagination
import "strconv"
templ Pagination(length int, currentPage int, link string, contentID string) {
// hx-on::before-request={ HideContent(contentID) }
// hx-on::after-request="alert('Done making a request!')"
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
for i:=0; i<length; i++ {
if (i+1) == currentPage {
<a
hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID }
class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
hx-swap="outerHTML"
hx-indicator="#indicator"
hx-trigger="click"
hx-on::before-request={ HideContent(contentID) }
hx-on::after-request={ ShowContent(contentID) }
hx-target={ "#" + contentID }
>{ strconv.Itoa(i+1) }</a>
} else {
<a
hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID }
class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
hx-swap="outerHTML"
hx-indicator="#indicator"
hx-trigger="click"
hx-on::before-request={ HideContent(contentID) }
hx-on::after-request={ ShowContent(contentID) }
hx-target={ "#" + contentID }
>{ strconv.Itoa(i+1) }</a>
}
}
</div>
</div>
}
script ShowContent(contentID string) {
console.log("Show Content");
console.log(contentID);
document.getElementById(contentID).setAttribute("visible","");
// document.querySelector('#'+contentID).style.display = 'block';
// document.querySelector('#'+contentID).setAttribute("visible","");
}
script HideContent(contentID string) {
console.log("Hide Content");
console.log(contentID);
document.getElementById(contentID).setAttribute("hidden","");
// document.querySelector('#'+contentID).style.display = 'none';
// document.querySelector('#'+contentID).setAttribute("hidden","");
}
script CobaContent(contentID string) {
console.log(contentID);
}

110
component/pagination/paginationv1.templ
View File

@@ -1,55 +1,55 @@
package pagination
import "strconv"
templ PaginationV1(length int, currentPage int, link string, contentID string, searchQueryParam string) {
// hx-on::before-request={ HideContent(contentID) }
// hx-on::after-request="alert('Done making a request!')"
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
for i:=0; i<length; i++ {
if (i+1) == currentPage {
<a
hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID + searchQueryParam }
class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
hx-swap="outerHTML"
hx-indicator="#indicator"
hx-trigger="click"
hx-target={ "#" + contentID }
>{ strconv.Itoa(i+1) }</a>
} else {
<a
hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID + searchQueryParam }
class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
hx-swap="outerHTML"
hx-indicator="#indicator"
hx-trigger="click"
hx-target={ "#" + contentID }
>{ strconv.Itoa(i+1) }</a>
}
}
</div>
</div>
}
// script ShowContent(contentID string) {
// console.log("Show Content");
// console.log(contentID);
// document.getElementById(contentID).setAttribute("visible","");
// // document.querySelector('#'+contentID).style.display = 'block';
// // document.querySelector('#'+contentID).setAttribute("visible","");
// }
// script HideContent(contentID string) {
// console.log("Hide Content");
// console.log(contentID);
// document.getElementById(contentID).setAttribute("hidden","");
// // document.querySelector('#'+contentID).style.display = 'none';
// // document.querySelector('#'+contentID).setAttribute("hidden","");
// }
// script CobaContent(contentID string) {
// console.log(contentID);
// }
package pagination
import "strconv"
templ PaginationV1(length int, currentPage int, link string, contentID string, searchQueryParam string) {
// hx-on::before-request={ HideContent(contentID) }
// hx-on::after-request="alert('Done making a request!')"
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex flex-wrap py-2 mr-3">
for i:=0; i<length; i++ {
if (i+1) == currentPage {
<a
hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID + searchQueryParam }
class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
hx-swap="outerHTML"
hx-indicator="#indicator"
hx-trigger="click"
hx-target={ "#" + contentID }
>{ strconv.Itoa(i+1) }</a>
} else {
<a
hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID + searchQueryParam }
class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
hx-swap="outerHTML"
hx-indicator="#indicator"
hx-trigger="click"
hx-target={ "#" + contentID }
>{ strconv.Itoa(i+1) }</a>
}
}
</div>
</div>
}
// script ShowContent(contentID string) {
// console.log("Show Content");
// console.log(contentID);
// document.getElementById(contentID).setAttribute("visible","");
// // document.querySelector('#'+contentID).style.display = 'block';
// // document.querySelector('#'+contentID).setAttribute("visible","");
// }
// script HideContent(contentID string) {
// console.log("Hide Content");
// console.log(contentID);
// document.getElementById(contentID).setAttribute("hidden","");
// // document.querySelector('#'+contentID).style.display = 'none';
// // document.querySelector('#'+contentID).setAttribute("hidden","");
// }
// script CobaContent(contentID string) {
// console.log(contentID);
// }

100
component/pagination/paginationv2.templ
View File

@@ -1,50 +1,50 @@
package pagination
import "strconv"
import "cpone/component/customtextfield"
import "cpone/models"
templ PaginationV2(length int,
currentPage int,
link string,
paginationID string,
hxInclude string,
hxTarget string,
hxSwap string,
hxIndicator string,
hxSwapOob string) {
// hx-on::before-request={ HideContent(contentID) }
// hx-on::after-request="alert('Done making a request!')"
<div class="d-flex justify-content-between align-items-center flex-wrap" id={ paginationID } hx-swap-oob={ hxSwapOob }>
<div class="d-flex flex-wrap py-2 mr-3">
for i:=0; i<length; i++ {
if (i+1) == currentPage {
<a
hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
hx-swap={ hxSwap }
hx-indicator={ hxIndicator }
hx-trigger="click"
hx-target={ hxTarget }
hx-include={ hxInclude }
>{ strconv.Itoa(i+1) }</a>
} else {
<a
hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
hx-swap={ hxSwap }
hx-indicator={ hxIndicator }
hx-trigger="click"
hx-target={ hxTarget }
hx-include={ hxInclude }
>{ strconv.Itoa(i+1) }</a>
}
}
</div>
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
ID: "currpage" + paginationID,
Name: "currpage" + paginationID,
Type: "hidden",
Value: strconv.Itoa(currentPage)})
</div>
}
package pagination
import "strconv"
import "cpone/component/customtextfield"
import "cpone/models"
templ PaginationV2(length int,
currentPage int,
link string,
paginationID string,
hxInclude string,
hxTarget string,
hxSwap string,
hxIndicator string,
hxSwapOob string) {
// hx-on::before-request={ HideContent(contentID) }
// hx-on::after-request="alert('Done making a request!')"
<div class="d-flex justify-content-between align-items-center flex-wrap" id={ paginationID } hx-swap-oob={ hxSwapOob }>
<div class="d-flex flex-wrap py-2 mr-3">
for i:=0; i<length; i++ {
if (i+1) == currentPage {
<a
hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
hx-swap={ hxSwap }
hx-indicator={ hxIndicator }
hx-trigger="click"
hx-target={ hxTarget }
hx-include={ hxInclude }
>{ strconv.Itoa(i+1) }</a>
} else {
<a
hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
hx-swap={ hxSwap }
hx-indicator={ hxIndicator }
hx-trigger="click"
hx-target={ hxTarget }
hx-include={ hxInclude }
>{ strconv.Itoa(i+1) }</a>
}
}
</div>
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
ID: "currpage" + paginationID,
Name: "currpage" + paginationID,
Type: "hidden",
Value: strconv.Itoa(currentPage)})
</div>
}

120
component/pagination/paginationv3.templ
View File

@@ -1,60 +1,60 @@
package pagination
import "strconv"
import "cpone/component/customtextfield"
import "cpone/models"
templ PaginationV3(length int,
currentPage int,
link string,
paginationID string,
hxInclude string,
hxTarget string,
hxSwap string,
hxIndicator string,
hxSwapOob string,
hxBeforeRequest templ.ComponentScript,
hxAfterRequest templ.ComponentScript,
) {
// hx-on::before-request={ HideContent(contentID) }
// hx-on::after-request="alert('Done making a request!')"
<div
class="d-flex justify-content-between align-items-center flex-wrap"
hx-on::load={ hxAfterRequest }
id={ paginationID }
hx-swap-oob={ hxSwapOob }
>
<div class="d-flex flex-wrap py-2 mr-3">
for i:=0; i<length; i++ {
if (i+1) == currentPage {
<a
hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
hx-swap={ hxSwap }
hx-indicator={ hxIndicator }
hx-trigger="click"
hx-on::before-request={ hxBeforeRequest }
hx-target={ hxTarget }
hx-include={ hxInclude }
>{ strconv.Itoa(i+1) }</a>
} else {
<a
hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
hx-swap={ hxSwap }
hx-on::before-request={ hxBeforeRequest }
hx-indicator={ hxIndicator }
hx-trigger="click"
hx-target={ hxTarget }
hx-include={ hxInclude }
>{ strconv.Itoa(i+1) }</a>
}
}
</div>
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
ID: "currpage" + paginationID,
Name: "currpage" + paginationID,
Type: "hidden",
Value: strconv.Itoa(currentPage)})
</div>
}
package pagination
import "strconv"
import "cpone/component/customtextfield"
import "cpone/models"
templ PaginationV3(length int,
currentPage int,
link string,
paginationID string,
hxInclude string,
hxTarget string,
hxSwap string,
hxIndicator string,
hxSwapOob string,
hxBeforeRequest templ.ComponentScript,
hxAfterRequest templ.ComponentScript,
) {
// hx-on::before-request={ HideContent(contentID) }
// hx-on::after-request="alert('Done making a request!')"
<div
class="d-flex justify-content-between align-items-center flex-wrap"
hx-on::load={ hxAfterRequest }
id={ paginationID }
hx-swap-oob={ hxSwapOob }
>
<div class="d-flex flex-wrap py-2 mr-3">
for i:=0; i<length; i++ {
if (i+1) == currentPage {
<a
hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
hx-swap={ hxSwap }
hx-indicator={ hxIndicator }
hx-trigger="click"
hx-on::before-request={ hxBeforeRequest }
hx-target={ hxTarget }
hx-include={ hxInclude }
>{ strconv.Itoa(i+1) }</a>
} else {
<a
hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
hx-swap={ hxSwap }
hx-on::before-request={ hxBeforeRequest }
hx-indicator={ hxIndicator }
hx-trigger="click"
hx-target={ hxTarget }
hx-include={ hxInclude }
>{ strconv.Itoa(i+1) }</a>
}
}
</div>
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
ID: "currpage" + paginationID,
Name: "currpage" + paginationID,
Type: "hidden",
Value: strconv.Itoa(currentPage)})
</div>
}

312
component/sidebar_user_profile/modal_sidebar_user.templ
View File

@@ -1,157 +1,157 @@
package sidebaruserprofile
import (
"cpone/component/customtextfield"
"cpone/models"
"cpone/component/modal"
)
templ SidebarForm() {
<div>
<form
id="form-ganti-password"
class="form"
hx-post="/corp/dashboard_pic/gantipassword"
hx-target="#body-ganti-pass"
hx-swap="outerHTML"
hx-indicator=".formloading"
hx-on::before-request={ HandleFormBeforeRequest() }
hx-on::after-request={ HandleFormAfterGantiPass() }
>
@modalcomponent.Modal("modal-ganti-pass",
"Ganti Password",
ModalGantiPassword(),
ActionFormGantiPassword(),
CloseFormGantiPassword(),
)
</form>
</div>
}
templ ModalGantiPassword() {
<div id="body-ganti-pass">
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "oldPassID",
Name: "oldpassid",
Type: "password",
Placeholder: "Masukan password lama",
Label: "Password Lama",
})
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "newPassID",
Name: "newpassid",
Type: "password",
Placeholder: "Masukan password baru",
Label: "Password Baru",
})
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "reNewPassID",
Name: "renewpassid",
Type: "password",
Placeholder: "Masukan ulang password baru",
Label: "Ulangi Password Baru",
})
</div>
<script>
document.addEventListener('htmx:afterSwap', function(event) {
$('.selectpicker').selectpicker('refresh');
})
</script>
}
templ RetModalGantiPassword(
oldPass models.CustomTextFieldv2Prm,
newPass models.CustomTextFieldv2Prm,
renewPass models.CustomTextFieldv2Prm,
hxOnLoad templ.ComponentScript,
) {
<div id="body-ganti-pass" hx-on::load={ hxOnLoad }>
@customtextfield.CustomTextFieldv2(oldPass)
@customtextfield.CustomTextFieldv2(newPass)
@customtextfield.CustomTextFieldv2(renewPass)
</div>
<script>
document.addEventListener('htmx:afterSwap', function(event) {
$('.selectpicker').selectpicker('refresh');
})
</script>
}
templ ActionFormGantiPassword() {
<div>
<button
hx-on::after-request={ JSHideModal("#modal-ganti-pass") }
hx-post="/corp/dashboard_pic/tutupgantipassword"
hx-target="#body-ganti-pass"
hx-swap="outerHTML"
hx-indicator=".cancelloading"
type="button"
class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
data-dismiss="modal"
>
<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
Batal
</button>
<button
type="submit"
class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
>
<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
Simpan
</button>
</div>
}
templ CloseFormGantiPassword() {
<button
type="button"
hx-on::after-request={ JSHideModal("#modal-ganti-pass") }
hx-post="/corp/dashboard_pic/tutupgantipassword"
hx-target="#body-ganti-pass"
hx-swap="outerHTML"
class="close btnactcancel"
data-dismiss="modal"
aria-label="Close"
>
<i aria-hidden="true" class="ki ki-close"></i>
</button>
}
script JSHideModal(modalID string) {
$(modalID).modal('hide')
}
script JSShowModal(modalID string) {
$(modalID).modal('show')
const btnActCancel = document.querySelectorAll('.btnactcancel');
const btnActSaveData = document.querySelectorAll('.btnactsavedata');
for (let i = 0; i < btnActCancel.length; i++) {
btnActCancel[i].removeAttribute('disabled');
}
for (let i = 0; i < btnActSaveData.length; i++) {
btnActSaveData[i].removeAttribute('disabled');
}
}
script HandleFormBeforeRequest() {
const btnActCancel = document.querySelectorAll('.btnactcancel');
const btnActSaveData = document.querySelectorAll('.btnactsavedata');
for (let i = 0; i < btnActCancel.length; i++) {
btnActCancel[i].setAttribute('disabled', 'true');
}
for (let i = 0; i < btnActSaveData.length; i++) {
btnActSaveData[i].setAttribute('disabled', 'true');
}
}
script HandleFormAfterGantiPass() {
const btnActCancel = document.querySelectorAll('.btnactcancel');
const btnActSaveData = document.querySelectorAll('.btnactsavedata');
for (let i = 0; i < btnActCancel.length; i++) {
btnActCancel[i].removeAttribute('disabled');
}
for (let i = 0; i < btnActSaveData.length; i++) {
btnActSaveData[i].removeAttribute('disabled');
}
package sidebaruserprofile
import (
"cpone/component/customtextfield"
"cpone/models"
"cpone/component/modal"
)
templ SidebarForm() {
<div>
<form
id="form-ganti-password"
class="form"
hx-post="/corp/dashboard_pic/gantipassword"
hx-target="#body-ganti-pass"
hx-swap="outerHTML"
hx-indicator=".formloading"
hx-on::before-request={ HandleFormBeforeRequest() }
hx-on::after-request={ HandleFormAfterGantiPass() }
>
@modalcomponent.Modal("modal-ganti-pass",
"Ganti Password",
ModalGantiPassword(),
ActionFormGantiPassword(),
CloseFormGantiPassword(),
)
</form>
</div>
}
templ ModalGantiPassword() {
<div id="body-ganti-pass">
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "oldPassID",
Name: "oldpassid",
Type: "password",
Placeholder: "Masukan password lama",
Label: "Password Lama",
})
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "newPassID",
Name: "newpassid",
Type: "password",
Placeholder: "Masukan password baru",
Label: "Password Baru",
})
@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "reNewPassID",
Name: "renewpassid",
Type: "password",
Placeholder: "Masukan ulang password baru",
Label: "Ulangi Password Baru",
})
</div>
<script>
document.addEventListener('htmx:afterSwap', function(event) {
$('.selectpicker').selectpicker('refresh');
})
</script>
}
templ RetModalGantiPassword(
oldPass models.CustomTextFieldv2Prm,
newPass models.CustomTextFieldv2Prm,
renewPass models.CustomTextFieldv2Prm,
hxOnLoad templ.ComponentScript,
) {
<div id="body-ganti-pass" hx-on::load={ hxOnLoad }>
@customtextfield.CustomTextFieldv2(oldPass)
@customtextfield.CustomTextFieldv2(newPass)
@customtextfield.CustomTextFieldv2(renewPass)
</div>
<script>
document.addEventListener('htmx:afterSwap', function(event) {
$('.selectpicker').selectpicker('refresh');
})
</script>
}
templ ActionFormGantiPassword() {
<div>
<button
hx-on::after-request={ JSHideModal("#modal-ganti-pass") }
hx-post="/corp/dashboard_pic/tutupgantipassword"
hx-target="#body-ganti-pass"
hx-swap="outerHTML"
hx-indicator=".cancelloading"
type="button"
class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
data-dismiss="modal"
>
<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
Batal
</button>
<button
type="submit"
class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
>
<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
Simpan
</button>
</div>
}
templ CloseFormGantiPassword() {
<button
type="button"
hx-on::after-request={ JSHideModal("#modal-ganti-pass") }
hx-post="/corp/dashboard_pic/tutupgantipassword"
hx-target="#body-ganti-pass"
hx-swap="outerHTML"
class="close btnactcancel"
data-dismiss="modal"
aria-label="Close"
>
<i aria-hidden="true" class="ki ki-close"></i>
</button>
}
script JSHideModal(modalID string) {
$(modalID).modal('hide')
}
script JSShowModal(modalID string) {
$(modalID).modal('show')
const btnActCancel = document.querySelectorAll('.btnactcancel');
const btnActSaveData = document.querySelectorAll('.btnactsavedata');
for (let i = 0; i < btnActCancel.length; i++) {
btnActCancel[i].removeAttribute('disabled');
}
for (let i = 0; i < btnActSaveData.length; i++) {
btnActSaveData[i].removeAttribute('disabled');
}
}
script HandleFormBeforeRequest() {
const btnActCancel = document.querySelectorAll('.btnactcancel');
const btnActSaveData = document.querySelectorAll('.btnactsavedata');
for (let i = 0; i < btnActCancel.length; i++) {
btnActCancel[i].setAttribute('disabled', 'true');
}
for (let i = 0; i < btnActSaveData.length; i++) {
btnActSaveData[i].setAttribute('disabled', 'true');
}
}
script HandleFormAfterGantiPass() {
const btnActCancel = document.querySelectorAll('.btnactcancel');
const btnActSaveData = document.querySelectorAll('.btnactsavedata');
for (let i = 0; i < btnActCancel.length; i++) {
btnActCancel[i].removeAttribute('disabled');
}
for (let i = 0; i < btnActSaveData.length; i++) {
btnActSaveData[i].removeAttribute('disabled');
}
}

176
component/sidebar_user_profile/sidebar_user_profile.templ
View File

@@ -1,88 +1,88 @@
package sidebaruserprofile
import "cpone/models"
templ Navbaruserprofile(dataUser models.User) {
<div id="kt_quick_user" class="offcanvas offcanvas-right p-10">
<!--begin::Header-->
<div class="offcanvas-header d-flex align-items-center justify-content-between pb-5">
<h3 class="font-weight-bold m-0 text-black">
User Profile
// <small class="text-muted font-size-sm ml-2">12 messages</small>
</h3>
<a href="#" class="btn btn-xs btn-icon btn-light btn-hover-primary" id="kt_quick_user_close">
<i class="ki ki-close icon-xs text-muted"></i>
</a>
</div>
<!--end::Header-->
<!--begin::Content-->
<div class="offcanvas-content pr-5 mr-n5">
<!--begin::Header-->
@ProfileHeader(dataUser)
<!--end::Header-->
<!--begin::Separator-->
<div class="separator separator-dashed my-7"></div>
<div class="navi mt-2">
<a
class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block"
style="width: 100%"
data-toggle="modal"
data-target="#modal-ganti-pass"
>
Change Password
</a>
</div>
<div class="navi mt-2">
<a
class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block"
hx-get="/login/signout"
hx-indicator=".logoutloading"
style="width: 100%"
>
<span class="htmx-indicator spinner-border spinner-border-sm logoutloading" role="status" aria-hidden="true"></span>
Sign Out
</a>
</div>
</div>
<!--end::Content-->
</div>
@SidebarForm()
}
templ ProfileHeader(dataUser models.User) {
<div class="d-flex mt-5">
<div class="symbol symbol-100 mr-5 p-2 bg-primary-transparent">
// <div class="symbol-label" style="background-image:url('/assets/media/users/300_21.jpg')"></div>
// <i class="symbol-badge bg-success"></i>
<span class="iconify symbol-label bg-primary-transparent text-primary" data-icon="gravity-ui:person"></span>
</div>
<div class="d-flex flex-column">
<a href="#" class="font-weight-bold font-size-h5 text-dark-75 text-hover-primary">
{ dataUser.UserFullName }
</a>
<div class="text-muted mt-1">
{ dataUser.UserPosition }
</div>
</div>
</div>
}
templ NotificationCard() {
<div class="d-flex align-items-center bg-light-warning rounded p-5 gutter-b">
<span class="svg-icon svg-icon-warning mr-5">
<span
class="svg-icon svg-icon-lg"
>
<!--begin::Svg Icon | path:/assets/media/svg/icons/Home/Library.svg-->
<span class="iconify" data-icon="material-symbols:notifications-active-outline-rounded"></span>
</span>
</span>
<div class="d-flex flex-column flex-grow-1 mr-2">
<a href="#" class="font-weight-normal text-dark-75 text-hover-primary font-size-lg mb-1">
Another
purpose persuade
</a>
<span class="text-muted font-size-sm">Due in 2 Days</span>
</div>
</div>
}
package sidebaruserprofile
import "cpone/models"
templ Navbaruserprofile(dataUser models.User) {
<div id="kt_quick_user" class="offcanvas offcanvas-right p-10">
<!--begin::Header-->
<div class="offcanvas-header d-flex align-items-center justify-content-between pb-5">
<h3 class="font-weight-bold m-0 text-black">
User Profile
// <small class="text-muted font-size-sm ml-2">12 messages</small>
</h3>
<a href="#" class="btn btn-xs btn-icon btn-light btn-hover-primary" id="kt_quick_user_close">
<i class="ki ki-close icon-xs text-muted"></i>
</a>
</div>
<!--end::Header-->
<!--begin::Content-->
<div class="offcanvas-content pr-5 mr-n5">
<!--begin::Header-->
@ProfileHeader(dataUser)
<!--end::Header-->
<!--begin::Separator-->
<div class="separator separator-dashed my-7"></div>
<div class="navi mt-2">
<a
class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block"
style="width: 100%"
data-toggle="modal"
data-target="#modal-ganti-pass"
>
Change Password
</a>
</div>
<div class="navi mt-2">
<a
class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block"
hx-get="/login/signout"
hx-indicator=".logoutloading"
style="width: 100%"
>
<span class="htmx-indicator spinner-border spinner-border-sm logoutloading" role="status" aria-hidden="true"></span>
Sign Out
</a>
</div>
</div>
<!--end::Content-->
</div>
@SidebarForm()
}
templ ProfileHeader(dataUser models.User) {
<div class="d-flex mt-5">
<div class="symbol symbol-100 mr-5 p-2 bg-primary-transparent">
// <div class="symbol-label" style="background-image:url('/assets/media/users/300_21.jpg')"></div>
// <i class="symbol-badge bg-success"></i>
<span class="iconify symbol-label bg-primary-transparent text-primary" data-icon="gravity-ui:person"></span>
</div>
<div class="d-flex flex-column">
<a href="#" class="font-weight-bold font-size-h5 text-dark-75 text-hover-primary">
{ dataUser.UserFullName }
</a>
<div class="text-muted mt-1">
{ dataUser.UserPosition }
</div>
</div>
</div>
}
templ NotificationCard() {
<div class="d-flex align-items-center bg-light-warning rounded p-5 gutter-b">
<span class="svg-icon svg-icon-warning mr-5">
<span
class="svg-icon svg-icon-lg"
>
<!--begin::Svg Icon | path:/assets/media/svg/icons/Home/Library.svg-->
<span class="iconify" data-icon="material-symbols:notifications-active-outline-rounded"></span>
</span>
</span>
<div class="d-flex flex-column flex-grow-1 mr-2">
<a href="#" class="font-weight-normal text-dark-75 text-hover-primary font-size-lg mb-1">
Another
purpose persuade
</a>
<span class="text-muted font-size-sm">Due in 2 Days</span>
</div>
</div>
}

204
component/sidebarmaster/sidebarmaster.templ
View File

@@ -1,102 +1,102 @@
package sidebarmaster
import (
"cpone/models"
)
templ MenuDashboard(ParentMenuName string, ParentMenuUrl string) {
<li class="menu-item menu-item-active" aria-haspopup="true">
<a
href={ templ.SafeURL(ParentMenuUrl) }
class="menu-link "
>
<span
class="svg-icon menu-icon"
>
<!--begin::Svg Icon | path:/assets/media/svg/icons/Design/Layers.svg-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="24px"
height="24px"
viewBox="0 0 24 24"
version="1.1"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path
d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z"
fill="#000000"
fill-rule="nonzero"
></path>
<path
d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z"
fill="#000000"
opacity="0.3"
></path>
</g>
</svg><!--end::Svg Icon-->
</span><span class="menu-text">{ ParentMenuName }</span>
</a>
</li>
}
templ ListMenuChildren(ChildrenMenuURL string, ChildrenMenuName string) {
<li class="menu-item" aria-haspopup="true">
<a href={ templ.SafeURL(ChildrenMenuURL) } class="menu-link">
<i class="menu-bullet menu-bullet-line"><span></span></i>
<span class="menu-text">{ ChildrenMenuName }</span>
</a>
</li>
}
templ ListMenuNavbar(ParentMenuName string, datamenuchildren []models.ChildrenMenu) {
<li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover">
<a
href="javascript:;"
class="menu-link menu-toggle"
>
<span
class="svg-icon menu-icon"
>
<!--begin::Svg Icon | path:/assets/media/svg/icons/Shopping/Barcode-read.svg-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="24px"
height="24px"
viewBox="0 0 24 24"
version="1.1"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path
d="M7,3 L17,3 C19.209139,3 21,4.790861 21,7 C21,9.209139 19.209139,11 17,11 L7,11 C4.790861,11 3,9.209139 3,7 C3,4.790861 4.790861,3 7,3 Z M7,9 C8.1045695,9 9,8.1045695 9,7 C9,5.8954305 8.1045695,5 7,5 C5.8954305,5 5,5.8954305 5,7 C5,8.1045695 5.8954305,9 7,9 Z"
fill="#000000"
></path>
<path
d="M7,13 L17,13 C19.209139,13 21,14.790861 21,17 C21,19.209139 19.209139,21 17,21 L7,21 C4.790861,21 3,19.209139 3,17 C3,14.790861 4.790861,13 7,13 Z M17,19 C18.1045695,19 19,18.1045695 19,17 C19,15.8954305 18.1045695,15 17,15 C15.8954305,15 15,15.8954305 15,17 C15,18.1045695 15.8954305,19 17,19 Z"
fill="#000000"
opacity="0.3"
></path>
</g>
</svg><!--end::Svg Icon-->
</span><span class="menu-text">{ ParentMenuName }</span><i
class="menu-arrow"
></i>
</a>
<div class="menu-submenu ">
<i class="menu-arrow"></i>
<ul class="menu-subnav">
<li class="menu-item menu-item-parent" aria-haspopup="true">
<span
class="menu-link"
><span class="menu-text">{ ParentMenuName }</span></span>
</li>
for _, dx := range datamenuchildren {
@ListMenuChildren(dx.ChildrenMenuURL, dx.ChildrenMenuName)
}
</ul>
</div>
</li>
}
package sidebarmaster
import (
"cpone/models"
)
templ MenuDashboard(ParentMenuName string, ParentMenuUrl string) {
<li class="menu-item menu-item-active" aria-haspopup="true">
<a
href={ templ.SafeURL(ParentMenuUrl) }
class="menu-link "
>
<span
class="svg-icon menu-icon"
>
<!--begin::Svg Icon | path:/assets/media/svg/icons/Design/Layers.svg-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="24px"
height="24px"
viewBox="0 0 24 24"
version="1.1"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path
d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z"
fill="#000000"
fill-rule="nonzero"
></path>
<path
d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z"
fill="#000000"
opacity="0.3"
></path>
</g>
</svg><!--end::Svg Icon-->
</span><span class="menu-text">{ ParentMenuName }</span>
</a>
</li>
}
templ ListMenuChildren(ChildrenMenuURL string, ChildrenMenuName string) {
<li class="menu-item" aria-haspopup="true">
<a href={ templ.SafeURL(ChildrenMenuURL) } class="menu-link">
<i class="menu-bullet menu-bullet-line"><span></span></i>
<span class="menu-text">{ ChildrenMenuName }</span>
</a>
</li>
}
templ ListMenuNavbar(ParentMenuName string, datamenuchildren []models.ChildrenMenu) {
<li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover">
<a
href="javascript:;"
class="menu-link menu-toggle"
>
<span
class="svg-icon menu-icon"
>
<!--begin::Svg Icon | path:/assets/media/svg/icons/Shopping/Barcode-read.svg-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="24px"
height="24px"
viewBox="0 0 24 24"
version="1.1"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path
d="M7,3 L17,3 C19.209139,3 21,4.790861 21,7 C21,9.209139 19.209139,11 17,11 L7,11 C4.790861,11 3,9.209139 3,7 C3,4.790861 4.790861,3 7,3 Z M7,9 C8.1045695,9 9,8.1045695 9,7 C9,5.8954305 8.1045695,5 7,5 C5.8954305,5 5,5.8954305 5,7 C5,8.1045695 5.8954305,9 7,9 Z"
fill="#000000"
></path>
<path
d="M7,13 L17,13 C19.209139,13 21,14.790861 21,17 C21,19.209139 19.209139,21 17,21 L7,21 C4.790861,21 3,19.209139 3,17 C3,14.790861 4.790861,13 7,13 Z M17,19 C18.1045695,19 19,18.1045695 19,17 C19,15.8954305 18.1045695,15 17,15 C15.8954305,15 15,15.8954305 15,17 C15,18.1045695 15.8954305,19 17,19 Z"
fill="#000000"
opacity="0.3"
></path>
</g>
</svg><!--end::Svg Icon-->
</span><span class="menu-text">{ ParentMenuName }</span><i
class="menu-arrow"
></i>
</a>
<div class="menu-submenu ">
<i class="menu-arrow"></i>
<ul class="menu-subnav">
<li class="menu-item menu-item-parent" aria-haspopup="true">
<span
class="menu-link"
><span class="menu-text">{ ParentMenuName }</span></span>
</li>
for _, dx := range datamenuchildren {
@ListMenuChildren(dx.ChildrenMenuURL, dx.ChildrenMenuName)
}
</ul>
</div>
</li>
}

50
component/table/table.templ
View File

@@ -1,25 +1,25 @@
package tablecomponent
templ Table(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component) {
if len(thName) != len(thWidth) {
<div>length array thname berbeda dengan array thwidth</div>
} else {
<div>
<table class="table table-hover table-borderless">
<thead>
<tr class="rounded-lg bg-header-table">
for i, item := range thName {
<th scope="col" width={ thWidth[i] }>{ item }</th>
}
</tr>
</thead>
<tbody>
@trComponent
</tbody>
</table>
</div>
<div>
@pagination
</div>
}
}
package tablecomponent
templ Table(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component) {
if len(thName) != len(thWidth) {
<div>length array thname berbeda dengan array thwidth</div>
} else {
<div>
<table class="table table-hover table-borderless">
<thead>
<tr class="rounded-lg bg-header-table">
for i, item := range thName {
<th scope="col" width={ thWidth[i] }>{ item }</th>
}
</tr>
</thead>
<tbody>
@trComponent
</tbody>
</table>
</div>
<div>
@pagination
</div>
}
}

50
component/table/tablev1.templ
View File

@@ -1,25 +1,25 @@
package tablecomponent
templ TableV1(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component, idunique string) {
if len(thName) != len(thWidth) {
<div>length array thname berbeda dengan array thwidth</div>
} else {
<div id={ idunique }>
<table class="table table-hover table-borderless">
<thead>
<tr class="rounded-lg bg-header-table">
for i, item := range thName {
<th scope="col" width={ thWidth[i] }>{ item }</th>
}
</tr>
</thead>
<tbody>
@trComponent
</tbody>
</table>
<div>
@pagination
</div>
</div>
}
}
package tablecomponent
templ TableV1(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component, idunique string) {
if len(thName) != len(thWidth) {
<div>length array thname berbeda dengan array thwidth</div>
} else {
<div id={ idunique }>
<table class="table table-hover table-borderless">
<thead>
<tr class="rounded-lg bg-header-table">
for i, item := range thName {
<th scope="col" width={ thWidth[i] }>{ item }</th>
}
</tr>
</thead>
<tbody>
@trComponent
</tbody>
</table>
<div>
@pagination
</div>
</div>
}
}

62
component/table/tablev2.templ
View File

@@ -1,31 +1,31 @@
package tablecomponent
templ TableV2(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component, idunique string, inputanSearch templ.Component) {
if len(thName) != len(thWidth) {
<div>length array thname berbeda dengan array thwidth</div>
} else {
@inputanSearch
<div id={ idunique }>
<div class="mt-7"></div>
<table class="table table-hover table-borderless">
<thead>
<tr class="rounded-lg bg-header-table">
for i, item := range thName {
<th scope="col" width={ thWidth[i] }>{ item }</th>
}
</tr>
</thead>
<tbody>
@trComponent
</tbody>
</table>
<div>
@pagination
</div>
</div>
}
}
templ DivEmpty() {
<div></div>
}
package tablecomponent
templ TableV2(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component, idunique string, inputanSearch templ.Component) {
if len(thName) != len(thWidth) {
<div>length array thname berbeda dengan array thwidth</div>
} else {
@inputanSearch
<div id={ idunique }>
<div class="mt-7"></div>
<table class="table table-hover table-borderless">
<thead>
<tr class="rounded-lg bg-header-table">
for i, item := range thName {
<th scope="col" width={ thWidth[i] }>{ item }</th>
}
</tr>
</thead>
<tbody>
@trComponent
</tbody>
</table>
<div>
@pagination
</div>
</div>
}
}
templ DivEmpty() {
<div></div>
}

62
component/table/tablev3.templ
View File

@@ -1,31 +1,31 @@
package tablecomponent
templ TableV3(thName []string, thWidth []string, trComponent templ.Component) {
<div>
if len(thName) != len(thWidth) {
<div>length array thname berbeda dengan array thwidth</div>
} else {
<div class="mt-7"></div>
<table class="table table-hover table-borderless">
<thead>
<tr class="rounded-lg bg-header-table">
for i, item := range thName {
if item == "AKSI" {
<th scope="col" width={ thWidth[i] } class="text-center">{ item }</th>
} else {
<th scope="col" width={ thWidth[i] }>{ item }</th>
}
}
</tr>
</thead>
<tbody>
@trComponent
</tbody>
</table>
}
</div>
}
templ DivEmptyV3() {
<div></div>
}
package tablecomponent
templ TableV3(thName []string, thWidth []string, trComponent templ.Component) {
<div>
if len(thName) != len(thWidth) {
<div>length array thname berbeda dengan array thwidth</div>
} else {
<div class="mt-7"></div>
<table class="table table-hover table-borderless">
<thead>
<tr class="rounded-lg bg-header-table">
for i, item := range thName {
if item == "AKSI" {
<th scope="col" width={ thWidth[i] } class="text-center">{ item }</th>
} else {
<th scope="col" width={ thWidth[i] }>{ item }</th>
}
}
</tr>
</thead>
<tbody>
@trComponent
</tbody>
</table>
}
</div>
}
templ DivEmptyV3() {
<div></div>
}

30
component/toastbootstrap/customtoastv1.templ
View File

@@ -1,15 +1,15 @@
package customtoastv1
templ CustomToastV1(message string, idUniqueCustomToast string) {
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
<div id="myToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Pemberitahuan</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="pesanTxt">
{ message }
</div>
</div>
</div>
}
package customtoastv1
templ CustomToastV1(message string, idUniqueCustomToast string) {
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
<div id="myToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Pemberitahuan</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="pesanTxt">
{ message }
</div>
</div>
</div>
}

174
component/toastbootstrap/customtoastv2.templ
View File

@@ -1,87 +1,87 @@
package customtoastv1
// kalau eror => bg nya danger
// kalau sukses => bgnya success
// kalau warning => bgnya warning
func toastBackground(typeToast string) string {
return "bg-" + typeToast
}
func toastBody(typeToastBody string) string {
return "bg-" + typeToastBody + "-transparent"
}
func toastIcon(typeToast string) string {
var stringx string
if typeToast == "success" {
stringx = "solar:check-circle-broken"
} else {
if typeToast == "danger" {
stringx = "solar:close-circle-broken"
} else {
if typeToast == "warning" {
stringx = "solar:shield-warning-bold"
} else {
if typeToast == "information" {
stringx = "solar:info-square-broken"
}
}
}
}
return stringx
}
templ CustomToastV2Show(title string, message string, typeToast string) {
<div
class="toast toast-top-right fade show"
role="alert"
aria-live="assertive"
aria-atomic="true"
id="notification-001"
hx-swap-oob="true"
hx-get="/home/hidetoast"
hx-trigger="load delay:3s"
hx-target="this"
style="border-radius: 8px 8px 8px 8px;"
>
<div class={ "toast-header", toastBackground(typeToast) , "text-white" }>
<span
class="iconify mr-2"
data-icon={ toastIcon(typeToast) }
></span>
<strong class="mr-auto">{ title }</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class={ "toast-body",toastBody(typeToast) }>
{ message }
</div>
</div>
}
templ CustomToastV2Hide() {
<div
id="notification-001"
class="toast fade hide"
role="alert"
aria-live="assertive"
aria-atomic="true"
style="opacity: 0"
hx-swap-oob="true"
>
<div class="toast-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
<strong class="mr-auto">Success</strong>
<small class="text-muted text-white">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-success-transparent">
This is a success toast.
</div>
</div>
}
package customtoastv1
// kalau eror => bg nya danger
// kalau sukses => bgnya success
// kalau warning => bgnya warning
func toastBackground(typeToast string) string {
return "bg-" + typeToast
}
func toastBody(typeToastBody string) string {
return "bg-" + typeToastBody + "-transparent"
}
func toastIcon(typeToast string) string {
var stringx string
if typeToast == "success" {
stringx = "solar:check-circle-broken"
} else {
if typeToast == "danger" {
stringx = "solar:close-circle-broken"
} else {
if typeToast == "warning" {
stringx = "solar:shield-warning-bold"
} else {
if typeToast == "information" {
stringx = "solar:info-square-broken"
}
}
}
}
return stringx
}
templ CustomToastV2Show(title string, message string, typeToast string) {
<div
class="toast toast-top-right fade show"
role="alert"
aria-live="assertive"
aria-atomic="true"
id="notification-001"
hx-swap-oob="true"
hx-get="/home/hidetoast"
hx-trigger="load delay:3s"
hx-target="this"
style="border-radius: 8px 8px 8px 8px;"
>
<div class={ "toast-header", toastBackground(typeToast) , "text-white" }>
<span
class="iconify mr-2"
data-icon={ toastIcon(typeToast) }
></span>
<strong class="mr-auto">{ title }</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class={ "toast-body",toastBody(typeToast) }>
{ message }
</div>
</div>
}
templ CustomToastV2Hide() {
<div
id="notification-001"
class="toast fade hide"
role="alert"
aria-live="assertive"
aria-atomic="true"
style="opacity: 0"
hx-swap-oob="true"
>
<div class="toast-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
<strong class="mr-auto">Success</strong>
<small class="text-muted text-white">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-success-transparent">
This is a success toast.
</div>
</div>
}

34
component/under_development/under_development.templ
View File

@@ -1,17 +1,17 @@
package under_development
templ UnderDevelopment() {
<div class="d-flex justify-content-center text-center flex-column mt-20">
<div class="text-primary underdev">Site Under Development</div>
<div class="text-disabled underdevsub mb-10">
"Stay Tuned, We're Building Excitement!"
</div>
<div>
<img
src="/asset-corporate-portal/media/under_development/under_development.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
</div>
}
package under_development
templ UnderDevelopment() {
<div class="d-flex justify-content-center text-center flex-column mt-20">
<div class="text-primary underdev">Site Under Development</div>
<div class="text-disabled underdevsub mb-10">
"Stay Tuned, We're Building Excitement!"
</div>
<div>
<img
src="/asset-corporate-portal/media/under_development/under_development.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
</div>
}