WEB most jól működik Datatables-sel.

2025-03-11 16:54:50 +01:00
parent e5b1649c42
commit 8f9e5df847
11 changed files with 370 additions and 7 deletions
@@ -0,0 +1,101 @@
+@page
+@model WorkFlowCheck.Web.Pages.BaseStock.CheckPoints.CheckPointEditPageModel
+@{
+    ViewData["Title"] = "Ellenőrzési pont";
+    var checkpointId = Model.CheckPoint.Id;
+    var url = Url.Page("./CheckPointEditPage", "LoadCheckListTemplateRows", new { id = checkpointId });
+}
+<h1>@ViewData["Title"]</h1>
+
+<input type="hidden" id="checkPointEditUrl" value="@url" />
+
+<div>
+    <form method="post">
+        <input type="hidden" id="hiddenCheckPointId" value="@Model.CheckPoint.Id" />
+
+        <div class="form-group">
+            <label asp-for="CheckPoint.ShortName"></label>
+            <input asp-for="CheckPoint.ShortName" class="form-control" />
+            <span asp-validation-for="CheckPoint.ShortName" class="text-danger"></span>
+        </div>
+        <div class="form-group">
+            <label asp-for="CheckPoint.Code"></label>
+            <input asp-for="CheckPoint.Code" class="form-control" />
+            <span asp-validation-for="CheckPoint.Code" class="text-danger"></span>
+        </div>
+        <button type="submit" class="btn btn-primary">Mentés</button>
+    </form>
+</div>
+
+<div class="d-flex justify-content-end">
+    <button class="btn btn-primary float-right">Új elem hozzáadása</button>
+</div>
+<div>
+    <table id="tbCheckPointsEditPage" class="table table-bordered table-hover table-sm" style="width:100%">
+        <thead class="table-primary">
+            <tr>
+                <th>ID</th>
+                <th>RowIndex</th>
+                <th>OperationDescription</th>
+                <th>AnswerType</th>
+                <th class="text-center">Action</th>
+            </tr>
+        </thead>
+        <tfoot class="table-light">
+            <tr>
+                <th>ID</th>
+                <th>RowIndex</th>
+                <th>OperationDescription</th>
+                <th>AnswerType</th>
+                <th class="text-center">Action</th>
+            </tr>
+        </tfoot>
+    </table>
+</div>
+
+@section Scripts {
+    <script>
+
+        const table = new DataTable('#tbCheckPointsEditPage', {
+                ajax: {
+                       url: $('#checkPointEditUrl').val(),
+                       type: "GET",
+                       dataSrc : "data"
+                },
+                columns: [
+                    { data: "id" },
+                    { data: "rowIndex" },
+                    { data: "operationDescription" },
+                    { data: "answerType" },
+                    { data: null, render: function (data, type, row) {
+                        return `<button class="btn btn-primary edit-btn" data-id="${row.id}">Módosítás</button>
+                                <button class="btn btn-danger delete-btn" data-id="${row.id}">Törlés</button>
+                               `;
+                    }}
+                ],
+                columnDefs: [
+                    {
+                        "targets": 0,
+                        "visible": false
+                    },
+                    {
+                        "targets": 4,
+                        "className": "text-center",
+                        "width": "15%"
+                    }
+                ],
+
+                processing:true
+        });
+        $('#tbCheckPointsEditPage').on('click', '.edit-btn', function ()
+        {
+            const row = table.row($(this).closest('tr')).data();
+
+        });
+        $('#tbCheckPointsEditPage').on('click', '.delete-btn', function ()
+        {
+            const row = table.row($(this).closest('tr')).data();
+
+        });
+    </script>
+}
@@ -0,0 +1,32 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using WorkFlowCheck.Common.DTO;
+using WorkFlowCheck.Web.Services.Interfaces;
+
+namespace WorkFlowCheck.Web.Pages.BaseStock.CheckPoints
+{
+    public class CheckPointEditPageModel : PageModel
+    {
+        private readonly ILogger<IndexModel> _logger;
+        private readonly IBaseStockService _baseStockService;
+
+        [BindProperty]
+        public CheckPointDTO CheckPoint { get; set; }
+
+        public CheckPointEditPageModel(ILogger<IndexModel> logger, IBaseStockService baseStockService)
+        {
+            _baseStockService = baseStockService;
+            _logger = logger;
+        }
+        public async Task OnGet(int id)
+        {
+            CheckPoint = await _baseStockService.GetCheckPoint(id);
+
+        }
+        public async Task<JsonResult> OnGetLoadCheckListTemplateRows(int id)
+        {
+            CheckPoint = await _baseStockService.GetCheckPoint(id);
+            return new JsonResult(new { data = CheckPoint.CheckListTemplateRowDTO });
+        }
+    }
+}
@@ -0,0 +1,74 @@
+@page
+@model WorkFlowCheck.Web.Pages.BaseStock.CheckPoints.CheckPointsPageModel
+@{
+    ViewData["Title"] = "Ellenőrzési pontok";
+}
+<h1>@ViewData["Title"]</h1>
+<div class="d-flex justify-content-end">
+    <button class="btn btn-primary float-right">Új elem hozzáadása</button>
+</div>
+<div>
+    <table id="tbCheckPointsPage" class="table table-bordered table-hover table-sm" style="width:100%">
+        <thead class="table-primary">
+            <tr>
+                <th>ID</th>
+                <th>Short Name</th>
+                <th>Code</th>
+                <th class="text-center">Action</th>
+            </tr>
+        </thead>
+        <tfoot class="table-light">
+            <tr>
+                <th>ID</th>
+                <th>Short Name</th>
+                <th>Code</th>
+                <th>Action</th>
+            </tr>
+        </tfoot>
+    </table>
+</div>
+
+@section Scripts {
+    <script>
+        const table = new DataTable('#tbCheckPointsPage', {
+                ajax: {
+                        url: "@Url.Page("./CheckPointsPage", "LoadCheckPoints")",
+                        type: "GET",
+                        dataSrc : "data"
+                },
+                columns: [
+                    { data: "id" },
+                    { data: "shortName" },
+                    { data: "code" },
+                    { data: null, render: function (data, type, row) {
+                        return `<button class="btn btn-primary edit-btn" data-id="${row.id}">Módosítás</button>
+                                <button class="btn btn-danger delete-btn" data-id="${row.id}">Törlés</button>
+                               `;
+                    }}
+                ],
+                columnDefs: [
+                    {
+                        "targets": 0,   
+                        "visible": false
+                    },
+                    {
+                        "targets": 3,
+                        "className": "text-center",
+                        "width": "15%"
+                    }
+                ],   
+      
+                processing:true
+        });
+        $('#tbCheckPointsPage').on('click', '.edit-btn', function ()
+        {
+            const row = table.row($(this).closest('tr')).data();
+            window.location.href = `@Url.Page("./CheckPointEditPage")?id=${row.id}`;
+        });
+        $('#tbCheckPointsPage').on('click', '.delete-btn', function ()
+        {
+            const row = table.row($(this).closest('tr')).data();
+            
+        });
+    </script>
+}
@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using WorkFlowCheck.Common.DTO;
+using WorkFlowCheck.Web.Services.Interfaces;
+
+namespace WorkFlowCheck.Web.Pages.BaseStock.CheckPoints
+{
+    public class CheckPointsPageModel : PageModel
+    {
+        private readonly ILogger<IndexModel> _logger;
+        private readonly IBaseStockService _baseStockService;
+        public CheckPointsPageModel(ILogger<IndexModel> logger, IBaseStockService baseStockService)
+        {
+            _logger = logger;
+            _baseStockService = baseStockService;
+        }
+        public void OnGet()
+        {
+        }
+        public async Task<JsonResult> OnGetLoadCheckPoints()
+        {
+            var results = await _baseStockService.GetAllCheckPoints();
+            return new JsonResult(new { data = results });
+        }
+
+    }
+}
@@ -7,12 +7,13 @@
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/WorkFlowCheck.Web.styles.css" asp-append-version="true" />
+    <link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.css" rel="stylesheet" integrity="sha384-6gM1RUmcWWtU9mNI98EhVNlLX1LDErxSDu2o/YRIeXq34o77tQYTXLzJ/JLBNkNV" crossorigin="anonymous">
 </head>
 <body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
-                <a class="navbar-brand" asp-area="" asp-page="/Index">WorkFlowCheck.Web</a>
+                <a class="navbar-brand" asp-area="" asp-page="/Index">Workflow Check Admin Site</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
@@ -22,6 +23,16 @@
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle text-dark" href="#" id="baseStockDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                Törzsadatok
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="baseStockDropdown">
+                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/CheckPoints/CheckPointsPage">Ellenőrzési pontok</a></li>
+                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/Almenu2">Almenü 2</a></li>
+                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/Almenu3">Almenü 3</a></li>
+                            </ul>
+                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
@@ -38,13 +49,16 @@

    <footer class="border-top footer text-muted">
        <div class="container">
-            &copy; 2025 - WorkFlowCheck.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
+            &copy; @DateTime.Now.Year - Workflow Check App - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n" crossorigin="anonymous"></script>
+    <script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.js" integrity="sha384-10kTwhFyUU637a6/7q0kLBdo8jQWjxteg63DT/K8Sdq/nCDaDAkH+Nq/MIrsp8wc" crossorigin="anonymous"></script>

    @await RenderSectionAsync("Scripts", required: false)
 </body>