Content form, translation widget

TODO.rst

@@ -10,3 +10,4 @@ TODO
 - Treibstoff styles.
 - Check if we can retrieve Bootstrap sources other than including in this repo
   for development.
+- Use overlay edit form in example table edit action

examples/cone.example/src/cone/example/browser/__init__.py

@@ -1,10 +1,28 @@
+from cone.app.browser.authoring import ContentAddForm
+from cone.app.browser.authoring import ContentEditForm
+from cone.app.browser.form import AddFormTarget
+from cone.app.browser.form import EditFormTarget
+from cone.app.browser.form import Form
 from cone.app.browser.layout import ProtectedContentTile
+from cone.app.browser.utils import choose_name
+from cone.app.utils import add_creation_metadata
+from cone.app.utils import update_creation_metadata
 from cone.example.model import EntryFolder
 from cone.example.model import Folder
 from cone.example.model import Item
+from cone.example.model import Translation
 from cone.tile import tile
-import webresource as wr
+from cone.tile import tile
+from node.utils import UNSET
+from plumber import plumbing
+from pyramid.i18n import TranslationStringFactory
+from yafowil.base import factory
+from yafowil.persistence import write_mapping_writer
 import os
+import webresource as wr
+
+
+_ = TranslationStringFactory('cone.example')
 
 
 resources_dir = os.path.join(os.path.dirname(__file__), 'static')
@@ -36,5 +54,92 @@ def configure_resources(config, settings):
       path='templates/view.pt',
       interface=Item,
       permission='login')
-class DefaultContent(ProtectedContentTile):
+class ViewContent(ProtectedContentTile):
     pass
+
+
+class ExampleForm(Form):
+
+    def prepare(self):
+        self.form = form = factory(
+            'form',
+            name='contentform',
+            props={
+                'action': self.form_action,
+                'persist_writer': write_mapping_writer
+            })
+        form['title'] = factory(
+            'field:label:help:error:translation:text',
+            value=self.model.attrs.get('title', UNSET),
+            props={
+                'factory': Translation,
+                'label': _('title', default='Title'),
+                'help': _('title_description', default='Enter a title'),
+                'required': _('title_required', default='Title is mandatory')
+            })
+        form['description'] = factory(
+            'field:label:help:error:translation:textarea',
+            value=self.model.attrs.get('description', UNSET),
+            props={
+                'factory': Translation,
+                'label': _('description', default='Description'),
+                'help': _(
+                    'description_description',
+                    default='Enter a description'
+                ),
+                'rows': 4
+            })
+        form['save'] = factory(
+            'submit',
+            props={
+                'action': 'save',
+                'expression': True,
+                'handler': self.save,
+                'next': self.next,
+                'label': _('save', default='Save')
+            })
+        form['cancel'] = factory(
+            'submit',
+            props={
+                'action': 'cancel',
+                'expression': True,
+                'skip': True,
+                'next': self.next,
+                'label': _('cancel', default='Cancel')
+            })
+
+    def save(self, widget, data):
+        data.write(self.model.attrs)
+
+
+@plumbing(AddFormTarget)
+class ExampleAddForm(ExampleForm):
+
+    def save(self, widget, data):
+        add_creation_metadata(self.request, self.model.attrs)
+        super(ExampleAddForm, self).save(widget, data)
+        parent = self.model.parent
+        parent[choose_name(parent, self.model.metadata.title)] = self.model
+
+
+@plumbing(EditFormTarget)
+class ExampleEditForm(ExampleForm):
+
+    def save(self, widget, data):
+        update_creation_metadata(self.request, self.model.attrs)
+        super(ExampleEditForm, self).save(widget, data)
+
+
+@tile(name='addform', interface=Folder, permission='add')
+@tile(name='addform', interface=Item, permission='add')
+@plumbing(ContentAddForm)
+class ExampleContentAddForm(ExampleAddForm):
+    ...
+
+
+@tile(name='editform', interface=EntryFolder, permission='edit')
+@tile(name='editform', interface=Folder, permission='edit')
+@tile(name='editform', interface=Item, permission='edit')
+@plumbing(ContentEditForm)
+class ExampleContentEditForm(ExampleEditForm):
+    ...

