@omnsight/osint-entity-components 0.2.4 → 0.2.6

package/src/avatars/layouts/AvatarDropdown.tsx

@@ -28,7 +28,7 @@ export const AvatarDropdown: React.FC<Props> = ({ children, avatarOnOpen, avatar
           radius="xl"
           onClick={() => setOpened((o) => !o)}
         >
-          {opened ? avatarOnOpen : avatarOnClose}
+          {opened ? avatarOnClose : avatarOnOpen}
         </ActionIcon>
       </Popover.Target>
       <Popover.Dropdown

package/src/avatars/layouts/AvatarSpan.tsx

@@ -3,9 +3,14 @@ import { Avatar } from '@mantine/core';
 import { EmptyAvatar } from '../EmptyAvatar';
 
 interface Props {
+  showEmptyAvatar?: boolean;
   children: React.ReactNode[];
 }
 
-export const AvatarSpan: React.FC<Props> = ({ children }) => {
-  return <Avatar.Group>{children.length === 0 ? <EmptyAvatar /> : children}</Avatar.Group>;
+export const AvatarSpan: React.FC<Props> = ({ showEmptyAvatar = true, children }) => {
+  return (
+    <Avatar.Group>
+      {children.length === 0 && showEmptyAvatar ? <EmptyAvatar /> : children}
+    </Avatar.Group>
+  );
 };

package/src/forms/BaseForm.tsx

@@ -0,0 +1,138 @@
+import { modals } from '@mantine/modals';
+import { Paper, Group, Title, ActionIcon, LoadingOverlay, Text, Tooltip } from '@mantine/core';
+import { CheckCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import {
+  useForm,
+  type DefaultValues,
+  type FieldValues,
+  type UseFormReturn,
+  type SubmitHandler,
+  FormProvider,
+} from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { get } from 'lodash';
+import { type CSSProperties } from 'react';
+
+interface Props<T extends FieldValues> {
+  title: string;
+  icon?: React.ReactNode;
+  titleRight?: React.ReactNode;
+  onlyShowEditOnDirty: boolean;
+  onSubmit?: SubmitHandler<T>;
+  onUpdate?: (data: Partial<T>) => void;
+  onClose: () => void;
+  defaultValues: DefaultValues<T>;
+  exitButton?: React.ReactNode;
+  children: (methods: UseFormReturn<T>) => React.ReactNode;
+  style?: CSSProperties;
+}
+
+export function BaseForm<T extends FieldValues>({
+  title,
+  icon,
+  titleRight,
+  onlyShowEditOnDirty,
+  onSubmit,
+  onUpdate,
+  onClose,
+  defaultValues,
+  exitButton,
+  children,
+  style,
+}: Props<T>) {
+  const { t } = useTranslation();
+  const methods = useForm<T>({ defaultValues });
+  const {
+    handleSubmit,
+    reset,
+    formState: { isSubmitting, isDirty, dirtyFields },
+  } = methods;
+
+  const truncateString = (str: string, num: number) => {
+    if (str.length <= num) return str;
+    return str.slice(0, num) + '...';
+  };
+
+  const handleInternalSubmit = handleSubmit(async (data) => {
+    if (onUpdate) {
+      const dirtyValues: Partial<T> = {};
+      for (const key in dirtyFields) {
+        if (dirtyFields[key]) {
+          dirtyValues[key as keyof T] = get(data, key);
+        }
+      }
+      onUpdate(dirtyValues);
+      reset(data);
+    } else if (onSubmit) {
+      onSubmit(data);
+    }
+    onClose();
+  });
+
+  const handleCancel = () => {
+    if (!isDirty) {
+      onClose();
+    } else {
+      modals.openConfirmModal({
+        title: t('components.forms.BaseForm.discardChanges'),
+        centered: true,
+        children: <Text size="sm">{t('components.forms.BaseForm.unsavedChangesWarning')}</Text>,
+        labels: { confirm: t('common.confirm'), cancel: t('common.cancel') },
+        confirmProps: { color: 'red' },
+        zIndex: 10001,
+        onConfirm: () => {
+          reset();
+          onClose();
+        },
+      });
+    }
+  };
+
+  return (
+    <Paper
+      p="md"
+      shadow="sm"
+      pos="relative"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        border: '1px solid var(--mantine-color-default-border)',
+        ...style,
+      }}
+    >
+      <LoadingOverlay visible={isSubmitting} overlayProps={{ radius: 'sm', blur: 1 }} />
+      <Group justify="space-between" mb="md">
+        <Group>
+          {icon}
+          <Tooltip label={title}>
+            <Title order={4}>{truncateString(title, 25)}</Title>
+          </Tooltip>
+          {titleRight}
+          {(!onlyShowEditOnDirty || isDirty) && (
+            <ActionIcon
+              radius="xl"
+              variant={isDirty ? 'filled' : 'subtle'}
+              color={isDirty ? 'green' : 'gray'}
+              onClick={handleInternalSubmit}
+              style={{
+                cursor: isDirty ? 'pointer' : 'not-allowed',
+                opacity: isDirty ? 1 : 0.5,
+              }}
+              disabled={!isDirty && !isSubmitting}
+            >
+              <CheckCircleIcon style={{ width: 16, height: 16 }} />
+            </ActionIcon>
+          )}
+        </Group>
+        {exitButton ? (exitButton) : (
+          <ActionIcon color="red" onClick={handleCancel}>
+            <XMarkIcon style={{ width: 16, height: 16 }} />
+          </ActionIcon>
+        )}
+      </Group>
+      <FormProvider {...methods}>
+        <form onSubmit={handleInternalSubmit}>{children(methods)}</form>
+      </FormProvider>
+    </Paper>
+  );
+}

package/src/forms/EditableAttributes.tsx

@@ -0,0 +1,131 @@
+import { Button, Group, NumberInput, Select, Stack, Switch, Text, TextInput } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { randomId } from '@mantine/hooks';
+
+interface Props {
+  value: Record<string, any>;
+  onChange: (value: Record<string, any>) => void;
+  isEditing?: boolean;
+}
+
+export const EditableAttributes: React.FC<Props> = ({ value, onChange, isEditing }) => {
+  const { t } = useTranslation();
+
+  const handleAdd = () => {
+    onChange({ ...value, [randomId()]: { key: '', value: '', type: 'text' } });
+  };
+
+  const handleKeyChange = (id: string, newKey: string) => {
+    onChange({ ...value, [id]: { ...value[id], key: newKey } });
+  };
+
+  const handleValueChange = (id: string, newValue: any) => {
+    onChange({ ...value, [id]: { ...value[id], value: newValue } });
+  };
+
+  const handleTypeChange = (id: string, newType: 'text' | 'number' | 'toggle') => {
+    let defaultValue: any = '';
+    if (newType === 'number') {
+      defaultValue = 0;
+    } else if (newType === 'toggle') {
+      defaultValue = false;
+    }
+    onChange({ ...value, [id]: { ...(value[id] || {}), type: newType, value: defaultValue } });
+  };
+
+  const handleRemove = (id: string) => {
+    const { [id]: _, ...rest } = value;
+    onChange(rest);
+  };
+
+  if (!isEditing) {
+    return (
+      <Stack gap="xs">
+        {Object.entries(value)
+          .filter(
+            ([key, val]) =>
+              key !== 'icon_color' && val !== null && typeof val === 'object' && 'key' in val,
+          )
+          .map(([id, val]: [string, any]) => (
+            <Group key={id} gap="xs">
+              <Text size="sm" fw={500}>
+                {val.key}:
+              </Text>
+              <Text size="sm">{String(val.value)}</Text>
+            </Group>
+          ))}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="xs" pb="sm">
+      {Object.entries(value)
+        .filter(
+          ([key, val]) =>
+            key !== 'icon_color' && val !== null && typeof val === 'object' && 'key' in val,
+        )
+        .map(([id, val]: [string, any]) => {
+          return (
+            <Group key={id} gap="xs">
+              <TextInput
+                w={75}
+                value={val.key}
+                onChange={(e) => handleKeyChange(id, e.currentTarget.value)}
+                placeholder={t('placeholder.key')}
+              />
+              <Select
+                w={100}
+                value={val.type}
+                onChange={(newType) => {
+                  if (newType) {
+                    handleTypeChange(id, newType as 'text' | 'number' | 'toggle');
+                  }
+                }}
+                placeholder={t('placeholder.type')}
+                data={[
+                  { value: 'text', label: t('common.types.text') },
+                  { value: 'number', label: t('common.types.number') },
+                  { value: 'toggle', label: t('common.types.toggle') },
+                ]}
+              />
+              {val.type === 'text' && (
+                <TextInput
+                  w={150}
+                  value={val.value}
+                  onChange={(e) => handleValueChange(id, e.currentTarget.value)}
+                  placeholder={t('placeholder.value')}
+                />
+              )}
+              {val.type === 'number' && (
+                <NumberInput
+                  w={150}
+                  value={val.value}
+                  onChange={(v) => handleValueChange(id, v)}
+                  placeholder={t('placeholder.value')}
+                />
+              )}
+              {val.type === 'toggle' && (
+                <Switch
+                  w={150}
+                  checked={val.value}
+                  onChange={(e) => handleValueChange(id, e.currentTarget.checked)}
+                />
+              )}
+              <Button color="red" variant="subtle" size="xs" onClick={() => handleRemove(id)}>
+                {t('common.remove')}
+              </Button>
+            </Group>
+          );
+        })}
+      <Button
+        onClick={handleAdd}
+        size="xs"
+        mt="sm"
+        disabled={Object.values(value).some((v: any) => v && v.key === '')}
+      >
+        {t('common.add')}
+      </Button>
+    </Stack>
+  );
+};

package/src/forms/EventForm/EditableForm.tsx

@@ -0,0 +1,78 @@
+import { useState, type PropsWithChildren, type CSSProperties } from "react";
+import type { Event, Source, Permissive } from "omni-osint-crud-client";
+import { EditingForm } from "./EditingForm";
+import { StaticForm } from "./StaticForm";
+
+interface Props extends PropsWithChildren {
+  event: Event;
+  sources?: Source[];
+  isAdmin?: boolean;
+  onSubmit?: (data: Event) => void;
+  onUpdate?: (data: Partial<Event>) => void;
+  onUpdatePermissive?: (data: Permissive) => void;
+  onClose?: () => void;
+  exitButton?: React.ReactNode;
+  style?: CSSProperties;
+}
+
+export const EventForm: React.FC<Props> = ({
+  event,
+  sources = [],
+  isAdmin = false,
+  onSubmit,
+  onUpdate,
+  onUpdatePermissive,
+  onClose,
+  exitButton,
+  children,
+  style,
+}) => {
+  const [isEditing, setIsEditing] = useState(onSubmit !== undefined || false);
+
+  if (
+    onSubmit !== undefined &&
+    (onUpdate !== undefined || onUpdatePermissive !== undefined)
+  ) {
+    throw new Error(
+      "onSubmit cannot be defined at the same time with onUpdate or onUpdatePermissive",
+    );
+  }
+
+  const handlClose = () => {
+    if (onUpdate !== undefined) {
+      setIsEditing(false);
+    }
+    onClose?.();
+  };
+
+  const handleDoubleClick = () => {
+    if (onUpdate !== undefined) {
+      setIsEditing(true);
+    }
+  };
+
+  return isEditing ? (
+    <EditingForm
+      event={event}
+      sources={sources}
+      onSubmit={onSubmit}
+      onUpdate={onUpdate}
+      onClose={handlClose}
+      children={children}
+      style={style}
+    />
+  ) : (
+    <StaticForm
+      event={event}
+      sources={sources}
+      isAdmin={isAdmin}
+      onUpdate={onUpdatePermissive}
+      onClose={handlClose}
+      onDoubleClick={handleDoubleClick}
+      editModeEnabled={onUpdate !== undefined}
+      exitButton={exitButton || <></>}
+      children={children}
+      style={style}
+    />
+  );
+};