Merge pull request #22 from jenny-s51/IUXD-112-Cards

CardView+Toolbar

packages/studio/src/app/app.css

@@ -29,7 +29,6 @@
   height: 100vh;
 }
 
-
 .app-api-title {
   color: var(--pf-global--primary-color--100);
 }

packages/studio/src/app/components/api/apiCard/apiCardView.tsx

@@ -1,26 +1,105 @@
-import React, { useContext } from 'react';
-import { Gallery } from '@patternfly/react-core';
-import {ApiCard} from './apiCard';
-import { GlobalContext } from '../../../../context';
+import React, { useContext, useState } from "react";
+import {
+  Card,
+  CardHead,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  CardActions,
+  Gallery,
+  Checkbox
+} from "@patternfly/react-core";
+import { ApiTag } from "../apiTag";
+import ApicurioIcon from "./../../../assets/apicurio-icon.png";
+import "./apiCard.css";
+import AppDropdownKebab from "../apiDropDownKebab/apiDropdownKebab";
+import { GlobalContext, GlobalContextObj } from "../../../../context";
 
-export const ApiCardView: React.FunctionComponent<any> = (props) => {
-  const { apis } = {... useContext(GlobalContext).store}
+interface ApiCardProps {
+  id?: string;
+  name?: string;
+  description?: string;
+  tags?: string[];
+  type?: string;
+}
 
-  const cardList = apis.map((api, index) =>
-    <ApiCard
-      key={index}
-      id={api.id}
-      name={api.name}
-      description={api.description}
-      tags={api.tags}
-    />
-  );
+export const ApiCardView: React.FunctionComponent<ApiCardProps> = ({
+  name,
+  description,
+  tags = []
+}: ApiCardProps) => {
+  const globalContext: GlobalContextObj = useContext(GlobalContext);
+  const { selectedItems } = { ...globalContext.store.toolbarStatus };
+
+  const getAllItems = () => {
+    const collection: number[] = [];
+    for (const items of selectedItems) {
+      // tslint:disable-next-line: radix
+      collection.push(parseInt(items.id));
+    }
+    return collection;
+  };
+
+  const handleCheckboxClick = (checked: boolean, e: any) => {
+    const { value } = e.target;
+
+    if (checked) {
+      globalContext.updateToolbarStatus({
+        areAllSelected:
+          globalContext.store.apis.length - 1 === selectedItems.length,
+        selectedItems: selectedItems.concat(value * 1)
+      });
+    } else {
+      globalContext.updateToolbarStatus({
+        areAllSelected: false,
+        selectedItems: selectedItems.filter(item => item !== Number(value))
+      });
+    }
+  };
+
+  const { apis } = { ...useContext(GlobalContext).store };
 
   return (
     <Gallery gutter="md">
-      {cardList}
+      {apis.map((api, key) => (
+        <React.Fragment>
+          <Card key={key}>
+            <CardHead>
+              <img src={ApicurioIcon} />
+              <CardActions>
+                <AppDropdownKebab />
+                <Checkbox
+                  value={api.id}
+                  // tslint:disable-next-line: radix
+                  isChecked={globalContext.store.toolbarStatus.selectedItems.includes(
+                    parseInt(api.id)
+                  )}
+                  checked={globalContext.store.toolbarStatus.isChecked}
+                  onChange={handleCheckboxClick}
+                  aria-label="card checkbox"
+                  id={"check " + api.id}
+                  name="check"
+                />
+              </CardActions>
+            </CardHead>
+            <CardHeader className="api-card-view-card-header">
+              {api.name}
+            </CardHeader>
+            <CardBody className="api-card-view-card-body">
+              {api.description}
+            </CardBody>
+            <CardFooter>
+              <div className="api-api-tag-group">
+                {api.tags.map(
+                  (tag: string, index: string | number | undefined) => (
+                    <ApiTag text={tag} />
+                  )
+                )}
+              </div>
+            </CardFooter>
+          </Card>
+        </React.Fragment>
+      ))}
     </Gallery>
   );
-}
-
-export default ApiCardView;
+};

packages/studio/src/app/components/api/apiCard/index.ts

@@ -1,2 +1 @@
-export * from './apiCard';
 export * from './apiCardView';

packages/studio/src/app/components/api/apiDrawer/apiDrawer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Drawer, DrawerPanelContent, DrawerContent } from '@patternfly/react-core/dist/esm/experimental';
 import ApiDataList from '../apiDataList/apiDataList';
-import {ApiCardView} from '../..';
+import {ApiCardView} from '../apiCard/apiCardView';
 import ApiDrawerPanelContent from './apiDrawerPanelContent';
 import { GlobalContext, GlobalContextObj } from '../../../../context';
 import './apiDrawer.css';