File: /var/www/html/nt/application/views/admin/module/list.php
<div class="app-content p-3">
<?php if ($this->session->flashdata('success')) : ?>
<span class="alert alert-success">
<a href="" class="close" data-dismiss="alert" aria-label="close" title="close" style="position: absolute;right: 15px;font-size: 30px;color: red;top: 5px;">×</a>
<?php echo $this->session->flashdata('success') ?>
</span>
<?php endif ?>
<?php if ($this->session->flashdata('error')) : ?>
<span class="alert alert-danger">
<a href="" class="close" data-dismiss="alert" aria-label="close" title="close" style="position: absolute;right: 15px;font-size: 30px;color: red;top: 5px;">×</a>
<?php echo $this->session->flashdata('error') ?>
</span>
<?php endif ?>
<div class="container-xl px-0">
<div class="row g-3 mb-4 align-items-center justify-content-between">
<div class="col-auto">
<h1 class="app-page-title mb-0">List of Module (for Lease Agreement)</h1>
</div>
<div class="col-auto">
<div class="page-utilities">
<div class="row g-2 justify-content-start justify-content-md-end align-items-center">
<!--<div class="col-auto">
<form class="table-search-form row gx-1 align-items-center">
<div class="col-auto">
<input type="text" id="search-orders" name="searchorders" class="form-control search-orders" placeholder="Search">
</div>
<div class="col-auto">
<select class="form-select w-auto">
<option selected value="option-1">All</option>
<option value="option-2">Active</option>
<option value="option-3">Inactive</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn app-btn-secondary">Search</button>
</div>
</form>
</div>-->
<!--//col-->
<div class="col-auto">
<a class="btn app-btn-primary" href="<?php echo base_url('admin/module/add');?>">
Add New Module
</a>
</div>
</div>
<!--//row-->
</div>
<!--//table-utilities-->
</div>
<!--//col-auto-->
</div>
<!--//row-->
<!--<div class="app-card app-card-settings shadow-sm p-4 mb-4">
<div class="app-card-body">
<form class="settings-form">
<div class="row g-3">
<div class="col-sm-12 col-md-6 mb-3">
<label for="industrialPark" class="form-label">Industrial Park <span class="text-red">*</span></label>
<select id="industrialPark" class="form-select">
<option value="" selected disabled>Select Industrial Park</option>
<?php foreach ($industrial_parks as $park): ?>
<option value="<?php echo $park['industrial_park_id']; ?>"><?php echo $park['park_name']; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="col-sm-12 col-md-6 mb-3">
<label for="" class="form-label">Status <span class="text-red">*</span></label>
<select id="" class="form-select">
<option selected="" value="0">All</option>
<option value="2">Active Agreement </option>
<option value="1">Vacant</option>
</select>
</div>
</div>
</form>
</div>
</div>-->
<div class="row g-3 mb-4 align-items-center justify-content-between">
<div class="col-auto">
<a class="btn app-btn-primary" href="#" id="downloadExcel">
Download Excel
</a>
</div>
<div class="col-auto">
<form class="table-search-form row gx-1 align-items-center">
<div class="col-auto">
<input type="text" id="searchorders" name="searchorders" class="form-control search-orders" placeholder="Search module">
</div>
</form>
</div>
</div>
<!--//row-->
<div class="app-card app-card-orders-table shadow-sm mb-5">
<div class="app-card-body">
<div class="table-responsive">
<table id="moduleTable" class="table app-table-hover mb-0 text-left">
<thead>
<tr>
<th class="cell">Industrial Park</th>
<th class="cell">module No.</th>
<th class="cell">Area</th>
<th class="cell">Present Status</th>
<th class="cell">Active/Inactive</th>
<th class="cell notExport">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--//table-responsive-->
</div>
<!--//app-card-body-->
</div>
</div>
<!--//container-fluid-->
</div>
<div class="modal fade" id="moduleviewModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">View Module (for Lease Agreement)</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="app-content p-3">
<div class="container-xl">
<div class="col-md-12 text-end">
<a class="btn app-btn-primary edit-module-btn" data-id="" href="">EDIT</a>
</div>
<div class="app-card app-card-settings shadow-sm p-4">
<div class="app-card-body">
<form class="settings-form">
<div class="row g-3">
<div class="col-sm-12 col-md-12 mb-3">
<label for="" class="form-label">Industrial Park <span class="text-red">*</span></label>
<input type="text" class="form-control" id="industrialParkName" required="" readonly>
</div>
</div>
<div class="row g-3">
<div class="col-sm-12 col-md-5 mb-3">
<label for="" class="form-label">Insert module / Ref No. <span class="text-red">*</span></label>
<input type="text" class="form-control" id="moduleRefNo" required="" readonly>
</div>
<div class="col-sm-12 col-md-5 mb-3">
<label for="" class="form-label">Insert Total Area <span class="text-red">*</span></label>
<input type="text" class="form-control" id="totalArea" required="" readonly>
</div>
<div class="col-sm-12 col-md-2 mb-3">
<label for="" class="form-label">UOM</label>
<input type="text" class="form-control" id="uom" required="" readonly>
</div>
</div>
<div class="row g-3">
<div class="col-sm-12 col-md-12 mb-3">
<label for="" class="form-label">Description (Not Mandatory)</label>
<textarea name="description" cols="0" rows="5" class="form-control" id="description" value="Description (Not Mandatory)" readonly></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn app-btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- DataTables Buttons CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
<!-- DataTables Buttons JS -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script>
$(document).ready(function () {
var today = new Date();
// Initialize DataTable
var table = $('#moduleTable').DataTable({
"ajax": {
"url": "<?php echo base_url('admin/module/getmoduleData'); ?>",
"dataSrc": ""
},
"columns": [
{ "data": "park_name" },
{ "data": "module_ref_no" },
{ "data": "total_area" },
{
"data": "status_text",
"render": function (data, type, row) {
return data;
}
},
{
"data": "is_active", // Add the column for Active/Inactive
"render": function (data, type, row) {
return data == 1 ? 'Active' : 'Inactive'; // Render 'Active' if data is 1, otherwise 'Inactive'
}
},
{
"data": null,
"render": function (data, type, row) {
return '<a class="btn-sm app-btn-secondary view-details-btn" href="#" data-bs-toggle="modal" data-bs-target="#moduleviewModal" data-module-id="' + row.module_id + '">View Details</a>';
},
"orderable": false, // Disable sorting for action column
"searchable": false // Disable searching for action column
}
],
"buttons": [
{
extend: 'excel',
text: 'Download Excel',
className: 'btn app-btn-primary',
'filename': 'module_data_'+ today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate()+'_'+today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(),
exportOptions: {
columns: ':not(.notExport)' // Exclude columns with class "notExport" from export
}
}
]
});
// Hide the default search box
$('.dataTables_wrapper .dataTables_filter').hide();
// Handle custom search functionality
$('#searchorders').on('keyup', function () {
var searchText = $(this).val().toLowerCase();
table.search(searchText).draw(); // Trigger DataTable search manually
});
// Handle click event for download button
$('#downloadExcel').on('click', function () {
table.button('.buttons-excel').trigger();
});
// Event listener for "View Details" button click
$('#moduleTable').on('click', '.view-details-btn', function() {
var moduleHeaderId = $(this).data('module-id');
// AJAX request to fetch data based on module_header_id
$.ajax({
"url": "<?php echo base_url('admin/module/getmoduleDetails'); ?>",
method: 'GET',
data: { module_id: moduleHeaderId },
success: function(response) {
// Populate moduleviewModal with retrieved data
populatemoduleviewModal(response);
},
error: function(xhr, status, error) {
// Handle error
}
});
// Event listener for "EDIT" button click
$('.edit-module-btn').on('click', function(e) {
e.preventDefault();
// Get the module_header_id from the data attribute
var moduleHeaderId = $(this).data('id');
// Construct the URL for editing based on the module_header_id
var editUrl = "<?php echo base_url('admin/module/edit/'); ?>" + moduleHeaderId;
// Redirect to the edit URL
window.location.href = editUrl;
});
});
// Function to populate moduleviewModal with data
function populatemoduleviewModal(response) {
// Bind industrial park name
$('#industrialParkName').val(response.park_name);
$('#moduleRefNo').val(response.module_ref_no);
$('#totalArea').val(response.total_area);
$('#uom').val(response.uom_name);
$('#description').val(response.description);
$('.edit-module-btn').attr('data-id', response.module_id);
// Show the moduleviewModal
$('#moduleviewModal').modal('show');
}
});
</script>