Merge pull request #51 from traP-jp/search&addFavorite

できてるか確認お願いします

docs/openapi.yaml

@@ -10,6 +10,8 @@ tags:
     description: 講習会情報
   - name: wiki
     description: sodanと備忘録
+  - name: sodan
+    description: 匿名sodan
   - name: user
     description: ユーザー関連
   - name: other
@@ -286,6 +288,92 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/memo'
+  /anon-sodan:
+    post:
+      tags:
+        - sodan
+      summary: 匿名のsodanの作成
+      description: Endpoint to create a new anonymous sodan.
+      requestBody:
+        description: JSON object containing the content of the sodan.
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                content:
+                  type: string
+                  example: "This is example content."
+      responses:
+        '200':
+          description: Successfully created sodan
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/sodan'
+    patch:
+      tags:
+        - sodan
+      summary: 匿名sodanの編集
+      description: Endpoint to edit an existing anonymous sodan.
+      parameters:
+        - name: wikiId
+          in: query
+          required: true
+          schema:
+            type: string
+          description: wikiID
+      requestBody:
+        description: JSON object containing the ID and new content of the sodan.
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                content:
+                  type: string
+                  example: "This is edited content."
+      responses:
+        '200':
+          description: Successfully edited sodan
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/sodan'
+  /anon-sodan/replies:
+    post:
+      tags:
+        - sodan
+      summary: 匿名相談の回答に対する返信
+      description: Endpoint to reply to an anonymous sodan.
+      parameters:
+        - name: wikiId
+          in: query
+          description: The ID of the sodan to which the reply is being made.
+          required: true
+          schema:
+            type: integer
+      requestBody:
+        description: JSON object containing the reply content.
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                content:
+                  type: string
+                  example: "This is a reply to the sodan."
+      responses:
+        '200':
+          description: Successfully replied to the sodan
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/sodan'
+
   /wiki/user:
     get:
       tags:

src/components/Header.vue

@@ -1,6 +1,48 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import router from "../router";
+import { useRoute } from "vue-router";
+
+const SearchWord = ref<string>("");
+const Words = ref<string[]>([]);
+const ErrorMessage = ref<string>("");
+const tags = ref<string[]>([]);
+const keywords = ref<string[]>([]);
+const Submit = () => {
+  if (SearchWord.value == "") {
+    return false;
+  }
+  tags.value = [];
+  keywords.value = [];
+  const SearchWords = SearchWord.value.split(/\s+/);
+  // SearchWords.forEach((SearchWord) =>{
+  //     Words.value = Words.value.concat(SearchWord.split("　"));
+  // })
+  SearchWords.forEach((word) => {
+    if (word.substring(0, 1) == "#" || word.substring(0, 1) == "＃") {
+      if (word.substring(1) != "") {
+        tags.value.push(word.substring(1));
+      }
+    } else {
+      if (word != "") {
+        keywords.value.push(word);
+      }
+    }
+  });
+  router.push(
+    "/wiki/search?tags=" +
+      tags.value.join(",") +
+      "&keywords=" +
+      keywords.value.join(",")
+  );
+};</script>
 <template>
   <div :class="$style.header">
     <div :class="$style.header_header">QuickWiki</div>
+    <div :class="$style.search">
+      <input v-model="SearchWord" type="search" @keypress.enter="Submit" :class="$style.text_box" size="50"/>
+      <button @click="Submit"><font-awesome-icon :icon="['fas', 'fa-search']" /></button>
+    </div>
     <header :class="$style.header_list">
       <ul>
         <router-link to="/wiki/mywiki">
@@ -26,7 +68,7 @@
   top: 0;
   z-index: 10;
   background-color: #ffffff;
-  box-shadow: 0px 2px 1px 0px #5e5e5e;
+  box-shadow: 0 2px 1px 0 #5e5e5e;
 }
 
 .header_list a {
@@ -76,6 +118,15 @@
   display: inline-block;
   padding: 0px 10px;
 }
-</style>
-<script setup>
-</script>
+
+.text_box {
+  height: 30px;
+  border-radius: 8px;
+}
+
+.search {
+  position: absolute;
+  top: 30px;
+  right: 50px;
+}
+</style>

src/components/WikiCard.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import router from '../router';
+import { ref } from "vue";
+import router from "../router";
 type Wiki = {
-    id: number,
-    type: string,
-    title: string,
-    Abstract: string,
-    createdAt: string,
-    updatedAt: string,
-    ownerTraqId: string,
-    tags: string[]
-}
+  id: number;
+  type: string;
+  title: string;
+  Abstract: string;
+  createdAt: string;
+  updatedAt: string;
+  ownerTraqId: string;
+  tags: string[];
+};
 const props = defineProps({
-  wiki: Object
-})
+  wiki: Object,
+});
 const wiki = ref(props.wiki);
 
 const SelectWiki = (wiki: Wiki) => {
@@ -24,34 +24,64 @@ const SelectWiki = (wiki: Wiki) => {
     router.push("/memo/" + wiki.id.toString());
   }
 };
