0.0.16
This commit is contained in:
sairaj mote
parent
22632e7748
commit
39cea4c8db
161
index.html
161
index.html
@ -712,7 +712,7 @@
|
||||
<h2>Complaints</h2>
|
||||
</div>
|
||||
<h5 class="label">Select Cashier</h5>
|
||||
<sm-select name="cashier" id="select_cashier"></sm-select>
|
||||
<sm-strip-select name="cashier" id="select_cashier"></sm-strip-select>
|
||||
<sm-tabs>
|
||||
<sm-tab slot="tab" active>Deposit</sm-tab>
|
||||
<sm-panel slot="panel" id="deposit_complaints_container" class="complaints-container">
|
||||
@ -1846,7 +1846,6 @@
|
||||
slot[name="tab"]{
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 1rem;
|
||||
grid-auto-columns: max-content;
|
||||
}
|
||||
:host([type="tab"]) .indicator{
|
||||
@ -1999,7 +1998,7 @@ slot[name="tab"]::slotted(.active){
|
||||
e.target.nextElementSibling.classList.remove('hide-completely')
|
||||
}
|
||||
e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
|
||||
this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width / 2}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft + e.target.getBoundingClientRect().width / 4}px)`)
|
||||
this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
|
||||
this.prevTab = e.target;
|
||||
})
|
||||
let observer = new IntersectionObserver((entries) => {
|
||||
@ -2011,12 +2010,12 @@ slot[name="tab"]::slotted(.active){
|
||||
})
|
||||
if (activeElement.length) {
|
||||
let tabDimensions = activeElement[0].getBoundingClientRect();
|
||||
this.indicator.setAttribute('style', `width: ${tabDimensions.width / 2}px; transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft + tabDimensions.width / 4}px)`)
|
||||
this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
|
||||
}
|
||||
else {
|
||||
this.tabSlot.assignedElements()[0].classList.add('active')
|
||||
let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect();
|
||||
this.indicator.setAttribute('style', `width: ${tabDimensions.width / 2}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft + tabDimensions.width / 4}px)`)
|
||||
this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
|
||||
this.prevTab = this.tabSlot.assignedElements()[0];
|
||||
}
|
||||
setTimeout(() => {
|
||||
@ -2050,14 +2049,12 @@ slot[name="tab"]::slotted(.active){
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-weight: 500;
|
||||
word-spacing: 0.1em;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
text-transform: uppercase;
|
||||
text-transform: capitalize;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
</style>
|
||||
@ -2087,6 +2084,148 @@ slot[name="tab"]::slotted(.active){
|
||||
}
|
||||
})
|
||||
|
||||
// sm-select
|
||||
const smStripSelect = document.createElement('template')
|
||||
smStripSelect.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: flex;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.sm-select{
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
max-width: 100%;
|
||||
overflow: auto hidden;
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
slot::slotted(.active){
|
||||
border-radius: 2rem;
|
||||
opacity: 1;
|
||||
background-color: rgba(var(--text), .16);
|
||||
}
|
||||
</style>
|
||||
<div class="sm-select">
|
||||
<slot></slot>
|
||||
</div>`;
|
||||
customElements.define('sm-strip-select', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
|
||||
}
|
||||
static get observedAttributes() {
|
||||
return ['value']
|
||||
}
|
||||
get value() {
|
||||
return this.getAttribute('value')
|
||||
}
|
||||
set value(val) {
|
||||
this.setAttribute('value', val)
|
||||
}
|
||||
connectedCallback() {
|
||||
let previousOption,
|
||||
slot = this.shadowRoot.querySelector('slot');
|
||||
this.addEventListener('optionSelected', e => {
|
||||
if (previousOption === e.target) return;
|
||||
if (previousOption)
|
||||
previousOption.classList.remove('active')
|
||||
e.target.classList.add('active')
|
||||
e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
|
||||
this.setAttribute('value', e.detail.value)
|
||||
this.dispatchEvent(new CustomEvent('change', {
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}))
|
||||
previousOption = e.target;
|
||||
})
|
||||
slot.addEventListener('slotchange', e => {
|
||||
if (slot.assignedElements()[0]) {
|
||||
let firstElement = slot.assignedElements()[0];
|
||||
this.setAttribute('value', firstElement.getAttribute('value'))
|
||||
firstElement.classList.add('active')
|
||||
previousOption = firstElement;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
// sm-option
|
||||
const smStripOption = document.createElement('template')
|
||||
smStripOption.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: flex;
|
||||
}
|
||||
.sm-option{
|
||||
padding: 0.6rem 1rem;
|
||||
cursor: pointer;
|
||||
overflow-wrap: break-word;
|
||||
outline: none;
|
||||
border-radius: 2rem;
|
||||
text-transform: capitalize;
|
||||
border: solid 1px rgba(var(--text), .16);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.sm-option:hover{
|
||||
background: rgba(var(--text), 0.1);
|
||||
}
|
||||
</style>
|
||||
<div class="sm-option" tabindex="0">
|
||||
<slot></slot>
|
||||
</div>`;
|
||||
customElements.define('sm-strip-option', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
|
||||
}
|
||||
connectedCallback() {
|
||||
this.addEventListener('click', e => {
|
||||
let optionSelected = new CustomEvent('optionSelected', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
text: this.textContent,
|
||||
value: this.getAttribute('value')
|
||||
}
|
||||
})
|
||||
this.dispatchEvent(optionSelected)
|
||||
})
|
||||
if (this.hasAttribute('default')) {
|
||||
setTimeout(() => {
|
||||
let optionSelected = new CustomEvent('optionSelected', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
text: this.textContent,
|
||||
value: this.getAttribute('value')
|
||||
}
|
||||
})
|
||||
this.dispatchEvent(optionSelected)
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
<script id="init_lib">
|
||||
//All util libraries required for Standard operations (DO NOT EDIT ANY)
|
||||
@ -11492,7 +11631,7 @@ slot[name="tab"]::slotted(.active){
|
||||
let cashierList = ``,
|
||||
cashierSelect = document.getElementById('select_cashier')
|
||||
for (cashier in token_app.master_configurations.cashiers)
|
||||
cashierList += `<sm-option value = "${cashier}">${cashier}</sm-option>`
|
||||
cashierList += `<sm-strip-option value = "${cashier}">${cashier}</sm-strip-option>`
|
||||
cashierSelect.innerHTML = cashierList;
|
||||
await Promise.all([load_deposit_complaints(cashierSelect.value), load_withdraw_complaints(cashierSelect.value), load_pay_thru_cashier_complaints(cashierSelect.value)])
|
||||
userType.textContent = 'Helpline'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user