Rename detail modals

api/src/types/field.ts

@@ -28,8 +28,7 @@ export type FieldMeta = {
 	locked: boolean;
 	required: boolean;
 	readonly: boolean;
-	hidden_detail: boolean;
-	hidden_browse: boolean;
+	hidden: boolean;
 	sort: number | null;
 	width: string | null;
 	group: number | null;

app/src/components/v-upload/v-upload.vue

@@ -52,7 +52,7 @@
 					</v-list>
 				</v-menu>
 
-				<modal-browse
+				<modal-collection-detail
 					collection="directus_files"
 					:active="activeDialog === 'choose'"
 					@update:active="activeDialog = null"
@@ -83,7 +83,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from '@vue/composition-api';
 import uploadFiles from '@/utils/upload-files';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 import api from '@/api';
 import useItem from '@/composables/use-item';
 

app/src/interfaces/file/file.vue

@@ -79,7 +79,7 @@
 			</v-card>
 		</v-dialog>
 
-		<modal-browse
+		<modal-collection-detail
 			collection="directus_files"
 			:active="activeDialog === 'choose'"
 			@update:active="activeDialog = null"
@@ -107,7 +107,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch, computed } from '@vue/composition-api';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 import api from '@/api';
 import readableMimeType from '@/utils/readable-mime-type';
 import getRootPath from '@/utils/get-root-path';

app/src/interfaces/files/files.vue

@@ -34,7 +34,7 @@
 			</v-button>
 		</div>
 
-		<modal-detail
+		<modal-item-detail
 			v-if="!disabled"
 			:active="showDetailModal"
 			:collection="junctionCollection"
@@ -46,7 +46,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			v-if="!disabled"
 			:active.sync="showBrowseModal"
 			:collection="relationJunctionToRelated.one_collection"
@@ -71,8 +71,8 @@
 <script lang="ts">
 import { defineComponent, ref, computed, toRefs } from '@vue/composition-api';
 import { Header as TableHeader } from '@/components/v-table/types';
-import ModalBrowse from '@/views/private/components/modal-browse';
-import ModalDetail from '@/views/private/components/modal-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
+import ModalDetail from '@/views/private/components/modal-item-detail';
 import { get } from 'lodash';
 import i18n from '@/lang';
 

app/src/interfaces/many-to-many/many-to-many.vue

@@ -39,7 +39,7 @@
 			</v-button>
 		</div>
 
-		<modal-detail
+		<modal-item-detail
 			v-if="!disabled"
 			:active.sync="showDetailModal"
 			:collection="junctionCollection"
@@ -51,7 +51,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			v-if="!disabled"
 			:active.sync="showBrowseModal"
 			:collection="relationJunctionToRelated.one_collection"
@@ -67,8 +67,8 @@
 import { defineComponent, ref, watch, PropType, toRefs, computed } from '@vue/composition-api';
 import { useFieldsStore } from '@/stores/';
 import { Header as TableHeader } from '@/components/v-table/types';
-import ModalBrowse from '@/views/private/components/modal-browse';
-import ModalDetail from '@/views/private/components/modal-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
+import ModalDetail from '@/views/private/components/modal-item-detail';
 import { get } from 'lodash';
 
 import useRelation from './use-relation';

app/src/interfaces/many-to-one/many-to-one.vue

@@ -82,7 +82,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-detail
+		<modal-item-detail
 			v-if="!disabled"
 			:active.sync="editModalActive"
 			:collection="relatedCollection.collection"
@@ -91,7 +91,7 @@
 			@input="stageEdits"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -107,8 +107,8 @@ import { useCollectionsStore, useRelationsStore } from '@/stores/';
 import useCollection from '@/composables/use-collection';
 import getFieldsFromTemplate from '@/utils/get-fields-from-template';
 import api from '@/api';
