updated develop form

src/modules/15_development/components/Target.vue

@@ -30,6 +30,10 @@ const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+});
 const plannedGoals = ref<ResPlannedGoals[]>([]);
 const plannedPeoples = ref<ResPeople[]>([]);
 const actualGoals = ref<ResActualGoals[]>([]);
@@ -802,7 +806,7 @@ onMounted(() => {
             <q-tr :props="props">
               <q-td>
                 <q-btn
-                v-if="!checkRoutePermission"
+                  v-if="!checkRoutePermission"
                   round
                   flat
                   color="primary"
@@ -834,6 +838,33 @@ onMounted(() => {
     </div>
   </q-card>
 
+  <q-card v-if="!checkRoutePermission" bordered>
+    <div class="text-center q-pa-sm">
+      <q-btn
+        rounded
+        label="ก่อนหน้า"
+        icon="mdi-chevron-left"
+        id="onSubmit"
+        color="public"
+        class="q-mr-xs"
+        style="width: 120px"
+        @click="props.prevStep()"
+      >
+      </q-btn>
+      <q-btn
+        rounded
+        label="ถัดไป"
+        icon-right="mdi-chevron-right"
+        id="onSubmit"
+        color="public"
+        class="q-ml-xs"
+        style="width: 120px"
+        @click="props.nextStep()"
+      >
+      </q-btn>
+    </div>
+  </q-card>
+
   <q-dialog v-model="modalGroupTarget" persistent>
     <q-card style="width: 700px">
       <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
@@ -876,7 +907,12 @@ onMounted(() => {
                 v-model="formGroupTarget.groupTargetSub"
                 :options="
                   formGroupTarget.groupTarget === 'OFFICER'
-                    ? groupSubOp.slice(0, 2)
+                    ? groupSubOp.filter(
+                        (v) =>
+                          v.id === 'OFFICER' ||
+                          v.id === 'TEACHER' ||
+                          v.id === 'EDUCATIONAL'
+                      )
                     : groupSubOp.slice(2, 5)
                 "
                 label="กลุ่มเป้าหมายย่อย"
@@ -1051,7 +1087,12 @@ onMounted(() => {
                 v-model="formGroupTarget.groupTargetSub"
                 :options="
                   formGroupTarget.groupTarget === 'OFFICER'
-                    ? groupSubOp.slice(0, 2)
+                    ? groupSubOp.filter(
+                        (v) =>
+                          v.id === 'OFFICER' ||
+                          v.id === 'TEACHER' ||
+                          v.id === 'EDUCATIONAL'
+                      )
                     : groupSubOp.slice(2, 5)
                 "
                 label="กลุ่มเป้าหมายย่อย"