Skip to content

Commit 8f56da0

Browse files
xdeqxdeq
committed
feat(bookmarks): alias name
1 parent ff925a5 commit 8f56da0

File tree

5 files changed

+189
-7
lines changed

5 files changed

+189
-7
lines changed

‎components/modals/EditBookmarkAliasModal.vue

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<script setup>
2+
/** UI */
3+
import Modal from "@/components/ui/Modal.vue"
4+
import Toggle from "@/components/ui/Toggle.vue"
5+
import Tooltip from "@/components/ui/Tooltip.vue"
6+
import Input from "@/components/ui/Input.vue"
7+
import Button from "@/components/ui/Button.vue"
8+
9+
/** Store */
10+
import { useCacheStore } from "@/store/cache"
11+
import { useBookmarksStore } from "@/store/bookmarks"
12+
import { useNotificationsStore } from "@/store/notifications"
13+
const cacheStore = useCacheStore()
14+
const bookmarksStore = useBookmarksStore()
15+
const notificationsStore = useNotificationsStore()
16+
17+
const emit = defineEmits(["onClose"])
18+
const props = defineProps({
19+
show: Boolean,
20+
})
21+
22+
const alias = ref("")
23+
24+
const onKeydown = (e) => {
25+
if (e.key === "Enter") {
26+
handleSave()
27+
}
28+
}
29+
30+
watch(
31+
() => props.show,
32+
() => {
33+
if (!props.show) {
34+
alias.value = ""
35+
36+
document.removeEventListener("keydown", onKeydown)
37+
} else {
38+
alias.value = cacheStore.current.bookmark.alias ? cacheStore.current.bookmark.alias : ""
39+
40+
document.addEventListener("keydown", onKeydown)
41+
}
42+
},
43+
)
44+
45+
const handleSave = () => {
46+
if (!alias.value.length || alias.length > 100) return
47+
48+
switch (cacheStore.current.bookmark.type) {
49+
case "Transaction": {
50+
const bookmarkIdx = bookmarksStore.bookmarks.txs.findIndex((b) => b.id === cacheStore.current.bookmark.id)
51+
bookmarksStore.bookmarks.txs.splice(bookmarkIdx, 1)
52+
bookmarksStore.bookmarks.txs.push({
53+
...cacheStore.current.bookmark,
54+
alias: alias.value,
55+
})
56+
57+
break
58+
}
59+
60+
case "Namespace": {
61+
const bookmarkIdx = bookmarksStore.bookmarks.namespaces.findIndex((b) => b.id === cacheStore.current.bookmark.id)
62+
bookmarksStore.bookmarks.namespaces.splice(bookmarkIdx, 1)
63+
bookmarksStore.bookmarks.namespaces.push({
64+
...cacheStore.current.bookmark,
65+
alias: alias.value,
66+
})
67+
68+
break
69+
}
70+
71+
case "Address": {
72+
const bookmarkIdx = bookmarksStore.bookmarks.addresses.findIndex((b) => b.id === cacheStore.current.bookmark.id)
73+
bookmarksStore.bookmarks.addresses.splice(bookmarkIdx, 1)
74+
bookmarksStore.bookmarks.addresses.push({
75+
...cacheStore.current.bookmark,
76+
alias: alias.value,
77+
})
78+
79+
break
80+
}
81+
82+
case "Block": {
83+
const bookmarkIdx = bookmarksStore.bookmarks.blocks.findIndex((b) => b.id === cacheStore.current.bookmark.id)
84+
bookmarksStore.bookmarks.blocks.splice(bookmarkIdx, 1)
85+
bookmarksStore.bookmarks.blocks.push({
86+
...cacheStore.current.bookmark,
87+
alias: alias.value,
88+
})
89+
90+
break
91+
}
92+
}
93+
94+
notificationsStore.create({
95+
notification: {
96+
type: "success",
97+
icon: "check",
98+
title: "Alias successfuly updated",
99+
autoDestroy: true,
100+
},
101+
})
102+
emit("onClose")
103+
}
104+
</script>
105+
106+
<template>
107+
<Modal :show="show" @onClose="emit('onClose')" width="600" focus>
108+
<Flex direction="column" gap="24">
109+
<Text size="14" weight="600" color="primary">Edit Bookmark Alias</Text>
110+
111+
<Flex direction="column" gap="16">
112+
<Input v-model="alias" placeholder="Bookmark alias" />
113+
114+
<Button @click="handleSave" type="secondary" size="small" :disabled="!alias.length || alias.length > 100"> Save </Button>
115+
</Flex>
116+
</Flex>
117+
</Modal>
118+
</template>
119+
120+
<style module>
121+
.drop_zone {
122+
height: 150px;
123+
124+
border: 2px dashed var(--op-5);
125+
border-radius: 12px;
126+
127+
padding: 40px;
128+
129+
animation: blink 3s ease infinite;
130+
}
131+
132+
.warning {
133+
border-radius: 6px;
134+
background: var(--op-5);
135+
136+
padding: 8px;
137+
}
138+
139+
.disabled {
140+
opacity: 0.3;
141+
pointer-events: none;
142+
}
143+
144+
@keyframes blink {
145+
0% {
146+
border-color: var(--op-5);
147+
}
148+
149+
50% {
150+
border-color: var(--op-15);
151+
}
152+
153+
100% {
154+
border-color: var(--op-5);
155+
}
156+
}
157+
</style>

