Property Definition

import { _t } from "@web/core/l10n/translation";
import { PropertyValue } from "./property_value";
import { CheckBox } from "@web/core/checkbox/checkbox";
import { DomainSelector } from "@web/core/domain_selector/domain_selector";
import { Domain } from "@web/core/domain";
import { Dropdown } from "@web/core/dropdown/dropdown";
import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { ModelSelector } from "@web/core/model_selector/model_selector";
import { Many2XAutocomplete } from "@web/views/fields/relational_utils";
import { useService, useOwnedDialogs } from "@web/core/utils/hooks";
import { PropertyDefinitionSelection } from "./property_definition_selection";
import { PropertyTags } from "./property_tags";
import { SelectCreateDialog } from "@web/views/view_dialogs/select_create_dialog";
import { uuid } from "@web/core/utils/strings";

import { Component, useState, onWillUpdateProps, useEffect, useRef } from "@odoo/owl";

export class PropertyDefinition extends Component {
    static template = "web.PropertyDefinition";
    static components = {
        CheckBox,
        DomainSelector,
        Dropdown,
        DropdownItem,
        PropertyValue,
        Many2XAutocomplete,
        ModelSelector,
        PropertyDefinitionSelection,
        PropertyTags,
    };
    static props = {
        fieldName: { type: String },
        readonly: { type: Boolean, optional: true },
        canChangeDefinition: { type: Boolean, optional: true },
        propertyDefinition: { optional: true },
        context: { type: Object },
        isNewlyCreated: { type: Boolean, optional: true },
        // index and number of properties, to hide the move arrows when needed
        propertyIndex: { type: Number },
        propertiesSize: { type: Number },
        // events
        onChange: { type: Function, optional: true },
        onDelete: { type: Function, optional: true },
        onPropertyMove: { type: Function, optional: true },
        // prop needed by the popover service
        close: { type: Function, optional: true },
        record: { type: Object, optional: true },
    };
    static _propertyParametersMap = new Map([
        ["comodel", ["many2one", "many2many"]],
        ["currency_field", ["monetary"]],
        ["domain", ["many2one", "many2many"]],
        ["selection", ["selection"]],
        ["tags", ["tags"]],
    ]);

    setup() {
        this.orm = useService("orm");

        this.propertyDefinitionRef = useRef("propertyDefinition");
        this.addDialog = useOwnedDialogs();

        const defaultDefinition = {
            name: false,
            string: "",
            type: "char",
            default: "",
        };
        const propertyDefinition = {
            ...defaultDefinition,
            ...this.props.propertyDefinition,
        };

        this.state = useState({
            propertyDefinition: propertyDefinition,
            typeLabel: this._typeLabel(propertyDefinition.type),
            resModel: "",
            resModelDescription: "",
            matchingRecordsCount: undefined,
            propertyIndex: this.props.propertyIndex,
        });

        this._syncStateWithProps(propertyDefinition);

        this._domInputIdPrefix = uuid();

        // update the state and fetch needed information
        onWillUpdateProps((newProps) => this._syncStateWithProps(newProps.value));

        useEffect((event) => {
            // focus the property label, when we open the property definition
            if (this.labelFocused) {
                // focus it only once
                return;
            }
            this.labelFocused = true;
            const labelInput = this.propertyDefinitionRef.el.querySelectorAll("input")[0];
            if (labelInput) {
                if (this.props.isNewlyCreated) {
                    labelInput.select();
                } else {
                    labelInput.focus();
                }
            }
        });
    }

    /* --------------------------------------------------------
     * Public methods / Getters
     * -------------------------------------------------------- */

    /**
     * Return the list of property types with their labels.
     *
     * @returns {array}
     */
    get availablePropertyTypes() {
        return [
            ["char", _t("Text")],
            ["text", _t("Multiline Text")],