fix divider not showing/ showing when not needed (drawer-item) (#14605)

* fix form divider when opened from drawer item

* remove redundant functions

* change back the form order to what is was

* add the option to swap between relation fields and junction fields

* fix language

* added m2m options as dropdown with more abilities

* remove the hide options and put off instead

* remove the off option from m2m junctionFieldLocation

Co-authored-by: Gabriel Shtenberg <gabriels@brainpop.com>
Co-authored-by: dev name <devn@brainpop.com>

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

@@ -74,6 +74,7 @@
 				@toggle-raw="toggleRawField(fieldsMap[fieldName])"
 			/>
 		</template>
+		<v-divider v-if="showDivider && !noVisibleFields" />
 	</div>
 </template>
 
@@ -110,6 +111,7 @@ interface Props {
 	nested?: boolean;
 	rawEditorEnabled?: boolean;
 	direction?: string;
+	showDivider?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -128,6 +130,7 @@ const props = withDefaults(defineProps<Props>(), {
 	nested: false,
 	rawEditorEnabled: false,
 	direction: undefined,
+	showDivider: false,
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -180,6 +183,13 @@ const firstVisibleFieldIndex = computed(() => {
 	return null;
 });
 
+const noVisibleFields = computed(() => {
+	return Object.keys(fieldsMap.value).every((fieldKey) => {
+		let field: Field = fieldsMap.value[fieldKey];
+		return field.meta?.hidden === true;
+	});
+});
+
 watch(
 	() => props.validationErrors,
 	(newVal, oldVal) => {
@@ -379,4 +389,10 @@ function useRawEditor() {
 .v-form .first-visible-field :deep(.v-divider) {
 	margin-top: 0;
 }
+
+.v-divider {
+	margin-bottom: 50px;
+	grid-column-start: 1;
+	grid-column-end: 3;
+}
 </style>

app/src/interfaces/list-m2m/index.ts

@@ -151,6 +151,31 @@ export default defineInterface({
 					default_value: 15,
 				},
 			},
+			{
+				field: 'junctionFieldLocation',
+				name: '$t:junction_field_location',
+				type: 'string',
+				schema: {
+					default_value: 'bottom',
+				},
+				meta: {
+					interface: 'select-dropdown',
+					options: {
+						choices: [
+							{
+								value: 'top',
+								text: '$t:top',
+							},
+							{
+								value: 'bottom',
+								text: '$t:bottom',
+							},
+						],
+					},
+					width: 'half',
+				},
+			},
+
 			{
 				field: 'allowDuplicates',
 				name: '$t:allow_duplicates',

app/src/interfaces/list-m2m/list-m2m.vue

@@ -178,6 +178,7 @@
 			:junction-field="relationInfo.junctionField.field"
 			:edits="editsAtStart"
 			:circular-field="relationInfo.reverseJunctionField.field"
+			:junction-field-location="junctionFieldLocation"
 			@input="stageEdits"
 		/>
 
@@ -234,6 +235,7 @@ const props = withDefaults(
 		enableLink?: boolean;
 		limit?: number;
 		allowDuplicates?: boolean;
+		junctionFieldLocation?: string;
 	}>(),
 	{
 		value: () => [],
@@ -249,6 +251,7 @@ const props = withDefaults(
 		enableLink: false,
 		limit: 15,
 		allowDuplicates: false,
+		junctionFieldLocation: 'bottom',
 	}
 );
 

app/src/lang/translations/en-US.yaml

@@ -192,6 +192,9 @@ revision_post_create: Here is what this item looked like when it was created.
 revision_post_update: Here is what this item looked like after the update.
 changes_made: Below are the specific changes made in this revision.
 no_relational_data: Keep in mind that relational data is not included here.
+junction_field_location: Junction Fields Location
+top: Top
+bottom: Bottom
 hide_field: Hide Field
 hide_field_on_detail: Hide Field on Detail
 show_field_on_detail: Show Field on Detail

app/src/views/private/components/drawer-item.vue

@@ -30,31 +30,32 @@
 					:title="file.title"
 					:in-modal="true"
 				/>
+				<div class="drawer-item-order" :class="{ swap: swapFormOrder }">
+					<v-form
+						:disabled="disabled"
+						:loading="loading"
+						:initial-values="initialValues?.[junctionField]"
+						:primary-key="relatedPrimaryKey"
+						:model-value="internalEdits?.[junctionField]"
+						:fields="relatedCollectionFields"
+						:validation-errors="junctionField ? validationErrors : undefined"
+						autofocus
+						:show-divider="!swapFormOrder"
+						@update:model-value="setRelationEdits"
+					/>
 
-				<v-form
-					:disabled="disabled"
-					:loading="loading"
-					:initial-values="initialValues?.[junctionField]"
-					:primary-key="relatedPrimaryKey"
-					:model-value="internalEdits?.[junctionField]"
-					:fields="relatedCollectionFields"
-					:validation-errors="junctionField ? validationErrors : undefined"
-					autofocus
-					@update:model-value="setRelationEdits"
-				/>
-
-				<v-divider v-if="showDivider" />
+					<v-form
+						v-model="internalEdits"
+						:disabled="disabled"
+						:loading="loading"
+						:initial-values="initialValues"
+						:show-divider="swapFormOrder"
+						:primary-key="primaryKey"
+						:fields="fields"
+						:validation-errors="!junctionField ? validationErrors : undefined"
+					/>
+				</div>
 			</template>
-
-			<v-form
-				v-model="internalEdits"
-				:disabled="disabled"
-				:loading="loading"
-				:initial-values="initialValues"
-				:primary-key="primaryKey"
-				:fields="fields"
-				:validation-errors="!junctionField ? validationErrors : undefined"
-			/>
 		</div>
 	</v-drawer>
 </template>
@@ -90,6 +91,7 @@ interface Props {
 	// If this drawer-item is opened from a relational interface, we need to force-block the field
 	// that relates back to the parent item.
 	circularField?: string | null;
+	junctionFieldLocation?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -100,6 +102,7 @@ const props = withDefaults(defineProps<Props>(), {
 	disabled: false,
 	relatedPrimaryKey: '+',
 	circularField: null,
+	junctionFieldLocation: 'bottom',
 });
 
 const emit = defineEmits(['update:active', 'input']);
@@ -123,6 +126,10 @@ const { info: collectionInfo, primaryKeyField } = useCollection(collection);
 
 const isNew = computed(() => props.primaryKey === '+' && props.relatedPrimaryKey === '+');
 
+const swapFormOrder = computed(() => {
+	return props.junctionFieldLocation === 'top';
+});
+
 const title = computed(() => {
 	const collection = relatedCollectionInfo?.value || collectionInfo.value!;
 
@@ -141,13 +148,6 @@ const title = computed(() => {
 		: t('editing_in', { collection: collection.name });
 });
 
-const showDivider = computed(() => {
-	return (
-		fieldsStore.getFieldsForCollection(props.collection).filter((field: Field) => field.meta?.hidden !== true).length >
-		0
-	);
-});
-
 const { fields: relatedCollectionFields } = usePermissions(
 	relatedCollection as any,
 	computed(() => initialValues.value && initialValues.value[props.junctionField as any]),
@@ -391,5 +391,11 @@ function useActions() {
 .drawer-item-content {
 	padding: var(--content-padding);
 	padding-bottom: var(--content-padding-bottom);
+	.drawer-item-order {
+		&.swap {
+			display: flex;
+			flex-direction: column-reverse;
+		}
+	}
 }
 </style>