@hed-hog/core 0.0.325 → 0.0.326

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.tsx.ejs

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
@@ -430,6 +431,210 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         </div>
       );
 
+    case SettingComponentEnum.ENTITY_PICKER:
+      if (setting.slug !== 'mail-profile-id') {
+        return (
+          <Input
+            type="text"
+            value={parsedValue || ''}
+            onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+            className={cn(className, 'bg-background')}
+          />
+        );
+      }
+      return (
+        <EntityPicker
+          placeholder={t('selectMailProfile')}
+          value={parsedValue ? Number(parsedValue) : null}
+          onChange={(id) =>
+            handleChangeValue(id != null ? String(id) : '', true)
+          }
+          valueType="number"
+          loadOptions={async ({ page, pageSize, search }) => {
+            const qs = new URLSearchParams({
+              page: String(page),
+              pageSize: String(pageSize),
+            });
+            if (search) qs.set('search', search);
+            const response: any = await request({
+              url: `/mail-profile?${qs}`,
+            });
+            const paged = response.data;
+            return {
+              items: paged?.data ?? [],
+              hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
+            };
+          }}
+          getOptionValue={(opt) => opt.id as number}
+          getOptionLabel={(opt) => String(opt.name ?? '')}
+          getOptionDescription={(opt) => String((opt as any).from_email ?? '')}
+          mapSearchToCreateValues={(search) => ({
+            name: search,
+            provider: 'SMTP',
+          })}
+          showCreateButton
+          onCreate={async (values) => {
+            const slug = (values.name || 'profile')
+              .toLowerCase()
+              .normalize('NFD')
+              .replace(/[\u0300-\u036f]/g, '')
+              .replace(/[^a-z0-9]+/g, '-')
+              .replace(/^-+|-+$/g, '');
+            const response: any = await request({
+              url: '/mail-profile',
+              method: 'POST',
+              data: { ...values, slug },
+            });
+            return response.data;
+          }}
+          renderCreateContent={({ values, setValue }) => {
+            const provider = values.provider || 'SMTP';
+            return (
+              <div className="space-y-4">
+                <div className="space-y-1">
+                  <Label>Name *</Label>
+                  <Input
+                    value={values.name || ''}
+                    onChange={(e) => setValue('name', e.target.value)}
+                    placeholder="My Mail Profile"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label>From Email *</Label>
+                  <Input
+                    type="email"
+                    value={values.from_email || ''}
+                    onChange={(e) => setValue('from_email', e.target.value)}
+                    placeholder="no-reply@example.com"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label>Provider *</Label>
+                  <Select
+                    value={provider}
+                    onValueChange={(v) => setValue('provider', v)}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="SMTP">SMTP</SelectItem>
+                      <SelectItem value="GMAIL">Gmail</SelectItem>
+                      <SelectItem value="SES">Amazon SES</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                {provider === 'SMTP' && (
+                  <>
+                    <div className="space-y-1">
+                      <Label>SMTP Host *</Label>
+                      <Input
+                        value={values.smtp_host || ''}
+                        onChange={(e) => setValue('smtp_host', e.target.value)}
+                        placeholder="smtp.example.com"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>SMTP Port *</Label>
+                      <Input
+                        type="number"
+                        value={values.smtp_port || '587'}
+                        onChange={(e) => setValue('smtp_port', e.target.value)}
+                        placeholder="587"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>SMTP Username *</Label>
+                      <Input
+                        value={values.smtp_username || ''}
+                        onChange={(e) =>
+                          setValue('smtp_username', e.target.value)
+                        }
+                        placeholder="user@example.com"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>SMTP Password *</Label>
+                      <Input
+                        type="password"
+                        value={values.smtp_password || ''}
+                        onChange={(e) =>
+                          setValue('smtp_password', e.target.value)
+                        }
+                      />
+                    </div>
+                  </>
+                )}
+                {provider === 'GMAIL' && (
+                  <>
+                    <div className="space-y-1">
+                      <Label>Client ID *</Label>
+                      <Input
+                        value={values.gmail_client_id || ''}
+                        onChange={(e) =>
+                          setValue('gmail_client_id', e.target.value)
+                        }
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>Client Secret *</Label>
+                      <Input
+                        type="password"
+                        value={values.gmail_client_secret || ''}
+                        onChange={(e) =>
+                          setValue('gmail_client_secret', e.target.value)
+                        }
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>Refresh Token *</Label>
+                      <Input
+                        value={values.gmail_refresh_token || ''}
+                        onChange={(e) =>
+                          setValue('gmail_refresh_token', e.target.value)
+                        }
+                      />
+                    </div>
+                  </>
+                )}
+                {provider === 'SES' && (
+                  <>
+                    <div className="space-y-1">
+                      <Label>Access Key ID *</Label>
+                      <Input
+                        value={values.ses_access_key_id || ''}
+                        onChange={(e) =>
+                          setValue('ses_access_key_id', e.target.value)
+                        }
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>Secret Access Key *</Label>
+                      <Input
+                        type="password"
+                        value={values.ses_secret_access_key || ''}
+                        onChange={(e) =>
+                          setValue('ses_secret_access_key', e.target.value)
+                        }
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>Region *</Label>
+                      <Input
+                        value={values.ses_region || ''}
+                        onChange={(e) => setValue('ses_region', e.target.value)}
+                        placeholder="us-east-1"
+                      />
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          }}
+          className={cn(className, 'w-full min-w-0 md:min-w-50')}
+        />
+      );
+
     default:
       return (
         <Input