Merge pull request #57 from traP-jp/test/backend

Test/backend

src/components/Header.vue

@@ -33,14 +33,15 @@ const Submit = () => {
     "/wiki/search?tags=" +
       tags.value.join(",") +
       "&keywords=" +
-      keywords.value.join(",")
+      keywords.value.join(",") +
+      "&page=0"
   );
 };</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"/>
+      <input v-model="SearchWord" type="search" @keypress.enter="Submit" :class="$style.text_box" size="50" placeholder="すべてのsodanとmemoを検索"/>
       <button @click="Submit"><font-awesome-icon :icon="['fas', 'fa-search']" /></button>
     </div>
     <header :class="$style.header_list">
@@ -122,6 +123,7 @@ const Submit = () => {
 .text_box {
   height: 30px;
   border-radius: 8px;
+  border: 1px solid #aaa;
 }
 
 .search {

src/components/WikiCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import router from "../router";
 type Wiki = {
   id: number;
@@ -15,6 +15,7 @@ const props = defineProps({
   wiki: Object,
 });
 const wiki = ref(props.wiki);
+const favorites = ref<Wiki[]>([])
 
 const SelectWiki = (wiki: Wiki) => {
   console.log(wiki);
@@ -29,6 +30,18 @@ const TagClick = (tag: string) => {
 };
 
 const isLiking = ref<boolean>(false);
+onMounted(async() =>{
+  const res = await fetch("/api/wiki/user/favorite");
+
+  if(res != null && res.ok){
+    favorites.value = await res.json();
+  }
+  favorites.value.forEach(favorite => {
+    if(wiki.value != null && favorite.id == wiki.value.id){
+      isLiking.value = true;
+    }
+  });
+})
 const StartLiking = async (wiki: Wiki) => {
   if (isLiking.value) {
     isLiking.value = false;
@@ -75,10 +88,10 @@ const StartLiking = async (wiki: Wiki) => {
       </button>
       </div>
     </div>
-    <button v-if="isLiking" class="iine" @click="StartLiking(wiki)">
+    <button v-if="isLiking" class="iine" @click.stop="StartLiking(wiki)">
       <font-awesome-icon :icon="['fas', 'heart']" /> いいね！
     </button>
-    <button v-else class="iine" @click="StartLiking(wiki)">
+    <button v-else class="iine" @click.stop="StartLiking(wiki)">
       <font-awesome-icon :icon="['far', 'heart']" /> いいね！
     </button>
   </tr>
@@ -94,20 +107,28 @@ const StartLiking = async (wiki: Wiki) => {
 
 .tag-content {
   margin: 5px;
+  background-color: rgb(244, 244, 244);
+}
+
+.tag-content:hover {
+  background-color: rgb(211, 211, 211);
 }
 
-.card tr:hover {
+.card:hover {
   background-color: rgb(211, 211, 211);
 }
-.card tr:has(.tag:hover) {
+.card:has(.tag-container:hover) {
+  background-color: rgb(244, 244, 244);
+}
+.card:has(.iine:hover) {
   background-color: rgb(244, 244, 244);
 }
-.card tr {
+.card{
   background-color: rgb(244, 244, 244);
   padding-right: 4px;
   width: 30%;
   height: 70px;
-  transition: background-color 0.175s 0.075s ease-out;
+  transition: background-color 0.25s ease-in-out;
 }
 .card {
   border-spacing: 0 2px;

src/pages/Search.vue

@@ -24,14 +24,20 @@ const wikis = ref<Wiki[]>([]);
 const pageNum = ref<number>(0);
 
 async function Search(keywords :string[], tags :string[], startNum: number) {
-    const responce = await fetch('/api/wiki/search', {
+  const filterTags = tags.filter(function(value){
+    return value != "";
+  })
+  const filterKeyWord = keywords.filter(function(value){
+    return value != "";
+  })
+  const responce = await fetch('/api/wiki/search', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          query: keywords[0], 
-          tags: tags,
+          query: filterKeyWord[0], 
+          tags: filterTags,
           resultCount: 20,
           from: startNum})
     }).catch((e) => {
@@ -88,7 +94,7 @@ const nextPage = () =>{
     )
 }
 const backPage = () =>{
-  pageNum.value--;
+  if(pageNum.value > 0)pageNum.value--;
   router.push("/wiki/search?tags=" +
     getTags.value.join(",") +
     "&keywords=" +
@@ -103,7 +109,7 @@ const backPage = () =>{
   <table class="cardTable">
     <WikiCard :wiki="wiki" v-for="wiki in wikis" :key="wiki.id" />
   </table>
-  <button type="button" @click="backPage">back</button>
+  <button type="button" @click="backPage" v-if="pageNum > 0">back</button>
   <button type="button" @click="nextPage">next</button>
 </template>
 <style scoped>