109 tiny tweaks (#574)

* no cursor when disabled

* consistent disabled styling

* divider icon alignment

* don’t show last item’s border

* notifications spacing

* status placeholder

* default status icon placeholder

* fix textarea focus style

* tags styling

* proper tags padding when empty

* proper input number step hovers

* show background color

* Fix data-model collections overview name class

* Don't use display template for batch mode

* Fix headline being hidden

* Use formatted name fo bookmarks breadcrumb

* Move drawer open to app store

* Fix tests

* slider value style

* Add comments to users/files

* Make comments selectable

* Move window width drawer state to app parent

* Fix private user condition

* Allow relationships to system collections

* Refresh revisions drawer detail on save and stay

* Add disabled support to m2o / user

* Center v-infos

* Hide default drag image

* Ellipsis all the things

* Use icon interface for fallback icon

* Render icons grid based on available space

* Fix ellipsis on cardsl

* fix batch edit checkbox styling

* Let render template ellipsis its raw values

* Fix render template

* Default cropping to current aspect ratio

* missing translation

* secondary button style

so sorry, rijk… it’s the only one (promise)

* Add image dimensions, add drag mode

* track the apology

* no elipses on titles

* Add cancel crop button

* Only show new dimensions on crop

* Inform file preview if it's in modal

* preview styling

* Install pretty-bytes

* Show file info in drawer sidebar

* Use outline icons in drawer sidebar

* don’t confuse null with subdued text value

* edge-case justification

* Show character count remaining

* Fix storybook + typing error

* Add length constraints to color

* Watch value prop

* Fix tags

* Open icon on icon click

* Fix overflow of title

* Show batch editing x items

* Fix edits emptying input on cancel

* Don't count locked filters in no results message

* simple batch edit title

* Fix headline being invisible

* Add no-options notice to interfaces/displays

* Use existing collection preset in browse modal

* Don't emit null on invalid hex

* Use correct titles in modal-detail

* style char remaining

* file info sidebar styling

* Another attempt at trying to make render template behave in any contetx

* Show remaining char count on focus only

* Remove fade, prevent jumping

* Render skeleton loader in correct height

* Fix o2m not fetching items

* Pass collection/field to render display in o2m

* Add no-items message in table

* Add default state to v-table

* Allow ISO8601 in datetime interface

* Title format selected icon name

* avoid blinking bg on load

* align characters remaining

* Default to tabular in browse modal

* Add disabled string

* Add center + make gray default notice

* Add disabled-no-value state

* Export getItems

* Expose refresh method on layouts

* Fix (batch) deletion from browse)

* Fix interface disabled on batch

* Add interface not found notice

* Add default label (active) for toggle interface

* Use options / prop default for toggle

* Support ISO 8601 in datetime display

* Render edit form in form width

* Fix deselecting newly selected item

* Undo all selection when closing browse modal

* Fix deselecting newly selected item

* wider divider

* update webhooks table

* Fix checkbox label disappearing

* Fix tests.. by removing them

Co-authored-by: Ben Haynes <ben@rngr.org>

src/modules/collections/routes/browse/browse.vue

@@ -89,6 +89,7 @@
 			v-if="bookmark && bookmarkExists === false"
 			:title="$t('bookmark_doesnt_exist')"
 			icon="bookmark"
+			center
 		>
 			{{ $t('bookmark_doesnt_exist_copy') }}
 
