Merge pull request #663 from osushi-academy/develop

update
osushi-academy · Jan 20, 2022 · 578fcae · 578fcae
2 parents b6b48cc + 43f9853
commit 578fcae
Show file tree

Hide file tree

Showing 43 changed files with 1,568 additions and 713 deletions.
diff --git a/app/front/apiClient/index.ts b/app/front/apiClient/index.ts
@@ -1,5 +1,6 @@
 import { NuxtAxiosInstance } from "@nuxtjs/axios"
-import { RestApi, PathsWithMethod } from "sushi-chat-shared"
+import { RestApi, PathsWithMethod, EmptyRecord } from "sushi-chat-shared"
+import getIdToken from "~/utils/getIdToken"
 
 type PathObject<
   Method extends "get" | "post" | "put",
@@ -9,6 +10,13 @@ type PathObject<
   params: RestApi<Method, Path>["params"]
 }
 
+type PathOrPathObj<
+  Method extends "get" | "post" | "put",
+  Path extends PathsWithMethod<Method>,
+> = Path extends `${string}:${string}`
+  ? PathObject<Method, Path>
+  : Path | PathObject<Method, Path>
+
 /**
  * PathObjectからパスを組み立てる関数
  * @param path PathObject
@@ -32,7 +40,6 @@ const pathBuilder = (path: {
  *  async asyncData({ app }) {
  *    const sampleResponse = await app.$apiClient.get(
  *      { pathname: "/room/:id/history", params: { id: "roomId" } },
- *      {},
  *    )
  *    if (sampleResponse.result === "success") {
  *      const rooms = sampleResponse.data
@@ -54,7 +61,8 @@ export default class Repository {
    * idTokenを設定する
    * @param idToken idToken
    */
