@live-change/frontend-auto-form 0.9.18 → 0.9.20
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.
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<!-- <h4>definition</h4>
|
|
4
4
|
<pre>{{ modelDefinition }}</pre>-->
|
|
5
5
|
|
|
6
|
-
<pre>{{ modelsPathRangeConfig.view }}</pre>
|
|
7
|
-
<pre>{{ identifiers }}</pre
|
|
6
|
+
<!-- <pre>{{ modelsPathRangeConfig.view }}</pre>
|
|
7
|
+
<pre>{{ identifiers }}</pre>-->
|
|
8
8
|
|
|
9
9
|
<div class="surface-card w-full p-3 shadow-1 border-round mb-2">
|
|
10
10
|
<slot name="header">
|
|
@@ -10,75 +10,102 @@
|
|
|
10
10
|
<h4>object</h4>
|
|
11
11
|
<pre>{{ object }}</pre>-->
|
|
12
12
|
|
|
13
|
-
<div
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
:object="object.to ?? object.id"
|
|
23
|
-
:data="object"
|
|
24
|
-
class="ml-2"
|
|
25
|
-
/>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<AutoView :value="object" :root-value="object" :i18n="i18n" :attributes="attributes"
|
|
29
|
-
:definition="modelDefinition" />
|
|
30
|
-
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
|
-
<div v-for="preparedRelation of visibleObjectRelations" class="mb-4">
|
|
34
|
-
<ModelSingle :service="preparedRelation.service" :model="preparedRelation.model"
|
|
35
|
-
:identifiers="preparedRelation.identifiers">
|
|
36
|
-
<template #header>
|
|
37
|
-
<div class="text-xl">
|
|
13
|
+
<div v-if="object">
|
|
14
|
+
<div class="surface-card p-3 shadow-1 border-round mb-4">
|
|
15
|
+
|
|
16
|
+
<div class="">
|
|
17
|
+
Service <strong>{{ service }}</strong>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="flex flex-row flex-wrap justify-content-between align-items-top">
|
|
20
|
+
<div class="text-2xl mb-4">
|
|
21
|
+
<strong>{{ model }}</strong>
|
|
38
22
|
<ObjectIdentification
|
|
39
23
|
:objectType="service + '_' + model"
|
|
40
24
|
:object="object.to ?? object.id"
|
|
41
25
|
:data="object"
|
|
42
|
-
class="
|
|
26
|
+
class="ml-2"
|
|
43
27
|
/>
|
|
44
|
-
<span class="mr-2 font-medium">{{ model }}'s</span>
|
|
45
|
-
<span class="font-bold">{{ preparedRelation.model }}</span>:
|
|
46
28
|
</div>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
29
|
+
<Button label="Access" icon="pi pi-key" class="p-button mb-4" @click="showAccessControl" />
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<AutoView :value="object" :root-value="object" :i18n="i18n" :attributes="attributes"
|
|
33
|
+
:definition="modelDefinition" />
|
|
34
|
+
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div v-for="preparedRelation of visibleObjectRelations" class="mb-4">
|
|
38
|
+
<ModelSingle :service="preparedRelation.service" :model="preparedRelation.model"
|
|
39
|
+
:identifiers="preparedRelation.identifiers">
|
|
40
|
+
<template #header>
|
|
41
|
+
<div class="text-xl">
|
|
42
|
+
<ObjectIdentification
|
|
43
|
+
:objectType="service + '_' + model"
|
|
44
|
+
:object="object.to ?? object.id"
|
|
45
|
+
:data="object"
|
|
46
|
+
class="mr-2"
|
|
47
|
+
/>
|
|
48
|
+
<span class="mr-2 font-medium">{{ model }}'s</span>
|
|
49
|
+
<span class="font-bold">{{ preparedRelation.model }}</span>:
|
|
50
|
+
</div>
|
|
51
|
+
</template>
|
|
52
|
+
</ModelSingle>
|
|
53
|
+
</div>
|
|
50
54
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
55
|
+
<div v-for="preparedRelation of visibleRangeRelations" class="mb-4">
|
|
56
|
+
<ModelList :service="preparedRelation.service" :model="preparedRelation.model"
|
|
57
|
+
:identifiers="preparedRelation.identifiers" :view="preparedRelation.view">
|
|
58
|
+
<template #header>
|
|
59
|
+
<div class="text-xl">
|
|
60
|
+
<ObjectIdentification
|
|
61
|
+
:objectType="service + '_' + model"
|
|
62
|
+
:object="object.to ?? object.id"
|
|
63
|
+
:data="object"
|
|
64
|
+
class="mr-2"
|
|
65
|
+
/>
|
|
66
|
+
<span class="mr-2 font-medium">{{ model }}'s</span>
|
|
67
|
+
<span class="font-bold">{{ pluralize(preparedRelation.model) }}</span>:
|
|
68
|
+
</div>
|
|
69
|
+
</template>
|
|
70
|
+
</ModelList>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<Dialog v-model:visible="accessControlDialog"
|
|
74
|
+
:modal="true">
|
|
54
75
|
<template #header>
|
|
55
|
-
<div class="text-
|
|
56
|
-
|
|
57
|
-
:objectType="service + '_' + model"
|
|
58
|
-
:object="object.to ?? object.id"
|
|
59
|
-
:data="object"
|
|
60
|
-
class="mr-2"
|
|
61
|
-
/>
|
|
62
|
-
<span class="mr-2 font-medium">{{ model }}'s</span>
|
|
63
|
-
<span class="font-bold">{{ pluralize(preparedRelation.model) }}</span>:
|
|
76
|
+
<div class="text-900 text-3xl font-medium">
|
|
77
|
+
Access Control
|
|
64
78
|
</div>
|
|
65
79
|
</template>
|
|
66
|
-
|
|
80
|
+
<AccessControl
|
|
81
|
+
:objectType="objectType" :object="object.to ?? object.id"
|
|
82
|
+
:availableRoles="accessControlRoles"
|
|
83
|
+
:availablePublicRoles="accessControlRoles"
|
|
84
|
+
:defaultInviteRoles="accessControlRoles.slice(0, 1)"
|
|
85
|
+
:adminRoles="['admin', 'owner']"
|
|
86
|
+
/>
|
|
87
|
+
</Dialog>
|
|
88
|
+
|
|
67
89
|
</div>
|
|
90
|
+
<NotFound v-else />
|
|
68
91
|
|
|
69
92
|
<div class="surface-card p-3 shadow-1 border-round">
|
|
70
93
|
|
|
71
94
|
<pre>{{ preparedRelations }}</pre>
|
|
72
95
|
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
(
|
|
77
|
-
|
|
78
|
-
|
|
96
|
+
<div v-if="backwardRelations">
|
|
97
|
+
<h4>Backward relations</h4>
|
|
98
|
+
<pre>{{
|
|
99
|
+
backwardRelations.map(
|
|
100
|
+
({ from, relation, what }) => ({ from: from.serviceName + '_' + from.name, relation, what })
|
|
101
|
+
)
|
|
102
|
+
}}</pre>
|
|
103
|
+
</div>
|
|
79
104
|
|
|
80
105
|
</div>
|
|
81
106
|
|
|
107
|
+
<pre>{{ accessControlRoles }}</pre>
|
|
108
|
+
|
|
82
109
|
</div>
|
|
83
110
|
</template>
|
|
84
111
|
|
|
@@ -88,6 +115,9 @@
|
|
|
88
115
|
import ModelList from './ModelList.vue'
|
|
89
116
|
import ModelSingle from './ModelSingle.vue'
|
|
90
117
|
|
|
118
|
+
import { NotFound } from "@live-change/url-frontend"
|
|
119
|
+
import { AccessControl } from "@live-change/access-control-frontend"
|
|
120
|
+
|
|
91
121
|
import pluralize from 'pluralize'
|
|
92
122
|
import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
|
|
93
123
|
import { RangeViewer, injectComponent, InjectComponent } from "@live-change/vue3-components"
|
|
@@ -118,7 +148,6 @@
|
|
|
118
148
|
|
|
119
149
|
const emit = defineEmits(['saved', 'draftSaved', 'draftDiscarded', 'saveError', 'created' ])
|
|
120
150
|
|
|
121
|
-
|
|
122
151
|
import AutoObjectIdentification from './AutoObjectIdentification.vue'
|
|
123
152
|
const ObjectIdentification = computed(() =>
|
|
124
153
|
injectComponent({
|
|
@@ -141,10 +170,6 @@
|
|
|
141
170
|
const forwardRelations = computed(() => getForwardRelations(modelDefinition.value, () => true, api))
|
|
142
171
|
const backwardRelations = computed(() => getBackwardRelations(modelDefinition.value, api))
|
|
143
172
|
|
|
144
|
-
const itemRelations = computed(
|
|
145
|
-
() => backwardRelations.value.filter(relation => relation.relation === 'itemOf')
|
|
146
|
-
)
|
|
147
|
-
|
|
148
173
|
import viewData from '../../logic/viewData.js'
|
|
149
174
|
|
|
150
175
|
const viewDataPromise = viewData({
|
|
@@ -154,18 +179,17 @@
|
|
|
154
179
|
path, api
|
|
155
180
|
})
|
|
156
181
|
|
|
157
|
-
const [object] = await Promise.all([
|
|
182
|
+
const [{ data: object, error }] = await Promise.all([
|
|
158
183
|
viewDataPromise
|
|
159
184
|
])
|
|
160
185
|
|
|
161
|
-
|
|
162
|
-
[model.value[0].toLowerCase() + model.value.slice(1)]: object.value.to ?? object.value.id
|
|
163
|
-
}))
|
|
186
|
+
console.log("GOT OBJECT", object, "ERROR", error)
|
|
164
187
|
|
|
188
|
+
const objectType = computed(() => service.value + '_' + model.value)
|
|
165
189
|
|
|
166
190
|
const preparedRelations = computed(() => {
|
|
167
|
-
|
|
168
|
-
return prepareObjectRelations(objectType, object.value.to ?? object.value.id, api)
|
|
191
|
+
if(!object.value) return []
|
|
192
|
+
return prepareObjectRelations(objectType.value, object.value.to ?? object.value.id, api)
|
|
169
193
|
})
|
|
170
194
|
|
|
171
195
|
const visibleRangeRelations = computed(() => preparedRelations.value.filter(preparedRelation => {
|
|
@@ -180,6 +204,12 @@
|
|
|
180
204
|
return true
|
|
181
205
|
}))
|
|
182
206
|
|
|
207
|
+
const accessControlConfig = computed(() => modelDefinition.value?.autoCrud?.accessControl)
|
|
208
|
+
const accessControlDialog = ref(false)
|
|
209
|
+
function showAccessControl() {
|
|
210
|
+
accessControlDialog.value = true
|
|
211
|
+
}
|
|
212
|
+
const accessControlRoles = computed(() => modelDefinition.value?.accessRoles ?? [])
|
|
183
213
|
|
|
184
214
|
</script>
|
|
185
215
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { usePath, live, useApi } from '@live-change/vue3-ssr'
|
|
2
|
+
import { computed } from 'vue'
|
|
2
3
|
|
|
3
|
-
export default function viewData(options) {
|
|
4
|
+
export default async function viewData(options) {
|
|
4
5
|
if(!options) throw new Error('options must be provided')
|
|
5
6
|
|
|
6
7
|
const {
|
|
@@ -29,6 +30,17 @@ export default function viewData(options) {
|
|
|
29
30
|
|
|
30
31
|
const savedDataPath = path[serviceName][crudMethods.read](identifiers)
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
let data
|
|
34
|
+
let error
|
|
35
|
+
|
|
36
|
+
try {
|
|
37
|
+
data = await live(savedDataPath)
|
|
38
|
+
} catch(e) {
|
|
39
|
+
console.log("VIEW DATA CATCH ERROR", e)
|
|
40
|
+
error = computed(() => e) /// TODO: realtime error handling for access errors
|
|
41
|
+
data = computed(() => null)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
return { data, error }
|
|
33
45
|
|
|
34
46
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@live-change/frontend-auto-form",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.20",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
|
|
6
6
|
"localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
|
|
@@ -22,16 +22,16 @@
|
|
|
22
22
|
"type": "module",
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@fortawesome/fontawesome-free": "^6.7.2",
|
|
25
|
-
"@live-change/cli": "^0.9.
|
|
26
|
-
"@live-change/dao": "^0.9.
|
|
27
|
-
"@live-change/dao-vue3": "^0.9.
|
|
28
|
-
"@live-change/dao-websocket": "^0.9.
|
|
29
|
-
"@live-change/framework": "^0.9.
|
|
30
|
-
"@live-change/image-frontend": "^0.9.
|
|
31
|
-
"@live-change/image-service": "^0.9.
|
|
32
|
-
"@live-change/session-service": "^0.9.
|
|
33
|
-
"@live-change/vue3-components": "^0.9.
|
|
34
|
-
"@live-change/vue3-ssr": "^0.9.
|
|
25
|
+
"@live-change/cli": "^0.9.20",
|
|
26
|
+
"@live-change/dao": "^0.9.20",
|
|
27
|
+
"@live-change/dao-vue3": "^0.9.20",
|
|
28
|
+
"@live-change/dao-websocket": "^0.9.20",
|
|
29
|
+
"@live-change/framework": "^0.9.20",
|
|
30
|
+
"@live-change/image-frontend": "^0.9.20",
|
|
31
|
+
"@live-change/image-service": "^0.9.20",
|
|
32
|
+
"@live-change/session-service": "^0.9.20",
|
|
33
|
+
"@live-change/vue3-components": "^0.9.20",
|
|
34
|
+
"@live-change/vue3-ssr": "^0.9.20",
|
|
35
35
|
"@vueuse/core": "^12.3.0",
|
|
36
36
|
"codeceptjs-assert": "^0.0.5",
|
|
37
37
|
"compression": "^1.7.5",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"vue3-scroll-border": "0.1.6"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"@live-change/codeceptjs-helper": "^0.9.
|
|
55
|
+
"@live-change/codeceptjs-helper": "^0.9.20",
|
|
56
56
|
"codeceptjs": "^3.6.10",
|
|
57
57
|
"generate-password": "1.7.1",
|
|
58
58
|
"playwright": "1.49.1",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"author": "Michał Łaszczewski <michal@laszczewski.pl>",
|
|
64
64
|
"license": "ISC",
|
|
65
65
|
"description": "",
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "6524c2dedbb137e95e9aa07eaf9503d68d7b9093"
|
|
67
67
|
}
|