Merge pull request #872 from cywio/admin-websites-table

Add owner column to admin website settings table

components/settings/WebsiteSettings.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
 import Table from 'components/common/Table';
@@ -25,6 +26,7 @@ import useFetch from 'hooks/useFetch';
 import styles from './WebsiteSettings.module.css';
 
 export default function WebsiteSettings() {
+  const user = useSelector(state => state.user);
   const [editWebsite, setEditWebsite] = useState();
   const [resetWebsite, setResetWebsite] = useState();
   const [deleteWebsite, setDeleteWebsite] = useState();
@@ -33,7 +35,9 @@ export default function WebsiteSettings() {
   const [showUrl, setShowUrl] = useState();
   const [saved, setSaved] = useState(0);
   const [message, setMessage] = useState();
-  const { data } = useFetch(`/api/websites`, {}, [saved]);
+  const { data } = useFetch(`/api/websites` + (user.is_admin ? '?include_all=true' : ''), {}, [
+    saved,
+  ]);
 
   const Buttons = row => (
     <ButtonLayout align="right">
@@ -55,15 +59,27 @@ export default function WebsiteSettings() {
         tooltipId={`button-code-${row.website_id}`}
         onClick={() => setShowCode(row)}
       />
-      <Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
-        <FormattedMessage id="label.edit" defaultMessage="Edit" />
-      </Button>
-      <Button icon={<Reset />} size="small" onClick={() => setResetWebsite(row)}>
-        <FormattedMessage id="label.reset" defaultMessage="Reset" />
-      </Button>
-      <Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
-        <FormattedMessage id="label.delete" defaultMessage="Delete" />
-      </Button>
+      <Button
+        icon={<Pen />}
+        size="small"
+        tooltip={<FormattedMessage id="label.edit" defaultMessage="Edit" />}
+        tooltipId={`button-edit-${row.website_id}`}
+        onClick={() => setEditWebsite(row)}
+      />
+      <Button
+        icon={<Reset />}
+        size="small"
+        tooltip={<FormattedMessage id="label.reset" defaultMessage="Reset" />}
+        tooltipId={`button-reset-${row.website_id}`}
+        onClick={() => setResetWebsite(row)}
+      />
+      <Button
+        icon={<Trash />}
+        size="small"
+        tooltip={<FormattedMessage id="label.delete" defaultMessage="Delete" />}
+        tooltipId={`button-delete-${row.website_id}`}
+        onClick={() => setDeleteWebsite(row)}
+      />
     </ButtonLayout>
   );
 
@@ -74,6 +90,30 @@ export default function WebsiteSettings() {
     </Link>
   );
 
+  const adminColumns = [
+    {
+      key: 'name',
+      label: <FormattedMessage id="label.name" defaultMessage="Name" />,
+      className: 'col-4 col-xl-3',
+      render: DetailsLink,
+    },
+    {
+      key: 'domain',
+      label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
+      className: 'col-4 col-xl-3',
+    },
+    {
+      key: 'account',
+      label: <FormattedMessage id="label.owner" defaultMessage="Owner" />,
+      className: 'col-4 col-xl-1',
+    },
+    {
+      key: 'action',
+      className: classNames(styles.buttons, 'col-12 col-xl-5 pt-2 pt-xl-0'),
+      render: Buttons,
+    },
+  ];
+
   const columns = [
     {
       key: 'name',
@@ -137,7 +177,7 @@ export default function WebsiteSettings() {
           <FormattedMessage id="label.add-website" defaultMessage="Add website" />
         </Button>
       </PageHeader>
-      <Table columns={columns} rows={data} empty={empty} />
+      <Table columns={user.is_admin ? adminColumns : columns} rows={data} empty={empty} />
       {editWebsite && (
         <Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
           <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />

lib/queries.js

@@ -115,6 +115,29 @@ export async function getUserWebsites(user_id) {
   );
 }
 
+export async function getAllWebsites() {
+  let data = await runQuery(
+    prisma.website.findMany({
+      orderBy: [
+        {
+          user_id: 'asc',
+        },
+        {
+          name: 'asc',
+        },
+      ],
+      include: {
+        account: {
+          select: {
+            username: true,
+          },
+        },
+      },
+    }),
+  );
+  return data.map(i => ({ ...i, account: i.account.username }));
+}
+
 export async function createWebsite(user_id, data) {
   return runQuery(
     prisma.website.create({

pages/api/websites.js

@@ -1,4 +1,4 @@
-import { getUserWebsites } from 'lib/queries';
+import { getAllWebsites, getUserWebsites } from 'lib/queries';
 import { useAuth } from 'lib/middleware';
 import { ok, methodNotAllowed, unauthorized } from 'lib/response';
 
@@ -6,7 +6,7 @@ export default async (req, res) => {
   await useAuth(req, res);
 
   const { user_id: current_user_id, is_admin } = req.auth;
-  const { user_id } = req.query;
+  const { user_id, include_all } = req.query;
   const userId = +user_id;
 
   if (req.method === 'GET') {
@@ -14,7 +14,10 @@ export default async (req, res) => {
       return unauthorized(res);
     }
 
-    const websites = await getUserWebsites(userId || current_user_id);
+    const websites =
+      is_admin && include_all
+        ? await getAllWebsites()
+        : await getUserWebsites(userId || current_user_id);
 
     return ok(res, websites);
   }