Fix item count in tabular layout & drop composable (directus#24043)

skydtrtzmr · Nov 14, 2024 · adf5171 · adf5171
1 parent 7a11ce6
commit adf5171
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 64 deletions.
diff --git a/app/src/composables/use-format-items-count.ts b/app/src/composables/use-format-items-count.ts
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { Sort } from '@/components/v-table/types';
-import { useFormatItemsCountPaginated } from '@/composables/use-format-items-count';
 import { useRelationM2M } from '@/composables/use-relation-m2m';
 import { DisplayItem, RelationQueryMultiple, useRelationMultiple } from '@/composables/use-relation-multiple';
 import { useRelationPermissionsM2M } from '@/composables/use-relation-permissions';
 import { useFieldsStore } from '@/stores/fields';
 import { LAYOUTS } from '@/types/interfaces';
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
 import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
+import { formatItemsCountPaginated } from '@/utils/format-items-count';
 import { getItemRoute } from '@/utils/get-route';
 import { parseFilter } from '@/utils/parse-filter';
 import DrawerBatch from '@/views/private/components/drawer-batch.vue';
@@ -63,7 +63,7 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(['input']);
-const { t } = useI18n();
+const { t, n } = useI18n();
 const { collection, field, primaryKey } = toRefs(props);
 const { relationInfo } = useRelationM2M(collection, field);
 const fieldsStore = useFieldsStore();
@@ -183,12 +183,15 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 
 const pageCount = computed(() => Math.ceil(totalItemCount.value / limit.value));
 
-const showingCount = useFormatItemsCountPaginated({
-	currentItems: totalItemCount,
-	currentPage: page,
-	perPage: limit,
-	isFiltered: computed(() => !!(search.value || searchFilter.value)),
-});
+const showingCount = computed(() =>
+	formatItemsCountPaginated({
+		currentItems: totalItemCount.value,
+		currentPage: page.value,
+		perPage: limit.value,
+		isFiltered: !!(search.value || searchFilter.value),
+		i18n: { t, n },
+	}),
+);
 
 const headers = ref<Array<any>>([]);
 
@@ -576,8 +579,8 @@ function getLinkForItem(item: DisplayItem) {
 
 			<template v-else-if="loading">
 				<v-skeleton-loader
-					v-for="n in clamp(totalItemCount - (page - 1) * limit, 1, limit)"
-					:key="n"
+					v-for="num in clamp(totalItemCount - (page - 1) * limit, 1, limit)"
+					:key="num"
 					:type="totalItemCount > 4 ? 'block-list-item-dense' : 'block-list-item'"
 				/>
 			</template>

diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { Sort } from '@/components/v-table/types';
-import { useFormatItemsCountPaginated } from '@/composables/use-format-items-count';
 import { DisplayItem, RelationQueryMultiple, useRelationMultiple } from '@/composables/use-relation-multiple';
 import { useRelationO2M } from '@/composables/use-relation-o2m';
 import { useRelationPermissionsO2M } from '@/composables/use-relation-permissions';
 import { useFieldsStore } from '@/stores/fields';
 import { LAYOUTS } from '@/types/interfaces';
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
 import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
+import { formatItemsCountPaginated } from '@/utils/format-items-count';
 import { getItemRoute } from '@/utils/get-route';
 import { parseFilter } from '@/utils/parse-filter';
 import DrawerBatch from '@/views/private/components/drawer-batch.vue';
@@ -60,7 +60,7 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(['input']);
-const { t } = useI18n();
+const { t, n } = useI18n();
 const { collection, field, primaryKey } = toRefs(props);
 const { relationInfo } = useRelationO2M(collection, field);
 const fieldsStore = useFieldsStore();
@@ -154,12 +154,15 @@ const { createAllowed, deleteAllowed, updateAllowed } = useRelationPermissionsO2
 
 const pageCount = computed(() => Math.ceil(totalItemCount.value / limit.value));
 
-const showingCount = useFormatItemsCountPaginated({
-	currentItems: totalItemCount,
-	currentPage: page,
-	perPage: limit,
-	isFiltered: computed(() => !!(search.value || searchFilter.value)),
-});
+const showingCount = computed(() =>
+	formatItemsCountPaginated({
+		currentItems: totalItemCount.value,
+		currentPage: page.value,
+		perPage: limit.value,
+		isFiltered: !!(search.value || searchFilter.value),
+		i18n: { t, n },
+	}),
+);
 
 const headers = ref<Array<any>>([]);
 
@@ -518,8 +521,8 @@ function getLinkForItem(item: DisplayItem) {
 
 			<template v-else-if="loading">
 				<v-skeleton-loader
-					v-for="n in clamp(totalItemCount - (page - 1) * limit, 1, limit)"
-					:key="n"
+					v-for="num in clamp(totalItemCount - (page - 1) * limit, 1, limit)"
+					:key="num"
 					:type="totalItemCount > 4 ? 'block-list-item-dense' : 'block-list-item'"
 				/>
 			</template>

diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts
@@ -1,14 +1,15 @@
-import { useFormatItemsCountPaginated } from '@/composables/use-format-items-count';
 import { useRelationsStore } from '@/stores/relations';
 import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
+import { formatItemsCountPaginated } from '@/utils/format-items-count';
 import { getItemRoute } from '@/utils/get-route';
 import { saveAsCSV } from '@/utils/save-as-csv';
 import { syncRefProperty } from '@/utils/sync-ref-property';
 import { useCollection, useItems, useSync } from '@directus/composables';
 import { defineLayout } from '@directus/extensions';
 import { getFieldsFromTemplate } from '@directus/utils';
 import { clone } from 'lodash';
-import { computed, Ref, ref, toRefs } from 'vue';
+import { computed, ref, toRefs } from 'vue';
+import { useI18n } from 'vue-i18n';
 import CardsActions from './actions.vue';
 import CardsLayout from './cards.vue';
 import CardsOptions from './options.vue';
@@ -26,6 +27,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		actions: CardsActions,
 	},
 	setup(props, { emit }) {
+		const { t, n } = useI18n();
 		const relationsStore = useRelationsStore();
 
 		const selection = useSync(props, 'selection', emit);
@@ -66,19 +68,18 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				filterSystem,
 			});
 
-		const formattedCount = useFormatItemsCountPaginated({
-			currentItems: itemCount as Ref<number>,
-			currentPage: page,
-			perPage: limit,
-			isFiltered: computed(() => !!filterUser.value),
-			totalItems: totalCount as Ref<number>,
-		});
-
 		const showingCount = computed(() => {
 			// Don't show count if there are no items
 			if (!totalCount.value || !itemCount.value) return;
 
-			return formattedCount.value;
+			return formatItemsCountPaginated({
+				currentItems: itemCount.value,
+				currentPage: page.value,
+				perPage: limit.value,
+				isFiltered: !!filterUser.value,
+				totalItems: totalCount.value,
+				i18n: { t, n },
+			});
 		});
 
 		const width = ref(0);

diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
@@ -13,6 +13,7 @@ import { defineLayout } from '@directus/extensions';
 import { Field } from '@directus/types';
 import { debounce, flatten } from 'lodash';
 import { computed, ref, toRefs, unref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import TabularActions from './actions.vue';
 import TabularOptions from './options.vue';
 import TabularLayout from './tabular.vue';
@@ -30,6 +31,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 	},
 	headerShadow: false,
 	setup(props, { emit }) {
+		const { t, n } = useI18n();
 		const fieldsStore = useFieldsStore();
 
 		const selection = useSync(props, 'selection', emit);
@@ -85,6 +87,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				perPage: limit.value,
 				isFiltered: !!filterUser.value,
 				totalItems: totalCount.value,
+				i18n: { t, n },
 			});
 		});
 

