ปรับ ตรวจสอบข้อมูลกับกรมการปกครอง

src/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue

@@ -21,6 +21,7 @@ const { showLoader, hideLoader, messageError, dateToISO, date2Thai } = mixin;
 const informaData = defineModel<Information>("formInformations", {
   required: true,
 });
+const age = defineModel<boolean>("age", { required: true });
 const props = defineProps({
   Ops: {
     type: Object as PropType<any>,
@@ -30,8 +31,6 @@ const props = defineProps({
   },
 });
 
-const age = ref<boolean>(true); //อายุ
-
 /**
  * ฟังก์เลือกวันเดือนปีเกิด
  * @param modelData วันเดือนปีเกิด
@@ -165,7 +164,6 @@ function filterSelector(val: string, update: Function, refData: string) {
         lazy-rules
         v-model="informaData.prefixId"
         emit-value
-        readonly
         map-options
         option-label="name"
         :options="Ops.prefixOps"
@@ -183,7 +181,6 @@ function filterSelector(val: string, update: Function, refData: string) {
         class="inputgreen"
         hide-bottom-space
         outlined
-        readonly
         dense
         lazy-rules
         v-model="informaData.firstname"
@@ -196,7 +193,6 @@ function filterSelector(val: string, update: Function, refData: string) {
         class="inputgreen"
         hide-bottom-space
         outlined
-        readonly
         dense
         lazy-rules
         v-model="informaData.lastname"
@@ -209,7 +205,6 @@ function filterSelector(val: string, update: Function, refData: string) {
         v-model="informaData.dateOfBirth"
         :locale="'th'"
         autoApply
-        readonly
         :enableTimePicker="false"
         week-start="0"
         :max-date="new Date()"
@@ -225,7 +220,6 @@ function filterSelector(val: string, update: Function, refData: string) {
           <q-input
             class="inputgreen"
             hide-bottom-space
-            readonly
             outlined
             dense
             :model-value="
@@ -269,7 +263,6 @@ function filterSelector(val: string, update: Function, refData: string) {
         lazy-rules
         v-model="informaData.genderId"
         emit-value
-        readonly
         map-options
         option-label="name"
         :options="Ops.genderOps"
@@ -290,7 +283,6 @@ function filterSelector(val: string, update: Function, refData: string) {
         outlined
         dense
         lazy-rules
-        readonly
         v-model="informaData.relationshipId"
         emit-value
         map-options
@@ -312,7 +304,6 @@ function filterSelector(val: string, update: Function, refData: string) {
         outlined
         dense
         lazy-rules
-        readonly
         v-model="informaData.bloodGroupId"
         emit-value
         map-options
@@ -331,7 +322,6 @@ function filterSelector(val: string, update: Function, refData: string) {
       <q-input
         class="inputgreen"
         outlined
-        readonly
         dense
         v-model="informaData.nationality"
         :label="`${'สัญชาติ'}`"
@@ -341,7 +331,6 @@ function filterSelector(val: string, update: Function, refData: string) {
       <q-input
         class="inputgreen"
         outlined
-        readonly
         dense
         v-model="informaData.race"
         :label="`${'เชื้อชาติ'}`"
@@ -355,7 +344,6 @@ function filterSelector(val: string, update: Function, refData: string) {
         outlined
         dense
         lazy-rules
-        readonly
         v-model="informaData.religionId"
         emit-value
         map-options
@@ -376,7 +364,6 @@ function filterSelector(val: string, update: Function, refData: string) {
         outlined
         dense
         lazy-rules
-        readonly
         type="tel"
         class="inputgreen"
         v-model="informaData.telephone"

src/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue

@@ -337,7 +337,6 @@ onMounted(() => {
         outlined
         dense
         lazy-rules
-        readonly
         type="textarea"
         autogrow
         v-model="addressData.registAddress"
@@ -352,7 +351,6 @@ onMounted(() => {
         :rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
         outlined
         dense
-        readonly
         lazy-rules
         v-model="registAddress.provinceId"
         emit-value
@@ -376,7 +374,6 @@ onMounted(() => {
         :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
         outlined
         dense
-        readonly
         lazy-rules
         v-model="registAddress.districtId"
         emit-value
@@ -401,7 +398,6 @@ onMounted(() => {
         outlined
         dense
         lazy-rules
-        readonly
         v-model="registAddress.subDistrictId"
         emit-value
         map-options
@@ -440,7 +436,6 @@ onMounted(() => {
         checked-icon="task_alt"
         unchecked-icon="panorama_fish_eye"
         val="1"
-        disable
         label="ใช่"
         dense
       />
@@ -449,7 +444,6 @@ onMounted(() => {
         checked-icon="task_alt"
         unchecked-icon="panorama_fish_eye"
         val="0"
-        disable
         label="ไม่"
         dense
       />
@@ -462,7 +456,6 @@ onMounted(() => {
         outlined
         dense
         lazy-rules
-        readonly
         type="textarea"
         autogrow
         v-model="addressData.currentAddress"
@@ -481,7 +474,6 @@ onMounted(() => {
         outlined
         dense
         lazy-rules
-        readonly
         v-model="currentAddress.provinceId"
         emit-value
         map-options
@@ -507,7 +499,6 @@ onMounted(() => {
         :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
         outlined
         dense
-        readonly
         lazy-rules
         v-model="currentAddress.districtId"
         emit-value
@@ -534,7 +525,6 @@ onMounted(() => {
         :rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
         outlined
         dense
-        readonly
         lazy-rules
         v-model="currentAddress.subDistrictId"
         emit-value

src/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue

@@ -56,7 +56,6 @@ function selectRadio(e: boolean) {
         v-model="familyData.fatherPrefixId"
         emit-value
         map-options
-        readonly
         option-label="name"
         :options="Ops.prefixOps"
         option-value="id"
@@ -74,7 +73,6 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
-        readonly
         dense
         lazy-rules
         v-model="familyData.fatherFirstName"
@@ -88,7 +86,6 @@ function selectRadio(e: boolean) {
         hide-bottom-space
         outlined
         dense
-        readonly
         lazy-rules
         v-model="familyData.fatherLastName"
         :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
@@ -101,7 +98,6 @@ function selectRadio(e: boolean) {
         hide-bottom-space
         outlined
         dense
-        readonly
         lazy-rules
         v-model="familyData.fatherOccupation"
         :label="`${'อาชีพ'}`"
@@ -117,7 +113,6 @@ function selectRadio(e: boolean) {
         :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
         outlined
         dense
-        readonly
         lazy-rules
         v-model="familyData.motherPrefixId"
         emit-value
@@ -139,7 +134,6 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
-        readonly
         dense
         lazy-rules
         v-model="familyData.motherFirstName"
@@ -152,7 +146,6 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
-        readonly
         dense
         lazy-rules
         v-model="familyData.motherLastName"
@@ -165,7 +158,6 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
-        readonly
         dense
         lazy-rules
         v-model="familyData.motherOccupation"
@@ -182,7 +174,6 @@ function selectRadio(e: boolean) {
         val="1"
         label="มี"
         dense
-        disable
         @update:model-value="selectRadio"
       />
       <q-radio
@@ -192,7 +183,6 @@ function selectRadio(e: boolean) {
         val="0"
         label="ไม่มี"
         dense
-        disable
         @update:model-value="selectRadio"
       />
     </div>
@@ -205,7 +195,6 @@ function selectRadio(e: boolean) {
         outlined
         dense
         lazy-rules
-        readonly
         v-model="familyData.marryPrefixId"
         emit-value
         map-options
@@ -228,7 +217,6 @@ function selectRadio(e: boolean) {
         outlined
         dense
         lazy-rules
-        readonly
         v-model="familyData.marryFirstName"
         :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
         :label="`${'ชื่อ'}`"
@@ -240,7 +228,6 @@ function selectRadio(e: boolean) {
         hide-bottom-space
         outlined
         dense
-        readonly
         lazy-rules
         v-model="familyData.marryLastName"
         :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
@@ -252,7 +239,6 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
-        readonly
         dense
         lazy-rules
         v-model="familyData.marryOccupation"

src/modules/05_placement/components/PersonalDetail/DetailMain.vue

@@ -492,11 +492,14 @@ function checkInformation() {
   modalCheck.value = true;
 }
 
+async function getAll() {
+  await Promise.all([fetchData(), changeTab("information"), fetchPerson()]);
+}
 /**
  * ทำงานเมื่อมีการเรียกใช้ Components
  */
 onMounted(async () => {
-  await Promise.all([fetchData(), changeTab("information"), fetchPerson()]);
+  getAll();
 });
 </script>
 
@@ -609,6 +612,7 @@ onMounted(async () => {
     :Ops="Ops"
     :Ops-filter="OpsFilter"
     :id-card="InformationData.idCard"
+    :get-all="getAll"
   />
 </template>
 

src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue

@@ -11,6 +11,7 @@ import {
   AddressDataDefualt,
   FamilyDataDefualt,
 } from "@/modules/05_placement/interface/index/Main";
+import { useProfileDataStore } from "@/modules/05_placement/store";
 
 import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
 import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
@@ -30,13 +31,25 @@ import FormFamilyPage from "@/modules/05_placement/components/PersonalDetail/Che
 
 const modal = defineModel<boolean>("modal", { required: true });
 const idCard = defineModel<string>("idCard", { required: true });
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const profileStore = useProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  modalError,
+  success,
+} = mixin;
 const store = useLinkageStore();
 
+const age = ref<boolean>(true); //อายุ
+
 const props = defineProps({
   Ops: {
     type: Object as PropType<any>,
@@ -57,32 +70,13 @@ const props = defineProps({
     type: Object as PropType<Family>,
     default: FamilyDataDefualt,
   },
+  getAll: Function,
 });
 
 const addressData = ref<AddressType>(props.AddressData);
 const familyData = ref<Family>(props.familyData); //ข้อมูลครอบครัว
 /** ตัวแปร ข้อมูลส่วนตัว */
-const formInformations = reactive<Information>({
+const formInformations = reactive<Information>(props.InformationData);
-  idCard: "", // เลข ปชช.
-  prefix: "", // คำนำหน้า
-  prefixId: "", // id คำนำหน้า
-  fullName: "", // ชื่อเต็ม
-  firstname: "", //ชื่อ
-  lastname: "", //นามสกุล
-  nationality: "", //สัญชาติ
-  race: "", //เชื้อชาติ
-  dateOfBirth: null, //วันเกิด
-  age: "", //อายุ
-  telephone: "", //เบอร์มือถือ
-  gender: "", //เพศ
-  genderId: "", //id เพศ
-  relationship: "", //สถานภาพ
-  relationshipId: "", //id สถานภาพ
-  bloodGroup: "", //กร๊ปเลือด
-  bloodGroupId: "", //id กรุ๊ปเลือด
-  religion: "", //ศาสนา
-  religionId: "", //id ศาสนา
-});
 
 //ที่อยู่ปัจบัน
 const currentAddress = reactive<AddressData>({
@@ -99,26 +93,6 @@ const registAddress = reactive<AddressData>({
   provinceId: "",
 });
 
-/** ตัวแปร ข้อมูลครอบครัว */
-const formFamily = reactive<Family>({
-  couple: "",
-  marryPrefix: "",
-  marryPrefixId: "",
-  marryFirstName: "",
-  marryLastName: "",
-  marryOccupation: "",
-  fatherPrefix: "",
-  fatherPrefixId: "",
-  fatherFirstName: "",
-  fatherLastName: "",
-  fatherOccupation: "",
-  motherPrefix: "",
-  motherPrefixId: "",
-  motherFirstName: "",
-  motherLastName: "",
-  motherOccupation: "",
-});
-
 //ตัวเลือกข้อมูลที่อยู่
 const OpsAddress = ref<AddressOps>({
   provinceOps: [],
@@ -138,26 +112,7 @@ const OpsFilterAddress = ref<AddressOps>({
 
 function closeDialog() {
   modal.value = false;
-
+  props.getAll?.();
-  formInformations.idCard = "";
-  formInformations.prefix = "";
-  formInformations.prefixId = "";
-  formInformations.fullName = "";
-  formInformations.firstname = "";
-  formInformations.lastname = "";
-  formInformations.nationality = "";
-  formInformations.race = "";
-  formInformations.dateOfBirth = null;
-  formInformations.age = "";
-  formInformations.telephone = "";
-  formInformations.gender = "";
-  formInformations.genderId = "";
-  formInformations.relationship = "";
-  formInformations.relationshipId = "";
-  formInformations.bloodGroup = "";
-  formInformations.bloodGroupId = "";
-  formInformations.religion = "";
-  formInformations.religionId = "";
 }
 
 function onSubmit() {
@@ -208,7 +163,7 @@ function onSubmit() {
     coupleLastName: familyData.value.marryLastName,
     coupleLastNameOld: "",
     coupleCareer: familyData.value.marryOccupation,
-    
+
     fatherPrefix: familyData.value.fatherPrefixId,
     fatherFirstName: familyData.value.fatherFirstName,
     fatherLastName: familyData.value.fatherLastName,
@@ -220,83 +175,205 @@ function onSubmit() {
     motherCareer: familyData.value.motherOccupation,
   };
 
-  console.log(body);
+  dialogConfirm($q, async () => {
+    if (age.value == false) {
+      modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
+      return;
+    } else {
+      showLoader();
+      await upDateInfomation();
+      await upDateAddress();
+      await upDateFamily();
+
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
+      await props.getAll?.();
+      await changeBirth(formInformations.dateOfBirth ?? new Date());
+      hideLoader();
+    }
+  });
 }
 
 const data = ref<any>(null);
 /** ดึงข้อมูลรายละเอียด */
 async function amiRequest() {
   const profile = await store.amiRequest($q, 5000, idCard.value, "001");
-  if (profile) {
-    data.value = profile;
 
-    formInformations.idCard = idCard.value;
+  data.value = profile;
-    formInformations.prefix = data.value.titleName;
+  formInformations.idCard = idCard.value;
-    formInformations.prefixId = data.value.titleName;
+  formInformations.prefix = data.value.titleName;
-    formInformations.fullName = data.value.fullnameAndRank;
+  formInformations.prefixId = data.value.titleName;
-    formInformations.firstname = data.value.firstName;
+  formInformations.fullName = data.value.fullnameAndRank;
-    formInformations.lastname = data.value.lastname;
+  formInformations.firstname = data.value.firstName;
-    formInformations.nationality = data.value.nationalityDesc;
+  formInformations.lastname = data.value.lastname;
-    formInformations.race = props.InformationData.race;
+  formInformations.nationality = data.value.nationalityDesc;
-    formInformations.dateOfBirth = data.value.dateOfBirth;
+  formInformations.race = props.InformationData.race;
-    formInformations.age = data.value.age;
+  formInformations.dateOfBirth = data.value.dateOfBirth;
-    formInformations.telephone = props.InformationData.telephone;
+  formInformations.age = data.value.age;
-    formInformations.gender = data.value.genderDesc;
+  formInformations.telephone = props.InformationData.telephone;
-    formInformations.genderId = data.value.genderDesc;
+  formInformations.gender = data.value.genderDesc;
-    formInformations.relationship = props.InformationData.relationship;
+  formInformations.genderId = data.value.genderDesc;
-    formInformations.relationshipId = props.InformationData.relationshipId;
+  formInformations.relationship = props.InformationData.relationship;
-    formInformations.bloodGroup = props.InformationData.bloodGroup;
+  formInformations.relationshipId = props.InformationData.relationshipId;
-    formInformations.bloodGroupId = props.InformationData.bloodGroupId;
+  formInformations.bloodGroup = props.InformationData.bloodGroup;
-    formInformations.religion = props.InformationData.religionId;
+  formInformations.bloodGroupId = props.InformationData.bloodGroupId;
-    formInformations.religionId = props.InformationData.religionId;
+  formInformations.religion = props.InformationData.religionId;
+  formInformations.religionId = props.InformationData.religionId;
 
-    familyData.value.fatherFirstName = data.value.fatherName
+  familyData.value.fatherFirstName = data.value.fatherName;
-    familyData.value.motherFirstName = data.value.motherName
+  familyData.value.motherFirstName = data.value.motherName;
 
-  }
+  // data.value = {
+  //   titleCode: 3,
+  //   titleDesc: "นาย",
+  //   titleName: "นาย",
+  //   titleSex: 1,
+  //   firstName: "สุพลชัย",
+  //   middleName: "",
+  //   lastName: "พูลสวัสดิ์",
+  //   genderCode: 1,
+  //   genderDesc: "ชาย",
+  //   dateOfBirth: 25211228,
+  //   nationalityCode: 99,
+  //   nationalityDesc: "ไทย",
+  //   ownerStatusDesc: "เจ้าบ้าน",
+  //   statusOfPersonCode: 0,
+  //   statusOfPersonDesc: "บุคคลนี้มีภูมิลำเนาอยู่ในบ้านนี้",
+  //   dateOfMoveIn: 25580728,
+  //   age: 45,
 
-  data.value = {
+  //   fatherPersonalID: 3102100621479,
-    titleCode: 3,
+  //   fatherName: "บุญเชิด",
-    titleDesc: "นาย",
+  //   fatherNationalityCode: 99,
-    titleName: "นาย",
+  //   fatherNationalityDesc: "ไทย",
-    titleSex: 1,
-    firstName: "สุพลชัย",
-    middleName: "",
-    lastName: "พูลสวัสดิ์",
-    genderCode: 1,
-    genderDesc: "ชาย",
-    dateOfBirth: 25211228,
-    nationalityCode: 99,
-    nationalityDesc: "ไทย",
-    ownerStatusDesc: "เจ้าบ้าน",
-    statusOfPersonCode: 0,
-    statusOfPersonDesc: "บุคคลนี้มีภูมิลำเนาอยู่ในบ้านนี้",
-    dateOfMoveIn: 25580728,
-    age: 45,
 
-    fatherPersonalID: 3102100621479,
+  //   motherPersonalID: 3102100621487,
-    fatherName: "บุญเชิด",
+  //   motherName: "พยอม",
-    fatherNationalityCode: 99,
+  //   motherNationalityCode: 99,
-    fatherNationalityDesc: "ไทย",
+  //   motherNationalityDesc: "ไทย",
 
-    motherPersonalID: 3102100621487,
+  //   fullnameAndRank: "นายสุพลชัย พูลสวัสดิ์",
-    motherName: "พยอม",
+  //   englishTitleDesc: "MR.",
-    motherNationalityCode: 99,
+  //   englishFirstName: "SUPHONCHAI",
-    motherNationalityDesc: "ไทย",
+  //   englishMiddleName: "",
+  //   englishLastName: "PHOONSAWAT",
+  // };
+}
 
-    fullnameAndRank: "นายสุพลชัย พูลสวัสดิ์",
+/**
-    englishTitleDesc: "MR.",
+ * อัพเดตข้อมูลส่วนตัว
-    englishFirstName: "SUPHONCHAI",
+ */
-    englishMiddleName: "",
+async function upDateInfomation() {
-    englishLastName: "PHOONSAWAT",
+  showLoader();
+  const body: any = {
+    citizenId: formInformations.idCard,
+    prefix: formInformations.prefixId,
+    firstName: formInformations.firstname,
+    lastName: formInformations.lastname,
+    gender: formInformations.genderId,
+    nationality: formInformations.nationality,
+    race: formInformations.race,
+    religion: formInformations.religionId,
+    birthDate: formInformations.dateOfBirth,
+    bloodGroup: formInformations.bloodGroupId,
+    relationship: formInformations.relationshipId,
+    telephoneNumber: formInformations.telephone,
   };
+  showLoader();
+  await http
+    .put(
+      config.API.placementInformationId(route.params.personalId.toString()),
+      body
+    )
+    .then(async () => {})
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันบันทึกการแก้ไข
+ */
+async function upDateAddress() {
+  const body = {
+    registrationSame: addressData.value.registSame == "1",
+    registrationAddress: addressData.value.registAddress,
+    registrationSubDistrictId: registAddress.subDistrictId,
+    registrationDistrictId: registAddress.districtId,
+    registrationProvinceId: registAddress.provinceId,
+    registrationZipCode: registAddress.zipCode,
+    currentAddress:
+      addressData.value.registSame == "1"
+        ? addressData.value.registAddress
+        : addressData.value.currentAddress,
+    currentSubDistrictId:
+      addressData.value.registSame == "1"
+        ? registAddress.subDistrictId
+        : currentAddress.subDistrictId,
+    currentDistrictId:
+      addressData.value.registSame == "1"
+        ? registAddress.districtId
+        : currentAddress.districtId,
+    currentProvinceId:
+      addressData.value.registSame == "1"
+        ? registAddress.provinceId
+        : currentAddress.provinceId,
+    currentZipCode:
+      addressData.value.registSame == "1"
+        ? registAddress.zipCode
+        : currentAddress.zipCode,
+  };
+  await http
+    .put(
+      config.API.placementAddressId(route.params.personalId.toString()),
+      body
+    )
+    .then(async () => {})
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+async function upDateFamily() {
+  const body = {
+    couple: familyData.value.couple == "1",
+    couplePrefix: familyData.value.marryPrefixId,
+    coupleFirstName: familyData.value.marryFirstName,
+    coupleLastName: familyData.value.marryLastName,
+    coupleLastNameOld: "",
+    coupleCareer: familyData.value.marryOccupation,
+    fatherPrefix: familyData.value.fatherPrefixId,
+    fatherFirstName: familyData.value.fatherFirstName,
+    fatherLastName: familyData.value.fatherLastName,
+    fatherCareer: familyData.value.fatherOccupation,
+    motherPrefix: familyData.value.motherPrefixId,
+    motherFirstName: familyData.value.motherFirstName,
+    motherLastName: familyData.value.motherLastName,
+    motherCareer: familyData.value.motherOccupation,
+  };
+  await http
+    .put(config.API.placementFamilyId(route.params.personalId.toString()), body)
+    .then(async () => {})
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
 }
 
 /** เช็คค่า modal เมื่อเป็น true ใช้งาน ฟังชั่น */
 watch(
   () => modal.value,
   async () => {
-    await amiRequest();
+    if (modal.value) {
+      await amiRequest();
+    }
   }
 );
 </script>
@@ -315,6 +392,7 @@ watch(
                 v-model:form-informations="formInformations"
                 :Ops="props.Ops"
                 :OpsFilter="props.OpsFilter"
+                v-model:age="age"
               />
             </div>
             <div class="col-12">