-const TagClick = (tag :string) => {
-    router.push('/tag/' + tag.replace(/ /g, "+"))
+const TagClick = (tag: string) => {
+  router.push("/tag/" + tag.replace(/ /g, "+"));
+};
+
+const isLiking = ref<boolean>(false);
+const StartLiking = async (wiki: Wiki) => {
+  if (isLiking.value) {
+    isLiking.value = false;
+    await fetch("/api/wiki/user/favorite", {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        wikiId: wiki.id.toString()
+      })
+    });
+  }else {
+    isLiking.value = true;
+    await fetch("/api/wiki/user/favorite", {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        wikiId: wiki.id.toString()
+      })
+    });
+  }
 }
 </script>
 
 <template>
-    <tr
-      v-if="wiki != null"
-      class="card"
-      @click="SelectWiki(wiki)"
+  <tr v-if="wiki != null" class="card" @click="SelectWiki(wiki)">
+    <li class="title">{{ wiki.title }}</li>
+    <li class="content">{{ wiki.Abstract }}</li>
+    <div class="tag-container">
+    <div
+      v-for="tag in wiki.tags"
+      :key="tag"
     >
-        <li class="title">{{ wiki.title }}</li>
-        <li class="content">{{ wiki.Abstract }}</li>
-      <div class="tag-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>
+      <button
+        class="tag-content"
+        type="button"
+        @click.stop="TagClick(tag)"
+        v-if="tag != ''"
+      >
+        {{ tag }}
+      </button>
       </div>
-    </tr>
+    </div>
+    <button v-if="isLiking" class="iine" @click="StartLiking(wiki)">
+      <font-awesome-icon :icon="['fas', 'heart']" /> いいね！
+    </button>
+    <button v-else class="iine" @click="StartLiking(wiki)">
+      <font-awesome-icon :icon="['far', 'heart']" /> いいね！
+    </button>
+  </tr>
 </template>
 
 <style scoped>
@@ -63,8 +93,6 @@ const TagClick = (tag :string) => {
 }
 
 .tag-content {
-  display: flex;
-  align-items: left;
   margin: 5px;
 }
 
@@ -89,7 +117,6 @@ const TagClick = (tag :string) => {
 }
 .title {
   font-size: 20px;
-  user-select: none;
 }
 
 .content {
@@ -124,7 +151,14 @@ const TagClick = (tag :string) => {
   list-style: none;
 }
 
-.title:hover{
+.title:hover {
   text-decoration: underline solid #000000 0.15rem;
 }
+
+.iine {
+  padding: 8px;
+  font-size: 18px;
+  width: 120px;
+  margin-left: 80px;
+}
 </style>

src/main.js

@@ -9,9 +9,8 @@ import 'vue-toast-notification/dist/theme-bootstrap.css';
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faBold, faItalic, faStrikethrough, faQuoteRight, faListUl, faListOl, faTable, faSquareCheck, faTrashCan, faImage, faLink, faHeart } from '@fortawesome/free-solid-svg-icons'
-import { far } from "@fortawesome/free-regular-svg-icons";
-library.add( faBold, faItalic, faStrikethrough, faQuoteRight, faListOl, faListUl, faTable, faSquareCheck, faTrashCan, faImage, faLink, faHeart, far )
-
+import { faBold, faItalic, faStrikethrough, faQuoteRight, faListUl, faListOl, faTable, faSquareCheck, faTrashCan, faImage, faLink, faHeart, faSearch } from '@fortawesome/free-solid-svg-icons'
+import { far } from '@fortawesome/free-regular-svg-icons';
+library.add( faBold, faItalic, faStrikethrough, faQuoteRight, faListOl, faListUl, faTable, faSquareCheck, faTrashCan, faImage, faLink, faHeart, faSearch,far)
 const pinia = createPinia();
 createApp(App).use(Router).use(ToastPlugin).use(pinia).use(vuetify).component('font-awesome-icon', FontAwesomeIcon).mount('#app')

src/pages/MyWiki.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import "../styles/SideBar.css";
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import WikiCard from '../components/WikiCard.vue';
@@ -21,9 +20,7 @@ type Wiki = {
 const wikis = ref<Wiki[]>([]);
 
 onMounted(async () => {
-  const resMyWiki = await fetch(
-    "/api/wiki/user"
-  );
+  const resMyWiki = await fetch("/api/wiki/user");
   if (resMyWiki.ok) {
     wikis.value = await resMyWiki.json();
   }else{
@@ -53,19 +50,11 @@ onMounted(async () => {
 
 .container {
   display: flex;
-  margin-top: 95px;
+  height: 100vh;
 }
 
 main {
   flex: 1 1 auto;
   background: #f2f2f2;
 }
-
-.content {
-  background-color: #d63a3a;
-  font-size: 35px;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-}
 </style>