rework single keyword view to use search endpoint

Author: jnptk

backend/src/kitconcept/keywordmanager/services/get.py

@@ -2,41 +2,21 @@
 from plone.restapi.batching import HypermediaBatch
 from plone.restapi.services import Service
 from zope.component import getUtility
-from zope.interface import implementer
-from zope.publisher.interfaces import IPublishTraverse
 
 
-@implementer(IPublishTraverse)
 class KeywordsGet(Service):
     """/@keywords Endpoint."""
 
-    def __init__(self, context, request):
-        super().__init__(context, request)
-        self.context = context
-        self.request = request
-        self.params = []
-
-    def publishTraverse(self, request, name):
-        # Consume any path segments after /@keywords as parameters
-        self.params.append(name)
-        return self
-
     def reply(self):
         km = getUtility(IKeywordManager)
         query = {"withLengths": True}
         if idx := self.request.form.get("idx"):
             query["indexName"] = idx
 
-        if len(self.params) == 0:
-            keywords = km.getKeywords(**query)
-        else:
-            keywords = km.getKeyword(self.params[0])
+        keywords = km.getKeywords(**query)
 
         batch = HypermediaBatch(self.request, keywords)
-        if len(self.params) == 0:
-            items = [{"name": name, "total": count} for name, count in batch]
-        else:
-            items = list(batch)
+        items = [{"name": name, "total": count} for name, count in batch]
 
         keywords_data = {
             "@id": batch.canonical_url,

frontend/packages/volto-keywordmanager/src/actions/keywords.ts

@@ -3,13 +3,11 @@ import { UPDATE_KEYWORDS } from 'volto-keywordmanager/constants/Keywords';
 import { DELETE_KEYWORDS } from 'volto-keywordmanager/constants/Keywords';
 
 export function getKeywords({
-  id = null,
   index = null,
   groupKeywords = false,
   batchSize = 25,
   batchStart = 0,
 }: {
-  id?: string | null;
   index?: string | null;
   groupKeywords?: boolean;
   batchSize?: number;
@@ -27,10 +25,6 @@ export function getKeywords({
 
   let requestPath = '/@keywords';
 
-  if (id) {
-    requestPath += `/${id}`;
-  }
-
   if (params) {
     requestPath += `?${params.toString()}`;
   }

frontend/packages/volto-keywordmanager/src/components/Keyword.tsx

@@ -1,18 +1,20 @@
-import { Spinner } from '@plone/components';
+import { Spinner, Table, Button } from '@plone/components';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useDispatch } from 'react-redux';
 import { getParentUrl } from '@plone/volto/helpers/Url/Url';
 import { useSelector } from 'react-redux';
 import { Link, useParams } from 'react-router-dom';
-import { getKeywords } from 'volto-keywordmanager/actions/keywords';
+import { searchContent } from '@plone/volto/actions/search/search';
 import Error from '@plone/volto/components/theme/Error/Error';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useClient } from '@plone/volto/hooks';
+import { deleteKeywords } from 'volto-keywordmanager/actions/keywords';
 
 import backSVG from '@plone/volto/icons/back.svg';
+import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
   back: {
@@ -23,9 +25,17 @@ const messages = defineMessages({
     id: 'loading',
     defaultMessage: 'Loading',
   },
-  keyword: {
-    id: 'Keyword',
-    defaultMessage: 'Keyword',
+  title: {
+    id: 'title',
+    defaultMessage: 'Title',
+  },
+  path: {
+    id: 'path',
+    defaultMessage: 'Path',
+  },
+  actions: {
+    id: 'actions',
+    defaultMessage: 'Actions',
   },
 });
 
@@ -34,19 +44,27 @@ const KeywordView = (props) => {
   const params = useParams<{ id: string }>();
   const id = params.id;
   const intl = useIntl();
-  const keywords = useSelector((state) => state.keywords);
+  const keywords = useSelector((state) => state.search.subrequests.keywords);
   const dispatch = useDispatch();
   const isClient = useClient();
   const pathname = location.pathname;
-  const options = {
-    id: id,
-  };
+  const [selectedKeys, setSelectedKeys] = useState<string | Set<string>>(
+    new Set(),
+  );
 
   useEffect(() => {
-    dispatch(getKeywords(options));
+    dispatch(searchContent('/', { Subject: [id] }, 'keywords'));
   }, []);
 
-  if (keywords.loading) {
+  const handleDeleteKeywords = async (kw: string | string[]) => {
+    if (typeof kw == 'string') {
+      kw = [kw];
+    }
+    await dispatch(deleteKeywords({ items: kw }));
+    await dispatch(searchContent('/', { Subject: [id] }, 'keywords'));
+  };
+
+  if (keywords?.loading) {
     return <Spinner label={intl.formatMessage(messages.loading)} />;
   }
 
@@ -55,8 +73,42 @@ const KeywordView = (props) => {
   }
 
   return (
-    <>
+    <div
+      id="page-keyword_manager"
+      className="ui container controlpanel-keyword-manager"
+    >
       <h1>Hello world</h1>
+      <Table
+        className="react-aria-Table cmsui-table"
+        columns={[
+          {
+            id: 'title',
+            name: intl.formatMessage(messages.title),
+            isRowHeader: true,
+          },
+          {
+            id: 'path',
+            name: intl.formatMessage(messages.path),
+          },
+          {
+            id: 'actions',
+            name: intl.formatMessage(messages.actions),
+          },
+        ]}
+        rows={keywords?.items?.map((item) => ({
+          id: item['@id'],
+          textValue: item.title,
+          title: <p>{item.title}</p>,
+          path: <p>{item['@id']}</p>,
+          actions: (
+            <Button onPress={() => handleDeleteKeywords(item['@id'])}>
+              <Icon name={trashSVG} size="20px" />
+            </Button>
+          ),
+        }))}
+        selectionMode="multiple"
+        onSelectionChange={setSelectedKeys}
+      />
       {isClient &&
         createPortal(
           <Toolbar
@@ -75,7 +127,7 @@ const KeywordView = (props) => {
           />,
           document.getElementById('toolbar') as HTMLElement,
         )}
-    </>
+    </div>
   );
 };