From f0cba9c1e5cbcef756d666ff29c843702550afeb Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sat, 19 Dec 2020 18:25:44 +1100
Subject: [PATCH] issue-167 Add admin parts page

resolves #167
---
 api/src/graphql/parts.sdl.js                  |   1 +
 web/src/Routes.js                             |   3 +-
 web/src/components/AdminParts/AdminParts.js   | 128 ++++++++++++++++++
 .../AdminPartsCell/AdminPartsCell.js          |  39 ++++++
 .../pages/AdminPartsPage/AdminPartsPage.js    |  12 ++
 5 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/AdminParts/AdminParts.js
 create mode 100644 web/src/components/AdminPartsCell/AdminPartsCell.js
 create mode 100644 web/src/pages/AdminPartsPage/AdminPartsPage.js

diff --git a/api/src/graphql/parts.sdl.js b/api/src/graphql/parts.sdl.js
index 1acf7eb..ec9c3c3 100644
--- a/api/src/graphql/parts.sdl.js
+++ b/api/src/graphql/parts.sdl.js
@@ -7,6 +7,7 @@ export const schema = gql`
     mainImage: String
     createdAt: DateTime!
     updatedAt: DateTime!
+    deleted: Boolean!
     user: User!
     userId: String!
     Comment: [Comment]!
diff --git a/web/src/Routes.js b/web/src/Routes.js
index cfc8ce2..1a9920b 100644
--- a/web/src/Routes.js
+++ b/web/src/Routes.js
@@ -50,7 +50,8 @@ const Routes = () => {
       <Route path="/u/{userName}/{partTitle}/ide" page={IdePartPage} name="ide" />
 
       <Private unauthenticated="home" role="admin">
-        <Route path="/users" page={UsersPage} name="users" />
+        <Route path="/admin/users" page={UsersPage} name="users" />
+        <Route path="/admin/parts" page={AdminPartsPage} name="parts" />
       </Private>
     </Router>
   )
diff --git a/web/src/components/AdminParts/AdminParts.js b/web/src/components/AdminParts/AdminParts.js
new file mode 100644
index 0000000..1f4e67b
--- /dev/null
+++ b/web/src/components/AdminParts/AdminParts.js
@@ -0,0 +1,128 @@
+import { useMutation, useFlash } from '@redwoodjs/web'
+import { Link, routes } from '@redwoodjs/router'
+
+import { QUERY } from 'src/components/AdminPartsCell'
+
+const DELETE_PART_MUTATION = gql`
+  mutation DeletePartMutation($id: String!) {
+    deletePart(id: $id) {
+      id
+    }
+  }
+`
+
+const MAX_STRING_LENGTH = 150
+
+const truncate = (text) => {
+  let output = text
+  if (text && text.length > MAX_STRING_LENGTH) {
+    output = output.substring(0, MAX_STRING_LENGTH) + '...'
+  }
+  return output
+}
+
+const jsonTruncate = (obj) => {
+  return truncate(JSON.stringify(obj, null, 2))
+}
+
+const timeTag = (datetime) => {
+  return (
+    <time dateTime={datetime} title={datetime}>
+      {new Date(datetime).toUTCString()}
+    </time>
+  )
+}
+
+const checkboxInputTag = (checked) => {
+  return <input type="checkbox" checked={checked} disabled />
+}
+
+const AdminParts = ({ parts }) => {
+  const { addMessage } = useFlash()
+  const [deletePart] = useMutation(DELETE_PART_MUTATION, {
+    onCompleted: () => {
+      addMessage('Part deleted.', { classes: 'rw-flash-success' })
+    },
+    // This refetches the query on the list page. Read more about other ways to
+    // update the cache over here:
+    // https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates
+    refetchQueries: [{ query: QUERY }],
+    awaitRefetchQueries: true,
+  })
+
+  const onDeleteClick = (id) => {
+    if (confirm('Are you sure you want to delete part ' + id + '?')) {
+      deletePart({ variables: { id } })
+    }
+  }
+
+  return (
+    <div className="rw-segment rw-table-wrapper-responsive">
+      <table className="rw-table">
+        <thead>
+          <tr>
+            <th>Id</th>
+            <th>Title</th>
+            <th>Description</th>
+            <th>Code</th>
+            <th>Main image</th>
+            <th>Created at</th>
+            <th>Updated at</th>
+            <th>User id</th>
+            <th>Deleted</th>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {parts.map((part) => (
+            <tr key={part.id}>
+              <td>{truncate(part.id)}</td>
+              <td>{truncate(part.title)}</td>
+              <td>{truncate(part.description)}</td>
+              <td>{truncate(part.code)}</td>
+              <td>{truncate(part.mainImage)}</td>
+              <td>{timeTag(part.createdAt)}</td>
+              <td>{timeTag(part.updatedAt)}</td>
+              <td>{truncate(part.userId)}</td>
+              <td>{checkboxInputTag(part.deleted)}</td>
+              <td>
+                <nav className="rw-table-actions">
+                  <Link
+                    to={routes.part({
+                      userName: part?.user?.userName,
+                      partTitle: part?.title,
+                    })}
+                    title={'Show part ' + part.id + ' detail'}
+                    className="rw-button rw-button-small"
+                  >
+                    Show
+                  </Link>
+                  <Link
+                    to={routes.editPart({
+                      userName: part?.user?.userName,
+                      partTitle: part?.title,
+                    })}
+                    title={'Edit part ' + part.id}
+                    className="rw-button rw-button-small rw-button-blue"
+                  >
+                    Edit
+                  </Link>
+                  <a
+                    href="#"
+                    title={'Delete part ' + part.id}
+                    className="rw-button rw-button-small rw-button-red"
+                    onClick={() => onDeleteClick(part.id)}
+                  >
+                    Delete
+                  </a>
+                </nav>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default AdminParts
diff --git a/web/src/components/AdminPartsCell/AdminPartsCell.js b/web/src/components/AdminPartsCell/AdminPartsCell.js
new file mode 100644
index 0000000..a401087
--- /dev/null
+++ b/web/src/components/AdminPartsCell/AdminPartsCell.js
@@ -0,0 +1,39 @@
+import { Link, routes } from '@redwoodjs/router'
+
+import AdminParts from 'src/components/AdminParts'
+
+export const QUERY = gql`
+  query PARTS {
+    parts {
+      id
+      title
+      description
+      code
+      mainImage
+      createdAt
+      updatedAt
+      userId
+      deleted
+      user {
+        userName
+      }
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => {
+  return (
+    <div className="rw-text-center">
+      {'No parts yet. '}
+      <Link to={routes.newPart()} className="rw-link">
+        {'Create one?'}
+      </Link>
+    </div>
+  )
+}
+
+export const Success = ({ parts }) => {
+  return <AdminParts parts={parts} />
+}
diff --git a/web/src/pages/AdminPartsPage/AdminPartsPage.js b/web/src/pages/AdminPartsPage/AdminPartsPage.js
new file mode 100644
index 0000000..b69f8c3
--- /dev/null
+++ b/web/src/pages/AdminPartsPage/AdminPartsPage.js
@@ -0,0 +1,12 @@
+import MainLayout from 'src/layouts/MainLayout'
+import AdminPartsCell from 'src/components/AdminPartsCell'
+
+const PartsPage = () => {
+  return (
+    <MainLayout>
+      <AdminPartsCell />
+    </MainLayout>
+  )
+}
+
+export default PartsPage