Formularium\Frontend\Vue\Framework

Complexity

Total Complexity

42

Size/Duplication

Total Lines	530
Duplicated Lines	0 %

Importance

Changes	16
Bugs	6	Features	0

27 Methods

Rating	Name	Duplication	Size	Complexity
A	getFieldModelVariable()	0	3	1
A	setViewableContainerTag()	0	4	1
A	setFieldModelVariable()	0	5	1
A	appendExtraProp()	0	5	1
A	appendExtraData()	0	4	1
A	setMode()	0	4	1
A	serializeProps()	0	6	2
A	fillTemplate()	0	21	2
A	mapType()	0	8	3
A	__construct()	0	3	1
A	setExtraProps()	0	5	1
A	getTemplateData()	0	33	1
A	setEditableContainerTag()	0	4	1
A	htmlHead()	0	4	1
A	appendImport()	0	5	1
A	getViewableTemplate()	0	3	1
B	editableCompose()	0	74	4
A	counter()	0	4	1
A	getEditableContainerTag()	0	3	1
A	props()	0	23	6
A	getEditableTemplate()	0	3	1
A	getMode()	0	3	1
A	getViewableContainerTag()	0	3	1
A	setEditableTemplate()	0	5	1
A	viewableCompose()	0	48	4
A	setViewableTemplate()	0	5	1
A	getExtraProps()	0	3	1

<?php declare(strict_types=1);

namespace Formularium\Frontend\Vue;

use Formularium\Datatype;
use Formularium\Datatype\Datatype_bool;
use Formularium\Datatype\Datatype_number;
use Formularium\Exception\Exception;
use Formularium\HTMLNode;
use Formularium\Model;

class Framework extends \Formularium\Framework
{
    const VUE_MODE_SINGLE_FILE = 'VUE_MODE_SINGLE_FILE';
    const VUE_MODE_EMBEDDED = 'VUE_MODE_EMBEDDED';
    const VUE_PROP = 'VUE_PROP';
    const VUE_VARS = 'VUE_VARS';

    /**
     * @var string
     */
    protected $mode = self::VUE_MODE_EMBEDDED;

    /**
    * The tag used as container for fields in viewable()
    *
    * @var string
    */
    protected $viewableContainerTag = 'div';

    /**
     * The tag used as container for fields in editable()
     *
     * @var string
     */
    protected $editableContainerTag = 'div';

    /**
     * The viewable template.
     *
     * The following variables are replaced:
     *
     * {{form}}
     * {{jsonData}}
     * {{containerTag}}
     *
     * @var string|callable|null
     */
    protected $viewableTemplate = null;

    /**
     *
     *
     * @var string|callable|null
     */
    protected $editableTemplate = null;

    /**
     * Appended to the field variable names to handle models stored in an object field.
     *
     * Allows you to declare the model like this:
     *
     * data() {
     *   return {
     *       model: model,
     *   };
     * },
     *
     * @var string
     */
    protected $fieldModelVariable = '';

    /**
     * Extra props.
     *
     * @var array
     */
    protected $extraProps = [];

    /**
     * extra data fields
     *
     * @var string[]
     */
    protected $extraData = [];

    /**
     * The list of imports to add: import 'key' from 'value'
     *
     * @var string[]
     */
    protected $imports = [];

    public function __construct(string $name = 'Vue')
    {
        parent::__construct($name);
    }

    /**
     * Static counter to generate unique ids.
     *
     * @return integer
     */
    public static function counter(): int
    {
        static $counter = 0;
        return $counter++;
    }

    /**
     * Get the tag used as container for fields in viewable()
     *
     * @return  string
     */
    public function getViewableContainerTag(): string
    {
        return $this->viewableContainerTag;
    }

    /**
     * Set the tag used as container for fields in viewable()
     *
     * @param  string  $viewableContainerTag  The tag used as container for fields in viewable()
     *
     * @return  self
     */
    public function setViewableContainerTag(string $viewableContainerTag): Framework
    {
        $this->viewableContainerTag = $viewableContainerTag;
        return $this;
    }

    public function getEditableContainerTag(): string
    {
        return $this->editableContainerTag;
    }
    
    /**
     * @param string $tag
     * @return self
     */
    public function setEditableContainerTag(string $tag): Framework
    {
        $this->editableContainerTag = $tag;
        return $this;
    }

    /**
     * Get the value of editableTemplate
     * @return string|callable|null
     */
    public function getEditableTemplate()
    {
        return $this->editableTemplate;
    }

