Product fix

frontend/core-ui/src/modules/contacts/companies/components/CompaniesRecordTable.tsx

@@ -10,7 +10,7 @@ export const CompaniesRecordTable = () => {
   return (
     <RecordTable.Provider
       columns={companyColumns}
-      data={companies || []}
+      data={companies || [{}]}
       stickyColumns={['more', 'checkbox', 'avatar', 'primaryName']}
       className="m-3"
     >

frontend/core-ui/src/modules/contacts/companies/graphql/queries/getCompanies.ts

@@ -64,6 +64,7 @@ export const GET_COMPANIES = gql`
         ownerId
         tagIds
         score
+        cursor
       }
       ${GQL_PAGE_INFO}
     }

frontend/core-ui/src/modules/contacts/customers/hooks/useCustomers.tsx

@@ -17,70 +17,83 @@ import { useIsCustomerLeadSessionKey } from './useCustomerLeadSessionKey';
 
 const CUSTOMERS_PER_PAGE = 30;
 
-
-export const useCustomersVariables = (variables?: QueryHookOptions<ICursorListResponse<ICustomer>>['variables']) => {
+export const useCustomersVariables = (
+  variables?: QueryHookOptions<ICursorListResponse<ICustomer>>['variables'],
+) => {
   const { isLead } = useIsCustomerLeadSessionKey();
   const [{ searchValue, tags, created, updated, lastSeen, brand, birthday }] =
-  useMultiQueryState<{
-    searchValue: string;
-    tags: string[];
-    created: string;
-    updated: string;
-    lastSeen: string;
-    brand: string;
-    birthday: string;
-  }>(['searchValue', 'tags', 'created', 'updated', 'lastSeen', 'brand', 'birthday']);
-const { sessionKey } = useIsCustomerLeadSessionKey();
+    useMultiQueryState<{
+      searchValue: string;
+      tags: string[];
+      created: string;
+      updated: string;
+      lastSeen: string;
+      brand: string;
+      birthday: string;
+    }>([
+      'searchValue',
+      'tags',
+      'created',
+      'updated',
+      'lastSeen',
+      'brand',
+      'birthday',
+    ]);
+  const { sessionKey } = useIsCustomerLeadSessionKey();
 
-const { cursor } = useRecordTableCursor({
-  sessionKey,
-});
+  const { cursor } = useRecordTableCursor({
+    sessionKey,
+  });
 
-const customersQueryVariables = {
-  limit: CUSTOMERS_PER_PAGE,
-  orderBy: {
-    createdAt: -1,
-  },
-  cursor,
-  searchValue: searchValue || undefined,
-  tagIds: tags || undefined,
-  brandIds: brand ? [brand] : undefined,
-  dateFilters: JSON.stringify({
-    createdAt: {
-      gte: parseDateRangeFromString(created)?.from,
-      lte: parseDateRangeFromString(created)?.to,
-    },
-    updatedAt: {
-      gte: parseDateRangeFromString(updated)?.from,
-      lte: parseDateRangeFromString(updated)?.to,
+  const customersQueryVariables = {
+    limit: CUSTOMERS_PER_PAGE,
+    orderBy: {
+      createdAt: -1,
     },
-    lastSeenAt: {
-      gte: parseDateRangeFromString(lastSeen)?.from,
-      lte: parseDateRangeFromString(lastSeen)?.to,
-    },
-    birthDate: {
-      gte: parseDateRangeFromString(birthday)?.from,
-      lte: parseDateRangeFromString(birthday)?.to,
-    }
-  }),
-  type: isLead ? 'lead' : 'customer',
-  ...variables,
+    cursor,
+    searchValue: searchValue || undefined,
+    tagIds: tags || undefined,
+    brandIds: brand ? [brand] : undefined,
+    dateFilters: JSON.stringify({
+      createdAt: {
+        gte: parseDateRangeFromString(created)?.from,
+        lte: parseDateRangeFromString(created)?.to,
+      },
+      updatedAt: {
+        gte: parseDateRangeFromString(updated)?.from,
+        lte: parseDateRangeFromString(updated)?.to,
+      },
+      lastSeenAt: {
+        gte: parseDateRangeFromString(lastSeen)?.from,
+        lte: parseDateRangeFromString(lastSeen)?.to,
+      },
+      birthDate: {
+        gte: parseDateRangeFromString(birthday)?.from,
+        lte: parseDateRangeFromString(birthday)?.to,
+      },
+    }),
+    type: isLead ? 'lead' : 'customer',
+    ...variables,
+  };
+  return { customersQueryVariables };
 };
-return {customersQueryVariables};
-}
-
 
 export const useCustomers = (
   options?: QueryHookOptions<ICursorListResponse<ICustomer>>,
 ) => {
-
+  const { sessionKey } = useIsCustomerLeadSessionKey();
+  const { cursor } = useRecordTableCursor({
+    sessionKey,
+  });
   const setCustomerTotalCount = useSetAtom(customerTotalCountAtom);
   // Customer Filter implementation
   const { data, loading, fetchMore } = useQuery<ICursorListResponse<ICustomer>>(
     GET_CUSTOMERS,
     {
       ...options,
-      variables: useCustomersVariables(options?.variables)?.customersQueryVariables,
+      variables: useCustomersVariables(options?.variables)
+        ?.customersQueryVariables,
+      skip: cursor === undefined,
     },
   );
 

frontend/core-ui/src/modules/products/components/ProductColumns.tsx

@@ -1,3 +1,5 @@
+import { useProductsEdit } from '@/products/hooks/useProductsEdit';
+import { renderingProductDetailAtom } from '@/products/states/productDetailStates';
 import {
   IconCategory,
   IconCurrencyDollar,
@@ -12,21 +14,43 @@ import {
   RecordTableCellDisplay,
   CurrencyFormatedDisplay,
   CurrencyCode,
+  useQueryState,
+  RecordTablePopover,
+  RecordTableCellTrigger,
+  Badge,
+  RecordTableCellContent,
+  Input,
 } from 'erxes-ui';
-import { IProduct } from 'ui-modules';
-import { productMoreColumn } from './ProductMoreColumn';
+import { useSetAtom } from 'jotai';
+import { IProduct, SelectCategory } from 'ui-modules';
 export const productColumns: ColumnDef<IProduct>[] = [
-  productMoreColumn,
   RecordTable.checkboxColumn as ColumnDef<IProduct>,
   {
     id: 'name',
     accessorKey: 'name',
     header: () => <RecordTable.InlineHead icon={IconLabel} label="Name" />,
     cell: ({ cell }) => {
+      const name = cell.getValue() as string;
+      const [, setProductId] = useQueryState('productId');
+      const setRenderingProductDetail = useSetAtom(renderingProductDetailAtom);
       return (
-        <RecordTableCellDisplay>
-          <TextOverflowTooltip value={cell.getValue() as string} />
-        </RecordTableCellDisplay>
+        <RecordTablePopover>
+          <RecordTableCellTrigger>
+            <Badge
+              variant="secondary"
+              onClick={(e) => {
+                e.stopPropagation();
+                setRenderingProductDetail(true);
+                setProductId(cell.row.original._id);
+              }}
+            >
+              {name}
+            </Badge>
+          </RecordTableCellTrigger>
+          <RecordTableCellContent className="min-w-72">
+            <Input value={name || ''} />
+          </RecordTableCellContent>
+        </RecordTablePopover>
       );
     },
   },
@@ -80,12 +104,23 @@ export const productColumns: ColumnDef<IProduct>[] = [
       <RecordTable.InlineHead icon={IconCategory} label="Category" />
     ),
     cell: ({ cell }) => {
+      const { productsEdit } = useProductsEdit();
       return (
-        <RecordTableCellDisplay>
-          <TextOverflowTooltip
-            value={cell.row.original?.category?.name || ''}
-          />
-        </RecordTableCellDisplay>
+        <SelectCategory.InlineCell
+          mode="single"
+          value={cell.getValue() as string}
+          onValueChange={(value) => {
+            productsEdit({
+              variables: {
+                _id: cell.row.original._id,
+                categoryId: value,
+              },
+            });
+          }}
+          categories={
+            cell.row.original.category ? [cell.row.original.category] : []
+          }
+        />
       );
     },
   },

frontend/core-ui/src/modules/products/components/ProductsFilter.tsx

@@ -1,38 +1,80 @@
 import { ProductHotKeyScope } from '@/products/types/ProductsHotKeyScope';
 import { IconSearch } from '@tabler/icons-react';
-import { Combobox, Command, Filter } from 'erxes-ui';
-import { TagsFilter } from 'ui-modules';
+import { Combobox, Command, Filter, useMultiQueryState } from 'erxes-ui';
+import { TagsFilter, SelectBrand, SelectCategory } from 'ui-modules';
 import { PRODUCTS_CURSOR_SESSION_KEY } from '../constants/productsCursorSessionKey';
 
 export const ProductsFilter = () => {
+  const [queries] = useMultiQueryState<{
+    searchValue: string;
+    created: string;
+    updated: string;
+    lastSeen: string;
+  }>(['searchValue', 'created', 'updated', 'lastSeen']);
+  const { searchValue } = queries || {};
+
   return (
     <Filter id="products-filter" sessionKey={PRODUCTS_CURSOR_SESSION_KEY}>
       <Filter.Bar>
+        {searchValue && (
+          <Filter.BarItem>
+            <Filter.BarName>
+              <IconSearch />
+              Search
+            </Filter.BarName>
+            <Filter.BarButton filterKey="searchValue" inDialog>
+              {searchValue}
+            </Filter.BarButton>
+            <Filter.BarClose filterKey="searchValue" />
+          </Filter.BarItem>
+        )}
+        <TagsFilter.Bar tagType="core:product" />
+        <SelectBrand.FilterBar />
+        <SelectCategory.FilterBar />
         <ProductsFilterPopover />
       </Filter.Bar>
     </Filter>
   );
 };
 
-export const ProductsFilterPopover = () => {
+const ProductsFilterPopover = () => {
+  const [queries] = useMultiQueryState<{
+    searchValue: string;
+    created: string;
+    updated: string;
+    lastSeen: string;
+  }>(['searchValue', 'created', 'updated', 'lastSeen']);
+
+  const hasFilters = Object.values(queries || {}).some(
+    (value) => value !== null,
+  );
+
   return (
     <>
       <Filter.Popover scope={ProductHotKeyScope.ProductsPage}>
-        <Filter.Trigger />
+        <Filter.Trigger isFiltered={hasFilters} />
         <Combobox.Content>
           <Filter.View>
             <Command>
-              <Filter.CommandInput placeholder="Filter" variant="secondary" />
-
+              <Filter.CommandInput
+                placeholder="Filter"
+                variant="secondary"
+                className="bg-background"
+              />
               <Command.List className="p-1">
                 <Filter.Item value="searchValue" inDialog>
                   <IconSearch />
                   Search
                 </Filter.Item>
                 <TagsFilter />
+                <SelectBrand.FilterItem />
+                <SelectCategory.FilterItem />
               </Command.List>
             </Command>
           </Filter.View>
+          <TagsFilter.View tagType="core:product" />
+          <SelectBrand.FilterView />
+          <SelectCategory.FilterView />
         </Combobox.Content>
       </Filter.Popover>
       <Filter.Dialog>

frontend/core-ui/src/modules/products/detail/components/ProductBasicField.tsx

@@ -109,7 +109,7 @@ export const ProductBasicFields: React.FC<ProductBasicFieldsProps> = ({
               <SelectCategory
                 selected={field.value}
                 onSelect={field.onChange}
-                className="w-full border border-gray-300"
+                className="w-full"
                 size="lg"
               />
             </Form.Control>
@@ -253,7 +253,7 @@ export const ProductBasicFields: React.FC<ProductBasicFieldsProps> = ({
         <Label className={formLabelClassName}>PDF</Label>
         <Button
           variant="outline"
-          className="w-full justify-between h-8"
+          className="w-full justify-between h-8 shadow-xs"
           type="button"
         >
           Upload a PDF