@autobusal/admin-agents 1.0.0

package/Browse.tsx

@@ -0,0 +1,104 @@
+import { TFunction } from 'i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Meta, ContactInfo, Avatar, Table, Row } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import { DisplayStatus, getParams, success } from '@autobusal/utilities';
+import { GetAgents, DeleteAgent } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Browse = ({ url, t }: Props): JSX.Element => {
+  const [ searchParams ] = useSearchParams();
+
+  usePage('agents');
+
+  const { data, isLoading, isFetching, refetch } = GetAgents(getParams(searchParams, ['page', 'sort', 'order', 'q']));
+
+  const { mutate: Delete } = DeleteAgent();
+
+  const navigate = useNavigate();
+
+  const onDelete = (id: number): void => {
+    Delete(id, {
+      onSuccess: () => {
+        success(t('admin_agents.manage.messages.deleted', { ns: 'common' }));
+
+        refetch();
+      }
+    });
+  };
+
+  const onLoginAs = (id: number): void => {
+    if (window.confirm(t('admin_agents.browse.confirm', { ns: 'common' }))) {
+      const find = data?.data.find(item => item.id === id);
+      navigate(`/account/login_as/${ find?.user.id }`);
+    }
+  };
+
+  const rows = data?.data.map(item => (
+    <Row
+      key={ item.id }
+      id={ item.id }
+      data={ [
+        <Avatar key={ item.id } display={ item } />,
+        item.nipt,
+        item.user.email,
+        <ContactInfo key={ item.id } item={ item } t={ t } />,
+        DisplayStatus(item.user.status, t)
+      ] }
+    />
+  ));
+
+  return (
+    <Meta title={ t('admin_agents.browse.title', { ns: 'common' }) }>
+      <h1>{ t('admin_agents.browse.title', { ns: 'common' }) }</h1>
+
+      <Table
+        url={ url }
+        columns={ [{
+          name: t('admin_agents.browse.company', { ns: 'common' }),
+          width: 19,
+          slug: 'company',
+          type: 'az'
+        }, {
+          name: t('admin_agents.browse.nipt', { ns: 'common' }),
+          width: 11,
+          slug: 'nipt',
+          type: 'az'
+        }, {
+          name: t('admin_agents.browse.email', { ns: 'common' }),
+          width: 28
+        }, {
+          name: t('admin_agents.browse.info', { ns: 'common' }),
+          slug: 'funds',
+          width: 20
+        }, {
+          name: t('admin_agents.browse.status', { ns: 'common' }),
+          width: 12
+        }] }
+        rows={ rows }
+        pages={ data }
+        sorting={ {
+          slug: 'company',
+          order: 'asc'
+        } }
+        search={ searchParams.get('q') }
+        loading={ isLoading }
+        fetching={ isFetching }
+        t={ t }
+        actions={ [
+          'create', 'search', 'view', 'delete', 'login_as'
+        ] }
+        handlers={ {
+          delete: onDelete,
+          login_as: onLoginAs
+        } }
+      />
+    </Meta>
+  );
+};
+
+export default Browse;

package/Manage.tsx

