openmct/src/ui/layout/CreateButton.vue

<template>
    <div class="c-create-button--w">
        <button class="c-create-button c-button--menu c-button--major icon-plus"
             @click="open">
            <span class="c-button__label">Create</span>
        </button>
        <div class="c-create-menu c-super-menu"
             v-if="opened">
            <div class="c-super-menu__menu">
                <ul>
                    <li v-for="(item, index) in sortedItems"
                        :key="index"
                        :class="item.class"
                        :title="item.title"
                        @mouseover="showItemDescription(item)"
                        @click="create(item)">
                        {{ item.name }}
                    </li>
                </ul>
            </div>
            <div class="c-super-menu__item-description">
                <div :class="['l-item-description__icon', 'bg-' + selectedMenuItem.class]"></div>
                <div class="l-item-description__name">{{selectedMenuItem.name}}</div>
                <div class="l-item-description__description">{{selectedMenuItem.title}}</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
    @import "~styles/sass-base";

    .c-create-button,
    .c-create-menu {
        font-size: 1.1em;
    }

    .c-create-button {
        .is-editing & {
            @include disabled();
        }

        .c-button__label {
            text-transform: $createBtnTextTransform;
        }
    }

    .c-create-menu {
        max-height: 80vh;
        max-width: 500px;
        min-height: 250px;
        z-index: 70;

        [class*="__icon"] {
            filter: $colorKeyFilter;
        }

        [class*="__item-description"] {
            min-width: 200px;
        }
    }
</style>

<script>
    import CreateAction from '../../../platform/commonUI/edit/src/creation/CreateAction';
    import objectUtils from '../../api/objects/object-utils';

    function convertToLegacyObject(domainObject) {
        let keyString = objectUtils.makeKeyString(domainObject.identifier);
        let oldModel = objectUtils.toOldFormat(domainObject);
        return instantiate(oldModel, keyString);
    }
    export default {
        inject: ['openmct'],
        methods: {
            open: function () {
                if (this.opened) {
                    return;
                }
                this.opened = true;
                setTimeout(() => document.addEventListener('click', this.close));
            },
            close: function () {
                if (!this.opened) {
                    return;
                }
                this.opened = false;
                document.removeEventListener('click', this.close);
            },
            showItemDescription: function (menuItem) {
                this.selectedMenuItem = menuItem;
            },
            create: function (item) {
                // Hack for support.  TODO: rewrite create action.
                // 1. Get contextual object from navigation
                // 2. Get legacy type from legacy api
                // 3. Instantiate create action with type, parent, context
                // 4. perform action.
                return this.openmct.objects.get(this.openmct.router.path[0].identifier)
                    .then((currentObject) => {
                        let legacyContextualParent = this.convertToLegacy(currentObject);
                        let legacyType = this.openmct.$injector.get('typeService').getType(item.key);
                        let context = {
                            key: "create",
                            domainObject: legacyContextualParent // should be same as parent object.
                        };
                        let action = new CreateAction(
                            legacyType,
                            legacyContextualParent,
                            context,
                            this.openmct
                        );
                        return action.perform();
                    });
            },
            convertToLegacy (domainObject) {
                let keyString = objectUtils.makeKeyString(domainObject.identifier);
                let oldModel = objectUtils.toOldFormat(domainObject);
                return this.openmct.$injector.get('instantiate')(oldModel, keyString);
            }
        },
        destroyed () {
            document.removeEventListener('click', this.close);
        },
        data: function() {
            let items = [];

            this.openmct.types.listKeys().forEach(key => {
                let menuItem = this.openmct.types.get(key).definition;

                if (menuItem.creatable) {
                    let menuItemTemplate = {
                        key: key,
                        name: menuItem.name,
                        class: menuItem.cssClass,
                        title: menuItem.description
                    };

                    items.push(menuItemTemplate);
                }
            });

            return {
                items: items,
                selectedMenuItem: {},
                opened: false
            }
        },
        computed: {
            sortedItems () {
                return this.items.sort((a,b) => {
                    if (a.name < b.name) {
                        return -1;
                    } else if (a.name > b.name) {
                        return 1;
                    } else {
                        return 0;
                    }
                });
            }
        }
    }
</script>