PSTW_CentralizeSystem/Areas/Inventory/Views/Main/ManifacturerRegistration.cshtml

@{
    ViewData["Title"] = "Manufactures";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="app">
    <button id="addManufacturerBtn col-md-3 m-1" class="btn btn-success"><i class="fa fa-plus"></i>&nbsp;Add Manufacturer</button>
    <div class="row card">
        <div class="card-header">
        </div>
        <div class="card-body">
            <div v-if="loading">
                <div class="spinner-border text-info" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            <table class="table table-bordered table-hover table-striped" id="manufacturerTable"></table>
        </div>
    </div>
    <div class="modal fade" id="addManufacturerModal" tabindex="-1" role="dialog" aria-labelledby="addManufacturerModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addManufacturerModalLabel">Add Manufacturer</h5>
                    <button type="button" class="closeModal" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form v-on:submit.prevent="addManufacturer">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="manufacturerName">Manufacturer Name:</label>
                            <input type="text" class="form-control" id="manufacturerName" v-model="newManufacturer.manufacturerName" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary closeModal" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
<script>
    const app = Vue.createApp({
        data() {
            return {
                manufacturer: null,
                manufacturerDatatable: null,
                newManufacturer: {
                    manufacturerName: null,
                },
                loading: true,
            }

        },
        mounted() {
            // Fetch companies, depts, and products from the API
            this.fetchManufactures();
            this.initiateTable();
        },
        methods: {
            async fetchManufactures() {
                    fetch('/InvMainAPI/ManufacturerList', {
                        method: 'POST'
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);
                        if (data != null && data.length > 0) 
                        {
                            this.manufacturer = data;
                        }
                        if (!this.manufacturerDatatable) {
                            this.initiateTable();
                        } else {
                            this.fillTable(data);
                        }
                    })
                    .catch(error => {
                        console.error('There was a problem with the fetch operation:', error);
                    });

            },
            async initiateTable() {
                this.manufacturerDatatable = $('#manufacturerTable').DataTable({
                    "data": this.manufacturer,
                    "columns": [
                        {   "title": "Manufacturer Name", 
                            "data": "manufacturerName",
                        },
                        {   "title": "Delete", 
                            "data": "manufacturerName",
                                "render": function (data, type, full, meta) {
                                    var deleteButton = `<button type="button" class="btn btn-primary" @@click="deleteManufacturer(${manufacturerId})">Delete</button>`;
                                    return deleteButton;
                                }
                        },
                    ],
                })
                this.loading = false;
            },
            fillTable(data){
                if (!this.manufacturerDatatable) {
                    console.error("DataTable not initialized");
                    return;
                }
                this.manufacturerDatatable.clear();
                this.manufacturerDatatable.rows.add(data);
                this.manufacturerDatatable.draw();
                this.loading = false;
            },
            addManufacturer() {
                    this.loading = true;
                    const existingManufacturer = this.manufacturer != null ? this.manufacturer.find(m => m.manufacturerName.toLowerCase() === this.newManufacturer.manufacturerName.toLowerCase()) : null;
                    if (existingManufacturer) {
                        alert('Manufacturer already exists');
                        return;
                    }
                    fetch('/InvMainAPI/AddManufacturer', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.newManufacturer)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data != null && data.length > 0)
                        {
                            this.manufacturer = data;
                        }
                        this.fillTable(data);
                    })
                    .catch(error => {
                        console.error('There was a problem with the fetch operation:', error);
                    })
                    .finally(() => {
                        $('#preloader').modal('hide');
                        this.newManufacturer.manufacturerName = null;
                    });
            },
            deleteManufacturer(Id){
                console.log(Id)
            }
        }
    });

    $(function () {
        app.mount('#app');

        // Attach a click event listener to elements with the class 'btn-success'.
        $('#addManufacturerBtn').on('click', function () {
            // Show the modal with the ID 'addManufacturerModal'.
            $('#addManufacturerModal').modal('show');
        });
        $('.closeModal').on('click', function () {
            // Show the modal with the ID 'addManufacturerModal'.
            $('#addManufacturerModal').modal('hide');
        });
    });
</script>
}