search

jrief / djangocms-cascade

Build Single Page Applications using the Django-CMS plugin system
MIT License
165 stars 85 forks source link

Clipboard library groups #376

Open jrief opened 4 years ago

haricot commented 4 years ago

i report issue with redis and cache SEKIZAI : ':1:SEKIZAI_CONTENT_HOLDER'

  File "/virtualenvs/my-shop-guMgNwqw-py3.8/src/djangocms-cascade/cmsplugin_cascade/templatetags/cascade_tags.py", line 70, in render_tag
    SEKIZAI_CONTENT_HOLDER = cache.get_or_set(sekizai_context_key, context.get(sekizai_context_key))
  File "/virtualenvs/my-shop-guMgNwqw-py3.8/lib/python3.8/site-packages/redis_cache/backends/base.py", line 30, in wrapped
    return method(self, client, key, *args, **kwargs)
  File "/virtualenvs/my-shop-guMgNwqw-py3.8/lib/python3.8/site-packages/redis_cache/backends/base.py", line 433, in get_or_set
    raise Exception("Must pass in a callable")
Exception: Must pass in a callable
[2020-04-12 13:35:26,649 basehttp] ERROR: "GET /en/admin/cms/page/plugin/cascade_clipboard_plugin/import-plugins/?placeholder=1&language=en&cms_path=/en/ HTTP/1.1" 500 49459
Variable | Value
-- | --
client | Redis<ConnectionPool<Connection<host=localhost,port=6379,db=1>>>
func | None
key | ':1:SEKIZAI_CONTENT_HOLDER'
lock_timeout | None
self | <redis_cache.backends.single.RedisCache object at 0x7f196843c8e0>
stale_cache_timeout | None
timeout | <object object at 0x7f1970f3f2c0>
haricot commented 4 years ago

This only happens when we are in django-shop in the detail views of smartphone or smartcard without redis, we have the relative same error.

  File "/virtualenvs/my-shop-guMgNwqw-py3.8/lib/python3.8/site-packages/classytags/core.py", line 154, in render
    return self.render_tag(context, **kwargs)
  File "/virtualenvs/my-shop-guMgNwqw-py3.8/src/djangocms-cascade/cmsplugin_cascade/templatetags/cascade_tags.py", line 73, in render_tag
    context[sekizai_context_key][name] = SEKIZAI_CONTENT_HOLDER[name]
  File "/virtualenvs/my-shop-guMgNwqw-py3.8/lib/python3.8/site-packages/django/template/context.py", line 83, in __getitem__
    raise KeyError(key)
