Merge pull request #34 from bitbag-commerce/dev

[Block] Add image preview && validation not blank image

src/Resources/config/routing/block.yml

@@ -2,7 +2,7 @@ bitbag_cms_admin_block_resource:
     resource: |
         alias: bitbag.block
         section: admin
-        templates: SyliusAdminBundle:Crud
+        templates: BitBagCmsPlugin:Block
         except: ['show']
         redirect: update
         grid: bitbag_cms_admin_block
@@ -27,7 +27,7 @@ bitbag_admin_block_create:
         _controller: bitbag.controller.block:createAction
         _sylius:
             section: admin
-            template: SyliusAdminBundle:Crud:create.html.twig
+            template: BitBagCmsPlugin:Block:create.html.twig
             redirect:
                 route: bitbag_admin_block_index
                 parameters: ~

src/Resources/config/validation/Image.yml

@@ -0,0 +1,6 @@
+BitBag\CmsPlugin\Entity\Image:
+    properties:
+        file:
+            - NotBlank:
+                message: 'bitbag.cms.block.image.not_blank'
+                groups: ['bitbag']

src/Resources/config/validation/PageTranslation.yml

@@ -1,7 +1,8 @@
 BitBag\CmsPlugin\Entity\PageTranslation:
     constraints:
         - Symfony\Bridge\Doctrine\Validator\Constraints\UniqueEntity:
-            fields: [slug]
+            fields: [slug, locale]
+            errorPath: slug
             groups: [bitbag]
             message: bitbag.cms.page.slug.unique
     properties:

src/Resources/public/js/bitbag-block-image-preview.js