-import ModalDetail from '@/views/private/components/modal-detail';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalDetail from '@/views/private/components/modal-item-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 
 /**
  * @NOTE

app/src/interfaces/one-to-many/one-to-many.vue

@@ -38,7 +38,7 @@
 			</v-button>
 		</div>
 
-		<modal-detail
+		<modal-item-detail
 			v-if="!disabled"
 			:active="currentlyEditing !== null"
 			:collection="relatedCollection.collection"
@@ -48,7 +48,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -65,8 +65,8 @@ import { defineComponent, ref, computed, watch, PropType } from '@vue/compositio
 import api from '@/api';
 import useCollection from '@/composables/use-collection';
 import { useCollectionsStore, useRelationsStore, useFieldsStore } from '@/stores/';
-import ModalDetail from '@/views/private/components/modal-detail';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalDetail from '@/views/private/components/modal-item-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 import { Filter, Field } from '@/types';
 import { Header } from '@/components/v-table/types';
 

app/src/interfaces/user/user.vue

@@ -72,7 +72,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-detail
+		<modal-item-detail
 			:active.sync="editModalActive"
 			collection="directus_users"
 			:primary-key="currentPrimaryKey"
@@ -81,7 +81,7 @@
 			v-if="!disabled"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			:active.sync="selectModalActive"
 			collection="directus_users"
 			:selection="selection"
@@ -95,8 +95,8 @@
 import { defineComponent, computed, ref, watch, PropType } from '@vue/composition-api';
 import useCollection from '@/composables/use-collection';
 import api from '@/api';
-import ModalDetail from '@/views/private/components/modal-detail';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalDetail from '@/views/private/components/modal-item-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 
 export default defineComponent({
 	components: { ModalDetail, ModalBrowse },
@@ -178,7 +178,7 @@ export default defineComponent({
 			const currentPrimaryKey = computed<string | number>(() => {
 				if (!currentUser.value) return '+';
 				if (!props.value) return '+';
-				
+
 				return props.value;
 			});
 

app/src/views/private/components/modal-browse/index.ts

@@ -1,4 +0,0 @@
-import ModalBrowse from './modal-browse.vue';
-
-export { ModalBrowse };
-export default ModalBrowse;

app/src/views/private/components/modal-collection-detail/index.ts

@@ -0,0 +1,4 @@
+import ModalCollectionDetail from './modal-collection-detail.vue';
+
+export { ModalCollectionDetail };
+export default ModalCollectionDetail;

app/src/views/private/components/modal-detail/index.ts

@@ -1,4 +0,0 @@
-import ModalDetail from './modal-detail.vue';
-
-export { ModalDetail };
-export default ModalDetail;

app/src/views/private/components/modal-item-detail/index.ts

@@ -0,0 +1,4 @@
+import ModalItemDetail from './modal-item-detail.vue';
+
+export { ModalItemDetail };
+export default ModalItemDetail;

app/src/views/private/components/modal-item-detail/modal-item-detail.vue

@@ -75,7 +75,12 @@ export default defineComponent({
 		const relationsStore = useRelationsStore();
 
 		const { _active } = useActiveState();
-		const { junctionFieldInfo, junctionRelatedCollection, junctionRelatedCollectionInfo, setJunctionEdits } = useJunction();
+		const {
+			junctionFieldInfo,
+			junctionRelatedCollection,
+			junctionRelatedCollectionInfo,
+			setJunctionEdits,
+		} = useJunction();
 		const { _edits, loading, error, item } = useItem();
 		const { save, cancel } = useActions();
 
@@ -85,14 +90,22 @@ export default defineComponent({
 
 		const title = computed(() => {
 			if (props.primaryKey === '+') {
-				return i18n.t('creating_in', { collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name });
+				return i18n.t('creating_in', {
+					collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name,
+				});
 			}
 
-			return i18n.t('editing_in', { collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name });
+			return i18n.t('editing_in', {
+				collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name,
+			});
 		});
 
 		const showDivider = computed(() => {
-			return fieldsStore.getFieldsForCollection(props.collection).filter((field: Field) => field.meta?.hidden !== true).length > 0;
+			return (
+				fieldsStore
+					.getFieldsForCollection(props.collection)
+					.filter((field: Field) => field.meta?.hidden !== true).length > 0
+			);
 		});
 
 		return {