Merge branch 'master' of github.com:ProgrammingLab/prolab-accounts-client into kp/header

Author: mucho613

package-lock.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "ajv": "^5.5.2",
     "axios": "^0.18.0",
-    "rxjs": "^6.4.0",
+    "moment": "^2.24.0",
+    "rxjs": "^6.5.1",
     "vue": "^2.6.10",
     "vue-analytics": "^5.16.4",
     "vue-meta": "^1.6.0",

package.json

@@ -46,14 +46,33 @@ div.achievement:hover {
 div.achievement:hover dd.year {
   color: inherit;
 }
+div.achievement::after{
+  display: block;
+  content: "";
+  height: 30px;
+  width: 100%;
+  position: absolute;
+  bottom: 250px;
+  background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
+}
+div.achievement:hover::after{
+  opacity: 0;
+}
 p {
   text-overflow: ellipsis;
 }
 img {
   width: 100%;
+  height: 250px;
+  object-fit: cover;
+  position: relative;
+  z-index: 2;
+  background: white;
 }
 dl {
-  margin: 20px;
+  margin: 20px 20px 0;
+  height: 150px;
+  overflow: hidden;
 }
 dt {
   font-size: 1.4rem;
@@ -80,20 +99,18 @@ dd.year {
   font-family: "Barlow";
 }
 .members {
-  display: hidden;
   position: absolute;
+  z-index: 3;
   background-color: #222;
   color: white;
+  top: 150px;
   padding: 20px;
   margin-top: 40px;
   border-radius: 8px;
   opacity: 0;
   transition: ease-in-out 0.2s;
 }
 div.achievement:hover .members {
-  position: absolute;
-  padding: 20px;
-  border-radius: 8px;
   opacity: 0.95;
 }
 .members ul {

src/components/Achievement.vue

@@ -100,7 +100,7 @@
     <div>
       <input class="save" type="submit" value="保存" :disabled="!isValid || sending">
       <button class="cancel" v-on:click.prevent="$emit('close')" :disabled="sending">キャンセル</button>
-      <button class="erase" v-on:click.prevent="onDelete" :disabled="sending">削除</button>
+      <button class="erase" v-on:click.prevent="$emit('delete')" :disabled="sending">削除</button>
     </div>
     <div>
       <ErrorMessage :error="achievementError"/>
@@ -111,6 +111,7 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import { debounceTime } from 'rxjs/operators';
+import moment from 'moment';
 import ErrorMessage from '@/components/ErrorMessage.vue';
 import Multiselect from 'vue-multiselect';
 import ImageSelector from '@/components/ImageSelector.vue';
@@ -151,11 +152,11 @@ export default {
         if (!this.achievement.happened_at) {
           return null;
         }
-        const date = this.achievement.happened_at.substring(0, '2019-01-01'.length);
-        return date;
+        return moment(this.achievement.happened_at).local().format('YYYY-MM-DD');
       },
       set(newValue) {
-        this.achievement.happened_at = `${newValue}T00:00:00Z`;
+        const UTCDate = moment(newValue).utc().format('YYYY-MM-DD[T]HH:mm:ss[Z]');
+        this.achievement.happened_at = UTCDate;
       },
     },
     isImageTooLarge() {
@@ -167,7 +168,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions('achievement', ['saveAchievement', 'deleteAchievement']),
+    ...mapActions('achievement', ['saveAchievement']),
     ...mapActions('memberIntroduction/searchPrivateMembers', ['searchMembers']),
     onSubmit() {
       this.saveAchievement({
@@ -176,9 +177,6 @@ export default {
         image: this.image,
       });
     },
-    onDelete() {
-      this.deleteAchievement({ sessionID: this.sessionID, achievement: this.achievement });
-    },
     onSearchChanged(query) {
       this.searchMembers({ sessionID: this.sessionID, query });
     },

src/components/EditAchievement.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <button class="edit" v-on:click="editting = true" v-if="!editting">編集</button>
-    <EditAchievement v-if="editting" :defaultAchievement="defaultAchievement" v-on:close="onClose"/>
+    <EditAchievement
+      v-if="editting"
+      :defaultAchievement="defaultAchievement"
+      v-on:close="onClose"
+      @delete="$emit('delete', defaultAchievement)"
+    />
     <Achievement v-else :achievement="defaultAchievement"/>
   </div>
 </template>

src/components/EditableAchievement.vue

@@ -0,0 +1,113 @@
+<template>
+  <transition name="modal">
+    <div class="modal-mask" @click="$emit('cancel')" v-if="isOpened">
+      <div class="modal-wrapper">
+        <div class="modal-container" @click.stop>
+
+          <div class="modal-header">
+            <h1>
+              <slot name="header">
+                ! Header is not set !
+              </slot>
+            </h1>
+          </div>
+
+          <div class="modal-body">
+            <p>
+              <slot name="body">
+                ! Body is not set !
+              </slot>
+            </p>
+          </div>
+
+          <div class="modal-footer">
+            <slot name="footer" :onClick="(val)=>$emit('click', val)">
+              ! Footer is not set !
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    isOpened: Boolean,
+  },
+};
+</script>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .8);
+  display: table;
+  transition: opacity .1s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 50%;
+  min-width: 300px;
+  margin: 0px auto;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgb(0, 0, 0, .75);
+  transition: all .1s ease;
+}
+
+.modal-header  {
+  margin: 0;
+}
+
+.modal-header h1 {
+  font-size: x-large;
+  margin: 0;
+  padding: 0;
+}
+
+.modal-body {
+  margin: 20px 0;
+  overflow: auto;
+  max-height: 50vh;
+}
+
+.modal-body p {
+  font-size: medium;
+  margin: 0;
+  padding: 0;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+.modal-footer >>> * {
+  margin: 5px;
+}
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(0.9);
+  transform: scale(0.9);
+}
+</style>