examples/cone.example/src/cone/example/locale/cone.example.pot

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE 1.0\n"
-"POT-Creation-Date: 2024-05-26 07:48+0200\n"
+"POT-Creation-Date: 2024-05-26 08:17+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -17,13 +17,13 @@ msgstr ""
 "Generated-By: Lingua 4.15.0\n"
 
 #. Default: Folder
-#: ./examples/cone.example/src/cone/example/model.py:146
-#: ./examples/cone.example/src/cone/example/model.py:183
+#: ./examples/cone.example/src/cone/example/model.py:113
+#: ./examples/cone.example/src/cone/example/model.py:125
 msgid "folder"
 msgstr ""
 
 #. Default: Item
-#: ./examples/cone.example/src/cone/example/model.py:198
+#: ./examples/cone.example/src/cone/example/model.py:140
 msgid "item"
 msgstr ""
 

examples/cone.example/src/cone/example/locale/de/LC_MESSAGES/cone.example.po

@@ -5,7 +5,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE 1.0\n"
-"POT-Creation-Date: 2024-05-26 07:48+0200\n"
+"POT-Creation-Date: 2024-05-26 08:17+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -16,13 +16,13 @@ msgstr ""
 "Generated-By: Lingua 4.15.0\n"
 
 #. Default: Folder
-#: examples/cone.example/src/cone/example/model.py:146
-#: examples/cone.example/src/cone/example/model.py:183
+#: examples/cone.example/src/cone/example/model.py:113
+#: examples/cone.example/src/cone/example/model.py:125
 msgid "folder"
 msgstr "Ordner"
 
 #. Default: Item
-#: examples/cone.example/src/cone/example/model.py:198
+#: examples/cone.example/src/cone/example/model.py:140
 msgid "item"
 msgstr "Object"
 

examples/cone.example/src/cone/example/locale/en/LC_MESSAGES/cone.example.po

@@ -5,7 +5,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE 1.0\n"
-"POT-Creation-Date: 2024-05-26 07:48+0200\n"
+"POT-Creation-Date: 2024-05-26 08:17+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -16,13 +16,13 @@ msgstr ""
 "Generated-By: Lingua 4.15.0\n"
 
 #. Default: Folder
-#: examples/cone.example/src/cone/example/model.py:146
-#: examples/cone.example/src/cone/example/model.py:183
+#: examples/cone.example/src/cone/example/model.py:113
+#: examples/cone.example/src/cone/example/model.py:125
 msgid "folder"
 msgstr "Folder"
 
 #. Default: Item
-#: examples/cone.example/src/cone/example/model.py:198
+#: examples/cone.example/src/cone/example/model.py:140
 msgid "item"
 msgstr "Item"
 

examples/cone.example/src/cone/example/model.py

@@ -1,7 +1,6 @@
 from cone.app.interfaces import INavigationLeaf
 from cone.app.model import AppNode
 from cone.app.model import CopySupport
-from cone.app.model import FactoryNode
 from cone.app.model import Metadata
 from cone.app.model import node_info
 from cone.app.model import Properties

js/src/translation.js

@@ -9,24 +9,25 @@ export class Translation {
     }
 
     constructor(nav_elem) {
+        $('div.invalid-feedback', nav_elem.parent()).show();
         this.nav_elem = nav_elem;
         this.fields_elem = nav_elem.next();
         this.show_lang_handle = this.show_lang_handle.bind(this);
         $('li > a', nav_elem).on('click', this.show_lang_handle);
         if ($('li.error', nav_elem).length) {
-            $('li.error:first > a', nav_elem).click();
+            $('li.error:first > a', nav_elem).trigger('click');
         } else {
-            $('li.active > a', nav_elem).click();
+            $('li > a.active', nav_elem).trigger('click');
         }
         this.fields_elem.show();
     }
 
     show_lang_handle(evt) {
         evt.preventDefault();
-        this.nav_elem.children().removeClass('active');
+        $('li > a', this.nav_elem).removeClass('active');
         this.fields_elem.children().hide();
         let elem = $(evt.currentTarget);
-        elem.parent().addClass('active');
+        elem.addClass('active');
         $(elem.attr('href'), this.fields_elem).show();
     }
 }