@@ -0,0 +1,255 @@
+import { TFunction } from 'i18next';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
+import { Meta, BackWithTitle, Viewer, IpLogs, ApiDetails } from '@autobusal/common';
+import { usePage, useSubscriptions, useOperators } from '@autobusal/hooks';
+import { GetStatus, getAllowed, success } from '@autobusal/utilities';
+import { AgentData } from '@autobusal/providers/types/agents';
+import { GetAgent, PostAgent, DeleteAgent } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Manage = ({ url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const [ searchParams ] = useSearchParams();
+
+  const id = Number(params.id);
+
+  usePage('agents');
+
+  const navigate = useNavigate();
+
+  const subscriptions = useSubscriptions('agent');
+  const operators = useOperators();
+
+  const { data } = GetAgent(id);
+
+  const { mutate: Update, isPending: isPendingSave } = PostAgent(id);
+
+  const { mutate: Delete, isPending: isPendingDelete } = DeleteAgent();
+
+  const onSave = (data: AgentData): void => {
+    Update(data, {
+      onSuccess: () => {
+        success(t('admin_agents.manage.messages.saved', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+
+  const onDelete = (): void => {
+    Delete(id, {
+      onSuccess: () => {
+        success(t('admin_agents.manage.messages.deleted', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+  
+  const title = id > 0 ? t('admin_agents.manage.title.update', { company: data?.company, ns: 'common' }) : t('admin_agents.manage.title.new', { ns: 'common' });
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Viewer
+        id={ id }
+        data={ [{
+          label: t('admin_agents.manage.company', { ns: 'common' }),
+          name: 'company',
+          type: 'text',
+          value: data?.company,
+          rules: 'required|min_length:4|max_length:255'
+        }, {
+          label: t('admin_agents.manage.nipt', { ns: 'common' }),
+          name: 'nipt',
+          type: 'text',
+          value: data?.nipt,
+          rules: 'required|min_length:1|max_length:50'
+        }, {}, {
+          label: t('admin_agents.manage.first_name', { ns: 'common' }),
+          name: 'first_name',
+          type: 'text',
+          value: data?.first_name,
+          rules: 'required|min_length:3|max_length:75'
+        }, {
+          label: t('admin_agents.manage.last_name', { ns: 'common' }),
+          name: 'last_name',
+          type: 'text',
+          value: data?.last_name,
+          rules: 'required|min_length:3|max_length:75'
+        }, {}, {
+          label: t('admin_agents.manage.address', { ns: 'common' }),
+          name: 'address',
+          type: 'textarea',
+          value: data?.address,
+          rules: 'required|min_length:5'
+        }, {
+          label: t('admin_agents.manage.city', { ns: 'common' }),
+          name: 'city',
+          type: 'text',
+          value: data?.city,
+          rules: 'required|min_length:2|max_length:40'
+        }, {}, {
+          label: t('admin_agents.manage.mobile', { ns: 'common' }),
+          name: 'mobile',
+          type: 'text',
+          value: data?.mobile,
+          rules: 'required|min_length:10|max_length:20'
+        }, {
+          label: t('admin_agents.manage.mobile_2', { ns: 'common' }),
+          name: 'mobile2',
+          type: 'text',
+          value: data?.mobile2
+        }, {}, {
+          label: t('admin_agents.manage.phone', { ns: 'common' }),
+          name: 'phone',
+          type: 'text',
+          value: data?.phone
+        }, {
+          label: t('admin_agents.manage.fax', { ns: 'common' }),
+          name: 'fax',
+          type: 'text',
+          value: data?.fax
+        }, {}, {
+          label: t('admin_agents.manage.email', { ns: 'common' }),
+          name: 'email',
+          type: 'email'
+        }, {
+          label: t('admin_agents.manage.password', { ns: 'common' }),
+          name: 'password',
+          type: 'password'
+        }, {}, {
+          label: t('admin_agents.manage.description', { ns: 'common' }),
+          name: 'description',
+          type: 'textarea',
+          value: data?.description
+        }, {
+          label: t('admin_agents.manage.website', { ns: 'common' }),
+          name: 'website',
+          type: 'text',
+          value: data?.website
+        }, {
+          label: t('admin_agents.manage.logo', { ns: 'common' }),
+          name: 'logo',
+          type: 'file',
+          value: data?.logo_url
+        }, {
+          label: t('admin_agents.manage.license', { ns: 'common' }),
+          name: 'license',
+          type: 'text',
+          value: data?.license,
+          rules: 'required|min_length:3|max_length:50'
+        }, {
+          label: t('admin_agents.manage.subscription', { ns: 'common' }),
+          name: 'subscription_id',
+          type: 'select',
+          value: data?.user.subscription?.subscription.id,
+          values: subscriptions,
+          rules: 'required',
+          notice: t('admin_agents.manage.subscription_notice', { ns: 'common' })
+        }, {
+          label: t('admin_agents.manage.operators', { ns: 'common' }),
+          name: 'operators',
+          type: 'checkbox-list-all',
+          selected: data?.operators,
+          values: operators
+        }, {
+          label: t('admin_agents.manage.departure', { ns: 'common' }),
+          name: 'departure',
+          type: 'text',
+          value: data?.user.comissions?.departure_edit
+        }, {
+          label: t('admin_agents.manage.departure_self', { ns: 'common' }),
+          name: 'departure_self',
+          type: 'text',
+          value: data?.user.comissions?.departure_self_edit
+        }, {}, {
+          label: t('admin_agents.manage.return', { ns: 'common' }),
+          name: 'return',
+          type: 'text',
+          value: data?.user.comissions?.return_edit
+        }, {
+          label: t('admin_agents.manage.return_self', { ns: 'common' }),
+          name: 'return_self',
+          type: 'text',
+          value: data?.user.comissions?.return_self_edit
+        }, {}, {
+          label: t('admin_agents.manage.unique', { ns: 'common' }),
+          name: 'unique',
+          type: 'select',
+          value: data?.user.comissions?.unique,
+          values: getAllowed(t)
+        }, {
+          label: t('admin_agents.manage.api', { ns: 'common' }),
+          name: 'api',
+          type: 'select',
+          value: data?.user.api?.api,
+          values: getAllowed(t)
+        }, {
+          label: t('admin_agents.manage.bkt', { ns: 'common' }),
+          name: 'bkt',
+          type: 'select',
+          value: data?.user.api?.bkt,
+          values: getAllowed(t)
+        }, {
+          label: t('admin_agents.manage.devpos', { ns: 'common' }),
+          name: 'devpos',
+          type: 'select',
+          value: data?.user.api?.devpos,
+          values: getAllowed(t)
+        }, {
+          label: t('admin_agents.manage.external', { ns: 'common' }),
+          name: 'external',
+          type: 'select',
+          value: data?.user.comissions?.external,
+          values: getAllowed(t)
+        }, {
+          label: t('admin_agents.manage.devpos_settings', { ns: 'common' }),
+          name: 'devpos_settings',
+          type: 'component',
+          value: (
+            <ApiDetails id={ data?.user.id } type="devpos" t={ t } />
+          )
+        }, {}, {
+          label: t('admin_agents.manage.status', { ns: 'common' }),
+          name: 'status',
+          type: 'select',
+          value: data?.user.status,
+          values: GetStatus(t)
+        }, {
+          label: t('admin_agents.manage.display_email', { ns: 'common' }),
+          name: 'display_email',
+          type: 'display',
+          value: (data?.user.email ?? '-')
+        }, {}, {
+          label: t('admin_agents.manage.ip_logs', { ns: 'common' }),
+          name: 'ip_logs',
+          type: 'component',
+          value: (
+            <IpLogs
+              id={ id }
+              page={ Number(searchParams.get('page')) }
+              type="agents"
+              t={ t }
+            />
+          )
+        }] }
+        pending={ isPendingSave || isPendingDelete }
+        t={ t }
+        actions={ [
+          'save', 'delete'
+        ]}
+        onSave={ onSave }
+        onDelete={ onDelete }
+      />
+    </Meta>
+  );
+};
+
+export default Manage;

package/index.ts

@@ -0,0 +1,7 @@
+import Browse from './Browse';
+import Manage from './Manage';
+
+export {
+  Browse,
+  Manage
+};

package/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@autobusal/admin-agents",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.ts"
+}

package/services.ts

@@ -0,0 +1,88 @@
+import { UseMutationResult, UseQueryResult, UseSuspenseQueryResult, useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { PaginationData } from '@autobusal/providers/types/pagination';
+import { AgentData } from '@autobusal/providers/types/agents';
+import { TableParamsData } from '@autobusal/providers/types/other';
+
+export const GetAgents = (params: TableParamsData): UseQueryResult<PaginationData<AgentData>> => (
+  useQuery({
+    queryKey: ['admin-agents', params],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/agents/admin/browse', { params })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const GetAgent = (id: number): UseSuspenseQueryResult<AgentData> => (
+  useSuspenseQuery({
+    queryKey: ['admin-agents-manage', { id }],
+    queryFn: async () => {
+      if (id === 0) {
+        return null;
+      }
+
+      return await apiClient
+        .get('/api/agents/admin/get', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    }
+  })
+);
+
+export const PostAgent = (id: number): UseMutationResult<void, Error, AgentData, unknown> => (
+  useMutation({
+    mutationKey: ['admin-agents-save', { id }],
+    mutationFn: async (data: AgentData) => {
+      const formData = new FormData();
+
+      if (id > 0) {
+        formData.append('id', String(id));
+      }
+
+      Object.keys(data).map(name => {
+        if (name === 'logo') {
+          if (data.logo !== undefined) {
+            formData.append('logo', data.logo[0] ?? '');
+          }
+        } else if (name === 'operators') {
+          formData.append('operators', JSON.stringify(data.operators));
+        } else {
+          const value = String(data[name as keyof typeof data]);
+          formData.append(name, value);
+        }
+      });
+
+      return await apiClient
+        .post('/api/agents/admin/update', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        .then(response => (
+          response.data
+        ));
+    }
+  })
+);
+
+export const DeleteAgent = (): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['admin-agents-delete'],
+    mutationFn: async (id: number) => (
+      await apiClient
+        .delete('/api/agents/admin/delete', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);