Merge pull request #65 from traP-jp/fix/mywiki/design

toppage, wikicard
traP-jp · Sep 4, 2024 · 7d72392 · 7d72392
2 parents d8dac40 + c06fae0
commit 7d72392
Show file tree

Hide file tree

Showing 16 changed files with 364 additions and 188 deletions.
diff --git a/docs/openapi.yaml b/docs/openapi.yaml
@@ -190,6 +190,40 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/wikiTag'
+    patch:
+      tags:
+        - wiki
+      summary: wikiのタグを更新
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/wikiTagPatch'
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/wikiTag'
+    delete:
+      tags:
+        - wiki
+      summary: wikiのタグを削除
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/wikiTag'
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/wikiTag'
   /sodan:
     get:
       tags:
@@ -546,6 +580,9 @@ components:
           items:
             type: string
             example: ComputerScience
+        favorites:
+          type: integer
+          example: 3
     folderList:
       type: array
       items:
@@ -635,6 +672,9 @@ components:
           type: array
           items:
             $ref: '#/components/schemas/message'
+        favorites:
+          type: integer
+          example: 3
     message:
       type: object
       properties:
@@ -706,6 +746,9 @@ components:
         updatedAt:
           type: string
           example: 2021-01-01 00:00:00
+        favorites:
+          type: integer
+          example: 3
     memoList:
       type: array
       items:
@@ -737,4 +780,16 @@ components:
           example: 123
         tag:
           type: string
-          example: ComputerScience
+          example: ComputerScience
+    wikiTagPatch:
+      type: object
+      properties:
+        wikiId:
+          type: string
+          example: 123
+        tag:
+          type: string
+          example: ComputerScience
+        newTag:
+          type: string
+          example: Python
diff --git a/index.html b/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
   </head>

