前期

機能詳細

• スイーツ一覧（店舗ごと）
• 店舗に関連するその他のアクションもここからアクセスできる
  • クーポン情報発信
  • 季節限定情報の発信
    • adminで使う場合はトップからこれらの情報を扱う導線があっても使いやすそう

機能詳細

• 編集可能な情報
  • 商品名（テキスト）
  • 価格（テキスト）
  • 説明（テキスト）
  • 画像（アップロード）
  • カテゴリ（プルダウン）
    • 大カテゴリ1つ（和菓子・洋菓子・その他）
    • 小カテゴリ複数（プラスボタンで追加）
  • 入力情報に対してバリデーションがかかる
• 編集ボタンを押すとスイーツ情報が更新されて，スイーツ一覧に戻る
• 削除ボタンを押すとスイーツ情報が削除されて，スイーツ一覧に戻る
• モーダルで実装

概要

• 商品一覧テーブル右上の＋ボタンを押すと商品追加画面が表示されるようにする

概要

• 編集時に小カテゴリの項目をselectタブで複数選択できるようにする

詳細

AS IS(現在)

• 各商品に設定されている少カテゴリの名前が表示されている
  • データの都合で，現在はすべて"未分類"

To Be(期待する実装)

• Multiple Selectを使用して，複数の小カテゴリを選択できる
  • https://material-ui.com/components/selects/#multiple-select
• 選択項目には，現在選択されている大カテゴリに属する小カテゴリのみが表示される
  • 例：大カテゴリが「和菓子」の場合，小カテゴリのセレクト項目は「大福，団子，どら焼き，モナカ，羊かん」
• APIから取得された小カテゴリの値が選択項目に設定されている

ヒント

• columnsのeditComponentでカラムごとの編集時のUIを設定できる

  • Columns.tsxの実装を参考にしてください．
  • https://material-table.com/#/docs/features/custom-column-rendering

• カテゴリ取得のAPIはSwaggerを参照してください

  • https://sweetsapi.per.c.fun.ac.jp/#/Categories

タスク

• 01- 画面設計
• 02- views/ItemEdit.vueを新規作成
• 03- Vue-routerでページ遷移する
• 04- small_category_idによってカテゴリ名を参照できる
• 05- カテゴリが選択リストによって編集できる
• 06- カテゴリ以外の情報は編集不可
• 07- 商品詳細が表示される
• 08- 編集内容を保存できる

完了の定義

example.comからexample.com/edit/:idに遷移して商品のカテゴリのみを編集できる

概要

APIのデータ構造が変わったため、商品テーブルが表示されなくなってしまった。

エラー発生時の商品テーブル

前提

• #2 が完了している

タスク

• 01- v-toolbar内にv-text-fieldを実装
• 02- v-text-field prepend-icon="search"にする
• 03- 商品情報リストを用意
• 04- computedを使用してリアルタイム検索、詳しくは参照

完了の定義

• 商品名で検索できる
• 店舗名で検索できる

タイトル通り

タスク

• 商品データ入力フォームの実装
• APIサーバにデータをPOSTできる
• APIサーバへのPOSTのレスポンスを受け取る
• 登録成功のダイアログ表示
• 登録失敗のダイアログ表示

タスク

• 01-ざっくりと画面設計
• 02-環境構築
• 03-アプリケーションバー実装
• 05-モデル実装
• 04-data-listでUI実装
• 06-apiをfetch
• 07-fetchしたデータを表示
• 08-1度に表示する最大件数が指定できる
• 09-ページ切り替えができる
• 10-カテゴリが設定されているかひと目でわかる

概要

• 各商品名の横に商品画像のアバター（丸いアイコン）を表示する

詳細

AS IS（現在）

• 商品名のみでわかりづらい
  

To Be（期待する実装）

• Avatorコンポーネントを使用して商品名の左に商品画像のアバターが表示されている
  • https://material-ui.com/components/avatars/#avatar

ヒント

• columnsのeditComponentでカラムごとの編集時のUIを設定できる
  • Columns.tsxの実装を参考にしてください．
• 商品画像のURLは sweet.imagePath から取得できる

概要

• 店舗詳細画面(/shops/[id])の 店舗情報欄を実装する

詳細

• Paperを用いて外枠を描画する
• 「店舗情報」の項目はListsで構成されており、各行はクリック可能なListItemで構成されている
• ListDividersを用いて、ListItem同士の境界線を描画する
• 各行をクリックすると、項目ごとの編集画面に遷移する
  • 例：「店舗名」の行をクリックした場合店舗名を編集する画面に遷移

モック

• 店舗情報の部分

モック

参考資料

• Googleのアカウント設定ページを参考にデザインした。
  • https://myaccount.google.com/personal-info

