/ Gists

Gists

On gists

Konfiguracni objekty - neon - Nette

Nette Nette-Neon

article.md #

Konfigurační objekty v Nette

Tomáš Jacík   30. 1. 2017

Jak se poprat s předáním konfigurace službě z config.neon? A jak k tomu využít Nette DI?

Jak se to běžně dělává?

Mějme hypotetickou třídu InvoiceForm. Formulář má vlastní šablonu, nemůžeme tedy napsat pouhou továrnu, potřebujeme komponentu. A k ní továrnu. Navíc ale chceme formuláři předat z config.neon nějaké výchozí hodnoty. Jak by takový kód vypadal?

Formulář

declare(strict_types = 1);

namespace App\Forms;

use Nette\Application\UI\Control;
use Nette\Application\UI\Form;

final class InvoiceForm extends Control
{
    /**
     * @var array
     */
    private $config;

    public function __construct(array $config)
    {
        $this->config = $config;
    }

    protected function createComponentInvoiceForm(): Form
    {
        $form = new Form;

        $form->addText('maturity', 'Splatnost')
            ->setDefaultValue($this->config['defaultMaturity']);

        return $form;
    }

    public function render()
    {
        $this->getTemplate()->render(__DIR__ . '/InvoiceForm.latte');
    }
}

Továrna

declare(strict_types = 1);

namespace App\Forms;

final class InvoiceFormFactory
{
    /**
     * @var array
     */
    private $config;

    public function __construct(array $config)
    {
        $this->config = $config;
    }

    public function create(): InvoiceForm
    {
        return new InvoiceForm($this->config);
    }
}

Šablona

<form n:name="invoiceForm">
    {* naše vlastní vykreslení formuláře *}
</form>

V config.neon pak musíme továrnu formuláře zaregistrovat a předat jí potřebné parametry.

parameters:
    invoicing:
        defaultMaturity: 7
        pdfDirectory: %appDir%/../invoices

services:
    - App\Forms\InvoiceFormFactory( %invoicing% )

Jak to udělat lépe?

Místo běžného pole si na konfiguraci vytvoříme objekt, který bude konfiguraci našemu formuláři zprostředkovávat.

declare(strict_types = 1);

namespace App\Config;

use Nette\Utils\ArrayHash;

abstract class AbstractConfig extends ArrayHash
{
    public function __construct(array $arr)
    {
        foreach ($arr as $key => $value) {
            if (is_array($value)) {
                $this->$key = ArrayHash::from($value, TRUE);
            } else {
                $this->$key = $value;
            }
        }
    }
}

Z tohoto objektu pak podědíme konfiguraci pro náš formulář. Můžeme také do třídy přidat metody, které budou s naší konfigurací pracovat. Např. metodu getPdfPath(), kterou později využijeme v třídě na generování PDF. Konfigurační třída tedy není jen jednorázová, předáme její pomocí fakturační konfiguraci více službám.

declare(strict_types = 1);

namespace App\Config;

/**
 * @property int    $defaultMaturity
 * @property string $pdfDirectory
 */
final class InvoicingConfig extends AbstractConfig
{
    public function getPdfPath(int $invoiceId): string
    {
        return vsprintf('%s/%s.pdf', [$this->pdfDirectory, $invoiceId]);
    }
}

Nyní můžeme třídu InvoiceForm upravit, aby nového konfiguračního objektu využila. Všimněte si také metody setDefaultValue(). Díky ArrayHash nyní můžeme ke konfiguraci přistupovat jako k objektu.

declare(strict_types = 1);

namespace App\Forms;

use App\Config\InvoicingConfig;
use Nette\Application\UI\Control;
use Nette\Application\UI\Form;

final class InvoiceFormNew extends Control
{
    /**
     * @var InvoicingConfig
     */
    private $config;

    public function __construct(InvoicingConfig $config)
    {
        $this->config = $config;
    }

    protected function createComponentInvoiceForm(): Form
    {
        $form = new Form;

        $form->addText('maturity', 'Splatnost')
            ->setDefaultValue($this->config->defaultMaturity);

        return $form;
    }

    public function render()
    {
        $this->getTemplate()->render(__DIR__ . '/InvoiceForm.latte');
    }
}

