alchemy-chimera 1.0.1 → 1.0.4

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 1.0.4 (2022-05-31)
+
+* Add delete page
+
+## 1.0.3 (2022-03-16)
+
+* Make table filtering case insensitive
+
+## 1.0.2 (2022-02-20)
+
+* Improve editor styling
+* Put editor errors in the Widget context
+* Add TOC to editor
+* Make sidebar sticky
+
 ## 1.0.1 (2022-01-28)
 
 * Allow setting a simple menu sidebar in the config

package/assets/stylesheets/chimera/chimera.scss

@@ -10,6 +10,7 @@ body {
 	--text-color: #475466;
 	--main-bg-color: #ebedf0;
 	--main-border-color: #dadee0;
+	
 	--button-bg-color: #F4F5F9;
 	--button-bg-hover-color: #e7e9f2;
 	--button-text-color: #3699FF;
@@ -31,20 +32,95 @@ body {
 }
 
 .btn {
+	//--button-bg-color: var(--context-background-color, --button-bg-color);
+	--local-text-color: var(--context-color, var(--button-text-color));
+	--local-border-color: var(--context-border-color, var(--button-border-color));
+
 	background-color: var(--button-bg-color);
+	color: var(--local-text-color);
+	border: 1px solid;
+	border-color: var(--local-border-color);
+
 	text-decoration: none;
-	color: var(--button-text-color);
 	line-height: 2rem;
 	min-width: 10rem;
 	text-align: center;
 	border-radius: 2px;
 	font-weight: 500;
 	cursor: pointer;
-	border: 1px solid;
+	padding: 0.4rem 0.7rem;
+
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.2rem;
 
 	&:hover {
 		background-color: var(--button-bg-hover-color);
+		//filter: brightness(1.05);
 	}
+
+	al-ico {
+		margin-right: 4px;
+	}
+}
+
+.primary {
+	--context-color: #084298;
+	--context-background-color: #cfe2ff;
+	--context-border-color: #b6d4fe;
+}
+
+.secondary {
+	--context-color: #41464b;
+	--context-background-color: #e2e3e5;
+	--context-border-color: #d3d6d8;
+}
+
+.success {
+	--context-color: #0f5132;
+	--context-background-color: #d1e7dd;
+	--context-border-color: #badbcc;
+}
+
+.danger,
+.error {
+	--context-color: #842029;
+	--context-background-color: #f8d7da;
+	--context-border-color: #f5c2c7;
+}
+
+.warning {
+	--context-color: #664d03;
+	--context-background-color: #fff3cd;
+	--context-border-color: #ffecb5;
+}
+
+.info {
+	--context-color: #055160;
+	--context-background-color: #cff4fc;
+	--context-border-color: #b6effb;
+}
+
+.light {
+	--context-color: #636464;
+	--context-background-color: #fefefe;
+	--context-border-color: #fdfdfe;
+}
+
+.dark {
+	--context-color: #141619;
+	--context-background-color: #d3d3d4;
+	--context-border-color: #bcbebf;
+}
+
+.alert-box {
+	color: var(--context-color);
+	background-color: var(--context-background-color);
+	border: 1px solid;
+	border-color: var(--context-border-color);
+	padding: 1rem;
+	margin: 1rem 0 1rem;
 }
 
 .chimera-sidebar {
@@ -52,11 +128,16 @@ body {
 	flex: 0 0 14rem;
 	display: flex;
 	flex-flow: column;
+
+	.sidebar-widgets {
+		position: sticky;
+		top: 1rem;
+	}
 }
 
 .chimera-content {
 	background-color: var(--main-bg-color);
-	flex: 1 0;
+	flex: 10 0;
 	display: flex;
 	flex-flow: column;
 
@@ -92,6 +173,14 @@ body {
 .chimera-main {
 	flex: 1;
 	padding: 0.5rem;
+	display: flex;
+	flex-flow: column;
+
+	&[data-he-template="chimera/widgets"] {
+		h1 {
+			padding-top: 0;
+		}
+	}
 }
 
 .main-widgets {
@@ -182,11 +271,21 @@ alchemy-table .aft-column-filters input {
 	width: 100%;
 }
 
+alchemy-form {
+	.error-area:not(:empty) {
+		@extend .error, .alert-box;
+		margin-top: 0;
+	}
+}
+
 alchemy-field {
 	border: 1px solid var(--color-box-border);
 	background-color: white;
 	border-radius: 4px;
 
+	// In case something goes wrong:
+	min-height: 1rem;
+
 	alchemy-label {
 		padding-left: 1rem;
 		line-height: 3rem;
@@ -203,7 +302,7 @@ alchemy-field {
 			display: flex;
 
 			button {
-				flex: 1;
+				flex: 10;
 				font-size: 16px;
 				font-weight: 500;
 				color: var(--button-text-color);
@@ -232,9 +331,10 @@ alchemy-field {
 	.field {
 		display: flex;
 		padding: 1rem;
+		flex: 10;
 
 		> * {
-			flex: 1;
+			flex: 10;
 		}
 
 		> alchemy-widget {
@@ -243,17 +343,107 @@ alchemy-field {
 		}
 	}
 
-	.field input[type="text"],
-	.field input[type="number"],
-	.field input[type="color"] {
-		@extend .chimera-input-field;
-		height: 3rem;
+	.field {
+		input[type="text"],
+		input[type="number"],
+		input[type="color"],
+		input[type="datetime-local"],
+		input[type="password"] {
+			@extend .chimera-input-field;
+			height: 3rem;
+		}
+
+		textarea {
+			@extend .chimera-input-field;
+			min-height: 5rem;
+			padding: 1rem;
+		}
+
+		input[type="color"] {
+			background-color: transparent;
+			border: none;
+			padding: 0;
+		}
+	}
+}
+
+alchemy-field-array {
+	.add-entry {
+		@extend .btn;
+		margin: 1rem 0 0 1rem;
+	}
+
+	button.remove {
+		@extend .btn;
+		@extend .danger;
+		min-width: 6rem;
+		margin: 0 1rem 1rem 0;
+	}
+
+	.entries {
+		margin-top: 0.5rem;
+	}
+
+	alchemy-field-array-entry:not(:last-of-type) {
+		//border-bottom: 1px solid gray;
+		position: relative;
+
+		&::after {
+			display: block;
+			content: " ";
+			background-color: lightgray;
+			position: absolute;
+			bottom: 0;
+			height: 1px;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 80%;
+		}
+	}
+
+	alchemy-field-array-entry:not(:first-of-type) {
+		margin-top: 1rem;
+	}
+}
+
+.chimera-editor-widgets {
+
+	alchemy-widgets-column.toc-col {
+		flex: 2 2;
+	}
+
+	table-of-contents[elements-selector="alchemy-field"] {
+		align-self: start;
+		top: 2rem;
+		position: sticky;
+
+		ol {
+			list-style: none;
+			margin: 0 0 0 2rem;
+			padding: 0;
+
+			li {
+				a {
+					display: block;
+					line-height: 2rem;
+					border-bottom: 1px solid #aaa;
+					text-decoration: none;
+					opacity: 0.5;
+					color: #0070e4;
+				}
+			}
+	
+			li a.visible {
+				opacity: 1;
+			}
+		}
 	}
+}
 
-	.field input[type="color"] {
-		background-color: transparent;
+alchemy-field-schema {
+	alchemy-field {
 		border: none;
-		padding: 0;
+		margin-bottom: 1rem;
 	}
 }
 
@@ -270,4 +460,18 @@ alchemy-field {
 			background-color: var(--button-bg-hover-color);
 		}
 	}
+}
+
+.chimera-confirm-page {
+	flex: 1;
+	justify-content: center;
+	display: flex;
+	align-items: center;
+	flex-flow: column;
+	flex-direction: column;
+
+	.action-buttons {
+		display: flex;
+		gap: 1rem;
+	}
 }

package/config/routes.js

@@ -35,6 +35,14 @@ chimera_section.add({
 	breadcrumb : 'chimera.editor.{model}.edit.{pk}'
 });
 
+// Editor trash action
+chimera_section.add({
+	name       : 'Chimera.Editor#trash',
+	methods    : ['get', 'post'],
+	paths      : '/editor/{model}/trash/{pk}',
+	breadcrumb : 'chimera.editor.{model}.trash.{pk}'
+});
+
 // Editor data action
 chimera_section.add({
 	name       : 'Chimera.Editor#records',

package/controller/chimera_editor_controller.js

@@ -69,7 +69,7 @@ Editor.setAction(function index(conduit, model_name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  1.0.1
+ * @version  1.0.2
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -97,10 +97,8 @@ Editor.setAction(async function add(conduit, model_name) {
 
 			return conduit.redirect(url);
 		} catch (err) {
-			// @TODO: set this in the context somehow?
-			this.set('record_violations', err);
-
 			this.set('context_variables', {
+				form_violations : err,
 				record : record
 			});
 		}
@@ -125,7 +123,7 @@ Editor.setAction(async function add(conduit, model_name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  1.0.1
+ * @version  1.0.2
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -140,9 +138,9 @@ Editor.setAction(async function edit(conduit, model_name, pk_val) {
 	let record = await model.findByPk(pk_val);
 	let message_type = conduit.param('message');
 
-	this.set('context_variables', {
-		record : record
-	});
+	let context_variables = {
+		record,
+	};
 
 	if (conduit.method == 'post') {
 
@@ -152,11 +150,12 @@ Editor.setAction(async function edit(conduit, model_name, pk_val) {
 			await record.save();
 			message_type = 'saved';
 		} catch (err) {
-			// @TODO: set this in the context somehow?
-			this.set('record_violations', err);
+			context_variables.form_violations = err;
 		}
 	}
 
+	this.set('context_variables', context_variables);
+
 	let widget_config = model.chimera.getWidgetConfig('edit', conduit);
 
 	if (!widget_config.class_names) {
@@ -179,12 +178,52 @@ Editor.setAction(async function edit(conduit, model_name, pk_val) {
 	this.render('chimera/widgets');
 });
 
+/**
+ * The trash action
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.0.4
+ * @version  1.0.4
+ *
+ * @param    {Conduit}   conduit
+ * @param    {String}    model_name
+ * @param    {String}    pk_val
+ */
+Editor.setAction(async function trash(conduit, model_name, pk_val) {
+
+	let model = this.getModel(model_name);
+
+	model.translateItems = false;
+
+	let record = await model.findByPk(pk_val);
+
+	if (!record) {
+		return conduit.notFound();
+	}
+
+	let index_url = alchemy.routeUrl('Chimera.Editor#index', {
+		model : model_name
+	});
+
+	if (conduit.method == 'post') {
+		await record.remove();
+		conduit.redirect(index_url);
+		return;
+	}
+
+	let referer = conduit.headers.referer || index_url;
+
+	this.set('back_url', referer);
+	this.set('record', record);
+	this.render('chimera/editor/trash');
+});
+
 /**
  * The records API action
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.0
- * @version  1.0.0
+ * @version  1.0.4
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -230,7 +269,7 @@ Editor.setAction(async function records(conduit, model_name) {
 				continue;
 			}
 
-			val = RegExp.interpretWildcard('*' + val + '*');
+			val = RegExp.interpretWildcard('*' + val + '*', 'i');
 			crit.where(key).equals(val);
 		}
 	}
@@ -242,15 +281,29 @@ Editor.setAction(async function records(conduit, model_name) {
 
 	for (record of records) {
 
-		record.$hold.actions = [
-			{
-				name : 'edit',
-				icon : 'edit',
-				url  : alchemy.routeUrl('Chimera.Editor#edit', {
+		let edit_action = new Classes.Alchemy.Form.Action.Url({
+			name : 'edit',
+			icon : 'edit',
+			placement : ['row', 'context'],
+			url       : alchemy.routeUrl('Chimera.Editor#edit', {
+				model : model_name,
+				pk    : record.$pk,
+			})
+		});
+
+		let trash_action = new Classes.Alchemy.Form.Action.Url({
+			name      : 'trash',
+				icon      : 'trash',
+				placement : ['context'],
+				url       : alchemy.routeUrl('Chimera.Editor#trash', {
 					model : model_name,
 					pk    : record.$pk,
 				})
-			}
+		});
+
+		record.$hold.actions = [
+			edit_action,
+			trash_action,
 		];
 	}
 

package/lib/chimera_config.js

@@ -65,7 +65,7 @@ Config.setMethod(function getFieldSet(name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.0
- * @version  1.0.0
+ * @version  1.0.2
  *
  * @param    {String}   action
  * @param    {Conduit}  conduit
@@ -118,12 +118,43 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 								"level": 1,
 								"content": this.ModelClass.title + ' edit',
 							}
-						}, {
-							"type": "alchemy_form",
-							"config": {
-								model     : this.ModelClass.type_name,
-								view_type : 'edit',
-								widgets   : field_widgets
+						},
+						{
+							type: "row",
+							config: {
+								widgets: [
+									{
+										type: "column",
+										config: {
+											widgets: [
+												{
+													"type": "alchemy_form",
+													"config": {
+														model     : this.ModelClass.type_name,
+														view_type : 'edit',
+														widgets   : field_widgets
+													}
+												}
+											]
+										}
+									},
+									{
+										type: 'column',
+										config: {
+											wrapper_class_names: 'toc-col',
+											widgets: [
+												{
+													type: "table_of_contents",
+													config: {
+														parent_selector: 'alchemy-widgets-row',
+														elements_selector: 'alchemy-field',
+														title_selector: 'alchemy-label'
+													}
+												}
+											]
+										}
+									}
+								]
 							}
 						}
 					]

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-chimera",
 	"description": "Chimera plugin for Alchemy MVC",
-	"version": "1.0.1",
+	"version": "1.0.4",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -12,9 +12,8 @@
 	"repository": "11ways/alchemy-chimera",
 	"peerDependencies": {
 		"alchemy-acl"  : "~0.7.0",
-		"alchemy-menu" : "~0.6.0",
-		"alchemymvc"   : "~1.1.0",
-		"alchemy-widget": "~0.1.0"
+		"alchemymvc"   : "~1.2.1",
+		"alchemy-widget": "~0.1.2"
 	},
 	"license": "MIT",
 	"engines": {

package/view/chimera/editor/trash.hwk

@@ -0,0 +1,34 @@
+{% include "layouts/chimera_basics" %}
+
+{% block "main" %}
+	<div class="chimera-confirm-page">
+		<h1>{%t "confirm-delete-title" %}</h1>
+
+		<p>
+			{%t "confirm-delete-text" model=record.$model_name title=record.getDisplayFieldValue() %}
+		</p>
+
+		<br>
+
+		<form class="action-buttons">
+			<a class="btn" href={% back_url %}>
+				{%t "cancel" %}
+			</a>
+			<button class="btn danger">
+				<al-ico type="trash" class="fas fa-trash"></al-ico>
+				{%t "delete" %}
+			</button>
+		</form>
+	</div>
+{% /block %}
+
+{% block "page-actions" %}
+	<a
+		!Route="Chimera.Editor#add"
+		#model={% model_name %}
+		class="btn"
+	>
+		<al-ico type="plus"></al-ico>
+		{%t "new" model=model_name %}
+	</a>
+{% /block %}