Google 個人情報設定画面

備考

• 遷移先の編集画面は別のIssueに分ける

概要

• カラムごとに条件を絞って検索できるようにする

詳細

• material-tableのFiltering機能を使って各カラムのフィルタリングを実装する
  • https://material-table.com/#/docs/features/filtering

フィルターの詳細

• 商品名
  • テキスト検索
• 価格
  • stringのためフィルターなし
• 説明
  • テキスト検索
• カテゴリ
  • プルダウンで複数選択式
• 販売店舗
  • テキスト検索

概要

• #52 で実装した店舗情報から遷移する各店舗情報を編集する画面を実装する

詳細

TBD

機能詳細

• 入力情報
  • 商品名（テキスト）
  • 価格（テキスト）
  • 説明（テキスト）
  • 画像（アップロード）
  • カテゴリ（プルダウン）
    • 大カテゴリ1つ（和菓子・洋菓子・その他）
    • 小カテゴリ複数（プラスボタンで追加）
      • 上限要検討
  • 入力情報に対してバリデーションがかかる
• 追加ボタンを押すとDB追加されて，スイーツ一覧に戻る

#14 商品詳細モーダルウィンドウにおいてcloseボタンを押してもウィンドウが閉じない

【商品一覧画面】商品詳細表示ボタン押下後のバグ

再現手順

1. Home.vueを表示
2. 商品詳細表示ボタンを押下、モーダルウィンドウが表示される
3. closeボタンを押下しても、開いたモーダルウィンドウが閉じない

修正内容

closeボタンを押したらモーダルウィンドウが閉じるようにする
修正すべきはおそらくcomponents/ItemDetailModal.vueの@Emit,@Propsあたり

概要

• タイトル通り

詳細

タスク

• 01-新しくItemDetailModal.vueを作成
• 02-リストの表示ボタンをクリックするとモーダルウィンドウで表示される
• 03- v-dialogとv-cardを組み合わせて実装

表示項目

• 商品名
• 商品画像
• 商品詳細
• 商品カテゴリ
• 店舗名

機能詳細

• 各店舗ごとのスイーツの一覧をテーブルで表示する
• 表示する情報
  • スイーツ名
  • カテゴリ（大，小）
    • 設定されてない場合は強調する
  • 価格
  • 説明（一部）
  • 更新日（必要そうなら）
• （プラスボタンで）スイーツ追加画面する画面に遷移
• スイーツのセルを選択すると，編集・削除画面に遷移
  • 削除をテーブルから一発でできるようにするかは要検討
• 検索機能
  • スイーツ名で絞り込み
  • カテゴリで絞り込み（未設定を含む）

概要

• 店舗名のタイトルと戻るボタンを実装する

詳細

• 店舗名のタイトルはTypographyを用いる

モック

• 左矢印(←)ボタンと函館柳屋の部分
• 戻るボタンを押すと/shopsに遷移する

モック

概要

• 更新操作などを限られたユーザに制限するためにログイン機能を実装する

詳細

• ログインの手法などを検討する

機能詳細

• 店舗を選択するための表
• 表示する情報
  • 店舗名
  • 商品数
• 店舗名で検索ができる
• 店舗をクリックすると，店舗詳細に遷移する

• 画面遷移で実装する
• ページネーション を実装する
• より詳細な情報を入れる（各カテゴリ名、店舗名の追加）

概要

• 01-価格を消す
• 02-大カテゴリと小カテゴリを区別して表示す
• 03-設定されているカテゴリをCHIPで表示する
• 04-初期表示を10件にする
• 05-右下の 1-5 of 80 をできれば日本語にする

概要

• スイーツ一覧画面の設定されていないアイコンを実装する

設定項目

• 検索フォーム（左：虫眼鏡，右：バツ）
• テーブルヘッダーの並べ替え
• テーブルフッターのページネーション

アイコンの設定方法

• https://github.com/mbrn/material-table#2add-material-icons のExampleを参考にする
  • 検索フォームの左側アイコンは Search を設定するとできる
• https://material-table.com/#/docs/features/custom-column-rendering で同じことをやっている

タスク

• 画面設計
• Firebaseのプロジェクトを作る
• Firebaseをvueリポジトリにyarn add
• FIrebaseAuthenticationを実装
• UIを実装

FirebaseUI でウェブアプリに簡単にログイン機能を追加する

• 01-重複カテゴリを弾くためのバリデーションを書く
• 02-ローカル上のデータ(jsonなど)を編集できる
• 03-編集したデータが商品一覧画面に反映される

概要

• 編集時に大カテゴリの項目をselectタブで選択できるようにする
  • 選択項目：和菓子，洋菓子，その他