@@ -0,0 +1,51 @@
+(function ( $ ) {
+    'use strict';
+
+    $.fn.extend({
+        previewUploadedImage: function (root) {
+            $(root + ' input[type="file"]').each(function() {
+                $(this).change(function() {
+                    displayUploadedImage(this);
+                });
+            });
+
+            $(root + ' [data-form-collection="add"]').on('click', function() {
+                var self = $(this);
+
+                setTimeout(function() {
+                    self.parent().find('.column:last-child input[type="file"]').on('change', function() {
+                        displayUploadedImage(this);
+                    });
+                }, 500);
+            });
+        }
+    });
+
+    function displayUploadedImage(input) {
+        if (input.files && input.files[0]) {
+            var reader = new FileReader();
+
+            reader.onload = function (e) {
+                var image = $(input).parent().siblings('.image');
+
+                if (image.length > 0) {
+                    image.attr('src', e.target.result);
+                } else {
+                    var img = $('<img class="ui small bordered image"/>');
+                    img.attr('src', e.target.result);
+                    $(input).parent().before(img);
+                }
+            };
+
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+})( jQuery );
+
+(function($) {
+    $(document).ready(function () {
+        $(document).previewUploadedImage('#bitbag-block-image')
+    });
+})(jQuery);
+
+

src/Resources/translations/validators.de.yml

@@ -3,6 +3,7 @@ bitbag:
         block:
             image:
                 mime_types: Nur PNG und JPEG Dateien sind erlaubt.
+                not_blank: Foto kann nicht leer sein
             code:
                 unique: Es existiert bereits ein Block für diesen Code.
                 not_blank: Code darf nicht leer sein.

src/Resources/translations/validators.en.yml

@@ -3,6 +3,7 @@ bitbag:
         block:
             image:
                 mime_types: Only PNG and JPEG files are allowed.
+                not_blank: Photo can not be empty.
             code:
                 unique: There is an existing block with this code.
                 not_blank: Code can not be blank.

src/Resources/translations/validators.es.yml

@@ -3,6 +3,7 @@ bitbag:
         block:
             image:
                 mime_types: Solo se permiten archivos PNG y JPEG
+                not_blank: La foto no puede estar vacía.
             code:
                 unique: Ya existe un bloque con este código.
                 not_blank: El código no puede ir vacío.

src/Resources/translations/validators.fr.yml

@@ -3,6 +3,7 @@ bitbag:
         block:
             image:
                 mime_types: Seuls les fichiers PNG et JPEG sont autorisés.
+                not_blank: La photo ne peut pas être vide.
             code:
                 unique: Il existe un bloc existant avec ce code.
                 not_blank: Le code ne peut pas être vide.

src/Resources/translations/validators.pl.yml

@@ -3,6 +3,7 @@ bitbag:
         block:
             image:
                 mime_types: Dozwolone są tylko pliki PNG i JPEG.
+                not_blank: Zdjęcie nie może być puste.
             code:
                 unique: Blok o podanym kodzie już istnieje.
                 not_blank: Kod nie może być pusty.

src/Resources/views/Block/Crud/_form.html.twig

@@ -11,7 +11,7 @@
 </div>
 
 <div class="ui one column stackable grid">
-    <div class="column">
+    <div class="column" id="bitbag-block-image">
         {{ translationForm(form.translations, resource) }}
     </div>
 </div>

src/Resources/views/Block/create.html.twig

@@ -0,0 +1,37 @@
+{% extends 'SyliusAdminBundle::layout.html.twig' %}
+
+{% import 'SyliusUiBundle:Macro:headers.html.twig' as headers %}
+
+{% set header = configuration.vars.header|default(metadata.applicationName~'.ui.new_'~metadata.name) %}
+{% set event_prefix = metadata.applicationName ~ '.admin.' ~ metadata.name ~ '.create' %}
+
+{% block title %}{{ parent() }} {{ header|trans }}{% endblock %}
+
+{% form_theme form '@SyliusAdmin/Form/theme.html.twig' %}
+
+{% block content %}
+    {{ sonata_block_render_event(event_prefix ~ '.before_header', {'resource': resource}) }}
+
+    {% include '@SyliusAdmin/Crud/Create/_header.html.twig' %}
+
+    {{ sonata_block_render_event(event_prefix ~ '.after_header', {'resource': resource}) }}
+
+    {% include '@SyliusAdmin/Crud/Create/_content.html.twig' %}
+
+    {{ sonata_block_render_event(event_prefix ~ '.after_content', {'resource': resource}) }}
+{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+
+    {{ sonata_block_render_event(event_prefix ~ '.stylesheets') }}
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+
+    {{ sonata_block_render_event(event_prefix ~ '.javascripts') }}
+
+    <script src="{{ asset('bundles/bitbagcmsplugin/js/bitbag-block-image-preview.js') }}"></script>
+
+{% endblock %}

src/Resources/views/Block/index.html.twig

@@ -0,0 +1,35 @@
+{% extends 'SyliusAdminBundle::layout.html.twig' %}
+
+{% import 'SyliusUiBundle:Macro:headers.html.twig' as headers %}
+
+{% set definition = resources.definition %}
+{% set data = resources.data %}
+{% set event_prefix = metadata.applicationName ~ '.admin.' ~ metadata.name ~ '.index' %}
+
+{% set header = configuration.vars.header|default(metadata.applicationName~'.ui.'~metadata.pluralName) %}
+
+{% block title %}{{ parent() }} {{ header|trans }}{% endblock %}
+
+{% block content %}
+{{ sonata_block_render_event(event_prefix ~ '.before_header', {'resources': resources}) }}
+
+{% include '@SyliusAdmin/Crud/Index/_header.html.twig' %}
+
+{{ sonata_block_render_event(event_prefix ~ '.after_header', {'resources': resources}) }}
+
+{% include '@SyliusAdmin/Crud/Index/_content.html.twig' %}
+
+{{ sonata_block_render_event(event_prefix ~ '.after_content', {'resources': resources}) }}
+{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+
+    {{ sonata_block_render_event(event_prefix ~ '.stylesheets') }}
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+
+    {{ sonata_block_render_event(event_prefix ~ '.javascripts') }}
+{% endblock %}

src/Resources/views/Block/update.html.twig

@@ -0,0 +1,38 @@
+{% extends 'SyliusAdminBundle::layout.html.twig' %}
+
+{% import 'SyliusUiBundle:Macro:headers.html.twig' as headers %}
+{% import 'SyliusUiBundle:Macro:buttons.html.twig' as buttons %}
+
+{% set header = configuration.vars.header|default(metadata.applicationName~'.ui.edit_'~metadata.name) %}
+{% set event_prefix = metadata.applicationName ~ '.admin.' ~ metadata.name ~ '.update' %}
+
+{% block title %}{{ parent() }} {{ header|trans }}{% endblock %}
+
+{% form_theme form '@SyliusAdmin/Form/theme.html.twig' %}
+
+{% block content %}
+{{ sonata_block_render_event(event_prefix ~ '.before_header', {'resource': resource}) }}
+
+{% include '@SyliusAdmin/Crud/Update/_header.html.twig' %}
+
+{{ sonata_block_render_event(event_prefix ~ '.after_header', {'resource': resource}) }}
+
+{% include '@SyliusAdmin/Crud/Update/_content.html.twig' %}
+
+{{ sonata_block_render_event(event_prefix ~ '.after_content', {'resource': resource}) }}
+{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+
+    {{ sonata_block_render_event(event_prefix ~ '.stylesheets') }}
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+
+    {{ sonata_block_render_event(event_prefix ~ '.javascripts') }}
+
+    <script src="{{ asset('bundles/bitbagcmsplugin/js/bitbag-block-image-preview.js') }}"></script>
+
+{% endblock %}