alchemy-chimera 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 1.0.1 (2022-01-28)
+
+* Allow setting a simple menu sidebar in the config
+* Add simple notification after adding/saving
+* Add page & window titles
+* Improve edit buttons
+
 ## 1.0.0 (2021-09-12)
 
 * Use widgets to create the interface

package/assets/scripts/chimera/chimera.js

@@ -0,0 +1,19 @@
+hawkejs.scene.after({
+	type     : 'set',
+	name     : 'page-notification',
+}, function onNotification(element, variables, block) {
+
+	let notification = element.querySelector('.notification');
+
+	if (!notification) {
+		return;
+	}
+
+	setTimeout(() => {
+		notification.classList.add('removing');
+
+		setTimeout(() => {
+			notification.remove();
+		}, 2500);
+	}, 4 * 1000);
+});

package/assets/stylesheets/chimera/chimera.scss

@@ -14,6 +14,10 @@ body {
 	--button-bg-hover-color: #e7e9f2;
 	--button-text-color: #3699FF;
 
+	--notification-bg-color: #4a4e58;
+	--notification-text-color: #f4f5f9;
+	--notification-border-color: #dadee0;
+
 	--color-title: #475466;
 	--color-box-border: #DADEE0;
 	--color-active: #3699FF;
@@ -35,6 +39,8 @@ body {
 	text-align: center;
 	border-radius: 2px;
 	font-weight: 500;
+	cursor: pointer;
+	border: 1px solid;
 
 	&:hover {
 		background-color: var(--button-bg-hover-color);
@@ -156,6 +162,21 @@ alchemy-widgets-navigation {
 	height: 2rem;
 }
 
+.page-notification {
+	.notification {
+		border: 1px solid var(--notification-border-color);
+		background: var(--notification-bg-color);
+		color: var(--notification-text-color);
+		border-radius: 5px;
+		padding: 0.5rem 0.8rem;
+	}
+}
+
+.removing {
+	transition: opacity 2s;
+	opacity: 0;
+}
+
 alchemy-table .aft-column-filters input {
 	@extend .chimera-input-field;
 	width: 100%;
@@ -234,4 +255,19 @@ alchemy-field {
 		border: none;
 		padding: 0;
 	}
+}
+
+.aft-actions {
+	a {
+		color: var(--button-text-color);
+		background-color: var(--button-bg-color);
+		padding: 0.5rem;
+		border-radius: 6px;
+		margin: 0.2rem;
+		display: inline-block;
+
+		&:hover {
+			background-color: var(--button-bg-hover-color);
+		}
+	}
 }

package/controller/chimera_editor_controller.js

@@ -7,12 +7,44 @@
  */
 const Editor = Function.inherits('Alchemy.Controller.Chimera', 'Editor');
 
+/**
+ * Set the title
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.0.1
+ * @version  1.0.1
+ *
+ * @param    {String}    title
+ */
+Editor.setMethod(function setTitle(title) {
+
+	let window_title,
+	    page_title;
+
+	if (alchemy.plugins.chimera.title) {
+		window_title = alchemy.plugins.chimera.title || '';
+
+		if (title && window_title) {
+			window_title += ' | ';
+		}
+	}
+
+	if (title) {
+		window_title += title;
+	}
+
+	page_title = title;
+
+	this.set('page_title', page_title);
+	this.set('window_title', window_title || page_title);
+});
+
 /**
  * The index action
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  1.0.0
+ * @version  1.0.1
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -23,7 +55,8 @@ Editor.setAction(function index(conduit, model_name) {
 
 	let widget_config = model.chimera.getWidgetConfig('index', conduit);
 
-	this.set('page_title', model_name.titleize());
+	this.setTitle(model_name.titleize());
+
 	this.set('model_name', model_name);
 
 	this.set('widget_config', widget_config);
@@ -36,7 +69,7 @@ Editor.setAction(function index(conduit, model_name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  1.0.0
+ * @version  1.0.1
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -56,7 +89,11 @@ Editor.setAction(async function add(conduit, model_name) {
 		try {
 			await record.save();
 
-			let url = alchemy.routeUrl('Chimera.Editor#edit', {model: model_name, pk: record.$pk});
+			let url = alchemy.routeUrl('Chimera.Editor#edit', {
+				model: model_name,
+				pk: record.$pk,
+				message: 'added'
+			});
 
 			return conduit.redirect(url);
 		} catch (err) {
@@ -78,6 +115,7 @@ Editor.setAction(async function add(conduit, model_name) {
 	widget_config.class_names.push('chimera-editor-widgets');
 
 	this.set('widget_config', widget_config);
+	this.setTitle(model.constructor.title + ' Add');
 
 	this.render('chimera/widgets');
 });
@@ -87,7 +125,7 @@ Editor.setAction(async function add(conduit, model_name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  1.0.0
+ * @version  1.0.1
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -100,6 +138,7 @@ Editor.setAction(async function edit(conduit, model_name, pk_val) {
 	model.translateItems = false;
 
 	let record = await model.findByPk(pk_val);
+	let message_type = conduit.param('message');
 
 	this.set('context_variables', {
 		record : record
@@ -109,10 +148,9 @@ Editor.setAction(async function edit(conduit, model_name, pk_val) {
 
 		Object.assign(record, conduit.body[model_name]);
 
-		console.log('Set data record of', record, conduit.body);
-
 		try {
 			await record.save();
+			message_type = 'saved';
 		} catch (err) {
 			// @TODO: set this in the context somehow?
 			this.set('record_violations', err);
@@ -125,9 +163,18 @@ Editor.setAction(async function edit(conduit, model_name, pk_val) {
 		widget_config.class_names = [];
 	}
 
+	if (message_type) {
+		if (message_type == 'added') {
+			this.set('message', 'Record has been added');
+		} else if (message_type == 'saved') {
+			this.set('message', 'Record has been saved');
+		}
+	}
+
 	widget_config.class_names.push('chimera-editor-widgets');
 
 	this.set('widget_config', widget_config);
+	this.setTitle(model.constructor.title + ' Edit');
 
 	this.render('chimera/widgets');
 });

package/controller/chimera_static_controller.js

@@ -26,7 +26,7 @@ ChimeraStatic.setAction(function dashboard(conduit) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.0
- * @version  1.0.0
+ * @version  1.0.1
  *
  * @param    {Conduit}   conduit
  */
@@ -35,20 +35,71 @@ ChimeraStatic.setAction(function sidebar(conduit) {
 	let widgets = [],
 	    config;
 
-	let models = Model.getAllChildren();
-	models.sortByPath(1, 'model_name');
-
-	for (let model of models) {
-		widgets.push({
-			type   : 'link',
-			config : {
-				route : 'Chimera.Editor#index',
-				parameters: [
-					{name: 'model', value: model.type_name},
-				],
-				content: model.title
+	if (Array.isArray(alchemy.plugins.chimera.sidebar_menu)) {
+
+		for (let entry of alchemy.plugins.chimera.sidebar_menu) {
+
+			if (!entry.model && !entry.href) {
+				continue;
+			}
+
+			let model,
+			    title = entry.title;
+
+			if (entry.model) {
+				model = Model.get(entry.model);
+			}
+
+			if (!title) {
+				if (model) {
+					title = model.constructor.title;
+				}
+
+				if (!title && entry.href) {
+					title = entry.href;
+				}
 			}
-		});
+
+			if (entry.href) {
+				widgets.push({
+					type   : 'link',
+					config : {
+						href   : entry.href,
+						content: title
+					}
+				});
+			} else {
+
+				widgets.push({
+					type   : 'link',
+					config : {
+						route : 'Chimera.Editor#index',
+						parameters: [
+							{name: 'model', value: model.constructor.type_name},
+						],
+						content: title
+					}
+				});
+			}
+		}
+
+	} else {
+
+		let models = Model.getAllChildren();
+		models.sortByPath(1, 'model_name');
+
+		for (let model of models) {
+			widgets.push({
+				type   : 'link',
+				config : {
+					route : 'Chimera.Editor#index',
+					parameters: [
+						{name: 'model', value: model.type_name},
+					],
+					content: model.title
+				}
+			});
+		}
 	}
 
 	config = [

package/lib/chimera_config.js

@@ -89,10 +89,13 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 		let field;
 
 		for (field of fieldset) {
+
 			field_widgets.push({
 				type   : 'alchemy_field',
 				config : {
-					field : field.name,
+					field           : field.name,
+					view            : field.options.view,
+					widget_settings : field.options.widget_settings || {},
 				}
 			});
 		}
@@ -100,7 +103,7 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 		field_widgets.push({
 			type   : 'html',
 			config : {
-				html : '<button type="submit">Submit</button>'
+				html : '<button class="btn btn-submit" type="submit">Save</button>'
 			}
 		});
 
@@ -159,7 +162,5 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 
 	result.widgets = widgets;
 
-	console.log('Widget config', result, 'for', this);
-
 	return result;
 });

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-chimera",
 	"description": "Chimera plugin for Alchemy MVC",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -11,13 +11,13 @@
 	],
 	"repository": "11ways/alchemy-chimera",
 	"peerDependencies": {
-		"alchemy-acl"  : "~0.6.0",
+		"alchemy-acl"  : "~0.7.0",
 		"alchemy-menu" : "~0.6.0",
 		"alchemymvc"   : "~1.1.0",
 		"alchemy-widget": "~0.1.0"
 	},
 	"license": "MIT",
 	"engines": {
-		"node" : ">=10.21.0"
+		"node" : ">=12.0.0"
 	}
 }

package/view/chimera/widgets.hwk

@@ -1,4 +1,4 @@
-{% extend "layouts/chimera_body" %}
+{% include "layouts/chimera_basics" %}
 
 {% block "main" %}
 <alchemy-widgets

package/view/layouts/chimera_base.hwk

@@ -3,6 +3,7 @@
 	<head>
 		<!-- This puts in all the required styles, scripts, ... -->
 		<% this.foundation({protoblast: true}) %>
+		<% script('chimera/chimera') %>
 	</head>
 	<body>
 		<!-- This is a block you can assign content to -->

package/view/layouts/chimera_basics.hwk

@@ -1,4 +1,15 @@
 {% extend "layouts/chimera_body" %}
 
-<% console.log('Pagetitle:', page_title) %>
-{% block "page-title" %}{{ page_title }}{% /block %}
+{% if page_title %}
+	{% block "page-title" %}{{ page_title }}{% /block %}
+{% /if %}
+
+{% if window_title %}
+	<% set_title(window_title) %>
+{% elseif page_title %}
+	<% set_title(page_title) %>
+{% /if %}
+
+{% if message %}
+	{% block "page-notification" %}<span class="notification">{{ message }}</span>{% /block %}
+{% /if %}

package/view/layouts/chimera_body.hwk

@@ -6,13 +6,14 @@
 <div class="chimera-wrapper">
 	<div class="chimera-sidebar">
 		<div class="chimera-page-header">
-			Test
+			
 		</div>
 		<%= Alchemy.segment('Chimera.Static#sidebar') %>
 	</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>
 		<div data-he-name="main" class="chimera-main">