|
Lines 1-34
Link Here
|
| 1 |
<template> |
1 |
<template> |
| 2 |
<WidgetWrapper v-bind="widgetWrapperProps"> |
2 |
<WidgetWrapper v-bind="widgetWrapperProps"> |
| 3 |
<template #default> |
3 |
<template #default> |
| 4 |
<p class="text-left"> |
4 |
<p class="text-left" v-html="countSummary"></p> |
| 5 |
{{ $__("There are") }} |
|
|
| 6 |
<template |
| 7 |
v-for="(definition, index) in countDefinitions" |
| 8 |
:key="index" |
| 9 |
> |
| 10 |
<strong> |
| 11 |
<router-link |
| 12 |
v-if="definition.page" |
| 13 |
:to="{ name: definition.page }" |
| 14 |
> |
| 15 |
{{ createCountText(definition) }} |
| 16 |
</router-link> |
| 17 |
<span v-else class="inactive-link"> |
| 18 |
{{ createCountText(definition) }} |
| 19 |
</span> |
| 20 |
</strong> |
| 21 |
<template v-if="index < countDefinitions.length - 1" |
| 22 |
>, </template |
| 23 |
> |
| 24 |
<template v-else>.</template> |
| 25 |
</template> |
| 26 |
</p> |
| 27 |
</template> |
5 |
</template> |
| 28 |
</WidgetWrapper> |
6 |
</WidgetWrapper> |
| 29 |
</template> |
7 |
</template> |
| 30 |
<script> |
8 |
<script> |
| 31 |
import { reactive } from "vue"; |
9 |
import { reactive, computed, onMounted } from "vue"; |
| 32 |
import { useBaseWidget } from "../../../composables/base-widget.js"; |
10 |
import { useBaseWidget } from "../../../composables/base-widget.js"; |
| 33 |
import { APIClient } from "../../../fetch/api-client.js"; |
11 |
import { APIClient } from "../../../fetch/api-client.js"; |
| 34 |
import WidgetWrapper from "../WidgetWrapper.vue"; |
12 |
import WidgetWrapper from "../WidgetWrapper.vue"; |
|
Lines 102-112
export default {
Link Here
|
| 102 |
]); |
80 |
]); |
| 103 |
|
81 |
|
| 104 |
const createCountText = definition => { |
82 |
const createCountText = definition => { |
| 105 |
if (definition.count === 1) { |
83 |
const count = definition.count; |
| 106 |
return `${definition.count} ${definition.labelSingular}`; |
84 |
const label = |
| 107 |
} else { |
85 |
count === 1 ? definition.labelSingular : definition.labelPlural; |
| 108 |
return `${definition.count} ${definition.labelPlural}`; |
86 |
return `${count} ${label}`; |
| 109 |
} |
|
|
| 110 |
}; |
87 |
}; |
| 111 |
|
88 |
|
| 112 |
async function getCounts() { |
89 |
async function getCounts() { |
|
Lines 126-144
export default {
Link Here
|
| 126 |
} |
103 |
} |
| 127 |
} |
104 |
} |
| 128 |
|
105 |
|
|
|
106 |
const countSummary = computed(() => { |
| 107 |
const parts = countDefinitions.map(def => { |
| 108 |
const text = createCountText(def); |
| 109 |
|
| 110 |
if (def.page) { |
| 111 |
let link = router.resolve({ |
| 112 |
name: def.page, |
| 113 |
}).href; |
| 114 |
return `<strong><a onclick="goToPage(event, '${def.page}')" href="${link}">${text}</a></strong>`; |
| 115 |
} else { |
| 116 |
return `<strong><span class="inactive-link">${text}</span></strong>`; |
| 117 |
} |
| 118 |
}); |
| 119 |
|
| 120 |
const joined = parts.join(", "); |
| 121 |
return $__("There are %s.").format(joined); |
| 122 |
}); |
| 123 |
|
| 129 |
baseWidget.onDashboardMounted(() => { |
124 |
baseWidget.onDashboardMounted(() => { |
| 130 |
getCounts(); |
125 |
getCounts(); |
| 131 |
}); |
126 |
}); |
| 132 |
|
127 |
|
| 133 |
function goToPage(page) { |
128 |
onMounted(() => { |
| 134 |
router.push({ name: page }); |
129 |
if (!window.goToPage) { |
| 135 |
} |
130 |
window.goToPage = function (e, pageName) { |
|
|
131 |
e.preventDefault(); |
| 132 |
router.push({ name: pageName }); |
| 133 |
}; |
| 134 |
} |
| 135 |
}); |
| 136 |
|
136 |
|
| 137 |
return { |
137 |
return { |
| 138 |
...baseWidget, |
138 |
...baseWidget, |
| 139 |
createCountText, |
|
|
| 140 |
countDefinitions, |
139 |
countDefinitions, |
| 141 |
goToPage, |
140 |
countSummary, |
| 142 |
}; |
141 |
}; |
| 143 |
}, |
142 |
}, |
| 144 |
}; |
143 |
}; |
| 145 |
- |
|
|