diff --git a/src/App.vue b/src/App.vue
@@ -24,7 +24,7 @@ onMounted(async() =>{
 </script>
 
 <template>
-  <div :class="$style.page">
+  <div :class="$style.page" id="page">
     <Header :user-traq-id="userTraqId" />
     <router-view :class="$style.contents" />
   </div>
@@ -33,6 +33,7 @@ onMounted(async() =>{
 .page {
   height: 100%;
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 .contents {
   height: fit-content;

diff --git a/src/components/MarkDownEditor.vue b/src/components/MarkDownEditor.vue
@@ -11,27 +11,8 @@ import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import { useUserStore } from '../store/user'
 import { log } from 'console'
-
-type Memo = {
-    id: number,
-    title: string,
-    ownerTraqId: string,
-    content: string,
-    createdAt: string,
-    updatedAt: string,
-    tags: string[]
-}
-
-type Wiki = {
-    id: number,
-    type: string,
-    title: string,
-    Abstract: string,
-    createdAt: string,
-    updatedAt: string,
-    ownerTraqId: string,
-    tags: string[]
-}
+import Wiki from "../types/wiki";
+import Memo from "../types/memo";
 
 const props = defineProps({
     editorType: Number,

diff --git a/src/components/WikiCard.vue b/src/components/WikiCard.vue
@@ -3,28 +3,21 @@ import { onMounted, ref } from "vue";
 import router from "../router";
 import { useUserStore } from '../store/user.js';
 import { useToast } from "vue-toast-notification";
+import Wiki from "../types/wiki";
 
-type Wiki = {
-  id: number;
-  type: string;
-  title: string;
-  Abstract: string;
-  createdAt: string;
-  updatedAt: string;
-  ownerTraqId: string;
-  tags: string[];
-};
-const props = defineProps({
-  wiki: Object,
+
+const props = defineProps<{
+  wiki: Wiki,
   isMyPage: Boolean
-});
+}>();
 const wiki = ref(props.wiki);
 const isMyPage = ref(props.isMyPage)
 const canDelete = ref<boolean>(false)
 const favorites = ref<Wiki[]>([])
 const hide = ref<boolean>(false)
 const userStore = useUserStore();
 const $toast = useToast();
+const iconUrl = ref<string>("")
 
 
 const SelectWiki = (wiki: Wiki) => {
@@ -52,6 +45,8 @@ onMounted(async() =>{
     }
   });
   canDelete.value = wiki.value.type == "memo" && isMyPage.value
+  iconUrl.value = "https://q.trap.jp/api/v3/public/icon/" + wiki.value.ownerTraqId
+  //iconUrl.value = "https://q.trap.jp/api/v3/public/icon/kavos"
 })
 const StartLiking = async (wiki: Wiki) => {
   if (isLiking.value) {
@@ -65,6 +60,7 @@ const StartLiking = async (wiki: Wiki) => {
         wikiId: wiki.id.toString()
       })
     });
+    wiki.favorites -= 1;
   }else {
     isLiking.value = true;
     await fetch("/api/wiki/user/favorite", {
@@ -76,6 +72,7 @@ const StartLiking = async (wiki: Wiki) => {
         wikiId: wiki.id.toString()
       })
     });
+    wiki.favorites += 1;
   }
 }
 const DeleteMemo = async(wiki: Wiki) =>{
@@ -104,52 +101,63 @@ const DeleteMemo = async(wiki: Wiki) =>{
 </script>
 
 <template>
-  <tr v-if="!hide" class="card" @click="SelectWiki(wiki)">
-    <li class="title">{{ wiki.title }}</li>
-    <li class="content">{{ wiki.Abstract }}</li>
-    <div class="button-container">
-    <div
-      v-for="tag in wiki.tags"
-      :key="tag"
-    >
-      <button
-        class="tag-content"
-        type="button"
-        @click.stop="TagClick(tag)"
-        v-if="tag != ''"
-      >
-        {{ tag }}
-      </button>
+  <div v-if="!hide" :class="$style.card" @click="SelectWiki(wiki)">
+    <img :src="iconUrl" :class="$style.icon" />
+    <header :class="$style.header">
+      <p :class="$style.owner_traq_id">@{{wiki.ownerTraqId}}</p>
+      <p :class="$style.created_at">{{wiki.createdAt}}</p>
+    </header>
+    <div :class="$style.content">
+      <div :class="$style.title">{{ wiki.title }}</div>
+      <div :class="$style.abstract">{{ wiki.Abstract }}</div>
+      <div :class="$style.button_container">
+        <div
+            v-for="tag in wiki.tags"
+            :key="tag"
+        >
+          <button
+              :class="$style.tag_content"
+              type="button"
+              @click.stop="TagClick(tag)"
+              v-if="tag != ''"
+          >
+            {{ tag }}
+          </button>
+        </div>
+      </div>
+      <div :class="$style.button_container">
+        <button v-if="isLiking" :class="$style.iine" @click.stop="StartLiking(wiki)">
+          <font-awesome-icon :icon="['fas', 'heart']" />
+          <span>いいね！</span>
+          <span :class="$style.favorite_count">{{ wiki.favorites }}</span>
+        </button>
+        <button v-else :class="$style.iine" @click.stop="StartLiking(wiki)">
+          <font-awesome-icon :icon="['far', 'heart']" />
+          <span>いいね！</span>
+          <span :class="$style.favorite_count">{{ wiki.favorites }}</span>
+        </button>
+        <button v-if="canDelete" :class="$style.iine" @click.stop="DeleteMemo(wiki)">
+          <font-awesome-icon :icon="['fas', 'trash-can']" transform="shrink-2" />削除
+        </button>
       </div>
     </div>
-    <div class="button-container">
-      <button v-if="isLiking" class="iine" @click.stop="StartLiking(wiki)">
-        <font-awesome-icon :icon="['fas', 'heart']" /> いいね！
-      </button>
-      <button v-else class="iine" @click.stop="StartLiking(wiki)">
-        <font-awesome-icon :icon="['far', 'heart']" /> いいね！
-      </button>
-      <button v-if="canDelete" class="iine" @click.stop="DeleteMemo(wiki)">
-        <font-awesome-icon :icon="['fas', 'trash-can']" transform="shrink-2" />削除
-      </button>
-    </div>
-  </tr>
+  </div>
 </template>
 
-<style scoped>
-.button-container {
+<style module>
+.button_container {
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
-  margin-left: 80px;
+  align-items: center;
 }
 
-.tag-content {
+.tag_content {
   margin: 5px;
   background-color: rgb(244, 244, 244);
 }
 
-.tag-content:hover {
+.tag_content:hover {
   background-color: rgb(211, 211, 211);
 }
 
@@ -162,17 +170,18 @@ const DeleteMemo = async(wiki: Wiki) =>{
   font-size: 20px;
 }
 
-.content {
-  font-size: 15px;
+.abstract {
+  font-size: 25px;
   text-align: left;
-  margin-left: 80px;
   list-style: none;
 }
 
 .card {
   width: 100%;
   height: 100%;
-  display: flex;
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  grid-template-rows: 20px 20px 1fr;
   flex-direction: column;
   padding: 16px;
   background-color: #fff;
@@ -186,12 +195,6 @@ const DeleteMemo = async(wiki: Wiki) =>{
 .title {
   font-size: 35px;
   text-align: left;
-  margin-left: 80px;
-  list-style: none;
-}
-
-.content {
-  font-size: 25px;
   list-style: none;
 }
 
@@ -200,8 +203,47 @@ const DeleteMemo = async(wiki: Wiki) =>{
 }
 
 .iine {
-  padding: 8px;
   font-size: 18px;
-  width: 120px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+
+.icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  grid-column: 1;
+  grid-row: 1 / 3;
+}
+
+.header {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  padding-left: 10px;
+}
+
+.content {
+  grid-column: 2;
+  grid-row: 2 / 4;
+  padding-left: 10px;
+}
+
+.owner_traq_id {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+.created_at {
+  font-size: 0.8em;
+  color: #777777;
+  margin-left: 8px;
+}
+
+.favorite_count {
 }
 </style>