grant medal

admin/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "element-plus": "^1.0.2-beta.44",
+    "element-plus": "^1.3.0-beta.5",
     "vue": "^3.0.5",
     "vue-router": "^4.0.6"
   },

admin/src/main.js

@@ -2,6 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import router from './router/index'
-import 'element-plus/lib/theme-chalk/index.css'
+import 'element-plus/theme-chalk/index.css'
 import './styles/common.scss'
 createApp(App).use(ElementPlus).use(router).mount('#app')

admin/src/utils/api.js

@@ -129,6 +129,9 @@ const api = {
     removeUserMedal: (id) => {
         return axios.delete('user-medals/' + id);
     },
+    storeUserMedal: (params) => {
+        return axios.post('user-medals', params);
+    },
 
 }
 

admin/src/views/user/detail.vue

@@ -22,6 +22,7 @@
                             <el-button type="primary" size="mini" @click="handleGetModComment">Mod comment</el-button>
                             <el-button type="primary" size="mini" @click="handleResetPassword">Reset password</el-button>
                             <el-button type="primary" size="mini" @click="handleAssignExam">Assign exam</el-button>
+                            <el-button type="primary" size="mini" @click="handleGrantMedal">Grant medal</el-button>
                         </div>
                     </td>
                 </tr>
@@ -206,6 +207,7 @@
         </el-row>
     </div>
     <DialogAssignExam ref="assignExam" :reload="fetchPageData"/>
+    <DialogGrantMedal ref="grantMedal" :reload="fetchPageData"/>
     <DialogViewInviteInfo ref="viewInviteInfo" />
     <DialogDisableUser ref="disableUser" :reload="fetchPageData" />
     <DialogModComment ref="modComment" />
@@ -222,17 +224,19 @@ import DialogViewInviteInfo from './dialog-invite-info.vue'
 import DialogDisableUser from './dialog-disable-user.vue'
 import DialogModComment from './dialog-mod-comment.vue'
 import DialogResetPassword from './dialog-reset-password.vue'
+import DialogGrantMedal from './dialog-grant-medal.vue'
 
 export default {
     name: "UserDetail",
     components: {
-        DialogAssignExam, DialogViewInviteInfo, DialogDisableUser, DialogModComment, DialogResetPassword
+        DialogAssignExam, DialogViewInviteInfo, DialogDisableUser, DialogModComment, DialogResetPassword, DialogGrantMedal
     },
     setup() {
         const route = useRoute()
         const router = useRouter()
         const { id } = route.query
         const assignExam = ref(null)
+        const grantMedal = ref(null)
         const viewInviteInfo = ref(null)
         const disableUser = ref(null)
         const modComment = ref(null)
@@ -273,6 +277,9 @@ export default {
         const handleAssignExam = async () => {
             assignExam.value.open(id)
         }
+        const handleGrantMedal = async () => {
+            grantMedal.value.open(id)
+        }
         const handleViewInviteInfo = async () => {
             viewInviteInfo.value.open(id)
         }
@@ -301,6 +308,7 @@ export default {
             handleRemoveExam,
             handleAvoidExam,
             handleAssignExam,
+            handleGrantMedal,
             handleRecoverExam,
             handleEnableUser,
             handleViewInviteInfo,
@@ -310,6 +318,7 @@ export default {
             fetchPageData,
             handleRemoveUserMedal,
             assignExam,
+            grantMedal,
             viewInviteInfo,
             disableUser,
             modComment,

admin/src/views/user/dialog-grant-medal.vue

@@ -0,0 +1,98 @@
+<template>
+    <el-dialog
+        title="Grant medal to user"
+        v-model="visible"
+        center
+        :close-on-click-modal="false"
+    >
+        <el-form
+            :model="formData"
+            label-width="100px"
+            v-loading="loading"
+            ref="formRef"
+            :rules="rules">
+            <el-form-item label="Medal" prop="medal_id">
+                <el-select v-model="formData.medal_id" placeholder="Select an medal...">
+                    <el-option
+                        v-for="item in medals"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="Duration" prop="duration">
+                <el-input v-model="formData.duration" placeholder="Unit: day, if empty, it's valid forever"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+                <span class="dialog-footer">
+                  <el-button @click="visible = false">Cancel</el-button>
+                  <el-button type="primary" @click="handleSubmit">Save</el-button>
+                </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import {useRoute, useRouter} from 'vue-router'
+import api from '../../utils/api'
+
+export default {
+    name: "DialogGrantMedal",
+    props: {
+        reload: Function
+    },
+    setup(props, context) {
+        const formRef = ref(null)
+        const state = reactive({
+            loading: false,
+            medals: [],
+            visible: false,
+            formData: {
+                uid: 0,
+                medal_id: '',
+                duration: '',
+            },
+            rules: {
+                medal_id: [{ required: 'true'}]
+            }
+        })
+        const listMedals = async () => {
+            let res = await api.listMedal()
+            state.medals = res.data.data
+        }
+        const open = (uid) => {
+            state.formData.uid = uid
+            if (state.medals.length == 0) {
+                state.loading = true
+                listMedals()
+                state.loading = false
+            }
+            state.visible = true
+
+        }
+        const handleSubmit = () => {
+            formRef.value.validate(async (valid) => {
+                if (valid) {
+                    let res = await api.storeUserMedal(state.formData)
+                    state.visible = false
+                    ElMessage.success(res.msg)
+                    if (props.reload) {
+                        props.reload()
+                    }
+                }
+            })
+        }
+        return {
+            ...toRefs(state),
+            handleSubmit,
+            formRef,
+            open,
+
+        }
+    }
+}
+</script>