[Advent Calendar 2021][Day14]カレンダー登録機能を作る

undefined
はじめに
Advent Calendar 2021のDay14。 カレンダー登録機能を作っていきます。 すこし、UIがなんのCSSも入っておらず、さみしいので徐々にUIも作っていこうと思います。とりあえず、UI関連のパッケージを追加します。
UI関連パッケージ追加
UIに関するパッケージをいくつか追加します。
yarn add tailwindcss --devnpx tailwindcss init -pyarn add daisyui --devyarn add @heroicons/vue --dev
tailwindは定番になったとおもいます。 他にHeroiconとDaisyUIというパッケージをインストールしました。
- daisyUI
tailwindは、CSSのFrameworkですが、それを利用してComponentを作ったのがDaisyUIです。定番のコンポーネントが少ないコード量でかけるので気に入っています。
- Heroicons
tailwindの作者が作成しているアイコンセットです。他にマテリアルアイコンや、Fontawesomeなどありますが、特に見劣りせず使えると思います。
Nuxt3でTailwindとdaisyUIを使う
下記の記述を追記します。
- nuxt.config.ts
css: ['tailwindcss/tailwind.css'],
build: {
postcss: {
// add Postcss options
postcssOptions: require('./postcss.config.js'),
},
},
- taiwlwind.config.js
module.exports = {
content: [
"./components/**/*.{vue,js,jsx,ts,tsx}",
"./layouts/**/*.{vue,js,jsx,ts,tsx}",
"./pages/**/*.{vue,js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [
require('daisyui'),
],
}
カレンダー登録機能を作る
すでに前回にHasuraの権限設定は終わっているので、Mutationの実装をすれば動くと思います。
InsertCalendarMutationを記述する
Hasuraのコンソールから、Mutationのクエリを作れるので、それをgql/queries/calendar.graphql
に追記します。
- gql/queries/calendar.graphql
カレンダー名を指定してカレンダーを登録できるようにします。
mutation InsertCalendarMutation($name: String!) { insert_calendars_one(object: {name: $name}) { updated_at id name uid }}
typescriptのコードを自動生成します。
yarn graphql-codegen
モーダルを表示してMutationを実行する
daisyUIが提供してくれるModalコンポーネントを使って、カレンダー名
を入力してカレンダーを作るボタン
を押すと、カレンダーが作られるようにします。
<template v-else> <button @click="nuxtApp.$firebase.signOut()">logout</button> <button v-if="user" @click="nuxtApp.$firebase.deleteUser()">deleteUser</button>+ <button @click="openModal">カレンダーを作る</button> </template>+ <div id="my-modal" :class="modalClass">+ <div class="modal-box">+ <p>タイトル</p>+ <div class="form-control">+ <label class="label">+ <span class="label-text">カレンダー名</span>+ </label>+ <input+ v-model="calendarName"+ type="text"+ class="input input-primary input-bordered"+ />+ </div>+ <div class="modal-action">+ <a @click="insert" class="btn btn-primary">カレンダーを作る</a>+ <a @click="closeModal" class="btn">閉じる</a>+ </div>+ </div>+ </div> </section></template><script setup lang="ts">-import { MyQueryDocument } from "~/gql/queries/calendar";+import { MyQueryDocument, InsertCalendarMutationDocument, InsertCalendarMutationMutationVariables } from "~/gql/queries/calendar";import { useClientHandle } from "@urql/vue";import { useNuxtApp } from '#app'const urql = useClientHandle();-const { data, fetching } = await urql.useQuery({ query: MyQueryDocument })+const queryResult = await urql.useQuery({ query: MyQueryDocument })const { data, fetching } = await queryResultconst nuxtApp = useNuxtApp()const user = useState<boolean>('user')+const modalClass = useState<any>('modalClass', () => ({ 'modal': true, 'modal-open': false }))+const openModal = () => {+ modalClass.value = { 'modal': true, 'modal-open': true }+}+const closeModal = () => {+ modalClass.value = { 'modal': true, 'modal-open': false }+}+let calendarName = useState<string>('calendarName', () => '')+const insertCalendarResult = urql.useMutation(InsertCalendarMutationDocument);+const insert = () => {+ const variables: InsertCalendarMutationMutationVariables = {+ name: calendarName.value+ };+ insertCalendarResult.executeMutation(variables).then(async (result) => {+ await queryResult.executeQuery({+ requestPolicy: 'network-only',+ })+ closeModal()+ });+}</script>
まとめ
今回は、カレンダー登録機能を作りました。 次回は、カレンダー参加機能を作ります。
