fix structure product categories table and crud product

2025-06-02 16:21:33 +07:00
parent 59e23ae535
commit 6bf8bc4965
21 changed files with 573 additions and 141 deletions
--- a/resources/js/warehouse_management/product_categories/index.js
+++ b/resources/js/warehouse_management/product_categories/index.js
@@ -10,13 +10,8 @@ let table = $("#product-categories-table").DataTable({
    serverSide: true,
    ajax: url,
    columns: [
-        {
-            data: "DT_RowIndex",
-            name: "DT_RowIndex",
-            orderable: false,
-            searchable: false,
-        },
        { data: "name", name: "name" },
+        { data: "parent", name: "parent" },
        { data: "action", name: "action", orderable: false, searchable: false },
    ],
 });
@@ -27,6 +22,7 @@ $(document).ready(function () {
        $("#category_id").val("");
        $("#modalTitle").text("Tambah Kategori");
        $("#productCategoryModal").modal("show");
+        loadParentCategories();
    });

    // Submit form (baik tambah maupun edit)
@@ -67,6 +63,26 @@ $(document).on("click", ".btn-edit-product-category", function () {
        success: function (response) {
            $("#category_id").val(response.id);
            $("#name").val(response.name);
+            // Get parent categories and populate select
+            $.ajax({
+                url: "/warehouse/categories/parents", // Adjust to match your route
+                method: "GET",
+                success: function (parents) {
+                    let options =
+                        '<option value="">-- Tidak ada (Parent)</option>';
+                    parents.forEach(function (parent) {
+                        // Avoid self-select
+                        if (parent.id !== response.id) {
+                            options += `<option value="${parent.id}" ${
+                                response.parent_id === parent.id
+                                    ? "selected"
+                                    : ""
+                            }>${parent.name}</option>`;
+                        }
+                    });
+                    $("#parent_id").html(options);
+                },
+            });
            $("#modalTitle").text("Edit Kategori");
            $("#productCategoryModal").modal("show");
        },
@@ -107,3 +123,24 @@ $(document).on("click", ".btn-destroy-product-category", function () {
        }
    });
 });
