move report info to header

edit-mode/function/reportActivity.js

@@ -74,7 +74,38 @@ $(document).ready(function () {
         }
     });
 
-    var tableRa = $("#table_report").DataTable({
+	var tableRa = $("#table_report").on('xhr.dt', function(e, settings, json, xhr){
+		$('#report-activity-information-status').attr("class", "");
+		if(json?.data?.length > 0) {
+			let firstData = json.data[0];
+			const statusReport = firstData.status_activity;
+			let reportStartDate = firstData.start_activity ?? "-";
+			reportStartDate = reportStartDate.split(" ")[0];
+			let reportFinishDate = firstData.finish_activity ?? "-";
+			reportFinishDate = reportFinishDate.split(" ")[0];
+
+
+			if(statusReport == 'on-progress') {
+				$('#report-activity-information-status').attr("class", "badge badge-warning");
+			} else if(statusReport == 'done') {
+				$('#report-activity-information-status').attr("class", "badge badge-success");
+			} else if(statusReport == 'open') {
+				$('#report-activity-information-status').attr("class", "badge badge-primary");
+			}
+
+			if(moment(reportStartDate, "YYYY-MM-DD",true).isValid()){
+				reportStartDate = moment(reportStartDate, "YYYY-MM-DD").format("DD-MM-YYYY");
+			}
+
+			if(moment(reportFinishDate, "YYYY-MM-DD",true).isValid()){
+				reportFinishDate = moment(reportFinishDate, "YYYY-MM-DD").format("DD-MM-YYYY");
+			}
+
+			$("#report-activity-information-status").text(statusReport ?? "-");
+			$("#report-activity-information-start").text(reportStartDate);
+			$("#report-activity-information-end").text(reportFinishDate);
+		}
+	}).DataTable({
         "processing": true,
         "serverSide": true,
         "ajax": {
@@ -87,6 +118,7 @@ $(document).ready(function () {
             { data: 'material_name', name: 'material_name' },
             {
                 data: 'qty_planning', render: function (data, type) {
+					console.log("render", [data, type]);
                     return data ? formatRupiah(data) : '-'
                 }
             },
@@ -99,28 +131,22 @@ $(document).ready(function () {
                 }
             },
             { data: 'uom', name: 'uom' },
-            {
-                data: 'start_activity', render: function (data, type) {
-                    console.log("start", data)
-                    return data ? formatDate(data) : '-'
-                }
-            },
-            {
-                data: 'finish_activity', render: function (data, type) {
-                    console.log("finish", data)
-                    return data ? formatDate(data) : '-'
-                }
-            },
-            {
-                data: 'status_activity', render: function (data, type) {
-                    console.log("status", data)
-                    const val = !data ? '-' :
-                        data == "done" ? `<span class="badge badge-success">${data}</span>` :
-                            data == "open" ? `<span class="badge badge-primary">${data}</span>` :
-                                `<span class="badge badge-warning">${data}</span>`
-                    return val
-                }
-            },
+            // {
+            //     data: 'start_activity', render: function (data, type) {
+            //         return data ? formatDate(data) : '-'
+            //     }
+            // },
+            // {
+            //     data: 'finish_activity', render: function (data, type) {
+            //         return data ? formatDate(data) : '-'
+            //     }
+            // },
+            // {
+            //     data: 'status_activity', render: function (data, type) {
+            //         console.log("status", data)
+            //         return val
+            //     }
+            // },
             {
                 data: 'action',
                 name: 'action',
@@ -130,6 +156,7 @@ $(document).ready(function () {
         ]
     });
 
+
     var tableRaMaterialActual = $("#table_activity_material_actual").DataTable({
         "processing": true,
         "serverSide": true,

edit-mode/index.html

@@ -542,8 +542,6 @@
 						<button id="show_form_ra" type="button" class="success btn btn-success btn-sm btn-update-status"
 							data-toggle="tooltip" title="Input Update Status" data-placement="top" aria-hidden="true"><i
 								class="fa fa-cog" aria-hidden="true"></i></button>
-						<!-- <button id="hide_form_ra" type="button" class="elm-hide btn btn-primary btn-sm"><i class="fa fa-chevron-up"
-								aria-hidden="true"></i></button> -->
 					</div>
 				</div>
 				<div class="modal-body">
@@ -554,7 +552,6 @@
 						<div class="form-row">
 							<div class="col-md-4 form-group">
 								<label>Status</label>
-								<!-- <input type="date" id="ra_date" name="report_date" class="form-control form-control-sm" required /> -->
 								<select class="form-control" name="status_activity" id="ra_select_status">
 									<option value="">Select Status --</option>
 									<option value="open">Open</option>
@@ -583,6 +580,20 @@
 						<hr />
 					</form>
 
+					<div id="report-activity-information">
+						<h5>Activity Status Information</h5>
+						<p style="margin-bottom:2px">
+							<span>Status</span> : <span id="report-activity-information-status">-</span>
+						</p>
+						<p style="margin-bottom:2px">
+							<span>Start Activity</span> : <span id="report-activity-information-start">-</span>
+						</p>
+						<p style="margin-bottom:2px">
+							<span>End Activity</span> : <span id="report-activity-information-end">-</span>
+						</p>
+						<hr/>
+					</div>
+
 					<div class="table-responsive">
 						<table id="table_report" class="table table-sm" style="width: 100%;">
 							<thead>
@@ -591,9 +602,6 @@
 									<th scope="col">Volume Kumulatif Plan</th>
 									<th scope="col">Volume Kumulatif Aktual</th>
 									<th scope="col">UOM</th>
-									<th scope="col">Start Activity</th>
-									<th scope="col">Finish Activity</th>
-									<th scope="col">Status</th>
 									<th scope="col">Aksi</th>
 								</tr>
 							</thead>