diff --git a/app/src/modules/settings/routes/marketplace/routes/registry/components/inline-filter.vue b/app/src/modules/settings/routes/marketplace/routes/registry/components/inline-filter.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useFormatItemsCountPaginated } from '@/composables/use-format-items-count';
+import { formatItemsCountPaginated } from '@/utils/format-items-count';
 import { EXTENSION_TYPES } from '@directus/extensions';
 import { watchDebounced } from '@vueuse/core';
-import { ref, computed, toRefs } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const type = defineModel<string | null>('type');
@@ -31,15 +31,18 @@ watchDebounced(
 	{ debounce: 300 },
 );
 
-const { t } = useI18n();
+const { t, n } = useI18n();
 const { filterCount, page, perPage } = toRefs(props);
 
-const showingCount = useFormatItemsCountPaginated({
-	currentItems: filterCount,
-	currentPage: page,
-	perPage: perPage,
-	isFiltered: computed(() => !!search.value),
-});
+const showingCount = computed(() =>
+	formatItemsCountPaginated({
+		currentItems: filterCount.value,
+		currentPage: page.value,
+		perPage: perPage.value,
+		isFiltered: !!search.value,
+		i18n: { t, n },
+	}),
+);
 
 const typeOptions = [
 	{

diff --git a/app/src/views/private/components/notifications-drawer.vue b/app/src/views/private/components/notifications-drawer.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import api from '@/api';
 import useDatetime from '@/components/use-datetime.vue';
-import { useFormatItemsCountPaginated } from '@/composables/use-format-items-count';
 import { useCollectionsStore } from '@/stores/collections';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useUserStore } from '@/stores/user';
+import { formatItemsCountPaginated } from '@/utils/format-items-count';
 import { getCollectionRoute, getItemRoute } from '@/utils/get-route';
 import SearchInput from '@/views/private/components/search-input.vue';
 import { useItems } from '@directus/composables';
@@ -20,7 +20,7 @@ type LocalNotification = Notification & {
 	to?: string;
 };
 
-const { t } = useI18n();
+const { t, n } = useI18n();
 const appStore = useAppStore();
 const userStore = useUserStore();
 const collectionsStore = useCollectionsStore();
@@ -103,19 +103,18 @@ const notifications = computed<LocalNotification[]>(() => {
 	});
 });
 
-const formattedCount = useFormatItemsCountPaginated({
-	currentItems: itemCount as Ref<number>,
-	currentPage: page,
-	perPage: limit,
-	totalItems: totalCount as Ref<number>,
-	isFiltered: computed(() => !!filter.value),
-});
-
 const showingCount = computed(() => {
 	// Don't show count if there are no items
 	if (!totalCount.value || !itemCount.value) return;
 
-	return formattedCount.value;
+	return formatItemsCountPaginated({
+		currentItems: itemCount.value,
+		currentPage: page.value,
+		perPage: limit.value,
+		totalItems: totalCount.value,
+		isFiltered: !!filter.value,
+		i18n: { t, n },
+	});
 });
 
 async function refresh() {