alchemy-chimera 1.2.2 → 1.2.4

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 1.2.4 (2023-04-20)
+
+* Add document watcher & toolbar manager support
+
+## 1.2.3 (2023-03-10)
+
+* Add support for setting a record preview action per model
+* Fix layout of page actions
+
 ## 1.2.2 (2023-02-26)
 
 * Fix default menu items not being rendered properly

package/assets/stylesheets/chimera/chimera.scss

@@ -172,7 +172,8 @@ body {
 	}
 
 	.page-actions {
-
+		display: flex;
+		gap: 1rem;
 	}
 }
 
@@ -209,6 +210,10 @@ body {
 		display: block;
 		font-size: 1.2rem;
 	}
+
+	> al-widgets-column > [type="header"] h1 {
+		padding-top: 0;
+	}
 }
 
 al-widgets-navigation {
@@ -564,6 +569,17 @@ al-field[mode="inline"] {
 			background: initial;
 		}
 	}
+
+	al-editor-toolbar {
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+
+		[data-area="buttons"] {
+			display: flex;
+			gap: 1rem;
+		}
+	}
 }
 
 al-field {

package/config/routes.js

@@ -58,6 +58,26 @@ chimera_section.add({
 	paths      : '/api/content/sidebar',
 });
 
+alchemy.sputnik.after('base_app', () => {
+
+	let prefixes = Prefix.all();
+	let preview_paths = {
+		'': '/editor/{model}/preview/{pk}',
+	};
+
+	for (let prefix in prefixes) {
+		preview_paths[prefix] = '/editor/{model}/preview/{pk}';
+	}
+
+	// Preview action
+	chimera_section.add({
+		name       : 'Chimera.Editor#preview',
+		methods    : ['get', 'post'],
+		paths      : preview_paths,
+		breadcrumb : 'chimera.editor.{model}.preview.{pk}'
+	});
+});
+
 return
 var chimera_menu;
 

package/controller/00-chimera_controller.js

@@ -13,4 +13,35 @@ let ChimeraController = Function.inherits('Alchemy.Controller', 'Alchemy.Control
 	if (alchemy.plugins.chimera.theme) {
 		this.view_render.setTheme(alchemy.plugins.chimera.theme);
 	}
+});
+
+/**
+ * Do something before the action is executed
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.2.4
+ * @version  1.2.4
+ */
+ChimeraController.setMethod(function beforeAction() {
+	this.set('toolbar_manager', this.toolbar_manager);
+	this.toolbar_manager.queueModelFallback(this.conduit.params.model);
+});
+
+/**
+ * Get this client's toolbar manager
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.2.4
+ * @version  1.2.4
+ *
+ * @return   {Alchemy.Widget.EditorToolbarManager}
+ */
+ChimeraController.enforceProperty(function toolbar_manager(new_value) {
+
+	if (!new_value && this.conduit) {
+		new_value = Classes.Alchemy.Widget.EditorToolbarManager.create(this.conduit);
+		new_value.scenario = 'chimera';
+	}
+
+	return new_value;
 });

package/controller/chimera_editor_controller.js

@@ -12,7 +12,7 @@ const Editor = Function.inherits('Alchemy.Controller.Chimera', 'Editor');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.1
- * @version  1.0.5
+ * @version  1.2.4
  *
  * @param    {String}    title
  */
@@ -39,6 +39,22 @@ Editor.setMethod(function setTitle(title) {
 
 	this.set('page_title', page_title);
 	this.set('window_title', window_title || page_title);
+	this.toolbar_manager.title = page_title;
+});
+
+/**
+ * Set the context document
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.2.4
+ * @version  1.2.4
+ *
+ * @param    {Document}    doc
+ */
+Editor.setMethod(function setContextDocument(doc) {
+	let document_watcher = this.toolbar_manager.setDocument(doc);
+	this.toolbar_manager.setModel(doc.$model_name);
+	document_watcher.addWatcher(this.conduit);
 });
 
 /**
@@ -117,7 +133,7 @@ Editor.setAction(async function add(conduit, model_name) {
 	this.set('widget_config', widget_config);
 	this.setTitle(model.constructor.title + ' Add');
 
-	this.render('chimera/widgets');
+	this.render('chimera/editor/add');
 });
 
 /**
@@ -125,7 +141,7 @@ Editor.setAction(async function add(conduit, model_name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  1.2.2
+ * @version  1.2.4
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -181,10 +197,57 @@ Editor.setAction(async function edit(conduit, model_name, pk_val) {
 
 	widget_config.class_names.push('chimera-editor-widgets');
 
+	if (model.chimera.record_preview) {
+		this.set('add_preview_button', true);
+	}
+
+	this.setContextDocument(record);
+
+	this.set('record_pk', record.$pk);
+	this.set('model_name', model.model_name.toLowerCase());
 	this.set('widget_config', widget_config);
 	this.setTitle(model.constructor.title + ' Edit');
 
-	this.render('chimera/widgets');
+	this.render('chimera/editor/edit');
+});
+
+/**
+ * The preview action
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.2.3
+ * @version  1.2.3
+ *
+ * @param    {Conduit}   conduit
+ * @param    {String}    model_name
+ * @param    {String}    pk_val
+ */
+Editor.setAction(async function preview(conduit, model_name, pk_val) {
+
+	let model = this.getModel(model_name);
+	const action_name = model?.chimera?.record_preview_action;
+
+	if (!action_name) {
+		return conduit.notFound();
+	}
+
+	let record = await model.findByPk(pk_val);
+
+	if (!record) {
+		return conduit.notFound();
+	}
+
+	const controller = Controller.get(model.chimera.record_preview_controller, conduit);
+
+	console.log(conduit.view_render.variables);
+
+	if (!controller) {
+		return conduit.notFound();
+	}
+
+	console.log('URLPARAMS:', controller.view_render?.variables?.__urlparams)
+
+	controller.doAction(action_name, [conduit, record]);
 });
 
 /**

package/lib/chimera_config.js

@@ -7,7 +7,7 @@
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  1.0.0
+ * @version  1.2.3
  *
  * @param    {Model}   ModelClass
  */
