Skip to content

Commit

Permalink
[6.x] Fix editonclick bug (#1712)
Browse files Browse the repository at this point in the history
* Fix editonclick bug

* build assets

* build assets
  • Loading branch information
luanfreitasdev authored Oct 2, 2024
1 parent 8e93f2a commit ea76f9f
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 101 deletions.
2 changes: 1 addition & 1 deletion dist/mix-manifest.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"/powergrid.js": "/powergrid.js?id=377a2e5641b0803a4bcc836ddc46270d",
"/powergrid.js": "/powergrid.js?id=65133044a69064bc2c32606995a58abe",
"/bootstrap5.css": "/bootstrap5.css?id=a27af22343149104b2aa3283d8fd502b",
"/tailwind.css": "/tailwind.css?id=924477e2afcb2cb56aa392e266ee56ca"
}
2 changes: 1 addition & 1 deletion dist/powergrid.js

Large diffs are not rendered by default.

61 changes: 41 additions & 20 deletions resources/js/components/pg-editable.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
export default (params) => ({
theme: params.theme,
editable: false,
tableName: params.tableName ?? null,
id: params.id ?? null,
dataField: params.dataField ?? null,
content: params.content,
oldContent: null,
fallback: params.fallback,
inputClass: params.inputClass,
saveOnMouseOut: params.saveOnMouseOut,
oldContent: null,
editable: false,
hash: null,
hashError: true,
showEditable: false,
editableInput: '',
inputClass: params.inputClass,
saveOnMouseOut: params.saveOnMouseOut,
init() {
if (this.content.length === 0 && this.fallback) {
this.content = this.htmlSpecialChars(this.fallback);
Expand All @@ -26,11 +25,23 @@ export default (params) => ({
this.showEditable = false
this.content = this.htmlSpecialChars(this.content);
this.oldContent = this.content;
const editablePending = window.editablePending.notContains(this.hash)
this.hashError = editablePending
if (editablePending) {
const pendingHash = window.editablePending.pending[0]
document.getElementById('clickable-' + pendingHash).click()
this.hashError = this.store().notContains(this.hash)

setTimeout(() => {
const editableElement = document.getElementById('editable-' + this.hash)

if (this.store().getTextContent(this.hash) && editableElement) {
editableElement.textContent = this.store().getTextContent(this.hash)
}
}, 220)

if (this.hashError) {
const pendingHash = this.store().get(this.hash)
const clickableElement = document.getElementById('clickable-' + pendingHash)

if (clickableElement) {
clickableElement.click()
}
} else {
showEditable = true
}
Expand Down Expand Up @@ -59,32 +70,39 @@ export default (params) => ({

this.content = this.htmlSpecialChars(this.content);
},

store() {
return window.editOnClickValidation
},

save() {
if(this.$el.textContent == this.oldContent) {
this.editable = false;
this.showEditable = false;
this.store().clear()
this.store().set(this.hash, this.$el.textContent)

return;
}
setTimeout(() => {
document.getElementById('clickable-' + this.hash).textContent =
this.$el.textContent
}, 230)

setTimeout(() => {
window.addEventListener('pg:editable-close-'+this.id, () => {
window.editablePending.clear()
this.store().clear()
this.editable = false;
this.showEditable = false;
})

if(!window.editablePending.has(this.hash)) {
window.editablePending.set(this.hash)
if(!this.store().has(this.hash)) {
this.store().set(this.hash, this.$el.textContent)

}

this.$wire.dispatch('pg:editable-' + this.tableName, {
this.$wire.dispatch('pg:editable-' + this.$wire.tableName, {
id: this.id,
value: this.$el.textContent,
field: this.dataField
})

this.oldContent = null
this.oldContent = this.store().getTextContent(this.hash)

this.$nextTick(() => setTimeout(() => {
this.focus()
Expand All @@ -95,6 +113,7 @@ export default (params) => ({

this.content = this.htmlSpecialChars(this.$el.textContent)
},

focus() {
const selection = window.getSelection();
const range = document.createRange();
Expand All @@ -104,12 +123,14 @@ export default (params) => ({
selection.addRange(range);
this.$el.focus();
},

cancel() {
this.$refs.editable.textContent = this.oldContent;
this.content = this.oldContent;
this.editable = false;
this.showEditable = false;
},

htmlSpecialChars(string) {
const el = document.createElement('div');
el.innerHTML = string;
Expand Down
65 changes: 65 additions & 0 deletions resources/js/stores/bulk-actions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
document.addEventListener('alpine:init', () => {
window.Alpine.store('pgBulkActions', {
selected: [],
init() {
window.addEventListener('pgBulkActions::addMore', (event) => {
const params = event.__livewire.params[0]

if(typeof this.selected[params.tableName] == 'undefined') {
this.selected[params.tableName] = []
}

this.selected[params.tableName].push(params.value)
})
window.addEventListener('pgBulkActions::clear', (event) => {
this.clear(event.detail);
})
window.addEventListener('pgBulkActions::clearAll', () => {
this.clearAll();
})
},

add(value, tableName) {
if(typeof this.selected[tableName] == 'undefined') {
this.selected[tableName] = []
}

if(!this.selected[tableName].includes(value)) {
this.selected[tableName].push(value)

return;
}

this.remove(value, tableName)
},

remove(value, tableName) {
const index = this.selected[tableName].indexOf(value);
if (index > -1) {
this.selected[tableName].splice(index, 1);
}
},

get(tableName) {
return this.selected[tableName] ?? ''
},

count(tableName) {
if(typeof this.selected[tableName] == 'undefined') {
return 0;
}

return this.selected[tableName].length
},

clear(tableName) {
this.selected[tableName] = []
},

clearAll() {
this.selected = []
}
})

window.pgBulkActions = window.Alpine.store('pgBulkActions')
})
33 changes: 33 additions & 0 deletions resources/js/stores/edit-on-click.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
document.addEventListener('alpine:init', () => {
window.Alpine.store('editOnClickValidation', {
pending: [],

set(value, textContent) {
this.pending = this.pending.filter(item => item.value !== value);
this.pending.push({ value, textContent });
},

has(value) {
return this.pending.some(item => item.value === value);
},

get(value) {
return this.pending.find(item => item.value === value);
},

notContains(value) {
return this.pending.length > 0 && !this.has(value);
},

clear() {
this.pending = [];
},

getTextContent(value) {
const item = this.pending.find(item => item.value === value);
return item ? item.textContent : null;
}
});

window.editOnClickValidation = window.Alpine.store('editOnClickValidation')
})
81 changes: 2 additions & 79 deletions resources/js/stores/index.js
Original file line number Diff line number Diff line change
@@ -1,79 +1,2 @@
document.addEventListener('alpine:init', () => {
window.Alpine.store('editablePending', {
pending: [],
set(value) {
this.pending.push(value)
},
has(value) {
return this.pending.includes(value)
},
notContains(value) {
return this.pending.length > 0 && !this.pending.includes(value)
},
clear() {
this.pending = []
},
isNotEmpty() {
return this.pending.length > 0
},
});

window.Alpine.store('pgBulkActions', {
selected: [],
init() {
window.addEventListener('pgBulkActions::addMore', (event) => {
const params = event.__livewire.params[0]

if(typeof this.selected[params.tableName] == 'undefined') {
this.selected[params.tableName] = []
}

this.selected[params.tableName].push(params.value)
})
window.addEventListener('pgBulkActions::clear', (event) => {
this.clear(event.detail);
})
window.addEventListener('pgBulkActions::clearAll', () => {
this.clearAll();
})
},
add(value, tableName) {
if(typeof this.selected[tableName] == 'undefined') {
this.selected[tableName] = []
}

if(!this.selected[tableName].includes(value)) {
this.selected[tableName].push(value)

return;
}

this.remove(value, tableName)
},
remove(value, tableName) {
const index = this.selected[tableName].indexOf(value);
if (index > -1) {
this.selected[tableName].splice(index, 1);
}
},
get(tableName) {
return this.selected[tableName] ?? ''
},
count(tableName) {
if(typeof this.selected[tableName] == 'undefined') {
return 0;
}

return this.selected[tableName].length
},
clear(tableName) {
this.selected[tableName] = []
},
clearAll() {
this.selected = []
}
})

window.editablePending = window.Alpine.store('editablePending')
window.pgBulkActions = window.Alpine.store('pgBulkActions')
})
import './edit-on-click'
import './bulk-actions'

0 comments on commit ea76f9f

Please sign in to comment.