Closes #12119: Lock & unlock dashboard layout

netbox/project-static/src/dashboard.ts

@@ -2,6 +2,20 @@ import { GridStack, GridStackOptions, GridStackWidget } from 'gridstack';
 import { createToast } from './bs';
 import { apiPatch, hasError } from './util';
 
+function lockDashboard(): void {
+  const dashboard = document.getElementById('dashboard') as any;
+  if (dashboard) {
+    dashboard.gridstack.disable();
+  }
+}
+
+function unlockDashboard(): void {
+  const dashboard = document.getElementById('dashboard') as any;
+  if (dashboard) {
+    dashboard.gridstack.enable();
+  }
+}
+
 async function saveDashboardLayout(
   url: string,
   gridData: GridStackWidget[] | GridStackOptions,
@@ -22,6 +36,8 @@ export function initDashboard(): void {
   // Initialize the grid
   let grid = GridStack.init({
     cellHeight: 100,
+    disableDrag: true,
+    disableResize: true,
     draggable: {
       handle: '.grid-stack-item-content .card-header',
       appendTo: 'body',
@@ -29,6 +45,22 @@ export function initDashboard(): void {
     }
   });
 
+  // Create a listener for the dashboard lock button
+  const gridLockButton = document.getElementById('lock_dashboard') as HTMLButtonElement;
+  if (gridLockButton) {
+    gridLockButton.addEventListener('click', () => {
+      lockDashboard();
+    });
+  }
+
+  // Create a listener for the dashboard unlock button
+  const gridUnlockButton = document.getElementById('unlock_dashboard') as HTMLButtonElement;
+  if (gridUnlockButton) {
+    gridUnlockButton.addEventListener('click', () => {
+      unlockDashboard();
+    });
+  }
+
   // Create a listener for the dashboard save button
   const gridSaveButton = document.getElementById('save_dashboard') as HTMLButtonElement;
   if (gridSaveButton === null) {

netbox/templates/home.html

@@ -29,8 +29,23 @@
       {% include 'extras/dashboard/widget.html' %}
     {% endfor %}
   </div>
+  <div class="collapse multi-collapse show">
     <div class="d-flex px-3">
       <div class="flex-grow-1">
+        <button type="button" id="unlock_dashboard" class="btn btn-light btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
+          <i class="mdi mdi-lock-open-outline"></i> Unlock Dashboard
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="collapse multi-collapse">
+    <div class="d-flex px-3">
+      <div class="flex-grow-1">
+        <button type="button" id="lock_dashboard" class="btn btn-light btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
+          <i class="mdi mdi-lock-outline"></i> Lock Dashboard
+        </button>
+      </div>
+      <div>
         <a href="#"
           hx-get="{% url 'extras:dashboardwidget_add' %}"
           hx-target="#htmx-modal-content"
@@ -40,8 +55,6 @@
         >
           <i class="mdi mdi-plus"></i> Add Widget
         </a>
-    </div>
-    <div>
         <button id="save_dashboard" class="btn btn-primary btn-sm" data-url="{% url 'extras-api:dashboard' %}">
           <i class="mdi mdi-content-save-outline"></i> Save Layout
         </button>
@@ -50,6 +63,7 @@
         </a>
       </div>
     </div>
+  </div>
 {% endblock content-wrapper %}
 
 {% block modals %}