src/cone/app/__init__.py

@@ -310,7 +310,7 @@ def main(global_config, **settings):
     # blueprint rendering. in future versions, tests should be adopted to
     # run against adopted blueprint rendering
     if not os.environ.get('TESTRUN_MARKER'):  # pragma: no cover
-        configure_factory('bootstrap3')
+        configure_factory('bootstrap5')
     config.configure_default_resource_includes()
 
     # scan browser package

src/cone/app/browser/static/cone/cone.app.js

@@ -920,23 +920,24 @@ var cone = (function (exports, $, ts) {
             });
         }
         constructor(nav_elem) {
+            $('div.invalid-feedback', nav_elem.parent()).show();
             this.nav_elem = nav_elem;
             this.fields_elem = nav_elem.next();
             this.show_lang_handle = this.show_lang_handle.bind(this);
             $('li > a', nav_elem).on('click', this.show_lang_handle);
             if ($('li.error', nav_elem).length) {
-                $('li.error:first > a', nav_elem).click();
+                $('li.error:first > a', nav_elem).trigger('click');
             } else {
-                $('li.active > a', nav_elem).click();
+                $('li > a.active', nav_elem).trigger('click');
             }
             this.fields_elem.show();
         }
         show_lang_handle(evt) {
             evt.preventDefault();
-            this.nav_elem.children().removeClass('active');
+            $('li > a', this.nav_elem).removeClass('active');
             this.fields_elem.children().hide();
             let elem = $(evt.currentTarget);
-            elem.parent().addClass('active');
+            elem.addClass('active');
             $(elem.attr('href'), this.fields_elem).show();
         }
     }

src/cone/app/browser/templates/content_form.pt

@@ -3,20 +3,20 @@
   <tal:contextmenu condition="context.show_contextmenu"
                    replace="structure context.rendered_contextmenu" />
 
-  <div class="panel panel-default">
+  <div class="card mt-3">
 
-    <div class="panel-heading content-heading"
-         tal:condition="context.show_heading">
+    <div class="card-body">
 
-      <h4 class="pull-left">
+      <h4 class="card-title mb-3"
+          tal:condition="context.show_heading">
         <span class="label label-primary"
               tal:content="context.form_heading">Title</span>
       </h4>
 
-    </div>
+      <div>
+        <tal:form replace="structure context.rendered_form" />
+      </div>
 
-    <div class="panel-body">
-      <tal:form replace="structure context.rendered_form" />
     </div>
 
   </div>

src/cone/app/browser/translation.py

@@ -56,16 +56,24 @@ def translation_tabs_renderer(widget, data):
         lang_text = lang.upper()
         if has_errors:
             lang_text = u'* {}'.format(lang_text)
-        a = data.tag('a', lang_text, href=u'#translation-{}-{}'.format(
-            widget.dottedpath.replace(u'.', u'-'),
-            lang
-        ))
-        li_css = ['active'] if idx == 0 else []
+        a_css = ['nav-link', 'py-0']
+        if idx == 0:
+            a_css.append('active')
+        a = data.tag(
+            'a',
+            lang_text,
+            href=u'#translation-{}-{}'.format(
+                widget.dottedpath.replace(u'.', u'-'),
+                lang
+            ),
+            class_=' '.join(a_css)
+        )
+        li_css = ['nav-item']
         if has_errors:
             li_css.append('error')
         li_css = ' '.join(li_css) if li_css else None
         li.append(data.tag('li', a, class_=li_css))
-    return data.tag('ul', *li, class_='nav nav-pills translation-nav')
+    return data.tag('ul', *li, class_='nav nav-pills mb-2 translation-nav')
 
 
 factory.register(