feat(frontend): Add counter text length for inputs inside main settings AdminCP

aXenDeveloper · aXenDeveloper · commit 89053396ddd9 · 2024-12-18T17:31:00.000+01:00
diff --git a/apps/frontend/src/plugins/admin/langs/en.json b/apps/frontend/src/plugins/admin/langs/en.json
@@ -77,13 +77,16 @@
           "title": "Main Settings",
           "desc": "These settings are used to configure the main features of your website.",
           "name": {
-            "label": "Name Site"
+            "label": "Name Site",
+            "seo": "Recommended between 50-60 characters."
           },
           "short_name": {
-            "label": "Short Name Site"
+            "label": "Short Name Site",
+            "seo": "Recommended max 20 characters."
           },
           "description": {
-            "label": "Description Site"
+            "label": "Description Site",
+            "seo": "Recommended between 120-160 characters."
           },
           "contact_email": {
             "label": "Contact Email",
diff --git a/packages/backend/src/core/admin/languages/services/create.service.ts b/packages/backend/src/core/admin/languages/services/create.service.ts
@@ -8,12 +8,13 @@ import {
 } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { existsSync } from 'fs';
-import { cp } from 'fs/promises';
+import { cp, readFile, writeFile } from 'fs/promises';
 import { join } from 'path';
 import {
   CreateLanguagesAdminBody,
   LanguagesAdminObj,
 } from 'vitnode-shared/admin/language.dto';
+import { ManifestWithLang } from 'vitnode-shared/manifest.dto';
 
 @Injectable()
 export class CreateLanguagesAdminService {
@@ -77,6 +78,12 @@ export class CreateLanguagesAdminService {
     }
 
     await this.cloneLangInPlugins(code);
+    const manifestPath = join(
+      ABSOLUTE_PATHS.uploads.public,
+      'assets',
+      code,
+      'manifest.webmanifest',
+    );
 
     // Clone JSON for manifest
     await cp(
@@ -86,14 +93,16 @@ export class CreateLanguagesAdminService {
         'en',
         'manifest.webmanifest',
       ),
-      join(
-        ABSOLUTE_PATHS.uploads.public,
-        'assets',
-        code,
-        'manifest.webmanifest',
-      ),
+      manifestPath,
     );
 
+    // Change language code in manifest
+    const manifest = JSON.parse(
+      await readFile(manifestPath, 'utf8'),
+    ) as ManifestWithLang;
+    manifest.lang = code;
+    await writeFile(manifestPath, JSON.stringify(manifest, null, 2));
+
     const [newLanguage] = await this.databaseService.db
       .insert(core_languages)
       .values({
diff --git a/packages/backend/src/core/middleware/services/show.service.ts b/packages/backend/src/core/middleware/services/show.service.ts
@@ -23,7 +23,7 @@ export class ShowMiddlewareService {
     private readonly configService: ConfigHelperService,
   ) {}
 
-  protected async getManifest({
+  protected async getManifests({
     langCodes,
   }: {
     langCodes: string[];
@@ -72,7 +72,7 @@ export class ShowMiddlewareService {
     if (!plugin_code_default) {
       throw new InternalServerErrorException('Plugin not found');
     }
-    const manifest = await this.getManifest({
+    const manifest = await this.getManifests({
       langCodes: langs.map(lang => lang.code),
     });
     const SSOs = await this.ssoHelper.getActiveSSOs();
diff --git a/packages/frontend/src/components/form/fields/checkbox.tsx b/packages/frontend/src/components/form/fields/checkbox.tsx
@@ -26,7 +26,7 @@ export function AutoFormCheckbox({
   return (
     <div
       className={cn({
-        'flex items-start space-x-3 space-y-0 rounded-md border p-4':
+        'flex items-start space-x-3 rounded-md border p-4':
           label && description && theme === 'vertical',
         '@xs:flex-row @xs:gap-6 flex w-full flex-col items-start gap-2':
           theme === 'horizontal',
diff --git a/packages/frontend/src/components/form/fields/common/wrapper.tsx b/packages/frontend/src/components/form/fields/common/wrapper.tsx
@@ -14,7 +14,7 @@ export const AutoFormWrapper = ({
     <FormItem
       className={cn(
         {
-          '@xs:flex-row @xs:gap-6 flex w-full flex-col items-start gap-2 space-y-0':
+          '@xs:flex-row @xs:gap-6 flex w-full flex-col items-start gap-2':
             theme === 'horizontal',
         },
         className,
diff --git a/packages/frontend/src/components/form/fields/radio-group.tsx b/packages/frontend/src/components/form/fields/radio-group.tsx
@@ -76,14 +76,11 @@ export function AutoFormRadioGroup({
             const description = labels?.[value[1]]?.description;
 
             return (
-              <FormItem
-                className="flex items-center gap-3 space-y-0"
-                key={value}
-              >
+              <FormItem className="flex items-center gap-3" key={value}>
                 <FormControl>
                   <RadioGroupItem value={value[1]} />
                 </FormControl>
-                <FormLabel className="flex items-center space-y-0 font-normal">
+                <FormLabel className="flex items-center font-normal">
                   <span>{label}</span>
 
                   {description && (
diff --git a/packages/frontend/src/components/ui/text-language-input.tsx b/packages/frontend/src/components/ui/text-language-input.tsx
@@ -21,22 +21,23 @@ interface Props
   > {
   className?: string;
   onChange: (value: StringLanguage[]) => void;
+  onLanguageChange?: (language: string) => void;
   value: StringLanguage[];
 }
 
 export const StringLanguageInput = ({
   className,
   onChange,
   value,
+  onLanguageChange,
   ...props
 }: Props) => {
   const locale = useLocale();
-  const { languages: languagesFromGlobal } = useMiddlewareData();
-  const defaultLanguage =
-    languagesFromGlobal.find(item => item.default)?.code ?? 'en';
+  const { languages: languagesFromGlobal, languages_code_default } =
+    useMiddlewareData();
   const languages = languagesFromGlobal.filter(item => item.allow_in_input);
   const [selectedLanguage, setSelectedLanguage] = React.useState(
-    locale || defaultLanguage,
+    locale || languages_code_default,
   );
   const valueAsArray = Array.isArray(value) ? value : [];
   const currentValue =
@@ -76,7 +77,13 @@ export const StringLanguageInput = ({
       />
 
       {languages.length > 1 && (
-        <Select onValueChange={setSelectedLanguage} value={selectedLanguage}>
+        <Select
+          onValueChange={val => {
+            setSelectedLanguage(val);
+            onLanguageChange?.(val);
+          }}
+          value={selectedLanguage}
+        >
           <FormControl>
             <SelectTrigger className="w-40">
               <SelectValue />
diff --git a/packages/frontend/src/views/admin/views/core/settings/main/components/desc.tsx b/packages/frontend/src/views/admin/views/core/settings/main/components/desc.tsx
@@ -0,0 +1,52 @@
+import { AutoFormComponentProps } from '@/components/form/auto-form';
+import { AutoFormStringLanguageInput } from '@/components/form/fields/text-language-input';
+import { Badge } from '@/components/ui/badge';
+import { TooltipWrapper } from '@/components/ui/tooltip';
+import { useLocale, useTranslations } from 'next-intl';
+import React from 'react';
+import { StringLanguage } from 'vitnode-shared/string-language.dto';
+
+export const DescFieldContentMainSettingsCoreAdmin = ({
+  defaultLanguage,
+  ...props
+}: AutoFormComponentProps & {
+  defaultLanguage: string;
+}) => {
+  const t = useTranslations('admin.core.settings.main');
+  const locale = useLocale();
+  const [selectedLanguage, setSelectedLanguage] = React.useState(
+    locale || defaultLanguage,
+  );
+  const current: StringLanguage = props.field.value.find(
+    (item: StringLanguage) => item.language_code === selectedLanguage,
+  ) ?? {
+    language_code: selectedLanguage,
+    value: '',
+  };
+
+  return (
+    <>
+      <AutoFormStringLanguageInput
+        {...props}
+        onLanguageChange={setSelectedLanguage}
+      />
+
+      <div className="flex w-32 items-center justify-center">
+        <TooltipWrapper content={t('description.seo')}>
+          <Badge
+            className="mt-1"
+            variant={
+              current.value.length >= 50 && current.value.length < 120
+                ? 'outline'
+                : current.value.length > 160 || current.value.length < 50
+                  ? 'destructive'
+                  : 'default'
+            }
+          >
+            {current.value.length}/160
+          </Badge>
+        </TooltipWrapper>
+      </div>
+    </>
+  );
+};
diff --git a/packages/frontend/src/views/admin/views/core/settings/main/content.tsx b/packages/frontend/src/views/admin/views/core/settings/main/content.tsx
@@ -3,10 +3,12 @@
 import { AutoForm } from '@/components/form/auto-form';
 import { AutoFormInput } from '@/components/form/fields/input';
 import { AutoFormSelect } from '@/components/form/fields/select';
-import { AutoFormStringLanguageInput } from '@/components/form/fields/text-language-input';
+import { Badge } from '@/components/ui/badge';
+import { TooltipWrapper } from '@/components/ui/tooltip';
 import { useTranslations } from 'next-intl';
 import { ShowMiddlewareObj } from 'vitnode-shared/middleware.dto';
 
+import { DescFieldContentMainSettingsCoreAdmin } from './components/desc';
 import { useSettingsCoreAdmin } from './hooks/use-settings-core-admin';
 
 export const ContentMainSettingsCoreAdmin = (props: ShowMiddlewareObj) => {
@@ -18,17 +20,66 @@ export const ContentMainSettingsCoreAdmin = (props: ShowMiddlewareObj) => {
       fields={[
         {
           id: 'site_name',
-          component: AutoFormInput,
+          component: props => (
+            <>
+              <AutoFormInput {...props} />
+              <div className="flex w-32 items-center justify-center">
+                <TooltipWrapper content={t('name.seo')}>
+                  <Badge
+                    className="mt-1"
+                    variant={
+                      props.field.value.length <= 50 &&
+                      props.field.value.length >= 3
+                        ? 'outline'
+                        : props.field.value.length > 60 ||
+                            props.field.value.length < 3
+                          ? 'destructive'
+                          : 'default'
+                    }
+                  >
+                    {props.field.value.length}/60
+                  </Badge>
+                </TooltipWrapper>
+              </div>
+            </>
+          ),
           label: t('name.label'),
         },
         {
           id: 'site_short_name',
-          component: AutoFormInput,
+          component: props => (
+            <>
+              <AutoFormInput {...props} />
+              <div className="flex w-32 items-center justify-center">
+                <TooltipWrapper content={t('short_name.seo')}>
+                  <Badge
+                    className="mt-1"
+                    variant={
+                      props.field.value.length <= 5 &&
+                      props.field.value.length >= 3
+                        ? 'outline'
+                        : props.field.value.length > 20 ||
+                            props.field.value.length < 3
+                          ? 'destructive'
+                          : 'default'
+                    }
+                  >
+                    {props.field.value.length}/20
+                  </Badge>
+                </TooltipWrapper>
+              </div>
+            </>
+          ),
           label: t('short_name.label'),
         },
         {
           id: 'site_description',
-          component: AutoFormStringLanguageInput,
+          component: componentProps => (
+            <DescFieldContentMainSettingsCoreAdmin
+              {...componentProps}
+              defaultLanguage={props.languages_code_default}
+            />
+          ),
           label: t('description.label'),
         },
         {
diff --git a/packages/frontend/src/views/admin/views/core/settings/main/hooks/use-settings-core-admin.ts b/packages/frontend/src/views/admin/views/core/settings/main/hooks/use-settings-core-admin.ts
@@ -11,8 +11,8 @@ export const useSettingsCoreAdmin = (data: ShowMiddlewareObj) => {
   const t = useTranslations('core.global');
 
   const formSchema = z.object({
-    site_name: z.string().min(1).default(data.site_name),
-    site_short_name: z.string().min(1).default(data.site_short_name),
+    site_name: z.string().min(3).default(data.site_name),
+    site_short_name: z.string().min(3).default(data.site_short_name),
     site_description: zodLanguageInput
       .default(data.site_description ?? [])
       .optional(),

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export const AutoFormWrapper = ({`
`14`	`14`	`<FormItem`
`15`	`15`	`className={cn(`
`16`	`16`	`{`
`17`		`- '@xs:flex-row @xs:gap-6 flex w-full flex-col items-start gap-2 space-y-0':`
	`17`	`+ '@xs:flex-row @xs:gap-6 flex w-full flex-col items-start gap-2':`
`18`	`18`	`theme === 'horizontal',`
`19`	`19`	`},`
`20`	`20`	`className,`