94 lines
2.7 KiB
JavaScript
94 lines
2.7 KiB
JavaScript
import { nextTick } from 'vue'
|
|
import Sortable from 'sortablejs'
|
|
|
|
export function useAdminFeaturedGames({
|
|
api,
|
|
featuredListEl,
|
|
featuredSortable,
|
|
featuredGameIds,
|
|
games,
|
|
resetMessages,
|
|
success,
|
|
error,
|
|
}) {
|
|
function destroyFeaturedSortable() {
|
|
if (featuredSortable.value) {
|
|
featuredSortable.value.destroy()
|
|
featuredSortable.value = null
|
|
}
|
|
}
|
|
|
|
async function syncFeaturedSortable() {
|
|
await nextTick()
|
|
destroyFeaturedSortable()
|
|
if (!featuredListEl.value) return
|
|
|
|
featuredSortable.value = Sortable.create(featuredListEl.value, {
|
|
animation: 160,
|
|
draggable: '[data-featured-id]',
|
|
handle: '[data-featured-handle]',
|
|
ghostClass: 'ghost',
|
|
chosenClass: 'chosen',
|
|
onEnd: (evt) => {
|
|
if (evt.oldIndex == null || evt.newIndex == null || evt.oldIndex === evt.newIndex) return
|
|
const nextIds = [...featuredGameIds.value]
|
|
const [moved] = nextIds.splice(evt.oldIndex, 1)
|
|
nextIds.splice(evt.newIndex, 0, moved)
|
|
featuredGameIds.value = nextIds
|
|
},
|
|
})
|
|
}
|
|
|
|
function addFeaturedGame(gameId) {
|
|
resetMessages()
|
|
if (!gameId || featuredGameIds.value.includes(gameId)) return
|
|
if (featuredGameIds.value.length >= 50) {
|
|
error.value = '상단 고정 게임은 최대 50개까지만 설정할 수 있어요.'
|
|
return
|
|
}
|
|
featuredGameIds.value = [...featuredGameIds.value, gameId]
|
|
syncFeaturedSortable()
|
|
}
|
|
|
|
function removeFeaturedGame(gameId) {
|
|
resetMessages()
|
|
featuredGameIds.value = featuredGameIds.value.filter((id) => id !== gameId)
|
|
syncFeaturedSortable()
|
|
}
|
|
|
|
function moveFeaturedGame(gameId, direction) {
|
|
const currentIndex = featuredGameIds.value.indexOf(gameId)
|
|
const nextIndex = currentIndex + direction
|
|
if (currentIndex < 0 || nextIndex < 0 || nextIndex >= featuredGameIds.value.length) return
|
|
const nextIds = [...featuredGameIds.value]
|
|
const [moved] = nextIds.splice(currentIndex, 1)
|
|
nextIds.splice(nextIndex, 0, moved)
|
|
featuredGameIds.value = nextIds
|
|
syncFeaturedSortable()
|
|
}
|
|
|
|
async function saveFeaturedOrder() {
|
|
resetMessages()
|
|
try {
|
|
const data = await api.updateAdminGameDisplayOrder({ gameIds: featuredGameIds.value })
|
|
games.value = data.games || []
|
|
featuredGameIds.value = games.value
|
|
.filter((game) => game.displayRank != null)
|
|
.sort((a, b) => a.displayRank - b.displayRank)
|
|
.map((game) => game.id)
|
|
success.value = '홈 화면 게임 순서를 저장했어요.'
|
|
} catch (e) {
|
|
error.value = '게임 순서 저장에 실패했어요.'
|
|
}
|
|
}
|
|
|
|
return {
|
|
destroyFeaturedSortable,
|
|
syncFeaturedSortable,
|
|
addFeaturedGame,
|
|
removeFeaturedGame,
|
|
moveFeaturedGame,
|
|
saveFeaturedOrder,
|
|
}
|
|
}
|