更改UI、返回頁面、編輯活動

app/Http/Controllers/ActivityController.php

@@ -95,6 +95,13 @@ class ActivityController extends Controller
     public function update(UpdateActivityRequest $request, Activity $activity)
     {
         //
+        Activity::where('id', '=', $request->activity_id)->update([
+            'activity_name' => $request->activity_name,
+            'date' => $request->date,
+            'place' => $request->place,
+            'user_id' => $request->user_id,
+            'deadline' => $request->deadline,
+        ]);
     }
 
     /**
@@ -114,19 +121,26 @@ class ActivityController extends Controller
         $prize_id = 0;
         $isClaimed = false;
         $user_id = $request->user_id;
+
+
         $activity_id = $request->activity_id;
+
+
         $user = CheckIn::where('activity_id', '=', $activity_id)
             ->where('user_id', '=', $user_id)->get()[0];
+
         if (Recipients::where('user_id', '=', $user_id)->exists()) {
             $recipients = Recipients::where('user_id', '=', $user_id)->get()[0];
             $prize_id = $recipients->prize_id;
+            //因為重新匯入後prize_id在prize下面有改動，但是在recipients下面沒有改動，因此會有問題產生
             //檢查prize_id是不是在activity_id底下
             $aid = Prize::where('id', '=', $prize_id)->get()[0]->activity_id;
-            if($aid == $activity_id){
+
+            if ($aid == $activity_id) {
                 $isRecipients = true;
                 $isClaimed = $recipients->is_claimed;
                 $prize = Prize::where('id', '=', $prize_id)->get()[0]->name;
-            }else{
+            } else {
                 $isRecipients = false;
             }
         } else {
@@ -146,15 +160,14 @@ class ActivityController extends Controller
 
     public function isClaimed(UpdateActivityRequest $request)
     {
-        //這邊要依照prize_id來判斷
         $recipient = Recipients::where('prize_id', '=', $request->prize_id)
-        ->where('user_id', '=', $request->user_id)->get()[0];
+            ->where('user_id', '=', $request->user_id)->get()[0];
         $recipient->is_claimed = true;
         $recipient->save();
         return $recipient;
     }
 
-    //TODO 這邊有兩種insert，要怎麼處理StoreRequest?
+    //這邊有兩種insert，要怎麼處理StoreRequest?
     public function uploadFile(Request $request)
     {
         $option = $request->option;
@@ -180,7 +193,7 @@ class ActivityController extends Controller
         $spreadsheet = $reader->load($inputFileName);
         $worksheet = $spreadsheet->getActiveSheet();
         $highestRow = $worksheet->getHighestDataRow();
-        $activity_id = Activity::where('activity_name', '=', $request->activity_name)->first()->id;
+        $activity_id = ($request->activity_id == 0 ? Activity::where('activity_name', '=', $request->activity_name)->first()->id : $request->activity_id);
 
         if ($option == 'prize') {
             DB::table('prizes')->where('activity_id', '=', $activity_id)->delete();
@@ -191,8 +204,8 @@ class ActivityController extends Controller
                     'name' => $worksheet->getCell([1, $row])->getValue(),
                     'count' => $worksheet->getCell([2, $row])->getValue(),
                     'provider' => $worksheet->getCell([3, $row])->getValue(),
-                    'created_at' => date('Y-m-d H:i:s'),
-                    'updated_at' => date('Y-m-d H:i:s'),
+                    'created_at' => now(),
+                    'updated_at' => now(),
                 ]);
             }
         } else if ($option == 'guest') {
@@ -206,8 +219,8 @@ class ActivityController extends Controller
                     'region' => '來賓',
                     'is_checked_in' => false,
                     'activity_id' => $activity_id,
-                    'created_at' => date('Y-m-d H:i:s'),
-                    'updated_at' => date('Y-m-d H:i:s'),
+                    'created_at' => now(),
+                    'updated_at' => now(),
                 ]);
             }
         }

app/Http/Requests/UpdateActivityRequest.php

@@ -25,7 +25,11 @@ class UpdateActivityRequest extends FormRequest
     {
         return [
             //
+            'activity_name' => 'required',
+            'date' => 'required',
+            'place' => 'required',
             'user_id' => 'required',
+            'deadline' => 'required',
         ];
     }
 }

resources/js/src/@core/layouts/components/AppBreadcrumb.vue

@@ -1,151 +1,121 @@
 <template>
-  <b-row
-    v-if="$route.meta.breadcrumb || $route.meta.pageTitle"
-    class="content-header">
-
-    <!-- Content Left -->
-    <b-col
-      class="content-header-left mb-2"
-      cols="12"
-      md="9">
-      <b-row class="breadcrumbs-top">
-        <b-col cols="12">
-          <h2 class="content-header-title float-left pr-1 mb-0">
-            {{ $route.meta.pageTitle }}
-          </h2>
-          <div class="breadcrumb-wrapper">
-            <b-breadcrumb>
-              <b-breadcrumb-item to="/">
-                <feather-icon
-                  icon="HomeIcon"
-                  size="16"
-                  class="align-text-top" />
-              </b-breadcrumb-item>
-              <b-breadcrumb-item
-                v-for="item in $route.meta.breadcrumb"
-                :key="item.text"
-                :active="item.active"
-                :to="item.to">
-                {{ t(item.text) }}
-              </b-breadcrumb-item>
-            </b-breadcrumb>
-          </div>
+    <b-row v-if="$route.meta.breadcrumb || $route.meta.pageTitle" class="content-header">
+
+        <!-- Content Left -->
+        <b-col class="content-header-left mb-2" cols="12" md="9">
+            <b-row class="breadcrumbs-top">
+                <b-col cols="12">
+                    <h2 class="content-header-title float-left pr-1 mb-0">
+                        {{ $route.meta.pageTitle }}
+                    </h2>
+                    <div class="breadcrumb-wrapper">
+                        <b-breadcrumb>
+                            <b-breadcrumb-item to="/">
+                                <feather-icon icon="HomeIcon" size="16" class="align-text-top" />
+                            </b-breadcrumb-item>
+                            <b-breadcrumb-item v-for="item in $route.meta.breadcrumb" :key="item.text"
+                                :active="item.active" :to="item.to">
+                                {{ t(item.text) }}
+                            </b-breadcrumb-item>
+                        </b-breadcrumb>
+                    </div>
+                </b-col>
+            </b-row>
+        </b-col>
+
+        <!-- Content Right -->
+        <b-col class="content-header-right text-md-right d-md-block d-none mb-1" md="3" cols="12">
+            <b-dropdown v-if="($can('upload', 'blog') && this.$route.name.includes('blog-detail'))" variant="link"
+                no-caret toggle-class="p-0" right>
+
+                <template #button-content>
+                    <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" class="btn-icon">
+                        <feather-icon icon="PenToolIcon" />
+                        <span class="align-middle ml-50">管理貼文</span>
+                    </b-button>
+                </template>
+
+                <b-dropdown-item>
+                    <feather-icon icon="EditIcon" size="16" />
+                    <span class="align-middle ml-50">編輯貼文</span>
+                </b-dropdown-item>
+
+                <b-dropdown-item href="#">
+                    <feather-icon icon="Trash2Icon" size="16" />
+                    <span class="align-middle ml-50">刪除貼文</span>
+                </b-dropdown-item>
+            </b-dropdown>
+
+            <b-button v-if="this.userData.role == 'Admin' && this.$route.name == 'activityList'" variant="success"
+                :to="{ name: 'activityAdd' }">新增活動</b-button>
+
+            <b-dropdown v-if="$can('mange', this.$route.name)" variant="link" no-caret toggle-class="p-0" right>
+
+                <template #button-content>
+                    <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" class="btn-icon">
+                        <feather-icon icon="SettingsIcon" />
+                    </b-button>
+                </template>
+
+                <b-dropdown-item href="#">
+                    <feather-icon icon="CheckSquareIcon" size="16" />
+                    <span class="align-middle ml-50">{{ t('Todo') }}</span>
+                </b-dropdown-item>
+
+                <b-dropdown-item href="#">
+                    <feather-icon icon="MessageSquareIcon" size="16" />
+                    <span class="align-middle ml-50">{{ t('Chat') }}</span>
+                </b-dropdown-item>
+
+                <b-dropdown-item href="#">
+                    <feather-icon icon="MailIcon" size="16" />
+                    <span class="align-middle ml-50">{{ t('Email') }}</span>
+                </b-dropdown-item>
+
+                <b-dropdown-item href="#">
+                    <feather-icon icon="CalendarIcon" size="16" />
+                    <span class="align-middle ml-50">{{ t('Calendar') }}</span>
+                </b-dropdown-item>
+            </b-dropdown>
+
         </b-col>
-      </b-row>
-    </b-col>
-
-    <!-- Content Right -->
-    <b-col
-      class="content-header-right text-md-right d-md-block d-none mb-1"
-      md="3"
-      cols="12">
-      <b-dropdown v-if="($can('upload', 'blog') && this.$route.name.includes('blog-detail'))"
-        variant="link"
-        no-caret
-        toggle-class="p-0"
-        right>
-
-        <template #button-content>
-          <b-button
-            v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-            variant="primary"
-            class="btn-icon">
-            <feather-icon icon="PenToolIcon" />
-            <span class="align-middle ml-50">管理貼文</span>
-          </b-button>
-        </template>
-
-        <b-dropdown-item>
-          <feather-icon
-            icon="EditIcon"
-            size="16" />
-          <span class="align-middle ml-50">編輯貼文</span>
-        </b-dropdown-item>
-
-        <b-dropdown-item href="#">
-          <feather-icon
-            icon="Trash2Icon"
-            size="16" />
-          <span class="align-middle ml-50">刪除貼文</span>
-        </b-dropdown-item>
-      </b-dropdown>
-      <b-dropdown v-if="$can('mange', this.$route.name)"
-        variant="link"
-        no-caret
-        toggle-class="p-0"
-        right>
-
-        <template #button-content>
-          <b-button
-            v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-            variant="primary"
-            class="btn-icon">
-            <feather-icon icon="SettingsIcon" />
-          </b-button>
-        </template>
-
-        <b-dropdown-item href="#">
-          <feather-icon
-            icon="CheckSquareIcon"
-            size="16" />
-          <span class="align-middle ml-50">{{t('Todo')}}</span>
-        </b-dropdown-item>
-
-        <b-dropdown-item href="#">
-          <feather-icon
-            icon="MessageSquareIcon"
-            size="16" />
-          <span class="align-middle ml-50">{{t('Chat')}}</span>
-        </b-dropdown-item>
-
-        <b-dropdown-item href="#">
-          <feather-icon
-            icon="MailIcon"
-            size="16" />
-          <span class="align-middle ml-50">{{t('Email')}}</span>
-        </b-dropdown-item>
-
-        <b-dropdown-item href="#">
-          <feather-icon
-            icon="CalendarIcon"
-            size="16" />
-          <span class="align-middle ml-50">{{t('Calendar')}}</span>
-        </b-dropdown-item>
-      </b-dropdown>
-
-    </b-col>
-  </b-row>
+    </b-row>
 </template>
 
 <script>
 import {
-  BBreadcrumb, BBreadcrumbItem, BRow, BCol, BDropdown, BDropdownItem, BButton,
+    BBreadcrumb, BBreadcrumbItem, BRow, BCol, BDropdown, BDropdownItem, BButton,
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import { useUtils as useI18nUtils } from '@core/libs/i18n'
+import { getUserData } from '@/auth/utils'
 
 export default {
-  setup() {
-    const { t } = useI18nUtils()
-    
-    
-    return {
-      // i18n
-      t,
-    }
-    
-  },
-  directives: {
-    Ripple,
-  },
-  components: {
-    BBreadcrumb,
-    BBreadcrumbItem,
-    BRow,
-    BCol,
-    BDropdown,
-    BDropdownItem,
-    BButton,
-  },
+    setup() {
+        const { t } = useI18nUtils()
+
+        return {
+            // i18n
+            t,
+        }
+
+    },
+    directives: {
+        Ripple,
+    },
+    data() {
+        return {
+            userData: getUserData(),
+        }
+    },
+    components: {
+        BBreadcrumb,
+        BBreadcrumbItem,
+        BRow,
+        BCol,
+        BDropdown,
+        BDropdownItem,
+        BButton,
+    },
 }
 </script>

resources/js/src/router/config.js

@@ -33,28 +33,38 @@ export const settings = {
             },
         },
         {
-            path: '/activityAdd',
-            name: 'activityAdd',
-            component: () => import('@/views/Activities/ActivityAdd.vue'),
+            path: '/activityPage',
+            name: 'activityPage',
+            component: () => import('@/views/Activities/ActivityPage.vue'),
             meta: {
-                pageTitle: '新增活動',
+                pageTitle: '活動功能頁面',
                 breadcrumb: [{
-                    text: '新增活動',
-                    active: true,
-                }, ],
+                        text: '活動列表',
+                        to: '/activityList'
+                    },
+                    {
+                        text: '活動功能頁面',
+                        active: true,
+                    },
+                ],
                 requiresAuth: true,
             },
         },
         {
-            path: '/activityPage',
-            name: 'activityPage',
-            component: () => import('@/views/Activities/ActivityPage.vue'),
+            path: '/activityAdd',
+            name: 'activityAdd',
+            component: () => import('@/views/Activities/ActivityAdd.vue'),
             meta: {
-                pageTitle: '活動功能頁面',
+                pageTitle: '編輯活動資訊',
                 breadcrumb: [{
-                    text: '活動功能頁面',
-                    active: true,
-                }, ],
+                        text: '活動列表',
+                        to: '/activityList'
+                    },
+                    {
+                        text: '編輯活動資訊',
+                        active: true,
+                    },
+                ],
                 requiresAuth: true,
             },
         },
@@ -65,9 +75,19 @@ export const settings = {
             meta: {
                 pageTitle: '兌獎',
                 breadcrumb: [{
-                    text: '兌獎',
-                    active: true,
-                }, ],
+                        text: '活動列表',
+                        to: '/activityList'
+                    },
+                    {
+                        //TODO 回到活動功能頁面後，activity內容會不見
+                        text: '活動功能頁面',
+                        to: '/activityPage'
+                    },
+                    {
+                        text: '兌獎',
+                        active: true,
+                    },
+                ],
                 requiresAuth: true,
             },
         },

resources/js/src/views/Activities/ActivityAdd.vue

@@ -38,7 +38,6 @@
             </b-form>
         </b-card-code>
 
-        <!--TODO 匯入excel功能-->
         <b-row>
             <b-col md="6" lg="6">
                 <b-card title="匯入獎項列表" class="mb-6">
@@ -65,7 +64,11 @@
                 成功上傳資料。
             </b-card-text>
         </b-modal>
-
+        <div class="redirect-back">
+            <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" class="btn-icon" :to="{ name: 'activityList' }">
+                返回頁面
+            </b-button>
+        </div>
     </div>
 
 </template>
@@ -79,6 +82,7 @@ import Ripple from 'vue-ripple-directive'
 import useJwt from '@/auth/jwt/useJwt'
 import { getUserData } from '@/auth/utils'
 
+
 export default {
     components: {
         BCardCode,
@@ -101,23 +105,39 @@ export default {
         return {
             userData: getUserData(),
             activity_name: '',
+            activity_id: 0,
             date: '',
             place: '',
             deadline: '',
             successText: '',
+            activity: [],
+            option: '',
+        }
+    },
+    created() {
+        this.activity = this.$route.params.activity;
+        if (this.activity == undefined) {
+            this.option = 'store';
+        } else {
+            this.option = 'update';
+            this.activity_id = this.activity.id;
+            this.activity_name = this.activity.activity_name;
+            this.date = this.activity.date;
+            this.place = this.activity.place;
+            this.deadline = this.activity.deadline.split(' ')[1];
         }
     },
     methods: {
         postData() {
-            useJwt.postData('/api/activity/store',
+            useJwt.postData('/api/activity/' + this.option,
                 {
+                    'activity_id': this.activity_id,
                     'activity_name': this.activity_name,
                     'date': this.date,
                     'place': this.place,
                     'user_id': this.userData.user_id,
                     'deadline': this.date + ' ' + this.deadline
                 }).then(response => {
-                    console.log(response);
                     this.$refs['confirm-modal'].toggle();
                 }).catch(error => {
                     console.log("error: " + error);
@@ -130,6 +150,7 @@ export default {
             formData.append('option', option);
             //這邊如果使用者在送出資料之後，匯入名單之前改到活動名稱會有問題。
             formData.append('activity_name', this.activity_name);
+            formData.append('activity_id', this.activity_id);
             useJwt.postData('/api/activity/uploadFile', formData).then(response => {
                 this.successText = response.data.success;
                 this.$refs['insert-success-modal'].toggle();
@@ -141,3 +162,12 @@ export default {
     }
 }
 </script>
+
+<style>
+.redirect-back {
+    position: fixed;
+    bottom: 5%;
+    right: 30px;
+    z-index: 99;
+}
+</style>

resources/js/src/views/Activities/ActivityList.vue

@@ -1,46 +1,45 @@
 <template>
-    <div>
-        <div class="col text-center mb-1" v-for="(activity, index) in activities" :key="index">
-            <b-button variant="success" :to="{ name: 'activityPage', params: { 'activity': activity } }">
-                <h2>{{ activity.activity_name }}</h2>
-                <br>
-                地點： {{ activity.place }}
-                <br>
-                時間： {{ activity.date }}
-            </b-button>
-        </div>
-        <div class="col text-center">
-            <b-button variant="success" :to="{ name: 'activityAdd' }">
-                +
-            </b-button>
-        </div>
-
-    </div>
-
+    <b-row class="match-height">
+        <b-col md="6" lg="4" v-for="(activity, index) in activities" :key="index">
+            <b-card no-body border-variant="info" class="text-center">
+                <b-card-body>
+                    <b-card-title>{{ activity.activity_name }}</b-card-title>
+                    <b-card-text>地點： {{ activity.place }}</b-card-text>
+                    <b-card-text>時間： {{ activity.date }}</b-card-text>
+                    <b-button variant="success"
+                        :to="{ name: 'activityPage', params: { 'activity': activity } }">進入活動頁面</b-button>
+                </b-card-body>
+            </b-card>
+        </b-col>
+    </b-row>
 </template>
 
 <script>
-import { BCard, BCardText, BLink, BButton, BButtonGroup, BCol } from 'bootstrap-vue'
+import { BCard, BCardText, BCardBody, BCardTitle, BLink, BButton, BButtonGroup, BRow, BCol } from 'bootstrap-vue'
 import useJwt from '@/auth/jwt/useJwt'
+import { getUserData } from '@/auth/utils'
 
 export default {
     components: {
         BCard,
         BCardText,
+        BCardBody,
+        BCardTitle,
         BLink,
         BButton,
         BButtonGroup,
-        BCol
+        BRow,
+        BCol,
     },
     data() {
         return {
+            userData: getUserData(),
             activities: [],
         }
     },
     created() {
         useJwt.postData('/api/activity/list', null).then(response => {
             this.activities = response.data;
-            console.log(this.activities);
         }).catch(error => {
             console.log("error: " + error);
         });

resources/js/src/views/Activities/ActivityPage.vue

@@ -1,45 +1,98 @@
 <template>
     <div>
-        <div class="col text-center mb-1">
-            <b-button variant="success">報到</b-button>
-        </div>
-        <div class="col text-center mb-1">
-            <b-button variant="success" :to="{ name: 'draw', params: { 'activity': activity } }">抽獎</b-button>
-        </div>
-        <div class="col text-center mb-1">
-            <b-button variant="success" :to="{ name: 'claim', params: { 'activity': activity } }">兌獎</b-button>
+        <b-row class="match-height">
+            <b-col md="6" :lg="lg">
+                <b-card no-body border-variant="info" class="text-center">
+                    <b-card-body>
+                        <b-button variant="success">報到頁面</b-button>
+                    </b-card-body>
+                </b-card>
+            </b-col>
+            <b-col md="6" :lg="lg">
+                <b-card no-body border-variant="info" class="text-center">
+                    <b-card-body>
+                        <b-button variant="success"
+                            :to="{ name: 'draw', params: { 'activity': activity } }">抽獎頁面</b-button>
+                    </b-card-body>
+                </b-card>
+            </b-col>
+            <b-col md="6" :lg="lg">
+                <b-card no-body border-variant="info" class="text-center">
+                    <b-card-body>
+                        <b-button variant="success"
+                            :to="{ name: 'claim', params: { 'activity': activity } }">兌獎頁面</b-button>
+                    </b-card-body>
+                </b-card>
+            </b-col>
+            <b-col v-if="this.userData.role == 'Admin'" md="6" :lg="lg">
+                <b-card no-body border-variant="info" class="text-center">
+                    <b-card-body>
+                        <b-button variant="success"
+                            :to="{ name: 'activityAdd', params: { 'activity': activity } }">編輯活動</b-button>
+                    </b-card-body>
+                </b-card>
+            </b-col>
+            <b-col v-if="this.userData.role == 'Admin'" md="6" :lg="lg">
+                <b-card no-body border-variant="info" class="text-center">
+                    <b-card-body>
+                        <b-button variant="success" @click="test">test</b-button>
+                    </b-card-body>
+                </b-card>
+            </b-col>
+        </b-row>
+        <div class="redirect-back">
+            <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" class="btn-icon"
+                :to="{ name: 'activityList' }">
+                返回頁面
+            </b-button>
         </div>
     </div>
 </template>
 
 <script>
-import { BCard, BCardText, BLink, BButton, BButtonGroup, BCol } from 'bootstrap-vue'
+import { BCard, BCardBody, BCardText, BLink, BButton, BButtonGroup, BRow, BCol } from 'bootstrap-vue'
+import { getUserData } from '@/auth/utils'
 import useJwt from '@/auth/jwt/useJwt'
+import Ripple from 'vue-ripple-directive'
 
 export default {
     components: {
         BCard,
+        BCardBody,
         BCardText,
         BLink,
         BButton,
         BButtonGroup,
-        BCol
+        BRow,
+        BCol,
+    },
+    directives: {
+        Ripple,
     },
     data() {
         return {
             activity: [],
+            userData: getUserData(),
+            lg: 0,
         }
     },
     created() {
         this.activity = this.$route.params.activity;
-        console.log(this.activity);
+        this.userData.role == 'User' ? this.lg = 4 : this.lg = 3;
     },
     methods: {
-
+        test() {
+            console.log(this.activity);
+        }
     }
 }
 </script>
 
 <style>
-
+.redirect-back {
+    position: fixed;
+    bottom: 5%;
+    right: 30px;
+    z-index: 99;
+}
 </style>

resources/js/src/views/PrizeClaim.vue

@@ -49,11 +49,18 @@
             </b-card-text>
         </b-modal>
 
+        <div class="redirect-back">
+            <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" class="btn-icon"
+                :to="{ name: 'activityPage', params: { 'activity': activity } }">
+                返回頁面
+            </b-button>
+        </div>
     </div>
 </template>
 <script>
 import { BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody, BModal } from 'bootstrap-vue'
 import useJwt from '@/auth/jwt/useJwt'
+import Ripple from 'vue-ripple-directive'
 
 export default {
     name: "websocket",
@@ -68,6 +75,9 @@ export default {
         BMediaBody,
         BModal,
     },
+    directives: {
+        Ripple,
+    },
     data() {
         return {
             activity: [],
@@ -122,5 +132,10 @@ export default {
 </script>
 
 <style>
-
+.redirect-back {
+    position: fixed;
+    bottom: 5%;
+    right: 30px;
+    z-index: 99;
+}
 </style>

routes/api.php

@@ -90,6 +90,7 @@ Route::middleware(['auth:sanctum', 'abilities:Admin'])->group(function () {
 
     Route::post('/activity/list', [ActivityController::class, 'index']);
     Route::post('/activity/store', [ActivityController::class, 'store']);
+    Route::post('/activity/update', [ActivityController::class, 'update']);
     Route::post('/activity/sql', [ActivityController::class, 'sql']);
     Route::post('/activity/claim', [ActivityController::class, 'claim']);
     Route::post('/activity/isClaimed', [ActivityController::class, 'isClaimed']);