Next

adapters/install-adapters.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-ADAPTERS="adminforth-completion-adapter-open-ai-chat-gpt adminforth-email-adapter-aws-ses adminforth-google-oauth-adapter adminforth-github-oauth-adapter adminforth-facebook-oauth-adapter adminforth-keycloak-oauth-adapter adminforth-microsoft-oauth-adapter adminforth-image-generation-adapter-openai adminforth-storage-adapter-amazon-s3 adminforth-storage-adapter-local"
+ADAPTERS="adminforth-completion-adapter-open-ai-chat-gpt adminforth-email-adapter-aws-ses adminforth-google-oauth-adapter adminforth-github-oauth-adapter adminforth-facebook-oauth-adapter adminforth-keycloak-oauth-adapter adminforth-microsoft-oauth-adapter adminforth-twitch-oauth-adapter adminforth-image-generation-adapter-openai adminforth-storage-adapter-amazon-s3 adminforth-storage-adapter-local"
 
 # for each
 install_adapter() {

adminforth/commands/createApp/templates/index.ts.hbs

@@ -1,6 +1,8 @@
 import express from 'express';
 import AdminForth from 'adminforth';
 import usersResource from "./resources/adminuser.js";
+import { fileURLToPath } from 'url';
+import path from 'path';
 
 const ADMIN_BASE_URL = '';
 
@@ -55,7 +57,7 @@ export const admin = new AdminForth({
   ],
 });
 
-if (import.meta.url === `file://${process.argv[1]}`) {
+if (fileURLToPath(import.meta.url) === path.resolve(process.argv[1])) {
   const app = express();
   app.use(express.json());
 

adminforth/commands/createApp/utils.js

@@ -284,14 +284,22 @@ async function writeTemplateFiles(dirname, cwd, options) {
 }
 
 async function installDependencies(ctx, cwd) {
-  const nodeBinary = process.execPath; // Path to the Node.js binary running this script
-  const npmPath = path.join(path.dirname(nodeBinary), 'npm'); // Path to the npm executable
+  const isWindows = process.platform === 'win32';
 
+  const nodeBinary = process.execPath; 
+  const npmPath = path.join(path.dirname(nodeBinary), 'npm');
   const customDir = ctx.customDir;
-  const res = await Promise.all([
-    await execAsync(`${nodeBinary} ${npmPath} install`, { cwd, env: { PATH: process.env.PATH } }),
-    await execAsync(`${nodeBinary} ${npmPath} install`, { cwd: customDir, env: { PATH: process.env.PATH } }),
-  ]);
+  if (isWindows) {
+    const res = await Promise.all([
+      await execAsync(`npm install`, { cwd, env: { PATH: process.env.PATH } }),
+      await execAsync(`npm install`, { cwd: customDir, env: { PATH: process.env.PATH } }),
+    ]);
+  } else {
+    const res = await Promise.all([
+      await execAsync(`${nodeBinary} ${npmPath} install`, { cwd, env: { PATH: process.env.PATH } }),
+      await execAsync(`${nodeBinary} ${npmPath} install`, { cwd: customDir, env: { PATH: process.env.PATH } }),
+    ]);
+  }
   // console.log(chalk.dim(`Dependencies installed in ${cwd} and ${customDir}: \n${res[0].stdout}${res[1].stdout}`));
 }
 

adminforth/commands/createCustomComponent/main.js

@@ -50,6 +50,7 @@ async function handleFieldComponentCreation(config, resources) {
           { name: '📃 show', value: 'show' },
           { name: '✏️ edit', value: 'edit' },
           { name: '➕ create', value: 'create' },
+          { name: '🔍 filter', value: 'filter'},
           new Separator(),
           { name: '🔙 BACK', value: '__BACK__' },
       ]

adminforth/commands/createCustomComponent/templates/customFields/filter.vue.hbs

@@ -0,0 +1,34 @@
+<template>
+  <input
+    type="text"
+    :value="localValue"
+    @input="onInput"
+    placeholder="Search"
+    aria-describedby="helper-text-explanation"
+    class="inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 dark:text-white translate-y-0 rounded-l-md rounded-r-md w-full"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+  column: any;
+  meta?: any;
+  modelValue: Array<{ operator: string; value: string }> | null;
+}>();
+
+const localValue = ref(props.modelValue?.[0]?.value || '');
+
+watch(() => props.modelValue, (val) => {
+  localValue.value = val?.[0]?.value || '';
+});
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  localValue.value = target.value;
+  emit('update:modelValue', [{ operator: 'ilike', value: target.value }]);
+}
+</script>