‎components/modals/ModalsManager.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import RawDataModal from "./RawDataModal.vue"
55
import ConstantsModal from "./ConstantsModal.vue"
66
import QRCodeModal from "./QRCodeModal.vue"
77
import ImportBookmarksModal from "./ImportBookmarksModal.vue"
8+
import EditBookmarkAliasModal from "./EditBookmarkAliasModal.vue"
89
910
/**
1011
* Store
@@ -20,4 +21,5 @@ const modalsStore = useModalsStore()
2021
<ConstantsModal :show="modalsStore.modals.constants" @onClose="modalsStore.close('constants')" />
2122
<QRCodeModal :show="modalsStore.modals.qr" @onClose="modalsStore.close('qr')" />
2223
<ImportBookmarksModal :show="modalsStore.modals.import" @onClose="modalsStore.close('import')" />
24+
<EditBookmarkAliasModal :show="modalsStore.modals.edit_alias" @onClose="modalsStore.close('edit_alias')" />
2325
</template>

‎components/modules/bookmarks/BookmarkItem.vue

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,22 @@ import { DateTime } from "luxon"
55
/** UI */
66
import Button from "@/components/ui/Button.vue"
77
8+
/** Store */
9+
import { useCacheStore } from "@/store/cache"
10+
import { useModalsStore } from "@/store/modals"
11+
const cacheStore = useCacheStore()
12+
const modalsStore = useModalsStore()
13+
814
const props = defineProps({
915
item: Object,
1016
})
1117
const emit = defineEmits(["onRemove"])
1218
19+
const handleEditBookmarkAlias = () => {
20+
cacheStore.current.bookmark = props.item
21+
modalsStore.open("edit_alias")
22+
}
23+
1324
const getIcon = () => {
1425
switch (props.item.type.toLowerCase()) {
1526
case "namespace":
@@ -46,23 +57,30 @@ const getLink = () => {
4657

4758
<template>
4859
<NuxtLink :to="getLink()">
49-
<Flex justify="between" align="center" :class="$style.wrapper">
60+
<Flex justify="between" align="center" gap="16" :class="$style.wrapper">
5061
<Flex align="center" gap="8" :class="$style.content">
5162
<Icon :name="getIcon()" size="14" color="secondary" />
52-
<Text size="13" weight="600" color="primary" :class="$style.id">{{ item.id }}</Text>
63+
<Text v-if="item.alias" size="13" weight="600" color="primary" no-wrap>{{ item.alias }}</Text>
64+
<Text size="13" weight="600" :color="!item.alias ? 'primary' : 'tertiary'" :class="$style.id">{{ item.id }}</Text>
5365
</Flex>
5466

55-
<Flex align="center" gap="12">
56-
<Text size="13" weight="600" color="tertiary">
67+
<Flex align="center" gap="16">
68+
<Text size="13" weight="600" color="tertiary" no-wrap>
5769
{{
5870
DateTime.fromSeconds(item.ts / 1_000)
5971
.setLocale("en")
6072
.toFormat("ff")
6173
}}
6274
</Text>
63-
<Button @click.prevent="emit('onRemove')" type="tertiary" size="mini">
64-
<Icon name="trash" size="14" color="primary" />
65-
</Button>
75+
76+
<Flex align="center" gap="6">
77+
<Button @click.prevent="handleEditBookmarkAlias" type="tertiary" size="mini">
78+
<Icon name="edit" size="14" color="primary" />
79+
</Button>
80+
<Button @click.prevent="emit('onRemove')" type="tertiary" size="mini">
81+
<Icon name="trash" size="14" color="primary" />
82+
</Button>
83+
</Flex>
6684
</Flex>
6785
</Flex>
6886
</NuxtLink>
@@ -79,6 +97,7 @@ const getLink = () => {
7997
8098
.content {
8199
max-width: 100%;
100+
min-width: 0;
82101
}
83102
84103
.id {

‎store/cache.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ export const useCacheStore = defineStore("cache", () => {
3333

3434
/** address */
3535
address: null,
36+
37+
/** bookmark */
38+
bookmark: null,
3639
})
3740

3841
return { selectedBlob, qr, current }

‎store/modals.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const useModalsStore = defineStore("modals", () => {
1515
constants: false,
1616
qr: false,
1717
import: false,
18+
edit_alias: false,
1819
})
1920

2021
const open = (target) => {

0 commit comments

Comments
 (0)