App: use nella, better UI

contributte · Sep 28, 2023 · a76411a · a76411a
1 parent 52fbea8
commit a76411a
Show file tree

Hide file tree

Showing 22 changed files with 154 additions and 302 deletions.
diff --git a/app/UI/@Templates/@layout.latte b/app/UI/@Templates/@layout.latte
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>{block #title|striptags}Webpack Skeleton{/}</title>
+
+	{block #head}
+		{* This CSS bundle is generated via Webpack. See webpack.config.js *}
+		<link rel="stylesheet" href="{$basePath}/dist/front.bundle.css">
+	{/block}
+</head>
+<body>
+
+<div class="antialiased px-6 text-gray-900">
+	<div class="divide-y max-w-xl md:max-w-4xl mx-auto">
+		<div class="py-8">
+			<h1 class="font-bold text-3xl">
+				Contributte / Webpack Skeleton
+			</h1>
+		</div>
+
+		<div n:if="$flashes !== []" n:inner-foreach="$flashes as $flash">
+			<div class="{$flash->type}">
+				{$flash->message}
+			</div>
+		</div>
+
+		<div class="py-8">
+			{include #content}
+		</div>
+
+		<div class="py-8">
+			&copy; {=date(Y)} by <a href="https://github.com/f3l1x" class="text-blue-600 underline">@f3l1x</a>
+		</div>
+	</div>
+</div>
+
+{block #scripts}
+	{* This JS bundle is generated via Webpack. See webpack.config.js *}
+	<script src="{$basePath}/dist/front.bundle.js"></script>
+{/block}
+</body>
+</html>
+
+
+
diff --git a/app/UI/Admin/AdminPresenter.php b/app/UI/Admin/AdminPresenter.php
@@ -0,0 +1,10 @@
+<?php declare(strict_types = 1);
+
+namespace App\UI\Admin;
+
+use Contributte\Nella\UI\NellaPresenter;
+
+class AdminPresenter extends NellaPresenter
+{
+
+}
diff --git a/app/presenters/templates/Admin/@layout.latte → app/UI/Admin/Templates/@layout.latte b/app/presenters/templates/Admin/@layout.latte → app/UI/Admin/Templates/@layout.latte
@@ -1,4 +1,4 @@
-{layout ../@layout.latte}
+{layout ../../@Templates/@layout.latte}
 
 {block #head}
     <link rel="stylesheet" href="{$basePath}/dist/admin.bundle.css">

diff --git a/app/UI/Admin/Templates/default.latte b/app/UI/Admin/Templates/default.latte
@@ -0,0 +1,4 @@
+{block #content}
+<div><a class="text-blue-600" n:href="Home:">Go to front →</a></div>
+
+<div class="mt-8">This is admin!</div>
diff --git a/app/UI/BasePresenter.php b/app/UI/BasePresenter.php
@@ -0,0 +1,10 @@
+<?php declare(strict_types = 1);
+
+namespace App\UI;
+
+use Contributte\Nella\UI\NellaPresenter;
+
+abstract class BasePresenter extends NellaPresenter
+{
+
+}
diff --git a/app/presenters/HomepagePresenter.php → app/UI/Home/HomePresenter.php b/app/presenters/HomepagePresenter.php → app/UI/Home/HomePresenter.php
@@ -1,13 +1,15 @@
 <?php declare(strict_types = 1);
 
-namespace App\Presenters;
+namespace App\UI\Home;
 
+use App\UI\BasePresenter;
 use Nette\Application\UI\Form;
+use Nette\Utils\ArrayHash;
 use Nette\Utils\DateTime;
 use Nette\Utils\Html;
 use Nette\Utils\Strings;
 
-class HomepagePresenter extends BasePresenter
+class HomePresenter extends BasePresenter
 {
 
 	public function renderDefault(): void
@@ -33,15 +35,13 @@ protected function createComponentUserForm(): Form
 
 		$form->addText('username', 'Username')
 			->setRequired('Username is mandatory')
-			->setAttribute('placeholder', 'Type your name Mr.?');
+			->setHtmlAttribute('placeholder', 'Type your name Mr.?');
 
 		$form->addText('email', 'Email')
 			->setHtmlAttribute('placeholder', 'Type your e-mail')
 			->setOption('description', Html::el('span')->setHtml('Try to type <strong>[email protected]</strong> to see validation.'))
 			->setEmptyValue('@')
-			->addFilter(function ($email) {
-				return Strings::lower($email);
-			})
+			->addFilter(fn ($email) => Strings::lower($email))
 			->addRule($form::REQUIRED, 'E-mail is mandatory')
 			->addRule($form::EMAIL, 'Given e-mail is not e-mail');
 
@@ -51,20 +51,22 @@ protected function createComponentUserForm(): Form
 
 		$form->addSubmit('send', 'OK');
 
-		$form->onValidate[] = function (Form $form) {
+		$form->onValidate[] = function (Form $form): void {
+			$values = $form->getUnsafeValues(ArrayHash::class);
+
 			// Validate e-mail duplicities (against DB?)
-			if (Strings::endsWith($form->values->email, '@nette.org')) {
-				$form->addError(sprintf('E-mail "%s" is already picked', $form->values->email));
+			if (str_ends_with($values->email, '@nette.org')) {
+				$form->addError(sprintf('E-mail "%s" is already picked', $values->email));
 			}
 		};
 
-		$form->onSubmit[] = function () {
+		$form->onSubmit[] = function (): void {
 			// This method in invoked always
 			$this->redrawControl('userFormError');
 			$this->redrawControl('userFormOk');
 		};
 
-		$form->onSuccess[] = function () {
+		$form->onSuccess[] = function (): void {
 			// Some handling on success...
 		};
 

diff --git a/app/UI/Home/Templates/default.latte b/app/UI/Home/Templates/default.latte
@@ -0,0 +1,68 @@
+{block #content}
+<div><a class="text-blue-600" n:href="Admin:">Go to admin →</a></div>
+
+<div class="mt-8">Take a look at <code class="text-red-500 font-bold">webpack.config.js</code>.</div>
+
+<div class="mt-16">
+	<div class="text-2xl font-bold border-b border-gray-300">Snippets</div>
+	<div class="mt-4"><a class="ajax bg-green-600 text-white rounded-md px-2 py-1" n:href="reloadAll!">RELOAD ALL</a></div>
+
+	<div class="mt-8 grid grid-cols-3 gap-4">
+		<div class="border border-gray-300 p-4 rounded-md gap-2 grid grid-cols-1" n:snippet="box1">
+			<div>Box 1 <a class="ajax bg-blue-600 text-white rounded-md px-2 py-1" n:href="reload!, box => box1">RELOAD</a></div>
+			<div>Time is: {$datetime|date:'d.m.Y H:i:s'}</div>
+		</div>
+		<div class="border border-gray-300 p-4 rounded-md gap-2 grid grid-cols-1" n:snippet="box2">
+			<div>Box 2 <a class="ajax bg-blue-600 text-white rounded-md px-2 py-1" n:href="reload!, box => box2">RELOAD</a></div>
+			<div>Time is: {$datetime|date:'H:i:s'}</div>
+		</div>
+		<div class="border border-gray-300 p-4 rounded-md gap-2 grid grid-cols-1" n:snippet="box3">
+			<div>Box 3 <a class="ajax bg-blue-600 text-white rounded-md px-2 py-1" n:href="reload!, box => box3">RELOAD</a></div>
+			<div>Time is: {$datetime|date:'U'}</div>
+		</div>
+	</div>
+</div>
+
+<div class="mt-16">
+	<div class="text-2xl font-bold border-b border-gray-300">Forms</div>
+	<div class="max-w-md">
+		<form n:name="userForm" class="ajax">
+			{snippet userFormOk}
+				{php $form = $presenter['userForm']}
+				{if $form->isSuccess()}
+					<div class="text-green-600 font-bold">Form OK!</div>
+					<div class="p-4 border rounded-md">{=Tracy\Debugger::dump($form->values, true)|noescape}</div>
+				{/if}
+			{/snippet}
+
+			{snippet userFormError}
+				{php $form = $presenter['userForm']}
+				<div class="border border-red-700 bg-red-500 px-2 py-1 text-white rounded-md mt-4" n:foreach="$form->getErrors() as $error">
+					{$error}
+				</div>
+			{/snippet}
+
+			<div class="mt-8 grid grid-cols-1 gap-6">
+				<div n:class="form-group, $form['username']->required ? required, $form['username']->error ? has-error">
+					{label username /}
+					<input n:name="username" class="mt-1 block w-full">
+
+					<small class="form-text text-muted" n:ifcontent>{$form['username']->getOption('description')}</small>
+				</div>
+				<div n:class="form-group, $form['email']->required ? required, $form['email']->error ? has-error">
+					{label email /}
+					<input n:name="email" class="mt-1 block w-full">
+
+					<small class="form-text text-muted" n:ifcontent>{$form['email']->getOption('description')}</small>
+				</div>
+				<div n:class="form-group, $form['age']->required ? required, $form['age']->error ? has-error">
+					{label age /}
+					{input age, class => 'mt-1 block w-full'}
+
+					<small class="form-text text-muted" n:ifcontent>{$form['age']->getOption('description')}</small>
+				</div>
+				<button class="bg-green-600 text-white rounded-md px-2 py-1" n:name="send">OK</button>
+			</div>
+		</form>
+	</div>
+</div>
diff --git a/app/presenters/AdminPresenter.php b/app/presenters/AdminPresenter.php
diff --git a/app/presenters/BasePresenter.php b/app/presenters/BasePresenter.php
diff --git a/app/presenters/Error4xxPresenter.php b/app/presenters/Error4xxPresenter.php
diff --git a/app/presenters/ErrorPresenter.php b/app/presenters/ErrorPresenter.php
diff --git a/app/presenters/templates/@layout.latte b/app/presenters/templates/@layout.latte
diff --git a/app/presenters/templates/Admin/default.latte b/app/presenters/templates/Admin/default.latte
diff --git a/app/presenters/templates/Error/403.latte b/app/presenters/templates/Error/403.latte
diff --git a/app/presenters/templates/Error/404.latte b/app/presenters/templates/Error/404.latte
diff --git a/app/presenters/templates/Error/405.latte b/app/presenters/templates/Error/405.latte
diff --git a/app/presenters/templates/Error/410.latte b/app/presenters/templates/Error/410.latte
diff --git a/app/presenters/templates/Error/4xx.latte b/app/presenters/templates/Error/4xx.latte