feat: wip

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasList.tsx

@@ -1,32 +1,96 @@
-import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { Alias } from 'ontime-types';
 
-import ModalLink from '../../../../features/modals/ModalLink';
+import useAliases from '../../../../common/hooks-query/useAliases';
+import ModalLoader from '../../../../features/modals/modal-loader/ModalLoader';
 import * as Panel from '../PanelUtils';
 
-const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';
+import UrlAliasListItem from './UrlAliasListItem';
+
+type Aliases = {
+  aliases: Alias[];
+};
 
 export default function UrlAliasList() {
+  const { data, status, isFetching } = useAliases();
+
+  // const { emitError } = useEmitLog();
+  const {
+    control,
+    // handleSubmit,
+    register,
+    reset,
+    formState: { isSubmitting, isDirty, isValid },
+  } = useForm<Aliases>({
+    defaultValues: { aliases: data },
+    values: { aliases: data || [] },
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  console.log({ isSubmitting, isDirty, isValid, data });
+
+  const { fields, remove } = useFieldArray({
+    name: 'aliases',
+    control,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({ aliases: data });
+    }
+  }, [data, reset]);
+
+  // const onReset = () => {
+  //   reset({ aliases: data });
+  // };
+
+  // const addNew = () => {
+  //   if (fields.length > 20) {
+  //     emitError('Maximum amount of aliases reached (20)');
+  //     return;
+  //   }
+  //   append({
+  //     enabled: false,
+  //     alias: '',
+  //     pathAndParams: '',
+  //   });
+  // };
+
+  const disableInputs = status === 'pending';
+  // const hasTooManyOptions = fields.length >= 20;
+
+  console.log('bolama');
+  console.log({ isFetching });
+
+  if (isFetching) {
+    return <ModalLoader />;
+  }
+
   return (
-    <>
-      <Panel.Header>URL Aliases</Panel.Header>
-      <Panel.Section>
-        <Panel.Card>
-          <div>
-            <Alert status='info' variant='ontime-on-light-info'>
-              <AlertIcon />
-              <div>
-                <AlertTitle>URL Aliases</AlertTitle>
-                <AlertDescription>
-                  Custom aliases allow providing a short name for any ontime URL. <br />
-                  It serves two primary purposes: <br />
-                  - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
-                  <ModalLink href={aliasesDocsUrl}>For more information, see the docs</ModalLink>
-                </AlertDescription>
-              </div>
-            </Alert>
-          </div>
-        </Panel.Card>
-      </Panel.Section>
-    </>
+    <Panel.Table>
+      <thead>
+        <tr>
+          <th>Alias</th>
+          <th>Path and Params</th>
+          <th>Enabled</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {fields.map((alias) => {
+          return (
+            <UrlAliasListItem
+              alias={alias.alias}
+              enabled={alias.enabled}
+              pathAndParams={alias.pathAndParams}
+              key={alias.id}
+            />
+          );
+        })}
+      </tbody>
+    </Panel.Table>
   );
 }

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasListItem.tsx

@@ -0,0 +1,102 @@
+import { IconButton, Menu, MenuButton, MenuItem, MenuList, Switch } from '@chakra-ui/react';
+import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
+
+export type EditMode = 'rename' | 'duplicate' | null;
+
+interface UrlAliasListItemProps {
+  alias: string;
+  enabled: boolean;
+  pathAndParams: string;
+  // onToggleEditMode: (editMode: EditMode, filename: string | null) => void;
+  // onSubmit: () => void;
+  // onRefetch: () => Promise<void>;
+  // editingFilename: string | null;
+  // editingMode: EditMode | null;
+}
+
+export default function UrlAliasListItem({ alias, enabled, pathAndParams }: UrlAliasListItemProps) {
+  // const [submitError, setSubmitError] = useState<string | null>(null);
+
+  // const handleSubmitRename = async (values: ProjectFormValues) => {
+  //   try {
+  //     setSubmitError(null);
+
+  //     if (!values.filename) {
+  //       setSubmitError('Filename cannot be blank');
+  //       return;
+  //     }
+  //     await renameProject(filename, values.filename);
+  //     await onRefetch();
+  //     onSubmit();
+  //   } catch (error) {
+  //     setSubmitError(maybeAxiosError(error));
+  //   }
+  // };
+
+  // const handleSubmitDuplicate = async (values: ProjectFormValues) => {
+  //   try {
+  //     setSubmitError(null);
+
+  //     if (!values.filename) {
+  //       setSubmitError('Filename cannot be blank');
+  //       return;
+  //     }
+  //     await duplicateProject(filename, values.filename);
+  //     await onRefetch();
+  //     onSubmit();
+  //   } catch (error) {
+  //     setSubmitError(maybeAxiosError(error));
+  //   }
+  // };
+
+  // const handleToggleEditMode = (editMode: EditMode, filename: string | null) => {
+  //   setSubmitError(null);
+  //   onToggleEditMode(editMode, filename);
+  // };
+
+  return (
+    <tr key={alias}>
+      <td>{alias}</td>
+      <td>{pathAndParams}</td>
+      <td>
+        <Switch
+          variant='ontime-on-light'
+          defaultValue={enabled}
+          // isDisabled={disableInputs}
+        />
+      </td>
+      <td>
+        <ActionMenu />
+      </td>
+      {/* <td>{new Date(updatedAt).toLocaleString()}</td>
+      <td className={style.actionButton}></td> */}
+    </tr>
+  );
+}
+
+function ActionMenu() {
+  const handleRename = () => {
+    // onChangeEditMode('rename', filename);
+  };
+
+  const handleDelete = async () => {
+    // await deleteProject();
+    // await onRefetch();
+  };
+
+  return (
+    <Menu variant='ontime-on-dark' size='sm'>
+      <MenuButton
+        as={IconButton}
+        aria-label='Options'
+        icon={<IoEllipsisHorizontal />}
+        variant='ontime-ghosted'
+        size='sm'
+      />
+      <MenuList>
+        <MenuItem onClick={handleRename}>Edit</MenuItem>
+        <MenuItem onClick={handleDelete}>Delete</MenuItem>
+      </MenuList>
+    </Menu>
+  );
+}

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.tsx

@@ -3,6 +3,8 @@ import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react
 import ModalLink from '../../../../features/modals/ModalLink';
 import * as Panel from '../PanelUtils';
 
+import UrlAliasList from './UrlAliasList';
+
 import style from './UrlAliasPanel.module.scss';
 
 const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';
@@ -26,6 +28,7 @@ export default function UrlAliasPanel() {
                 </AlertDescription>
               </div>
             </Alert>
+            <UrlAliasList />
           </div>
         </Panel.Card>
       </Panel.Section>