+
+function loadParentCategories(selectedId = null) {
+    $.ajax({
+        url: "/warehouse/categories/parents", // create this route
+        type: "GET",
+        success: function (data) {
+            $("#parent_id")
+                .empty()
+                .append(
+                    '<option value="">-- Tidak ada (Kategori Utama) --</option>'
+                );
+            data.forEach(function (category) {
+                $("#parent_id").append(
+                    `<option value="${category.id}" ${
+                        selectedId == category.id ? "selected" : ""
+                    }>${category.name}</option>`
+                );
+            });
+        },
+    });
+}
--- a/resources/js/warehouse_management/products/create.js
+++ b/resources/js/warehouse_management/products/create.js
@@ -0,0 +1,43 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const addBtn = document.getElementById("addDealerRow");
+    const dealerRows = document.getElementById("dynamicDealerRows");
+
+    // Get dealer data from Blade
+    const dealerDataDiv = document.getElementById("dealerData");
+    const dealers = JSON.parse(dealerDataDiv.getAttribute("data-dealers")); // 👈 this reads JSON from Blade
+
+    let rowCount = 0;
+
+    function createDealerRow(index) {
+        const dealerOptions = dealers
+            .map((d) => `<option value="${d.id}">${d.name}</option>`)
+            .join("");
+        return `
+          <div class="form-group row align-items-center dealer-row" data-index="${index}">
+              <div class="col-md-5">
+                  <select name="dealer_stock[${index}][dealer_id]" class="form-control" required>
+                      <option value="">-- Pilih Dealer --</option>
+                      ${dealerOptions}
+                  </select>
+              </div>
+              <div class="col-md-4">
+                  <input type="number" name="dealer_stock[${index}][quantity]" class="form-control" value="1" min="1" required>
+              </div>
+              <div class="col-md-3">
+                  <button type="button" class="btn btn-danger btn-sm removeDealerRow">Hapus</button>
+              </div>
+          </div>
+      `;
+    }
+
+    addBtn.addEventListener("click", function () {
+        dealerRows.insertAdjacentHTML("beforeend", createDealerRow(rowCount));
+        rowCount++;
+    });
+
+    dealerRows.addEventListener("click", function (e) {
+        if (e.target.classList.contains("removeDealerRow")) {
+            e.target.closest(".dealer-row").remove();
+        }
+    });
+});
--- a/resources/js/warehouse_management/products/edit.js
+++ b/resources/js/warehouse_management/products/edit.js
@@ -0,0 +1,48 @@
+document.addEventListener("DOMContentLoaded", function () {
+    let dealerRowContainer = document.getElementById("dynamicDealerRows");
+    let addDealerButton = document.getElementById("addDealerRow");
+
+    // Initial index from existing dealer rows
+    let rowIndex =
+        dealerRowContainer.querySelectorAll(".dealer-stock-row").length;
+
+    addDealerButton.addEventListener("click", function () {
+        const newRow = document.createElement("div");
+        newRow.className = "form-group row align-items-center dealer-stock-row";
+        newRow.innerHTML = `
+          <div class="col-md-6">
+              <select name="dealer_stock[${rowIndex}][dealer_id]" class="form-control">
+                  <option value="">-- Pilih Dealer --</option>
+                  ${generateDealerOptions()}
+              </select>
+          </div>
+          <div class="col-md-4">
+              <input type="number" name="dealer_stock[${rowIndex}][quantity]" class="form-control" value="1" min="1" required placeholder="Jumlah Stok" />
+          </div>
+          <div class="col-md-2">
+              <button type="button" class="btn btn-danger btn-sm remove-dealer-row"> Hapus </button>
+          </div>
+      `;
+        dealerRowContainer.appendChild(newRow);
+        rowIndex++;
+    });
+
+    // Handle removal of dealer row
+    dealerRowContainer.addEventListener("click", function (event) {
+        if (
+            event.target &&
+            event.target.classList.contains("remove-dealer-row")
+        ) {
+            event.target.closest(".dealer-stock-row").remove();
+        }
+    });
+
+    // Function to generate dealer <option> elements dynamically
+    function generateDealerOptions() {
+        const dealerDataDiv = document.getElementById("dealerData");
+        const dealers = JSON.parse(dealerDataDiv.getAttribute("data-dealers"));
+        return dealers
+            .map((d) => `<option value="${d.id}">${d.name}</option>`)
+            .join("");
+    }
+});
--- a/resources/js/warehouse_management/products/index.js
+++ b/resources/js/warehouse_management/products/index.js
@@ -10,12 +10,6 @@ let table = $("#products-table").DataTable({
    serverSide: true,
    ajax: url,
    columns: [
-        {
-            data: "DT_RowIndex",
-            name: "DT_RowIndex",
-            orderable: false,
-            searchable: false,
-        },
        { data: "code", name: "code" },
        { data: "name", name: "name" },
        { data: "category_name", name: "category.name" },
@@ -24,65 +18,9 @@ let table = $("#products-table").DataTable({
    ],
 });

-$(document).ready(function () {
-    $("#addProductCategory").click(function () {
-        $("#productCategoryForm")[0].reset();
-        $("#category_id").val("");
-        $("#modalTitle").text("Tambah Kategori");
-        $("#productCategoryModal").modal("show");
-    });
-
-    // Submit form (baik tambah maupun edit)
-    $("#productCategoryForm").submit(function (e) {
-        e.preventDefault();
-
-        let id = $("#category_id").val();
-        let url = id
-            ? `/warehouse/product_categories/${id}`
-            : `/warehouse/product_categories`;
-        let method = id ? "PUT" : "POST";
-
-        $.ajax({
-            url: url,
-            method: method,
-            data: {
-                name: $("#name").val(),
-                _token: $('meta[name="csrf-token"]').attr("content"),
-                ...(id && { _method: "PUT" }),
-            },
-            success: function () {
-                $("#productCategoryModal").modal("hide");
-                $("#product-categories-table").DataTable().ajax.reload();
-            },
-            error: function (xhr) {
-                alert("Gagal menyimpan data");
-                console.error(xhr.responseText);
-            },
-        });
-    });
-});
-$(document).on("click", ".btn-edit-product-category", function () {
-    const id = $(this).data("id");
-    const url = $(this).data("url");
-    $.ajax({
-        url: url,
-        method: "GET",
-        success: function (response) {
-            $("#category_id").val(response.id);
-            $("#name").val(response.name);
-            $("#modalTitle").text("Edit Kategori");
-            $("#productCategoryModal").modal("show");
-        },
-        error: function (xhr) {
-            alert("Gagal mengambil data");
-            console.error(xhr.responseText);
-        },
-    });
-});
-
-$(document).on("click", ".btn-destroy-product-category", function () {
+$(document).on("click", ".btn-destroy-product", function () {
    Swal.fire({
-        title: "Hapus nama kategori?",
+        title: "Hapus produk?",
        text: "Anda tidak akan bisa mengembalikannya!",
        showCancelButton: true,
        confirmButtonColor: "#d33",
@@ -99,11 +37,11 @@ $(document).on("click", ".btn-destroy-product-category", function () {
                    _token: $('meta[name="csrf-token"]').attr("content"),
                },
                success: function () {
-                    alert("Kategori berhasil dihapus.");
-                    $("#product-categories-table").DataTable().ajax.reload();
+                    alert("Produk berhasil dihapus.");
+                    $("#products-table").DataTable().ajax.reload();
                },
                error: function (xhr) {
-                    alert("Gagal menghapus kategori.");
+                    alert("Gagal menghapus produk.");
                    console.error(xhr.responseText);
                },
            });
--- a/resources/views/warehouse_management/product_categories/index.blade.php
+++ b/resources/views/warehouse_management/product_categories/index.blade.php
@@ -8,7 +8,7 @@
              <i class="kt-font-brand flaticon2-line-chart"></i>
          </span>
          <h3 class="kt-portlet__head-title">
-              Kategori Produk
+              Tabel Kategori Produk
          </h3>
      </div>
      @can('create', $menus['product_categories.index'])
@@ -28,8 +28,8 @@
          <table class="table table-striped table-bordered table-hover" id="product-categories-table" data-url="{{ route("product_categories.index") }}">
            <thead>
                <tr>
-                    <th>NO</th>
                    <th>Nama Kategori</th>
+                    <th>Parent</th>
                    <th>Aksi</th>
                </tr>
            </thead>
@@ -51,11 +51,18 @@
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
-            <input type="hidden" id="category_id">
+            <input type="hidden" id="category_id" name="id">
            <div class="mb-3">
              <label for="name" class="form-label">Nama Kategori</label>
              <input type="text" class="form-control" id="name" name="name" required>
            </div>
+            <div class="mb-3">
+              <label for="parent_id" class="form-label">Induk Kategori (Opsional)</label>
+              <select class="form-control" id="parent_id" name="parent_id">
+                <option value="">-- Tidak ada (Kategori Utama) --</option>
+                <!-- will be filled by JavaScript -->
+              </select>
+            </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary" id="saveBtn">Simpan</button>
@@ -64,7 +71,6 @@
    </form>
  </div>
 </div>
-
 {{-- end modal --}}
@endsection

--- a/resources/views/warehouse_management/products/create.blade.php
+++ b/resources/views/warehouse_management/products/create.blade.php
@@ -1,37 +1,73 @@
@extends('layouts.backapp')

@section('content')
-<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
-  <div class="kt-portlet__head kt-portlet__head--lg">
-      <div class="kt-portlet__head-label">
-          <span class="kt-portlet__head-icon">
-              <i class="kt-font-brand flaticon2-line-chart"></i>
-          </span>
-          <h3 class="kt-portlet__head-title">
-              Tambah Produk
-          </h3>
-      </div>
-  </div>
-
-  <div class="kt-portlet__body">
-    <div class="">
-
+<div class="kt-portlet kt-portlet--mobile">
+    <div class="kt-portlet__head kt-portlet__head--lg">
+        <div class="kt-portlet__head-label">
+            <span class="kt-portlet__head-icon">
+                <i class="kt-font-brand flaticon2-line-chart"></i>
+            </span>
+            <h3 class="kt-portlet__head-title">Tambah Produk</h3>
+        </div>
+    </div>
+
+    <div class="kt-portlet__body">
+        <form action="{{ route('products.store') }}" method="POST" id="productForm">
+            @csrf
+
+            {{-- Product Info --}}
+            <div class="form-group">
+                <label for="code"><strong>Kode Produk</strong></label>
+                <input type="text" name="code" id="code" class="form-control" required>
+            </div>
+
+            <div class="form-group">
+                <label for="name"><strong>Nama Produk</strong></label>
+                <input type="text" name="name" id="name" class="form-control" required>
+            </div>
+
+            <div class="form-group">
+                <label for="description"><strong>Deskripsi</strong></label>
+                <textarea name="description" id="description" class="form-control" rows="3"></textarea>
+            </div>
+
+            {{-- Product Category --}}
+            <div class="form-group">
+                <label for="product_category_id"><strong>Kategori Produk</strong></label>
+                <select name="product_category_id" id="product_category_id" class="form-control" required>
+                    <option value="">-- Pilih Kategori --</option>
+                    @foreach ($categories as $category)
+                        <option value="{{ $category->id }}" disabled style="background-color: #f0f0f0;">
+                            {{ $category->name }}
+                        </option>
+                        @foreach ($category->children as $child)
+                            <option value="{{ $child->id }}">&nbsp;&nbsp;&nbsp;{{ $child->name }}</option>
+                        @endforeach
+                    @endforeach
+                </select>
+            </div>
+
+            {{-- Dynamic Dealer Stock Section --}}
+            <div id="dealerData" data-dealers='@json($dealers)'></div>
+            <div class="form-group">
+                <label><strong>Stok per Dealer</strong></label>
+                <div id="dynamicDealerRows"></div>
+
+                <button type="button" id="addDealerRow" class="btn btn-outline-primary mt-2">
+                    ➕ Tambah Dealer
+                </button>
+            </div>
+
+            {{-- Submit --}}
+            <div class="form-group mt-4">
+                <button type="submit" class="btn btn-primary">Simpan</button>
+                <a href="{{ route('products.index') }}" class="btn btn-secondary">Batal</a>
+            </div>
+        </form>
    </div>
-      <div class="table-responsive">
-          <!--begin: Datatable -->
-          <table class="table table-striped table-bordered table-hover" id="stock-dealers-table" data-url="{{ route("products.index") }}">
-            <thead>
-                <tr>
-                    <th>NO</th>
-                    <th>Kode</th>
-                    <th>Nama</th>
-                    <th>Address</th>
-                    <th>Stok</th>
-                </tr>
-            </thead>
-          </table>
-          <!--end: Datatable -->
-      </div>
-  </div>
 </div>
+@endsection
+
+@section('javascripts')
+<script src="{{ mix('js/warehouse_management/products/create.js') }}"></script>
@endsection
--- a/resources/views/warehouse_management/products/edit.blade.php
+++ b/resources/views/warehouse_management/products/edit.blade.php
@@ -0,0 +1,95 @@
+@extends('layouts.backapp')
+
+@section('content')
+<div class="kt-portlet kt-portlet--mobile">
+    <div class="kt-portlet__head kt-portlet__head--lg">
+        <div class="kt-portlet__head-label">
+            <span class="kt-portlet__head-icon">
+                <i class="kt-font-brand flaticon2-line-chart"></i>
+            </span>
+            <h3 class="kt-portlet__head-title">Tambah Produk</h3>
+        </div>
+    </div>
+
+    <div class="kt-portlet__body">
+      <form action="{{ route('products.update', $product->id) }}" method="POST" id="productForm">
+        @csrf
+        @method('PUT') {{-- Correctly spoof PUT method --}}
+
+        {{-- Product Info --}}
+        <div class="form-group">
+          <label for="code"><strong>Kode Produk</strong></label>
+          <input type="text" name="code" id="code" class="form-control" value="{{ old('code', $product->code) }}" required>
+        </div>
+
+        <div class="form-group">
+          <label for="name"><strong>Nama Produk</strong></label>
+          <input type="text" name="name" id="name" class="form-control" value="{{ old('name', $product->name) }}" required>
+        </div>
+
+        <div class="form-group">
+          <label for="description"><strong>Deskripsi</strong></label>
+          <textarea name="description" id="description" class="form-control" rows="3">{{ old('description', $product->description) }}</textarea>
+        </div>
+
+        {{-- Product Category --}}
+        <div class="form-group">
+          <label for="product_category_id"><strong>Kategori Produk</strong></label>
+          <select name="product_category_id" id="product_category_id" class="form-control" required>
+            <option value="">-- Pilih Kategori --</option>
+            @foreach ($categories as $category)
+              <option value="{{ $category->id }}" disabled style="background-color: #f0f0f0;">
+                {{ $category->name }}
+              </option>
+              @foreach ($category->children as $child)
+                <option value="{{ $child->id }}" {{ $child->id == old('product_category_id', $product->product_category_id) ? 'selected' : '' }}>
+                  &nbsp;&nbsp;&nbsp;{{ $child->name }}
+                </option>
+              @endforeach
+            @endforeach
+          </select>
+        </div>
+
+        {{-- Stok per Dealer --}}
+        <div id="dealerData" data-dealers='@json($dealers)'></div>
+        <div class="form-group">
+          <label><strong>Stok per Dealer</strong></label>
+          <div id="dynamicDealerRows">
+            @foreach($product->dealers as $index => $dealer)
+              <div class="form-group row align-items-center dealer-stock-row">
+                <div class="col-md-6">
+                  <select name="dealer_stock[{{ $index }}][dealer_id]" class="form-control">
+                    <option value="">-- Pilih Dealer --</option>
+                    @foreach ($dealers as $d)
+                      <option value="{{ $d->id }}" {{ $d->id == $dealer->id ? 'selected' : '' }}>
+                        {{ $d->name }}
+                      </option>
+                    @endforeach
+                  </select>
+                </div>
+                <div class="col-md-4">
+                    <input type="number" name="dealer_stock[{{ $index }}][quantity]" value="{{ $dealer->pivot->quantity }}" class="form-control" placeholder="Jumlah Stok" />
+                </div>
+                <div class="col-md-2">
+                  <button type="button" class="btn btn-danger btn-sm remove-dealer-row">Hapus</button>
+                </div>
+              </div>
+            @endforeach
+          </div>
+
+          <button type="button" id="addDealerRow" class="btn btn-outline-primary mt-2">➕ Tambah Dealer</button>
+        </div>
+
+        {{-- Submit --}}
+        <div class="form-group mt-4">
+          <button type="submit" class="btn btn-primary">Simpan</button>
+          <a href="{{ route('products.index') }}" class="btn btn-secondary">Batal</a>
+        </div>
+      </form>
+    </div>
+</div>
+@endsection
+
+@section('javascripts')
+<script src="{{ mix('js/warehouse_management/products/edit.js') }}"></script>
+@endsection
--- a/resources/views/warehouse_management/products/index.blade.php
+++ b/resources/views/warehouse_management/products/index.blade.php
@@ -8,14 +8,14 @@
              <i class="kt-font-brand flaticon2-line-chart"></i>
          </span>
          <h3 class="kt-portlet__head-title">
-              Produk
+              Tabel Produk
          </h3>
      </div>
      @can('create', $menus['product_categories.index'])
      <div class="kt-portlet__head-toolbar">
          <div class="kt-portlet__head-wrapper">
              <div class="kt-portlet__head-actions">
-                  <button type="button" class="btn btn-bold btn-label-brand btn-sm" id="addProductCategory"> Tambah </button>
+                  <a href="{{ route('products.create') }}" class="btn btn-bold btn-label-brand btn--sm">Tambah</a>
              </div>
          </div>
      </div>
@@ -28,7 +28,6 @@
          <table class="table table-striped table-bordered table-hover" id="products-table" data-url="{{ route("products.index") }}">
            <thead>
                <tr>
-                    <th>NO</th>
                    <th>Kode</th>
                    <th>Nama</th>
                    <th>Kategori</th>