@nyris/nyris-webapp 0.2.6 → 0.3.3

package/src/components/results/ItemResult.tsx

@@ -0,0 +1,155 @@
+import { Box, Button, Grid, Typography } from "@material-ui/core";
+import React from "react";
+import IconSupport from "common/assets/icons/support.svg";
+import IconLike from "common/assets/icons/icon_like.svg";
+import IconDisLike from "common/assets/icons/icon_dislike.svg";
+import IconShare from "common/assets/icons/Fill.svg";
+import IconBookmark from "common/assets/icons/book_mark.svg";
+import IconModalImage from "common/assets/icons/icon_modal_image.svg";
+
+interface Props {
+  dataItem: any;
+  handlerToggleModal?: any;
+  handleClose?: () => void;
+  handlerToggleModalShare?: () => void;
+  isHover?: boolean;
+  indexItem?: number;
+  onSearchImage?: any;
+  handlerFeedback?: any;
+}
+
+function ItemResult(props: Props) {
+  const {
+    dataItem,
+    handlerToggleModal,
+    handlerToggleModalShare,
+    isHover = false,
+    onSearchImage,
+    handlerFeedback,
+  } = props;
+  const { img, sku, title, main_image_link } = dataItem;
+
+  return (
+    <Box className="wrap-main-item-result">
+      <Box className="box-top">
+        {!isHover && (
+          <Box className="box-icon-modal">
+            <Button
+              onClick={(e: any) => {
+                e.preventDefault();
+                onSearchImage(main_image_link);
+                // handlerToggleModal();
+              }}
+            >
+              <img
+                src={IconModalImage}
+                alt="icon_modal"
+                width={21}
+                height={21}
+              />
+            </Button>
+          </Box>
+        )}
+
+        <Box className="box-image">
+          <Button
+            style={{ width: "100%", height: "100%", padding: 0, zIndex: 9 }}
+            onClick={handlerToggleModal}
+          >
+            <img
+              src={img?.url ? img?.url : main_image_link}
+              alt="image_item"
+              className="img-style"
+            />
+          </Button>
+          {isHover && (
+            <Box className="box-hover">
+              <Button>View item</Button>
+            </Box>
+          )}
+        </Box>
+      </Box>
+      <Box
+        className="box-content"
+        display={"flex"}
+        style={{ flexDirection: "column" }}
+      >
+        <Box className="box-top">
+          <Grid container justifyContent="space-between">
+            <Grid item xs={10}>
+              <Typography className="text-f8 max-line-1">SKU: {sku}</Typography>
+              <Typography className="text-f9 text-bold max-line-3">
+                {title}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Button className="btn-item">
+                <img
+                  src={IconBookmark}
+                  alt="image_item"
+                  className="icon_action"
+                />
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+
+        <Box className="box-bottom">
+          <Grid container justifyContent="space-between" alignItems="center">
+            <Grid item>
+              <Box display={"flex"} alignItems={"center"}>
+                <Button
+                  className="btn-item"
+                  onClick={() => handlerFeedback("like")}
+                >
+                  <img
+                    src={IconLike}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+                <Button
+                  className="btn-item"
+                  onClick={() => handlerFeedback("dislike")}
+                >
+                  <img
+                    src={IconDisLike}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+              </Box>
+            </Grid>
+            <Grid item>
+              <Box display={"flex"} alignItems={"center"}>
+                <Button className="btn-item" onClick={handlerToggleModalShare}>
+                  <img
+                    src={IconShare}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+                <Button className="btn-item">
+                  <Box
+                    className="box-gray text-center box-support"
+                    display={"flex"}
+                    justifyContent={"center"}
+                    alignItems={"center"}
+                  >
+                    <img
+                      src={IconSupport}
+                      alt="image_item"
+                      className="icon_support"
+                    />
+                  </Box>
+                </Button>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default ItemResult;

package/src/components/search/ListSearch.tsx

@@ -0,0 +1,209 @@
+import * as React from "react";
+import {
+  DataGrid,
+} from "@material-ui/data-grid";
+import { Box, Button, Typography } from "@material-ui/core";
+import ViewOff from "common/assets/icons/view_off.png";
+import ImageTest from "common/assets/images/image_test.png";
+import MoreVertOutlinedIcon from "@material-ui/icons/MoreVertOutlined";
+import KeyboardArrowUpOutlinedIcon from "@material-ui/icons/KeyboardArrowUpOutlined";
+import KeyboardArrowDownOutlinedIcon from "@material-ui/icons/KeyboardArrowDownOutlined";
+// image_test.png
+const handleCellClick = (param: any, event: any) => {
+  // console.log(param);
+  // console.log(event);
+  if (param.colIndex === 2) {
+    event.stopPropagation();
+  }
+};
+
+const handleRowClick = (param: any, event: any) => {
+  // console.log("Row:");
+  // console.log(param);
+  // console.log(event);
+};
+
+const columns: any = [
+  {
+    field: "time",
+    headerName: "Time",
+    width: 42,
+    renderHeader: (params: any) => {
+      return (
+        <Typography className="text-f9 text-white fw-700">Time</Typography>
+      );
+    },
+    renderCell: (cellValues: any) => {
+      console.log("cellValues", cellValues);
+      return (
+        <Typography className="text-f9 fw-500 text-gray2">
+          {cellValues.value}
+        </Typography>
+      );
+    },
+  },
+  {
+    field: "search",
+    headerName: "Search",
+    width: 139,
+    renderHeader: (params: any) => {
+      return (
+        <Typography className="text-f9 text-white fw-700">Search</Typography>
+      );
+    },
+    renderCell: (cellValues: any) => {
+      console.log("cellValues", cellValues);
+      return (
+        <Box display={"flex"} alignItems={"center"}>
+          <Box className="box-image-search">
+            <img src={cellValues?.row.search.image} alt="img_search" />
+          </Box>
+          <Typography className="text-f9 text-gray2 fw-500">
+            {cellValues?.row.search.text}
+          </Typography>
+        </Box>
+      );
+    },
+  },
+  {
+    field: "order",
+    headerName: "Order",
+    width: 112,
+    renderHeader: (params: any) => {
+      return (
+        <Typography className="text-f9 text-white fw-700">Order</Typography>
+      );
+    },
+    renderCell: (cellValues: any) => {
+      console.log("cellValues", cellValues);
+      return (
+        <Typography className="text-f9 text-gray2 fw-500">
+          {cellValues?.row.order ? cellValues?.row.order : "_"}
+        </Typography>
+      );
+    },
+  },
+  {
+    field: "device",
+    headerName: "Device",
+    width: 161,
+    // align: "left",
+    renderHeader: (params: any) => {
+      return (
+        <Typography className="text-f9 text-white fw-700">Device</Typography>
+      );
+    },
+    renderCell: (cellValues: any) => {
+      console.log("cellValues", cellValues);
+      return (
+        <Typography className="text-f9 text-gray2 fw-500">
+          {cellValues?.row.device ? cellValues?.row.device : "_"}
+        </Typography>
+      );
+    },
+  },
+  {
+    field: "more",
+    headerName: "More",
+    sortable: false,
+    width: 48,
+    // valueGetter: (params: any) => {
+    //   return `${params.getValue(params.id, "firstName") || ""} ${
+    //     params.getValue(params.id, "lastName") || ""
+    //   }`;
+    // },
+    renderHeader: (params: any) => {
+      return (
+        <Typography className="text-f9 text-white fw-700">More</Typography>
+      );
+    },
+    renderCell: (cellValues: any) => {
+      console.log("cellValues", cellValues);
+      return (
+        <Box>
+          <Button>
+            <MoreVertOutlinedIcon style={{ fontSize: 12 }} />
+          </Button>
+        </Box>
+      );
+    },
+  },
+];
+
+const rows = [
+  {
+    id: 1,
+    time: "14:32",
+    search: {
+      image: ViewOff,
+      text: "engine bühler",
+    },
+    order: "",
+    device: "Desktop app",
+    more: "",
+  },
+  {
+    id: 2,
+    time: "14:32",
+    search: {
+      image: ImageTest,
+      text: "",
+    },
+    order: "Secondary search",
+    device: "Desktop app",
+    more: "",
+  },
+  {
+    id: 3,
+    time: "14:32",
+    search: {
+      image: ViewOff,
+      text: "engine bühler",
+    },
+    order: "",
+    device: "Desktop app",
+    more: "",
+  },
+];
+
+export default function ListSearch() {
+  return (
+    <>
+      <Box>
+        <Typography
+          className="text-f12 text-gray2 box-gray2 fw-700"
+          style={{ padding: "2px 10px" }}
+        >
+          Monday January 1st, 2021
+        </Typography>
+      </Box>
+      <DataGrid
+        // rowHeight={32}
+        // className={classes.root}
+        rows={rows}
+        columns={columns}
+        // pageSize={100}
+        checkboxSelection
+        onCellClick={handleCellClick}
+        onRowClick={handleRowClick}
+        disableSelectionOnClick
+        hideFooter
+        disableColumnMenu
+        autoHeight
+        components={{
+          ColumnSortedAscendingIcon: () => (
+            <KeyboardArrowUpOutlinedIcon
+              style={{ fontSize: 12, color: "#fff" }}
+            />
+          ),
+          ColumnSortedDescendingIcon: () => (
+            <KeyboardArrowDownOutlinedIcon
+              style={{ fontSize: 12, color: "#fff" }}
+            />
+          ),
+          // Checkbox: (props) => <div>{...props}</div>
+        }}
+      />
+    </>
+  );
+}

package/src/defaults.ts

@@ -17,7 +17,10 @@ export const defaultSettings : AppSettings = {
         '^https?://(www.)?vimeo.com/',
         '^https?://(www.)?dailymotion.com/',
         '^https?://(www.)?dai.ly/'
-    ]
+    ],
+    themePage: {
+        default: { active: true }
+    }
 };
 
 export const defaultMdSettings = {
@@ -27,10 +30,8 @@ export const defaultMdSettings = {
     appBarTitle: '',
     primaryColor: '#e2001a',
     secondaryColor: '#777777',
-
     resultFirstRowProperty: 'title',
     resultSecondRowProperty: 'sku',
     resultLinkText: 'Info',
-
     customFontFamily: 'Helvetica',
 };