directus-extension-duplicate-value-from-relation 1.0.0

package/README.md

@@ -0,0 +1,51 @@
+# duplicate-value-from-relation
+
+Directus interface that copies a value from a related item into the current field.
+
+Useful when you have a relation (e.g. `bank_account`) and want another field on the same item to stay in sync with something on the related record (e.g. `currency`).
+
+## Install
+
+Build the extension and make sure Directus can load it from your `extensions` folder:
+
+```bash
+npm install
+npm run build
+```
+
+For local development:
+
+```bash
+npm run dev
+```
+
+Requires Directus `^10.10.0`.
+
+## Usage
+
+1. Add a field to your collection.
+2. Set the interface to **Duplicate Value From Relation**.
+3. Pick the **Relation Field** — the M2O field pointing at the other collection.
+4. Pick the **Source Field** — the field on that related collection to copy from.
+
+The field is read-only in the item editor. When the relation changes, the value updates automatically.
+
+Match the field type to the source field (`string`, `uuid`, `integer`, etc.).
+
+## Example
+
+Collection: `invoices`
+
+- Relation field: `bank_account` → `currency`
+- Synced field: `currency`
+- Interface options:
+  - Relation Field: `bank_account`
+  - Source Field: `currency`
+
+Selecting an account on an invoice will fill `currency` with that account's currency.
+
+## Supported types
+
+`string`, `text`, `integer`, `bigInteger`, `float`, `decimal`, `boolean`, `uuid`, `date`, `time`, `datetime`, `timestamp`, `json`
+
+Only many-to-one relations are supported for the relation field picker.

package/dist/index.js

@@ -0,0 +1,407 @@
+import { useApi, useStores, getRelationType, defineInterface } from '@directus/extensions-sdk';
+import { inject, ref, computed, watch, resolveComponent, openBlock, createElementBlock, createBlock, withCtx, createTextVNode, toDisplayString, Fragment, createVNode, createCommentVNode } from 'vue';
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css$1 = "\n.duplicate-value-from-relation[data-v-9d64cc82] {\n\twidth: 100%;\n}\n";
+n(css$1,{});
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _hoisted_1$1 = { class: "duplicate-value-from-relation" };
+
+
+const _sfc_main$1 = {
+  __name: 'interface',
+  props: {
+	value: {
+		default: null,
+	},
+	collection: {
+		type: String,
+		default: null,
+	},
+	type: {
+		type: String,
+		default: 'string',
+	},
+	relationField: {
+		type: String,
+		default: null,
+	},
+	sourceField: {
+		type: String,
+		default: null,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+},
+  emits: ['input'],
+  setup(__props, { emit: __emit }) {
+
+const props = __props;
+
+const emit = __emit;
+
+const api = useApi();
+const { useRelationsStore } = useStores();
+const relationsStore = useRelationsStore();
+const values = inject('values');
+
+const loading = ref(false);
+
+const isConfigured = computed(() => Boolean(props.relationField && props.sourceField));
+
+const relationValue = computed(() => {
+	if (!values?.value || !props.relationField) return null;
+	return values.value[props.relationField];
+});
+
+const hasRelationValue = computed(() => {
+	const current = relationValue.value;
+	return current !== null && current !== undefined && current !== '';
+});
+
+const displayValue = computed(() => {
+	if (props.value === null || props.value === undefined) return '';
+
+	if (props.type === 'json' && typeof props.value === 'object') {
+		return JSON.stringify(props.value, null, 2);
+	}
+
+	return String(props.value);
+});
+
+const placeholder = computed(() => {
+	if (!props.sourceField) return '';
+	return `Synced from ${props.sourceField}`;
+});
+
+watch(
+	[relationValue, () => props.relationField, () => props.sourceField, () => props.collection],
+	() => {
+		if (!isConfigured.value || props.disabled) return;
+		syncValue();
+	},
+	{ deep: true, immediate: true },
+);
+
+async function syncValue() {
+	const currentRelationValue = relationValue.value;
+
+	if (currentRelationValue === null || currentRelationValue === undefined || currentRelationValue === '') {
+		if (props.value !== null && props.value !== undefined) {
+			emit('input', null);
+		}
+
+		return;
+	}
+
+	const syncedValue = await resolveSourceValue(currentRelationValue);
+
+	if (!valuesEqual(syncedValue, props.value)) {
+		emit('input', syncedValue);
+	}
+}
+
+async function resolveSourceValue(relationItem) {
+	if (typeof relationItem === 'object' && relationItem !== null && props.sourceField in relationItem) {
+		return relationItem[props.sourceField];
+	}
+
+	const relation = relationsStore.getRelationForField(props.collection, props.relationField);
+	const relatedCollection = relation?.related_collection;
+
+	if (!relatedCollection) return null;
+
+	const primaryKey =
+		typeof relationItem === 'object' && relationItem !== null
+			? relationItem[relation.meta?.related_field || 'id']
+			: relationItem;
+
+	if (primaryKey === null || primaryKey === undefined || primaryKey === '') {
+		return null;
+	}
+
+	loading.value = true;
+
+	try {
+		const response = await api.get(`/items/${relatedCollection}/${primaryKey}`, {
+			params: {
+				fields: [props.sourceField],
+			},
+		});
+
+		return response.data.data?.[props.sourceField] ?? null;
+	} catch {
+		return null;
+	} finally {
+		loading.value = false;
+	}
+}
+
+function valuesEqual(a, b) {
+	return JSON.stringify(a) === JSON.stringify(b);
+}
+
+return (_ctx, _cache) => {
+  const _component_v_notice = resolveComponent("v-notice");
+  const _component_v_skeleton_loader = resolveComponent("v-skeleton-loader");
+  const _component_v_checkbox = resolveComponent("v-checkbox");
+  const _component_v_textarea = resolveComponent("v-textarea");
+  const _component_v_input = resolveComponent("v-input");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1$1, [
+    (!isConfigured.value)
+      ? (openBlock(), createBlock(_component_v_notice, {
+          key: 0,
+          type: "warning"
+        }, {
+          default: withCtx(() => [...(_cache[0] || (_cache[0] = [
+            createTextVNode(" Configure the relation field and source field in the interface settings. ", -1 /* CACHED */)
+          ]))]),
+          _: 1 /* STABLE */
+        }))
+      : (!hasRelationValue.value)
+        ? (openBlock(), createBlock(_component_v_notice, {
+            key: 1,
+            type: "info"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(" Select a related item in \"" + toDisplayString(__props.relationField) + "\" to sync this field. ", 1 /* TEXT */)
+            ]),
+            _: 1 /* STABLE */
+          }))
+        : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            (loading.value)
+              ? (openBlock(), createBlock(_component_v_skeleton_loader, {
+                  key: 0,
+                  type: "input"
+                }))
+              : (__props.type === 'boolean')
+                ? (openBlock(), createBlock(_component_v_checkbox, {
+                    key: 1,
+                    "model-value": Boolean(__props.value),
+                    disabled: ""
+                  }, {
+                    label: withCtx(() => [...(_cache[1] || (_cache[1] = [
+                      createTextVNode("Synced value", -1 /* CACHED */)
+                    ]))]),
+                    _: 1 /* STABLE */
+                  }, 8 /* PROPS */, ["model-value"]))
+                : (__props.type === 'json' || __props.type === 'text')
+                  ? (openBlock(), createBlock(_component_v_textarea, {
+                      key: 2,
+                      "model-value": displayValue.value,
+                      disabled: "",
+                      placeholder: placeholder.value
+                    }, null, 8 /* PROPS */, ["model-value", "placeholder"]))
+                  : (openBlock(), createBlock(_component_v_input, {
+                      key: 3,
+                      "model-value": displayValue.value,
+                      disabled: "",
+                      placeholder: placeholder.value
+                    }, null, 8 /* PROPS */, ["model-value", "placeholder"]))
+          ], 64 /* STABLE_FRAGMENT */))
+  ]))
+}
+}
+
+};
+var InterfaceComponent = /*#__PURE__*/_export_sfc(_sfc_main$1, [['__scopeId',"data-v-9d64cc82"]]);
+
+var css = "\n.options[data-v-36ad6c04] {\n\tdisplay: grid;\n\tgap: 20px;\n}\n";
+n(css,{});
+
+const _hoisted_1 = { class: "options" };
+
+
+const _sfc_main = {
+  __name: 'options',
+  props: {
+	value: {
+		type: Object,
+		default: () => ({}),
+	},
+	collection: {
+		type: String,
+		default: null,
+	},
+},
+  emits: ['input'],
+  setup(__props, { emit: __emit }) {
+
+const props = __props;
+
+const emit = __emit;
+
+const { useFieldsStore, useRelationsStore } = useStores();
+const fieldsStore = useFieldsStore();
+const relationsStore = useRelationsStore();
+
+const relationField = computed(() => props.value?.relationField ?? null);
+const sourceField = computed(() => props.value?.sourceField ?? null);
+
+const relatedCollection = computed(() => {
+	if (!props.collection || !relationField.value) return null;
+
+	const relation = relationsStore.getRelationForField(props.collection, relationField.value);
+	if (!relation) return null;
+
+	const type = getRelationType({
+		relation,
+		collection: props.collection,
+		field: relationField.value,
+	});
+
+	return type === 'm2o' ? relation.related_collection : null;
+});
+
+const relationFieldChoices = computed(() => {
+	if (!props.collection) return [];
+
+	return fieldsStore
+		.getFieldsForCollection(props.collection)
+		.filter((field) => {
+			if (field.meta?.hidden) return false;
+
+			const relation = relationsStore.getRelationForField(props.collection, field.field);
+			if (!relation) return false;
+
+			return (
+				getRelationType({
+					relation,
+					collection: props.collection,
+					field: field.field,
+				}) === 'm2o'
+			);
+		})
+		.map((field) => ({
+			text: field.name || field.field,
+			value: field.field,
+		}));
+});
+
+const sourceFieldChoices = computed(() => {
+	if (!relatedCollection.value) return [];
+
+	return fieldsStore
+		.getFieldsForCollection(relatedCollection.value)
+		.filter((field) => {
+			if (field.meta?.hidden) return false;
+			if (field.type === 'alias') return false;
+			if (field.meta?.special?.includes('group')) return false;
+			return true;
+		})
+		.map((field) => ({
+			text: field.name || field.field,
+			value: field.field,
+		}));
+});
+
+function setRelationField(field) {
+	emit('input', {
+		...(props.value || {}),
+		relationField: field,
+		sourceField: null,
+	});
+}
+
+function setSourceField(field) {
+	emit('input', {
+		...(props.value || {}),
+		sourceField: field,
+	});
+}
+
+return (_ctx, _cache) => {
+  const _component_v_select = resolveComponent("v-select");
+  const _component_v_notice = resolveComponent("v-notice");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_v_select, {
+      "model-value": relationField.value,
+      items: relationFieldChoices.value,
+      disabled: !__props.collection,
+      placeholder: "Select a relation field",
+      "onUpdate:modelValue": setRelationField
+    }, {
+      label: withCtx(() => [...(_cache[0] || (_cache[0] = [
+        createTextVNode("Relation Field", -1 /* CACHED */)
+      ]))]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["model-value", "items", "disabled"]),
+    createVNode(_component_v_select, {
+      "model-value": sourceField.value,
+      items: sourceFieldChoices.value,
+      disabled: !relatedCollection.value,
+      placeholder: "Select a source field",
+      "onUpdate:modelValue": setSourceField
+    }, {
+      label: withCtx(() => [...(_cache[1] || (_cache[1] = [
+        createTextVNode("Source Field", -1 /* CACHED */)
+      ]))]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["model-value", "items", "disabled"]),
+    (!__props.collection)
+      ? (openBlock(), createBlock(_component_v_notice, {
+          key: 0,
+          type: "warning"
+        }, {
+          default: withCtx(() => [...(_cache[2] || (_cache[2] = [
+            createTextVNode(" Save the field first to configure relation syncing. ", -1 /* CACHED */)
+          ]))]),
+          _: 1 /* STABLE */
+        }))
+      : (relationField.value && !relatedCollection.value)
+        ? (openBlock(), createBlock(_component_v_notice, {
+            key: 1,
+            type: "warning"
+          }, {
+            default: withCtx(() => [...(_cache[3] || (_cache[3] = [
+              createTextVNode(" The selected field is not a many-to-one relation. ", -1 /* CACHED */)
+            ]))]),
+            _: 1 /* STABLE */
+          }))
+        : createCommentVNode("v-if", true)
+  ]))
+}
+}
+
+};
+var OptionsComponent = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-36ad6c04"]]);
+
+var index = defineInterface({
+	id: 'duplicate-value-from-relation',
+	name: 'Duplicate Value From Relation',
+	icon: 'content_copy',
+	description: 'Automatically sync this field from a field on a related item.',
+	component: InterfaceComponent,
+	options: OptionsComponent,
+	types: [
+		'string',
+		'text',
+		'integer',
+		'bigInteger',
+		'float',
+		'decimal',
+		'boolean',
+		'uuid',
+		'date',
+		'time',
+		'datetime',
+		'timestamp',
+		'json',
+	],
+	group: 'standard',
+});
+
+export { index as default };

package/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "directus-extension-duplicate-value-from-relation",
+	"description": "Sync a field value from a related collection item",
+	"icon": "extension",
+	"version": "1.0.0",
+	"keywords": [
+		"directus",
+		"directus-extension",
+		"directus-extension-interface"
+	],
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"homepage": "https://github.com/Abdallah-Awwad/directus-extension-duplicate-value-from-relation-interface",
+	"repository": {
+	  "type": "git",
+	  "url": "https://github.com/Abdallah-Awwad/directus-extension-duplicate-value-from-relation-interface"
+	},
+	"author": {
+	  "name": "Abdallah Awwad",
+	  "email": "abdallahhawwad@gmail.com"
+	},
+	"license": "MIT",
+	"directus:extension": {
+		"type": "interface",
+		"path": "dist/index.js",
+		"source": "src/index.js",
+		"host": "^10.10.0"
+	},
+	"scripts": {
+		"build": "directus-extension build",
+		"dev": "directus-extension build -w --no-minify",
+		"link": "directus-extension link",
+		"validate": "directus-extension validate"
+	},
+	"devDependencies": {
+		"@directus/extensions-sdk": "18.0.1",
+		"vue": "^3.5.39"
+	}
+}