Merge pull request #224 from ss1119/feature/#221

Feature/#221

components/layouts/SaveDialog.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-dialog :value="open" width="450px" @input="close">
+    <v-card>
+      <v-card-title>
+        {{ cardTitle }}
+      </v-card-title>
+
+      <v-card-text>
+        <p>{{ cardText }}</p>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="close"> 閉じる </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: 'SaveDialog',
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      cardTitle: '得点を保存しました',
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close', false)
+    },
+  },
+}
+</script>
+
+<style></style>

components/layouts/index.js

@@ -1,5 +1,6 @@
 import Header from './Header'
 import NavDrawer from './NavDrawer'
 import LogOutDialog from './LogOutDialog'
+import SaveDialog from './SaveDialog'
 
-export { Header, NavDrawer, LogOutDialog }
+export { Header, NavDrawer, LogOutDialog, SaveDialog }

package.json

@@ -38,7 +38,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-prettier-vue": "^3.1.0",
     "eslint-plugin-vue": "^7.15.1",
-    "node-sass": "^4.12.0",
+    "node-sass": "5.0.0",
     "prettier": "^2.3.2",
     "sass-loader": "^10.1.1"
   }

pages/user/edit.vue

@@ -64,18 +64,21 @@
 
       <CardButton :title="btnTitle" :icon="btnIcon" :submit="postPoints" />
     </v-card>
+    <SaveDialog :open="saveConfirm" @close="close" />
   </v-row>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import { SaveDialog } from '~/components/layouts/index'
 import { CardTitle, CardButton } from '~/components/card/index'
 
 export default {
   name: 'UserEdit',
   components: {
     CardTitle,
     CardButton,
+    SaveDialog,
   },
   data() {
     return {
@@ -98,6 +101,7 @@ export default {
       },
       selected: '',
       selectItems: ['希望しない', '希望する'],
+      saveConfirm: false,
     }
   },
   computed: {
@@ -192,7 +196,7 @@ export default {
           point: points,
           isGraduate: selected,
         })
-        this.$router.push('/user')
+        this.saveConfirm = true
       } else {
         window.scrollTo(0, 0)
       }
@@ -212,6 +216,10 @@ export default {
         return re.test(value)
       }
     },
+    close() {
+      this.saveConfirm = false
+      this.$router.push('/user')
+    },
   },
 }
 </script>