Skip to content

Commit 0a575a4

Browse files
zzhenryquezzzzhenryquezz
committed
feat(desk): add edit option to collection list page
1 parent 55dbfa1 commit 0a575a4

File tree

9 files changed

+269
-98
lines changed

9 files changed

+269
-98
lines changed

‎packages/core/use-cases/update-collection/update-collection.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export default class UpdateCollection {
1111

1212
const repository = this.app.facades.collection.createRepository(workspace)
1313

14-
return repository.update(collectionId, data)
14+
const collection = await repository.update(collectionId, data)
15+
16+
return {
17+
data: collection,
18+
}
1519
}
1620
}

‎packages/desktop/components/v-td.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const style = computed(() => {
2727
<template>
2828
<td
2929
class="text-left border-b border-r last:border-r-0 border-lines whitespace-nowrap overflow-hidden"
30-
:class="[noPadding ? 'p-0' : 'py-2 px-2']"
30+
:class="[noPadding ? 'p-0' : 'py-2 px-4']"
3131
:style="style"
3232
>
3333
<slot></slot>

‎packages/desktop/i18n/en-US.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ export default {
100100
image: 'Image | Images',
101101
sideBySide: 'Side by side',
102102
checkbox: 'Checkbox',
103+
repositoryType: 'Repository type',
103104
errors: {
104105
unknown: 'Unknown error',
105106
workspaceNotFound: '@:workspace not found: {0}',

‎packages/desktop/modules/collection/components/CForm.vue

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<script setup lang="ts">
2+
import { useNonReactive } from '@composables/utils'
3+
import Collection, { RepositoryType } from '@core/entities/collection'
4+
import { useStore } from '@store/global'
5+
6+
// Props & emits
7+
8+
const props = defineProps({
9+
editedItem: {
10+
type: Object as () => Collection,
11+
default: null,
12+
},
13+
})
14+
15+
interface Emits {
16+
(e: 'created', collection: Collection): void
17+
(e: 'updated', collection: Collection): void
18+
}
19+
20+
const emit = defineEmits<Emits>()
21+
22+
// submit
23+
24+
const store = useStore()
25+
26+
const payload = ref<Collection>({
27+
id: '',
28+
name: '',
29+
path: '',
30+
columns: [],
31+
repositoryType: RepositoryType.Entry,
32+
})
33+
34+
async function create() {
35+
const collection = await store.collection.create({
36+
id: payload.value.id,
37+
repositoryType: RepositoryType.Entry,
38+
name: payload.value.name,
39+
path: payload.value.path,
40+
columns: [],
41+
})
42+
43+
emit('created', collection)
44+
}
45+
46+
async function update() {
47+
if (!props.editedItem) return
48+
49+
const collection = await store.collection.update(props.editedItem.id, {
50+
id: payload.value.id,
51+
repositoryType: RepositoryType.Entry,
52+
name: payload.value.name,
53+
path: payload.value.path,
54+
columns: [],
55+
})
56+
57+
emit('updated', collection)
58+
}
59+
60+
async function submit() {
61+
if (!props.editedItem) {
62+
await create()
63+
}
64+
65+
if (props.editedItem) {
66+
await update()
67+
}
68+
69+
clear()
70+
}
71+
72+
function clear() {
73+
payload.value.id = ''
74+
payload.value.name = ''
75+
payload.value.path = ''
76+
payload.value.columns = []
77+
payload.value.repositoryType = RepositoryType.Entry
78+
}
79+
80+
// edited item
81+
82+
watch(
83+
() => props.editedItem,
84+
(collection) => {
85+
if (!collection) return clear()
86+
87+
payload.value = useNonReactive(collection)
88+
},
89+
{ immediate: true }
90+
)
91+
</script>
92+
<template>
93+
<v-card color="b-secondary" width="500">
94+
<v-card-head class="px-4">
95+
<v-card-title>
96+
{{
97+
editedItem
98+
? $t('editEntity', [$t('collection')])
99+
: $t('addEntity', [$t('collection')])
100+
}}
101+
</v-card-title>
102+
</v-card-head>
103+
<v-card-content>
104+
<v-form class="w-full" @submit="submit">
105+
<div class="mb-4">
106+
<v-input v-model="payload.id" label="ID" placeholder="collection-01" />
107+
</div>
108+
109+
<div class="mb-4">
110+
<v-input
111+
v-model="payload.name"
112+
:label="$t('name')"
113+
placeholder="Collection 01"
114+
/>
115+
</div>
116+
117+
<div class="mb-4">
118+
<v-select
119+
v-model="payload.repositoryType"
120+
disabled
121+
:label="$t('repositoryType')"
122+
:options="[
123+
{
124+
label: $t('entry'),
125+
value: RepositoryType.Entry,
126+
},
127+
{
128+
label: $t('script'),
129+
value: RepositoryType.Script,
130+
},
131+
]"
132+
/>
133+
</div>
134+
135+
<div class="mb-4">
136+
<v-input
137+
v-model="payload.path"
138+
:label="$t('path')"
139+
placeholder="/collections/collection-01"
140+
/>
141+
</div>
142+
143+
<v-btn :disabled="!payload.name || !payload.path" class="w-full" type="submit">
144+
{{ $t('create') }}
145+
</v-btn>
146+
</v-form>
147+
</v-card-content>
148+
</v-card>
149+
</template>

‎packages/desktop/modules/collection/pages/CList.vue

Lines changed: 61 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,21 @@
22
import { ref } from 'vue'
33
import { useI18n } from 'vue-i18n'
44
5+
import Collection from '@core/entities/collection'
6+
57
import { useMeta } from '@composables/metas'
6-
import { useStore } from '@modules/collection/store'
8+
import { useStore } from '@store/global'
9+
10+
import CForm from '@modules/collection/components/CForm.vue'
11+
12+
import { useRouter } from 'vue-router'
713
814
const tm = useI18n()
915
1016
const meta = useMeta({
1117
title: tm.t('listEntity', [tm.t('collection', 2)]),
1218
})
1319
14-
const dialog = ref(false)
1520
const columns = [
1621
{
1722
label: 'ID',
@@ -26,6 +31,11 @@ const columns = [
2631
name: 'name',
2732
field: 'name',
2833
},
34+
{
35+
label: tm.t('repositoryType'),
36+
name: 'repositoryType',
37+
field: 'repositoryType',
38+
},
2939
{
3040
label: tm.t('path'),
3141
name: 'path',
@@ -34,108 +44,82 @@ const columns = [
3444
{
3545
name: 'actions',
3646
field: 'actions',
47+
width: 150,
3748
},
3849
]
3950
40-
// set collections
51+
// collections
4152
const store = useStore()
4253
43-
// create new collection
44-
const payload = ref({
45-
id: '',
46-
name: '',
47-
path: '',
48-
})
54+
onMounted(store.collection.setCollections)
4955
50-
async function submit() {
51-
await store.create({
52-
data: {
53-
id: payload.value.id,
54-
crudName: 'fsFolder',
55-
name: payload.value.name,
56-
path: payload.value.path,
57-
columns: [],
58-
},
59-
})
56+
// form
57+
const router = useRouter()
6058
61-
Object.keys(payload.value).forEach((key) => {
62-
payload.value[key] = ''
63-
})
59+
const dialog = ref(false)
60+
const editedItem = ref<Collection>()
6461
62+
async function onCreate(collection: Collection) {
6563
dialog.value = false
64+
65+
await router.push(`/collections/${collection.id}/items`)
6666
}
6767
68-
// Delete collection
69-
async function deleteItem(collectionId: string) {
70-
await store.destroy({ collectionId })
68+
async function onUpdated() {
69+
dialog.value = false
70+
}
71+
72+
function editCollection(collection: Collection) {
73+
editedItem.value = collection
74+
dialog.value = true
75+
}
76+
77+
watch(dialog, (value) => {
78+
if (!value) {
79+
editedItem.value = undefined
80+
}
81+
})
82+
83+
// destroy
84+
async function deleteItem(id: string) {
85+
const result = await store.dialog.confirm({
86+
title: tm.t('areYouSure'),
87+
message: tm.t('thisActinCanNotBeUndone'),
88+
})
89+
90+
if (!result) return
91+
92+
await store.collection.destroy(id)
7193
}
7294
</script>
7395
<template>
7496
<div>
7597
<v-dialog v-model="dialog">
76-
<v-card color="b-secondary" width="500">
77-
<v-card-head class="px-4">
78-
<v-card-title>
79-
{{ $t('addEntity', [$t('collection')]) }}
80-
</v-card-title>
81-
</v-card-head>
82-
<v-card-content>
83-
<w-form class="w-full" @submit="submit">
84-
<div class="mb-4">
85-
<v-input v-model="payload.id" label="ID" placeholder="collection-01" />
86-
</div>
87-
88-
<div class="mb-4">
89-
<v-input
90-
v-model="payload.name"
91-
label="Name"
92-
placeholder="Collection 01"
93-
/>
94-
</div>
95-
96-
<div class="mb-4">
97-
<v-input
98-
v-model="payload.path"
99-
label="Path"
100-
placeholder="/collections/collection-01"
101-
/>
102-
</div>
103-
104-
<v-btn
105-
:disabled="!payload.name || !payload.path"
106-
class="w-full"
107-
type="submit"
108-
>
109-
{{ $t('create') }}
110-
</v-btn>
111-
</w-form>
112-
</v-card-content>
113-
</v-card>
98+
<c-form :edited-item="editedItem" @created="onCreate" @updated="onUpdated" />
11499
</v-dialog>
115100

116-
<v-container class="w-full py-4 border-b border-lines flex items-center">
117-
<div class="text-2xl font-bold">
101+
<v-container class="w-full border-b py-2 border-lines flex items-center">
102+
<v-card-title>
118103
{{ meta.title }}
119-
</div>
120-
<v-btn class="ml-auto" @click="dialog = true">
104+
</v-card-title>
105+
106+
<v-btn class="ml-auto" size="sm" @click="dialog = true">
121107
{{ $t('addEntity', [$t('collection')]) }}
122108
</v-btn>
123109
</v-container>
124110

125-
<v-table
126-
:columns="columns"
127-
:items="store.collections"
128-
disable-add-column
129-
disable-view-item
130-
disable-new-item
131-
>
111+
<v-table :columns="columns" :items="store.collection.collections" :fixed="false">
132112
<template #item-actions="{ item }">
133-
<v-td class="flex gap-x-4 p-2">
134-
<v-btn text size="sm" :to="`/collections/${item.id}/items`">
113+
<v-td class="flex justify-end pr-7">
114+
<v-btn mode="text" size="sm" :to="`/collections/${item.id}/items`">
135115
<fa-icon icon="eye" />
136116
</v-btn>
137117

138-
<v-btn text size="sm" color="danger" @click="deleteItem(item.id)">
118+
<v-btn mode="text" size="sm" @click="editCollection(item)">
119+
<fa-icon icon="pen" />
120+
</v-btn>
121+
122+
<v-btn mode="text" size="sm" color="danger" @click="deleteItem(item.id)">
139123
<fa-icon icon="trash" />
140124
</v-btn>
141125
</v-td>

0 commit comments

Comments
 (0)