adminforth/commands/postinstall.js

@@ -0,0 +1,15 @@
+import fs from 'fs';
+import path from 'path';
+
+import { execSync } from 'child_process'; 
+const spaPath = path.join(import.meta.dirname, 'dist', 'spa');
+
+
+if (fs.existsSync(spaPath)){ 
+    console.log('Installing SPA dependencies...');
+    execSync('npm ci', { cwd: spaPath, stdio: 'inherit' });
+    console.log('Installed spa dependencies');
+} else {
+    console.log('SPA dependencies not found');
+    console.log('current directory', import.meta.dirname);
+}

adminforth/documentation/blog/2024-10-01-ai-blog/index.md

@@ -199,7 +199,7 @@ model ContentImage {
 Create a migration:
 
 ```bash
-npm run makemigration -- --name add-posts
+npm run makemigration -- --name add-posts && npm run migrate:local
 ```
 
 

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

@@ -89,7 +89,7 @@ This will create a migration file in `migrations` and apply it to the database.
 In future, when you need to add new resources, you need to modify `schema.prisma` (add models, change fields, etc.). After doing any modification you need to create a new migration using next command:
 
 ```bash
-npm run makemigration -- --name <name_of_changes>
+npm run makemigration -- --name init && npm run migrate:local
 ```
 
 Other developers need to pull migration and run `npm run migrateLocal` to apply any unapplied migrations.
@@ -173,7 +173,7 @@ model apartments {
 Run the following command to create a new migration:
 
 ```bash
-npm run makemigration -- --name add-apartments
+npm run makemigration -- --name add-apartments && npm run migrate:local
 ```
 
 ### Step3. Create the `apartments` resource

adminforth/documentation/docs/tutorial/01-helloWorld.md

@@ -122,7 +122,7 @@ model Post {
 Create database using `prisma migrate`:
 
 ```bash
-npm run makemigration --name init
+npm run makemigration --name init && npm run migrate:local
 ```
 
 ## Setting up AdminForth

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

@@ -481,4 +481,119 @@ list: '@/renderers/ZeroStylesRichText.vue',
 //diff-add
 ```
 
-`ZeroStyleRichText` fits well for tasks like email templates preview fields.
+`ZeroStyleRichText` fits well for tasks like email templates preview fields.
+
+
+### Custom filter component for square meters
+
+
+Sometimes standard filters are not enough, and you want to make a convenient UI for selecting a range of apartment areas. For example, buttons with options for “Small (<25 m²)”, “Medium (25–90 m²)” and “Large (>90 m²)”.
+
+```ts title='./custom/SquareMetersFilter.vue'
+<template>
+  <div class="flex flex-col gap-2">
+    <p class="font-medium mb-1 dark:text-white">{{ $t('Square meters filter') }}</p>
+    <div class="flex gap-2">
+      <button
+        v-for="option in options"
+        :key="option.value"
+        type="button"
+        class="flex gap-1 items-center py-1 px-3 text-sm font-medium rounded-default border focus:outline-none focus:z-10 focus:ring-4"
+        :class="{
+          'text-white bg-blue-500 border-blue-500 hover:bg-blue-600 focus:ring-blue-200 dark:focus:ring-blue-800': selected === option.value,
+          'text-gray-900 bg-white border-gray-300 hover:bg-gray-100 hover:text-blue-500 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700': selected !== option.value
+        }"
+        @click="select(option.value)"
+      >
+        {{ $t(option.label) }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+  modelValue: Array<{ operator: string; value: number }> | null;
+}>();
+
+const selected = ref<string | null>(null);
+
+const options = [
+  { value: 'small', label: 'Small' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'large', label: 'Large' }
+];
+
+onMounted(() => {
+  const val = props.modelValue;
+  if (!val || val.length === 0) {
+    selected.value = null;
+    return;
+  }
+
+  const ops = val.map((v) => `${v.operator}:${v.value}`);
+
+  if (ops.includes('lt:25')) selected.value = 'small';
+  else if (ops.includes('gte:25') && ops.includes('lte:90')) selected.value = 'medium';
+  else if (ops.includes('gt:90')) selected.value = 'large';
+  else selected.value = null;
+});
+
+watch(selected, (size) => {
+  if (!size) {
+    emit('update:modelValue', []);
+    return;
+  }
+
+  const filters = {
+    small: [{ operator: 'lt', value: 25 }],
+    medium: [
+      { operator: 'gte', value: 25 },
+      { operator: 'lte', value: 90 }
+    ],
+    large: [{ operator: 'gt', value: 90 }]
+  };
+
+  emit('update:modelValue', filters[size]);
+});
+
+function select(size: string) {
+  selected.value = size;
+
+  switch (size) {
+    case 'small':
+      emit('update:modelValue', [{ operator: 'lt', value: 25 }]);
+      break;
+    case 'medium':
+      emit('update:modelValue', [
+        { operator: 'gte', value: 25 },
+        { operator: 'lte', value: 90 }
+      ]);
+      break;
+    case 'large':
+      emit('update:modelValue', [{ operator: 'gt', value: 90 }]);
+      break;
+  }
+}
+</script>
+```
+
+```ts title='./resources/apartments.ts'
+  columns: [
+    ...
+    {
+      name: 'square_meter', 
+      label: 'Square',
+      //diff-add
+      components: {
+      //diff-add
+        filter: '@@/SquareMetersFilter.vue'
+      //diff-add
+      }
+    },
+    ...
+]

adminforth/documentation/docs/tutorial/05-Plugins/04-RichEditor.md

@@ -159,18 +159,18 @@ model description_image {
 ```
 
 ```bash
-npm run makemigration -- --name add_description_image
+npm run makemigration -- --name add_description_image && npm run migrate:local
 ```
 
 ```bash
 npm i @adminforth/upload --save
 npm i @adminforth/storage-adapter-local --save
 ```
 
-```typescript title="./resources/description_image.ts"
-import AdminForthStorageAdapterLocalFilesystem from "../../adapters/adminforth-storage-adapter-local";
-import { AdminForthResourceInput } from "../../adminforth";
-import UploadPlugin from "../../plugins/adminforth-upload";
+```typescript title="./resources/description_images.ts"
+import AdminForthStorageAdapterLocalFilesystem from "@adminforth/storage-adapter-local";
+import { AdminForthResourceInput } from "adminforth";
+import UploadPlugin from "@adminforth/upload";
 import { v1 as uuid } from "uuid";
 
 export default {
@@ -237,6 +237,20 @@ export default {
   ],
 } as AdminForthResourceInput;
 ```
+Next, add new resource to `index.ts`:
+
+```typescript title="./index.ts"
+import descriptionImage from './resources/description_images.js';
+
+...
+
+  resources: [
+    usersResource,
+    apartments,
+    // diff-add
+    descriptionImage
+  ],
+```
 
 Next, add attachments to RichEditor plugin:
 

adminforth/documentation/docs/tutorial/05-Plugins/11-oauth.md

@@ -299,6 +299,44 @@ plugins: [
 ]
 ```
 
+### Twitch Adapter
+
+Install Adapter:
+
+```
+npm install @adminforth/twitch-oauth-adapter --save
+```
+
+1. Go to the [Twitch dashboard](https://dev.twitch.tv/console/)
+2. Create a new app or select an existing one
+3. In `OAuth Redirect URLs` add `https://your-domain/oauth/callback` (`http://localhost:3500/oauth/callback`)
+4. Go to the app and copy `Client ID`, click to `Generate a new client secret`(in Twitch this button can be used only once for some time, becouse of this dont lose it) button and copy secret .
+5. Add the credentials to your `.env` file:
+
+```bash
+TWITCH_OAUTH_CLIENT_ID=your_twitch_client_id
+TWITCH_OAUTH_CLIENT_SECRET=your_twitch_client_secret
+```
+
+Add the adapter to your plugin configuration:
+
+```typescript title="./resources/adminuser.ts"
+import AdminForthAdapterTwitchOauth2 from '@adminforth/twitch-oauth-adapter';
+
+// ... existing resource configuration ...
+plugins: [
+  new OAuthPlugin({
+    adapters: [
+      ...
+      new AdminForthAdapterTwitchOauth2({
+        clientID: process.env.TWITCH_OAUTH_CLIENT_ID,
+        clientSecret: process.env.TWITCH_OAUTH_CLIENT_SECRET,
+      }),
+    ],
+  }),
+]
+```
+
 ### Need custom provider?
 
 Just fork any existing adapter e.g. [Google](https://github.com/devforth/adminforth-google-oauth-adapter) and adjust it to your needs.