From 33e0918f0416b9156ef6e259601de9e31475400a Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Thu, 6 Jan 2022 16:19:59 +0900
Subject: [PATCH] Add member progress component

---
 .../components/statistics/MemberProgress.vue  | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 frontend/components/statistics/MemberProgress.vue

diff --git a/frontend/components/statistics/MemberProgress.vue b/frontend/components/statistics/MemberProgress.vue
new file mode 100644
index 00000000..6d624344
--- /dev/null
+++ b/frontend/components/statistics/MemberProgress.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-card>
+    <v-card-title>Member's Progress</v-card-title>
+    <v-divider />
+    <v-card-text>
+      <div
+        v-for="(item, index) in stats.progress"
+        :key="index"
+        class="mb-2"
+      >
+        <span class="font-weight-medium">{{ item.user }}</span>
+        <span class="font-weight-medium">{{ item.done }} / {{ stats.total }}</span>
+        <v-progress-linear :value="rate(item.done, stats.total)" />
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  data() {
+    return {
+      stats: {}
+    }
+  },
+
+  async created() {
+    this.stats = await this.$services.statistics.fetchMemberProgress(this.$route.params.id)
+  },
+
+  methods: {
+    rate(done: number, total: number) {
+      return done / total * 100
+    }
+  }
+})
+</script>