[framework] files picker fix and tweak (#3385)

shopsys · Sep 2, 2024 · 653d713 · 653d713
2 parents a4403d1 + d87c91a
commit 653d713
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 81 deletions.
diff --git a/assets/js/admin/components/FileUpload.js b/assets/js/admin/components/FileUpload.js
@@ -75,6 +75,7 @@ export default class FileUpload {
         this.items[id].setLabel(file.name, file.size);
         this.items[id].setName(file.name.split('.').slice(0, -1).join('.'));
         this.$uploadedFiles.append($uploadedFile);
+        (new Register()).registerNewContent($uploadedFile);
     }
 
     createNewUploadedFile () {

diff --git a/assets/js/admin/components/MultiplePicker.js b/assets/js/admin/components/MultiplePicker.js
@@ -46,6 +46,7 @@ export default class MultiplePicker {
         const _this = this;
 
         _this.items.push($item);
+        (new Register()).registerNewContent($item);
         $item.find('.js-picker-item-button-delete').click(() => {
             _this.removeItem($item);
         });

diff --git a/src/Form/Admin/UploadedFile/UploadedFileFormType.php b/src/Form/Admin/UploadedFile/UploadedFileFormType.php
@@ -37,6 +37,10 @@ public function buildForm(FormBuilderInterface $builder, array $options)
         $builder->add('names', LocalizedType::class, [
             'required' => false,
             'label' => t('Names'),
+            'attr' => [
+                'icon' => true,
+                'iconTitle' => t('Name in the corresponding locale must be filled-in in order to display the file on the storefront'),
+            ],
             'entry_options' => [
                 'required' => false,
                 'constraints' => [

diff --git a/src/Form/MultiLocaleBasicFileUploadType.php b/src/Form/MultiLocaleBasicFileUploadType.php
@@ -68,6 +68,11 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                     'entry_type' => LocalizedType::class,
                     'allow_add' => true,
                     'entry_options' => [
+                        'attr' => [
+                            'icon' => true,
+                            'iconTitle' => t('Name in the corresponding locale must be filled-in in order to display the file on the storefront'),
+                            'iconPlacement' => 'right',
+                        ],
                         'label' => '',
                         'entry_options' => [
                             'constraints' => [

diff --git a/src/Form/MultiLocaleFileUploadType.php b/src/Form/MultiLocaleFileUploadType.php
@@ -16,59 +16,36 @@ class MultiLocaleFileUploadType extends AbstractType
      * @param \Symfony\Component\Form\FormBuilderInterface $builder
      * @param array $options
      */
-    public function buildForm(FormBuilderInterface $builder, array $options)
+    public function buildForm(FormBuilderInterface $builder, array $options): void
     {
-        $builder
-            ->add($builder->create('namesIndexedById', CollectionType::class, [
-                'required' => false,
-                'entry_type' => LocalizedType::class,
-                'allow_add' => true,
+        $namesOptions = [
+            'required' => false,
+            'entry_type' => LocalizedType::class,
+            'allow_add' => true,
+            'entry_options' => [
+                'label' => '',
+                'attr' => [
+                    'icon' => true,
+                    'iconTitle' => t(
+                        'Name in the corresponding locale must be filled-in in order to display the file on the storefront',
+                    ),
+                    'iconPlacement' => 'right',
+                ],
                 'entry_options' => [
-                    'label' => '',
-                    'entry_options' => [
-                        'constraints' => [
-                            new Constraints\Length([
-                                'max' => 255,
-                                'maxMessage' => 'Name cannot be longer than {{ limit }} characters',
-                            ]),
-                        ],
+                    'constraints' => [
+                        new Constraints\Length([
+                            'max' => 255,
+                            'maxMessage' => 'Name cannot be longer than {{ limit }} characters',
+                        ]),
                     ],
                 ],
-            ]))->add(
-                $builder->create('names', CollectionType::class, [
-                    'required' => false,
-                    'entry_type' => LocalizedType::class,
-                    'allow_add' => true,
-                    'entry_options' => [
-                        'label' => '',
-                        'entry_options' => [
-                            'constraints' => [
-                                new Constraints\Length([
-                                    'max' => 255,
-                                    'maxMessage' => 'Name cannot be longer than {{ limit }} characters',
-                                ]),
-                            ],
-                        ],
-                    ],
-                ]),
-            )->add(
-                $builder->create('relationsNames', CollectionType::class, [
-                    'required' => false,
-                    'entry_type' => LocalizedType::class,
-                    'allow_add' => true,
-                    'entry_options' => [
-                        'label' => '',
-                        'entry_options' => [
-                            'constraints' => [
-                                new Constraints\Length([
-                                    'max' => 255,
-                                    'maxMessage' => 'Name cannot be longer than {{ limit }} characters',
-                                ]),
-                            ],
-                        ],
-                    ],
-                ]),
-            );
+            ],
+        ];
+
+        $builder
+            ->add($builder->create('namesIndexedById', CollectionType::class, $namesOptions))
+            ->add($builder->create('names', CollectionType::class, $namesOptions))
+            ->add($builder->create('relationsNames', CollectionType::class, $namesOptions));
     }
 
     public function getParent()

diff --git a/src/Resources/translations/messages.cs.po b/src/Resources/translations/messages.cs.po
@@ -2143,6 +2143,9 @@ msgstr "Název"
 msgid "Name %locale%"
 msgstr "Název %locale%"
 
+msgid "Name in the corresponding locale must be filled-in in order to display the file on the storefront"
+msgstr "Pro zobrazení souboru na doméně musí být vyplněn název v odpovídajícím jazyce"
+
 msgid "Name serves only for internal use within the administration"
 msgstr "Název slouží pouze pro interní použití v rámci administrace"
 

diff --git a/src/Resources/translations/messages.en.po b/src/Resources/translations/messages.en.po
@@ -2143,6 +2143,9 @@ msgstr ""
 msgid "Name %locale%"
 msgstr ""
 
+msgid "Name in the corresponding locale must be filled-in in order to display the file on the storefront"
+msgstr ""
+
 msgid "Name serves only for internal use within the administration"
 msgstr ""
 

diff --git a/src/Resources/views/Admin/Form/fileuploadFields.html.twig b/src/Resources/views/Admin/Form/fileuploadFields.html.twig
@@ -47,12 +47,14 @@
             {% do form.orderedFiles.setRendered %}
         {% endif %}
 
-        {% embed "@ShopsysFramework/Admin/Form/filesPicker.html.twig" %}{% endembed %}
-
-        <div class="display-none">
-            {{ form_widget(form.filesToDelete) }}
-        </div>
     {% endif %}
+
+    {% embed "@ShopsysFramework/Admin/Form/filesPicker.html.twig" %}{% endembed %}
+
+    <div class="display-none">
+        {{ form_widget(form.filesToDelete) }}
+    </div>
+
     <div class="form-line{{ disabledField is defined ? ' form-input-disabled form-line--disabled' }}">
         {{ form_errors(form) }}
         {{ form_label(form, label) }}

diff --git a/src/Resources/views/Admin/Form/multiLocaleFileuploadFields.html.twig b/src/Resources/views/Admin/Form/multiLocaleFileuploadFields.html.twig
@@ -56,29 +56,30 @@
             {% do form.orderedFiles.setRendered %}
         {% endif %}
 
-        {% embed "@ShopsysFramework/Admin/Form/filesPicker.html.twig" %}
-            {% block files_picker %}
-                <div
-                        id="{{ form.relations.vars.id }}"
-                        class="js-files-picker"
-                        data-picker-prototype="{{ _self.pickerWidgetItem(null, form.relations.vars.prototype, form.relations.vars.sortable, null, null, null, form.relationsFilenames.vars.prototype, [form.relationsNames.vars.prototype])|e }}"
-                        data-picker-url="{{ form.relations.vars.picker_url }}"
-                >
-                    <div class="list-files__wrap">
-                        <ul class="list-files js-file-upload js-picker-items">
-                            {% for key, formRow in form.relations %}
-                                {{ _self.pickerWidgetItem(form.relations.vars.items[key], formRow, form.relations.vars.sortable, form.relations.vars.item_names[key], form.relations.vars.item_routes[key] ?? null, key, form.relationsFilenames[key], [form.relationsNames[key]]) }}
-                            {% endfor %}
-                        </ul>
-                    </div>
+    {% endif %}
+
+    {% embed "@ShopsysFramework/Admin/Form/filesPicker.html.twig" %}
+        {% block files_picker %}
+            <div
+                    id="{{ form.relations.vars.id }}"
+                    class="js-files-picker"
+                    data-picker-prototype="{{ _self.pickerWidgetItem(null, form.relations.vars.prototype, form.relations.vars.sortable, null, null, null, form.relationsFilenames.vars.prototype, [form.relationsNames.vars.prototype])|e }}"
+                    data-picker-url="{{ form.relations.vars.picker_url }}"
+            >
+                <div class="list-files__wrap">
+                    <ul class="list-files js-file-upload js-picker-items">
+                        {% for key, formRow in form.relations %}
+                            {{ _self.pickerWidgetItem(form.relations.vars.items[key], formRow, form.relations.vars.sortable, form.relations.vars.item_names[key], form.relations.vars.item_routes[key] ?? null, key, form.relationsFilenames[key], [form.relationsNames[key]]) }}
+                        {% endfor %}
+                    </ul>
                 </div>
-            {% endblock %}
-        {% endembed %}
+            </div>
+        {% endblock %}
+    {% endembed %}
 
-        <div class="display-none">
-            {{ form_widget(form.filesToDelete) }}
-        </div>
-    {% endif %}
+    <div class="display-none">
+        {{ form_widget(form.filesToDelete) }}
+    </div>
 
     <div class="form-line{{ disabledField is defined ? ' form-input-disabled form-line--disabled' }}">
         {{ form_errors(form) }}

diff --git a/src/Resources/views/Admin/Form/theme.html.twig b/src/Resources/views/Admin/Form/theme.html.twig
@@ -43,9 +43,13 @@
 {%- endblock localized_row %}
 
 {% block localized_widget -%}
+    {% import _self as self %}
     {% for child in form %}
         {{- form_row(child, { localized: true, locale: child.vars.name}) -}}
     {% endfor %}
+    <div class="margin-top-10">
+        {{ self.icon(form.vars.attr) }}
+    </div>
 {%- endblock localized_widget %}
 
 {% block form_row %}
@@ -67,9 +71,15 @@
 {% endblock form_row %}
 
 {% block localized_form_rows -%}
+    {% import _self as self %}
     {% for child in form %}
         {{- form_row(child, { localized: true, locale: child.vars.name }) -}}
     {% endfor %}
+    <div class="form-line__side">
+        <div class="form-line__item">
+            {{ self.icon(form.vars.attr) }}
+        </div>
+    </div>
 {%- endblock localized_form_rows %}
 
 {% block multidomain_row -%}
@@ -1022,15 +1032,11 @@
 {% endblock number_widget %}
 
 {% block appendix_block %}
+    {% import _self as self %}
     {% if symbolAfterInput is defined %}
         <span class="form-line__item form-line__item--text form-line__item--fixed-width-left">{{ symbolAfterInput }}</span>
     {% endif %}
-    {% if attr.icon is defined %}
-        <i class="svg svg-{{ attr.iconType|default('info') }} in-icon cursor-help form-line__item form-line__item--info js-tooltip"
-            data-toggle="tooltip" data-placement="{{ attr.iconPlacement|default('bottom') }}"
-            title="{{ attr.iconTitle|default('') }}"
-         ></i>
-    {% endif %}
+    {{ self.icon(attr) }}
 {% endblock %}
 
 {% block date_picker_widget %}
@@ -1065,3 +1071,12 @@
         </div>
     {% endif %}
 {% endblock %}
+
+{% macro icon(attr) %}
+    {% if attr.icon is defined %}
+        <i class="svg svg-{{ attr.iconType|default('info') }} in-icon cursor-help form-line__item form-line__item--info js-tooltip"
+           data-toggle="tooltip" data-placement="{{ attr.iconPlacement|default('bottom') }}"
+           title="{{ attr.iconTitle|default('') }}"
+        ></i>
+    {% endif %}
+{% endmacro %}