Akeneo PIM UI – Complete Guide for Frontend Developers

'use strict';

define([
  'oro/translator',
  'backbone',
  'oro/mediator',
  'pim/form',
  'pim/fetcher-registry',
  'pim/template/common/default-template',
], function (__, Backbone, mediator, BaseForm, FetcherRegistry, template) {
  return BaseForm.extend({
    template: _.template(template),

    /**
     * {@inheritdoc}
     */
    initialize: function () {
      this.model = new Backbone.Model({});

      BaseForm.prototype.initialize.apply(this, arguments);
    },

    /**
     * {@inheritdoc}
     */
    configure: function () {
      Backbone.Router.prototype.once('route', this.unbindEvents);

      if (_.has(__moduleConfig, 'forwarded-events')) {
        this.forwardMediatorEvents(__moduleConfig['forwarded-events']);
      }

      return BaseForm.prototype.configure.apply(this, arguments);
    },

    /**
     * {@inheritdoc}
     */
    render: function () {
      if (!this.configured) {
        return this;
      }

      this.getRoot().trigger('oro_config:form:render:before');

      this.$el.html(this.template());

      this.renderExtensions();

      this.getRoot().trigger('oro_config:form:render:after');

      return this;
    },

    /**
     * Clear the mediator events
     */
    unbindEvents: function () {
      mediator.clear('oro_config:form');
    },
  });
});

'use strict';

define(
    [
        'jquery',
        'underscore',
        'oro/translator',
        'pim/form',
        'macopedia/templates/product/transform-to-variant',
        'routing',
        'pim/dialogform',
        'pim/form-builder',
        'oro/mediator',
        'maco-product-state'
    ],
    function (
        $,
        _,
        __,
        BaseForm,
        template,
        Routing,
        DialogForm,
        FormBuilder,
        mediator,
        ProductState
    ) {
        return BaseForm.extend({
            template: _.template(template),
            className: 'AknDropdown-menuLink transform-to-variant',
            dialog: null,
            productId: null,
            familyId: null,
            variantAxis: null,

            /**
             * {@inheritdoc}
             */
            initialize: function (config) {
                this.config = config.config;
                BaseForm.prototype.initialize.apply(this, arguments);
            },

            /**
             * {@inheritdoc}
             */
            render: function () {
                this.$el.html(this.template({
                    title: __(this.config.title),
                }));

                this.$el.on('click', function () {
                    FormBuilder.build(this.config.modalForm)
                        .then(function (modal) {
                            let state = {
                                productId: ProductState.getProductId(),
                                familyId: ProductState.getFamilyId(),
                                variantAxis: this.variantAxis
                            }
                            modal.setData(state);
                            modal.open();
                        }.bind(this)).catch(reason => {
                        console.error(reason);
                    })
                }.bind(this));

                return this;
            }
        });
    });

import {ButtonHTMLAttributes, ReactNode} from "react";

export type FormValue = {
    [key: string]: string;
};

export type FormProps = {
    children?: ReactNode;
    value: FormValue;
    onChange: (value: FormValue) => void;
};

export type OptionProps = {
    value: string;
    isSelected?: boolean;
    isDisabled?: boolean;
    children?: ReactNode;
    onSelect?: () => void;
} & ButtonHTMLAttributes;

export type QuickExportConfiguratorProps = {
    showWithLabelsSelect: boolean;
    showWithMediaSelect: boolean;
    onActionLaunch: (formValue: FormValue) => void;
    getProductCount: () => number;
};

export type SelectProps = {
    children?: ReactNode;
    name: string;
    value?: string | null;
    isVisible?: boolean;
    onChange?: (value: string | null) => void;
};