300 lines
12 KiB
Plaintext
300 lines
12 KiB
Plaintext
@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.TestGridModel
|
|
@using DevExtreme.AspNet.Mvc
|
|
|
|
@{
|
|
var contextId = Model;
|
|
// var gridId = $"dataGrid_{Guid.NewGuid():N}";
|
|
}
|
|
|
|
<div>
|
|
@(
|
|
Html.DevExtreme().DataGrid()
|
|
.ID("orderDataGridContainer")
|
|
.ShowBorders(true)
|
|
.DataSource(ds => ds.Mvc()
|
|
.Controller("ManagementPage")
|
|
.LoadAction("GetShippingDocuments"))
|
|
.KeyExpr("Id")
|
|
.SearchPanel(sp => sp.Visible(true))
|
|
.HeaderFilter(hf => hf.Visible(true))
|
|
.Paging(p => p.PageSize(15))
|
|
.Pager(p => p.Visible(true))
|
|
.OnRowExpanded("onRowExpanded")
|
|
.Editing(editing => {
|
|
editing.Mode(GridEditMode.Cell);
|
|
editing.AllowUpdating(true);
|
|
editing.AllowAdding(true);
|
|
editing.AllowDeleting(true);
|
|
})
|
|
.Columns(c => {
|
|
|
|
c.Add().DataField("Id").AllowEditing(false);
|
|
c.Add().DataField("Partner.Name").AllowEditing(false);
|
|
c.Add()
|
|
.Caption("Items in order")
|
|
.DataType(GridColumnDataType.Number)
|
|
.CalculateCellValue("calculateItemsCount").AllowEditing(false);
|
|
c.Add().DataField("PartnerId");
|
|
c.Add().DataField("DocumentIdNumber");
|
|
c.Add().DataField("IsAllMeasured");
|
|
|
|
c.Add()
|
|
.Caption("Completed")
|
|
.DataType(GridColumnDataType.Boolean)
|
|
.CalculateCellValue("calculateCellValue").AllowEditing(false);
|
|
})
|
|
.Toolbar(toolbar => {
|
|
toolbar.Items(items => {
|
|
items.Add()
|
|
.Name("addRowButton")
|
|
.ShowText(ToolbarItemShowTextMode.Always);
|
|
|
|
items.Add()
|
|
.Location(ToolbarItemLocation.After)
|
|
.Widget(w =>
|
|
w.Button()
|
|
.Text("Delete Selected Records")
|
|
.Icon("trash")
|
|
.Disabled(true)
|
|
.OnClick("onDeleteBtnClick")
|
|
);
|
|
});
|
|
})
|
|
.MasterDetail(md => {
|
|
md.Enabled(true);
|
|
md.Template(@<text>
|
|
<div class="master-detail-caption"><%- data.ShippingDate %> <%- data.LicencePlate %>'s shippingdocuments:</div>
|
|
<div id="fileuploader">
|
|
<div class="widget-container">
|
|
|
|
<section id="tabs" class="project-tab">
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<nav>
|
|
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
|
|
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Partner info</a>
|
|
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Products</a>
|
|
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Files</a>
|
|
</div>
|
|
</nav>
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
|
|
<table class="table" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th>Project Name</th>
|
|
<th>Employer</th>
|
|
<th>Awards</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><a href="#">Work 1</a></td>
|
|
<td>Doe</td>
|
|
<td>john@example.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="#">Work 2</a></td>
|
|
<td>Moe</td>
|
|
<td>mary@example.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="#">Work 3</a></td>
|
|
<td>Dooley</td>
|
|
<td>july@example.com</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
|
|
<table class="table" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th>Project Name</th>
|
|
<th>Employer</th>
|
|
<th>Time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><a href="#">Work 1</a></td>
|
|
<td>Doe</td>
|
|
<td>john@example.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="#">Work 2</a></td>
|
|
<td>Moe</td>
|
|
<td>mary@example.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="#">Work 3</a></td>
|
|
<td>Dooley</td>
|
|
<td>july@example.com</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
|
|
<form method="post" enctype="multipart/form-data" asp-controller="ManagementPage" asp-action="UploadFile">
|
|
@(Html.DevExtreme().FileUploader()
|
|
.ID(new JS("'shippingDocumentUploader-' + data.Id"))
|
|
.Name("files")
|
|
.Multiple(true)
|
|
.Accept("application/pdf")
|
|
.UploadMode(FileUploadMode.UseForm)
|
|
)
|
|
|
|
<input type="hidden" name="ShippingDocumentId" value="<%- data.Id %>" />
|
|
|
|
@(Html.DevExtreme().Button()
|
|
.Text("Upload Files")
|
|
.Type(ButtonType.Success)
|
|
.UseSubmitBehavior(true)
|
|
)
|
|
</form>
|
|
|
|
<div class="content" id="selected-files">
|
|
<div>
|
|
<h4>Selected Files</h4>
|
|
</div>
|
|
</div>
|
|
|
|
@* <div id="@(new JS("'shippingDocumentGridContainer-' + data.ID"))"></div>
|
|
@(Html.DevExtreme().DataGrid<FruitBank.Common.Entities.ShippingDocument>()
|
|
.ColumnAutoWidth(true)
|
|
.ShowBorders(true)
|
|
.ID(new JS("'shippingDocumentGridContainer-' + data.Id"))
|
|
.Columns(columns => {
|
|
columns.AddFor(m => m.Id).AllowEditing(false);
|
|
|
|
columns.AddFor(m => m.Country);
|
|
|
|
columns.AddFor(m => m.Created);
|
|
|
|
columns.AddFor(m => m.PartnerId);
|
|
|
|
columns.Add()
|
|
.Caption("Completed")
|
|
.DataType(GridColumnDataType.Boolean)
|
|
.CalculateCellValue("calculateCellValue");
|
|
})
|
|
.DataSource(ds => ds.Mvc()
|
|
.Controller("Shipping")
|
|
.LoadAction("GetShippingDocumentsByShippingId")
|
|
.LoadParams(new { shippingId = new JS("data.Id") })
|
|
.Key("Id")
|
|
)
|
|
) *@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
</text>);
|
|
})
|
|
)
|
|
</div>
|
|
|
|
|
|
<script>
|
|
function calculateCellValue(rowData) {
|
|
return rowData.Status === "Completed";
|
|
}
|
|
</script>
|
|
<script>
|
|
function calculateItemsCount(rowData) {
|
|
return rowData.ShippingItems.length;
|
|
}
|
|
</script>
|
|
|
|
|
|
<script>
|
|
function onDeleteBtnClick(){
|
|
let dataGrid = $("#gridContainer").dxDataGrid("instance");
|
|
$.when.apply($, dataGrid.getSelectedRowsData().map(function(data) {
|
|
return dataGrid.getDataSource().store().remove(data.ID);
|
|
})).done(function() {
|
|
dataGrid.refresh();
|
|
});
|
|
}
|
|
|
|
function calculateFilterExpression(filterValue, selectedFilterOperation, target) {
|
|
if(target === "search" && typeof(filterValue) === "string") {
|
|
return [this.dataField, "contains", filterValue]
|
|
}
|
|
return function(data) {
|
|
return (data.AssignedEmployee || []).indexOf(filterValue) !== -1
|
|
}
|
|
}
|
|
|
|
function onSelectionChanged(data) {
|
|
let dataGrid = $("#gridContainer").dxDataGrid("instance");
|
|
dataGrid.option("toolbar.items[1].options.disabled", !data.selectedRowsData.length);
|
|
}
|
|
|
|
function onRowExpanded(e) {
|
|
e.component.dxDataGrid("getDataSource").reload();
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
|
|
function fileUploader_valueChanged(e) {
|
|
var files = e.value;
|
|
if(files.length > 0) {
|
|
$("#selected-files .selected-item").remove();
|
|
|
|
$.each(files, function(i, file) {
|
|
var $selectedItem = $("<div />").addClass("selected-item");
|
|
$selectedItem.append(
|
|
$("<span />").html("Name: " + file.name + "<br/>"),
|
|
$("<span />").html("Size " + file.size + " bytes" + "<br/>"),
|
|
$("<span />").html("Type " + file.type + "<br/>"),
|
|
$("<span />").html("Last Modified Date: " + file.lastModifiedDate)
|
|
);
|
|
$selectedItem.appendTo($("#selected-files"));
|
|
});
|
|
$("#selected-files").show();
|
|
}
|
|
else
|
|
$("#selected-files").hide();
|
|
}
|
|
|
|
function getGridInstance() {
|
|
return $("#shippingDocumentUploader").dxFileUploader("instance");
|
|
}
|
|
|
|
function fileUploader_fileUploaded(e) {
|
|
const fileUploaderId = e.component.element().attr('id');
|
|
|
|
// 2. Extract the number from the ID
|
|
const match = fileUploaderId.match(/\d+$/);
|
|
|
|
if (match) {
|
|
const uniqueId = match[0];
|
|
const gridId = `shippingDocumentGridContainer-${uniqueId}`;
|
|
|
|
// 3. Get the DevExtreme grid instance and refresh it
|
|
const grid = $(`#${gridId}`).dxDataGrid('instance');
|
|
|
|
if (grid) {
|
|
grid.dxDataGrid("getDataSource").reload();
|
|
// Optional: Show a success notification
|
|
DevExpress.ui.notify("Documents updated successfully!", "success", 2000);
|
|
} else {
|
|
console.error(`DevExtreme grid with ID "${gridId}" not found.`);
|
|
}
|
|
} else {
|
|
console.error("Could not find a unique ID number from the file uploader.");
|
|
}
|
|
// shippingDocumentGridContainer
|
|
//$("#shippingDocumentGridContainer" + e.component.ID).dxDataGrid("getDataSource").reload();
|
|
}
|
|
|
|
</script>
|
|
|