Initial outlay of ImportExportController
This commit is contained in:
Samuel Georges
parent
095721bd40
commit
334bf8db3c
|
|
@ -0,0 +1,64 @@
|
|||
<?php namespace Backend\Behaviors;
|
||||
|
||||
use Backend\Classes\ControllerBehavior;
|
||||
use League\Csv\Writer;
|
||||
|
||||
/**
|
||||
* Import/Export Controller Behavior
|
||||
* Adds features for importing and exporting data.
|
||||
*
|
||||
* @package october\backend
|
||||
* @author Alexey Bobkov, Samuel Georges
|
||||
*/
|
||||
class ImportExportController extends ControllerBehavior
|
||||
{
|
||||
|
||||
/**
|
||||
* Behavior constructor
|
||||
* @param Backend\Classes\Controller $controller
|
||||
*/
|
||||
public function __construct($controller)
|
||||
{
|
||||
parent::__construct($controller);
|
||||
|
||||
$this->addJs('js/october.importexport.js', 'core');
|
||||
$this->addCss('css/importexport.css', 'core');
|
||||
}
|
||||
|
||||
public function import()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
public function importRender()
|
||||
{
|
||||
return $this->importExportMakePartial('container');
|
||||
}
|
||||
|
||||
public function importRenderUpload()
|
||||
{
|
||||
return $this->importExportMakePartial('import_upload');
|
||||
}
|
||||
|
||||
public function importRenderFields()
|
||||
{
|
||||
return $this->importExportMakePartial('import_fields');
|
||||
}
|
||||
|
||||
/**
|
||||
* Controller accessor for making partials within this behavior.
|
||||
* @param string $partial
|
||||
* @param array $params
|
||||
* @return string Partial contents
|
||||
*/
|
||||
public function importExportMakePartial($partial, $params = [])
|
||||
{
|
||||
$contents = $this->controller->makePartial('import_export_'.$partial, $params + $this->vars, false);
|
||||
if (!$contents) {
|
||||
$contents = $this->makePartial($partial, $params);
|
||||
}
|
||||
|
||||
return $contents;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
.import-behavior ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.import-behavior ul li.placeholder {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.import-behavior ul li.dragged {
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.import-behavior ul.import-file-columns li,
|
||||
.import-behavior ul.import-record-columns li {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.import-behavior ul.import-file-columns li div.import-column-name > span,
|
||||
.import-behavior ul.import-record-columns li div.import-column-name > span,
|
||||
.import-behavior ul.import-file-columns li > span,
|
||||
.import-behavior ul.import-record-columns li > span {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
.import-behavior ul.import-file-columns li:before,
|
||||
.import-behavior ul.import-file-columns li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.import-behavior ul.import-file-columns li:after {
|
||||
clear: both;
|
||||
}
|
||||
.import-behavior ul.import-file-columns div.import-column-name {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.import-behavior ul.import-file-columns ul.import-column-bindings {
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
.import-behavior ul.import-column-bindings {
|
||||
background: #999;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.import-behavior ul.import-column-bindings li {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/*
|
||||
* Scripts for the Import/Export controller behavior.
|
||||
*/
|
||||
+function ($) { "use strict";
|
||||
|
||||
var ImportExportBehavior = function() {
|
||||
|
||||
}
|
||||
|
||||
$.oc.importExportBehavior = new ImportExportBehavior;
|
||||
}(window.jQuery);
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
@import "../../../../assets/less/core/boot.less";
|
||||
|
||||
@color-import-column-bg: #f0f0f0;
|
||||
@color-import-column-border: #ccc;
|
||||
|
||||
.import-behavior {
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li.placeholder {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li.dragged {
|
||||
position: absolute;
|
||||
//opacity: 0.5;
|
||||
z-index: 2000;
|
||||
.box-shadow(0 3px 6px rgba(0,0,0,.075));
|
||||
}
|
||||
}
|
||||
|
||||
ul.import-file-columns,
|
||||
ul.import-record-columns {
|
||||
li {
|
||||
background: @color-import-column-bg;
|
||||
border: 1px solid @color-import-column-border;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
div.import-column-name > span,
|
||||
> span {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.import-file-columns {
|
||||
li {
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
div.import-column-name {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
ul.import-column-bindings {
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.import-column-bindings {
|
||||
background: #999;
|
||||
padding: 5px 5px;
|
||||
li {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="import-behavior">
|
||||
<h3>1. Upload a CSV file</h3>
|
||||
|
||||
<?= $this->importRenderUpload() ?>
|
||||
|
||||
<h3>2. Match fields to the CSV columns</h3>
|
||||
|
||||
<?= $this->importRenderFields() ?>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
File Columns
|
||||
|
||||
<ul class="import-file-columns">
|
||||
<li>
|
||||
<div class="import-column-name">
|
||||
<span>Name</span>
|
||||
</div>
|
||||
<ul class="import-column-bindings">
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="import-column-name">
|
||||
<span>URL Name</span>
|
||||
</div>
|
||||
<ul class="import-column-bindings">
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
Record Columns
|
||||
|
||||
<ul class="import-record-columns">
|
||||
<li><span>SKU</span></li>
|
||||
<li><span>Title</span></li>
|
||||
<li><span>Description</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('ul.import-record-columns, ul.import-column-bindings').sortable({
|
||||
group: 'import-fields',
|
||||
usePlaceholderClone: true
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue