{"version":3,"sources":["webpack:///./src/interfaces/many-to-many/input.vue?f0e9","webpack:///src/interfaces/many-to-many/input.vue","webpack:///./src/interfaces/many-to-many/input.vue?ea6f","webpack:///./src/interfaces/many-to-many/input.vue","webpack:///./node_modules/@directus/extension-toolkit/mixins/interface.js","webpack:///./src/interfaces/many-to-many/input.vue?8733"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","relationshipSetup","attrs","_v","_s","$t","initialValue","items","length","on","toggleManualSort","manualSortActive","_e","_l","field","key","$event","changeSort","$helpers","formatField","collection","sort","asc","class","dragging","readonly","sortable","model","value","callback","$$v","itemsSorted","expression","item","junctionRelatedKey","relatedPrimaryKeyField","startEdit","junctionPrimaryKey","disabled","interface","type","datatype","options","stopPropagation","deleteItem","startAddNewItem","selectExisting","visibleFieldNames","relation","junction","collection_one","stagedSelection","selectionPrimaryKeys","stageSelection","closeSelection","cancelSelection","addNew","save","text","color","closeEditItem","saveEditItem","fields","editItem","stageValue","staticRenderFns","component","module","exports","props","id","String","required","name","default","Number","Boolean","primaryKey","Object","newItem","values","width","val","includes"],"mappings":"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","file":"js/chunk-625cd580.99e72f93.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"interface-many-to-many\"},[(_vm.relationshipSetup === false)?_c('v-notice',{attrs:{\"color\":\"warning\",\"icon\":\"warning\"}},[_vm._v(\" \"+_vm._s(_vm.$t('relationship_not_setup'))+\" \")]):(_vm.initialValue === null)?_c('v-spinner'):[(_vm.items && _vm.items.length)?_c('div',{staticClass:\"table\"},[_c('div',{staticClass:\"header\"},[_c('div',{staticClass:\"row\"},[(_vm.sortable)?_c('button',{staticClass:\"sort-column\",on:{\"click\":_vm.toggleManualSort}},[_c('v-icon',{attrs:{\"name\":\"sort\",\"small\":\"\",\"color\":_vm.manualSortActive ? '--action' : '--blue-grey-300'}})],1):_vm._e(),_vm._l((_vm.visibleFields),function(field){return _c('button',{key:field.field,staticClass:\"type-table-head\",attrs:{\"type\":\"button\"},on:{\"click\":function($event){return _vm.changeSort(field.field)}}},[_vm._v(\" \"+_vm._s(_vm.$helpers.formatField(field.field, field.collection))+\" \"),(_vm.sort.field === field.field)?_c('v-icon',{attrs:{\"name\":_vm.sort.asc ? 'arrow_downward' : 'arrow_upward',\"size\":16}}):_vm._e()],1)})],2)]),_c('draggable',{staticClass:\"body\",class:{ dragging: _vm.dragging, readonly: _vm.readonly },attrs:{\"handle\":\".drag-handle\",\"disabled\":!_vm.sortable || !_vm.manualSortActive},on:{\"start\":function($event){_vm.dragging = true},\"end\":function($event){_vm.dragging = false}},model:{value:(_vm.itemsSorted),callback:function ($$v) {_vm.itemsSorted=$$v},expression:\"itemsSorted\"}},_vm._l((_vm.itemsSorted),function(item){return _c('div',{key:item[_vm.junctionRelatedKey][_vm.relatedPrimaryKeyField],staticClass:\"row\",on:{\"click\":function($event){return _vm.startEdit(item[_vm.junctionPrimaryKey])}}},[(_vm.sortable)?_c('div',{staticClass:\"sort-column\",class:{ disabled: !_vm.manualSortActive }},[(!_vm.readonly)?_c('v-icon',{staticClass:\"drag-handle\",attrs:{\"name\":\"drag_handle\"}}):_vm._e()],1):_vm._e(),_vm._l((_vm.visibleFields),function(field){return _c('div',{key:field.field},[_c('v-ext-display',{attrs:{\"interface-type\":field.interface,\"name\":field.field,\"type\":field.type,\"collection\":field.collection,\"datatype\":field.datatype,\"options\":field.options,\"value\":item[_vm.junctionRelatedKey][field.field],\"values\":item[_vm.junctionRelatedKey]}})],1)}),(!_vm.readonly)?_c('button',{staticClass:\"remove\",on:{\"click\":function($event){$event.stopPropagation();return _vm.deleteItem(item[_vm.junctionPrimaryKey])}}},[_c('v-icon',{attrs:{\"name\":\"close\"}})],1):_vm._e()],2)}),0)],1):_c('v-notice',{attrs:{\"color\":\"gray-subdued\",\"icon\":\"info\"}},[_vm._v(\" \"+_vm._s(_vm.$t('no_items_selected'))+\" \")]),(!_vm.readonly)?_c('div',{staticClass:\"buttons\"},[(_vm.options.allow_create)?_c('v-button',{attrs:{\"type\":\"button\",\"disabled\":_vm.readonly},on:{\"click\":_vm.startAddNewItem}},[_c('v-icon',{attrs:{\"name\":\"add\",\"left\":\"\"}}),_vm._v(\" \"+_vm._s(_vm.$t('add_new'))+\" \")],1):_vm._e(),(_vm.options.allow_select)?_c('v-button',{attrs:{\"type\":\"button\",\"disabled\":_vm.readonly},on:{\"click\":function($event){_vm.selectExisting = true}}},[_c('v-icon',{attrs:{\"name\":\"playlist_add\",\"left\":\"\"}}),_vm._v(\" \"+_vm._s(_vm.$t('select_existing'))+\" \")],1):_vm._e()],1):_vm._e()],(_vm.selectExisting)?_c('v-item-select',{attrs:{\"fields\":_vm.visibleFieldNames,\"collection\":_vm.relation.junction.collection_one.collection,\"filters\":[],\"value\":_vm.stagedSelection || _vm.selectionPrimaryKeys},on:{\"input\":_vm.stageSelection,\"done\":_vm.closeSelection,\"cancel\":_vm.cancelSelection}}):_vm._e(),(_vm.editItem)?_c('portal',{attrs:{\"to\":\"modal\"}},[_c('v-modal',{attrs:{\"title\":_vm.addNew ? _vm.$t('creating_item') : _vm.$t('editing_item'),\"buttons\":{\n\t\t\t\tsave: {\n\t\t\t\t\ttext: _vm.$t('save'),\n\t\t\t\t\tcolor: 'accent'\n\t\t\t\t}\n\t\t\t}},on:{\"close\":_vm.closeEditItem,\"save\":_vm.saveEditItem}},[_c('div',{staticClass:\"edit-modal-body\"},[_c('v-form',{attrs:{\"new-item\":\"\",\"fields\":_vm.relation.junction.collection_one.fields,\"collection\":_vm.relation.junction.collection_one.collection,\"primary-key\":(_vm.editItem[_vm.junctionRelatedKey] &&\n\t\t\t\t\t\t\t_vm.editItem[_vm.junctionRelatedKey][_vm.relatedPrimaryKeyField]) ||\n\t\t\t\t\t\t\t'+',\"values\":_vm.editItem[_vm.junctionRelatedKey]},on:{\"stage-value\":_vm.stageValue}})],1)])],1):_vm._e()],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div class=\"interface-many-to-many\">\n\t\t<v-notice v-if=\"relationshipSetup === false\" color=\"warning\" icon=\"warning\">\n\t\t\t{{ $t('relationship_not_setup') }}\n\t\t</v-notice>\n\n\t\t<v-spinner v-else-if=\"initialValue === null\" />\n\n\t\t<template v-else>\n\t\t\t<div v-if=\"items && items.length\" class=\"table\">\n\t\t\t\t<div class=\"header\">\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<button v-if=\"sortable\" class=\"sort-column\" @click=\"toggleManualSort\">\n\t\t\t\t\t\t\t<v-icon\n\t\t\t\t\t\t\t\tname=\"sort\"\n\t\t\t\t\t\t\t\tsmall\n\t\t\t\t\t\t\t\t:color=\"manualSortActive ? '--action' : '--blue-grey-300'\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tv-for=\"field in visibleFields\"\n\t\t\t\t\t\t\t:key=\"field.field\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"type-table-head\"\n\t\t\t\t\t\t\t@click=\"changeSort(field.field)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ $helpers.formatField(field.field, field.collection) }}\n\t\t\t\t\t\t\t<v-icon\n\t\t\t\t\t\t\t\tv-if=\"sort.field === field.field\"\n\t\t\t\t\t\t\t\t:name=\"sort.asc ? 'arrow_downward' : 'arrow_upward'\"\n\t\t\t\t\t\t\t\t:size=\"16\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<draggable\n\t\t\t\t\tv-model=\"itemsSorted\"\n\t\t\t\t\tclass=\"body\"\n\t\t\t\t\thandle=\".drag-handle\"\n\t\t\t\t\t:disabled=\"!sortable || !manualSortActive\"\n\t\t\t\t\t:class=\"{ dragging, readonly }\"\n\t\t\t\t\t@start=\"dragging = true\"\n\t\t\t\t\t@end=\"dragging = false\"\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-for=\"item in itemsSorted\"\n\t\t\t\t\t\t:key=\"item[junctionRelatedKey][relatedPrimaryKeyField]\"\n\t\t\t\t\t\tclass=\"row\"\n\t\t\t\t\t\t@click=\"startEdit(item[junctionPrimaryKey])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-if=\"sortable\"\n\t\t\t\t\t\t\tclass=\"sort-column\"\n\t\t\t\t\t\t\t:class=\"{ disabled: !manualSortActive }\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<v-icon v-if=\"!readonly\" name=\"drag_handle\" class=\"drag-handle\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div v-for=\"field in visibleFields\" :key=\"field.field\">\n\t\t\t\t\t\t\t<v-ext-display\n\t\t\t\t\t\t\t\t:interface-type=\"field.interface\"\n\t\t\t\t\t\t\t\t:name=\"field.field\"\n\t\t\t\t\t\t\t\t:type=\"field.type\"\n\t\t\t\t\t\t\t\t:collection=\"field.collection\"\n\t\t\t\t\t\t\t\t:datatype=\"field.datatype\"\n\t\t\t\t\t\t\t\t:options=\"field.options\"\n\t\t\t\t\t\t\t\t:value=\"item[junctionRelatedKey][field.field]\"\n\t\t\t\t\t\t\t\t:values=\"item[junctionRelatedKey]\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tv-if=\"!readonly\"\n\t\t\t\t\t\t\tclass=\"remove\"\n\t\t\t\t\t\t\t@click.stop=\"deleteItem(item[junctionPrimaryKey])\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<v-icon name=\"close\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</draggable>\n\t\t\t</div>\n\n\t\t\t<v-notice v-else color=\"gray-subdued\" icon=\"info\">\n\t\t\t\t{{ $t('no_items_selected') }}\n\t\t\t</v-notice>\n\n\t\t\t<div v-if=\"!readonly\" class=\"buttons\">\n\t\t\t\t<v-button\n\t\t\t\t\tv-if=\"options.allow_create\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t:disabled=\"readonly\"\n\t\t\t\t\t@click=\"startAddNewItem\"\n\t\t\t\t>\n\t\t\t\t\t<v-icon name=\"add\" left />\n\t\t\t\t\t{{ $t('add_new') }}\n\t\t\t\t</v-button>\n\n\t\t\t\t<v-button\n\t\t\t\t\tv-if=\"options.allow_select\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t:disabled=\"readonly\"\n\t\t\t\t\t@click=\"selectExisting = true\"\n\t\t\t\t>\n\t\t\t\t\t<v-icon name=\"playlist_add\" left />\n\t\t\t\t\t{{ $t('select_existing') }}\n\t\t\t\t</v-button>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<v-item-select\n\t\t\tv-if=\"selectExisting\"\n\t\t\t:fields=\"visibleFieldNames\"\n\t\t\t:collection=\"relation.junction.collection_one.collection\"\n\t\t\t:filters=\"[]\"\n\t\t\t:value=\"stagedSelection || selectionPrimaryKeys\"\n\t\t\t@input=\"stageSelection\"\n\t\t\t@done=\"closeSelection\"\n\t\t\t@cancel=\"cancelSelection\"\n\t\t/>\n\n\t\t<portal v-if=\"editItem\" to=\"modal\">\n\t\t\t<v-modal\n\t\t\t\t:title=\"addNew ? $t('creating_item') : $t('editing_item')\"\n\t\t\t\t:buttons=\"{\n\t\t\t\t\tsave: {\n\t\t\t\t\t\ttext: $t('save'),\n\t\t\t\t\t\tcolor: 'accent'\n\t\t\t\t\t}\n\t\t\t\t}\"\n\t\t\t\t@close=\"closeEditItem\"\n\t\t\t\t@save=\"saveEditItem\"\n\t\t\t>\n\t\t\t\t<div class=\"edit-modal-body\">\n\t\t\t\t\t<v-form\n\t\t\t\t\t\tnew-item\n\t\t\t\t\t\t:fields=\"relation.junction.collection_one.fields\"\n\t\t\t\t\t\t:collection=\"relation.junction.collection_one.collection\"\n\t\t\t\t\t\t:primary-key=\"\n\t\t\t\t\t\t\t(editItem[junctionRelatedKey] &&\n\t\t\t\t\t\t\t\teditItem[junctionRelatedKey][relatedPrimaryKeyField]) ||\n\t\t\t\t\t\t\t\t'+'\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t:values=\"editItem[junctionRelatedKey]\"\n\t\t\t\t\t\t@stage-value=\"stageValue\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</v-modal>\n\t\t</portal>\n\t</div>\n</template>\n\n<script>\nimport mixin from '@directus/extension-toolkit/mixins/interface';\nimport { diff } from 'deep-object-diff';\nimport shortid from 'shortid';\nimport { get, find, orderBy, cloneDeep, mapValues, merge, difference } from 'lodash';\n\nexport default {\n\tname: 'InterfaceManyToMany',\n\tmixins: [mixin],\n\tdata() {\n\t\treturn {\n\t\t\tsort: {\n\t\t\t\tfield: null,\n\t\t\t\tasc: true\n\t\t\t},\n\n\t\t\tselectExisting: false,\n\t\t\teditItem: false,\n\t\t\taddNew: null,\n\n\t\t\tdragging: false,\n\n\t\t\titems: null,\n\t\t\tloading: false,\n\t\t\terror: null,\n\t\t\tstagedSelection: null,\n\n\t\t\tinitialValue: null\n\t\t};\n\t},\n\n\tcomputed: {\n\t\t// If the relationship has been configured or not\n\t\trelationshipSetup() {\n\t\t\tif (!this.relation) return false;\n\t\t\treturn true;\n\t\t},\n\n\t\t// The fields that should be rendered in the modal / table\n\t\tvisibleFields() {\n\t\t\tif (this.relationSetup === false) return [];\n\t\t\tif (!this.options.fields) return [];\n\n\t\t\tlet visibleFieldNames;\n\n\t\t\tif (Array.isArray(this.options.fields)) {\n\t\t\t\tvisibleFieldNames = this.options.fields.map(val => val.trim());\n\t\t\t}\n\n\t\t\tvisibleFieldNames = this.options.fields.split(',').map(val => val.trim());\n\n\t\t\t// Fields in the related collection (not the JT)\n\t\t\tconst relatedFields = this.relation.junction.collection_one.fields;\n\t\t\tconst recursiveKey = get(this.relation, 'junction.field_one.field', null);\n\n\t\t\treturn visibleFieldNames.map(name => {\n\t\t\t\tconst fieldInfo = relatedFields[name];\n\n\t\t\t\tif (recursiveKey && name === recursiveKey) {\n\t\t\t\t\tfieldInfo.readonly = true;\n\t\t\t\t}\n\n\t\t\t\treturn fieldInfo;\n\t\t\t});\n\t\t},\n\n\t\tvisibleFieldNames() {\n\t\t\treturn this.visibleFields.map(field => field.field);\n\t\t},\n\n\t\t// The name of the field that holds the primary key in the related (not JT) collection\n\t\trelatedPrimaryKeyField() {\n\t\t\treturn find(this.relation.junction.collection_one.fields, { primary_key: true }).field;\n\t\t},\n\n\t\tselectionPrimaryKeys() {\n\t\t\treturn this.items.map(\n\t\t\t\titem => item[this.junctionRelatedKey][this.relatedPrimaryKeyField]\n\t\t\t);\n\t\t},\n\n\t\t// Field in the junction table that holds the sort value in the junction table\n\t\tsortField() {\n\t\t\tconst junctionTableFields = this.relation.collection_many.fields;\n\t\t\tconst sortField = find(junctionTableFields, { type: 'sort' });\n\t\t\treturn sortField;\n\t\t},\n\n\t\t// If the items can be manually sorted\n\t\tsortable() {\n\t\t\treturn !!this.sortField;\n\t\t},\n\n\t\tmanualSortActive() {\n\t\t\treturn this.sort.field === '$manual';\n\t\t},\n\n\t\t// The key in the junction row that holds the data of the related item\n\t\tjunctionRelatedKey() {\n\t\t\treturn this.relation.junction.field_many.field;\n\t\t},\n\n\t\tjunctionPrimaryKey() {\n\t\t\treturn find(this.relation.junction.collection_many.fields, { primary_key: true }).field;\n\t\t},\n\n\t\titemsSorted: {\n\t\t\tget() {\n\t\t\t\tif (this.sort.field === '$manual') {\n\t\t\t\t\treturn orderBy(\n\t\t\t\t\t\tcloneDeep(this.items),\n\t\t\t\t\t\titem => item[this.sortField.field],\n\t\t\t\t\t\tthis.sort.asc ? 'asc' : 'desc'\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn orderBy(\n\t\t\t\t\tcloneDeep(this.items),\n\t\t\t\t\titem => item[this.junctionRelatedKey][this.sort.field],\n\t\t\t\t\tthis.sort.asc ? 'asc' : 'desc'\n\t\t\t\t);\n\t\t\t},\n\t\t\tset(newValue) {\n\t\t\t\tthis.items = newValue.map((item, index) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...item,\n\t\t\t\t\t\t[this.sortField.field]: index + 1\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t},\n\n\twatch: {\n\t\titems(value, oldValue) {\n\t\t\tif (oldValue === null) return;\n\t\t\tthis.emitValue(value);\n\t\t}\n\t},\n\tasync created() {\n\t\tif (this.sortable) {\n\t\t\tthis.sort.field = '$manual';\n\t\t} else {\n\t\t\t// Set the default sort column\n\t\t\tif (this.visibleFields && this.visibleFields.length > 0) {\n\t\t\t\tthis.sort.field = this.visibleFields[0].field;\n\t\t\t}\n\t\t}\n\n\t\tawait this.getInitialValue();\n\n\t\t// Set the initial set of items. Filter out any broken junction records\n\t\tthis.items = (cloneDeep(this.initialValue) || []).filter(\n\t\t\titem => item[this.junctionRelatedKey]\n\t\t);\n\t},\n\n\tmethods: {\n\t\tasync getInitialValue() {\n\t\t\tconst fields = [this.junctionPrimaryKey, this.relation.junction_field + '.*'];\n\t\t\tconst response = await this.$api.getItems(this.relation.collection_many.collection, {\n\t\t\t\tfields,\n\t\t\t\tfilter: {\n\t\t\t\t\t[this.relation.field_many.field]: this.primaryKey\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tthis.initialValue = response.data;\n\t\t},\n\n\t\t// Change the sort position to the provided field. If the same field is\n\t\t// changed, flip the sort order\n\t\tchangeSort(fieldName) {\n\t\t\tif (this.sort.field === fieldName) {\n\t\t\t\tthis.sort.asc = !this.sort.asc;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.sort.asc = true;\n\t\t\tthis.sort.field = fieldName;\n\t\t\treturn;\n\t\t},\n\n\t\tstartAddNewItem() {\n\t\t\tthis.addNew = true;\n\n\t\t\tconst relatedCollectionFields = this.relation.junction.collection_one.fields;\n\t\t\tconst defaults = mapValues(relatedCollectionFields, field => field.default_value);\n\t\t\tconst tempKey = '$temp_' + shortid.generate();\n\n\t\t\tif (defaults.hasOwnProperty(this.relatedPrimaryKeyField))\n\t\t\t\tdelete defaults[this.relatedPrimaryKeyField];\n\n\t\t\tthis.items = [\n\t\t\t\t...this.items,\n\t\t\t\t{\n\t\t\t\t\t[this.junctionPrimaryKey]: tempKey,\n\t\t\t\t\t[this.junctionRelatedKey]: defaults\n\t\t\t\t}\n\t\t\t];\n\n\t\t\tthis.startEdit(tempKey);\n\t\t},\n\n\t\t// Save the made edits in the add new item modal\n\t\tstageValue({ field, value }) {\n\t\t\tthis.$set(this.editItem[this.junctionRelatedKey], field, value);\n\t\t},\n\n\t\ttoggleManualSort() {\n\t\t\tthis.sort.field = '$manual';\n\t\t\tthis.sort.asc = true;\n\t\t},\n\n\t\tasync startEdit(primaryKey) {\n\t\t\tlet values = cloneDeep(this.items.find(i => i[this.junctionPrimaryKey] === primaryKey));\n\n\t\t\tconst isNewItem = typeof primaryKey === 'string' && primaryKey.startsWith('$temp_');\n\n\t\t\t// Fetch the values from the DB\n\t\t\tif (isNewItem === false) {\n\t\t\t\tconst collection = this.relation.collection_many.collection;\n\t\t\t\tconst primaryKeyName = this.relation.collection_many.fields.id.field;\n\n\t\t\t\tconst res = await this.$api.getItem(collection, primaryKey, { fields: '*.*.*' });\n\t\t\t\tconst item = res.data;\n\n\t\t\t\tvalues = merge({}, item, values);\n\n\t\t\t\t// Update the initialValue as well since the initialValue is used to get the Diff for POSTing\n\t\t\t\tthis.initialValue = this.initialValue.map(item => {\n\t\t\t\t\tif (get(item, primaryKeyName) === primaryKey) {\n\t\t\t\t\t\treturn cloneDeep(values);\n\t\t\t\t\t}\n\t\t\t\t\treturn item;\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tthis.editItem = values;\n\t\t},\n\n\t\tsaveEditItem() {\n\t\t\tconst primaryKey = this.editItem[this.junctionPrimaryKey];\n\n\t\t\tthis.items = this.items.map(item => {\n\t\t\t\tif (item[this.junctionPrimaryKey] === primaryKey) {\n\t\t\t\t\treturn this.editItem;\n\t\t\t\t}\n\n\t\t\t\treturn item;\n\t\t\t});\n\n\t\t\tthis.editItem = null;\n\t\t},\n\n\t\tcloseEditItem() {\n\t\t\t//If addNew is true and cancel is clicked, need to remove a last added blank item.\n\t\t\tif (this.addNew) {\n\t\t\t\tthis.items.pop();\n\t\t\t}\n\t\t\tthis.addNew = false;\n\t\t\tthis.editItem = null;\n\t\t},\n\n\t\tstageSelection(primaryKeys) {\n\t\t\tthis.stagedSelection = primaryKeys;\n\t\t},\n\n\t\tasync closeSelection() {\n\t\t\t//When there is no change in selection and user click on done.\n\t\t\tif (!this.stagedSelection) {\n\t\t\t\tthis.selectExisting = false;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst primaryKeys = this.stagedSelection || [];\n\n\t\t\t// Remove all the items from this.items that aren't selected anymore\n\t\t\tthis.items = this.items.filter(item => {\n\t\t\t\tconst primaryKey = item[this.junctionRelatedKey][this.relatedPrimaryKeyField];\n\t\t\t\treturn primaryKeys.includes(primaryKey);\n\t\t\t});\n\n\t\t\t// Fetch all the newly selected items so we can render it in the table\n\t\t\tconst itemPrimaryKeys = this.items.map(\n\t\t\t\titem => item[this.junctionRelatedKey][this.relatedPrimaryKeyField]\n\t\t\t);\n\t\t\tconst newlyAddedItems = difference(primaryKeys, itemPrimaryKeys);\n\n\t\t\tif (newlyAddedItems.length > 0) {\n\t\t\t\tconst res = await this.$api.getItem(\n\t\t\t\t\tthis.relation.junction.collection_one.collection,\n\t\t\t\t\tnewlyAddedItems.join(','),\n\t\t\t\t\t{\n\t\t\t\t\t\tfields: '*.*.*'\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tconst items = Array.isArray(res.data) ? res.data : [res.data];\n\n\t\t\t\tconst newJunctionRecords = items.map(nested => {\n\t\t\t\t\tconst tempKey = '$temp_' + shortid.generate();\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t[this.junctionPrimaryKey]: tempKey,\n\t\t\t\t\t\t[this.junctionRelatedKey]: nested\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\t\tthis.items = [...this.items, ...newJunctionRecords];\n\t\t\t}\n\n\t\t\tthis.stagedSelection = null;\n\t\t\tthis.selectExisting = false;\n\t\t},\n\n\t\tcancelSelection() {\n\t\t\tthis.stagedSelection = null;\n\t\t\tthis.selectExisting = null;\n\t\t},\n\n\t\tdeleteItem(primaryKey) {\n\t\t\tthis.items = this.items.filter(jr => {\n\t\t\t\tconst jrPrimaryKey = jr[this.junctionPrimaryKey];\n\t\t\t\treturn jrPrimaryKey !== primaryKey;\n\t\t\t});\n\t\t},\n\n\t\temitValue(value) {\n\t\t\tvalue = cloneDeep(value);\n\n\t\t\t// This is the key in the nested related object that holds the parent item again\n\t\t\tconst recursiveKey = get(this.relation, 'junction.field_one.field', null);\n\n\t\t\tconst newValue = value\n\t\t\t\t.map(after => {\n\t\t\t\t\tconst primaryKey = after[this.junctionPrimaryKey];\n\n\t\t\t\t\t// Check if the current item was saved before\n\t\t\t\t\tconst before = this.initialValue.find(\n\t\t\t\t\t\ti => i[this.junctionPrimaryKey] === primaryKey\n\t\t\t\t\t);\n\n\t\t\t\t\tif (before) {\n\t\t\t\t\t\tconst delta = diff(before, after);\n\n\t\t\t\t\t\tif (Object.keys(delta).length > 0) {\n\t\t\t\t\t\t\tconst newVal = {\n\t\t\t\t\t\t\t\t[this.junctionPrimaryKey]: primaryKey,\n\t\t\t\t\t\t\t\t[this.junctionRelatedKey]: {\n\t\t\t\t\t\t\t\t\t[this.relatedPrimaryKeyField]:\n\t\t\t\t\t\t\t\t\t\tbefore[this.junctionRelatedKey][this.relatedPrimaryKeyField]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t// Just in case there's an edit in the deep-nested recursive copy of the parent item\n\t\t\t\t\t\t\t// delete it\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\trecursiveKey &&\n\t\t\t\t\t\t\t\tnewVal[this.junctionRelatedKey].hasOwnProperty(recursiveKey)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tdelete newVal[this.junctionRelatedKey][recursiveKey];\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn merge({}, newVal, delta);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the junction item didn't exist before yet:\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof after[this.junctionPrimaryKey] === 'string' &&\n\t\t\t\t\t\tafter[this.junctionPrimaryKey].startsWith('$temp_')\n\t\t\t\t\t) {\n\t\t\t\t\t\tdelete after[this.junctionPrimaryKey];\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the new (before case was handled above) item's primary key field is set, then this is only the reference and\n\t\t\t\t\t// we should only send the primary key field to the API.\n\t\t\t\t\t// Otherwise the update is triggered by the API on the whole hierarchy\n\t\t\t\t\tif (\n\t\t\t\t\t\tafter[this.junctionRelatedKey] &&\n\t\t\t\t\t\tafter[this.junctionRelatedKey][this.relatedPrimaryKeyField]\n\t\t\t\t\t) {\n\t\t\t\t\t\tafter[this.junctionRelatedKey] = {\n\t\t\t\t\t\t\t[this.relatedPrimaryKeyField]:\n\t\t\t\t\t\t\t\tafter[this.junctionRelatedKey][this.relatedPrimaryKeyField]\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\treturn after;\n\t\t\t\t})\n\t\t\t\t.filter(i => i);\n\n\t\t\tconst savedPrimaryKeys = this.initialValue.map(jr => jr[this.junctionPrimaryKey]);\n\t\t\tconst newPrimaryKeys = value.map(jr => jr[this.junctionPrimaryKey]);\n\t\t\tconst deletedKeys = difference(savedPrimaryKeys, newPrimaryKeys);\n\t\t\tconst deletedJunctionRows = deletedKeys.map(key => {\n\t\t\t\treturn {\n\t\t\t\t\t[this.junctionPrimaryKey]: key,\n\t\t\t\t\t$delete: true\n\t\t\t\t};\n\t\t\t});\n\n\t\t\tthis.$emit('input', [...newValue, ...deletedJunctionRows]);\n\t\t}\n\t}\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.table {\n\tbackground-color: var(--page-background-color);\n\tborder: var(--input-border-width) solid var(--input-border-color);\n\tborder-radius: var(--border-radius);\n\tborder-spacing: 0;\n\twidth: 100%;\n\tmargin: 16px 0 24px;\n\n\t.header {\n\t\theight: var(--input-height);\n\t\tborder-bottom: 2px solid var(--table-head-border-color);\n\n\t\tbutton {\n\t\t\ttext-align: left;\n\t\t\ttransition: color var(--fast) var(--transition);\n\t\t}\n\t}\n\n\t.row {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: 0 5px;\n\t\tcolor: var(--input-text-color);\n\n\t\t> div {\n\t\t\tpadding: 3px 5px;\n\t\t\tflex-basis: 200px;\n\t\t\tmax-width: 200px;\n\t\t}\n\t}\n\n\t.header .row {\n\t\talign-items: center;\n\t\theight: 40px;\n\n\t\t& > button {\n\t\t\tpadding: 3px 5px 2px;\n\t\t\tflex-basis: 200px;\n\t\t\tmax-width: 200px;\n\t\t}\n\t}\n\n\t.body {\n\t\tmax-height: 275px;\n\t\toverflow-y: scroll;\n\t\t-webkit-overflow-scrolling: touch;\n\n\t\t.row {\n\t\t\tcursor: pointer;\n\t\t\tposition: relative;\n\t\t\theight: 50px;\n\t\t\tborder-bottom: 2px solid var(--table-row-border-color);\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: var(--highlight);\n\t\t\t}\n\n\t\t\t& div:last-of-type {\n\t\t\t\tflex-grow: 1;\n\t\t\t}\n\n\t\t\tbutton {\n\t\t\t\tcolor: var(--input-icon-color);\n\t\t\t\ttransition: color var(--fast) var(--transition);\n\n\t\t\t\t&:hover {\n\t\t\t\t\ttransition: none;\n\t\t\t\t\tcolor: var(--danger);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.readonly {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sort-column {\n\t\tflex-basis: 36px !important;\n\n\t\t&.disabled i {\n\t\t\tcolor: var(--input-background-color-disabled);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n}\n\n.drag-handle {\n\tcursor: grab;\n}\n\n.dragging {\n\tcursor: grabbing !important;\n}\n\n.buttons {\n\tmargin-top: 24px;\n}\n\n.buttons > * {\n\tdisplay: inline-block;\n}\n\n.buttons > *:first-child {\n\tmargin-right: 24px;\n}\n\n.edit-modal-body {\n\tpadding: 30px 30px 60px 30px;\n\tbackground-color: var(--page-background-color);\n\t.form {\n\t\tgrid-template-columns:\n\t\t\t[start] minmax(0, var(--form-column-width)) [half] minmax(0, var(--form-column-width))\n\t\t\t[full];\n\t}\n}\n\n.remove {\n\tposition: absolute;\n\tright: 10px;\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./input.vue?vue&type=template&id=01a4894e&scoped=true&\"\nimport script from \"./input.vue?vue&type=script&lang=js&\"\nexport * from \"./input.vue?vue&type=script&lang=js&\"\nimport style0 from \"./input.vue?vue&type=style&index=0&id=01a4894e&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"01a4894e\",\n  null\n  \n)\n\nexport default component.exports","module.exports = {\n  props: {\n    // Unique id for this interface. Should be added to the lower level \n    // HTML input element if applicable. This ID will be used in the label's\n    // `for` attribute\n    id: {\n      type: String,\n      required: true\n    },\n    // Name of the field\n    name: {\n      type: String,\n      required: true\n    },\n    // The current value. This can either be the default value, the saved database\n    // value or the current state after the user made an edit\n    value: {\n      type: null,\n      default: null\n    },\n    // Type of the field, eg `string`, `hash`, or `array`\n    type: {\n      type: String,\n      required: true\n    },\n    // Max length\n    length: {\n      type: [String, Number],\n      default: null\n    },\n    // If the field is readonly or not\n    readonly: {\n      type: Boolean,\n      default: false\n    },\n    // Name of the collection\n    collection: {\n      type: String,\n      default: null\n    },\n    // Primary key of the item you're editing in this context\n    primaryKey: {\n      type: [Number, String],\n      default: null\n    },\n    // If the field is required or not\n    required: {\n      type: Boolean,\n      default: false\n    },\n    // Field options. A json object based on the interface's meta.json file\n    options: {\n      type: Object,\n      default: () => ({})\n    },\n    // If the item that's currently being edited is new\n    newItem: {\n      type: Boolean,\n      default: false\n    },\n    // The relation of the current field. Will contain information on the related\n    // collection and field(s)\n    relation: {\n      type: Object,\n      default: null\n    },\n    // The other fields in the current edit page\n    fields: {\n      type: Object,\n      default: null\n    },\n    // The values of the other fields on the edit page. Can be used for things like\n    // automatically generating a slug based on another field\n    values: {\n      type: Object,\n      default: null\n    },\n    width: {\n      type: String,\n      default: null,\n      validator(val) {\n        return [\n          'half',\n          'half-left',\n          'half-right',\n          'full',\n          'fill'\n        ].includes(val);\n      }\n    }\n  }\n};\n","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=style&index=0&id=01a4894e&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=style&index=0&id=01a4894e&lang=scss&scoped=true&\""],"sourceRoot":""}