Files
vibetree/web/templates/partials/modals.html
T
Owen 42e7b2a21c Statuses import, an icon picker, folder-scoped CSV import, and site name
- Statuses can now be bulk-imported/updated via CSV (Name, Color columns;
  matches and updates existing statuses by name). New
  internal/statuses/csv.go, tested.
- Icon fields (folder create/rename, item type form) are now a searchable
  dropdown of the 50 most common Bootstrap Icons instead of a free-text
  box, via a small reusable .icon-picker widget in app.js/app.css.
- CSV asset import is now folder-scoped when triggered from the tree:
  right-click a folder (or its background) > Import CSV... imports every
  row directly into that folder, so the CSV needs no Folder column at
  all, and the option no longer appears at the top level. The original
  global, Folder-path-aware import (with auto-create-missing-folders)
  moved to a new admin-only Settings > Import / Export page, alongside
  the new Statuses import and format examples for both. assets.Import
  gained ImportOptions.TargetFolderID to drive the folder-scoped mode.
- Site Name (Settings > General) now actually renders in the navbar
  brand and <title>, via a per-App "siteName" template func bound in
  loadTemplates. The brand is plain text now, not a link to /inventory.
2026-08-17 15:57:59 -05:00

163 lines
7.4 KiB
HTML

{{define "modals"}}
{{if .User.IsAdmin}}
<!-- Create / rename folder -->
<div class="modal fade" id="folderModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form id="folderForm">
<div class="modal-header">
<h5 class="modal-title" id="folderModalTitle">New Folder</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<input type="hidden" name="folder_id" id="folderFormId">
<input type="hidden" name="parent_id" id="folderFormParentId">
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" name="name" id="folderFormName" required autofocus>
</div>
<div class="mb-3">
<label class="form-label">Description</label>
<textarea class="form-control" name="description" id="folderFormDescription" rows="2"></textarea>
</div>
<div class="row g-2">
<div class="col">
<label class="form-label">Icon <span class="text-body-secondary">(optional)</span></label>
<div class="icon-picker" data-icon-picker>
<input type="hidden" name="icon" id="folderFormIcon" value="">
<button type="button" class="btn btn-outline-secondary icon-picker-toggle w-100">
<i class="bi icon-picker-preview"></i>
<span class="icon-picker-label text-body-secondary">Choose icon&hellip;</span>
<i class="bi bi-chevron-down icon-picker-caret"></i>
</button>
<div class="icon-picker-menu">
<input type="search" class="form-control form-control-sm icon-picker-search" placeholder="Search icons&hellip;">
<div class="icon-picker-grid"></div>
<button type="button" class="btn btn-sm btn-link p-0 mt-2 icon-picker-clear">Clear</button>
</div>
</div>
</div>
<div class="col-4">
<label class="form-label">Sort Order</label>
<input type="number" class="form-control" name="sort_order" id="folderFormSortOrder" value="0">
</div>
</div>
<div class="invalid-feedback d-block d-none" id="folderFormError"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save Folder</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete folder confirmation -->
<div class="modal fade" id="deleteFolderModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="bi bi-exclamation-triangle-fill text-danger"></i> Delete Folder</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Delete <strong id="deleteFolderName"></strong>?</p>
<div id="deleteFolderEmptyNotice" class="d-none">
<p class="text-body-secondary">This folder is empty and can be deleted safely.</p>
</div>
<div id="deleteFolderNotEmptyNotice" class="d-none">
<div class="alert alert-warning py-2">
This folder contains <span id="deleteFolderCounts"></span>. Choose what to do with its contents.
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="delete_mode" id="modeRelocate" value="relocate" checked>
<label class="form-check-label" for="modeRelocate">Move contents to&hellip;</label>
</div>
<select class="form-select mt-1 mb-2" id="deleteFolderDestination"></select>
<div class="form-check">
<input class="form-check-input" type="radio" name="delete_mode" id="modeCascade" value="cascade">
<label class="form-check-label text-danger" for="modeCascade">Permanently delete everything inside</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirmDeleteFolderBtn">Delete Folder</button>
</div>
</div>
</div>
</div>
<!-- Add / edit asset -->
<div class="modal fade" id="assetModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="assetModalTitle">New Asset</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body" id="assetModalBody"></div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" form="assetForm" class="btn btn-primary" id="assetModalSubmit">Create Asset</button>
</div>
</div>
</div>
</div>
<!-- Move asset -->
<div class="modal fade" id="moveAssetModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Move Asset</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<label class="form-label">Destination Folder</label>
<select class="form-select" id="moveAssetDestination">
<option value="">Inventory (top level)</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="confirmMoveAssetBtn">Move</button>
</div>
</div>
</div>
</div>
<!-- Import CSV into a specific folder (right-click a folder > Import CSV...) -->
<div class="modal fade" id="importModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form id="importForm">
<div class="modal-header">
<h5 class="modal-title" id="importModalTitle">Import CSV</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<input type="hidden" name="folder_id" id="importFolderId">
<div class="mb-3">
<label class="form-label">CSV File</label>
<input type="file" class="form-control" name="file" id="importFile" accept=".csv" required>
</div>
<p class="text-body-secondary small mb-0">
Every row imports into this folder. Columns: <code>Name</code>, <code>Item Type</code>,
<code>Status</code>. Optional: <code>Asset ID</code>, <code>Assigned User</code>, <code>Notes</code>,
plus <code>cf_&lt;field_key&gt;</code> for custom fields. No Folder column needed.
</p>
<div id="importResult" class="mt-3"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="importSubmitBtn">Import</button>
</div>
</form>
</div>
</div>
</div>
{{end}}
{{end}}