updated

src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue

@@ -115,7 +115,9 @@ async function getDataComplaint() {
       dataComplaints.id = dataList.id;
       dataComplaints.respondentType = dataList.respondentType;
       dataComplaints.organizationId = dataList.organizationId;
+      dataComplaints.organization = dataList.organization;
       dataComplaints.consideredAgency = dataList.consideredAgency;
+      dataComplaints.consideredAgencyId = dataList.consideredAgencyId;
       dataComplaints.title = dataList.title;
       dataComplaints.description = dataList.description;
       dataComplaints.dateReceived = dataList.dateReceived;
@@ -148,6 +150,7 @@ function getData() {
       data.idComplaint = dataList.idComplaint;
       data.respondentType = dataList.respondentType;
       data.organizationId = dataList.organizationId;
+      data.organization = dataList.organization;
       data.persons = dataList.persons;
       data.investigationDetail = dataList.investigationDetail;
       data.investigationDetailOther = dataList.investigationDetailOther;

src/modules/11_discipline/components/2_InvestigateFacts/Form.vue

@@ -20,6 +20,7 @@ import type { FormData } from "@/modules/11_discipline/interface/request/investi
 
 import config from "@/app.config";
 import http from "@/plugins/http";
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -113,6 +114,7 @@ const formData = reactive<FormData>({
   documentFile: null,
   respondentType: "",
   organizationId: "",
+  organization: "",
   persons: [],
   investigationExtendHistory: [],
   isDisciplinary: false,
@@ -168,12 +170,14 @@ function onSubmit() {
     if (mainStore.rowsAdd) {
       formData.persons = mainStore.rowsAdd;
     }
+
     props.onSubmit(formData);
     isSave.value = false;
     investigationExtendStatus.value = false;
   });
 }
 
+const organization = ref<OptionData>();
 /**
  * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่สิ้นสุดการสืบสวน
  * @param val จำนวนวันที่ต้องการขยาย
@@ -216,6 +220,11 @@ watch(props.data, async () => {
       formData.id = props.data.id;
       formData.complaint = props.data.complaint;
       formData.organizationId = props.data.organizationId;
+      formData.organization = props.data.organization;
+      organization.value = {
+        id: props.data.organizationId,
+        name: props.data.organization,
+      };
       formData.respondentType = props.data.respondentType;
       formData.complaintdetail = props.data.complaintdetail;
       formData.investigationDescription = props.data.investigationDescription;
@@ -429,11 +438,45 @@ function handleSave(returnData: any) {
   toggleModal();
 }
 
-function getOc() {
+/** ดึงข้อมูล active */
-  http.get(config.API.typeOc()).then((res) => {
+async function getActive() {
-    const data = res.data.result;
+  showLoader();
-    investigateFactStore.ocListFn(data);
+  await http
-  });
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      getOc(res.data.result.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function getOc(activeId: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByid(activeId))
+    .then(async (res) => {
+      const data = await res.data.result.map((item: any) => ({
+        organizationId: item.orgTreeId,
+        organizationName: item.orgName,
+      }));
+
+      investigateFactStore.ocListFn(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+
+  // http.get(config.API.typeOc()).then((res) => {
+  //   const data = res.data.result;
+  //   investigateFactStore.ocListFn(data);
+  // });
 }
 
 async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
@@ -495,6 +538,11 @@ function deleteDirector(id: string) {
 /** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
 function changeFormData() {
   isSave.value = true;
+
+  if (organization.value) {
+    formData.organizationId = organization.value.id;
+    formData.organization = organization.value.name;
+  }
 }
 
 /** เช็ควันที่สิ้นสุดต้องมากกว่า หรือเท่ากับวันเริ่ม */
@@ -559,7 +607,7 @@ function emitPerson(data: FormData[]) {
       Id: dataMapId,
     })
     .then((res) => {
-      getOc();
+      getActive();
     })
     .catch((e) => {
       messageError($q, e);
@@ -637,9 +685,10 @@ watch(
 
 onMounted(async () => {
   mainStore.rowsAdd = [];
-  getOc();
+  getActive();
 });
 </script>
+
 <template>
   <div class="row col-12 bg-white">
     <div v-if="isSave" class="col-12">
@@ -712,11 +761,9 @@ onMounted(async () => {
                   outlined
                   option-label="name"
                   option-value="id"
-                  emit-value
+                  v-model="organization"
-                  map-options
-                  v-model="formData.organizationId"
                   :options="investigateFactStore.organizationIdOp"
-                  label="เลือกสำนักงาน"
+                  label="หน่วยงานที่ถูกร้องเรียน"
                   clearable
                   @update:model-value="changeFormData()"
                 />

src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue

@@ -71,7 +71,9 @@ const dataComplaints = reactive<FormDataComplaint>({
   id: "",
   respondentType: "",
   organizationId: "",
+  organization: "",
   consideredAgency: "",
+  consideredAgencyId: "",
   title: "",
   description: "",
   dateReceived: null,
@@ -115,6 +117,7 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
   documentFile: null,
   respondentType: "",
   organizationId: "",
+  organization: "",
   persons: [],
   investigationExtendHistory: [],
   isDisciplinary: false,
@@ -174,6 +177,8 @@ async function fetchDetailInvestigate() {
         dataList.investigationExtendStatus;
       dataInvestigatefacts.investigationDaysExtend =
         dataList.investigationDaysExtend;
+      dataInvestigatefacts.organizationId = dataList.organizationId;
+      dataInvestigatefacts.organization = dataList.organization;
     })
     .catch((err) => {
       messageError($q, err);
@@ -193,7 +198,9 @@ async function fetchDetailComplaints() {
       dataComplaints.id = dataList.id;
       dataComplaints.respondentType = dataList.respondentType;
       dataComplaints.organizationId = dataList.organizationId;
+      dataComplaints.organization = dataList.organization;
       dataComplaints.consideredAgency = dataList.consideredAgency;
+      dataComplaints.consideredAgencyId = dataList.consideredAgencyId;
       dataComplaints.title = dataList.title;
       dataComplaints.description = dataList.description;
       dataComplaints.dateReceived = dataList.dateReceived;

src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

@@ -36,6 +36,7 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 import DialogDuty from "@/modules/11_discipline/components/DialogDuty.vue";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -89,7 +90,8 @@ const countNum = ref<number>(1);
 /** formData*/
 const formData = reactive<FormData>({
   respondentType: "",
-  organizationId: "",
+  organizationId: null,
+  organization: "",
   consideredAgency: "",
   disciplinaryDateAllegation: null, //*วันที่รับทราบข้อกล่าวหา
   disciplinaryDateEvident: null, //*วันที่สรุปพยานหลักฐาน
@@ -233,6 +235,11 @@ async function fetchDatadetail() {
 
       formData.respondentType = props.data.respondentType;
       formData.organizationId = props.data.organizationId;
+      formData.organization = props.data.organization;
+      organization.value = {
+        id: props.data.organizationId,
+        name: props.data.organization,
+      };
       formData.consideredAgency = props.data.consideredAgency;
       formData.disciplinaryDateAllegation =
         props.data.disciplinaryDateAllegation;
@@ -405,18 +412,37 @@ watch(
 );
 
 /** function เรียกรายชื่อหน่วยงาน*/
-async function fetchOrganization() {
+/** ดึงข้อมูล active */
+async function getActive() {
+  showLoader();
   await http
-    .get(config.API.typeOc())
+    .get(config.API.activeOrganization)
     .then((res) => {
-      const data = res.data.result;
+      getOc(res.data.result.activeId);
-      organizationOption.value = data.map((e: DataOptionRes) => ({
+    })
-        id: e.organizationId,
+    .catch((err) => {
-        name: e.organizationName,
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function getOc(activeId: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByid(activeId))
+    .then(async (res) => {
+      organizationOption.value = await res.data.result.map((item: any) => ({
+        id: item.orgTreeId,
+        name: item.orgName,
       }));
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -483,6 +509,8 @@ function returnDirector(data: any) {
   clickClose();
 }
 
+const organization = ref<OptionData>();
+
 async function selectComplainant(val: string) {
   formData.organizationId = "";
   formData.consideredAgency = "";
@@ -499,6 +527,11 @@ function changeFormData() {
   if (formData.disciplinaryFaultLevel !== "อื่นๆ") {
     formData.disciplinaryFaultLevelOther = "";
   }
+
+  if (organization.value) {
+    formData.organizationId = organization.value.id;
+    formData.organization = organization.value.name;
+  }
 }
 
 /** เช็ควันที่สิ้นสุดต้องมากกว่า หรือเท่ากับวันเริ่ม */
@@ -568,7 +601,7 @@ function emitPerson(data: PersonsArray[]) {
       Id: dataMapId,
     })
     .then((res) => {
-      fetchOrganization();
+      getActive();
     })
     .catch((e) => {
       messageError($q, e);
@@ -645,12 +678,13 @@ function deletePerson(id: string) {
 /** Hook */
 onMounted(async () => {
   mainStore.rowsAdd = [];
-  await fetchOrganization();
+  getActive();
 });
 </script>
+
 <template>
   <div class="row col-12 bg-white">
-    <div v-if="isSave" class="q-pa-sm q-gutter-sm">
+    <div v-if="isSave" class="col-12 q-pa-sm q-gutter-sm">
       <q-banner inline-actions bordered class="bg-red-1 text-red border-orange">
         <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
         ยังไม่ได้บันทึกข้อมูล
@@ -718,11 +752,10 @@ onMounted(async () => {
                     outlined
                     option-label="name"
                     option-value="id"
-                    emit-value
                     map-options
-                    v-model="formData.organizationId"
+                    v-model="organization"
                     :options="organizationOption"
-                    label="เลือกสำนักงาน"
+                    label="หน่วยงานที่ถูกร้องเรียน"
                     @update:model-value="changeFormData()"
                   />
                 </div>

src/modules/11_discipline/components/4_Result/EditPage.vue

@@ -63,10 +63,11 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
   documentFile: null,
   respondentType: "",
   organizationId: "",
+  organization: "",
   persons: [],
   investigationExtendHistory: [],
-  isDisciplinary:false,
+  isDisciplinary: false,
-  isAncestorDNA:false
+  isAncestorDNA: false,
 });
 
 const personObjComplaint = reactive<ArrayPerson>({
@@ -92,7 +93,9 @@ const dataComplaints = reactive<FormDataComplaint>({
   id: "",
   respondentType: "",
   organizationId: "",
+  organization: "",
   consideredAgency: "",
+  consideredAgencyId: "",
   title: "",
   description: "",
   dateReceived: null,
@@ -197,6 +200,8 @@ async function fetchDetailInvestigate() {
         dataList.investigationExtendStatus;
       dataInvestigatefacts.investigationDaysExtend =
         dataList.investigationDaysExtend;
+      dataInvestigatefacts.organizationId = dataList.organizationId;
+      dataInvestigatefacts.organization = dataList.organization;
     })
     .catch((err) => {
       messageError($q, err);
@@ -216,7 +221,9 @@ async function fetchDetailComplaints() {
       dataComplaints.id = dataList.id;
       dataComplaints.respondentType = dataList.respondentType;
       dataComplaints.organizationId = dataList.organizationId;
+      dataComplaints.organization = dataList.organization;
       dataComplaints.consideredAgency = dataList.consideredAgency;
+      dataComplaints.consideredAgencyId = dataList.consideredAgencyId;
       dataComplaints.title = dataList.title;
       dataComplaints.description = dataList.description;
       dataComplaints.dateReceived = dataList.dateReceived;
@@ -263,6 +270,7 @@ onMounted(async () => {
   await fetchDetailResult();
 });
 </script>
+
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle col-12 row items-center">

src/modules/11_discipline/components/4_Result/Form.vue

@@ -42,7 +42,9 @@ const $q = useQuasar();
 const id = ref<string>(route.params.id as string);
 const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
 const respondentType = ref<string>("");
+const organization = ref<DataOption>();
 const organizationId = ref<string>("");
+const organizationName = ref<string>("");
 const consideredAgency = ref<string>("");
 const organizationOption = ref<DataOption[]>([]);
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -83,18 +85,37 @@ const objectdisciplinary: FormRef = {
 };
 
 /** function เรียกรายชื่อหน่วยงาน*/
-async function fetchOrganization() {
+/** ดึงข้อมูล active */
+async function getActive() {
+  showLoader();
   await http
-    .get(config.API.typeOc())
+    .get(config.API.activeOrganization)
     .then((res) => {
-      const data = res.data.result;
+      getOc(res.data.result.activeId);
-      organizationOption.value = data.map((e: DataOptionRes) => ({
+    })
-        id: e.organizationId,
+    .catch((err) => {
-        name: e.organizationName,
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function getOc(activeId: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByid(activeId))
+    .then(async (res) => {
+      organizationOption.value = await res.data.result.map((item: any) => ({
+        id: item.orgTreeId,
+        name: item.orgName,
       }));
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -103,24 +124,6 @@ async function selectComplainant(val: string) {
   consideredAgency.value = "";
 }
 
-/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function validateForm() {
-  const hasError = [];
-  for (const key in objectdisciplinary) {
-    if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
-      const property = objectdisciplinary[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    countNum.value = 1;
-    onSubmit();
-  }
-}
-
 /**
  * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
  * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
@@ -163,7 +166,14 @@ watch(
       formData.year = props.data.resultYear ?? 0;
       mainStore.rowsAdd = props.data.persons;
       await fetchDatadetail();
-      await fetchOrganization();
+      await getActive();
+
+      organizationId.value = props.data.organizationId;
+      organizationName.value = props.data.organization;
+      organization.value = {
+        id: props.data.organizationId,
+        name: props.data.organization,
+      };
     } else if (countNum.value === 2) {
       formData.disciplineDisciplinary_DocResults =
         props.data.disciplineDisciplinary_DocResults;
@@ -270,7 +280,12 @@ function updatemodalPersonal(modal: boolean) {
       <q-separator />
     </div>
 
-    <form @submit.prevent="validateForm" class="col-12 row">
+    <q-form
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+      class="col-12 row"
+    >
       <div class="col-12 row">
         <div class="col-sm-12 col-md-9 row no-wrap">
           <div class="col-12 q-pa-md">
@@ -306,11 +321,12 @@ function updatemodalPersonal(modal: boolean) {
                 </q-select>
               </div>
               <div
-                class="col-xs-12 col-sm-3"
+                class="col-xs-12 col-sm-4"
                 v-if="respondentType === 'ORGANIZATION'"
                 id="organizationId"
               >
                 <q-select
+                  readonly
                   for="inputOffice"
                   name="organizationId"
                   ref="organizationIdRef"
@@ -319,11 +335,10 @@ function updatemodalPersonal(modal: boolean) {
                   outlined
                   option-label="name"
                   option-value="id"
-                  emit-value
                   map-options
-                  v-model="organizationId"
+                  v-model="organization"
                   :options="organizationOption"
-                  label="เลือกสำนักงาน"
+                  label="หน่วยงานที่ถูกร้องเรียน"
                 />
               </div>
               <div class="row col-12" v-if="respondentType === 'PERSON'">
@@ -598,7 +613,7 @@ function updatemodalPersonal(modal: boolean) {
           >
         </div>
       </div>
-    </form>
+    </q-form>
   </div>
 
   <PopupPersonal

src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue

@@ -27,7 +27,7 @@ const visibleColumns = ref<string[]>([
   "no",
   "title",
   "name",
-  "position",
+  "positionType",
   "positionLevel",
   "organization",
   "dateTotal",
@@ -70,23 +70,19 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
   {
     name: "positionLevel",
     align: "left",
-    label: "ระดับตำแหน่ง",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val, row) => {
+      return row.positionLevel
+        ? `${row.positionType} (${row.positionLevel})`
+        : "-";
+    },
   },
   {
     name: "organization",
@@ -160,7 +156,7 @@ function openModalOrder() {
       r.statusEn == "PENDING" &&
       r.name &&
       r.organization &&
-      r.position &&
+      r.positionType &&
       r.positionLevel &&
       r.posNo &&
       r.organization
@@ -244,6 +240,7 @@ onMounted(() => {
   dataStore.visibleColumns = visibleColumns.value;
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายชื่อผู้ถูกพักราชการ

src/modules/11_discipline/interface/request/disciplinary.ts

@@ -56,7 +56,8 @@ interface Director {
 
 interface FormData {
   respondentType: string;
-  organizationId: string;
+  organizationId: string | null;
+  organization: string;
   consideredAgency: string;
   disciplinaryDateAllegation: Date | null;
   disciplinaryDateEvident: Date | null;
@@ -71,8 +72,8 @@ interface FormData {
   directors: Director[];
   persons: Persons[];
   extendStatus: boolean;
-  disciplinaryDateStart: Date | null|string;
+  disciplinaryDateStart: Date | null | string;
-  disciplinaryDateEnd: Date | null|string;
+  disciplinaryDateEnd: Date | null | string;
   daysExtend: number;
   disciplinaryDateInvestigation: Date | null;
   disciplinaryDateResult: Date | null;
@@ -80,7 +81,7 @@ interface FormData {
   disciplinaryCauseText: string;
   disciplinaryResult: string;
   disciplinaryExtendHistory: ExtendHistoryObject[];
-  disciplinaryFaultLevelOther:string
+  disciplinaryFaultLevelOther: string;
 }
 
 interface ExtendHistoryObject {

src/modules/11_discipline/interface/request/investigateFact.ts

@@ -10,8 +10,8 @@ interface FormData {
   evidenceFiles: any | null;
   fileComplaint: File | null;
   investigationExtendStatus: boolean | null;
-  investigationDateStart: Date | null|string;
+  investigationDateStart: Date | null | string;
-  investigationDateEnd: Date | null|string;
+  investigationDateEnd: Date | null | string;
   investigationDaysExtend: number | null;
   investigationStatusResult: string;
   investigationCauseText: string;
@@ -26,8 +26,9 @@ interface FormData {
   organizationId: string;
   persons: object | null;
   investigationExtendHistory: ExtendHistoryObject[];
-  isDisciplinary:boolean
+  isDisciplinary: boolean;
-  isAncestorDNA:boolean
+  isAncestorDNA: boolean;
+  organization?: string;
 }
 
 interface ExtendHistoryObject {

src/modules/11_discipline/interface/response/suspend.ts

@@ -8,6 +8,7 @@ interface listData {
   position: string;
   posNo: string;
   positionLevel: string;
+  positionType: string;
   salary: number;
   status: string;
   descriptionSuspend: string;
@@ -30,6 +31,7 @@ interface dataType {
   position: string;
   posNo: string;
   positionLevel: string;
+  positionType: string;
   salary: number;
   status: string;
   statusEn: string;

src/modules/11_discipline/store/SuspendStore.ts

@@ -1,18 +1,22 @@
 import { defineStore } from "pinia";
-import { ref } from 'vue'
+import { ref } from "vue";
-import type { listData, dataType, DataOption } from '@/modules/11_discipline/interface/response/suspend'
+import type {
+  listData,
+  dataType,
+  DataOption,
+} from "@/modules/11_discipline/interface/response/suspend";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
 export const useDisciplineSuspendStore = defineStore(
   "disciplineSuspendStore",
   () => {
-    const rows = ref<dataType[]>([])
+    const rows = ref<dataType[]>([]);
-    const columns = ref<QTableProps["columns"]>([])
+    const columns = ref<QTableProps["columns"]>([]);
-    const visibleColumns = ref<string[]>([])
+    const visibleColumns = ref<string[]>([]);
 
-    const mixin = useCounterMixin()
+    const mixin = useCounterMixin();
-    const { date2Thai } = mixin
+    const { date2Thai } = mixin;
 
     const offenseDetailsOps = ref<DataOption[]>([
       { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
@@ -35,21 +39,27 @@ export const useDisciplineSuspendStore = defineStore(
         organization: item.organization,
         position: item.position,
         posNo: item.posNo,
+        positionType: item.positionType,
         positionLevel: item.positionLevel,
         salary: item.salary,
         status: statusTothai(item.status),
         statusEn: item.status,
         descriptionSuspend: item.descriptionSuspend,
-        dateTotal: item.startDateSuspend && item.endDateSuspend ? `${date2Thai(item.startDateSuspend)} - ${date2Thai(item.endDateSuspend)}` : '-',
+        dateTotal:
+          item.startDateSuspend && item.endDateSuspend
+            ? `${date2Thai(item.startDateSuspend)} - ${date2Thai(
+                item.endDateSuspend
+              )}`
+            : "-",
         startDateSuspend: item.startDateSuspend,
         endDateSuspend: item.endDateSuspend,
         title: item.title,
         offenseDetails: item.offenseDetails,
         disciplinaryFaultLevel: item.disciplinaryFaultLevel,
         disciplinaryCaseFault: item.disciplinaryCaseFault,
-      }))
+      }));
 
-      rows.value = dataList
+      rows.value = dataList;
     }
 
     /**
@@ -82,7 +92,7 @@ export const useDisciplineSuspendStore = defineStore(
       columns,
       visibleColumns,
       getData,
-      offenseDetailsOps
+      offenseDetailsOps,
     };
   }
 );