|
Lines 6-12
Link Here
|
| 6 |
:resource="resource" |
6 |
:resource="resource" |
| 7 |
:componentPropData="{ ...$props, ...$data }" |
7 |
:componentPropData="{ ...$props, ...$data }" |
| 8 |
/> |
8 |
/> |
| 9 |
<h2> |
9 |
<h2 v-if="isNewResource">{{ instancedResource.i18n.newLabel }}</h2> |
|
|
10 |
<h2 v-else> |
| 10 |
{{ |
11 |
{{ |
| 11 |
instancedResource.i18n.displayName + |
12 |
instancedResource.i18n.displayName + |
| 12 |
" #" + |
13 |
" #" + |
|
Lines 78-83
Link Here
|
| 78 |
</fieldset> |
79 |
</fieldset> |
| 79 |
</template> |
80 |
</template> |
| 80 |
</SplitScreenWrapper> |
81 |
</SplitScreenWrapper> |
|
|
82 |
<div v-else-if="displayMode == 'sections'"> |
| 83 |
<FormSection |
| 84 |
v-for="(group, counter) in fieldList" |
| 85 |
v-bind:key="counter" |
| 86 |
:group="group" |
| 87 |
:resource="resource" |
| 88 |
:instancedResource="instancedResource" |
| 89 |
:startEditing="isNewResource" |
| 90 |
:disabled=" |
| 91 |
group.requiresId && |
| 92 |
isNewResource && |
| 93 |
!resource[instancedResource.idAttr] |
| 94 |
" |
| 95 |
@save=" |
| 96 |
(groupName, updatedResource) => |
| 97 |
handleSectionSave(groupName, updatedResource) |
| 98 |
" |
| 99 |
/> |
| 100 |
</div> |
| 81 |
<div v-else> |
101 |
<div v-else> |
| 82 |
<fieldset |
102 |
<fieldset |
| 83 |
class="rows" |
103 |
class="rows" |
|
Lines 113-118
Link Here
|
| 113 |
<script> |
133 |
<script> |
| 114 |
import Toolbar from "./Toolbar.vue"; |
134 |
import Toolbar from "./Toolbar.vue"; |
| 115 |
import ShowElement from "./ShowElement.vue"; |
135 |
import ShowElement from "./ShowElement.vue"; |
|
|
136 |
import FormSection from "./FormSection.vue"; |
| 116 |
import { computed, onBeforeMount, ref } from "vue"; |
137 |
import { computed, onBeforeMount, ref } from "vue"; |
| 117 |
import TabsWrapper from "./TabsWrapper.vue"; |
138 |
import TabsWrapper from "./TabsWrapper.vue"; |
| 118 |
import AccordionWrapper from "./AccordionWrapper.vue"; |
139 |
import AccordionWrapper from "./AccordionWrapper.vue"; |
|
Lines 125-149
export default {
Link Here
|
| 125 |
const resource = ref(null); |
146 |
const resource = ref(null); |
| 126 |
const additionalProps = ref({}); |
147 |
const additionalProps = ref({}); |
| 127 |
|
148 |
|
| 128 |
onBeforeMount(() => { |
149 |
const isNewResource = computed( |
| 129 |
props.instancedResource.getResource( |
150 |
() => |
| 130 |
props.instancedResource.route.params[ |
151 |
!props.instancedResource.route.params[ |
| 131 |
props.instancedResource.idAttr |
152 |
props.instancedResource.idAttr |
| 132 |
], |
153 |
] |
| 133 |
{ |
154 |
); |
| 134 |
resource, |
155 |
|
| 135 |
initialized, |
156 |
onBeforeMount(() => { |
| 136 |
instancedResource: props.instancedResource, |
157 |
if (isNewResource.value) { |
| 137 |
additionalProps, |
158 |
resource.value = {}; |
| 138 |
}, |
159 |
initialized.value = true; |
| 139 |
"show" |
160 |
} else { |
| 140 |
); |
161 |
props.instancedResource.getResource( |
|
|
162 |
props.instancedResource.route.params[ |
| 163 |
props.instancedResource.idAttr |
| 164 |
], |
| 165 |
{ |
| 166 |
resource, |
| 167 |
initialized, |
| 168 |
instancedResource: props.instancedResource, |
| 169 |
additionalProps, |
| 170 |
}, |
| 171 |
"show" |
| 172 |
); |
| 173 |
} |
| 141 |
}); |
174 |
}); |
| 142 |
|
175 |
|
|
|
176 |
const handleSectionSave = async (groupName, updatedResource) => { |
| 177 |
try { |
| 178 |
const result = await props.instancedResource.onShowSectionSave( |
| 179 |
groupName, |
| 180 |
updatedResource, |
| 181 |
resource.value, |
| 182 |
isNewResource.value |
| 183 |
); |
| 184 |
if (result) { |
| 185 |
Object.assign(resource.value, result); |
| 186 |
const newId = result[props.instancedResource.idAttr]; |
| 187 |
if (isNewResource.value && newId) { |
| 188 |
props.instancedResource.router.push({ |
| 189 |
name: props.instancedResource.components.show, |
| 190 |
params: { |
| 191 |
[props.instancedResource.idAttr]: newId, |
| 192 |
}, |
| 193 |
}); |
| 194 |
} |
| 195 |
} |
| 196 |
} catch (error) { |
| 197 |
// errors are surfaced by the httpClient / setError |
| 198 |
} |
| 199 |
}; |
| 200 |
|
| 143 |
const fieldList = computed(() => { |
201 |
const fieldList = computed(() => { |
| 144 |
const fieldGroupings = props.instancedResource.getFieldGroupings( |
202 |
const fieldGroupings = props.instancedResource.getFieldGroupings( |
| 145 |
"Show", |
203 |
"Show", |
| 146 |
resource.value |
204 |
// Pass null for new resources so the hasDataToDisplay filter is skipped |
|
|
205 |
isNewResource.value ? null : resource.value |
| 147 |
); |
206 |
); |
| 148 |
const fieldsToAppend = props.instancedResource |
207 |
const fieldsToAppend = props.instancedResource |
| 149 |
.appendToShow({ |
208 |
.appendToShow({ |
|
Lines 185-190
export default {
Link Here
|
| 185 |
additionalProps, |
244 |
additionalProps, |
| 186 |
fieldList, |
245 |
fieldList, |
| 187 |
displayMode, |
246 |
displayMode, |
|
|
247 |
isNewResource, |
| 248 |
handleSectionSave, |
| 188 |
}; |
249 |
}; |
| 189 |
}, |
250 |
}, |
| 190 |
props: { |
251 |
props: { |
|
Lines 193-198
export default {
Link Here
|
| 193 |
components: { |
254 |
components: { |
| 194 |
Toolbar, |
255 |
Toolbar, |
| 195 |
ShowElement, |
256 |
ShowElement, |
|
|
257 |
FormSection, |
| 196 |
TabsWrapper, |
258 |
TabsWrapper, |
| 197 |
AccordionWrapper, |
259 |
AccordionWrapper, |
| 198 |
SplitScreenWrapper, |
260 |
SplitScreenWrapper, |