ContentCardの統合

Author: NEKOYASAN

src/components/ContentCard.vue

@@ -1,53 +1,69 @@
 <template>
-  <v-card class="ContentCard elevation-4">
-    <v-card-actions class="ContentCard-Actions">
-      <subject-tag
-        v-for="(item, idx) in subjects"
-        :key="idx"
-        class="ContentCard-SubjectTag"
-        :name="item.name || '教科名'"
-        :icon="item.icon || ''"
-        :icon-color="item.iconColor || 'white'"
-        :background-color="item.backgroundColor || '#A5D8FF'"
+  <div class="ContentCard-Outer">
+    <v-card class="ContentCard elevation-4">
+      <v-card-actions class="ContentCard-Actions">
+        <subject-tag
+          class="ContentCard-SubjectTag"
+          :name="lesson.subject.name || '教科名'"
+          :icon="lesson.subject.icon || ''"
+          :icon-color="lesson.subject.iconColor || 'white'"
+          :background-color="lesson.subject.color || '#A5D8FF'"
+        />
+        <subject-tag
+          v-if="lesson.videos.length >= 1"
+          class="ContentCard-SubjectTag"
+          :name="'動画'"
+          :icon="'mdi-video'"
+          :icon-color="'#424242'"
+          :background-color="'#E0E0E0'"
+        />
+      </v-card-actions>
+      <v-card-title>
+        <h2 class="ContentCard-Title">{{ lesson.title }}</h2>
+      </v-card-title>
+      <v-card-text>
+        <p class="ContentCard-Description">{{ lesson.description }}</p>
+      </v-card-text>
+    </v-card>
+    <div v-if="editable" class="ContentCard-Button-Outer">
+      <content-card-editor-button
+        class="ContentCard-Button"
+        icon-name="mdi-eye-off"
+        @click="$emit('toggleHidden')"
       />
-      <subject-tag
-        v-if="hasVideo"
-        class="ContentCard-SubjectTag"
-        :name="'動画'"
-        :icon="'mdi-video'"
-        :icon-color="'#424242'"
-        :background-color="'#E0E0E0'"
+      <content-card-editor-button
+        class="ContentCard-Button"
+        icon-name="mdi-pencil"
+        @click="$emit('clickEditButton')"
       />
-    </v-card-actions>
-    <v-card-title>
-      <h2 class="ContentCard-Title">{{ title }}</h2>
-    </v-card-title>
-    <v-card-text>
-      <p class="ContentCard-Description">{{ description }}</p>
-    </v-card-text>
-  </v-card>
+      <!--
+      <content-card-editor-button
+        class="ContentCard-Button"
+        icon-name="mdi-file-multiple"
+      />
+      -->
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import SubjectTag from '@/components/SubjectTag.vue'
+import ContentCardEditorButton from '@/components/ContentCardEditorButton.vue'
+import { classData } from '~/types/store/classData'
 
 export default Vue.extend({
-  components: { SubjectTag },
+  components: {
+    SubjectTag,
+    ContentCardEditorButton
+  },
   props: {
-    subjects: {
-      type: Array,
-      default: () => []
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    description: {
-      type: String,
-      default: ''
+    lesson: {
+      type: Object as () => classData.Lesson,
+      required: true,
+      default: () => {}
     },
-    hasVideo: {
+    editable: {
       type: Boolean,
       default: false
     }
@@ -56,7 +72,20 @@ export default Vue.extend({
 </script>
 
 <style scoped lang="scss">
+.ContentCard-Outer {
+  display: flex;
+}
+.ContentCard-Button-Outer {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  margin-left: 12px;
+  .ContentCard-Button {
+    margin-bottom: 12px;
+  }
+}
 .ContentCard {
+  flex: 1 1 auto;
   color: $color-gray;
   border-radius: 14px !important;
   .ContentCard-Actions {

src/components/ContentCardEditable.vue

@@ -18,14 +18,7 @@
         cols="12"
         md="6"
       >
-        <content-card
-          :description="item.description"
-          :title="item.title"
-          :subjects="[
-            { name: item.subject.name, backgroundColor: item.subject.color }
-          ]"
-          :has-video="item.videos.length !== 0"
-        />
+        <content-card :lesson="item" />
       </v-col>
     </v-row>
   </div>

src/components/PeriodCard.vue

@@ -18,8 +18,9 @@
         cols="12"
         md="6"
       >
-        <content-card-editable
+        <content-card
           :lesson="item"
+          :editable="true"
           @clickEditButton="$emit('clickEditButton', item)"
         />
       </v-col>
@@ -30,11 +31,11 @@
 <script lang="ts">
 import Vue from 'vue'
 import dayjs from 'dayjs'
-import ContentCardEditable from '@/components/ContentCardEditable.vue'
+import ContentCard from '~/components/ContentCard.vue'
 import { classData } from '~/types/store/classData'
 
 export default Vue.extend({
-  components: { ContentCardEditable },
+  components: { ContentCard },
   props: {
     classData: {
       type: Object as () => classData.Lesson,