{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Manage Node.js Packages" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3"><div><h1 class="eenos-page-title">{% translate "Manage Node.js Packages" %}</h1><div class="eenos-page-subtitle">{% translate "Install, update, or remove packages for" %} <strong>{{ domain }}</strong>.</div></div><a href="{% url 'sandbox_nodejs_npms' %}" class="btn btn-outline-secondary"><i data-lucide="arrow-left"></i>{% translate "Node.js Packages" %}</a></div>
<nav class="eenos-breadcrumb"><a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Applications" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><a href="{% url 'sandbox_nodejs_npms' %}">{% translate "Node.js Packages" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{{ domain }}</span></nav>
{% include "includes/form_alerts.html" %}
<div class="eenos-card mb-4"><div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "Install NPM Packages" %}</h2><p class="eenos-card-subtitle">{% translate "Add one or more packages to this application’s isolated Node.js environment." %}</p></div><div class="eenos-card-action-icon"><i data-lucide="package-plus"></i></div></div><div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Target Node.js Application" %}</div><div class="eenos-modal-info-value"><a href="https://{{ domain }}/" target="_blank" rel="noopener noreferrer" class="d-inline-flex align-items-center gap-2"><span class="font-monospace text-break">{{ domain }}</span><i data-lucide="external-link"></i></a></div><div class="small text-muted mt-1">{% translate "NPM will install these packages only in this website’s Node.js project using its selected runtime." %}</div></div></div><form method="post" id="installNpmsForm" class="eenos-form">{% csrf_token %}<label for="packages" class="form-label">{% translate "Packages" %}</label><textarea name="packages" id="packages" required class="form-control font-monospace" rows="4" data-parsley-required-message="{% translate 'Please enter at least one package.' %}" placeholder="express@5.1.0&#10;lodash&#10;mongoose@8.18.0"></textarea><div class="form-text">{% translate "Enter one package per line or separate packages with commas. Add @version when a specific release is required." %}</div><input type="hidden" name="install_npms" value="yes"><button type="button" class="btn btn-primary mt-3" id="reviewInstall"><i data-lucide="package-plus"></i>{% translate "Review Installation" %}</button></form></div>
<div class="eenos-card"><div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "Installed Packages" %}</h2><p class="eenos-card-subtitle">{% translate "Packages currently installed for this application." %}</p></div><div class="eenos-card-action-icon"><i data-lucide="package-open"></i></div></div><div class="d-flex flex-wrap align-items-center gap-2 mb-3"><button type="button" class="btn btn-sm btn-outline-secondary" id="bulkUpdate"><i data-lucide="refresh-cw"></i>{% translate "Update Selected" %}</button><button type="button" class="btn btn-sm btn-outline-danger" id="bulkRemove"><i data-lucide="trash-2"></i>{% translate "Remove Selected" %}</button></div><div class="table-responsive"><table id="npmsTable" class="table align-middle w-100"><thead><tr><th><input type="checkbox" class="form-check-input" id="selectAllNpms" aria-label="{% translate 'Select all packages' %}"></th><th>{% translate "Package" %}</th><th>{% translate "Version" %}</th><th class="text-end">{% translate "Actions" %}</th></tr></thead></table></div></div>
<form method="post" id="updateNpmForm">{% csrf_token %}<input type="hidden" name="packages" id="updateNpmPackages"><input type="hidden" name="update_npm" value="yes"></form>
<form method="post" id="deleteNpmForm">{% csrf_token %}<input type="hidden" name="packages" id="deleteNpmPackages"><input type="hidden" name="delete_npm" value="yes"></form>
<div class="modal fade" id="npmModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><div><h2 class="modal-title fs-5" id="npmTitle"></h2><div class="small text-muted">{{ domain }}</div></div><button class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><div class="eenos-amber-notice eenos-amber-notice-warning mb-0"><div class="eenos-amber-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-amber-notice-content"><div class="eenos-amber-notice-title">{% translate "Confirm package operation" %}</div><div class="eenos-amber-notice-text" id="npmText"></div></div></div></div><div class="modal-footer"><button class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button><button class="btn btn-primary" id="confirmNpm"></button></div></div></div></div>
{% endblock %}
{% block extra_js %}<script>(function($){"use strict";$(function(){const esc=v=>$("<div>").text(v==null?"":v).html(),modal=bootstrap.Modal.getOrCreateInstance("#npmModal");let operation="",chosen=[];
const table=$("#npmsTable").DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'nodejs_npms_data' %}",data:{domain:"{{ domain|escapejs }}"},dataSrc:"data"},pageLength:25,lengthMenu:[[25,50,100,-1],[25,50,100,"{% translate 'All' %}"]],order:[[1,"asc"]],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:"{% translate 'Loading...' %}",emptyTable:"{% translate 'No Node.js packages are installed.' %}",zeroRecords:"{% translate 'No matching packages found.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[{data:"package",orderable:false,searchable:false,width:"34px",render:(v,t)=>t==="display"?'<input type="checkbox" class="form-check-input npm-select" name="member_check" value="'+esc(v)+'">':v},{data:"package",responsivePriority:1,className:"font-monospace"},{data:"version",render:(v,t)=>t==="display"?'<span class="badge eenos-badge-neutral">'+esc(v||"—")+'</span>':v},{data:null,orderable:false,searchable:false,responsivePriority:1,className:"text-end",render:(d,t,r)=>t!=="display"?"":'<div class="eenos-dt-actions justify-content-end"><button class="btn btn-sm btn-outline-secondary npm-action" data-action="update" data-package="'+encodeURIComponent(r.package)+'"><i data-lucide="refresh-cw"></i></button><button class="btn btn-sm btn-outline-danger npm-action" data-action="remove" data-package="'+encodeURIComponent(r.package)+'"><i data-lucide="trash-2"></i></button></div>'}],drawCallback:()=>lucide.createIcons()});table.on("responsive-display",()=>lucide.createIcons());
function selected(){return $(".npm-select:checked").map((i,e)=>e.value).get()}function open(type,items){operation=type;chosen=items;const remove=type==="remove",install=type==="install",packages=items.flatMap(item=>String(item).split(/[\n,]+/)).map(item=>item.trim()).filter(Boolean),title=install?"{% translate 'Install Packages' %}":remove?"{% translate 'Remove Packages' %}":"{% translate 'Update Packages' %}";if(!$("#npmOperationDetails").length)$("#npmModal .eenos-amber-notice").before('<div id="npmOperationDetails" class="mb-4"><div class="eenos-modal-info mb-3"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Node.js sandbox" %}</div><div class="eenos-modal-info-value font-monospace text-break">{{ domain }}</div></div></div><div class="d-flex align-items-center justify-content-between gap-3 mb-2"><strong>{% translate "Selected packages" %}</strong><span class="badge eenos-badge-neutral" id="npmPackageCount"></span></div><div class="d-flex flex-wrap gap-2" id="npmPackageList"></div></div><div class="form-check mt-4 d-none" id="removeNpmConfirmation"><input class="form-check-input" type="checkbox" id="removeNpmConfirmed"><label class="form-check-label fw-semibold" for="removeNpmConfirmed">{% translate "I understand that removing these packages may stop this Node.js application from working." %}</label></div>');$("#npmTitle").text(title);$("#npmPackageCount").text(packages.length+" "+(packages.length===1?"{% translate 'package' %}":"{% translate 'packages' %}"));$("#npmPackageList").html(packages.map(item=>'<span class="badge eenos-badge-neutral font-monospace">'+esc(item)+'</span>').join(""));$("#npmModal .eenos-amber-notice-title").text(remove?"{% translate 'Packages will be uninstalled' %}":install?"{% translate 'Confirm package installation' %}":"{% translate 'Installed versions may change' %}");$("#npmText").text(remove?"{% translate 'Removing packages may stop the application if it still depends on them.' %}":install?"{% translate 'These packages will be installed only in this application environment.' %}":"{% translate 'The selected packages will be upgraded to versions allowed by their constraints.' %}");$("#removeNpmConfirmation").toggleClass("d-none",!remove);$("#removeNpmConfirmed").prop("checked",false);$("#confirmNpm").attr("class","btn "+(remove?"btn-danger":install?"btn-primary":"btn-warning")).prop("disabled",remove).text(title);lucide.createIcons();modal.show()}
$("#reviewInstall").on("click",function(){const f=$("#installNpmsForm"),p=f.parsley();p.validate();if(p.isValid())open("install",[$("#packages").val()])});$(document).on("click",".npm-action",function(){open(this.dataset.action,[decodeURIComponent(this.dataset.package)])});$("#bulkUpdate").on("click",function(){const a=selected();if(a.length)open("update",a)});$("#bulkRemove").on("click",function(){const a=selected();if(a.length)open("remove",a)});$("#selectAllNpms").on("change",function(){$(".npm-select").prop("checked",this.checked)});$(document).on("change","#removeNpmConfirmed",function(){$("#confirmNpm").prop("disabled",!this.checked)});$("#confirmNpm").on("click",function(){if(operation==="remove"&&!$("#removeNpmConfirmed").is(":checked"))return;if(operation==="install"){document.getElementById("installNpmsForm").submit();return}if(operation==="remove"){$("#deleteNpmPackages").val(chosen.join(","));document.getElementById("deleteNpmForm").submit()}else{$("#updateNpmPackages").val(chosen.join(","));document.getElementById("updateNpmForm").submit()}});
})})(jQuery);</script>{% endblock %}