feat: warn if view closure form before activity finishes, edit SDG text

app/Http/Controllers/ProjectClosureController.php

@@ -30,6 +30,7 @@ public function closureForm(Project $project): Response {
         return Inertia::render('ProjectClosure', [
             'item' => $project,
             'can_submit' => $project->canSubmitClosure(),
+            'warn_activity_date' => $project->period_end?->isFuture(),
         ]);
     }
 
@@ -38,6 +39,7 @@ public function closureForm(Project $project): Response {
      */
     public function closureSubmit(Request $request, Project $project) {
         $this->validate($request, [
+            'estimated_attendees' => 'required|integer|min:1',
             'objectives' => 'required|array',
             'expense' => 'nullable|array',
             'action' => 'nullable|string',
@@ -50,6 +52,7 @@ public function closureSubmit(Request $request, Project $project) {
 
         $project->objectives = $request->input('objectives');
         $project->expense = $request->input('expense');
+        $project->estimated_attendees = $request->input('estimated_attendees');
         if ($action == 'yes') {
             if (!$project->canSubmitClosure()) {
                 $project->saveOrFail();

resources/js/Components/SDGSelector.vue

@@ -17,11 +17,12 @@ const toggleSelection = (i: number) => {
 <template>
     <div class="space-y-4">
         <p v-if="model?.length > 0">สอดคล้องกับเป้าหมายข้อที่ {{ model.join(' ') }}</p>
-        <p v-else>ไม่สอดคล้องกับเป้าหมายใด</p>
+        <p v-else>ไม่มีเป้าหมายที่สอดคล้อง</p>
         <div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
             <template v-for="i in 17">
                 <div @click="toggleSelection(i)" v-if="!view || model?.includes(i)" class="item transition p-0.5"
-                     :class="{'opacity-30': !model?.includes(i), 'ring ring-gray-300': model?.includes(i) && !view, 'cursor-pointer': !view}">
+                     :class="{'opacity-30 hover:opacity-50': !model?.includes(i),
+                     'ring ring-gray-300 hover:opacity-80': model?.includes(i) && !view, 'cursor-pointer': !view}">
                     <img :src="'/assets/sdgs/' + String(i).padStart(2, '0') + '.svg'" :alt="'SDG '+ i"
                          class="w-full max-w-28 lg:max-w-none opacity-100 m-auto"/>
                 </div>

resources/js/Pages/ProjectClosure.vue

@@ -36,7 +36,8 @@
                     <div class="col-span-4 space-y-2">
                         <jet-label value="วันที่จัดกิจกรรม"/>
                         {{ (item.period_start === item.period_end) ? item.period_start : (item.period_start + ' - ' + item.period_end) }}
-                        <p class="text-xs text-gray-500">
+                        <jet-input-error v-if="warn_activity_date" message="ยังไม่สิ้นสุดการดำเนินกิจกรรม ไม่สามารถส่งรายงานผลได้"/>
+                        <p v-else class="text-xs text-gray-500">
                             ใน Transcript อาจปรากฏเฉพาะเดือนและปี
                         </p>
                     </div>
@@ -60,11 +61,13 @@
                         </p>
                     </div>
                     <div class="col-span-3 space-y-2">
-                        <jet-label value="ประมาณการจำนวนผู้เข้าร่วม"/>
-                        {{ item.estimated_attendees ?? '?' }} คน
-                        <jet-input-error v-if="!item.estimated_attendees" message="กรุณาแก้ไข"/>
+                        <jet-label>จำนวนผู้เข้าร่วม</jet-label>
+                        <jet-input type="number" class="w-24 md:w-auto" min="1" step="1" v-model.number="form.estimated_attendees"
+                                   required/>
+                        คน
+                        <jet-input-error v-if="!form.estimated_attendees" message="กรุณาแก้ไข"/>
                         <p v-else class="text-xs text-gray-500 col-span-6">
-                            อาจเป็นนิสิตแพทย์หรือบุคคลอื่นก็ได้
+                            ผู้เข้าร่วมอาจเป็นนิสิตแพทย์หรือบุคคลอื่นก็ได้
                         </p>
                     </div>
                 </template>
@@ -358,10 +361,10 @@
                                            class="w-4 h-4 text-red-600 bg-gray-100 border-gray-300 focus:ring-red-500 focus:ring-2">
                                     <label for="radio-no" class="w-full py-3 ms-2 font-medium text-gray-900">
                                         ไม่ส่ง
-                                        <p class="mt-1 text-xs text-gray-600">
+                                        <span class="block mt-1 text-xs text-gray-600">
                                             กรณีต้องการแก้ไขเพิ่มเติมภายหลัง (ต้องกลับมายืนยันในกำหนดเวลา 30 วัน) หรือสำหรับโครงการที่จะไม่บันทึกลงใน
                                             Activity Transcript
-                                        </p>
+                                        </span>
                                     </label>
                                 </div>
                             </li>
@@ -373,16 +376,16 @@
                                            class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 focus:ring-green-500 focus:ring-2">
                                     <label for="radio-yes" class="w-full py-3 ms-2 font-medium text-gray-900">
                                         ยืนยันส่งบันทึกลงใน Activity Transcript
-                                        <p v-if="item.year < 2567" class="mt-1 text-xs text-red-600">
+                                        <span v-if="item.year < 2567" class="block mt-1 text-xs text-red-600">
                                             เริ่มใช้ Activity Transcript สำหรับโครงการปีวาระ 2567 เป็นต้นไป
-                                        </p>
-                                        <p v-else-if="!can_submit" class="mt-1 text-xs text-red-600">
+                                        </span>
+                                        <span v-else-if="!can_submit" class="block mt-1 text-xs text-red-600">
                                             หมดเขตส่ง ต้องบันทึกและยืนยันรายงานผลการปฏิบัติงาน ภายใน 30 วันนับจากเสร็จสิ้นกิจกรรม
-                                        </p>
-                                        <p v-else class="mt-1 text-xs text-gray-600">
+                                        </span>
+                                        <span v-else class="block mt-1 text-xs text-gray-600">
                                             <b>เมื่อยืนยันแล้วไม่สามารถกลับมาแก้ไขข้อมูลได้อีก</b>
                                             ระบบจะให้นิสิตผู้รับผิดชอบและผู้ปฏิบัติงานทุกคนมาตรวจสอบและยืนยันรายชื่อผู้ปฏิบัติงานต่อไป
-                                        </p>
+                                        </span>
                                     </label>
                                 </div>
                             </li>
@@ -425,11 +428,13 @@ import {PROJECT_PARTICIPANT_ROLES} from "@/static";
 const props = defineProps({
     item: Object,
     can_submit: Boolean,
+    warn_activity_date: Boolean,
 });
 
 // Data
 const form = useForm({
     _method: 'POST',
+    estimated_attendees: props.item.estimated_attendees ?? 0,
     objectives: props.item.objectives ?? [],
     expense: props.item.expense ?? [],
     action: '',

resources/js/Pages/ProjectCreate.vue

@@ -155,7 +155,7 @@
                         <jet-input id="estimated_attendees" v-model="form.estimated_attendees" type="text" class="mt-1 block w-full" required/>
                         <jet-input-error v-if="form.errors.estimated_attendees" :message="form.errors.estimated_attendees" class="mt-2"/>
                         <p v-else class="mt-1 text-xs text-gray-500 col-span-6">
-                            อาจเป็นนิสิตหรือบุคคลอื่นก็ได้
+                            ผู้เข้าร่วมอาจเป็นนิสิตแพทย์หรือบุคคลอื่นก็ได้
                         </p>
                     </div>
                 </template>