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,25 +29,39 @@
       {% include 'extras/dashboard/widget.html' %}
     {% endfor %}
   </div>
-  <div class="d-flex px-3">
+  <div class="collapse multi-collapse show">
-    <div class="flex-grow-1">
+    <div class="d-flex px-3">
-      <a href="#"
+      <div class="flex-grow-1">
-        hx-get="{% url 'extras:dashboardwidget_add' %}"
+        <button type="button" id="unlock_dashboard" class="btn btn-light btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
-        hx-target="#htmx-modal-content"
+          <i class="mdi mdi-lock-open-outline"></i> Unlock Dashboard
-        data-bs-toggle="modal"
+        </button>
-        data-bs-target="#htmx-modal"
+      </div>
-        class="btn btn-success btn-sm"
-      >
-        <i class="mdi mdi-plus"></i> Add Widget
-      </a>
     </div>
-    <div>
+  </div>
-      <button id="save_dashboard" class="btn btn-primary btn-sm" data-url="{% url 'extras-api:dashboard' %}">
+  <div class="collapse multi-collapse">
-        <i class="mdi mdi-content-save-outline"></i> Save Layout
+    <div class="d-flex px-3">
-      </button>
+      <div class="flex-grow-1">
-      <a href="{% url 'extras:dashboard_reset' %}" class="btn btn-danger btn-sm">
+        <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-backspace"></i>  Reset Dashboard
+          <i class="mdi mdi-lock-outline"></i> Lock Dashboard
-      </a>
+        </button>
+      </div>
+      <div>
+        <a href="#"
+          hx-get="{% url 'extras:dashboardwidget_add' %}"
+          hx-target="#htmx-modal-content"
+          data-bs-toggle="modal"
+          data-bs-target="#htmx-modal"
+          class="btn btn-success btn-sm"
+        >
+          <i class="mdi mdi-plus"></i> Add Widget
+        </a>
+        <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>
+        <a href="{% url 'extras:dashboard_reset' %}" class="btn btn-danger btn-sm">
+          <i class="mdi mdi-backspace"></i>  Reset Dashboard
+        </a>
+      </div>
     </div>
   </div>
 {% endblock content-wrapper %}