詳細

AS IS(現在)

• 大カテゴリの部分にカテゴリIDが表示されている

To Be(期待する実装)

• 編集時の大カテゴリのUIが「和菓子，洋菓子，その他」を選択できるタブになっている
• Simple Select を使うのが良さそう
  • https://material-ui.com/components/selects/#select
• APIから取得された大カテゴリの値が選択項目に設定されている

推奨方針

1. まずは選択項目の値はハードコード（固定値）で良いので，編集時の大カテゴリのUIをタブにする
2. UIができたら，大カテゴリの値をサーバから取得して表示する

ヒント

• columnsのeditComponentでカラムごとの編集時のUIを設定できる
  • Columns.tsxの実装を参考にしてください．
  • https://material-table.com/#/docs/features/custom-column-rendering が公式ドキュメント
• カテゴリ取得のAPIはSwaggerを参照してください
  • https://sweetsapi.per.c.fun.ac.jp/#/Categories

#install npm i jsonwebtoken;
##requar form server side;

const jwt = requar('jsonwebtoken');

go to your vs code ...

open treminar or (ctrl + j);

node => Enter => requre('crypto').randomBytes(64).toString('hex')

copy and seve your .env file

作成するデモデータ

• 大カテゴリが設定されている
• 小カテゴリが配列で複数設定されている

概要

• クーポンカードの実装

詳細

• Paperを用いて外枠を描画する
• 「クーポン」の項目はListsで構成されており、各行はクリック可能なListItemで構成されている
• ListDividersを用いて、ListItem同士の境界線を描画する
• 「登録数」の行は店舗ごとに登録されているクーポンの数を表示する
• 「登録数」の行をクリックすると「店舗ごとのクーポン一覧」画面(/shops/[id]/coupons)に遷移する

モック

• クーポンの部分

モック

備考

• 先に管理者用の /coupons 画面を実装した方が良さそう
• APIがクーポンに対応する必要がある

概要

• 取扱商品カードの実装

詳細

• Paperを用いて外枠を描画する
• 「取扱商品」の項目はListsで構成されており、各行はクリック可能なListItemで構成されている
• ListDividersを用いて、ListItem同士の境界線を描画する
• 「登録数」の行は店舗ごとに登録されている商品の数を表示する
• 「登録数」の行をクリックすると「店舗ごとの取扱商品一覧」画面(/shops/[id]/sweets)に遷移する

モック

• 取扱商品の部分

モック

概要

• 店舗一覧をいい感じにする

詳細

• 現状の店舗一覧が仮実装の段階であるため、改善案を提案し、機能の追加とデザインの修正を行う
  • 例：タイトルをつけたり、検索機能をつけたり、etc...

備考

• 担当者が本Issueに改善案をまとめて、実装に入る
• 改善するページのリンク
  • https://hakodate-sweets-management-web.now.sh/shops

概要

/coupons を実装する

イメージは商品一覧に似た感じ

詳細

• クーポンの型の定義とAPIからのfetch
• クーポン一覧テーブルの表示

HINT

• https://sweetsapi.per.c.fun.ac.jp/coupons

概要

• スイーツ一覧テーブルの情報を日本語化する

詳細

AS-IS(現状)

• 商品テーブルの表示が英語になっている
  • 検索ボックス
    • プレースホルダーの Search
  • フッターのページネーション
    • 5 rows
    • 1-10 of 79
    • ページネーションボタンにカーソルを当てたときに出てくるツールチップ： Next Page
  • 検索結果がないとき
    • No records to display と英語のメッセージが表示される

TO BE(改善後)

• 商品テーブルの表示が日本語になっている
  • 検索ボックス
    • プレースホルダー： 検索
  • フッターのページネーション
    • 5行
    • 1-10件 / 79件
    • ページネーションボタンにカーソルを当てたときに出てくるツールチップ： 次のページ
  • 検索結果がないとき
    • 検索条件に一致する結果はありません。などの日本語のメッセージが表示される

Hint

• https://material-table.com/#/docs/features/localization
• ファイルが肥大化するので、localization.ts にlocalization変数を切り出してimportしたほうが良さそう

概要

詳細

AS IS(現在)

• 編集モードのチェックボタンを押しても何も起きない

To Be(期待される実装)

1. 編集モードのチェックボタンを押すと，APIに編集リクエストを投げる
2. 編集リクエストのレスポンスを受け取った後，商品一覧をAPIから再読込みして更新する
3. エラーが有った場合は内容が通知される

概要

• メニューのドロワーがコンテンツのスクロールによってスクロールされてしまう．
• コンテンツがスクロールされてもドロワーは固定されていないといけない．

スクショ