[REFACTOR] refactor last essential guides

Author: Nils Henning

docs/guides/2-essential/11_authentication_devise.md

@@ -267,6 +267,7 @@ class Admin::Pages::Persons::Index < Matestack::Ui::Page
       th text: 'Last name'
       th text: 'First name'
       th text: 'Role'
+      th
     end
   end
 
@@ -279,12 +280,17 @@ class Admin::Pages::Persons::Index < Matestack::Ui::Page
         end
         td text: person.first_name
         td text: person.role
+        td class: 'text-right' do
+          action delete_person_config(person) do
+            button text: 'Delete', class: 'btn btn-outline-primary'
+          end
+        end
       end
     end
   end
 
   def paginator
-    ul class: 'pagination' do
+    ul class: 'pagination justify-content-center' do
       li class: 'page-item' do
         collection_content_previous do
           button class: 'page-link', text: 'previous'
@@ -305,6 +311,20 @@ class Admin::Pages::Persons::Index < Matestack::Ui::Page
     end
   end
 
+
+  def delete_person_config(person)
+    {
+      method: :delete,
+      path: admin_person_path(person),
+      success: {
+        emit: 'persons-collection-update'
+      },
+      confirm: {
+        text: "Do you really want to delete '#{person.first_name} #{person.last_name}'?"
+      }
+    }
+  end
+
 end
 ```
 
@@ -364,7 +384,7 @@ class Admin::Pages::Persons::New < Admin::Pages::Persons::Form
     div class: 'container' do
       div class: 'row' do
         div class: 'col-md-6 offset-md-3 text-center' do
-          heading size: 2, text: 'Create new person'
+          heading size: 2, text: 'Create new person', class: 'my-3'
           person_form 'Create'
         end
       end
@@ -399,7 +419,7 @@ class Admin::Pages::Persons::Edit < Admin::Pages::Persons::Form
     div class: 'container my-5' do
       div class: 'row' do
         div class: 'col-md-6 offset-md-3 text-center' do
-          heading size: 2, text: "Edit Person: #{@person.first_name} #{@person.last_name}"
+          heading size: 2, text: "Edit Person: #{@person.first_name} #{@person.last_name}", class: 'my-3'
           person_form 'Save changes'
         end
       end

docs/guides/2-essential/12_heroku_deployment.md

@@ -0,0 +1,108 @@
+# Essential Guide 12: Heroku Deployment with Postgres
+
+## Introduction
+In this guide, we will
+- install and use PostgreSQL instead of SQLite3
+- deploy our application to heroku
+
+## Prerequisites
+- Heroku CLI ([view installation details](https://devcenter.heroku.com/articles/getting-started-with-ruby#set-up))
+- Postgresql ([view installation details](https://devcenter.heroku.com/articles/heroku-postgresql#local-setup))
+
+## Adding Postgres
+
+In the Gemfile, replace the line starting with `gem 'sqlite3'` with `gem 'pg'`.
+
+Make sure to run `bundle install` afterwards and replace the contents of `config/database.yml` with
+
+<details>
+<summary>Note for Linux/Ubuntu users</summary>
+You may need to install additional libraries by running <br/>
+<code>sudo apt-get -y install postgresql postgresql-contrib libpq-dev</code>
+instead of only running <br/>
+<code>sudo apt-get install postgresql</code>.
+</details>
+<br/>
+
+<details>
+<summary>Note for postgres role error</summary>
+If you get an error from postgres stating that your role is missing add it by creating a user. To do so run below codesnippet. <br/>
+<code>sudo su - postgres && createuser -s -r postgres</code>
+</details>
+<br/>
+
+```yaml
+default: &default
+  adapter: postgresql
+  encoding: unicode
+  # For details on connection pooling, see Rails configuration guide
+  # https://guides.rubyonrails.org/configuring.html#database-pooling
+  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
+
+development:
+  <<: *default
+  database: myapp_development
+
+test:
+  <<: *default
+  database: myapp_test
+
+production:
+  <<: *default
+  database: myapp_production
+  username: myapp
+  password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>
+```
+
+## Deployment
+
+To set up a new heroku project, run
+
+```sh
+heroku create
+```
+
+followed by
+
+```sh
+git push heroku master
+```
+
+to trigger a deployment.
+When we have new migrations or didn't initialize the database yet, we need to run
+
+```sh
+heroku run rails db:migrate
+```
+
+In an earlier guide we added some persons with seeds to our local database. In order to also seed some persons into our production database on heroku we need to run
+
+```sh
+heroku run rake db:seed
+```
+
+After the deployment, our database migrate and seeds task successfully finished we can visit our deployed application by running `heroku open`.
+
+If you have used assets like we did in our application remember to run `heroku run rails assets:precompile`.
+
+## Creating an admin
+
+In order to be able to login, we need to create an admin. We could add one in our seeds but we wouldn't recommend doing it. Instead we can use another of herokus features. Opening a rails console connected with the production database of our live application.
+
+```
+heroku run rails console
+```
+
+After the console opened we can now create an admin using the `create` method of our `Admin` model with an email, password and password confirmation as parameters.
+
+```ruby
+Admin.create(email: '[email protected]', password: 'OnlyForSuperMates', password_confirmation: 'OnlyForSuperMates')
+```
+
+Now we can close the console and run `heroku open` again. We can now login to our admin app with the above specified credentials.
+
+## Recap & outlook
+
+We successfully deployed our application to heroku and learned what are the necessary steps to do this. We also switched our application database from sqlite to postgres, because heroku doesn't support sqlite.
+
+While the application is good as it is right now, go ahead and check out the [last part of the essential guide](/docs/guides/2-essential/13_wrap_up.md).

docs/guides/2-essential/12_wrap_up.md

@@ -0,0 +1,33 @@
+# Essential Guide 13: Wrap Up & Outlook
+
+Welcome to the thirteenth part of our essential guide about building a web application with matestack.
+
+## Quick recap
+
+What have we got so far? After following the previous guides, there's now a `RubyOnRails` application running on `Heroku` with a public and admin area allowing for basic CRUD operations.
+
+We have achieved this by setting up two matestack apps each with some matestack pages and by orchestrating matestacks components and vue.js components.
+
+One of the matestack apps is only available after an admin has logged in and protected by the `Devise` gem. The application pleases the eye and offers a great user experience since we have set up and customized `Bootstrap`. Assets are being served by `Webpacker`.
+
+What now?
+
+## Be proud
+
+Pat yourself on the shoulder - you've made it until here, and it was quite a journey! Make sure to push your code to a GitLab or GitHub repository so it will survive a possible change of gear.
+
+## Customize your application
+
+In this guide, we have followed a quite strict and pre-defined route. Now is the time for you to take over and change it according to your ideas!
+
+## Further reading
+
+Since you are now familiar with the basics behind the `matestack-ui-core` library, there is a good chance you want to digg deeper on specific topics. Check out our ever-evolving list of guides and read on as you want.
+
+## Showcase
+
+You're super proud of what you've built using `matestack` libraries? [Let us know](mailto:[email protected]) and become part of our showcase.
+
+## Become part of the community
+
+You're very invited to join our [chat]() or [Slack](), ask questions on our [forum]() or contribute by tackling [GitHub issues](https://github.com/matestack/matestack-ui-core/issues).