    /**
     * Set the value of editableTemplate
     *
     * @param string|callable|null $editableTemplate
     * @return self
     */
    public function setEditableTemplate($editableTemplate): Framework
    {
        $this->editableTemplate = $editableTemplate;

        return $this;
    }
    
    /**
     * Get viewable template
     *
     * @return string|callable|null
     */
    public function getViewableTemplate()
    {
        return $this->viewableTemplate;
    }

    /**
     * Set viewable tempalte
     *
     * @param string|callable|null  $viewableTemplate
     *
     * @return  self
     */
    public function setViewableTemplate($viewableTemplate)
    {
        $this->viewableTemplate = $viewableTemplate;

        return $this;
    }
    
    /**
     * Sets the vue render mode, single file component or embedded
     *
     * @param string $mode self::VUE_MODE_EMBEDDED or self::VUE_MODE_SINGLE_FILE
     * @return Framework
     */
    public function setMode(string $mode): Framework
    {
        $this->mode = $mode;
        return $this;
    }

    /**
     * Get the value of mode
     *
     * @return string
     */
    public function getMode(): string
    {
        return $this->mode;
    }

    public function htmlHead(HTMLNode &$head)
    {
        $head->prependContent(
            HTMLNode::factory('script', ['src' => "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"])
        );
    }

    public function mapType(Datatype $type): string
    {
        if ($type instanceof Datatype_number) {
            return 'Number';
        } elseif ($type instanceof Datatype_bool) {
            return 'Boolean';
        }
        return 'String';
    }

    public function props(Model $m): array
    {
        $props = [];
        foreach ($m->getFields() as $field) {
            if ($field->getRenderable(self::VUE_PROP, true)) {
                $p = [
                    'name' => $field->getName(),
                    'type' => $this->mapType($field->getDatatype()),
                ];
                if ($field->getRenderable(Datatype::REQUIRED, false)) {
                    $p['required'] = true;
                }
                $props[] = $p;
            }
        }
        foreach ($this->extraProps as $p) {
            if (!array_key_exists('name', $p)) {
                throw new Exception('Missing prop name');
            }
            $props[] = $p;
        }
        
        return $props;
    }

    protected function serializeProps(array $props): string
    {
        $s = array_map(function ($p) {
            return "'{$p['name']}': { 'type': {$p['type']}" . ($p['required'] ?? false ? ", 'required': true" : '') . " } ";
        }, $props);
        return "{\n        " . implode(",\n        ", $s) . "\n    }\n";
    }

    /**
     * Generates template data for rendering
     *
     * @param Model $m
     * @param array $elements
     * @return array
     */
    protected function getTemplateData(Model $m, array $elements): array
    {
        $data = array_merge($m->getDefault(), $m->getData());
        $form = join('', $elements);
        $jsonData = json_encode($data);
        $props = $this->props($m);
        $propsBind = array_map(
            function ($p) {
                return 'v-bind:' . $p . '="model.' . $p . '"';
            },
            array_keys($props)
        );
        $templateData = [
            'form' => $form,
            'jsonData' => $jsonData,
            'props' => $props,
            'propsCode' => $this->serializeProps($props),
            'propsBind' => implode(' ', $propsBind),
            'imports' => implode(
                "\n",
                array_map(function ($key, $value) {
                    return "import $key from \"$value\";";
                }, array_keys($this->imports), $this->imports)
            ),
            'extraData' => implode(
                "\n",
                array_map(function ($key, $value) {
                    return "  $key: $value,";
                }, array_keys($this->extraData), $this->extraData)
            )
        ];

        return $templateData;
    }

    public function viewableCompose(Model $m, array $elements, string $previousCompose): string
    {
        $templateData = $this->getTemplateData($m, $elements);
        $templateData['containerTag'] = $this->getViewableContainerTag();

        if (is_callable($this->viewableTemplate)) {
            return call_user_func(
                $this->viewableTemplate,
                $this,
                $templateData,
                $m
            );
        } elseif ($this->mode === self::VUE_MODE_SINGLE_FILE) {
            $viewableTemplate = $this->viewableTemplate ? $this->viewableTemplate : <<<EOF
<template>
<{{containerTag}}>
    {{form}}
</{{containerTag}}>
</template>
<script>
module.exports = {
    data: function () {
        return {{jsonData}};
    },
    methods: {
    }
};
</script>
<style>
</style>
EOF;
            
            return $this->fillTemplate(
                $viewableTemplate,

It seems like $viewableTemplate can also be of type callable; however, parameter $template of Formularium\Frontend\Vue\Framework::fillTemplate() does only seem to accept string, maybe add an additional type check?

                $templateData,
                $m
            );
        } else {
            $id = 'vueapp' . static::counter();
            $t = new HTMLNode($this->getViewableContainerTag(), ['id' => $id], $$templateData['form'], true);
            $script = <<<EOF
const app_$id = new Vue({
    el: '#$id',
    data: {$templateData['jsonData']}
});
EOF;
            $s = new HTMLNode('script', [], $script, true);
            return HTMLNode::factory('div', [], [$t, $s])->getRenderHTML();
        }
    }