@@ -18,6 +18,37 @@ const Config = Function.inherits('Alchemy.Base', 'Alchemy.Chimera', function Con
 
 	// The different default field sets
 	this.field_sets = {};
+
+	// The record preview action
+	this.record_preview = null;
+	this.record_preview_controller = null;
+	this.record_preview_action = null;
+});
+
+/**
+ * Set a record preview
+ *
+ * @deprecated
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.2.3
+ * @version  1.2.3
+ *
+ * @param    {String}   target   The controller#method to use
+ */
+Config.setMethod(function setRecordPreview(target) {
+	this.record_preview = target;
+	this.record_preview_controller = null;
+	this.record_preview_action = null;
+
+	if (target && typeof target == 'string') {
+		let parts = target.split('#');
+
+		if (parts.length == 2) {
+			this.record_preview_controller = parts[0];
+			this.record_preview_action = parts[1];
+		}
+	}
 });
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-chimera",
 	"description": "Chimera plugin for Alchemy MVC",
-	"version": "1.2.2",
+	"version": "1.2.4",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",

package/view/chimera/editor/add.hwk

@@ -0,0 +1,12 @@
+{% include "layouts/chimera_basics" %}
+
+{% block "page-actions" %}
+	
+{% /block %}
+
+{% block "main" %}
+	<al-widgets
+		#context_variables={% context_variables %}
+		#value={% widget_config %}
+	></al-widgets>
+{% /block %}

package/view/chimera/editor/edit.hwk

@@ -0,0 +1,33 @@
+{% include "layouts/chimera_basics" %}
+
+{% block "page-actions" %}
+
+	{% if add_preview_button %}
+		<a
+			!Route="Chimera.Editor#preview"
+			+model={% model_name %}
+			+pk={% record_pk %}
+			class="btn"
+			target="_blank"
+		>
+			<al-icon icon-name="eye"></al-icon>
+			{%t "preview" model=model_name %}
+		</a>
+	{% /if %}
+
+	<a
+		!Route="Chimera.Editor#add"
+		#model={% model_name %}
+		class="btn"
+	>
+		<al-icon icon-name="plus"></al-icon>
+		{%t "new" model=model_name %}
+	</a>
+{% /block %}
+
+{% block "main" %}
+	<al-widgets
+		#context_variables={% context_variables %}
+		#value={% widget_config %}
+	></al-widgets>
+{% /block %}

package/view/chimera/toolbar/create_button.hwk

@@ -0,0 +1,8 @@
+<a
+	!Route="Chimera.Editor#add"
+	#model={% model_name %}
+	class="btn"
+>
+	<al-icon icon-name="plus"></al-icon>
+	{%t "new" model=model_name %}
+</a>

package/view/chimera/toolbar/edit_in_chimera_button.hwk

@@ -0,0 +1,10 @@
+<a
+	!Route="Chimera.Editor#edit"
+	+model={% model_name %}
+	+pk={% record_pk %}
+	class="btn"
+	target="_blank"
+>
+	<al-icon icon-name="pencil"></al-icon>
+	{%t "edit" model=model_name in="backend" %}
+</a>

package/view/chimera/toolbar/preview_button.hwk

@@ -0,0 +1,10 @@
+<a
+	!Route="Chimera.Editor#preview"
+	+model={% model_name %}
+	+pk={% record_pk %}
+	class="btn"
+	target="_blank"
+>
+	<al-icon icon-name="eye"></al-icon>
+	{%t "preview" model=model_name %}
+</a>

package/view/layouts/chimera_body.hwk

@@ -12,9 +12,39 @@
 	</div>
 	<div class="chimera-content">
 		<div class="chimera-page-header">
-			<div class="page-title" data-he-name="page-title"></div>
-			<div class="page-notification" data-he-name="page-notification"></div>
-			<div class="page-actions" data-he-name="page-actions"></div>
+			<div hidden>
+				<div class="page-title" data-he-name="page-title"></div>
+				<div class="page-notification" data-he-name="page-notification"></div>
+				<div class="page-actions" data-he-name="page-actions"></div>
+			</div>
+
+			<al-editor-toolbar
+				#toolbar_manager={% toolbar_manager %}
+			>
+				<div slot="left">
+					<div class="page-title">
+						<span data-toolbar="title"></span>
+					</div>
+				</div>
+
+				<div slot="center">
+					<al-user-avatar-group
+						class="watchers"
+					></al-user-avatar-group>
+				</div>
+
+				<div slot="right">
+					<div data-area="buttons">
+
+					</div>
+				</div>
+			</al-editor-toolbar>
+
+			{#
+				<al-user-avatar
+					#user={% Acl.data %}
+				></al-user-avatar>
+			#}
 		</div>
 		<div data-he-name="main" class="chimera-main">