{"version":3,"sources":["webpack:///./src/interfaces/checkboxes-relational/input.vue?d65f","webpack:///./node_modules/@directus/extension-toolkit/mixins/interface.js","webpack:///./src/interfaces/checkboxes-relational/input.vue?cc89","webpack:///src/interfaces/checkboxes-relational/input.vue","webpack:///./src/interfaces/checkboxes-relational/input.vue?94f2","webpack:///./src/interfaces/checkboxes-relational/input.vue"],"names":["module","exports","props","id","type","String","required","name","value","default","length","Number","readonly","Boolean","collection","primaryKey","options","Object","newItem","relation","fields","values","width","val","includes","render","_vm","this","_h","$createElement","_c","_self","staticClass","initialValue","_l","item","key","style","flexBasis","grid","attrs","uid","relatedPk","labelRendered","selection","on","$event","onSelection","staticRenderFns","component"],"mappings":"kHAAA,yBAA+hB,EAAG,G,qBCAliBA,EAAOC,QAAU,CACfC,MAAO,CAILC,GAAI,CACFC,KAAMC,OACNC,UAAU,GAGZC,KAAM,CACJH,KAAMC,OACNC,UAAU,GAIZE,MAAO,CACLJ,KAAM,KACNK,QAAS,MAGXL,KAAM,CACJA,KAAMC,OACNC,UAAU,GAGZI,OAAQ,CACNN,KAAM,CAACC,OAAQM,QACfF,QAAS,MAGXG,SAAU,CACRR,KAAMS,QACNJ,SAAS,GAGXK,WAAY,CACVV,KAAMC,OACNI,QAAS,MAGXM,WAAY,CACVX,KAAM,CAACO,OAAQN,QACfI,QAAS,MAGXH,SAAU,CACRF,KAAMS,QACNJ,SAAS,GAGXO,QAAS,CACPZ,KAAMa,OACNR,QAAS,KAAM,KAGjBS,QAAS,CACPd,KAAMS,QACNJ,SAAS,GAIXU,SAAU,CACRf,KAAMa,OACNR,QAAS,MAGXW,OAAQ,CACNhB,KAAMa,OACNR,QAAS,MAIXY,OAAQ,CACNjB,KAAMa,OACNR,QAAS,MAEXa,MAAO,CACLlB,KAAMC,OACNI,QAAS,KACT,UAAUc,GACR,MAAO,CACL,OACA,YACA,aACA,OACA,QACAC,SAASD,Q,gECvFnB,IAAIE,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,yCAAyC,CAAuB,OAArBN,EAAIO,aAAuBH,EAAG,aAAaJ,EAAIQ,GAAIR,EAAS,OAAE,SAASS,GAAM,OAAOL,EAAG,aAAa,CAACM,IAAK,uBAA0BD,EAAO,GAAGE,MAAM,CAAGC,UAAW,KAAOZ,EAAIV,QAAQuB,MAAQ,GAAK,KAAOC,MAAM,CAAC,GAAKd,EAAIe,IAAIN,GAAM,MAAQ9B,OAAO8B,EAAKT,EAAIgB,YAAY,SAAWhB,EAAId,SAAS,MAAQc,EAAIiB,cAAcR,GAAM,WAAaT,EAAIkB,UAAUpB,SAASW,EAAKT,EAAIgB,aAAaG,GAAG,CAAC,OAAS,SAASC,GAAQ,OAAOpB,EAAIqB,YAAYZ,EAAKhC,YAAW,IAC3lB6C,EAAkB,G,uJCqBtB,GACA,qCACA,aACA,KAHA,WAIA,OACA,SACA,aACA,aACA,oBAIA,UAEA,UAFA,WAGA,mDACA,4BACA,iBACA,OAIA,uBAVA,WAWA,gDAIA,WAfA,WAgBA,+DACA,iBACA,OAGA,mBArBA,WAsBA,iGAGA,QArCA,WAqCA,wKACA,oBADA,OAIA,aAGA,YACA,gCACA,gEATA,8CAcA,SACA,gBADA,WACA,uKACA,wDADA,SAEA,uDACA,SACA,yBACA,4CALA,OAEA,EAFA,OASA,sBATA,8CAYA,IAbA,SAaA,GACA,kDAIA,SAlBA,WAkBA,WAEA,mDAEA,2CACA,mBAIA,cA3BA,SA2BA,GACA,6BACA,4DAEA,2BAKA,YApCA,SAoCA,cACA,gEACA,+BACA,gCACA,2BACA,wBAEA,uBACA,mBAIA,YAhDA,SAgDA,GACA,2GAMA,QAvDA,SAuDA,gBACA,KACA,KAGA,mBACA,uCAGA,cACA,mCACA,2CACA,MACA,KACA,iBACA,8BAEA,eAGA,aAIA,GACA,4BAGA,uBAGA,WAtFA,SAsFA,cACA,KAGA,uCAIA,MAHA,uDAWA,UARA,kBACA,+BACA,8BACA,8BADA,4BAEA,GAFA,QAUA,yBCnL8V,I,wBCQ1VC,EAAY,eACd,EACAxB,EACAuB,GACA,EACA,KACA,KACA,MAIa,aAAAC,E","file":"js/chunk-1232e627.ff03d874.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&lang=scss&\"; 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&lang=scss&\"","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","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"interface-checkbox-relational subgrid\"},[(_vm.initialValue === null)?_c('v-spinner'):_vm._l((_vm.items),function(item){return _c('v-checkbox',{key:(\"checkbox_relational_\" + (item.id)),style:({ flexBasis: 100 / (_vm.options.grid || 1) + '%' }),attrs:{\"id\":_vm.uid(item),\"value\":String(item[_vm.relatedPk]),\"disabled\":_vm.readonly,\"label\":_vm.labelRendered(item),\"inputValue\":_vm.selection.includes(item[_vm.relatedPk])},on:{\"change\":function($event){return _vm.onSelection(item.id)}}})})],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div class=\"interface-checkbox-relational subgrid\">\n\t\t<v-spinner v-if=\"initialValue === null\" />\n\t\t<v-checkbox\n\t\t\tv-else\n\t\t\tv-for=\"item in items\"\n\t\t\t:id=\"uid(item)\"\n\t\t\t:key=\"`checkbox_relational_${item.id}`\"\n\t\t\t:style=\"{ flexBasis: 100 / (options.grid || 1) + '%' }\"\n\t\t\t:value=\"String(item[relatedPk])\"\n\t\t\t:disabled=\"readonly\"\n\t\t\t:label=\"labelRendered(item)\"\n\t\t\t:inputValue=\"selection.includes(item[relatedPk])\"\n\t\t\t@change=\"onSelection(item.id)\"\n\t\t></v-checkbox>\n\t</div>\n</template>\n\n<script>\nimport mixin from '@directus/extension-toolkit/mixins/interface';\nimport { find } from 'lodash';\n\nexport default {\n\tname: 'InterfaceCheckboxesRelational',\n\tmixins: [mixin],\n\tdata() {\n\t\treturn {\n\t\t\titems: [],\n\t\t\tselection: [],\n\t\t\tunchecked: {},\n\t\t\tinitialValue: null\n\t\t};\n\t},\n\n\tcomputed: {\n\t\t//The primary key of related table\n\t\trelatedPk() {\n\t\t\tlet fields = this.relation.junction.collection_one.fields;\n\t\t\treturn find(fields, {\n\t\t\t\tprimary_key: true\n\t\t\t}).field;\n\t\t},\n\n\t\t//The column name of junction table in ref to related table\n\t\tjunctionFieldOfRelated() {\n\t\t\treturn this.relation.junction.field_many.field;\n\t\t},\n\n\t\t//Junction Table Primary Key\n\t\tjunctionPk() {\n\t\t\treturn find(this.relation.collection_many.fields, {\n\t\t\t\tprimary_key: true\n\t\t\t}).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\t},\n\tasync created() {\n\t\tawait this.getInitialValue();\n\n\t\t//Get all the items\n\t\tthis.getItems();\n\n\t\t//Select the items\n\t\tif (!this.newItem) {\n\t\t\tthis.selection = this.initialValue.map(\n\t\t\t\titem => item[this.junctionFieldOfRelated][this.relatedPk]\n\t\t\t);\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\tuid(item) {\n\t\t\treturn this.$helpers.shortid.generate() + '_' + item.id;\n\t\t},\n\n\t\t// Get items to render the checkboxes\n\t\tgetItems() {\n\t\t\t//Get the collection name of the related table\n\t\t\tlet collection = this.relation.junction.collection_one.collection;\n\n\t\t\tthis.$api.getItems(collection, {}).then(res => {\n\t\t\t\tthis.items = res.data;\n\t\t\t});\n\t\t},\n\n\t\tlabelRendered(item) {\n\t\t\tif (this.options.template) {\n\t\t\t\treturn this.$helpers.micromustache.render(this.options.template, item);\n\t\t\t} else {\n\t\t\t\treturn this.item[this.relatedPk];\n\t\t\t}\n\t\t},\n\n\t\t//When checkbox is clicked\n\t\tonSelection(val) {\n\t\t\tlet item = this.items.filter(item => item[this.relatedPk] == val)[0];\n\t\t\tif (this.selection.includes(val)) {\n\t\t\t\tlet index = this.selection.indexOf(val);\n\t\t\t\tthis.selection.splice(index, 1);\n\t\t\t\tthis.removeItem(val);\n\t\t\t} else {\n\t\t\t\tthis.selection.push(val);\n\t\t\t\tthis.addItem(val, item);\n\t\t\t}\n\t\t},\n\n\t\tprepareItem(item) {\n\t\t\treturn { [this.junctionFieldOfRelated]: { [this.relatedPk]: item[this.relatedPk] } };\n\t\t},\n\n\t\t/**\n\t\t * Adds a new item to junction table\n\t\t */\n\t\taddItem(val, item) {\n\t\t\tlet newValue = [];\n\t\t\tlet isSet = false;\n\t\t\t//If the value is set\n\t\t\t//We check throug items if the selected is same.\n\t\t\tif (this.initialValue) {\n\t\t\t\tthis.initialValue.forEach(item => {\n\t\t\t\t\t//If the item is deleted\n\t\t\t\t\t//Restore the value from unchecked array\n\t\t\t\t\tif (item.$delete) {\n\t\t\t\t\t\tlet uncheckedItem = this.unchecked[item[this.junctionPk]];\n\t\t\t\t\t\tlet itemId = uncheckedItem[this.junctionFieldOfRelated][this.relatedPk];\n\t\t\t\t\t\tif (itemId == val) {\n\t\t\t\t\t\t\tisSet = true;\n\t\t\t\t\t\t\tnewValue.push(uncheckedItem);\n\t\t\t\t\t\t\tdelete this.unchecked[item[this.junctionPk]];\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnewValue.push(item);\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnewValue.push(item);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (!isSet) {\n\t\t\t\tnewValue.push(this.prepareItem(item));\n\t\t\t}\n\t\t\t//newValue.push({ [this.junctionFieldOfRelated]: newItem });\n\t\t\tthis.$emit('input', newValue);\n\t\t},\n\n\t\tremoveItem(val) {\n\t\t\tlet newValue = [];\n\t\t\t//Loop through existing value to find an item\n\t\t\t//Set $delete key to true\n\t\t\tthis.initialValue.forEach(item => {\n\t\t\t\tif (!item.$delete && item[this.junctionFieldOfRelated][this.relatedPk] == val) {\n\t\t\t\t\t//Keep the item in seperate array\n\t\t\t\t\t// to restore the value when checked again\n\t\t\t\t\tif (item[this.junctionPk]) {\n\t\t\t\t\t\tthis.unchecked[item[this.junctionPk]] = item;\n\t\t\t\t\t\tnewValue.push({\n\t\t\t\t\t\t\t[this.junctionPk]: item[this.junctionPk],\n\t\t\t\t\t\t\t$delete: true\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tnewValue.push(item);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tthis.$emit('input', newValue);\n\t\t}\n\t}\n};\n</script>\n\n<style lang=\"scss\">\n.interface-checkbox-relational {\n\tpadding-top: calc(\n\t\t(var(--input-height) - 24px) / 2\n\t); // [input height] - 24px (icon height) / 2 (top padding)\n\n\t.form-checkbox {\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\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=3529d242&\"\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&lang=scss&\"\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  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}