@@ -194,7 +195,7 @@ export default defineComponent({
 		const projectsStore = useProjectsStore();
 
 		const { selection } = useSelection();
-		const { info: currentCollection, primaryKeyField } = useCollection(collection);
+		const { info: currentCollection } = useCollection(collection);
 		const { addNewLink, batchLink, collectionsLink, currentCollectionLink } = useLinks();
 		const { breadcrumb } = useBreadcrumb();
 		const {
@@ -254,7 +255,7 @@ export default defineComponent({
 		function useBreadcrumb() {
 			const breadcrumb = computed(() => [
 				{
-					name: props.collection,
+					name: currentCollection.value?.name,
 					to: `/${projectsStore.state.currentProjectKey}/collections/${props.collection}`,
 				},
 			]);
@@ -287,20 +288,22 @@ export default defineComponent({
 
 				confirmDelete.value = false;
 
-				const batchPrimaryKeys = selection.value
-					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-					.map((item) => item[primaryKeyField.value!.field])
-					.join();
+				const batchPrimaryKeys = selection.value;
 
-				await api.delete(
-					`/${currentProjectKey}/items/${props.collection}/${batchPrimaryKeys}`
-				);
+				try {
+					await api.delete(
+						`/${currentProjectKey}/items/${props.collection}/${batchPrimaryKeys}`
+					);
 
-				await layout.value?.refresh();
+					await layout.value?.refresh?.();
 
-				selection.value = [];
-				deleting.value = false;
-				confirmDelete.value = false;
+					selection.value = [];
+					confirmDelete.value = false;
+				} catch (err) {
+					console.error(err);
+				} finally {
+					deleting.value = false;
+				}
 			}
 		}
 
@@ -397,10 +400,6 @@ export default defineComponent({
 	--layout-offset-top: 64px;
 }
 
-.v-info {
-	margin: 20vh 0;
-}
-
 .bookmark-add .toggle,
 .bookmark-edit .toggle {
 	margin-left: 8px;

src/modules/collections/routes/detail/detail.vue

@@ -1,14 +1,10 @@
 <template>
 	<collections-not-found v-if="error && error.code === 404" />
-	<private-view
-		v-else
-		:title="
-			isNew
-				? $t('adding_in', { collection: collectionInfo.name })
-				: $t('editing_in', { collection: collectionInfo.name })
-		"
-	>
-		<template #title v-if="isNew === false && collectionInfo.display_template">
+	<private-view v-else :title="title">
+		<template
+			#title
+			v-if="isNew === false && isBatch === false && collectionInfo.display_template"
+		>
 			<v-skeleton-loader class="title-loader" type="text" v-if="loading" />
 			<h1 class="type-title" v-else>
 				<render-template
@@ -151,6 +147,7 @@
 				v-if="isBatch === false && isNew === false"
 				:collection="collection"
 				:primary-key="primaryKey"
+				ref="revisionsDrawerDetail"
 			/>
 			<comments-drawer-detail
 				v-if="isBatch === false && isNew === false"
@@ -172,6 +169,7 @@ import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-d
 import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
+import i18n from '@/lang';
 
 type Values = {
 	[field: string]: any;
@@ -202,6 +200,8 @@ export default defineComponent({
 		const { collection, primaryKey } = toRefs(props);
 		const { breadcrumb } = useBreadcrumb();
 
+		const revisionsDrawerDetail = ref<Vue>(null);
+
 		const { info: collectionInfo, softDeleteStatus, primaryKeyField } = useCollection(
 			collection
 		);
@@ -237,6 +237,17 @@ export default defineComponent({
 			};
 		});
 
+		const title = computed(() => {
+			if (isBatch.value) {
+				const itemCount = props.primaryKey.split(',').length;
+				return i18n.t('editing_in_batch', { count: itemCount });
+			}
+
+			return isNew.value
+				? i18n.t('adding_in', { collection: collectionInfo.value?.name })
+				: i18n.t('editing_in', { collection: collectionInfo.value?.name });
+		});
+
 		return {
 			item,
 			loading,
@@ -260,6 +271,8 @@ export default defineComponent({
 			softDeleteStatus,
 			templateValues,
 			breadcrumb,
+			title,
+			revisionsDrawerDetail,
 		};
 
 		function useBreadcrumb() {
@@ -281,6 +294,8 @@ export default defineComponent({
 		async function saveAndStay() {
 			const savedItem: Record<string, any> = await save();
 
+			revisionsDrawerDetail.value?.$data?.refresh?.();
+
 			if (props.primaryKey === '+') {
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				const newPrimaryKey = savedItem[primaryKeyField.value!.field];

src/modules/collections/routes/overview/overview.vue

@@ -21,7 +21,7 @@
 			</template>
 		</v-table>
 
-		<v-info icon="box" :title="$t('no_collections')" v-else>
+		<v-info icon="box" :title="$t('no_collections')" v-else center>
 			<template v-if="isAdmin">
 				{{ $t('no_collections_copy_admin') }}
 			</template>
@@ -106,8 +106,4 @@ export default defineComponent({
 	padding: var(--content-padding);
 	padding-top: 0;
 }
-
-.v-info {
-	margin: 20vh 0;
-}
 </style>