PSTW_CentralizeSystem/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml

@{
    ViewData["Title"] = "Item Movement";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    @@font-face {
      font-family: 'OCR-A';
      src: url('../assets/fonts/ocraext.ttf');
    }

    .QrPrintFont {
      font-family: 'OCR-A', monospace;
    }
    .table td img {
        display: block !important;
    }
</style>
@await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartialUser.cshtml");

<div id="ItemMovement" class="row">
    <div class="row mb-3">
        <h2 for="sortSelect" class="col-sm-1 col-form-h2">Sort by:</h2>
        <div class="col-sm-4">
            <select id="sortSelect" class="form-control" v-model="sortBy" v-on:change="handleSorting">
                <option value="all">All</option>
                <option value="item">Item</option>
            </select>
        </div>
    </div>
    <div v-if="sortBy === 'all'">
        <div class="row card">
            <div class="card-header">
                <h2>Pending Item Movement</h2>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-hover table-striped no-wrap" id="itemMovementNotCompleteDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
            </div>
        </div>

        <div class="row card">
            <div class="card-header">
                <h2>Complete Item Movement</h2>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-hover table-striped no-wrap" id="itemMovementCompleteDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
            </div>
        </div>
    </div>

    <div v-if="sortBy === 'item'">
        <div v-for="(movements, itemId) in groupedByItem" :key="itemId" class="row card">
            <div class="card-header">
                <h2>Item ID: {{ itemId }}</h2>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-hover table-striped no-wrap item-table" :id="'itemTable_' + itemId" style="width:100%;border-style: solid; border-width: 1px"></table>
            </div>
        </div>
    </div>
</div>

@section Scripts {
@{
    await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
<script>
    $(function () {
        app.mount('#ItemMovement');
    });
    const app = Vue.createApp({
        data() {
            return {
                itemMovements: [],
                itemMovementCompleteDatatable : null,
                itemMovementNotCompleteDatatable : null,
                itemDatatables: {}, // Store tables by ItemId
                sortBy: 'all', // Sorting option
            }
        },
        computed: {
            groupedByItem() {
                return this.itemMovements.reduce((acc, movement) => {
                    if (!acc[movement.itemId]) {
                        acc[movement.itemId] = [];
                    }
                    acc[movement.itemId].push(movement);
                    return acc;
                }, {});
            },
        },
        mounted() {
            this.fetchItemMovement();
        },
        methods: {
            async fetchItemMovement() {
                try {
                        const response = await fetch('/InvMainAPI/ItemMovementUser', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json', 
                        }
                    });

                    if (!response.ok) {
                        throw new Error('Failed to fetch item movement');
                    }
                    this.itemMovements = await response.json();

                    if (this.itemMovementNotCompleteDatatable) {
                        this.itemMovementNotCompleteDatatable.clear().destroy();
                    }
                    if (this.itemMovementCompleteDatatable) {
                        this.itemMovementCompleteDatatable.clear().destroy();
                    }

                    this.renderTables();
                } 
                catch (error) {
                    console.error('Error fetching item:', error);
                }
            },

            renderTables() {
                if (this.sortBy === 'all') {
                    this.initAllTables();
                } else {
                    console.log(this.sortBy);
                    this.initItemTables();
                }
            },

            initAllTables() {
                if (this.itemMovementNotCompleteDatatable) {
                    this.itemMovementNotCompleteDatatable.clear().destroy();
                }
                if (this.itemMovementCompleteDatatable) {
                    this.itemMovementCompleteDatatable.clear().destroy();
                }
                self = this;
                this.itemMovementNotCompleteDatatable = $('#itemMovementNotCompleteDatatable').DataTable({
                    "data": this.itemMovements.filter(movement => movement.movementComplete == 0),
                    "columns": [
                        {
                            "title": "Unique Id",
                            "data": "id",
                            "createdCell": function (td, cellData, rowData, row, col) {
                                // Assign a unique ID to the <td> element
                                $(td).attr('id', `qr${cellData}`);
                            },
                        },
                        { title: "From User", data: "toUserName" },
                        { title: "Last User", data: "lastUserName" },
                        { title: "From Station", data: "toStationName" },
                        { title: "From Store", data: "toStoreName" },
                        { title: "Action", data: "action" },
                        { title: "Start Status", data: "toOther" },
                        { title: "Quantity", data: "quantity" },
                        { title: "Send Date", data: "sendDate" },
                        { title: "Note", data: "consignmentNote" },
                        { title: "Remark", data: "remark" },
                    ],
                    responsive: true,
                });

                this.itemMovementCompleteDatatable = $('#itemMovementCompleteDatatable').DataTable({
                    "data": this.itemMovements.filter(movement => movement.movementComplete == 1),
                    "columns": [
                        {
                            "title": "Unique Id",
                            "data": "id",
                            "createdCell": function (td, cellData, rowData, row, col) {
                                // Assign a unique ID to the <td> element
                                $(td).attr('id', `qr${cellData}`);
                            },
                        },
                        { "title": "From User", "data": "toUserName" },
                        { "title": "Last User", "data": "lastUserName" },
                        { "title": "From Station", "data": "toStationName" },
                        { "title": "Last Station", "data": "lastStationName" },
                        { "title": "From Store", "data": "toStoreName" },
                        { "title": "Last Store", "data": "lastStoreName" },
                        { "title": "Action", "data": "action" },
                        { "title": "Start Status", "data": "toOther" },
                        { "title": "Latest Status", "data": "latestStatus" },
                        { "title": "Qty", "data": "quantity" },
                        { "title": "Send Date", "data": "sendDate" },
                        { "title": "Receive Date", "data": "receiveDate" },
                        { "title": "Note", "data": "consignmentNote" },
                        { "title": "Remark", "data": "remark" },
                    ],
                    responsive: true,
                });
                this.loading = false;
            },

            initItemTables() {
                if (this.itemMovementNotCompleteDatatable) {
                    this.itemMovementNotCompleteDatatable.clear().destroy();
                }
                if (this.itemMovementCompleteDatatable) {
                    this.itemMovementCompleteDatatable.clear().destroy();
                }
                Object.values(this.itemDatatables).forEach(table => table.destroy());
                this.itemDatatables = {};

                Object.entries(this.groupedByItem).forEach(([itemId, movements]) => {
                    const tableId = `#itemTable_${itemId}`;

                    this.itemDatatables[itemId] = $(tableId).DataTable({
                        data: movements,
                        columns: this.getColumns(),
                        responsive: true,
                    });
                });
            },

            getColumns() {
                return [
                    { title: "Unique Id", data: "id" },
                    { title: "From User", data: "toUserName" },
                    { title: "Last User", data: "lastUserName" },
                    { title: "From Station", data: "toStationName" },
                    { title: "From Store", data: "toStoreName" },
                    { title: "Action", data: "action" },
                    { title: "Start Status", data: "toOther" },
                    { title: "Quantity", data: "quantity" },
                    { title: "Send Date", data: "sendDate" },
                    { title: "Note", data: "consignmentNote" },
                    { title: "Remark", data: "remark" },
                ];
            },

            resetForm() {
                this.itemMovement = '';
            },

            handleSorting() {
                // Destroy existing DataTables before switching views
                if (this.itemMovementNotCompleteDatatable) {
                    this.itemMovementNotCompleteDatatable.clear().destroy();
                    this.itemMovementNotCompleteDatatable = null;
                }
                if (this.itemMovementCompleteDatatable) {
                    this.itemMovementCompleteDatatable.clear().destroy();
                    this.itemMovementCompleteDatatable = null;
                }
                Object.values(this.itemDatatables).forEach(table => table.destroy());
                this.itemDatatables = {};

                // Delay rendering to ensure Vue updates the DOM
                this.$nextTick(() => {
                    this.renderTables();
                });
            },


        },
    });
</script>
}