    public function editableCompose(Model $m, array $elements, string $previousCompose): string
    {
        $templateData = $this->getTemplateData($m, $elements);
        $templateData['containerTag'] = $this->getEditableContainerTag();
        $templateData['methods'] = [
            'changedFile' => <<<EOF
changedFile(name, event) {
    console.log(name, event);
    const input = event.target;
    const files = input.files;
    if (files && files[0]) {
        // input.preview = window.URL.createObjectURL(files[0]);
    }
}
EOF
        ];

        if (is_callable($this->editableTemplate)) {
            return call_user_func(
                $this->editableTemplate,
                $this,
                $templateData,
                $m
            );
        } elseif ($this->editableTemplate) {
            return $this->fillTemplate(
                $this->editableTemplate,

It seems like $this->editableTemplate can also be of type callable; however, parameter $template of Formularium\Frontend\Vue\Framework::fillTemplate() does only seem to accept string, maybe add an additional type check?

                $templateData,
                $m
            );
        } elseif ($this->mode === self::VUE_MODE_SINGLE_FILE) {
            $editableTemplate = <<<EOF
<template>
<{{containerTag}}>
    {{form}}
</{{containerTag}}>
</template>
<script>
{{imports}}
module.exports = {
    data: function () {
        return {{jsonData}};
    },
    props: {
        {{propsCode}}
    },
    methods: {
        {{methods}}
    }
};
</script>
<style>
</style>
EOF;
            return $this->fillTemplate(
                $editableTemplate,
                $templateData,
                $m
            );
        } else {
            $id = 'vueapp' . static::counter();
            $t = new HTMLNode($templateData['containerTag'], ['id' => $id], $templateData['form'], true);
            $script = <<<EOF
const app_$id = new Vue({
    el: '#$id',
    data: function () {
        return {$templateData['jsonData']};
    },
    methods: {
    }
});
EOF;
            $s = new HTMLNode('script', [], $script, true);
            return HTMLNode::factory('div', [], [$t, $s])->getRenderHTML();
        }
    }

    protected function fillTemplate(string $template, array $data, Model $m): string
    {
        foreach ($data as $name => $value) {
            $template = str_replace(
                '{{' . $name . '}}',
                $value,
                $template
            );
        }

        $template = str_replace(
            '{{modelName}}',
            $m->getName(),
            $template
        );
        $template = str_replace(
            '{{modelNameLower}}',
            mb_strtolower($m->getName()),
            $template
        );
        return $template;
    }

    /**
     * Get appended to the field variable names to handle models stored in an object field.
     *
     * @return  string
     */
    public function getFieldModelVariable(): string
    {
        return $this->fieldModelVariable;
    }

    /**
     * Set appended to the field variable names to handle models stored in an object field.
     *
     * @param  string  $fieldModelVariable  Appended to the field variable names to handle models stored in an object field.
     *
     * @return  self
     */
    public function setFieldModelVariable(string $fieldModelVariable): self
    {
        $this->fieldModelVariable = $fieldModelVariable;

        return $this;
    }

    /**
     * @return array
     */
    public function getExtraProps(): array
    {
        return $this->extraProps;
    }

    /**
     *
     * @param array $extraProps
     *
     * @return  self
     */
    public function setExtraProps(array $extraProps): self
    {
        $this->extraProps = $extraProps;

        return $this;
    }

    /**
     *
     * @param array $extra Array of props. 'name' and 'type' keys are required for each element.
     *
     * @return  self
     */
    public function appendExtraProp(array $extra): self
    {
        $this->extraProps[] = $extra;

        return $this;
    }

    /**
     * Appends to the `data` field.
     *
     * @param string $name
     * @param string $value
     * @return self
     */
    public function appendExtraData(string $name, string $value): self
    {
        $this->extraData[$name] = $value;
        return $this;
    }

    /**
     * The list of imports to add: import 'key' from 'value'
     *
     * @param string $key
     * @param string $value
     * @return self
     */
    public function appendImport(string $key, string $value): self
    {
        $this->imports[$key] = $value;

        return $this;
    }
}