Remember state of SortModal properties
This commit is contained in:
parent
a24045cb42
commit
3cf43de54c
|
@ -1,19 +1,23 @@
|
||||||
<svelte:options immutable={true} />
|
<svelte:options immutable={true} />
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getContext } from 'svelte'
|
import { getContext, setContext, onDestroy } from 'svelte'
|
||||||
import Select from 'svelte-select'
|
import Select from 'svelte-select'
|
||||||
import Header from './Header.svelte'
|
import Header from './Header.svelte'
|
||||||
import { getNestedPaths } from '../../utils/arrayUtils.js'
|
import { getNestedPaths } from '../../utils/arrayUtils.js'
|
||||||
import { isObject } from '../../utils/typeUtils.js'
|
import { isObject } from '../../utils/typeUtils.js'
|
||||||
import { stringifyPath } from '../../utils/pathUtils.js'
|
import { stringifyPath } from '../../utils/pathUtils.js'
|
||||||
import { sortArray, sortObjectKeys } from '../../logic/sort.js'
|
import { sortArray, sortObjectKeys } from '../../logic/sort.js'
|
||||||
|
import { sortModalState } from './sortModalState.js'
|
||||||
|
import { compileJSONPointer } from '../../utils/jsonPointer';
|
||||||
|
|
||||||
|
export let id
|
||||||
export let json
|
export let json
|
||||||
export let rootPath
|
export let rootPath
|
||||||
export let onSort
|
export let onSort
|
||||||
|
|
||||||
const {close} = getContext('simple-modal')
|
const {close} = getContext('simple-modal')
|
||||||
|
const stateId = `${id}:${compileJSONPointer(rootPath)}`
|
||||||
|
|
||||||
$: json
|
$: json
|
||||||
$: jsonIsArray = Array.isArray(json)
|
$: jsonIsArray = Array.isArray(json)
|
||||||
|
@ -28,10 +32,10 @@
|
||||||
value: -1,
|
value: -1,
|
||||||
label: 'descending'
|
label: 'descending'
|
||||||
}
|
}
|
||||||
const directions = [ asc, desc ]
|
const directions = [asc, desc]
|
||||||
|
|
||||||
let selectedProperty = undefined
|
let selectedProperty = sortModalState[stateId]?.selectedProperty || undefined
|
||||||
let selectedDirection = asc
|
let selectedDirection = sortModalState[stateId]?.selectedDirection || asc
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
// if there is only one option, select it and do not render the select box
|
// if there is only one option, select it and do not render the select box
|
||||||
|
@ -48,7 +52,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSort () {
|
function handleSort () {
|
||||||
// TODO: create a sortBy which returns a JSONPatch document containing move operations
|
// remember the selected values for the next time we open the SortModal
|
||||||
|
// just in memory, not persisted
|
||||||
|
sortModalState[stateId] = {
|
||||||
|
selectedProperty,
|
||||||
|
selectedDirection
|
||||||
|
}
|
||||||
|
|
||||||
if (jsonIsArray) {
|
if (jsonIsArray) {
|
||||||
if (!selectedProperty) {
|
if (!selectedProperty) {
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
export const sortModalState = {}
|
|
@ -31,7 +31,7 @@
|
||||||
import { keyComboFromEvent } from '../../utils/keyBindings.js'
|
import { keyComboFromEvent } from '../../utils/keyBindings.js'
|
||||||
import { search, searchNext, searchPrevious } from '../../logic/search.js'
|
import { search, searchNext, searchPrevious } from '../../logic/search.js'
|
||||||
import { immutableJSONPatch } from '../../utils/immutableJSONPatch'
|
import { immutableJSONPatch } from '../../utils/immutableJSONPatch'
|
||||||
import { first, last, initial, cloneDeep } from 'lodash-es'
|
import { first, last, initial, cloneDeep, uniqueId } from 'lodash-es'
|
||||||
import jump from '../../assets/jump.js/src/jump.js'
|
import jump from '../../assets/jump.js/src/jump.js'
|
||||||
import { expandPath, syncState, patchProps } from '../../logic/documentState.js'
|
import { expandPath, syncState, patchProps } from '../../logic/documentState.js'
|
||||||
import Menu from './Menu.svelte'
|
import Menu from './Menu.svelte'
|
||||||
|
@ -42,6 +42,7 @@
|
||||||
import TransformModal from '../modals/TransformModal.svelte'
|
import TransformModal from '../modals/TransformModal.svelte'
|
||||||
|
|
||||||
const { open } = getContext('simple-modal')
|
const { open } = getContext('simple-modal')
|
||||||
|
const sortModalId = uniqueId()
|
||||||
|
|
||||||
let divContents
|
let divContents
|
||||||
let domHiddenInput
|
let domHiddenInput
|
||||||
|
@ -270,6 +271,7 @@
|
||||||
: []
|
: []
|
||||||
|
|
||||||
open(SortModal, {
|
open(SortModal, {
|
||||||
|
id: sortModalId,
|
||||||
json: getIn(doc, rootPath),
|
json: getIn(doc, rootPath),
|
||||||
rootPath,
|
rootPath,
|
||||||
onSort: async (operations) => {
|
onSort: async (operations) => {
|
||||||
|
|
|
@ -25,12 +25,7 @@ export function sortObjectKeys (object, rootPath = [], direction = 1) {
|
||||||
return direction * caseInsensitiveNaturalCompare(keyA, keyB)
|
return direction * caseInsensitiveNaturalCompare(keyA, keyB)
|
||||||
})
|
})
|
||||||
|
|
||||||
// const sortedObject = {}
|
// TODO: can we make this more efficient? check if the first couple of keys are already in order and if so ignore them
|
||||||
// keys.forEach(key => {
|
|
||||||
// sortedObject[key] = object[key]
|
|
||||||
// })
|
|
||||||
|
|
||||||
// TODO: only move the properties that are needed to move
|
|
||||||
const operations = []
|
const operations = []
|
||||||
for (let i = 0; i < sortedKeys.length; i++) {
|
for (let i = 0; i < sortedKeys.length; i++) {
|
||||||
const key = sortedKeys[i]
|
const key = sortedKeys[i]
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
|
||||||
|
let id = 0
|
||||||
|
|
||||||
|
export function uniqueId () {
|
||||||
|
id++
|
||||||
|
return id
|
||||||
|
}
|
Loading…
Reference in New Issue