feat: activity transcript print new layout

docchula · Jul 31, 2024 · 045d4bf · 045d4bf
1 parent 0f411d4
commit 045d4bf
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 130 deletions.
diff --git a/app/Http/Controllers/TranscriptController.php b/app/Http/Controllers/TranscriptController.php
@@ -3,7 +3,6 @@
 namespace App\Http\Controllers;
 
 use App\Models\User;
-use Barryvdh\DomPDF\Facade\Pdf;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 
@@ -21,6 +20,7 @@ public function index(Request $request) {
     public function print(User $user) {
         $this->authorize('faculty-action');
 
-        return response()->view('base64-pdf-viewer', ['encoded' => base64_encode(Pdf::loadView('my-projects', ['user' => $user])->output())]);
+        return view('my-projects', ['user' => $user]);
+        // return response()->view('base64-pdf-viewer', ['encoded' => base64_encode(Pdf::loadView('my-projects', ['user' => $user])->output())]);
     }
 }
diff --git a/app/Http/Controllers/UserProfileController.php b/app/Http/Controllers/UserProfileController.php
@@ -2,7 +2,6 @@
 
 namespace App\Http\Controllers;
 
-use Barryvdh\DomPDF\Facade\Pdf;
 use Illuminate\Http\Request;
 use Laravel\Fortify\Features;
 use Laravel\Jetstream\Http\Controllers\Inertia\UserProfileController as JetstreamUserProfileController;
@@ -16,14 +15,15 @@ public function show(Request $request)
         return Jetstream::inertia()->render($request, 'Profile/Show', [
             'confirmsTwoFactorAuthentication' => Features::optionEnabled(Features::twoFactorAuthentication(), 'confirm'),
             'sessions' => $this->sessions($request)->all(),
-            'projects' => $request->user()->participantAndProjects(),
+            'participants' => $request->user()->load(['participants', 'participants.project', 'participants.project.department'])->participants,
         ]);
     }
 
     public function printMyProjects(Request $request)
     {
         $user = $request->user();
 
-        return response()->view('base64-pdf-viewer', ['encoded' => base64_encode(Pdf::loadView('my-projects', ['user' => $user])->output())]);
+        return view('my-projects', ['user' => $user, 'draft' => true]);
+        // return response()->view('base64-pdf-viewer', ['encoded' => base64_encode(Pdf::loadView('my-projects', ['user' => $user, 'draft' => true])->output())]);
     }
 }