KeyError: 'SEKIZAI_CONTENT_HOLDER'
Variable | Value
-- | --
d | {'False': False, 'None': None, 'True': True}
key | 'SEKIZAI_CONTENT_HOLDER'
self | [{'True': True, 'False': False, 'None': None}, {'widget': {'name': 'clipboard', 'is_hidden': False, 'required': False, 'value': [''], 'attrs': {'placeholder_ref_id': '3', 'language': 'en', 'count_target': 0, 'view_breakdown': 'lg', 'id': 'id_clipboard'}, 'template_name': 'cascade/admin/widgets/clipboard.html', 'optgroups': [(None, [{'name': 'clipboard', 'value': 'Demo', 'label': 'Demo', 'selected': False, 'index': '0', 'attrs': {}, 'type': 'select', 'template_name': 'django/forms/widgets/select_option.html', 'wrap_label': True}], 0)]}, 'request': <WSGIRequest: GET '/en/admin/cms/page/plugin/cascade_clipboard_plugin/import-plugins/?placeholder=3&language=en&cms_path=/en/catalog/smart-cards/sdhc-card
haricot commented 4 years ago

Also I have just seen that the current json demo clipboards are not up to date for fallback, some information is missing concerning the old images. I will correct this.

haricot commented 4 years ago

With Redis, clipboard import does not work with any of the URLs. raise Exception("Must pass in a callable") (my feeling is that it's hard, it's CACHE everywhere.)

haricot commented 4 years ago

Perhaps the best would be to have a special templatetag for "stride clipboard" to restrict cache cases.

haricot commented 4 years ago

I realize that the forms use django.forms.renderers.DjangoTemplates (default) and it's complicated to use django.forms.renderers.TemplatesSetting(Form.default_renderer = TemplatesSetting) if it is finally we manage to make it work why not otherwise we should use a view instead of form.ChoiceField to have the rendering of Templates with context_processor and to be able to use the TemplateTag sekizai_tags.

haricot commented 4 years ago

In fact, it was enough to overload the template and add sekizai_tag in admin/cms/page/plugin/change_form.html.

haricot commented 4 years ago

I think I found an approach that works in any case via the rendering of the manual form. I'm going do to another branch because this one is very messy.

haricot commented 4 years ago

I realize that the fallback solutions are not exact at all, I will try to remedy them, sorry.

haricot commented 4 years ago

Demo with django-SHOP, django-angluar and redis: Peek 22-04-2020 14-41-compress

With clipboard:

{
    "plugins": [
        [
            "BootstrapContainerPlugin",
            {
                "glossary": {
                    "hide_plugin": false,
                    "breakpoints": [
                        "xs",
                        "sm",
                        "md",
                        "lg",
                        "xl"
                    ],
                    "fluid": false
                },
                "pk": 2258
            },
            [
                [
                    "BootstrapRowPlugin",
                    {
                        "glossary": {
                            "hide_plugin": false,
                            "padding_xs": "",
                            "padding_sm": "",
                            "padding_md": "",
                            "padding_lg": "",
                            "padding_xl": ""
                        },
                        "pk": 2259
                    },
                    [
                        [
                            "BootstrapColumnPlugin",
                            {
                                "glossary": {
                                    "xs-column-width": "col"
                                },
                                "pk": 2260
                            },
                            [
                                [
                                    "BootstrapImagePlugin",
                                    {
                                        "glossary": {
                                            "hide_plugin": false,
                                            "product": null,
                                            "link_type": "",
                                            "cms_page": null,
                                            "section": "",
                                            "download_file": null,
                                            "ext_url": "",
                                            "mail_to": "",
                                            "link_target": "",
                                            "link_title": "",
                                            "phone_number": "",
                                            "image_shapes": [
                                                "img-fluid"
                                            ],
                                            "image_width_responsive": "50%",
                                            "image_width_fixed": "",
                                            "image_height": "",
                                            "resize_options": [
                                                "subject_location",
                                                "high_resolution"
                                            ],
                                            "image_alignment": "",
                                            "image_file": {
                                                "model": "filer.image",
                                                "pk": 290
                                            },
                                            "image_title": "",
                                            "alt_tag": "",
                                            "image_properties": {
                                                "width": 1367,
                                                "height": 344,
                                                "exif_orientation": 1
                                            },
                                            "column_bounds": {
                                                "min": 106.66666666666667,
                                                "max": 380.0
                                            },
                                            "media_queries": {
                                                "xs": "(max-width: 575.98px) 190.67px",
                                                "sm": "(min-width: 576px) and (max-width: 767.98px) 180.00px",
                                                "md": "(min-width: 768px) and (max-width: 991.98px) 240.00px",
                                                "lg": "(min-width: 992px) and (max-width: 1199.98px) 320.00px",
                                                "xl": "(min-width: 1200px) 380.00px"
                                            }
                                        },
                                        "pk": 2263
                                    },
                                    []
                                ],
                                [
                                    "BootstrapButtonPlugin",
                                    {
                                        "glossary": {
                                            "hide_plugin": false,
                                            "float_xs": "",
                                            "float_sm": "",
                                            "float_md": "",
                                            "float_lg": "",
                                            "float_xl": "",
                                            "render_template": "shop/button.html",
                                            "product": null,
                                            "link_type": "",
                                            "cms_page": null,
                                            "section": "",
                                            "download_file": null,
                                            "ext_url": "",
                                            "mail_to": "",
                                            "link_target": "",
                                            "link_title": "",
                                            "phone_number": "",
                                            "icon_font": null,
                                            "symbol": "",
                                            "link_content": "button_test",
                                            "button_type": "btn-primary",
                                            "button_size": "",
                                            "button_options": [],
                                            "icon_align": "icon-right",
                                            "stretched_link": false
                                        },
                                        "pk": 2268
                                    },
                                    []
                                ],
                                [
                                    "BootstrapImagePlugin",
                                    {
                                        "glossary": {
                                            "hide_plugin": false,
                                            "product": null,
                                            "link_type": "",
                                            "cms_page": null,
                                            "section": "",
                                            "download_file": null,
                                            "ext_url": "",
                                            "mail_to": "",
                                            "link_target": "",
                                            "link_title": "",
                                            "phone_number": "",
                                            "image_shapes": [
                                                "img-thumbnail"
                                            ],
                                            "image_width_responsive": "100%",
                                            "image_width_fixed": "",
                                            "image_height": "",
                                            "resize_options": [
                                                "subject_location",
                                                "high_resolution"
                                            ],
                                            "image_alignment": "",
                                            "image_file": {
                                                "model": "filer.image",
                                                "pk": 291
                                            },
                                            "image_title": "",
                                            "alt_tag": "",
                                            "image_properties": {
                                                "width": 1367,
                                                "height": 344,
                                                "exif_orientation": 1
                                            },
                                            "column_bounds": {
                                                "min": 106.66666666666667,
                                                "max": 380.0
                                            },
                                            "media_queries": {
                                                "xs": "(max-width: 575.98px) 190.67px",
                                                "sm": "(min-width: 576px) and (max-width: 767.98px) 180.00px",
                                                "md": "(min-width: 768px) and (max-width: 991.98px) 240.00px",
                                                "lg": "(min-width: 992px) and (max-width: 1199.98px) 320.00px",
                                                "xl": "(min-width: 1200px) 380.00px"
                                            }
                                        },
                                        "pk": 2862
                                    },
                                    []
                                ]
                            ]
                        ],
                        [
                            "BootstrapColumnPlugin",
                            {
                                "glossary": {
                                    "xs-column-width": "col"
                                },
                                "pk": 2261
                            },
                            [
                                [
                                    "BootstrapPicturePlugin",
                                    {
                                        "glossary": {
                                            "hide_plugin": false,
                                            "product": null,
                                            "link_type": "",
                                            "cms_page": null,
                                            "section": "",
                                            "download_file": null,
                                            "ext_url": "",
                                            "mail_to": "",
                                            "link_target": "",
                                            "link_title": "",
                                            "phone_number": "",
                                            "responsive_heights": {
                                                "xs": "20%",
                                                "sm": "20%",
                                                "md": "20%",
                                                "lg": "20%",
                                                "xl": "20%"
                                            },
                                            "responsive_zoom": {
                                                "xs": "0%",
                                                "sm": "0%",
                                                "md": "0%",
                                                "lg": "0%",
                                                "xl": "0%"
                                            },
                                            "resize_options": [
                                                "subject_location",
                                                "high_resolution"
                                            ],
                                            "image_shapes": [
                                                "img-fluid"
                                            ],
                                            "image_file": {
                                                "model": "filer.image",
                                                "pk": 280
                                            },
                                            "image_title": "",
                                            "alt_tag": "",
                                            "image_properties": {
                                                "width": 600,
                                                "height": 450,
                                                "exif_orientation": 1
                                            },
                                            "media_queries": {
                                                "xs": {
                                                    "width": 191,
                                                    "media": "(max-width: 575.98px)"
                                                },
                                                "sm": {
                                                    "width": 180,
                                                    "media": "(min-width: 576px) and (max-width: 767.98px)"
                                                },
                                                "md": {
                                                    "width": 240,
                                                    "media": "(min-width: 768px) and (max-width: 991.98px)"
                                                },
                                                "lg": {
                                                    "width": 320,
                                                    "media": "(min-width: 992px) and (max-width: 1199.98px)"
                                                },
                                                "xl": {
                                                    "width": 380,
                                                    "media": "(min-width: 1200px)"
                                                }
                                            }
                                        },
                                        "pk": 2264
                                    },
                                    []
                                ]
                            ]
                        ],
                        [
                            "BootstrapColumnPlugin",
                            {
                                "glossary": {
                                    "xs-column-width": "col"
                                },
                                "pk": 2262
                            },
                            [
                                [
                                    "BootstrapCarouselPlugin",
                                    {
                                        "glossary": {
                                            "hide_plugin": false,
                                            "margins_xs": "",
                                            "margins_sm": "",
                                            "margins_md": "",
                                            "margins_lg": "",
                                            "margins_xl": "",
                                            "interval": 5,
                                            "options": [
                                                "slide",
                                                "pause",
                                                "wrap"
                                            ],
                                            "container_max_heights": {
                                                "xs": "100px",
                                                "sm": "150px",
                                                "md": "200px",
                                                "lg": "250px",
                                                "xl": "300px"
                                            },
                                            "resize_options": [
                                                "upscale",
                                                "crop",
                                                "subject_location",
                                                "high_resolution"
                                            ]
                                        },
                                        "pk": 2265
                                    },
                                    [
                                        [
                                            "BootstrapCarouselSlidePlugin",
                                            {
                                                "glossary": {
                                                    "hide_plugin": false,
                                                    "image_file": {
                                                        "model": "filer.image",
                                                        "pk": 278
                                                    },
                                                    "image_title": "",
                                                    "alt_tag": "",
                                                    "image_properties": {
                                                        "width": 500,
                                                        "height": 375,
                                                        "exif_orientation": 1
                                                    },
                                                    "resize_options": [
                                                        "upscale",
                                                        "crop",
                                                        "subject_location",
                                                        "high_resolution"
                                                    ],
                                                    "media_queries": {
                                                        "xs": {
                                                            "width": 191,
                                                            "media": "(max-width: 575.98px)"
                                                        },
                                                        "sm": {
                                                            "width": 180,
                                                            "media": "(min-width: 576px) and (max-width: 767.98px)"
                                                        },
                                                        "md": {
                                                            "width": 240,
                                                            "media": "(min-width: 768px) and (max-width: 991.98px)"
                                                        },
                                                        "lg": {
                                                            "width": 320,
                                                            "media": "(min-width: 992px) and (max-width: 1199.98px)"
                                                        },
                                                        "xl": {
                                                            "width": 380,
                                                            "media": "(min-width: 1200px)"
                                                        }
                                                    }
                                                },
                                                "pk": 2266
                                            },
                                            []
                                        ],
                                        [
                                            "BootstrapCarouselSlidePlugin",
                                            {
                                                "glossary": {
                                                    "hide_plugin": false,
                                                    "image_file": {
                                                        "model": "filer.image",
                                                        "pk": 279
                                                    },
                                                    "image_title": "",
                                                    "alt_tag": "",
                                                    "image_properties": {
                                                        "width": 2560,
                                                        "height": 1920,
                                                        "exif_orientation": 1
                                                    },
                                                    "resize_options": [
                                                        "upscale",
                                                        "crop",
                                                        "subject_location",
                                                        "high_resolution"
                                                    ],
                                                    "media_queries": {
                                                        "xs": {
                                                            "width": 191,
                                                            "media": "(max-width: 575.98px)"
                                                        },
                                                        "sm": {
                                                            "width": 180,
                                                            "media": "(min-width: 576px) and (max-width: 767.98px)"
                                                        },
                                                        "md": {
                                                            "width": 240,
                                                            "media": "(min-width: 768px) and (max-width: 991.98px)"
                                                        },
                                                        "lg": {
                                                            "width": 320,
                                                            "media": "(min-width: 992px) and (max-width: 1199.98px)"
                                                        },
                                                        "xl": {
                                                            "width": 380,
                                                            "media": "(min-width: 1200px)"
                                                        }
                                                    }
                                                },
                                                "pk": 2267
                                            },
                                            []
                                        ]
                                    ]
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ],
        [
            "BootstrapContainerPlugin",
            {
                "glossary": {
                    "hide_plugin": false,
                    "breakpoints": [
                        "xs",
                        "sm",
                        "md",
                        "lg",
                        "xl"
                    ],
                    "fluid": false
                },
                "pk": 2269
            },
            [
                [
                    "BootstrapRowPlugin",
                    {
                        "glossary": {
                            "hide_plugin": false,
                            "padding_xs": "",
                            "padding_sm": "",
                            "padding_md": "",
                            "padding_lg": "",
                            "padding_xl": ""
                        },
                        "pk": 2270
                    },
                    [
                        [
                            "BootstrapColumnPlugin",
                            {
                                "glossary": {
                                    "hide_plugin": false,
                                    "xs-column-width": "col",
                                    "sm-column-width": "",
                                    "md-column-width": "",
                                    "lg-column-width": "",
                                    "xl-column-width": "",
                                    "xs-column-offset": "",
                                    "sm-column-offset": "",
                                    "md-column-offset": "",
                                    "lg-column-offset": "",
                                    "xl-column-offset": "",
                                    "xs-column-ordering": "",
                                    "sm-column-ordering": "",
                                    "md-column-ordering": "",
                                    "lg-column-ordering": "",
                                    "xl-column-ordering": "",
                                    "xs-responsive-utils": "",
                                    "sm-responsive-utils": "",
                                    "md-responsive-utils": "",
                                    "lg-responsive-utils": "",
                                    "xl-responsive-utils": ""
                                },
                                "pk": 2277
                            },
                            [
                                [
                                    "BootstrapImagePlugin",
                                    {
                                        "glossary": {
                                            "hide_plugin": false,
                                            "product": null,
                                            "link_type": "",
                                            "cms_page": null,
                                            "section": "",
                                            "download_file": null,
                                            "ext_url": "",
                                            "mail_to": "",
                                            "link_target": "",
                                            "link_title": "",
                                            "phone_number": "",
                                            "image_shapes": [
                                                "img-fluid"
                                            ],
                                            "image_width_responsive": "100%",
                                            "image_width_fixed": "",
                                            "image_height": "",
                                            "resize_options": [
                                                "subject_location",
                                                "high_resolution"
                                            ],
                                            "image_alignment": "",
                                            "image_file": {
                                                "model": "filer.image",
                                                "pk": 284
                                            },
                                            "image_title": "",
                                            "alt_tag": "",
                                            "image_properties": {
                                                "width": 3000,
                                                "height": 1991,
                                                "exif_orientation": 1
                                            },
                                            "column_bounds": {
                                                "min": 320.0,
                                                "max": 1140.0
                                            },
                                            "media_queries": {
                                                "xs": "(max-width: 575.98px) 572.00px",
                                                "sm": "(min-width: 576px) and (max-width: 767.98px) 540.00px",
                                                "md": "(min-width: 768px) and (max-width: 991.98px) 720.00px",
                                                "lg": "(min-width: 992px) and (max-width: 1199.98px) 960.00px",
                                                "xl": "(min-width: 1200px) 1140.00px"
                                            }
                                        },
                                        "pk": 2279
                                    },
                                    []
                                ],
                                [
                                    "TextPlugin",
                                    {
                                        "body": "<p><label for=\"id_image_width_responsive\">Responsive Picture</label></p>",
                                        "pk": 2282
                                    },
                                    []
                                ],
                                [
                                    "BootstrapImagePlugin",
                                    {
                                        "glossary": {
                                            "hide_plugin": false,
                                            "product": null,
                                            "link_type": "",
                                            "cms_page": null,
                                            "section": "",
                                            "download_file": null,
                                            "ext_url": "",
                                            "mail_to": "",
                                            "link_target": "",
                                            "link_title": "",
                                            "phone_number": "",
                                            "image_shapes": [
                                                "img-fluid"
                                            ],
                                            "image_width_responsive": "100%",
                                            "image_width_fixed": "",
                                            "image_height": "",
                                            "resize_options": [
                                                "subject_location",
                                                "high_resolution"
                                            ],
                                            "image_alignment": "",
                                            "image_file": {
                                                "model": "filer.image",
                                                "pk": 285
                                            },
                                            "image_title": "",
                                            "alt_tag": "",
                                            "image_properties": {
                                                "width": 600,
                                                "height": 680,
                                                "exif_orientation": 1
                                            },
                                            "column_bounds": {
                                                "min": 320.0,
                                                "max": 1140.0
                                            },
                                            "media_queries": {
                                                "xs": "(max-width: 575.98px) 572.00px",
                                                "sm": "(min-width: 576px) and (max-width: 767.98px) 540.00px",
                                                "md": "(min-width: 768px) and (max-width: 991.98px) 720.00px",
                                                "lg": "(min-width: 992px) and (max-width: 1199.98px) 960.00px",
                                                "xl": "(min-width: 1200px) 1140.00px"
                                            }
                                        },
                                        "pk": 2612
                                    },
                                    []
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ]
    ]
}
haricot commented 4 years ago

With django-angular in form, i need to add ng-non-bindable if not we can't submit form. Without ng-non-bindable , The view import_clipboad does javascript rendering, which we don't see in the gif demo above.

Peek 22-04-2020 15-14

haricot commented 4 years ago

Is there a trick without using ng-non-bindable? I think add a logic if 'jquery' or 'angular-ui' or ('jquery' and 'angular-ui') in import_plugins_view.

haricot commented 4 years ago

the form I modified does not work as it should, we have to reload the page to see the plugins to import.

 TypeError: e is undefined
bundle.toolbar.min.js:1:346377
    value http://127.0.0.1:8000/static/cms/js/dist/3.7.1/bundle.toolbar.min.js:1
    value http://127.0.0.1:8000/static/cms/js/dist/3.7.1/bundle.toolbar.min.js:1
    <anonyme> http://127.0.0.1:8000/en/admin/cms/page/plugin/cascade_clipboard_plugin/import-plugins/?placeholder=1&language=en&cms_path=/en/:2