82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
<template>
|
|
<div v-if="open" class="move-menu layout-block">
|
|
<button class="cancel-button" @click="close">Cancel</button>
|
|
|
|
<button class="summarium-button" @click="onCategoryClick(null)">
|
|
SUMMARIUM
|
|
</button>
|
|
|
|
<template v-for="(category, i) in categories">
|
|
<category-row
|
|
v-if="category !== fromCategory"
|
|
:category="category"
|
|
:index="i"
|
|
wrapper="button"
|
|
:key="category"
|
|
@click="onCategoryClick(category)"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import CategoryRow from '@/components/CategoryRow.vue'
|
|
import { computed, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import useNotes from '@/composables/useNotes'
|
|
import _omit from 'lodash/omit'
|
|
|
|
const { categories, updateNote } = useNotes()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const open = computed(() => route.query.move !== undefined)
|
|
const noteId = computed(() => route.query.move)
|
|
const fromCategory = computed(() => route.params.id)
|
|
|
|
const close = async () => {
|
|
await router.push({
|
|
query: _omit(route.query, ['move']),
|
|
})
|
|
|
|
await window.api.moveClosed()
|
|
}
|
|
const onCategoryClick = async (category) => {
|
|
if (!noteId.value) return
|
|
|
|
await updateNote(noteId.value, { category: category })
|
|
|
|
await close()
|
|
}
|
|
watch(open, async () => {
|
|
if (!open.value) await close()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.move-menu {
|
|
width: 50vw;
|
|
height: 100vh;
|
|
position: sticky;
|
|
top: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: 20px;
|
|
border-left: 1px solid var(--grey-100);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.cancel-button {
|
|
color: var(--grey-100);
|
|
padding: 9px 0 16px;
|
|
}
|
|
.summarium-button {
|
|
display: block;
|
|
margin: 10px 0;
|
|
|
|
&:hover {
|
|
color: var(--theme-accent);
|
|
}
|
|
}
|
|
}
|
|
</style>
|