{"version":3,"sources":["webpack:///./src/interfaces/one-to-many/input.vue?6acf","webpack:///./src/interfaces/one-to-many/input.vue?4b6a","webpack:///src/interfaces/one-to-many/input.vue","webpack:///./src/interfaces/one-to-many/input.vue?2156","webpack:///./src/interfaces/one-to-many/input.vue","webpack:///./node_modules/@directus/extension-toolkit/mixins/interface.js"],"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","relatedPrimaryKeyField","startEdit","disabled","interface","type","relation","datatype","options","String","startsWith","stopPropagation","deleteItem","startAddNewItem","selectExisting","visibleFieldNames","collection_many","stagedSelection","selectionPrimaryKeys","stageSelection","closeSelection","cancelSelection","addNew","save","text","color","closeEditItem","saveEditItem","relatedCollectionFields","editItem","stageValue","staticRenderFns","component","module","exports","props","id","required","name","default","Number","Boolean","primaryKey","Object","newItem","fields","values","width","val","includes"],"mappings":"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","file":"js/chunk-ea289bc4.8ecdcbb7.js","sourcesContent":["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=75f37f4c&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=75f37f4c&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"interface-one-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,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.relatedPrimaryKeyField],staticClass:\"row\",on:{\"click\":function($event){return _vm.startEdit(item[_vm.relatedPrimaryKeyField])}}},[(_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,staticClass:\"field-preview\"},[_c('v-ext-display',{attrs:{\"interface-type\":field.interface,\"name\":field.field,\"type\":field.type,\"collection\":field.collection,\"relation\":field.relation,\"datatype\":field.datatype,\"options\":field.options,\"value\":String(item[field.field]).startsWith('$temp_')\n\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t: item[field.field],\"values\":item}})],1)}),(!_vm.readonly)?_c('button',{staticClass:\"remove\",on:{\"click\":function($event){$event.stopPropagation();return _vm.deleteItem(item[_vm.relatedPrimaryKeyField])}}},[_c('v-icon',{attrs:{\"name\":\"close\"}})],1):_vm._e()],2)}),0)],1):_c('v-notice',[_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.collection_many.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.relatedCollectionFields,\"collection\":_vm.relation.collection_many.collection,\"primary-key\":_vm.editItem[_vm.relatedPrimaryKeyField] || '+',\"values\":_vm.editItem},on:{\"stage-value\":_vm.stageValue}})],1)])],1):_vm._e()],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div class=\"interface-one-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\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[relatedPrimaryKeyField]\"\n\t\t\t\t\t\tclass=\"row\"\n\t\t\t\t\t\t@click=\"startEdit(item[relatedPrimaryKeyField])\"\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\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\tclass=\"field-preview\"\n\t\t\t\t\t\t>\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:relation=\"field.relation\"\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=\"\n\t\t\t\t\t\t\t\t\tString(item[field.field]).startsWith('$temp_')\n\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t: item[field.field]\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t:values=\"item\"\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[relatedPrimaryKeyField])\"\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\t\t\t<v-notice v-else>{{ $t('no_items_selected') }}</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.collection_many.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=\"relatedCollectionFields\"\n\t\t\t\t\t\t:collection=\"relation.collection_many.collection\"\n\t\t\t\t\t\t:primary-key=\"editItem[relatedPrimaryKeyField] || '+'\"\n\t\t\t\t\t\t:values=\"editItem\"\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 shortid from 'shortid';\nimport { diff } from 'deep-object-diff';\nimport { find, mapValues, clone, orderBy, cloneDeep, merge, forEach, difference } from 'lodash';\n\nexport default {\n\tname: 'InterfaceOneToMany',\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\t\t\tinitialValue: null\n\t\t};\n\t},\n\n\tcomputed: {\n\t\trelationshipSetup() {\n\t\t\tif (!this.relation) return false;\n\t\t\treturn true;\n\t\t},\n\n\t\tvisibleFields() {\n\t\t\tif (this.relationshipSetup === false) return [];\n\n\t\t\tconst relatedFields = this.relation.collection_many.fields;\n\t\t\tconst recursiveKey = this.relation.field_many.field;\n\n\t\t\tif (!this.options.fields) {\n\t\t\t\treturn Object.values(relatedFields)\n\t\t\t\t\t.filter(field => field.hidden_browse !== true)\n\t\t\t\t\t.filter(field => {\n\t\t\t\t\t\tif (recursiveKey && field.field === recursiveKey) return false;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t})\n\t\t\t\t\t.slice(0, 2);\n\t\t\t}\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\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\tlet relation = null;\n\n\t\t\t\tif (fieldInfo.type.toLowerCase() === 'm2o') {\n\t\t\t\t\trelation = this.$store.getters.m2o(fieldInfo.collection, fieldInfo.field);\n\t\t\t\t}\n\n\t\t\t\tif (fieldInfo.type.toLowerCase() === 'o2m') {\n\t\t\t\t\trelation = this.$store.getters.o2m(fieldInfo.collection, fieldInfo.field);\n\t\t\t\t}\n\n\t\t\t\tif (fieldInfo.type.toLowerCase() === 'translation') {\n\t\t\t\t\trelation = this.$store.getters.o2m(fieldInfo.collection, fieldInfo.field);\n\t\t\t\t}\n\n\t\t\t\tfieldInfo.relation = relation;\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\trelatedPrimaryKeyField() {\n\t\t\treturn find(this.relation.collection_many.fields, { primary_key: true }).field;\n\t\t},\n\n\t\tselectionPrimaryKeys() {\n\t\t\treturn this.items.map(item => item[this.relatedPrimaryKeyField]);\n\t\t},\n\n\t\tsortField() {\n\t\t\tconst sortField = this.options.sort_field;\n\n\t\t\tif (!sortField) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn find(this.relation.collection_many.fields, { field: sortField });\n\t\t},\n\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\trelatedCollectionFields() {\n\t\t\tconst relatedCollectionFields = this.relation.collection_many.fields;\n\n\t\t\t// Disable editing the many to one that points to this one to many\n\t\t\tconst manyToManyField = this.relation.field_many && this.relation.field_many.field;\n\n\t\t\treturn mapValues(relatedCollectionFields, field => {\n\t\t\t\tconst fieldClone = clone(field);\n\n\t\t\t\tif (fieldClone.field === manyToManyField) {\n\t\t\t\t\tfieldClone.readonly = true;\n\t\t\t\t}\n\n\t\t\t\treturn fieldClone;\n\t\t\t});\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.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\twatch: {\n\t\titems(value, oldValue) {\n\t\t\t// When oldvalue is null, it's the very first load\n\t\t\tif (oldValue === null) return;\n\t\t\tthis.emitValue(value);\n\t\t}\n\t},\n\n\tasync created() {\n\t\tif (this.sortable) {\n\t\t\tthis.sort.field = '$manual';\n\t\t} else {\n\t\t\tif (this.visibleFieldNames && this.visibleFieldNames.length > 0) {\n\t\t\t\tthis.sort.field = this.visibleFieldNames[0];\n\t\t\t}\n\t\t}\n\n\t\tawait this.getInitialValue();\n\n\t\tthis.items = cloneDeep(this.initialValue) || [];\n\t},\n\n\tmethods: {\n\t\tasync getInitialValue() {\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\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\ttoggleManualSort() {\n\t\t\tthis.sort.field = '$manual';\n\t\t\tthis.sort.asc = true;\n\t\t},\n\n\t\tstartAddNewItem() {\n\t\t\tthis.addNew = true;\n\n\t\t\tconst relatedCollectionFields = this.relation.collection_many.fields;\n\t\t\tconst defaults = mapValues(relatedCollectionFields, field => field.default_value);\n\t\t\tconst manyToManyField = this.relation.field_many && this.relation.field_many.field;\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\t\t\t}\n\n\t\t\tif (defaults.hasOwnProperty(manyToManyField)) {\n\t\t\t\tdelete defaults[manyToManyField];\n\t\t\t}\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.relatedPrimaryKeyField]: tempKey,\n\t\t\t\t\t...defaults\n\t\t\t\t}\n\t\t\t];\n\n\t\t\tthis.startEdit(tempKey);\n\t\t},\n\n\t\tstageValue({ field, value }) {\n\t\t\tthis.$set(this.editItem, field, value);\n\t\t},\n\n\t\tasync startEdit(primaryKey) {\n\t\t\tlet values = cloneDeep(\n\t\t\t\tthis.items.find(i => i[this.relatedPrimaryKeyField] === primaryKey)\n\t\t\t);\n\n\t\t\tconst isNewItem = typeof primaryKey === 'string' && primaryKey.startsWith('$temp_');\n\n\t\t\tif (isNewItem === false) {\n\t\t\t\tconst collection = this.relation.collection_many.collection;\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\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.relatedPrimaryKeyField];\n\n\t\t\tconst manyToManyField = this.relation.field_many && this.relation.field_many.field;\n\n\t\t\tthis.items = this.items.map(item => {\n\t\t\t\tif (item[this.relatedPrimaryKeyField] === primaryKey) {\n\t\t\t\t\tconst edits = clone(this.editItem);\n\n\t\t\t\t\t// Make sure we remove the many to one field that points to this o2m to prevent this nested item\n\t\t\t\t\t// to be accidentally assigned to another parent\n\t\t\t\t\tif (edits.hasOwnProperty(manyToManyField)) {\n\t\t\t\t\t\tdelete edits[manyToManyField];\n\t\t\t\t\t}\n\n\t\t\t\t\treturn edits;\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.relatedPrimaryKeyField];\n\t\t\t\treturn primaryKeys.includes(primaryKey);\n\t\t\t});\n\n\t\t\t// Fetch all newly selected items so we can render them in the table\n\t\t\tconst itemPrimaryKeys = this.items.map(item => item[this.relatedPrimaryKeyField]);\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.collection_many.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\tthis.items = [...this.items, ...items];\n\t\t\t}\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 = false;\n\t\t},\n\n\t\tdeleteItem(primaryKey) {\n\t\t\tthis.items = this.items.filter(\n\t\t\t\titem => item[this.relatedPrimaryKeyField] !== primaryKey\n\t\t\t);\n\t\t},\n\n\t\temitValue(value) {\n\t\t\tvalue = cloneDeep(value);\n\n\t\t\tconst recursiveKey = this.relation.field_many.field;\n\n\t\t\tconst newValue = value\n\t\t\t\t.map(after => {\n\t\t\t\t\tconst primaryKey = after[this.relatedPrimaryKeyField];\n\n\t\t\t\t\tconst before = this.initialValue.find(\n\t\t\t\t\t\ti => i[this.relatedPrimaryKeyField] === 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\t// For every nested field, we only want to stage the changed values, hence the delta above\n\t\t\t\t\t\t// HOWEVER, there is one field type where we _don't_ want to only save the changes: JSON\n\t\t\t\t\t\t// For a nested JSON record, we want to save the whole new state of the object, instead of\n\t\t\t\t\t\t// just the values that changed, seeing it will override the saved value with a new Object\n\t\t\t\t\t\t// only containing the changes.\n\t\t\t\t\t\t// In order to achieve that, we'll loop over every key in the delta, and use the \"full\"\n\t\t\t\t\t\t// after value in case the delta field is a JSON type\n\t\t\t\t\t\tforEach(delta, (value, key) => {\n\t\t\t\t\t\t\tconst fieldInfo = this.relatedCollectionFields[key];\n\t\t\t\t\t\t\tif (!fieldInfo) return;\n\n\t\t\t\t\t\t\tconst type = fieldInfo.type.toLowerCase();\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\ttype === 'json' ||\n\t\t\t\t\t\t\t\ttype === 'translation' ||\n\t\t\t\t\t\t\t\ttype === 'array' ||\n\t\t\t\t\t\t\t\ttype === 'translation' ||\n\t\t\t\t\t\t\t\ttype === 'o2m'\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tdelta[key] = after[key];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\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.relatedPrimaryKeyField]: before[this.relatedPrimaryKeyField]\n\t\t\t\t\t\t\t};\n\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.relatedPrimaryKeyField].hasOwnProperty(recursiveKey)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tdelete newVal[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\tif (recursiveKey && after.hasOwnProperty(recursiveKey)) {\n\t\t\t\t\t\tdelete after[recursiveKey];\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof after[this.relatedPrimaryKeyField] === 'string' &&\n\t\t\t\t\t\tafter[this.relatedPrimaryKeyField].startsWith('$temp_')\n\t\t\t\t\t) {\n\t\t\t\t\t\tdelete after[this.relatedPrimaryKeyField];\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(\n\t\t\t\titem => item[this.relatedPrimaryKeyField]\n\t\t\t);\n\t\t\tconst newPrimaryKeys = value.map(item => item[this.relatedPrimaryKeyField]);\n\t\t\tconst deletedKeys = difference(savedPrimaryKeys, newPrimaryKeys);\n\t\t\tconst deletedRows = deletedKeys.map(key => {\n\t\t\t\tif (this.options.delete_mode === 'relation') {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t[this.relatedPrimaryKeyField]: key,\n\t\t\t\t\t\t[recursiveKey]: null\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\treturn {\n\t\t\t\t\t[this.relatedPrimaryKeyField]: key,\n\t\t\t\t\t$delete: true\n\t\t\t\t};\n\t\t\t});\n\t\t\tthis.$emit('input', [...newValue, ...deletedRows]);\n\t\t}\n\t}\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.table {\n\tbackground-color: var(--input-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: calc(var(--input-height) - 2px); // -2px since top border is on caontainer\n\t\tborder-bottom: var(--input-border-width) solid var(--input-border-color);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\tbutton {\n\t\t\ttext-align: left;\n\t\t\tfont-weight: 500;\n\t\t\ttransition: color var(--fast) var(--transition);\n\t\t}\n\n\t\ti {\n\t\t\tvertical-align: top;\n\t\t\tcolor: var(--input-icon-color);\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\twidth: 100%;\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: var(--input-border-width) solid var(--input-background-color-alt);\n\n\t\t\t&:last-of-type {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\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(--blue-grey-200);\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(--blue-grey-50);\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=75f37f4c&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=75f37f4c&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  \"75f37f4c\",\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"],"sourceRoot":""}