docs: various tutorial fixes

Author: ivictbor

adminforth/documentation/docs/tutorial/001-gettingStarted.md

@@ -207,7 +207,7 @@ export default {
     {
       name: 'title',
       required: true,
-      showIn: { all: false },  // all available options
+      showIn: { all: true },  // all available options
       type: AdminForthDataTypes.STRING,
       maxLength: 255,  // you can set max length for string fields
       minLength: 3,  // you can set min length for string fields

adminforth/documentation/docs/tutorial/03-Customization/02-customFieldRendering.md

@@ -216,11 +216,13 @@ Now you can use this component in the configuration of the resource:
     ...
     {
       name: 'country',
+//diff-add
       components: {
 //diff-add
         edit: '@@/CountryDropdown.vue',
 //diff-add
         create: '@@/CountryDropdown.vue',
+//diff-add
       },
       ...
     },
@@ -236,7 +238,7 @@ Custom componets can emit `update:inValidity` event to parent to say that the fi
 
 You can define this emit as:
 
-```ts 
+```ts title='./custom/<AnyYourComponent>.vue'
 const emit = defineEmits([
   "update:value", 
 //diff-add  

adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md

@@ -8,6 +8,9 @@ For doing this you can use `virtual` columns.
 
 ```ts title='./resources/apartments.ts'
 
+//diff-add
+import { AdminForthResourcePages } from 'adminforth';
+
 ...
 resourceId: 'aparts',
 columns: [
@@ -109,18 +112,18 @@ columns: [
 Now to handle virtual `password` field we use hooks:
  
 
-```ts title="./index.ts"
+```ts title="./resources/adminuser.ts"
   hooks: {
     create: {
       beforeSave: async ({ record, adminUser, resource }: { record: any, adminUser: AdminUser, resource: AdminForthResource }) => {
-        record.passwordHash = await AdminForth.Utils.generatePasswordHash(record.password);
+        record.password_hash = await AdminForth.Utils.generatePasswordHash(record.password);
         return { ok: true };
       }
     },
     edit: {
       beforeSave: async ({ updates, adminUser, resource }: { updates: any, adminUser: AdminUser, resource: AdminForthResource }) => {
         if (updates.password) {
-          updates.passwordHash = await AdminForth.Utils.generatePasswordHash(updates.password);
+          updates.password_hash = await AdminForth.Utils.generatePasswordHash(updates.password);
         }
         return { ok: true }
       },

adminforth/documentation/docs/tutorial/03-Customization/04-hooks.md

@@ -96,11 +96,11 @@ import type { AdminUser } from  'adminforth';
 //diff-add
     create: {
 //diff-add
-      beforeSave: async ({ adminUser, record }: { adminUser: AdminUser, updates: any }) => {
+      beforeSave: async ({ adminUser, updates }: { adminUser: AdminUser, updates: any }) => {
 //diff-add
         updates.realtor_id = adminUser.dbUser.id;
 //diff-add
-        return { ok: true, record };
+        return { ok: true };
 //diff-add
       }
 //diff-add

adminforth/documentation/docs/tutorial/03-Customization/06-customPages.md

@@ -312,7 +312,7 @@ app.get(`${ADMIN_BASE_URL}/api/dashboard/`,
   admin.express.authorize(
     async (req, res) => {
       const days = req.body.days || 7;
-      const apartsByDays = await db.prepare(
+      const apartsByDays = await admin.resource('aparts').client.prepare(
         `SELECT 
           strftime('%Y-%m-%d', created_at) as day, 
           COUNT(*) as count 
@@ -326,7 +326,7 @@ app.get(`${ADMIN_BASE_URL}/api/dashboard/`,
       const totalAparts = apartsByDays.reduce((acc: number, { count }: { count:number }) => acc + count, 0);
 
       // add listed, unlisted, listedPrice, unlistedPrice
-      const listedVsUnlistedByDays = await db.prepare(
+      const listedVsUnlistedByDays = await admin.resource('aparts').client.prepare(
         `SELECT 
           strftime('%Y-%m-%d', created_at) as day, 
           SUM(listed) as listed, 
@@ -340,7 +340,7 @@ app.get(`${ADMIN_BASE_URL}/api/dashboard/`,
         `
       ).all(days);
 
-      const apartsCountsByRooms = await db.prepare(
+      const apartsCountsByRooms = await admin.resource('aparts').client.prepare(
         `SELECT 
           number_of_rooms, 
           COUNT(*) as count 
@@ -350,7 +350,7 @@ app.get(`${ADMIN_BASE_URL}/api/dashboard/`,
         `
       ).all();
 
-      const topCountries = await db.prepare(
+      const topCountries = await admin.resource('aparts').client.prepare(
         `SELECT 
           country, 
           COUNT(*) as count 
@@ -361,14 +361,14 @@ app.get(`${ADMIN_BASE_URL}/api/dashboard/`,
         `
       ).all();
 
-      const totalSquare = await db.prepare(
+      const totalSquare = await admin.resource('aparts').client.prepare(
         `SELECT 
           SUM(square_meter) as totalSquare 
         FROM apartments;
         `
       ).get();
 
-      const listedVsUnlistedPriceByDays = await db.prepare(
+      const listedVsUnlistedPriceByDays = await admin.resource('aparts').client.prepare(
         `SELECT 
           strftime('%Y-%m-%d', created_at) as day, 
           SUM(listed * price) as listedPrice,

adminforth/documentation/docs/tutorial/03-Customization/07-alert.md

@@ -36,20 +36,20 @@ const isConfirmed = await adminforth.confirm({message: 'Are you sure?', yes: 'Ye
 
 ## Ussage example
 
-Create a Vue component in the custom directory of your project, e.g. Alerts.vue:
+Create a Vue component in the custom directory of your project, e.g. `Alerts.vue`:
 
 ```html title="./custom/Alerts.vue"
 <template>
     <div class="ml-3 mt-16">
-        <Button @click="successAlert($t('Example success alert'))" >
+        <Button @click="successAlert($t('Example success alert'))" class="bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800" >
             {{$t('Call success alert')}}
         </Button>
 
-        <Button @click="warningAlert($t('Example danger alert'))" >
+        <Button @click="warningAlert($t('Example danger alert'))" class="bg-orange-500 hover:bg-orange-400 focus:ring-orange-100 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-900" >
             {{$t('Call warning alert')}}
         </Button>
 
-        <Button @click="doConfirm" >
+        <Button @click="doConfirm" class="bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900" >
             {{$t('Call confirm dialog')}}
         </Button>
     </div>
@@ -97,6 +97,7 @@ menu: [
 //diff-add
 }
 ```
+
 Here is how alert looks:
 ![alt text](image-12.png)