Git Product home page Git Product logo

oc-tileable-plugin's Introduction

Tileable List Widgets for OctoberCMS

Content

This package contains two backend lists to replace the default ones.
This plugin is based on the backend List widget Backend\Widgets\Lists
and the backend ListController behaviour Backend\Behaviors\ListController.


List Widget

  • Display a tiled list straight out of your controller
  • Replaces "Backend\Behaviors\ListController"

1) Implement the TileListController into your Plugin Controller

  • This file is located in controllers/
<?php namespace Vendor\Plugin\Controllers;

use Sewa\Tileable\Behaviors\TileListController;

class MyController extends Controller
{
    // 1) Implement Tile List instead of the Backend List
    public $implement = [
        // 'Backend.Behaviors.ListController',
        'Sewa.Tileable.Behaviors.TileListController'
    ];
    public $listConfig = 'list.yaml';
    
    // 2) Change main site output
    public function index()
    {
        $this->asExtension('TileListController')->index();
    }
}

2) Edit list.yaml

  • Create this file in controllers/mycontroller
# Model List Column configuration
list: ~/plugins/vendor/plugin/controllers/mycontroller/list_fields.yaml

# Model Class name
modelClass: Sewa\Artnetwork\Models\Artwork

# Link URL for each record
recordUrl: sewa/artnetwork/artworks/update/:id

# Message to display if the list is empty
noRecordsMessage: backend::lang.list.no_records

# Records to display per page
recordsPerPage: 20

# Show preview image
# "previewFrom" must be an attachment field
showPreview: false
previewFrom: attachment_files

# Displays a button for further display options (popup)
showSetup: false

# Show Search Bar
showSearch: false

# Show Delte Button over each item
showDelete: false

# Show buttons, which switch the list display
# "views" filters, which sizes are selectable
# "defaultView" sets one view type as default
showViews: false
views: [lg, md, sm, xs]
defaultView: lg

# Batch Uploader - Upload an attachment file and create new model
# "uploadTo" is the attachment field name
# "uploadFill" sets the values, the newly created model will be filled with.
# Keys and values both represent field names [model->field => attachment->field].
# The model attributes will be filled with attachment attributes.
showUpload: false
uploadTo: attachment_files
uploadFill: 
    name: file_name
    slug: file_name

# Header partial
# Insert a partial html file. It will be relative to our controller.
# So '$this' inside the partial will return the controller, not the widget.
headerPartial: false

3) Edit list_fields.yaml

  • Create this file in controllers/mycontroller
  • It represents the columns (fields) displayed by our list
columns:

    name:
        label: Name
        searchable: true
        invisible: false
        
    ### RELATIONS ###
    # Optional.
    # Now, even deep relations are possible.
    # Edit tags and stuff right out of the overview list.
    tags:
        label: Tags
        relation: tags
        select: name
        searchable: true
        invisible: false

Form Widget

  • Display a relation field as a tiled list
  • Works in backend forms created by the BackendFormController behavior.
  • Replaces "Backend\FormWidgets\Relation"

1) Implement the FormController into your Plugin Controller

  • This file is located in controllers/
<?php namespace Vendor\Plugin\Controllers;

use Sewa\Tileable\Behaviors\TileListController;

class MyController extends Controller
{
    // 1) Implement Backend Form
    public $implement = [
        'Backend.Behaviors.FormController'
    ];
    public $formConfig = 'form.yaml';
    
    // 2) Return Create Form
    public function create()
    {
        $this->bodyClass = 'compact-container';
        return $this->asExtension('FormController')->create();
    }	

    // 3) Return Update Form
    public function update($recordId = null)
    {
        $this->bodyClass = 'compact-container';
        return $this->asExtension('FormController')->update($recordId);
    }
}

2) Edit form.yaml

  • This file is located in controllers/mycontroller/
name: MyModel Update Form
form: ~/plugins/vendor/plugin/controllers/mycontroller/form_fields.yaml

modelClass: Vendor\Plugin\Models\MyModel
defaultRedirect: vendor/plugin/mymodel

create:
    redirect: vendor/plugin/mymodel/update/:id
    redirectClose: vendor/plugin/mymodel

update:
    redirect: vendor/plugin/mymodel
    redirectClose: vendor/plugin/mymodel

3) Edit form_fields.yaml

  • This file is located in controllers/mycontroller/.
  • It represents all columns (fields) displayed on the item
fields:

    name:
        label: Name
        span: left
        
    slug:
        label: Url
        span: right

tabs:

    stretch: true
    fields:
        attachment_files:
            tab: Edit
            label: Attachment Files
            type: fileupload
            mode: image
            imageWidth: 200
            imageHeight: 200
        
        ### TILE LIST ###
        tags:
            tab: Tags
            type: tilerelation
            label: false
            list:
                # Model List Column configuration
                # FOR MORE INFORMATION:
                # Read "List Widget - 3) Edit list_fields.yaml"
                list: ~/plugins/vendor/plugin/controllers/mycontroller/list_fields.yaml
                
                # Link URL for each record
                recordUrl: vendor/plugin/mymodel/update/:id
                
                # Records to display per page
                recordsPerPage: 20

                # Display checkboxes next to each record
                showCheckboxes: true
                
                # Show preview image
                # "previewFrom" must be an attachment field
                showPreview: false
                previewFrom: featured_files
                
                # Displays a button for further display options (popup)
                showSetup: false
                
                # Show Search Bar
                showSearch: false
                
                # Show Delte Button over each item
                showDelete: false

                # Show buttons, which switch the list display  
                # "views" filters, which sizes are selectable  
                # "defaultView" sets one view type as default  
                showViews: false
                views: [lg, md, sm, xs]
                defaultView: lg
                
                # Batch Uploader - Upload an attachment file and create new model
                # "uploadTo" is the attachment field name
                # "uploadFill" sets the values, the newly created model will be filled with.
                # Keys and values both represent field names [model->field => attachment->field].
                # The model attributes will be filled with attachment attributes.
                showUpload: false
                uploadTo: attachment_files
                uploadFill: 
                    name: file_name
                    slug: file_name
                
                # Header partial
                # Insert a partial html file. It will be relative to our controller.
                # So '$this' inside the partial will return the controller, not the widget.
                headerPartial: false

oc-tileable-plugin's People

Contributors

blubcow avatar gergo85 avatar keiosweb avatar triasrahman avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.