@necrolab/dashboard 0.4.58 → 0.4.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/backend/endpoints.js +3 -3
- package/backend/mock-data.js +5 -5
- package/package.json +1 -1
- package/src/components/Editors/Account/Account.vue +144 -156
- package/src/components/Editors/Account/AccountView.vue +17 -17
- package/src/components/Editors/Profile/Profile.vue +29 -27
- package/src/components/Editors/Profile/ProfileView.vue +18 -18
- package/src/stores/connection.js +4 -4
- package/src/stores/sampleData.js +39 -39
- package/src/stores/ui.js +7 -7
package/backend/endpoints.js
CHANGED
|
@@ -272,9 +272,9 @@ const saveProfile = async (profile) => {
|
|
|
272
272
|
};
|
|
273
273
|
|
|
274
274
|
const deleteProfile = async (profile) => {
|
|
275
|
-
const {
|
|
276
|
-
Bot.Profiles = Bot.Profiles.filter((p) => p.
|
|
277
|
-
pushWSUpdate({ event: "delete-profile", profile: {
|
|
275
|
+
const { id } = profile;
|
|
276
|
+
Bot.Profiles = Bot.Profiles.filter((p) => p.id !== profile.id);
|
|
277
|
+
pushWSUpdate({ event: "delete-profile", profile: { id } });
|
|
278
278
|
};
|
|
279
279
|
|
|
280
280
|
async function handleWebsocketMessage(msg) {
|
package/backend/mock-data.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const users = [
|
|
2
2
|
{
|
|
3
3
|
event: "auth",
|
|
4
|
-
|
|
4
|
+
id: "641a5292b561088b64fe390b",
|
|
5
5
|
name: "Admin",
|
|
6
6
|
password: "admin",
|
|
7
7
|
profilePicture: "https://cdn.discordapp.com/avatars/435549216304267264/6cfd74ad7c5939a0bcbf218aa08be8cb.png",
|
|
@@ -13,7 +13,7 @@ const users = [
|
|
|
13
13
|
];
|
|
14
14
|
|
|
15
15
|
const profile = {
|
|
16
|
-
|
|
16
|
+
id: "645a82606ef8b7201b728805",
|
|
17
17
|
enabled: false,
|
|
18
18
|
profileName: "Master US 43725 [admin]",
|
|
19
19
|
address: "88081 Piper Ways",
|
|
@@ -34,14 +34,14 @@ const profile = {
|
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
const profiles = [];
|
|
37
|
-
for (let i = 0; i < 1000; i++) profiles.push({ ...profile,
|
|
37
|
+
for (let i = 0; i < 1000; i++) profiles.push({ ...profile, id: i });
|
|
38
38
|
|
|
39
39
|
export { users, profiles };
|
|
40
40
|
|
|
41
41
|
export const tmAccounts = [
|
|
42
42
|
{
|
|
43
43
|
tags: ["admin"],
|
|
44
|
-
|
|
44
|
+
id: 1,
|
|
45
45
|
password: "123",
|
|
46
46
|
email: "tm@tm.com"
|
|
47
47
|
}
|
|
@@ -50,7 +50,7 @@ export const tmAccounts = [
|
|
|
50
50
|
export const axsAccounts = [
|
|
51
51
|
{
|
|
52
52
|
tags: ["admin"],
|
|
53
|
-
|
|
53
|
+
id: 2,
|
|
54
54
|
password: "123",
|
|
55
55
|
email: "axs@axs.com"
|
|
56
56
|
}
|
package/package.json
CHANGED
|
@@ -1,185 +1,173 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<img class="w-4 h-4" src="/img/controls/enable.svg" />
|
|
56
|
-
</button>
|
|
57
|
-
</li>
|
|
58
|
-
</ul>
|
|
59
|
-
</div>
|
|
60
|
-
</Row>
|
|
2
|
+
<Row
|
|
3
|
+
class="relative h-16 grid-cols-5 text-white md:grid-cols-7"
|
|
4
|
+
@click="ui.setOpenContextMenu('')"
|
|
5
|
+
@click.right.prevent="ui.setOpenContextMenu('')">
|
|
6
|
+
<div class="col-span-3 flex lg:col-span-2">
|
|
7
|
+
<Checkbox
|
|
8
|
+
class="ml-0 mr-4"
|
|
9
|
+
:toggled="props.account.selected"
|
|
10
|
+
@valueUpdate="ui.toggleAccountSelected(props.account.id)" />
|
|
11
|
+
<h4 class="mx-auto text-white" @click="copy(props.account.email)">
|
|
12
|
+
{{ props.account.email }}
|
|
13
|
+
</h4>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="col-span-2 hidden md:block" @click="copy(props.account.password)">
|
|
16
|
+
<h4 class="text-white">
|
|
17
|
+
{{ props.account.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
|
|
18
|
+
</h4>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="col-span-1">
|
|
21
|
+
<h4 v-if="props.account.enabled" class="flex justify-center text-green-400">
|
|
22
|
+
<img class="green h-3 w-3" src="/img/controls/enable.svg" />
|
|
23
|
+
</h4>
|
|
24
|
+
<h4 v-else class="flex justify-center text-red-400">
|
|
25
|
+
<img class="h-3 w-3 fill-red-400" src="/img/close.svg" />
|
|
26
|
+
</h4>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="col-span-1 hidden lg:block">
|
|
30
|
+
<h4 class="flex justify-center gap-1 text-white">
|
|
31
|
+
<TagLabel v-for="tag in props.account.tags" :key="tag" :text="tag" />
|
|
32
|
+
</h4>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div class="col-span-1 flex">
|
|
36
|
+
<ul class="account-buttons">
|
|
37
|
+
<li>
|
|
38
|
+
<button @click="edit">
|
|
39
|
+
<EditIcon />
|
|
40
|
+
</button>
|
|
41
|
+
</li>
|
|
42
|
+
<li v-if="props.account.enabled">
|
|
43
|
+
<button @click="disable">
|
|
44
|
+
<img class="h-4 w-4" src="/img/controls/disable.svg" />
|
|
45
|
+
</button>
|
|
46
|
+
</li>
|
|
47
|
+
<li v-else>
|
|
48
|
+
<button @click="enable">
|
|
49
|
+
<img class="h-4 w-4" src="/img/controls/enable.svg" />
|
|
50
|
+
</button>
|
|
51
|
+
</li>
|
|
52
|
+
</ul>
|
|
53
|
+
</div>
|
|
54
|
+
</Row>
|
|
61
55
|
</template>
|
|
62
56
|
<style lang="scss" scoped>
|
|
63
57
|
h4 {
|
|
64
|
-
|
|
58
|
+
@apply text-center;
|
|
65
59
|
}
|
|
66
60
|
.account-buttons {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
61
|
+
@apply mx-auto flex items-center justify-center rounded border border-dark-650 bg-dark-500;
|
|
62
|
+
padding: 3px;
|
|
63
|
+
gap: 2px;
|
|
64
|
+
|
|
65
|
+
button {
|
|
66
|
+
@apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
|
|
67
|
+
background: transparent;
|
|
68
|
+
width: 28px;
|
|
69
|
+
height: 28px;
|
|
70
|
+
color: #d0d0d3;
|
|
71
|
+
|
|
72
|
+
&:hover {
|
|
73
|
+
background: rgba(255, 255, 255, 0.1);
|
|
74
|
+
color: #ffffff;
|
|
75
|
+
transform: scale(1.05);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&:active {
|
|
79
|
+
background: rgba(255, 255, 255, 0.2);
|
|
80
|
+
transform: scale(0.95);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
svg,
|
|
85
|
+
img {
|
|
86
|
+
width: 16px;
|
|
87
|
+
height: 16px;
|
|
88
|
+
position: relative;
|
|
89
|
+
z-index: 1;
|
|
82
90
|
}
|
|
83
91
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
transform: scale(0.95);
|
|
92
|
+
svg path {
|
|
93
|
+
fill: currentColor;
|
|
87
94
|
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
svg,
|
|
91
|
-
img {
|
|
92
|
-
width: 16px;
|
|
93
|
-
height: 16px;
|
|
94
|
-
position: relative;
|
|
95
|
-
z-index: 1;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
svg path {
|
|
99
|
-
fill: currentColor;
|
|
100
|
-
}
|
|
101
95
|
}
|
|
102
96
|
|
|
103
97
|
// Tablet optimization
|
|
104
98
|
@media (max-width: 1024px) {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
99
|
+
h4 {
|
|
100
|
+
font-size: 10px !important;
|
|
101
|
+
}
|
|
108
102
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
103
|
+
.account-buttons {
|
|
104
|
+
padding: 3px;
|
|
105
|
+
gap: 2px;
|
|
112
106
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
107
|
+
button {
|
|
108
|
+
width: 26px;
|
|
109
|
+
height: 26px;
|
|
110
|
+
}
|
|
117
111
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
112
|
+
svg,
|
|
113
|
+
img {
|
|
114
|
+
width: 14px;
|
|
115
|
+
height: 14px;
|
|
116
|
+
}
|
|
122
117
|
}
|
|
123
|
-
}
|
|
124
118
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
119
|
+
.account-id {
|
|
120
|
+
font-size: 6px !important;
|
|
121
|
+
margin-right: -12px;
|
|
122
|
+
margin-top: 20px;
|
|
123
|
+
}
|
|
130
124
|
}
|
|
131
125
|
|
|
132
126
|
// Mobile optimization
|
|
133
127
|
@media (max-width: 768px) {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
128
|
+
.account-buttons {
|
|
129
|
+
padding: 2px;
|
|
130
|
+
gap: 1px;
|
|
131
|
+
|
|
132
|
+
button {
|
|
133
|
+
width: 22px;
|
|
134
|
+
height: 22px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
svg,
|
|
138
|
+
img {
|
|
139
|
+
width: 12px;
|
|
140
|
+
height: 12px;
|
|
141
|
+
}
|
|
147
142
|
}
|
|
148
|
-
}
|
|
149
143
|
}
|
|
150
144
|
|
|
151
145
|
// iPhone vertical (portrait) specific
|
|
152
146
|
@media (max-width: 480px) and (orientation: portrait) {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
147
|
+
.account-buttons {
|
|
148
|
+
padding: 2px;
|
|
149
|
+
gap: 1px;
|
|
150
|
+
|
|
151
|
+
button {
|
|
152
|
+
width: 18px;
|
|
153
|
+
height: 18px;
|
|
154
|
+
|
|
155
|
+
&:hover {
|
|
156
|
+
transform: scale(1.1);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
svg,
|
|
161
|
+
img {
|
|
162
|
+
width: 10px;
|
|
163
|
+
height: 10px;
|
|
164
|
+
}
|
|
170
165
|
}
|
|
171
|
-
}
|
|
172
166
|
}
|
|
173
167
|
</style>
|
|
174
168
|
<script setup>
|
|
175
169
|
import { Row } from "@/components/Table";
|
|
176
|
-
import {
|
|
177
|
-
PlayIcon,
|
|
178
|
-
TrashIcon,
|
|
179
|
-
BagWhiteIcon,
|
|
180
|
-
PauseIcon,
|
|
181
|
-
EditIcon,
|
|
182
|
-
} from "@/components/icons";
|
|
170
|
+
import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
|
|
183
171
|
import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
|
|
184
172
|
import { useUIStore } from "@/stores/ui";
|
|
185
173
|
import TagLabel from "@/components/Editors/TagLabel.vue";
|
|
@@ -187,18 +175,18 @@ import TagLabel from "@/components/Editors/TagLabel.vue";
|
|
|
187
175
|
const ui = useUIStore();
|
|
188
176
|
|
|
189
177
|
const props = defineProps({
|
|
190
|
-
|
|
178
|
+
account: { type: Object }
|
|
191
179
|
});
|
|
192
180
|
|
|
193
181
|
const copy = (txt) => {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
182
|
+
if (!txt) return;
|
|
183
|
+
navigator.clipboard.writeText(txt);
|
|
184
|
+
ui.showSuccess("Copied text");
|
|
197
185
|
};
|
|
198
186
|
const enable = async () => await ui.addAccount({ ...props.account, enabled: true });
|
|
199
187
|
const disable = async () => await ui.addAccount({ ...props.account, enabled: false });
|
|
200
188
|
const edit = () => {
|
|
201
|
-
|
|
202
|
-
|
|
189
|
+
ui.currentlyEditing = props.account;
|
|
190
|
+
ui.toggleModal("create-account");
|
|
203
191
|
};
|
|
204
192
|
</script>
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<Table>
|
|
3
|
-
<Header class="
|
|
4
|
-
<div class="
|
|
3
|
+
<Header class="sticky top-0 z-10 grid-cols-5 bg-dark-400 text-center md:grid-cols-7">
|
|
4
|
+
<div class="col-span-3 flex lg:col-span-2">
|
|
5
5
|
<Checkbox
|
|
6
6
|
class="mr-3"
|
|
7
7
|
:toggled="ui.mainCheckbox.accounts"
|
|
8
8
|
@valueUpdate="ui.toggleMainCheckbox('accounts')"
|
|
9
9
|
:isHeader="true" />
|
|
10
10
|
<div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
|
|
11
|
-
<MailIcon class="mr-0
|
|
11
|
+
<MailIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
12
12
|
<h4 class="hidden md:flex">Email</h4>
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
|
-
<div class="col-span-2 items-center justify-center
|
|
16
|
-
<KeyIcon class="mr-0
|
|
15
|
+
<div class="col-span-2 hidden items-center justify-center md:flex" v-once>
|
|
16
|
+
<KeyIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
17
17
|
<h4 class="hidden md:flex">Password</h4>
|
|
18
18
|
</div>
|
|
19
19
|
<div class="col-span-1 flex items-center justify-center" v-once>
|
|
20
|
-
<CheckmarkIcon class="mr-0
|
|
20
|
+
<CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
21
21
|
<h4 class="hidden md:flex">Enabled</h4>
|
|
22
22
|
</div>
|
|
23
|
-
<div class="col-span-1 hidden
|
|
24
|
-
<TicketIcon class="mr-0
|
|
23
|
+
<div class="col-span-1 hidden items-center justify-center lg:flex" v-once>
|
|
24
|
+
<TicketIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
25
25
|
<h4 class="hidden md:flex">Tags</h4>
|
|
26
26
|
</div>
|
|
27
27
|
<div class="col-span-1 flex items-center justify-center" v-once>
|
|
28
|
-
<ClickIcon class="mr-0
|
|
28
|
+
<ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
29
29
|
<h4 class="hidden md:flex">Actions</h4>
|
|
30
30
|
</div>
|
|
31
31
|
</Header>
|
|
32
32
|
<div
|
|
33
33
|
v-if="toRender.length != 0"
|
|
34
|
-
class="overflow-y-auto
|
|
34
|
+
class="hidden-scrollbars stop-pan overflow-y-auto overflow-x-hidden"
|
|
35
35
|
:style="{ maxHeight: dynamicTableHeight }">
|
|
36
36
|
<RecycleScroller
|
|
37
37
|
:items="toRender"
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
key-field="index"
|
|
40
40
|
class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650">
|
|
41
41
|
<template #default="props">
|
|
42
|
-
<div class="account" :key="`account-${props.item.
|
|
42
|
+
<div class="account" :key="`account-${props.item.id || props.item.index}`">
|
|
43
43
|
<Account
|
|
44
44
|
@click="i[props.item.index]++"
|
|
45
45
|
:class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
|
|
@@ -48,10 +48,10 @@
|
|
|
48
48
|
</template>
|
|
49
49
|
</RecycleScroller>
|
|
50
50
|
</div>
|
|
51
|
-
<div v-else class="flex flex-col items-center justify-center
|
|
52
|
-
<MailIcon class="
|
|
53
|
-
<p class="text-light-400
|
|
54
|
-
<p class="
|
|
51
|
+
<div v-else class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center">
|
|
52
|
+
<MailIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
|
|
53
|
+
<p class="text-sm text-light-400">No accounts found</p>
|
|
54
|
+
<p class="mt-1 text-xs text-light-500">Create accounts to get started</p>
|
|
55
55
|
</div>
|
|
56
56
|
</Table>
|
|
57
57
|
</template>
|
|
@@ -102,8 +102,8 @@ const toRender = computed(() => {
|
|
|
102
102
|
|
|
103
103
|
// Initialize reactive refs for click tracking
|
|
104
104
|
rendered.forEach((t) => {
|
|
105
|
-
if (t.
|
|
106
|
-
i.value[t.
|
|
105
|
+
if (t.id && !(t.id in i.value)) {
|
|
106
|
+
i.value[t.id] = 0;
|
|
107
107
|
}
|
|
108
108
|
if (!(t.index in i.value)) {
|
|
109
109
|
i.value[t.index] = 0;
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<Row
|
|
3
|
-
class="relative
|
|
3
|
+
class="relative grid-cols-7 text-white lg:grid-cols-8"
|
|
4
4
|
@click="ui.setOpenContextMenu('')"
|
|
5
|
-
@click.right.prevent="ui.setOpenContextMenu('')"
|
|
6
|
-
|
|
7
|
-
<div class="col-span-3 lg:col-span-2 flex">
|
|
5
|
+
@click.right.prevent="ui.setOpenContextMenu('')">
|
|
6
|
+
<div class="col-span-3 flex lg:col-span-2">
|
|
8
7
|
<Checkbox
|
|
9
8
|
class="ml-0 mr-4"
|
|
10
9
|
:toggled="props.profile.selected"
|
|
11
|
-
@valueUpdate="ui.toggleProfileSelected(props.profile.
|
|
12
|
-
/>
|
|
10
|
+
@valueUpdate="ui.toggleProfileSelected(props.profile.id)" />
|
|
13
11
|
<h4 class="mx-auto text-white">
|
|
14
12
|
{{ props.profile.profileName }}
|
|
15
13
|
</h4>
|
|
16
14
|
</div>
|
|
17
15
|
<div class="col-span-1 lg:col-span-2">
|
|
18
|
-
<h4 class="
|
|
19
|
-
<span class="hidden sm:block">
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
16
|
+
<h4 class="flex items-center justify-center gap-2 text-white">
|
|
17
|
+
<span class="hidden sm:block">
|
|
18
|
+
{{
|
|
19
|
+
props.profile.privacy
|
|
20
|
+
? props.profile.cardNumber[0] +
|
|
21
|
+
"•".repeat(props.profile.cardNumber.length - 5) +
|
|
22
|
+
props.profile.cardNumber.slice(-4)
|
|
23
|
+
: validateCard(props.profile.cardNumber).formatted
|
|
24
|
+
}}
|
|
25
|
+
</span>
|
|
26
|
+
<img class="h-6 w-6" :src="getAccountType()" />
|
|
27
27
|
</h4>
|
|
28
28
|
</div>
|
|
29
29
|
<div class="col-span-1">
|
|
30
30
|
<h4 class="text-white">{{ expDate() }}</h4>
|
|
31
31
|
</div>
|
|
32
32
|
<div class="col-span-1">
|
|
33
|
-
<h4 v-if="props.profile.enabled" class="text-green-400
|
|
34
|
-
<img class="
|
|
33
|
+
<h4 v-if="props.profile.enabled" class="flex justify-center text-green-400">
|
|
34
|
+
<img class="green h-3 w-3" src="/img/controls/enable.svg" />
|
|
35
35
|
</h4>
|
|
36
|
-
<h4 v-else class="text-red-400
|
|
37
|
-
<img class="
|
|
36
|
+
<h4 v-else class="flex justify-center text-red-400">
|
|
37
|
+
<img class="h-3 w-3 fill-red-400" src="/img/close.svg" />
|
|
38
38
|
</h4>
|
|
39
39
|
</div>
|
|
40
40
|
|
|
41
41
|
<div class="col-span-1 hidden lg:block">
|
|
42
|
-
<h4 class="
|
|
42
|
+
<h4 class="flex justify-center gap-1 text-white">
|
|
43
43
|
<TagLabel v-for="tag in props.profile.tags" :key="tag" :text="tag" />
|
|
44
44
|
</h4>
|
|
45
45
|
</div>
|
|
@@ -53,12 +53,12 @@
|
|
|
53
53
|
</li>
|
|
54
54
|
<li v-if="props.profile.enabled">
|
|
55
55
|
<button @click="disable">
|
|
56
|
-
<img class="
|
|
56
|
+
<img class="h-4 w-4" src="/img/controls/disable.svg" />
|
|
57
57
|
</button>
|
|
58
58
|
</li>
|
|
59
59
|
<li v-else>
|
|
60
60
|
<button @click="enable">
|
|
61
|
-
<img class="
|
|
61
|
+
<img class="h-4 w-4" src="/img/controls/enable.svg" />
|
|
62
62
|
</button>
|
|
63
63
|
</li>
|
|
64
64
|
<li>
|
|
@@ -77,12 +77,12 @@ h4 {
|
|
|
77
77
|
@apply text-center;
|
|
78
78
|
}
|
|
79
79
|
.profile-buttons {
|
|
80
|
-
@apply flex items-center justify-center
|
|
80
|
+
@apply mx-auto flex items-center justify-center rounded border border-dark-650 bg-dark-500;
|
|
81
81
|
padding: 3px;
|
|
82
82
|
gap: 2px;
|
|
83
83
|
|
|
84
84
|
button {
|
|
85
|
-
@apply flex items-center justify-center
|
|
85
|
+
@apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
|
|
86
86
|
background: transparent;
|
|
87
87
|
width: 28px;
|
|
88
88
|
height: 28px;
|
|
@@ -200,8 +200,10 @@ const props = defineProps({
|
|
|
200
200
|
|
|
201
201
|
const getAccountType = () => {
|
|
202
202
|
var cn = props.profile.cardNumber;
|
|
203
|
-
if (cn.startsWith("4"))
|
|
204
|
-
|
|
203
|
+
if (cn.startsWith("4"))
|
|
204
|
+
return `/img/banks/visa.svg`; // visa
|
|
205
|
+
else if (cn.startsWith("3"))
|
|
206
|
+
return `/img/banks/amex.svg`; // amex
|
|
205
207
|
else if (cn.startsWith("5")) return `/img/banks/mastercard.svg`; // master
|
|
206
208
|
};
|
|
207
209
|
|
|
@@ -213,5 +215,5 @@ const edit = () => {
|
|
|
213
215
|
ui.currentlyEditing = props.profile;
|
|
214
216
|
ui.toggleModal("create-profile");
|
|
215
217
|
};
|
|
216
|
-
const deleteProfile = async () => await ui.deleteProfile(props.profile.
|
|
218
|
+
const deleteProfile = async () => await ui.deleteProfile(props.profile.id);
|
|
217
219
|
</script>
|
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<Table>
|
|
3
|
-
<Header class="
|
|
4
|
-
<div class="col-span-3 lg:col-span-2
|
|
3
|
+
<Header class="grid-cols-7 text-center lg:grid-cols-8">
|
|
4
|
+
<div class="col-span-3 flex lg:col-span-2">
|
|
5
5
|
<Checkbox
|
|
6
6
|
class="mr-3"
|
|
7
7
|
:toggled="ui.mainCheckbox.profiles"
|
|
8
8
|
@valueUpdate="ui.toggleMainCheckbox('profiles')"
|
|
9
9
|
:isHeader="true" />
|
|
10
10
|
<div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
|
|
11
|
-
<ProfileIcon class="mr-0
|
|
11
|
+
<ProfileIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
12
12
|
<h4 class="hidden md:flex">Profile Name</h4>
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
|
-
<div class="
|
|
16
|
-
<CartIcon class="mr-0
|
|
15
|
+
<div class="col-span-1 flex items-center justify-center lg:col-span-2" v-once>
|
|
16
|
+
<CartIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
17
17
|
<h4 class="hidden md:flex">Card Number</h4>
|
|
18
18
|
</div>
|
|
19
19
|
<div class="col-span-1 flex items-center justify-center" v-once>
|
|
20
|
-
<TimerIcon class="mr-0
|
|
20
|
+
<TimerIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
21
21
|
<h4 class="hidden md:flex">Expiration</h4>
|
|
22
22
|
</div>
|
|
23
23
|
<div class="col-span-1 flex items-center justify-center" v-once>
|
|
24
|
-
<CheckmarkIcon class="mr-0
|
|
24
|
+
<CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
25
25
|
<h4 class="hidden md:flex">Enabled</h4>
|
|
26
26
|
</div>
|
|
27
|
-
<div class="col-span-1 hidden
|
|
28
|
-
<TicketIcon class="mr-0
|
|
27
|
+
<div class="col-span-1 hidden items-center justify-center lg:flex" v-once>
|
|
28
|
+
<TicketIcon class="mr-0 h-4 w-4 lg:mr-3" />
|
|
29
29
|
<h4 class="hidden lg:flex">Tags</h4>
|
|
30
30
|
</div>
|
|
31
31
|
<div class="col-span-1 flex items-center justify-center" v-once>
|
|
32
|
-
<ClickIcon class="mr-0
|
|
32
|
+
<ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
|
|
33
33
|
<h4 class="hidden md:flex">Actions</h4>
|
|
34
34
|
</div>
|
|
35
35
|
</Header>
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
:items="toRender"
|
|
39
39
|
:item-size="64"
|
|
40
40
|
key-field="index"
|
|
41
|
-
class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650 overflow-y-auto
|
|
41
|
+
class="scroller vue-recycle-scroller ready direction-vertical hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
|
|
42
42
|
:style="{ maxHeight: dynamicTableHeight }">
|
|
43
43
|
<template #default="props">
|
|
44
|
-
<div class="profile" :key="`profile-${props.item.
|
|
44
|
+
<div class="profile" :key="`profile-${props.item.id || props.item.index}`">
|
|
45
45
|
<Profile
|
|
46
46
|
@click="i[props.item.index]++"
|
|
47
47
|
:class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
</template>
|
|
51
51
|
</RecycleScroller>
|
|
52
52
|
</div>
|
|
53
|
-
<div v-else class="flex flex-col items-center justify-center
|
|
54
|
-
<ProfileIcon class="
|
|
55
|
-
<p class="text-light-400
|
|
56
|
-
<p class="
|
|
53
|
+
<div v-else class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center">
|
|
54
|
+
<ProfileIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
|
|
55
|
+
<p class="text-sm text-light-400">No profiles found</p>
|
|
56
|
+
<p class="mt-1 text-xs text-light-500">Create profiles to get started</p>
|
|
57
57
|
</div>
|
|
58
58
|
</Table>
|
|
59
59
|
</template>
|
|
@@ -101,8 +101,8 @@ const toRender = computed(() => {
|
|
|
101
101
|
|
|
102
102
|
// Initialize reactive refs for click tracking
|
|
103
103
|
rendered.forEach((t) => {
|
|
104
|
-
if (t.
|
|
105
|
-
i.value[t.
|
|
104
|
+
if (t.id && !(t.id in i.value)) {
|
|
105
|
+
i.value[t.id] = 0;
|
|
106
106
|
}
|
|
107
107
|
if (!(t.index in i.value)) {
|
|
108
108
|
i.value[t.index] = 0;
|
package/src/stores/connection.js
CHANGED
|
@@ -164,7 +164,7 @@ export class ConnectionHandler {
|
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
case "add-account": {
|
|
167
|
-
const exists = this.ui.accounts.findIndex((p) => p.
|
|
167
|
+
const exists = this.ui.accounts.findIndex((p) => p.id === msg.account.id);
|
|
168
168
|
if (exists !== -1) {
|
|
169
169
|
Object.keys(msg.account).forEach((k) => (this.ui.accounts[exists][k] = msg.account[k]));
|
|
170
170
|
} else this.ui.accounts.push(msg.account);
|
|
@@ -172,7 +172,7 @@ export class ConnectionHandler {
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
case "add-profile": {
|
|
175
|
-
const exists = this.ui.profiles.findIndex((p) => p.
|
|
175
|
+
const exists = this.ui.profiles.findIndex((p) => p.id === msg.profile.id);
|
|
176
176
|
if (exists !== -1) {
|
|
177
177
|
Object.keys(msg.profile).forEach((k) => (this.ui.profiles[exists][k] = msg.profile[k]));
|
|
178
178
|
} else this.ui.profiles.push(msg.profile);
|
|
@@ -180,7 +180,7 @@ export class ConnectionHandler {
|
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
case "delete-profile":
|
|
183
|
-
this.ui.profiles = this.ui.profiles.filter((p) => p.
|
|
183
|
+
this.ui.profiles = this.ui.profiles.filter((p) => p.id !== msg.profile.id);
|
|
184
184
|
break;
|
|
185
185
|
|
|
186
186
|
default:
|
|
@@ -380,7 +380,7 @@ export class ConnectionHandler {
|
|
|
380
380
|
sendDeleteProfile(id) {
|
|
381
381
|
this.sendMessage({
|
|
382
382
|
event: "profiles/delete",
|
|
383
|
-
data: {
|
|
383
|
+
data: { id: id }
|
|
384
384
|
});
|
|
385
385
|
}
|
|
386
386
|
|
package/src/stores/sampleData.js
CHANGED
|
@@ -682,7 +682,7 @@ export default {
|
|
|
682
682
|
},
|
|
683
683
|
Accounts: [
|
|
684
684
|
{
|
|
685
|
-
|
|
685
|
+
id: "64a1b2c3d4e5f6789abcdef0",
|
|
686
686
|
email: "aaaa@aaa.com",
|
|
687
687
|
password: "password123",
|
|
688
688
|
enabled: true,
|
|
@@ -690,7 +690,7 @@ export default {
|
|
|
690
690
|
module: "TM"
|
|
691
691
|
},
|
|
692
692
|
{
|
|
693
|
-
|
|
693
|
+
id: "64a1b2c3d4e5f6789abcdef1",
|
|
694
694
|
email: "bbb@bbb.com",
|
|
695
695
|
password: "password123",
|
|
696
696
|
enabled: true,
|
|
@@ -698,7 +698,7 @@ export default {
|
|
|
698
698
|
module: "TM"
|
|
699
699
|
},
|
|
700
700
|
{
|
|
701
|
-
|
|
701
|
+
id: "64a1b2c3d4e5f6789abcdef2",
|
|
702
702
|
email: "aaa@bbb.com",
|
|
703
703
|
password: "password123",
|
|
704
704
|
enabled: true,
|
|
@@ -706,7 +706,7 @@ export default {
|
|
|
706
706
|
module: "TM"
|
|
707
707
|
},
|
|
708
708
|
{
|
|
709
|
-
|
|
709
|
+
id: "64a1b2c3d4e5f6789abcdef3",
|
|
710
710
|
email: "aabb@ccc.com",
|
|
711
711
|
password: "password123",
|
|
712
712
|
enabled: true,
|
|
@@ -714,7 +714,7 @@ export default {
|
|
|
714
714
|
module: "TM"
|
|
715
715
|
},
|
|
716
716
|
{
|
|
717
|
-
|
|
717
|
+
id: "64a1b2c3d4e5f6789abcdef4",
|
|
718
718
|
email: "aaaabbbbb@cccc.com",
|
|
719
719
|
password: "password123",
|
|
720
720
|
enabled: true,
|
|
@@ -722,7 +722,7 @@ export default {
|
|
|
722
722
|
module: "TM"
|
|
723
723
|
},
|
|
724
724
|
{
|
|
725
|
-
|
|
725
|
+
id: "64a1b2c3d4e5f6789abcdef5",
|
|
726
726
|
email: "aa@ihbigb.com",
|
|
727
727
|
password: "password123",
|
|
728
728
|
enabled: true,
|
|
@@ -730,7 +730,7 @@ export default {
|
|
|
730
730
|
module: "TM"
|
|
731
731
|
},
|
|
732
732
|
{
|
|
733
|
-
|
|
733
|
+
id: "64a1b2c3d4e5f6789abcdef6",
|
|
734
734
|
email: "aaaa@aaa.com",
|
|
735
735
|
password: "password123",
|
|
736
736
|
enabled: true,
|
|
@@ -738,7 +738,7 @@ export default {
|
|
|
738
738
|
module: "AXS"
|
|
739
739
|
},
|
|
740
740
|
{
|
|
741
|
-
|
|
741
|
+
id: "64a1b2c3d4e5f6789abcdef7",
|
|
742
742
|
email: "bbb@bbb.com",
|
|
743
743
|
password: "password123",
|
|
744
744
|
enabled: true,
|
|
@@ -746,7 +746,7 @@ export default {
|
|
|
746
746
|
module: "AXS"
|
|
747
747
|
},
|
|
748
748
|
{
|
|
749
|
-
|
|
749
|
+
id: "64a1b2c3d4e5f6789abcdef8",
|
|
750
750
|
email: "aaa@bbb.com",
|
|
751
751
|
password: "password123",
|
|
752
752
|
enabled: true,
|
|
@@ -754,7 +754,7 @@ export default {
|
|
|
754
754
|
module: "AXS"
|
|
755
755
|
},
|
|
756
756
|
{
|
|
757
|
-
|
|
757
|
+
id: "64a1b2c3d4e5f6789abcdef9",
|
|
758
758
|
email: "aabb@ccc.com",
|
|
759
759
|
password: "password123",
|
|
760
760
|
enabled: true,
|
|
@@ -762,7 +762,7 @@ export default {
|
|
|
762
762
|
module: "AXS"
|
|
763
763
|
},
|
|
764
764
|
{
|
|
765
|
-
|
|
765
|
+
id: "64a1b2c3d4e5f6789abcdefa",
|
|
766
766
|
email: "aaaabbbbb@cccc.com",
|
|
767
767
|
password: "password123",
|
|
768
768
|
enabled: true,
|
|
@@ -770,7 +770,7 @@ export default {
|
|
|
770
770
|
module: "TM"
|
|
771
771
|
},
|
|
772
772
|
{
|
|
773
|
-
|
|
773
|
+
id: "64a1b2c3d4e5f6789abcdefb",
|
|
774
774
|
email: "aa@ihbigb.com",
|
|
775
775
|
password: "password123",
|
|
776
776
|
enabled: true,
|
|
@@ -778,7 +778,7 @@ export default {
|
|
|
778
778
|
module: "TM"
|
|
779
779
|
},
|
|
780
780
|
{
|
|
781
|
-
|
|
781
|
+
id: "64a1b2c3d4e5f6789abcdefc",
|
|
782
782
|
email: "test1@gmail.com",
|
|
783
783
|
password: "password123",
|
|
784
784
|
enabled: true,
|
|
@@ -786,7 +786,7 @@ export default {
|
|
|
786
786
|
module: "TM"
|
|
787
787
|
},
|
|
788
788
|
{
|
|
789
|
-
|
|
789
|
+
id: "64a1b2c3d4e5f6789abcdefd",
|
|
790
790
|
email: "test2@gmail.com",
|
|
791
791
|
password: "password123",
|
|
792
792
|
enabled: true,
|
|
@@ -794,7 +794,7 @@ export default {
|
|
|
794
794
|
module: "TM"
|
|
795
795
|
},
|
|
796
796
|
{
|
|
797
|
-
|
|
797
|
+
id: "64a1b2c3d4e5f6789abcdefe",
|
|
798
798
|
email: "test3@gmail.com",
|
|
799
799
|
password: "password123",
|
|
800
800
|
enabled: true,
|
|
@@ -802,7 +802,7 @@ export default {
|
|
|
802
802
|
module: "AXS"
|
|
803
803
|
},
|
|
804
804
|
{
|
|
805
|
-
|
|
805
|
+
id: "64a1b2c3d4e5f6789abcdeff",
|
|
806
806
|
email: "test4@gmail.com",
|
|
807
807
|
password: "password123",
|
|
808
808
|
enabled: true,
|
|
@@ -810,7 +810,7 @@ export default {
|
|
|
810
810
|
module: "AXS"
|
|
811
811
|
},
|
|
812
812
|
{
|
|
813
|
-
|
|
813
|
+
id: "64a1b2c3d4e5f6789abcde00",
|
|
814
814
|
email: "test5@gmail.com",
|
|
815
815
|
password: "password123",
|
|
816
816
|
enabled: true,
|
|
@@ -818,7 +818,7 @@ export default {
|
|
|
818
818
|
module: "TM"
|
|
819
819
|
},
|
|
820
820
|
{
|
|
821
|
-
|
|
821
|
+
id: "64a1b2c3d4e5f6789abcde01",
|
|
822
822
|
email: "test6@gmail.com",
|
|
823
823
|
password: "password123",
|
|
824
824
|
enabled: true,
|
|
@@ -826,7 +826,7 @@ export default {
|
|
|
826
826
|
module: "AXS"
|
|
827
827
|
},
|
|
828
828
|
{
|
|
829
|
-
|
|
829
|
+
id: "64a1b2c3d4e5f6789abcde02",
|
|
830
830
|
email: "test7@gmail.com",
|
|
831
831
|
password: "password123",
|
|
832
832
|
enabled: true,
|
|
@@ -834,7 +834,7 @@ export default {
|
|
|
834
834
|
module: "TM"
|
|
835
835
|
},
|
|
836
836
|
{
|
|
837
|
-
|
|
837
|
+
id: "64a1b2c3d4e5f6789abcde03",
|
|
838
838
|
email: "test8@gmail.com",
|
|
839
839
|
password: "password123",
|
|
840
840
|
enabled: true,
|
|
@@ -842,7 +842,7 @@ export default {
|
|
|
842
842
|
module: "AXS"
|
|
843
843
|
},
|
|
844
844
|
{
|
|
845
|
-
|
|
845
|
+
id: "64a1b2c3d4e5f6789abcde04",
|
|
846
846
|
email: "test9@gmail.com",
|
|
847
847
|
password: "password123",
|
|
848
848
|
enabled: true,
|
|
@@ -850,7 +850,7 @@ export default {
|
|
|
850
850
|
module: "TM"
|
|
851
851
|
},
|
|
852
852
|
{
|
|
853
|
-
|
|
853
|
+
id: "64a1b2c3d4e5f6789abcde05",
|
|
854
854
|
email: "test10@gmail.com",
|
|
855
855
|
password: "password123",
|
|
856
856
|
enabled: true,
|
|
@@ -858,7 +858,7 @@ export default {
|
|
|
858
858
|
module: "AXS"
|
|
859
859
|
},
|
|
860
860
|
{
|
|
861
|
-
|
|
861
|
+
id: "64a1b2c3d4e5f6789abcde06",
|
|
862
862
|
email: "test11@gmail.com",
|
|
863
863
|
password: "password123",
|
|
864
864
|
enabled: true,
|
|
@@ -866,7 +866,7 @@ export default {
|
|
|
866
866
|
module: "TM"
|
|
867
867
|
},
|
|
868
868
|
{
|
|
869
|
-
|
|
869
|
+
id: "64a1b2c3d4e5f6789abcde07",
|
|
870
870
|
email: "test12@gmail.com",
|
|
871
871
|
password: "password123",
|
|
872
872
|
enabled: true,
|
|
@@ -876,7 +876,7 @@ export default {
|
|
|
876
876
|
],
|
|
877
877
|
Profiles: [
|
|
878
878
|
{
|
|
879
|
-
|
|
879
|
+
id: 1,
|
|
880
880
|
profileName: "Harry Potter",
|
|
881
881
|
cardNumber: "4847463847454545",
|
|
882
882
|
expMonth: "12",
|
|
@@ -886,7 +886,7 @@ export default {
|
|
|
886
886
|
tags: ["admin", "amex"]
|
|
887
887
|
},
|
|
888
888
|
{
|
|
889
|
-
|
|
889
|
+
id: 2,
|
|
890
890
|
profileName: "Draco Malfoy",
|
|
891
891
|
cardNumber: "3847463847454545",
|
|
892
892
|
expMonth: "12",
|
|
@@ -894,7 +894,7 @@ export default {
|
|
|
894
894
|
tags: ["admin", "amex"]
|
|
895
895
|
},
|
|
896
896
|
{
|
|
897
|
-
|
|
897
|
+
id: 3,
|
|
898
898
|
profileName: "Tom Smith",
|
|
899
899
|
cardNumber: "5847463847454545",
|
|
900
900
|
expMonth: "12",
|
|
@@ -903,7 +903,7 @@ export default {
|
|
|
903
903
|
enabled: true
|
|
904
904
|
},
|
|
905
905
|
{
|
|
906
|
-
|
|
906
|
+
id: 1,
|
|
907
907
|
profileName: "Harry Potter",
|
|
908
908
|
cardNumber: "4847463847454545",
|
|
909
909
|
expMonth: "12",
|
|
@@ -911,7 +911,7 @@ export default {
|
|
|
911
911
|
tags: ["admin", "amex"]
|
|
912
912
|
},
|
|
913
913
|
{
|
|
914
|
-
|
|
914
|
+
id: 2,
|
|
915
915
|
profileName: "Draco Malfoy",
|
|
916
916
|
cardNumber: "3847463847454545",
|
|
917
917
|
expMonth: "12",
|
|
@@ -919,7 +919,7 @@ export default {
|
|
|
919
919
|
tags: ["admin", "amex"]
|
|
920
920
|
},
|
|
921
921
|
{
|
|
922
|
-
|
|
922
|
+
id: 3,
|
|
923
923
|
profileName: "Tom Smith",
|
|
924
924
|
cardNumber: "5847463847454545",
|
|
925
925
|
expMonth: "12",
|
|
@@ -928,7 +928,7 @@ export default {
|
|
|
928
928
|
enabled: true
|
|
929
929
|
},
|
|
930
930
|
{
|
|
931
|
-
|
|
931
|
+
id: 1,
|
|
932
932
|
profileName: "Harry Potter",
|
|
933
933
|
cardNumber: "4847463847454545",
|
|
934
934
|
expMonth: "12",
|
|
@@ -936,7 +936,7 @@ export default {
|
|
|
936
936
|
tags: ["admin", "amex"]
|
|
937
937
|
},
|
|
938
938
|
{
|
|
939
|
-
|
|
939
|
+
id: 2,
|
|
940
940
|
profileName: "Draco Malfoy",
|
|
941
941
|
cardNumber: "3847463847454545",
|
|
942
942
|
expMonth: "12",
|
|
@@ -944,7 +944,7 @@ export default {
|
|
|
944
944
|
tags: ["admin", "amex"]
|
|
945
945
|
},
|
|
946
946
|
{
|
|
947
|
-
|
|
947
|
+
id: 3,
|
|
948
948
|
profileName: "Tom Smith",
|
|
949
949
|
cardNumber: "5847463847454545",
|
|
950
950
|
expMonth: "12",
|
|
@@ -953,7 +953,7 @@ export default {
|
|
|
953
953
|
enabled: true
|
|
954
954
|
},
|
|
955
955
|
{
|
|
956
|
-
|
|
956
|
+
id: 1,
|
|
957
957
|
profileName: "Harry Potter",
|
|
958
958
|
cardNumber: "4847463847454545",
|
|
959
959
|
expMonth: "12",
|
|
@@ -961,7 +961,7 @@ export default {
|
|
|
961
961
|
tags: ["admin", "amex"]
|
|
962
962
|
},
|
|
963
963
|
{
|
|
964
|
-
|
|
964
|
+
id: 2,
|
|
965
965
|
profileName: "Draco Malfoy",
|
|
966
966
|
cardNumber: "3847463847454545",
|
|
967
967
|
expMonth: "12",
|
|
@@ -969,7 +969,7 @@ export default {
|
|
|
969
969
|
tags: ["admin", "amex"]
|
|
970
970
|
},
|
|
971
971
|
{
|
|
972
|
-
|
|
972
|
+
id: 3,
|
|
973
973
|
profileName: "Tom Smith",
|
|
974
974
|
cardNumber: "5847463847454545",
|
|
975
975
|
expMonth: "12",
|
|
@@ -978,7 +978,7 @@ export default {
|
|
|
978
978
|
enabled: true
|
|
979
979
|
},
|
|
980
980
|
{
|
|
981
|
-
|
|
981
|
+
id: 1,
|
|
982
982
|
profileName: "Harry Potter",
|
|
983
983
|
cardNumber: "4847463847454545",
|
|
984
984
|
expMonth: "12",
|
|
@@ -986,7 +986,7 @@ export default {
|
|
|
986
986
|
tags: ["admin", "amex"]
|
|
987
987
|
},
|
|
988
988
|
{
|
|
989
|
-
|
|
989
|
+
id: 2,
|
|
990
990
|
profileName: "Draco Malfoy",
|
|
991
991
|
cardNumber: "3847463847454545",
|
|
992
992
|
expMonth: "12",
|
|
@@ -994,7 +994,7 @@ export default {
|
|
|
994
994
|
tags: ["admin", "amex"]
|
|
995
995
|
},
|
|
996
996
|
{
|
|
997
|
-
|
|
997
|
+
id: 3,
|
|
998
998
|
profileName: "Tom Smith",
|
|
999
999
|
cardNumber: "5847463847454545",
|
|
1000
1000
|
expMonth: "12",
|
package/src/stores/ui.js
CHANGED
|
@@ -492,11 +492,11 @@ export const useUIStore = defineStore("ui", () => {
|
|
|
492
492
|
},
|
|
493
493
|
|
|
494
494
|
toggleProfileSelected: (id) => {
|
|
495
|
-
const idx = profiles.value.findIndex((p) => p.
|
|
495
|
+
const idx = profiles.value.findIndex((p) => p.id === id);
|
|
496
496
|
profiles.value[idx].selected = !profiles.value[idx].selected;
|
|
497
497
|
},
|
|
498
498
|
toggleAccountSelected: (id) => {
|
|
499
|
-
const idx = accounts.value.findIndex((p) => p.
|
|
499
|
+
const idx = accounts.value.findIndex((p) => p.id === id);
|
|
500
500
|
accounts.value[idx].selected = !accounts.value[idx].selected;
|
|
501
501
|
},
|
|
502
502
|
|
|
@@ -563,26 +563,26 @@ export const useUIStore = defineStore("ui", () => {
|
|
|
563
563
|
accounts,
|
|
564
564
|
addAccount: (acc) => {
|
|
565
565
|
if (!DEBUG) return connection.sendSaveAccount(acc);
|
|
566
|
-
const isEdit = accounts.value.findIndex((p) => p.
|
|
566
|
+
const isEdit = accounts.value.findIndex((p) => p.id === acc.id);
|
|
567
567
|
if (DEBUG && isEdit !== -1) {
|
|
568
568
|
Object.keys(acc).forEach((k) => (accounts.value[isEdit][k] = acc[k]));
|
|
569
|
-
} else accounts.value.push({ ...acc,
|
|
569
|
+
} else accounts.value.push({ ...acc, id: Math.random() });
|
|
570
570
|
},
|
|
571
571
|
setAccounts: (accs) => accounts.value.push(...accs),
|
|
572
572
|
profiles,
|
|
573
573
|
addProfile: (profile) => {
|
|
574
574
|
if (!DEBUG) return connection.sendSaveProfile(profile);
|
|
575
|
-
const isEdit = profiles.value.findIndex((p) => p.
|
|
575
|
+
const isEdit = profiles.value.findIndex((p) => p.id === profile.id);
|
|
576
576
|
|
|
577
577
|
if (DEBUG && isEdit !== -1) {
|
|
578
578
|
Object.keys(profile).forEach((k) => (accounts.value[isEdit][k] = profile[k]));
|
|
579
579
|
} else {
|
|
580
|
-
profiles.value.push({ ...profile,
|
|
580
|
+
profiles.value.push({ ...profile, id: Math.random() });
|
|
581
581
|
}
|
|
582
582
|
},
|
|
583
583
|
deleteProfile: (id) => {
|
|
584
584
|
if (!DEBUG) return connection.sendDeleteProfile(id);
|
|
585
|
-
else profiles.value = profiles.value.filter((p) => p.
|
|
585
|
+
else profiles.value = profiles.value.filter((p) => p.id != id);
|
|
586
586
|
},
|
|
587
587
|
setProfiles: (profs) => (profiles.value = profs),
|
|
588
588
|
proxies,
|