diff --git a/app/Models/User.php b/app/Models/User.php
@@ -110,8 +110,14 @@ public static function searchQuery(string $keyword = null): ?Builder {
         if (empty($keyword) or strlen($keyword) < 3) {
             return null;
         }
-        if (is_numeric($keyword)) {
-            $query->where('student_id', $keyword);
+        if (is_numeric($keyword) and strlen($keyword) <= 10) {
+            if (strlen($keyword) === 10) {
+                $query->where('student_id', $keyword);
+            } elseif (strlen($keyword) >= 7) {
+                $query->where('student_id', 'like', "$keyword%");
+            } else {
+                return null;
+            }
         } elseif (str_contains($keyword, '@')) {
             $query->where('email', $keyword);
         } else {

diff --git a/public/phrakiao.jpg b/public/phrakiao.jpg
diff --git a/resources/js/Components/ActivityTranscriptTable.vue b/resources/js/Components/ActivityTranscriptTable.vue
@@ -0,0 +1,76 @@
+<script setup>
+import {Link} from '@inertiajs/vue3';
+import {CheckCircleIcon, XCircleIcon} from '@heroicons/vue/20/solid';
+import {PROJECT_PARTICIPANT_ROLES} from '@/static';
+import {computed} from 'vue';
+
+const props = defineProps({
+    participants: Array,
+});
+const participantSorted = computed(() => {
+    if (!props.participants) {
+        return null;
+    }
+    return props.participants.sort((a, b) => {
+        return a.project.id - b.project.id;
+    });
+});
+</script>
+
+<template>
+    <div v-if="participantSorted" class="border-b border-gray-200 ">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+            <tr>
+                <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
+                    เลขที่
+                </th>
+                <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
+                    โครงการ
+                </th>
+                <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
+                    หน่วยงาน
+                </th>
+                <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
+                    วันที่จัดกิจกรรม
+                </th>
+                <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
+                    ระยะเวลา (ชม.)
+                </th>
+                <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
+                    บทบาท
+                </th>
+            </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+            <tr v-for="participant in participantSorted" :key="participant.id"
+                :class="{'text-gray-400 bg-gray-100': participant.approve_status !== 1}">
+                <td class="px-2 py-2 md:px-4 text-xs">
+                    <Link :href="route('projects.show', {project: participant.project.id})">
+                        {{ participant.project.year }}-{{ participant.project.number }}
+                    </Link>
+                </td>
+                <td class="px-2 py-2 md:px-4">
+                    <Link :href="route('projects.show', {project: participant.project.id})">
+                        {{ participant.project.name }}
+                    </Link>
+                </td>
+                <td class="px-2 py-2 md:px-4 text-sm">{{ participant.project.department.name }}</td>
+                <td class="px-2 py-2 md:px-4 text-xs">
+                    {{ participant.project.period_start }}
+                    <span v-if="participant.project.period_start !== participant.project.period_end">- {{
+                            participant.project.period_end
+                        }}</span>
+                </td>
+                <td class="px-2 py-2 md:px-4 text-sm">{{ participant.project.duration }}</td>
+                <td class="px-2 py-2 md:px-4">
+                    {{ PROJECT_PARTICIPANT_ROLES[participant.type] }}
+                    <CheckCircleIcon v-if="participant.approve_status === 1" class="inline-block ml-1 h-4 w-4 text-green-500"/>
+                    <XCircleIcon v-if="participant.approve_status === -1" class="inline-block ml-1 h-4 w-4 text-red-500"/>
+                    <p v-if="participant.title" class="text-xs">{{ participant.title }}</p>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/resources/js/Pages/Profile/MyProjects.vue b/resources/js/Pages/Profile/MyProjects.vue
@@ -13,42 +13,11 @@
 
         <template #content>
             <div class="max-w-xl text-sm text-gray-600">
-                คุณมีส่วนร่วมใน {{ projects.length }} โครงการ
+                คุณมีส่วนร่วมใน {{ participants.length }} โครงการ
             </div>
 
-            <div class="mt-5 space-y-6" v-if="projects.length > 0">
-                <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50">
-                    <tr>
-                        <th scope="col" class="px-2 py-2 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
-                            โครงการ
-                        </th>
-                        <th scope="col" class="px-2 py-2 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
-                            บทบาท
-                        </th>
-                        <th scope="col" class="px-2 py-2 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
-                            หน้าที่
-                        </th>
-                    </tr>
-                    </thead>
-                    <tbody class="bg-white divide-y divide-gray-200">
-                    <tr v-for="participant in projects" :key="participant.id">
-                        <td class="px-2 py-2 md:py-3">
-                            <Link :href="route('projects.show', {project: participant.project.id})">
-                                <span class="text-xs text-gray-500 px-0.5">{{ participant.project.year }}-{{ participant.project.number }}</span>
-                                {{ participant.project.name }}
-                            </Link>
-                        </td>
-                        <td class="px-2 py-2 md:py-3 text-sm">
-                            {{ PROJECT_PARTICIPANT_ROLES[participant.type] ?? participant.type }}
-                        </td>
-                        <td class="px-2 py-2 md:py-3 text-gray-500 text-xs">
-                            {{ participant.title ?? '-' }}
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
+            <ActivityTranscriptTable v-if="participants && participants.length > 0" :participants="participants"
+                                     class="mt-4"/>
         </template>
     </jet-action-section>
 </template>
@@ -57,11 +26,11 @@
 import {Link} from '@inertiajs/vue3'
 import JetActionSection from '../../Jetstream/ActionSection.vue'
 import {PrinterIcon} from '@heroicons/vue/24/solid'
-import {PROJECT_PARTICIPANT_ROLES} from "@/static";
+import ActivityTranscriptTable from "@/Components/ActivityTranscriptTable.vue";
 
 const props = defineProps({
-    projects: {
-        type: Object,
+    participants: {
+        type: Array,
         required: true,
     },
 });

diff --git a/resources/js/Pages/Profile/Show.vue b/resources/js/Pages/Profile/Show.vue
@@ -9,7 +9,7 @@
         <div>
             <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                 <div>
-                    <my-projects :projects="projects" />
+                    <my-projects :participants="participants"/>
 
                     <jet-section-border />
                 </div>
@@ -55,7 +55,7 @@ import UpdatePasswordForm from './UpdatePasswordForm.vue'
 import UpdateProfileInformationForm from './UpdateProfileInformationForm.vue'
 
 export default {
-        props: ['sessions', 'projects'],
+    props: ['sessions', 'participants'],
 
         components: {
             AppLayout,

diff --git a/resources/js/Pages/ProjectApprovalIndex.vue b/resources/js/Pages/ProjectApprovalIndex.vue
@@ -18,11 +18,11 @@
                     </p>
                 </div>
                 <div class="flex-auto flex items-center justify-end gap-2">
-                    <a :href="route('transcript.index')"
+                    <Link :href="route('transcript.index')"
                        class="inline-flex py-2 px-4 justify-center items-center text-center text-base font-semibold transition ease-in duration-200 text-purple-500 border-purple-500 border rounded-lg shadow hover:shadow-md focus:ring-purple-500 focus:ring-offset-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2"
                     >
                         ดู <span class="hidden sm:inline px-1">Activity </span> Transcript ของนิสิต
-                    </a>
+                    </Link>
                 </div>
             </div>
         </template>
@@ -107,7 +107,7 @@ const searchMessage = ref('');
 
 // Methods
 const search = (keyword) => {
-    router.get(this.route('projects.approvalIndex'), {search: keyword}, {
+    router.get(route('projects.approvalIndex'), {search: keyword}, {
         only: ['list', 'keyword'],
         preserveState: true
     });

diff --git a/resources/js/Pages/TranscriptView.vue b/resources/js/Pages/TranscriptView.vue
@@ -25,61 +25,8 @@
                     </Link>
                 </div>
             </div>
-            <div v-if="participantSorted" class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
-                <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50">
-                    <tr>
-                        <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
-                            เลขที่
-                        </th>
-                        <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
-                            โครงการ
-                        </th>
-                        <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
-                            หน่วยงาน
-                        </th>
-                        <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
-                            วันที่จัดกิจกรรม
-                        </th>
-                        <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
-                            ระยะเวลา (ชม.)
-                        </th>
-                        <th scope="col" class="px-2 py-2 md:px-4 md:py-3 text-left text-xs font-medium text-gray-500 tracking-wider">
-                            บทบาท
-                        </th>
-                    </tr>
-                    </thead>
-                    <tbody class="bg-white divide-y divide-gray-200">
-                    <tr v-for="participant in participantSorted" :key="participant.id"
-                        :class="{'text-gray-400 bg-gray-100': participant.approve_status !== 1}">
-                        <td class="px-2 py-2 md:px-4 text-xs">
-                            <Link :href="route('projects.show', {project: participant.project.id})">
-                                {{ participant.project.year }}-{{ participant.project.number }}
-                            </Link>
-                        </td>
-                        <td class="px-2 py-2 md:px-4">
-                            <Link :href="route('projects.show', {project: participant.project.id})">
-                                {{ participant.project.name }}
-                            </Link>
-                        </td>
-                        <td class="px-2 py-2 md:px-4 text-sm">{{ participant.project.department.name }}</td>
-                        <td class="px-2 py-2 md:px-4 text-xs">
-                            {{ participant.project.period_start }}
-                            <span v-if="participant.project.period_start !== participant.project.period_end">- {{
-                                    participant.project.period_end
-                                }}</span>
-                        </td>
-                        <td class="px-2 py-2 md:px-4 text-sm">{{ participant.project.duration }}</td>
-                        <td class="px-2 py-2 md:px-4">
-                            {{ PROJECT_PARTICIPANT_ROLES[participant.type] }}
-                            <CheckCircleIcon v-if="participant.approve_status === 1" class="inline-block ml-1 h-4 w-4 text-green-500"/>
-                            <XCircleIcon v-if="participant.approve_status === -1" class="inline-block ml-1 h-4 w-4 text-red-500"/>
-                            <p v-if="participant.title" class="text-xs">{{ participant.title }}</p>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
+            <ActivityTranscriptTable :participants="user.participants" v-if="user && user.participants"
+                                     class="overflow-hidden shadow sm:rounded-lg"/>
         </div>
     </app-layout>
 </template>
@@ -89,11 +36,11 @@ import AppLayout from '@/Layouts/AppLayout.vue'
 import SearchInput from '@/Components/SearchInput.vue';
 import Label from "@/Jetstream/Label.vue";
 import {Link, router} from '@inertiajs/vue3';
-import {CheckCircleIcon, UserIcon, XCircleIcon} from '@heroicons/vue/20/solid';
-import {computed, ref, watch} from 'vue';
+import {UserIcon} from '@heroicons/vue/20/solid';
+import {ref, watch} from 'vue';
 import {debounce} from 'lodash';
-import {PROJECT_PARTICIPANT_ROLES} from '@/static';
 import {PrinterIcon} from "@heroicons/vue/24/solid";
+import ActivityTranscriptTable from "@/Components/ActivityTranscriptTable.vue";
 
 const props = defineProps({
     keyword: String,
@@ -102,14 +49,6 @@ const props = defineProps({
 });
 const searchKeyword = ref(props.keyword ?? '');
 const searchMessage = ref('');
-const participantSorted = computed(() => {
-    if (!props.user || !props.user.participants) {
-        return null;
-    }
-    return props.user.participants.sort((a, b) => {
-        return a.project.id - b.project.id;
-    });
-});
 
 const search = () => {
     router.get(route('transcript.index'), {search: searchKeyword.value}, {