src/components/Modal.vue

@@ -5,36 +5,71 @@
       <button v-on:click="createNewAchievement">戦歴を新しく追加する</button>
       <ul>
         <li v-for="item in achievements" :key="item.achievement_id">
-          <EditableAchievement :defaultAchievement="item"/>
+          <EditableAchievement :defaultAchievement="item" @delete="deleteConfirmation"/>
         </li>
       </ul>
     </section>
+    <Modal
+      :isOpened="confirmationIsOpened"
+      @cancel="confirmationIsOpened = false"
+      @click="onModalClick"
+    >
+      <template #header>警告</template>
+      <template #body>
+        戦歴「{{deleteTerget.title}}」を削除しようとしています。<br/>
+        よろしいですか。
+      </template>
+      <template #footer="{ onClick }">
+        <button class="danger-button" @click="onClick(true)">削除</button>
+        <button @click="onClick(false)">キャンセル</button>
+      </template>
+    </Modal>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions, mapMutations } from 'vuex';
 import EditableAchievement from '@/components/EditableAchievement.vue';
+import Modal from '@/components/Modal.vue';
 
 export default {
   name: 'editAchievements',
   metaInfo: {
     title: '実績編集',
   },
+  data() {
+    return {
+      deleteTerget: null,
+      confirmationIsOpened: false,
+    };
+  },
   components: {
     EditableAchievement,
+    Modal,
   },
   computed: {
     ...mapState('achievement', ['achievements']),
     ...mapState('session', ['sessionID']),
   },
   methods: {
     ...mapActions(
-      'achievement', ['getAchievements'],
+      'achievement', ['getAchievements', 'deleteAchievement'],
     ),
     ...mapMutations(
       'achievement', ['createNewAchievement'],
     ),
+    deleteConfirmation(achievement) {
+      this.deleteTerget = achievement;
+      this.confirmationIsOpened = true;
+    },
+    onModalClick(isAgreed) {
+      this.confirmationIsOpened = false;
+      if (!isAgreed) return;
+      this.deleteAchievement({
+        sessionID: this.sessionID,
+        achievement: this.deleteTerget,
+      });
+    },
   },
   async created() {
     this.getAchievements(this.sessionID);
@@ -63,6 +98,9 @@ button {
   margin-bottom: 0.25rem;
   margin-right: 0.25rem;
 }
+button.danger-button {
+  background: #b50000;
+}
 li {
   list-style: none;
   width: 24%;