Updated add team website form.

umami-software · Oct 4, 2023 · a14e11b · a14e11b
1 parent c990459
commit a14e11b
Show file tree

Hide file tree

Showing 18 changed files with 149 additions and 129 deletions.
diff --git a/src/app/(main)/reports/ReportsList.js b/src/app/(main)/reports/ReportsList.js
@@ -7,30 +7,30 @@ import DataTable from 'components/common/DataTable';
 function useReports() {
   const { get, del, useMutation } = useApi();
   const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
-  const reports = useFilterQuery(['reports'], params => get(`/reports`, params));
+  const queryResult = useFilterQuery(['reports'], params => get(`/reports`, params));
 
   const deleteReport = id => {
     mutate(id, {
       onSuccess: () => {
-        reports.refetch();
+        queryResult.refetch();
       },
     });
   };
 
-  return { reports, deleteReport };
+  return { queryResult, deleteReport };
 }
 
 export default function ReportsList() {
-  const { reports, deleteReport } = useReports();
+  const { queryResult, deleteReport } = useReports();
 
   const handleDelete = async (id, callback) => {
     await deleteReport(id);
-    await reports.refetch();
+    await queryResult.refetch();
     callback?.();
   };
 
   return (
-    <DataTable {...reports.getProps()}>
+    <DataTable queryResult={queryResult}>
       {({ data }) => <ReportsTable data={data} showDomain={true} onDelete={handleDelete} />}
     </DataTable>
   );

diff --git a/src/app/(main)/settings/teams/TeamsList.js → ...p/(main)/settings/teams/TeamsDataTable.js b/src/app/(main)/settings/teams/TeamsList.js → ...p/(main)/settings/teams/TeamsDataTable.js
@@ -4,16 +4,21 @@ import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
 import useApi from 'components/hooks/useApi';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 
-export function TeamsList() {
+export function TeamsDataTable() {
   const { get } = useApi();
-  const filterQuery = useFilterQuery(['teams'], params => {
+  const queryResult = useFilterQuery(['teams'], params => {
     return get(`/teams`, {
       ...params,
     });
   });
-  const { getProps } = filterQuery;
 
-  return <DataTable {...getProps()}>{({ data }) => <TeamsTable data={data} />}</DataTable>;
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => {
+        return <TeamsTable data={data} />;
+      }}
+    </DataTable>
+  );
 }
 
-export default TeamsList;
+export default TeamsDataTable;
diff --git a/src/app/(main)/settings/teams/[id]/TeamAddWebsiteForm.js b/src/app/(main)/settings/teams/[id]/TeamAddWebsiteForm.js
@@ -1,22 +1,20 @@
 import useApi from 'components/hooks/useApi';
-import { useRef, useState } from 'react';
-import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
-import WebsiteTags from '../WebsiteTags';
+import { useState } from 'react';
+import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
+import WebsitesDataTable from '../../websites/WebsitesDataTable';
 
 export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
   const { data: websites } = useQuery(['websites'], () => get('/websites'));
-  const [newWebsites, setNewWebsites] = useState([]);
-  const formRef = useRef();
-
+  const [selected, setSelected] = useState([]);
   const hasData = websites && websites.data.length > 0;
 
   const handleSubmit = () => {
     mutate(
-      { websiteIds: newWebsites },
+      { websiteIds: selected },
       {
         onSuccess: async () => {
           onSave();
@@ -26,34 +24,29 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
     );
   };
 
-  const handleAddWebsite = value => {
-    if (!newWebsites.some(a => a === value)) {
-      const nextValue = [...newWebsites];
-
-      nextValue.push(value);
-
-      setNewWebsites(nextValue);
-    }
-  };
-
-  const handleRemoveWebsite = value => {
-    const newValue = newWebsites.filter(a => a !== value);
-
-    setNewWebsites(newValue);
+  const handleSelect = id => {
+    setSelected(state => (state.includes(id) ? state.filter(n => n !== id) : state.concat(id)));
   };
 
   return (
     <>
+      {!hasData && <Loading />}
       {hasData && (
-        <Form onSubmit={handleSubmit} error={error} ref={formRef}>
-          <FormRow label={formatMessage(labels.websites)}>
-            <Dropdown items={websites.data} onChange={handleAddWebsite} style={{ width: 300 }}>
-              {({ id, name }) => <Item key={id}>{name}</Item>}
-            </Dropdown>
-          </FormRow>
-          <WebsiteTags items={websites.data} websites={newWebsites} onClick={handleRemoveWebsite} />
+        <Form onSubmit={handleSubmit} error={error}>
+          <WebsitesDataTable showHeader={false} showActions={false}>
+            <GridColumn name="select" label={formatMessage(labels.selectWebsite)} alignment="end">
+              {row => (
+                <Toggle
+                  key={row.id}
+                  value={row.id}
+                  checked={selected?.includes(row.id)}
+                  onChange={handleSelect.bind(null, row.id)}
+                />
+              )}
+            </GridColumn>
+          </WebsitesDataTable>
           <FormButtons flex>
-            <SubmitButton disabled={newWebsites && newWebsites.length === 0}>
+            <SubmitButton disabled={selected?.length === 0}>
               {formatMessage(labels.addWebsite)}
             </SubmitButton>
             <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>

diff --git a/src/app/(main)/settings/teams/[id]/TeamMembers.js b/src/app/(main)/settings/teams/[id]/TeamMembers.js
@@ -5,7 +5,7 @@ import DataTable from 'components/common/DataTable';
 
 export function TeamMembers({ teamId, readOnly }) {
   const { get } = useApi();
-  const { getProps } = useFilterQuery(
+  const queryResult = useFilterQuery(
     ['team:users', teamId],
     params => {
       return get(`/teams/${teamId}/users`, {
@@ -17,7 +17,7 @@ export function TeamMembers({ teamId, readOnly }) {
 
   return (
     <>
-      <DataTable {...getProps()}>
+      <DataTable queryResult={queryResult}>
         {({ data }) => <TeamMembersTable data={data} readOnly={readOnly} />}
       </DataTable>
     </>

diff --git a/...settings/teams/TeamWebsiteRemoveButton.js → ...ngs/teams/[id]/TeamWebsiteRemoveButton.js b/...settings/teams/TeamWebsiteRemoveButton.js → ...ngs/teams/[id]/TeamWebsiteRemoveButton.js
@@ -19,7 +19,7 @@ export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   };
 
   return (
-    <LoadingButton onClick={() => handleRemoveTeamMember()} isLoading={isLoading}>
+    <LoadingButton variant="quiet" onClick={() => handleRemoveTeamMember()} isLoading={isLoading}>
       <Icon>
         <Icons.Close />
       </Icon>

diff --git a/src/app/(main)/settings/teams/[id]/TeamWebsites.js b/src/app/(main)/settings/teams/[id]/TeamWebsites.js
@@ -11,7 +11,7 @@ export function TeamWebsites({ teamId }) {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const { get } = useApi();
-  const { getProps, refetch } = useFilterQuery(
+  const queryResult = useFilterQuery(
     ['team:websites', teamId],
     params => {
       return get(`/teams/${teamId}/websites`, {
@@ -21,8 +21,8 @@ export function TeamWebsites({ teamId }) {
     { enabled: !!user },
   );
 
-  const handleWebsiteAdd = () => {
-    refetch();
+  const handleChange = () => {
+    queryResult.refetch();
   };
 
   return (
@@ -36,13 +36,13 @@ export function TeamWebsites({ teamId }) {
             <Text>{formatMessage(labels.addWebsite)}</Text>
           </Button>
           <Modal title={formatMessage(labels.addWebsite)}>
-            {close => (
-              <TeamAddWebsiteForm teamId={teamId} onSave={handleWebsiteAdd} onClose={close} />
-            )}
+            {close => <TeamAddWebsiteForm teamId={teamId} onSave={handleChange} onClose={close} />}
           </Modal>
         </ModalTrigger>
       </ActionForm>
-      <DataTable {...getProps()}>{({ data }) => <TeamWebsitesTable data={data} />}</DataTable>
+      <DataTable queryResult={queryResult}>
+        {({ data }) => <TeamWebsitesTable data={data} onRemove={handleChange} />}
+      </DataTable>
     </>
   );
 }

diff --git a/src/app/(main)/settings/teams/[id]/TeamWebsitesTable.js b/src/app/(main)/settings/teams/[id]/TeamWebsitesTable.js
@@ -1,10 +1,10 @@
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
-import TeamWebsiteRemoveButton from '../TeamWebsiteRemoveButton';
+import useMessages from 'components/hooks/useMessages';
+import useUser from 'components/hooks/useUser';
+import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
 
-export function TeamWebsitesTable({ data = [], onSave }) {
+export function TeamWebsitesTable({ data = [], onRemove }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
@@ -20,6 +20,9 @@ export function TeamWebsitesTable({ data = [], onSave }) {
           const canRemove = user.id === userId || user.id === owner.userId;
           return (
             <>
+              {canRemove && (
+                <TeamWebsiteRemoveButton teamId={teamId} websiteId={websiteId} onSave={onRemove} />
+              )}
               <Link href={`/websites/${websiteId}`}>
                 <Button>
                   <Icon>
@@ -28,9 +31,6 @@ export function TeamWebsitesTable({ data = [], onSave }) {
                   <Text>{formatMessage(labels.view)}</Text>
                 </Button>
               </Link>
-              {canRemove && (
-                <TeamWebsiteRemoveButton teamId={teamId} websiteId={websiteId} onSave={onSave} />
-              )}
             </>
           );
         }}

diff --git a/src/app/(main)/settings/teams/page.js b/src/app/(main)/settings/teams/page.js
@@ -1,4 +1,4 @@
-import TeamsList from 'app/(main)/settings/teams/TeamsList';
+import TeamsDataTable from './TeamsDataTable';
 import TeamsHeader from './TeamsHeader';
 
 export default function () {
@@ -9,7 +9,7 @@ export default function () {
   return (
     <>
       <TeamsHeader />
-      <TeamsList />
+      <TeamsDataTable />
     </>
   );
 }
diff --git a/src/app/(main)/settings/users/UsersList.js → ...p/(main)/settings/users/UsersDataTable.js b/src/app/(main)/settings/users/UsersList.js → ...p/(main)/settings/users/UsersDataTable.js
@@ -5,21 +5,20 @@ import DataTable from 'components/common/DataTable';
 import UsersTable from './UsersTable';
 import UsersHeader from './UsersHeader';
 
-export function UsersList() {
+export function UsersDataTable() {
   const { get } = useApi();
-  const filterQuery = useFilterQuery(['users'], params => {
+  const queryResult = useFilterQuery(['users'], params => {
     return get(`/users`, {
       ...params,
     });
   });
-  const { getProps } = filterQuery;
 
   return (
     <>
       <UsersHeader />
-      <DataTable {...getProps()}>{({ data }) => <UsersTable data={data} />}</DataTable>
+      <DataTable queryResult={queryResult}>{({ data }) => <UsersTable data={data} />}</DataTable>
     </>
   );
 }
 
-export default UsersList;
+export default UsersDataTable;
diff --git a/src/app/(main)/settings/users/page.tsx b/src/app/(main)/settings/users/page.tsx
@@ -1,12 +1,12 @@
-import UsersList from 'app/(main)/settings/users/UsersList';
+import UsersDataTable from './UsersDataTable';
 import { Metadata } from 'next';
 
 export default function () {
   if (process.env.cloudMode) {
     return null;
   }
 
-  return <UsersList />;
+  return <UsersDataTable />;
 }
 export const metadata: Metadata = {
   title: 'Users | umami',

diff --git a/src/app/(main)/settings/websites/Websites.js → ...n)/settings/websites/WebsitesDataTable.js b/src/app/(main)/settings/websites/Websites.js → ...n)/settings/websites/WebsitesDataTable.js
@@ -6,16 +6,10 @@ import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import WebsitesHeader from './WebsitesHeader';
 
-export function Websites({
-  showHeader = true,
-  showEditButton = true,
-  showTeam,
-  includeTeams,
-  onlyTeams,
-}) {
+function useWebsites({ includeTeams, onlyTeams }) {
   const { user } = useUser();
   const { get } = useApi();
-  const filterQuery = useFilterQuery(
+  return useFilterQuery(
     ['websites', { includeTeams, onlyTeams }],
     params => {
       return get(`/users/${user?.id}/websites`, {
@@ -26,18 +20,38 @@ export function Websites({
     },
     { enabled: !!user },
   );
-  const { getProps } = filterQuery;
+}
+
+export function WebsitesDataTable({
+  showHeader = true,
+  showEditButton = true,
+  showViewButton = true,
+  showActions = true,
+  showTeam,
+  includeTeams,
+  onlyTeams,
+  children,
+}) {
+  const queryResult = useWebsites({ includeTeams, onlyTeams });
 
   return (
     <>
       {showHeader && <WebsitesHeader />}
-      <DataTable {...getProps()}>
+      <DataTable queryResult={queryResult}>
         {({ data }) => (
-          <WebsitesTable data={data} showTeam={showTeam} showEditButton={showEditButton} />
+          <WebsitesTable
+            data={data}
+            showTeam={showTeam}
+            showActions={showActions}
+            showEditButton={showEditButton}
+            showViewButton={showViewButton}
+          >
+            {children}
+          </WebsitesTable>
         )}
       </DataTable>
     </>
   );
 }
 
-export default Websites;
+export default WebsitesDataTable;