Typi MultiInput

Extension for TypiCMS.

For making multi-value fields.

TypiCMS is a modular multilingual content management system built with Laravel 6. Out of the box you can manage pages, events, news, places, menus, translations, etc.

Installation

1. Install TypiCMS

2. Install TypiMultiInput

   composer require visermort/typimultiinput
   

3. Publish MultiInput files to project directory (config, views, scss, js)

   php artisan vendor:publish --provider="Visermort\TypiMultiInput\MultiInputProvider"
   
   

4. Write links to scss, js

   /resources/scss/admin.scss

   ...
   @import 'admin/multiinput';
   ...    
        
   

   /resources/scss/public.scss

   ...
   @import 'public/multiinput';
   ...    
        
   

   /resources/js/admin.js - import vue.js component

   ...
   import MultiInputFileField from './components/MultiInputFileField.vue';
   ...
   ...
   new Vue({
       i18n,
       components: {
            ...
            ...
            MultiInputFileField,
            ...
   
   ...    
        
   

5. Build assets

   npm run dev (prod, watch..)
   
   

Usage

1. There is sample configuration named "advantages" in /config/multiinput.php.

   Make your configurations here.

2. Create field in table by migration.

   Schema::table('products', function (Blueprint $table) {
       $table->json('advantages')->nullable(true);
   });
   

3. Update Model class.

   class Product extends Base
   {
       ... 
       protected $casts = [
           'advantages' => 'array',
       ];
       ...
   

4. Write in admin form template

   ...
   <div class="form-group">
       {!! MultiInput::render('advantages', 'advantages', $model) !!}
   </div>
   ...
   
   

   argument1 "advantages" - Model attribute name
   argument2 "advantages" - configuration name
   argument3 $model - Model
   argument4, not required, default [] - config updates, for example:
   ['columns' => ['templates' => ['items' => TypiCMS::templates()]]]
   

   blade templates for admin in directory /resources/views/vendor/multiinput/admin/

5. Write in public template

   ...
   <div class="advantages">
      <h5>Advantages</h5>
      {!! MultiInput::publish('advantages', 'advantages', $model->present()) !!}
   </div>
   ...
   or
   ...
   <div class="advantages">
      <h5>Advantages</h5>
      {!! MultiInput::publish('advantages', 'advantages', $model->present(), [], ['templates' => ['file'=>'other_file', 'main'=>'other_main']]) !!}
   </div>
   ...
   
   

   argument5 - params. Not required

   Default templates in /resources/views/vendor/multiinput/public/. Can be override in params

   [
       'templates' => [
           'directory' => path do templates from /resources/views/, defalult 'vendor.multiinput.public.<arrtibute name>.',
           'main' => main template, default 'main',
           'item' => template for item, default 'item',
           'image' => template for image, default 'image',
           'file' => template for document, default 'file',
       ]
   ]  
   

Config

(All configurations in /config/multiinput.php.)

Properties

columns array, for root and columns with type Multiinput, required: The row columns configuration where you can set the properties.
name string, for column, required: Column name.
title string, for root and columns, required: Configuration title, column title. Performs on front as Lang::get('db.'title).
type string, for columns, required: Column type.

Available field types

 Varchar
 Text
 Date
 DateTime
 Number
 Dropdown
 Boolean
 Image
 File
 Multiinput - embedder multiinput field

translatable boolean, for column: Data of all column types will be stored as multilingual if true.
order array, for root and column with type Multiinput: Sort order (on front).
items array, for column with type Dropdown, required: Select options.
rules string, for column: Validation rules. Validation occurs on front by Js. Available rules requried, min:value, max:value. Enabled more than one rule required|max:100.
clone-enable booldean, for root and column with type Multiinput: Makes "Clone Item" button.
single-row boolean, for root and column with type Multiinput: Makes "Add Item" button if false or empty.
sort-enable boolean, for root and column with type Multiinput: Enable rows sorting by drag&drop on an admin form.