Skip to content

Commit b1a10e8

Browse files
HectruendoHectruendo
committed
When a value of an item is a reference and it falls out of the pagination,then we need to retrieve it
1 parent 66965af commit b1a10e8

5 files changed

Lines changed: 57 additions & 9 deletions

File tree

‎BOOK_OF_FRUSTRATIONS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ This file is intended for writing down all those TODOs/tech. deb. you know it ne
1414
- [ ] Remove the cache system from the item store.
1515
- [ ] Accept a list of ids to be deleted in the conversation API endpoint so the widget won't need to call the endpoint multiple times.
1616
- [ ] The admin should make use of the directory routing so back button works better and links actually bring you to edit pages.
17+
- [ ] Admin: Add the composables (as such useNuxtApp ($axios), useItemsStore, etc...) inside the utility functions on the admin (itemstore, utls, etc...) so we won't pass them as parameters.

‎admin/components/generic/Card.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<template #header>
55
<div class="card-header-title">{{ createTitle(item) }}</div>
66
</template>
7-
<div v-for="(name, prop) in cardProps" class="property">
7+
<div v-for="(prop, name) in resolvedCardProps" class="property">
88
<slot :name="prop" v-bind="{item, name, prop}">
9-
<span class="title">{{ name }}:</span>{{ solveRefPropValue(item, prop, itemSchema) }}
9+
<span class="title">{{ name }}:</span>{{ prop.finalValue }}
1010
</slot>
1111
</div>
1212
<div class="divider" v-if="editable || deletable">
@@ -96,6 +96,18 @@ async function delItem() {
9696
deleteDialogVisible.value = false;
9797
emit("click-delete", props.item.id);
9898
}
99+
100+
async function resolveCardProps() {
101+
const res = {};
102+
for (const [prop, name] of Object.entries(props.cardProps)) {
103+
const value = await solveRefPropValue(props.item, prop, props.itemSchema);
104+
res[name] = {prop: prop, finalValue: value};
105+
}
106+
return res
107+
}
108+
109+
const resolvedCardProps = ref(await resolveCardProps())
110+
99111
</script>
100112

101113
<style lang="scss">

‎admin/components/generic/ReadView.vue‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
</div>
4747
<el-table v-else-if="requiredFilterSatisfied"
4848
class="table-view"
49-
:data="itemsStore.items[apiUrl]?.results"
49+
:data="resolvedTableRowProps"
5050
:stripe="false"
5151
:defaultSort="defaultSort"
5252
sortable="custom"
@@ -56,7 +56,7 @@
5656
v-for="(propInfo, prop) in tableProps"
5757
:prop="prop"
5858
:label="propInfo.name"
59-
:formatter="(row, column) => propInfo.formatter ? propInfo.formatter(row, column.property) : solveRefPropValue(row, column.property, itemSchema)"
59+
:formatter="(row, column) => propInfo.formatter ? propInfo.formatter(row, column.property) : row[column.property]"
6060
:width="propInfo.width ? propInfo.width : undefined"
6161
:align="propInfo.align ? propInfo.align : undefined"
6262
:sortable="propInfo.sortable"
@@ -124,6 +124,7 @@ const deleteDialogVisible = ref(false)
124124
const {schema} = storeToRefs(itemsStore)
125125
const itemSchema = ref({})
126126
const route = useRoute()
127+
const resolvedTableRowProps = ref([])
127128
128129
const props = defineProps({
129130
readableName: {
@@ -209,11 +210,26 @@ async function loadItems() {
209210
return
210211
}
211212
await itemsStore.retrieveItems($axios, props.apiUrl)
213+
await resolveTableRowProps(itemsStore.items[props.apiUrl]?.results)
212214
itemsStore.loading = false
213215
}
214216
215217
await initData()
216218
219+
220+
async function resolveTableRowProps(results) {
221+
const res = []
222+
for (const row of results) {
223+
const resolvedRow = {...row}
224+
for (const [prop, propInfo] of Object.entries(props.tableProps)) {
225+
const value = await solveRefPropValue(row, prop, itemSchema.value)
226+
resolvedRow[prop] = value
227+
}
228+
res.push(resolvedRow)
229+
}
230+
resolvedTableRowProps.value = res
231+
}
232+
217233
function stateToAdd() {
218234
itemsStore.adding = true
219235
}

‎admin/store/items.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const useItemsStore = defineStore('items', {
8181
if (!schemaName)
8282
schemaName = this.getSchemaNameFromPath(apiUrl)
8383
if (resolveRefs)
84-
return await this.resolveRefs($axios, this.schema[schemaName])
84+
return await this._resolveRefs($axios, this.schema[schemaName])
8585
return this.schema[schemaName]
8686
},
8787
async getNextItem($axios, apiUrl, itemId, direction = 1, params = {}, force= false) {
@@ -99,7 +99,7 @@ export const useItemsStore = defineStore('items', {
9999
return undefined
100100
return this.items[cacheName].results[index]
101101
},
102-
async resolveRefs($axios, schema) {
102+
async _resolveRefs($axios, schema) {
103103
if (!schema.properties && schema.oneOf) {
104104
const oneOf = await this.getSchemaDef($axios, undefined, false, schema.oneOf[0].$ref.split("/").slice(-1)[0])
105105
schema.properties = oneOf.properties

‎admin/utils/index.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { ElNotification } from "element-plus";
22
import { authHeaders } from "~/store/items.js";
3+
import { useItemsStore } from "~/store/items.js";
4+
5+
36

47
export function rgba2hex(orig) {
58
if (!orig.toLowerCase().startsWith("rgba"))
@@ -42,21 +45,37 @@ export function formatDate(date) {
4245
return `${day}/${month}/${year} ${hour}:${minutes}`;
4346
}
4447

45-
export function solveRefPropValue(item, propName, itemSchema) {
48+
export async function solveRefPropValue(item, propName, itemSchema) {
49+
const itemsStore = useItemsStore();
50+
const {$axios} = useNuxtApp();
4651
if (!itemSchema)
4752
return;
4853
const prop = itemSchema.properties[propName];
49-
if (!prop)
54+
if (!prop) {
5055
return item[propName];
56+
}
5157
if (prop.$ref && itemSchema.properties[propName].choices) {
5258
// itemSchema.choices has the values for the $ref: [{label: "label", value: "value"}, {...}] item[propName] has the value, we want the label
5359
let choice;
5460
if (itemSchema.properties[propName].choices.results)
5561
choice = itemSchema.properties[propName].choices.results.find(choice => choice.value === item[propName]);
5662
else
5763
choice = itemSchema.properties[propName].choices.find(choice => choice.value === item[propName]);
58-
if (choice) {
64+
if (choice)
5965
return choice.label;
66+
else if (!choice && prop.$ref) {
67+
let apiUrl = prop?.choices?.next // it better ahs a next...
68+
if (apiUrl) {
69+
apiUrl = apiUrl.split("?")[0];
70+
const res = await itemsStore.retrieveItems($axios, apiUrl, { // TODO: we should cache this, because it tables with a lot of items will make a lot of the same requests
71+
id: item[propName],
72+
limit: 0,
73+
offset: 0,
74+
ordering: undefined
75+
}, false, true);
76+
if (res)
77+
return res.name
78+
}
6079
}
6180
}
6281
return item[propName];

0 commit comments

Comments
 (0)