-  public setToken(idToken: string | null) {
+  public async setToken() {
+    const idToken = await getIdToken()
     if (idToken != null) {
       this.nuxtAxios.setToken(`Bearer ${idToken}`)
     } else {
@@ -65,18 +73,18 @@ export default class Repository {
   /**
    * getリクエストを行う
    * @param path エンドポイントを表すPathObjectまたはパス文字列（パスパラメータ（`:xyz`）を含まない場合は直接文字列を指定可能）
-   * @param data 送信するデータ
+   * @param query クエリパラメータ
    * @returns レスポンス
    */
   public async get<Path extends PathsWithMethod<"get">>(
-    path: Path extends `${string}:${string}`
-      ? PathObject<"get", Path>
-      : Path | PathObject<"get", Path>,
-    data: RestApi<"get", Path>["request"],
+    ...[path, query]: RestApi<"get", Path>["query"] extends EmptyRecord
+      ? [path: PathOrPathObj<"get", Path>]
+      : [path: PathOrPathObj<"get", Path>, query: RestApi<"get", Path>["query"]]
   ) {
+    await this.setToken()
     return await this.nuxtAxios.$get<RestApi<"get", Path>["response"]>(
       typeof path === "string" ? path : pathBuilder(path),
-      { data },
+      { params: query },
     )
   }
 
@@ -87,14 +95,32 @@ export default class Repository {
    * @returns レスポンス
    */
   public async post<Path extends PathsWithMethod<"post">>(
-    path: Path extends `${string}:${string}`
-      ? PathObject<"post", Path>
-      : Path | PathObject<"post", Path>,
-    data: RestApi<"post", Path>["request"],
+    ...[path, body, query]: RestApi<"post", Path>["request"] extends EmptyRecord
+      ? RestApi<"post", Path>["query"] extends EmptyRecord
+        ? [path: PathOrPathObj<"post", Path>]
+        : [
+            path: PathOrPathObj<"post", Path>,
+            body: RestApi<"post", Path>["request"],
+            query: RestApi<"post", Path>["query"],
+          ]
+      : RestApi<"post", Path>["query"] extends EmptyRecord
+      ? [
+          path: PathOrPathObj<"post", Path>,
+          body: RestApi<"post", Path>["request"],
+        ]
+      : [
+          path: PathOrPathObj<"post", Path>,
+          body: RestApi<"post", Path>["request"],
+          query: RestApi<"post", Path>["query"],
+        ]
   ) {
+    await this.setToken()
     return await this.nuxtAxios.$post<RestApi<"post", Path>["response"]>(
       typeof path === "string" ? path : pathBuilder(path),
-      data,
+      body,
+      {
+        params: query,
+      },
     )
   }
 
@@ -105,14 +131,32 @@ export default class Repository {
    * @returns レスポンス
    */
   public async put<Path extends PathsWithMethod<"put">>(
-    path: Path extends `${string}:${string}`
-      ? PathObject<"put", Path>
-      : Path | PathObject<"put", Path>,
-    data: RestApi<"put", Path>["request"],
+    ...[path, data, query]: RestApi<"put", Path>["request"] extends EmptyRecord
+      ? RestApi<"put", Path>["query"] extends EmptyRecord
+        ? [path: PathOrPathObj<"put", Path>]
+        : [
+            path: PathOrPathObj<"put", Path>,
+            body: RestApi<"put", Path>["request"],
+            query: RestApi<"put", Path>["query"],
+          ]
+      : RestApi<"put", Path>["query"] extends EmptyRecord
+      ? [
+          path: PathOrPathObj<"put", Path>,
+          body: RestApi<"put", Path>["request"],
+        ]
+      : [
+          path: PathOrPathObj<"put", Path>,
+          body: RestApi<"put", Path>["request"],
+          query: RestApi<"put", Path>["query"],
+        ]
   ) {
+    await this.setToken()
     return await this.nuxtAxios.$put<RestApi<"put", Path>["response"]>(
       typeof path === "string" ? path : pathBuilder(path),
       data,
+      {
+        params: query,
+      },
     )
   }
 }
diff --git a/app/front/assets/scss/home/home.scss b/app/front/assets/scss/home/home.scss
@@ -126,28 +126,28 @@
       display: grid;
       margin: 1rem 0;
       grid-template-columns: auto 1fr;
+      align-items: center;
       &__index {
         grid-column: 1;
         margin: 0 0.5rem 0 0;
         &--element {
-          margin: 0.2rem 0 0.9em 0;
-          padding: 0.5rem 0;
+          margin: 0 0 0.5rem 0;
+          padding: 0.55rem 0;
         }
       }
       &__list {
         grid-column: 2;
         &--element {
           display: flex;
           align-items: center;
-          width: 85%;
           margin: 0 0 0.5rem 0;
           &--input {
             display: flex;
             flex: 1;
             margin: 0 0.5rem 0 0;
             padding: 0 !important;
-            @include white-text-box($expand: "true");
             input {
+              width: 100%;
               border: none;
               flex: 1;
               padding: 0;
@@ -158,7 +158,7 @@
             }
           }
           &--remove {
-            margin: 0.2rem;
+            margin: 0.2rem 0;
             @include material-icon-button(
               $size: "sm",
               $color: #f07b7b,
@@ -171,6 +171,7 @@
             }
           }
           &--sort {
+            margin: 0;
             cursor: grab !important;
             @include material-icon-button;
             &--dragging {

diff --git a/app/front/assets/scss/home/variables.scss b/app/front/assets/scss/home/variables.scss
@@ -88,8 +88,8 @@
   $color: $text-gray,
   $border: "none"
 ) {
-  width: 36px;
-  height: 36px;
+  width: 24px;
+  height: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;

diff --git a/app/front/assets/scss/index.scss b/app/front/assets/scss/index.scss
@@ -105,7 +105,7 @@
   &__details {
     position: relative;
     z-index: 0;
-    background-color: white;
+    background-color: rgba(255, 255, 255, 0.1);
     padding: 15px;
     border-bottom: 1px solid rgb(239, 239, 239);
     &--filter-btn {
@@ -150,11 +150,20 @@
     & > .icon {
       transform: rotate(20deg);
     }
-    &--text {
+    &--button {
       flex: 1;
-      font-size: 14px;
+    }
+    &--content {
+      display: -webkit-box;
       word-break: break-all;
+      overflow-wrap: anywhere;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
       text-align: left;
+      font-size: 100%;
+      width: 100%;
+      max-height: 2.5rem;
     }
     &--close-icon {
       flex-shrink: 0;
@@ -228,7 +237,6 @@
     overflow-y: hidden;
 
     & > .scrollable {
-      scroll-snap-type: y mandatory;
       overflow-y: scroll;
       padding: 1em 1rem;
       @include scrollbar-hidden;
@@ -628,7 +636,6 @@
   .reaction {
     position: relative;
     width: 100%;
-    min-height: 5rem;
     flex-grow: 1;
     flex-shrink: 0;
     padding: 0em 0.8em 0.35em;
@@ -655,26 +662,25 @@
         word-break: break-all;
         overflow-wrap: anywhere;
         margin-left: 0.5em;
-        & > .long-text {
+        & .long-text--button {
           flex: 1;
-          display: -webkit-box;
+        }
+        & .long-text--content {
           color: $text-gray;
           font-size: 80%;
           text-align: left;
+          display: -webkit-box;
           word-break: break-all;
           overflow-wrap: anywhere;
           margin-bottom: 0.3rem;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           overflow: hidden;
-          &:hover {
-            text-decoration: underline;
-            cursor: pointer;
-          }
+          width: 100%;
+          max-height: 2rem;
         }
       }
     }
-
     .comment-footer {
       display: flex;
       align-items: flex-end;

diff --git a/app/front/assets/scss/sushiselect.scss b/app/front/assets/scss/sushiselect.scss
@@ -90,7 +90,8 @@
     }
     &--speaker {
       position: relative;
-      width: 400px;
+      width: 100%;
+      max-width: 400px;
       margin-bottom: 50px;
       & > .select-speaker {
         -webkit-appearance: none;
@@ -99,15 +100,12 @@
         width: 100%;
         padding: 10px;
         padding-right: 2.5em;
-        border: 1px solid transparent;
-        border-radius: 10px;
+        border: none;
+        border-radius: 4px;
+        background: white;
         outline: none;
         cursor: pointer;
         @include text-size("normal");
-
-        &:focus-visible {
-          border-color: rgb(214, 214, 214);
-        }
       }
 
       & > .select-icon {

diff --git a/app/front/components/ChatRoom.vue b/app/front/components/ChatRoom.vue
@@ -37,8 +37,10 @@
         </transition-group>
         <div v-if="showGraph" class="graph-wrapper">
           <div class="graph-action-area" style="text-align: end">
-            <button class="close-button" @click="showGraph = false">
-              <XIcon></XIcon>
+            <button @click="showGraph = false">
+              <span class="close-button">
+                <XIcon></XIcon>
+              </span>
             </button>
           </div>
           <AnalysisGraph :topic-title="topic.title" :topic-id="topicId" />
@@ -59,7 +61,11 @@
           :topic-id="topicId"
         />
       </div>
-      <button class="message-badge" :class="{ isNotify }" @click="clickScroll">
+      <button
+        class="message-badge"
+        :class="{ isNotify }"
+        @click="scrollToBottom"
+      >
         <ArrowDownIcon size="1.2x"></ArrowDownIcon>
       </button>
     </div>
@@ -197,7 +203,7 @@ export default Vue.extend({
       } catch (e) {
         window.alert("メッセージの送信に失敗しました")
       }
-      this.clickScroll()
+      this.scrollToBottom()
       this.selectedChatItem = null
     },
     // リアクションボタン
@@ -236,8 +242,9 @@ export default Vue.extend({
       }
     },
     // いちばん下までスクロール
-    clickScroll() {
+    scrollToBottom() {
       const element: Element | null = (this.$refs.scrollable as Vue).$el
+      console.log(element?.scrollHeight)
       if (element) {
         element.scrollTo({
           top: element.scrollHeight,
@@ -275,6 +282,9 @@ export default Vue.extend({
     },
     clickShowAll() {
       this.isAllCommentShowed = true
+      Vue.nextTick(() => {
+        setTimeout(() => this.scrollToBottom(), 100)
+      })
     },
     clickNotShowAll() {
       this.isAllCommentShowed = false

diff --git a/app/front/components/Home/Modal.vue b/app/front/components/Home/Modal.vue
@@ -40,7 +40,7 @@ export default Vue.extend({
   computed: {
     width() {
       if (DeviceStore.device === "smartphone") {
-        return "100%"
+        return "90%"
       } else {
         return "50%"
       }

diff --git a/app/front/components/Message.vue b/app/front/components/Message.vue
@@ -35,16 +35,18 @@
         </div>
         <div v-else class="text">
           <button
-            class="long-text"
+            class="long-text--button"
             @click.stop="
               // NOTE: 型推論のためにifを追加
               if (message.quote != null) scrolltoMessage(message.quote.id)
             "
           >
-            <template v-if="message.type != 'answer'">
-              > {{ message.quote.content }}
-            </template>
-            <template v-else> Q. {{ message.quote.content }} </template>
+            <span class="long-text--content">
+              <template v-if="message.type != 'answer'">
+                > {{ message.quote.content }}
+              </template>
+              <template v-else> Q. {{ message.quote.content }} </template>
+            </span>
           </button>
           <UrlToLink :text="message.content" />
         </div>