alchemy-chimera 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.1.0 (2022-07-23)
+
+* Upgrade `alchemy-acl` and `alchemy-form`
+
+## 1.0.5 (2022-07-06)
+
+* Fix page title containing 'undefined'
+* Update styles
+* Add support for "private" document fields
+
+## 1.0.4 (2022-05-31)
+
+* Add delete page
+
 ## 1.0.3 (2022-03-16)
 
 * Make table filtering case insensitive

package/assets/stylesheets/chimera/chimera.scss

@@ -48,11 +48,21 @@ body {
 	border-radius: 2px;
 	font-weight: 500;
 	cursor: pointer;
+	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 {
@@ -127,7 +137,7 @@ body {
 
 .chimera-content {
 	background-color: var(--main-bg-color);
-	flex: 1 0;
+	flex: 10 0;
 	display: flex;
 	flex-flow: column;
 
@@ -163,6 +173,8 @@ body {
 .chimera-main {
 	flex: 1;
 	padding: 0.5rem;
+	display: flex;
+	flex-flow: column;
 
 	&[data-he-template="chimera/widgets"] {
 		h1 {
@@ -254,198 +266,247 @@ alchemy-widgets-navigation {
 	opacity: 0;
 }
 
-alchemy-table .aft-column-filters input {
-	@extend .chimera-input-field;
-	width: 100%;
-}
+.chimera-wrapper {
 
-alchemy-form {
-	.error-area:not(:empty) {
-		@extend .error, .alert-box;
-		margin-top: 0;
+	alchemy-table .aft-column-filters input {
+		@extend .chimera-input-field;
+		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;
-		font-size: 16px;
-		font-weight: 500;
-		color: var(--color-title);
-		border-bottom: 1px solid var(--color-box-border);
+	alchemy-field {
+		.wrapped-inline {
+			> .field {
+				padding: 0 !important;
+			}
+		}
 	}
 
-	alchemy-field-translatable {
-		.prefix-buttons {
-			width: 100%;
+	alchemy-field[mode="inline"] {
+		border: none;
+	}
+
+	alchemy-field:not([mode="inline"]) {
+		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;
+			font-size: 16px;
+			font-weight: 500;
+			color: var(--color-title);
 			border-bottom: 1px solid var(--color-box-border);
+		}
+
+		alchemy-field-translatable {
+			.prefix-buttons {
+				width: 100%;
+				border-bottom: 1px solid var(--color-box-border);
+				display: flex;
+
+				button {
+					flex: 10;
+					font-size: 16px;
+					font-weight: 500;
+					color: var(--button-text-color);
+					letter-spacing: 0px;
+					background: transparent;
+					border: none;
+					cursor: pointer;
+
+					height: 3rem;
+					display: flex;
+					flex-flow: column;
+					justify-content: center;
+					align-items: center;
+
+					&.active {
+						box-shadow: inset 0 -2px var(--color-active);
+					}
+
+					&:hover {
+						background-color: var(--button-bg-hover-color);
+					}
+				}
+			}
+		}
+
+		.field {
 			display: flex;
+			padding: 1rem;
+			flex: 10;
 
-			button {
-				flex: 1;
-				font-size: 16px;
-				font-weight: 500;
-				color: var(--button-text-color);
-				letter-spacing: 0px;
-				background: transparent;
-				border: none;
-				cursor: pointer;
+			> * {
+				flex: 10;
+			}
+
+			> alchemy-widget {
+				border: 1px solid var(--color-input-border);
+				padding: 0 12px;
+			}
+		}
 
+		.field {
+			input[type="text"],
+			input[type="number"],
+			input[type="color"],
+			input[type="datetime-local"],
+			input[type="password"] {
+				@extend .chimera-input-field;
 				height: 3rem;
-				display: flex;
-				flex-flow: column;
-				justify-content: center;
-				align-items: center;
+			}
 
-				&.active {
-					box-shadow: inset 0 -2px var(--color-active);
-				}
+			textarea {
+				@extend .chimera-input-field;
+				min-height: 5rem;
+				padding: 1rem;
+			}
 
-				&:hover {
-					background-color: var(--button-bg-hover-color);
-				}
+			input[type="color"] {
+				background-color: transparent;
+				border: none;
+				padding: 0;
 			}
 		}
 	}
 
-	.field {
-		display: flex;
-		padding: 1rem;
-		flex: 1;
-
-		> * {
-			flex: 1;
+	alchemy-field-array {
+		.add-entry {
+			@extend .btn;
+			margin: 1rem 0 0 1rem;
 		}
 
-		> alchemy-widget {
-			border: 1px solid var(--color-input-border);
-			padding: 0 12px;
+		button.remove {
+			@extend .btn;
+			@extend .danger;
+			min-width: 6rem;
+			margin: 0 1rem 1rem 0;
 		}
-	}
 
-	.field {
-		input[type="text"],
-		input[type="number"],
-		input[type="color"],
-		input[type="datetime-local"],
-		input[type="password"] {
-			@extend .chimera-input-field;
-			height: 3rem;
+		.entries {
+			margin-top: 0.5rem;
 		}
 
-		textarea {
-			@extend .chimera-input-field;
-			min-height: 5rem;
-			padding: 1rem;
+		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%;
+			}
 		}
 
-		input[type="color"] {
-			background-color: transparent;
-			border: none;
-			padding: 0;
+		alchemy-field-array-entry:not(:first-of-type) {
+			margin-top: 1rem;
 		}
 	}
-}
 
-alchemy-field-array {
-	.add-entry {
-		@extend .btn;
-		margin: 1rem 0 0 1rem;
-	}
+	.chimera-editor-widgets {
 
-	button.remove {
-		@extend .btn;
-		@extend .danger;
-		min-width: 6rem;
-		margin: 0 1rem 1rem 0;
-	}
+		alchemy-widgets-column.toc-col {
+			flex: 2 2;
+		}
 
-	.entries {
-		margin-top: 0.5rem;
+		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;
+				}
+			}
+		}
 	}
 
-	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-schema {
+		alchemy-field {
+			border: none;
+			margin-bottom: 1rem;
 		}
 	}
 
-	alchemy-field-array-entry:not(:first-of-type) {
-		margin-top: 1rem;
+	.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);
+			}
+		}
 	}
-}
 
-.chimera-editor-widgets {
+	.chimera-confirm-page {
+		flex: 1;
+		justify-content: center;
+		display: flex;
+		align-items: center;
+		flex-flow: column;
+		flex-direction: column;
 
-	alchemy-widgets-column.toc-col {
-		flex: 1 1;
+		.action-buttons {
+			display: flex;
+			gap: 1rem;
+		}
 	}
 
-	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;
-			}
+	al-file {
+		button {
+			@extend .btn;
 		}
 	}
-}
 
-alchemy-field-schema {
-	alchemy-field {
-		border: none;
-		margin-bottom: 1rem;
-	}
-}
+	alchemy-password-input {
+		label:first-of-type {
+			margin-bottom: 0;
+		}
+
+		.repeat-input-label {
+			margin-top: 1rem;
+		}
 
-.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);
+		.inputbox {
+			background: initial;
 		}
 	}
 }

package/bootstrap.js

@@ -1,4 +1,5 @@
 alchemy.requirePlugin('widget');
+alchemy.requirePlugin('form');
 
 // Define the default options
 let options = {

package/config/routes.js

@@ -2,6 +2,8 @@
 // By default this will be /chimera
 let chimera_section = Router.section('chimera', '/' + alchemy.plugins.chimera.base_path);
 
+chimera_section.requirePermission('chimera');
+
 // Link to the dashboard
 chimera_section.add({
 	title      : __('chimera', 'Dashboard'),
@@ -35,6 +37,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

@@ -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.1
+ * @version  1.0.5
  *
  * @param    {String}    title
  */
@@ -27,6 +27,8 @@ Editor.setMethod(function setTitle(title) {
 		if (title && window_title) {
 			window_title += ' | ';
 		}
+	} else {
+		window_title = '';
 	}
 
 	if (title) {
@@ -123,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.2
+ * @version  1.0.5
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -138,6 +140,8 @@ Editor.setAction(async function edit(conduit, model_name, pk_val) {
 	let record = await model.findByPk(pk_val);
 	let message_type = conduit.param('message');
 
+	record.keepPrivateFields();
+
 	let context_variables = {
 		record,
 	};
@@ -178,12 +182,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.3
+ * @version  1.1.0
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -238,18 +282,34 @@ Editor.setAction(async function records(conduit, model_name) {
 	    result = [],
 	    record,
 	    main;
+	
+	records.keepPrivateFields();
 
 	for (record of records) {
 
+		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 = [
-			{
-				name : 'edit',
-				icon : 'edit',
-				url  : alchemy.routeUrl('Chimera.Editor#edit', {
-					model : model_name,
-					pk    : record.$pk,
-				})
-			}
+			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.2
+ * @version  1.1.0
  *
  * @param    {String}   action
  * @param    {Conduit}  conduit
@@ -131,7 +131,7 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 													"type": "alchemy_form",
 													"config": {
 														model     : this.ModelClass.type_name,
-														view_type : 'edit',
+														purpose   : 'edit',
 														widgets   : field_widgets
 													}
 												}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-chimera",
 	"description": "Chimera plugin for Alchemy MVC",
-	"version": "1.0.3",
+	"version": "1.1.0",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -11,12 +11,13 @@
 	],
 	"repository": "11ways/alchemy-chimera",
 	"peerDependencies": {
-		"alchemy-acl"  : "~0.7.0",
-		"alchemymvc"   : "~1.2.1",
-		"alchemy-widget": "~0.1.2"
+		"alchemy-acl"    : "~0.8.0",
+		"alchemymvc"     : "~1.2.4",
+		"alchemy-form"   : "~0.1.11",
+		"alchemy-widget" : "~0.1.5"
 	},
 	"license": "MIT",
 	"engines": {
-		"node" : ">=12.0.0"
+		"node" : ">=14.0.0"
 	}
 }

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 %}