5221ee3594
Added new navigation menu items in `_Layout.cshtml` for "Rechnungen" (Invoices) and "PDF hochladen" (Upload PDF) with icons, paths, and selection logic. Created a new Razor Page `Index.cshtml` to display imported invoices using a `DataGrid` with features like filtering, paging, and column formatting. Added a conditional message for when no invoices are available. Implemented the `IndexModel` class in `Index.cshtml.cs` to handle backend logic, including fetching and sorting invoices from the database using `AppDbContext`.
216 lines
7.9 KiB
Plaintext
216 lines
7.9 KiB
Plaintext
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>DXApp.TemplateKitProject</title>
|
|
@* Custom theme with a color swatch *@
|
|
@* Docs: https://js.devexpress.com/DevExtreme/Guide/Themes_and_Styles/Predefined_Themes/#Color_Swatches *@
|
|
<link href="~/css/devextreme/dx.fluent.blue.light.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="~/css/Site.css" />
|
|
<script src="~/js/devextreme/jquery.js"></script>
|
|
<script src="~/js/devextreme/dx.all.js"></script>
|
|
<script src="~/js/devextreme/aspnet/dx.aspnet.mvc.js"></script>
|
|
<script src="~/js/devextreme/aspnet/dx.aspnet.data.js"></script>
|
|
</head>
|
|
|
|
<body class="dx-viewport">
|
|
<div id="app-side-nav-outer-toolbar">
|
|
<div class="layout-header">
|
|
@(Html.DevExtreme().Toolbar()
|
|
.Items(items => {
|
|
items.Add()
|
|
.Widget(w => w
|
|
.Button()
|
|
.Icon("menu")
|
|
.OnClick("DevExtremeAspNetCoreAppMatRazorPages.onMenuButtonClick")
|
|
)
|
|
.Location(ToolbarItemLocation.Before)
|
|
.CssClass("menu-button");
|
|
items.Add()
|
|
.Html("<div>DXApp.TemplateKitProject</div>")
|
|
.Location(ToolbarItemLocation.Before)
|
|
.CssClass("header-title");
|
|
})
|
|
)
|
|
</div>
|
|
<div class="layout-body layout-body-hidden">
|
|
@(Html.DevExtreme().Drawer()
|
|
.ID("layout-drawer")
|
|
.Position(DrawerPosition.Left)
|
|
.Opened(new JS("DevExtremeAspNetCoreAppMatRazorPages.restoreDrawerOpened()"))
|
|
.Content(@<text>
|
|
<div id="layout-drawer-scrollview" class="with-footer">
|
|
<div class="content">
|
|
@RenderBody()
|
|
</div>
|
|
<div>
|
|
<div class="content-footer">
|
|
<div id="footer">
|
|
Copyright (c) 2000-@DateTime.Now.Year Developer Express Inc.
|
|
<br />
|
|
All trademarks or registered trademarks are property of their respective owners.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</text>)
|
|
.Template(new TemplateName("navigation-menu"))
|
|
)
|
|
</div>
|
|
</div>
|
|
|
|
@using(Html.DevExtreme().NamedTemplate("navigation-menu")) {
|
|
<div class="menu-container dx-swatch-additional">
|
|
|
|
@functions{
|
|
string GetUrl(string pageName) => Url.Page(pageName);
|
|
string GetCurrentUrl() => Url.Page(ViewContext.RouteData.Values["page"].ToString());
|
|
bool IsCurrentUrl(string pageName) => GetUrl(pageName) == GetCurrentUrl();
|
|
}
|
|
|
|
@(Html.DevExtreme().TreeView()
|
|
.Items(items =>
|
|
{
|
|
items.Add()
|
|
.Text("Home")
|
|
.Icon("home")
|
|
.Option("path", GetUrl("/Index"))
|
|
.Selected(IsCurrentUrl("/Index"));
|
|
|
|
items.Add()
|
|
.Text("About")
|
|
.Icon("info")
|
|
.Option("path", GetUrl("/About"))
|
|
.Selected(IsCurrentUrl("/About"));
|
|
|
|
items.Add()
|
|
.Text("Rechnungen")
|
|
.Icon("doc")
|
|
.Option("path", GetUrl("/Invoices/Index"))
|
|
.Selected(IsCurrentUrl("/Invoices/Index"));
|
|
|
|
items.Add()
|
|
.Text("PDF hochladen")
|
|
.Icon("upload")
|
|
.Option("path", GetUrl("/Invoices/Upload"))
|
|
.Selected(IsCurrentUrl("/Invoices/Upload"));
|
|
})
|
|
.ExpandEvent(TreeViewExpandEvent.Click)
|
|
.SelectionMode(NavSelectionMode.Single)
|
|
.SelectedExpr("selected")
|
|
.FocusStateEnabled(false)
|
|
.Width(250)
|
|
.OnItemClick("DevExtremeAspNetCoreAppMatRazorPages.onTreeViewItemClick")
|
|
)
|
|
|
|
</div>
|
|
}
|
|
|
|
<script>
|
|
|
|
var DevExtremeAspNetCoreAppMatRazorPages = (function() {
|
|
|
|
var DRAWER_OPENED_KEY = "DevExtremeAspNetCoreAppMatRazorPages-drawer-opened";
|
|
|
|
var breakpoints = {
|
|
xSmallMedia: window.matchMedia("(max-width: 599.99px)"),
|
|
smallMedia: window.matchMedia("(min-width: 600px) and (max-width: 959.99px)"),
|
|
mediumMedia: window.matchMedia("(min-width: 960px) and (max-width: 1279.99px)"),
|
|
largeMedia: window.matchMedia("(min-width: 1280px)")
|
|
};
|
|
|
|
function getDrawer() {
|
|
return $("#layout-drawer").dxDrawer("instance");
|
|
}
|
|
|
|
function restoreDrawerOpened() {
|
|
var isLarge = breakpoints.largeMedia.matches;
|
|
if(!isLarge)
|
|
return false;
|
|
|
|
var state = sessionStorage.getItem(DRAWER_OPENED_KEY);
|
|
if(state === null)
|
|
return isLarge;
|
|
|
|
return state === "true";
|
|
}
|
|
|
|
function saveDrawerOpened() {
|
|
sessionStorage.setItem(DRAWER_OPENED_KEY, getDrawer().option("opened"));
|
|
}
|
|
|
|
function updateDrawer() {
|
|
var isXSmall = breakpoints.xSmallMedia.matches,
|
|
isLarge = breakpoints.largeMedia.matches;
|
|
|
|
getDrawer().option({
|
|
openedStateMode: isLarge ? "shrink" : "overlap",
|
|
revealMode: isXSmall ? "slide" : "expand",
|
|
minSize: isXSmall ? 0 : 60,
|
|
shading: !isLarge,
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
$("#layout-drawer-scrollview").dxScrollView({ direction: "vertical" });
|
|
|
|
$.each(breakpoints, function(_, size) {
|
|
size.addListener(function(e) {
|
|
if(e.matches)
|
|
updateDrawer();
|
|
});
|
|
});
|
|
|
|
updateDrawer();
|
|
|
|
$('.layout-body').removeClass('layout-body-hidden');
|
|
}
|
|
|
|
function navigate(url, delay) {
|
|
if(url)
|
|
setTimeout(function() { location.href = url }, delay);
|
|
}
|
|
|
|
function onMenuButtonClick() {
|
|
getDrawer().toggle();
|
|
saveDrawerOpened();
|
|
}
|
|
|
|
function onTreeViewItemClick(e) {
|
|
var drawer = getDrawer();
|
|
var savedOpened = restoreDrawerOpened();
|
|
var actualOpened = drawer.option("opened");
|
|
|
|
if(!actualOpened) {
|
|
drawer.show();
|
|
} else {
|
|
var willHide = !savedOpened || !breakpoints.largeMedia.matches;
|
|
var willNavigate = !e.itemData.selected;
|
|
|
|
if(willHide)
|
|
drawer.hide();
|
|
|
|
if(willNavigate)
|
|
navigate(e.itemData.path, willHide ? 400 : 0);
|
|
}
|
|
}
|
|
|
|
return {
|
|
init: init,
|
|
restoreDrawerOpened: restoreDrawerOpened,
|
|
onMenuButtonClick: onMenuButtonClick,
|
|
onTreeViewItemClick: onTreeViewItemClick
|
|
};
|
|
})();
|
|
|
|
document.addEventListener("DOMContentLoaded", function documentReady() {
|
|
this.removeEventListener("DOMContentLoaded", documentReady);
|
|
DevExtremeAspNetCoreAppMatRazorPages.init();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|