Můžeme se také zbavit vlastní implementace továrny a nahradit ji interfacem. Nette nám pak továrnu vygeneruje samo.

declare(strict_types = 1);

namespace App\Forms;

interface InvoiceFormFactoryInterface
{
    public function create(): InvoiceForm;
}

Nakonec vše zaregistrujeme v config.neon. Všimněte si také absence sekce parameters.

services:
    - App\Config\InvoicingConfig({
        defaultMaturity: 7
        pdfDirectory: %appDir%/../invoices
    })
    - App\Forms\InvoiceFormFactoryInterface

Co na závěr? Tohle jistě není definitivní řešení. Dalo by se lecjak rozšířit. Např. dodělat validace hodnot vstupujících do konfiguračních objektů. Tím by však byl článek již moc složitý. Jeho pointou je ukázat alternativní přístup předávání konfigurace službám. A jak to ve svých aplikacích děláte vy?


On gists

v-model, Parent <-> Child 2 way databinding

Vue.js

1.vue #

<!--Emit + props-->

<!--PARENT-->
<template>
  <div>
    <h1>A1 - parent</h1>
    <input
      :value="time"
      @input="time = $event.target.value"
      class="border border-gray-400"
    />
    <b1 @on-parent="this.time = $event" :time="time" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: null
    }
  },
  methods: {},
  computed: {},
  mounted() {}
}
</script>



<!--CHILD-->
<template>
  <div>
    <h1>B1 - child</h1>
    <input
      :value="time"
      @input="sendData($event.target.value)"
      class="border border-gray-400"
    />
  </div>
</template>

<script>
export default {
  emits: ['on-parent'],
  props: ['time'],
  data() {
    return {}
  },
  methods: {
    sendData(val) {
      this.$emit('on-parent', val)
    }
  },
  computed: {},
  mounted() {}
}
</script>


On gists

Use Global Utility Methods For DRYer Code

Vue.js

utils.js #

// import store from '../store' <-- To access your Vuex store
import Vue from 'vue' // <-- used for vue-toastification

class Utils {
  // Copy a string to user's clipboard
  copyToClipboard(text) {
    let copyText = document.createElement('input')
    document.body.appendChild(copyText)
    copyText.value = text
    copyText.select()
    document.execCommand('copy')
    document.body.removeChild(copyText)

    // Show toast on copy success
    // (using the vue-toastification package here)
    Vue.$toast.success('Copied address to clipboard: ' + text, {
      position: 'top-right',
      timeout: 3000
    })
  }
}

export default new Utils()

On gists

Call a Child Component’s Method from Parent

Vue.js

component.vue #

// Parent.vue
<template>
  <ChildComponent ref="child" />
</template>


// In Parent.vue's methods
this.$refs.child.methodName()

On gists

Refresh (Reload) a Specific Component Dynamically

Vue.js

component.vue #

<template>
  <component-to-re-render :key="reloadMe" />
</template>

<script>
export default { 
  data() { 
    return { 
      reloadMe: 0, 
    }
  }; 
    
  methods: { 
    forceRerender() { this.reloadMe += 1; } 
  } 
}
</script>

On gists

Flex with gap

CSS CSS trick

demo1.css #

/* https://coryrylan.com/blog/css-gap-space-with-flexbox */


.emulated-flex-gap {
  --gap: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}

On gists

Config - prettier, editorconfig

Config files

.prettierrc #

{
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "trailingComma": "none",
  "printWidth": 120
}

On gists

Parent - child - overlay - increase parent by child

CSS CSS trick

index.html #

<!-- DEMO: http://kod.djpw.cz/ilcd -->

<div class="row">
    <div class="content">
        obsah row <br> 

    </div>
    <div class="overlay">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>

    </div>
</div>

<div class="row">
    <div class="content">
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
        obsah row<br>
    </div>
    <div class="overlay">
        <div>1</div>
    </div>
</div>


On gists

PHP Diacritics regexp

PHP

dia.php #

<?php

if (preg_match('/[áčďéěíňóřšűőťúůýž]+/iu', $string)) {
    // obsahuje diakritiku
}

On gists

native js + trigger event

JavaScript

event.js #

const e = new Event('change')
const element = document.querySelector('#' + this.fakeFileId)
element.dispatchEvent(e)