Allow locking of grid

This commit is contained in:
Mashintime 2024-01-14 19:24:03 -05:00
parent 022d7ef258
commit 467f015cf1

View file

@ -38,6 +38,7 @@ import { Scatter } from "vue-chartjs";
let count = ref(0); let count = ref(0);
let grid = null; // DO NOT use ref(null) as proxies GS will break all logic when comparing structures... see https://github.com/gridstack/gridstack.js/issues/2115 let grid = null; // DO NOT use ref(null) as proxies GS will break all logic when comparing structures... see https://github.com/gridstack/gridstack.js/issues/2115
let items = ref([]); let items = ref([]);
let gridEnabledLocal = ref(true);
class gridWidget { class gridWidget {
//Contains the vue component //Contains the vue component
component2; component2;
@ -431,7 +432,13 @@ function remove(widget) {
grid.removeWidget(selector, false); grid.removeWidget(selector, false);
saveGridLayout(); saveGridLayout();
} }
function disableGrid() {
gridEnabledLocal.value = !gridEnabledLocal.value
if (gridEnabledLocal.value)
grid.enable();
else
grid.disable();
}
function clearAllItems() { function clearAllItems() {
grid.removeAll(false); grid.removeAll(false);
count.value = 0; count.value = 0;
@ -480,6 +487,7 @@ function quickfill() {
<button <button
@click="remove(w)" @click="remove(w)"
class="btn-close grid-stack-floaty-btn" class="btn-close grid-stack-floaty-btn"
:class="gridEnabledLocal === true ? 'visible':'invisible'"
></button> ></button>
<component :is="w.component2" /> <component :is="w.component2" />
</div> </div>
@ -497,7 +505,14 @@ function quickfill() {
> >
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasGridItemsLabel"> <h5 class="offcanvas-title" id="offcanvasGridItemsLabel">
Manage grid widgets Manage grid widgets &nbsp;<button
class="btn btn-sm btn-outline-info"
type="button"
@click="disableGrid"
title="Lock/unloack changes to grid"
>
<i class="bi" :class="gridEnabledLocal == true ? 'bi-unlock-fill' : 'bi-lock-fill'"></i>
</button>&nbsp;
</h5> </h5>
<button <button
@ -672,25 +687,27 @@ function quickfill() {
class="btn btn-sm btn-outline-warning" class="btn btn-sm btn-outline-warning"
type="button" type="button"
@click="clearAllItems" @click="clearAllItems"
title="Clear all items from the grid"
> >
Clear grid Clear grid
</button> </button>
<hr /> <hr/>
<button
class="btn btn-sm btn-outline-dark"
type="button"
@click="savePreset"
title="Save current grid layout as a preset that can be restored using restore preset button"
>
Save Preset
</button>&nbsp;
<button <button
class="btn btn-sm btn-outline-dark" class="btn btn-sm btn-outline-dark"
type="button" type="button"
@click="loadPreset" @click="loadPreset"
title="Restore your saved grid preset (clears current grid)" title="Restore your saved grid preset (clears current grid)"
> >
Restore Preset
Restore preset
</button>&nbsp;
<button
class="btn btn-sm btn-outline-dark"
type="button"
@click="savePreset"
title="Save current grid layout as a preset that can be restored using restore preset button"
>
Save preset
</button> </button>
</div> </div>
</div> </div>