😊

Svelte + GraphQLで form登録、select radio checkbox等

2021/07/24に公開

概要:

前の svelte + GraphQLの続編で、

apollo serverは、前のHeadless CMS対応版になります

  • 結合は、1:1 select ,1:N checkbox

環境

  • svelte: 3.0.0
  • @apollo/client 3.3.20
  • apollo server
  • svelte-apollo 0.4.0

参考のコード

https://github.com/kuc-arc-f/svelte2_8head_form


実装など

  • create
    src/pages/books/create.svelte

  • select : bind:value で、初期値を設定

  • radio: on:changeで、ハンドラ起動 値の設定

  • checkbox: bind:groupで、JS配列にID設定

  • 保存は、 add_item() で、apollo 経由でheadless CMSに追加

create.svelte
export let select_list = [], radio_items = [], check_items = [], radio_1 = '';
export let select_list_id = "", selected_tags = []; 
setClient(client);

const init_items = async function (){
  try {
    const types = await LibContent.get_items("book_types")
    const book_category = await LibContent.get_items("book_category")
    const book_tags = await LibContent.get_items("book_tags")
    var type = types.filter(item => (item.values.name === 'select_1'));
    var category = book_category.filter(item => (item.values.name === 'food'));
//console.log(book_tags) 
    select_list = types;
    select_list_id = type[0].id
    radio_items = book_category;
    check_items = book_tags;
    radio_1 = category[0].id
  } catch (error) {
    console.error(error);
  }  
}
init_items()

function onChangeCategory(event) {
  radio_1 = event.currentTarget.value;
console.log("selected=", radio_1)
}
async function handleClick() {
//  alert('clicked')
  await add_item()
}
async function add_item(){
  try {
    var elemTitle = document.getElementById('title');
    var elemContent = document.getElementById('content');
    var csv = await LibContent.array_to_csv(selected_tags) 
    var item = {
      title: elemTitle.value,
      content: elemContent.value,
      type_1: select_list_id,
      radio_1: radio_1,
      check_1: csv,
    }
console.log(item)
    const result = await LibContent.add_item(
      "books", item, ""
    )
//console.log(result)
    window.location.href = '/#/books/'
  } catch (error) {
    console.error(error);
  }    
}
</script>

<!-- -->
<div class="container">
	<h3>Books - Create</h3>
  <hr />
  <div class="form-group w-50">
    <label>Title:</label><br />
    <input type="text" class="form-control w-full" name="title" id="title" />
    <label>Content:</label>
    <input type="text" name="content" id="content" class="form-control" />
    <hr />
    <div class="col-md-6 form-group">
      <label>BookType:</label>
      <select class="form-select" name="type_1" id="type_1" bind:value ={select_list_id}>
        {#each select_list as item}
          <option value={item.id}>{item.values.name}</option>
        {/each}          
      </select>
    </div>
    <hr class="my-2" />     
    <div class="form-group mt-1">
      <p class="my-1">Category:</p>
      {#each radio_items as item}
      <span class="mx-1"> 
        <input checked={radio_1===item.id } type="radio"
          name="category_id" value={item.id} on:change={onChangeCategory} />{item.values.name}
      </span>
      {/each}
    </div>
    <hr class="my-2" />
    Tag選択:<br />
    {#each check_items as item}
    <label class="mx-1"> 
      <input type="checkbox" bind:group={selected_tags} value={item.id} />{item.values.name}
    </label>
    {/each}    
  </div>
  <hr />
  <button on:click={handleClick} class="btn btn-primary">Save</button>
</div>

  • create form画面


関連のページ

  • svelte-apollo (svelte + apollo client)、GraphQL操作の導入

https://zenn.dev/knaka0209/articles/6a5c86bf8a29d8

  • svelteで、form部品値の設定

https://zenn.dev/knaka0209/books/7571c1bf92a762/viewer/651a31

....

Discussion