かっこいい ドラッグ & ドロップ でレコードの並び替え ’26

# #
# 配列を初期化
変数を設定 [ $list ; 値: "[]" ]
# 
# 並び替え配列を作成
変数を設定 [ $i ; 値: 1 ]
Loop [ フラッシュ: 常に ]
	Exit Loop If [ $i > Get(対象レコード数) ]
	変数を設定 [ $list ; 値: JSONSetElement ( $list; 	[ "[+]"; 	JSONSetElement ( "{}"; 		[ "recordId"; GetLayoutObjectAttribute ( "recordId" ; "content"; 1; $i ); JSONString ]; 		[ "label"; GetLayoutObjectAttribute ( "label" ; "content"; 1; $i ); JSONString ]; 		[ "thumb"; GetLayout… ]
	変数を設定 [ $i ; 値: $i +1 ]
End Loop
# 
# 並び替え配列を表示
// テキストを挿入 [ 選択 ; ターゲット: $list ; 「[   {     "recid": "101",     "label": "外部データ A"   },   {     "recid": "102",     "label": "外部データ B"   },   {     "recid": "103",     "label": "外部データ C"   } ]」 ]
Web ビューアで JavaScript を実行 [ オブジェクト名: "wv" ; 関数名: "setOrder" ; 引数: $list ]
# 
# 
# 

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import Sortable from 'sortablejs'

const itemsRef = ref(null)
let sortable = null

const items = ref([])

onMounted(() => {
  if (itemsRef.value) {
    sortable = Sortable.create(itemsRef.value, {
      animation: 150,
      ghostClass: 'blue-background-class'
    })
  }

  window.setOrder = (json) => {
    let data = json
    if (typeof json === 'string') {
      try {
        data = JSON.parse(json)
      } catch (e) {
        console.error(e)
        return
      }
    }
    if (Array.isArray(data)) {
      items.value = data.map((item) => {
        let thumb = item.thumb
        if (thumb && typeof thumb === 'string' && !thumb.startsWith('data:')) {
          thumb = thumb.startsWith('/9j/')
            ? `data:image/jpeg;base64,${thumb}`
            : `data:image/png;base64,${thumb}`
        }
        return {
          recordId: String(item.recordId),
          label: item.label,
          thumb: thumb
        }
      })
    }
  }
})

const getOrder = () => {
  if (sortable) {
    // alert(sortable.toArray())
    exec("getOrder", sortable.toArray())
  }
}

const exec = (s, p) => {
  if(window.FileMaker != null) {
      window.FileMaker.PerformScriptWithOption(s, p, 0);
  } else {
      setTimeout(exec, 1000, s, p); // 1s = 1000ms
  };
}

onUnmounted(() => {
  delete window.setOrder
})
</script>

<template>
  <button @click="getOrder">並び順を取得</button>
  <ul id="items" ref="itemsRef">
    <li v-for="item in items" :key="item.recordId" :data-id="item.recordId">
      <img v-if="item.thumb" :src="item.thumb" class="thumb" />
      {{ item.label }}
    </li>
  </ul>
</template>

<style scoped>
ul {
  list-style: none;
  padding: 0;
}

li {
  border: 1px solid #ccc;
  padding: 10px;
  /* margin-bottom: 5px; */
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
}

.blue-background-class {
  opacity: .5;
  background: #C8EBFB;
}

.thumb {
  width: 50px;
  margin-right: 10px;
}
</style>

# #
# 配列を初期化
変数を設定 [ $param ; 値: Get ( スクリプト引数 ) ]
# 
# WebViewer をリセット
Web ビューアの設定 [ オブジェクト名: "wv" ; 処理: リセット ]
# 
# 並び替え実行
レコード一覧へ移動 [ レコード ID の一覧: JSONMakeArray ( $param ; Char(44) ; JSONNumber ) ; 使用するレイアウト: <現在のレイアウト> ; アニメーション: なし ]
# 
# 恒久的に並びを保存したければ、ソート順フィールド等に現在の並びを保存
レコード/検索条件/ページへ移動 [ 最初の ]
# 
# 
#