books/ui/components/controls/Link.vue

<script>
import frappe from 'frappejs';
import feather from 'feather-icons';
import Awesomplete from 'awesomplete';
import Autocomplete from './Autocomplete';
import FeatherIcon from 'frappejs/ui/components/FeatherIcon';
import Form from '../Form/Form';
import { _ } from 'frappejs/utils';

export default {
    extends: Autocomplete,
    watch: {
        value(newValue) {
            this.$refs.input.value = newValue;
        }
    },
    methods: {
        async getList(query) {
            const list = await frappe.db.getAll({
                doctype: this.getTarget(),
                filters: {
                    keywords: ["like", query]
                },
                fields: ['name'],
                limit: 50
            });

            const plusIcon = feather.icons.plus.toSvg({
                class: 'm-1',
                width: 16,
                height: 16
            });

            return list
                .map(d => ({
                    label: d.name,
                    value: d.name
                }))
                .concat({
                    label: plusIcon + ' New ' + this.getTarget(),
                    value: '__newItem'
                })
        },
        getWrapperElement(h) {
          return h('div', {
            class: ['form-group', ...this.wrapperClass],
            attrs: {
                'data-fieldname': this.docfield.fieldname
            }
          }, [
            this.getLabelElement(h),
            this.getInputElement(h),
            this.getFollowLink(h)
          ]);
        },
        getFollowLink(h) {
          const doctype = this.getTarget();
          const name = this.value;

          if (!name) {
            return null;
          }

          return h(FeatherIcon, {
            props: {
              name: 'arrow-right-circle'
            },
            class: ['text-muted'],
            style: {
              position: 'absolute',
              right: '8px',
              bottom: '4px',
              cursor: 'pointer'
            },
            nativeOn: {
              click: () => {
                this.$router.push(`/edit/${doctype}/${name}`);
              }
            }
          });
        },
        getTarget() {
            return this.docfield.target;
        },
        sort() {
            return (a, b) => {
                if (a.value === '__newitem' || b.value === '__newitem') {
                    return -1;
                }
                return a.value > b.value;
            }
        },
        filter() {
            return (suggestion, txt) => {
                if (suggestion.value === '__newItem') {
                    return true;
                }
                return Awesomplete.FILTER_CONTAINS(suggestion, txt);
            }
        },
        bindEvents() {
            const input = this.$refs.input;

            input.addEventListener('awesomplete-select', async (e) => {
                // new item action
                if (e.text && e.text.value === '__newItem') {
                    e.preventDefault();
                    const newDoc = await frappe.getNewDoc(this.getTarget());

                    this.$modal.show({
                        title: _('New {0}', _(newDoc.doctype)),
                        bodyComponent: Form,
                        bodyProps: {
                            doctype: newDoc.doctype,
                            name: newDoc.name,
                            defaultValues: {
                              name: input.value
                            }
                        },
                    });

                    newDoc.on('afterInsert', (data) => {
                        // if new doc was created
                        // then set the name of the doc in input
                        this.handleChange(newDoc.name);
                        this.$modal.hide();
                    });

                    this.$modal.observable().once('modal.hide', () => {
                        // if new doc was not created
                        // then reset the input value
                        if (this.value === '__newItem') {
                            this.handleChange('');
                        }
                    })
                }
            })
        }
    }
}
</script>