Pos restaurant

packages/plugin-pos-api/src/graphql/schema/pos.ts

@@ -107,6 +107,7 @@ export const types = ({ contactsEnabled, productsEnabled }) => `
     posId: String
     code: String
     name: String
+    option: JSON
   }
 
   type ProductGroups {
@@ -133,6 +134,7 @@ export const types = ({ contactsEnabled, productsEnabled }) => `
     posId: String!
     code: String
     name: String
+    option: JSON
   }
 
   input CatProdInput {

packages/plugin-pos-api/src/models/definitions/orders.ts

@@ -89,6 +89,7 @@ export interface IPosSlot {
   posId: string;
   name: string;
   code: string;
+  option: { [key: string]: number | string | boolean };
 }
 
 export interface IPosSlotDocument extends IPosSlot, Document {

packages/plugin-pos-api/src/models/definitions/pos.ts

@@ -62,6 +62,9 @@ export interface IPosSlot {
   posId: string;
   name: string;
   code: string;
+  options: {
+    [key: string]: string | number;
+  };
 }
 
 export interface IPosSlotDocument extends IPosSlot, Document {
@@ -178,7 +181,8 @@ export const posSlotSchema = schemaHooksWrapper(
     _id: field({ pkey: true }),
     name: field({ type: String, label: 'Name' }),
     code: field({ type: String, label: 'Code' }),
-    posId: field({ type: String, label: 'Pos' })
+    posId: field({ type: String, label: 'Pos' }),
+    option: field({ type: Object, label: 'Option' })
   }),
   'erxes_pos_slot'
 );

packages/plugin-pos-ui/src/pos/components/Pos.tsx

@@ -143,7 +143,8 @@ class Pos extends React.Component<Props, State> {
       _id: m._id,
       code: m.code,
       name: m.name,
-      posId: m.posId
+      posId: m.posId,
+      option: m.option
     }));
 
     let doc: any = {

packages/plugin-pos-ui/src/pos/components/productGroup/PosSlotItem.tsx

@@ -1,59 +1,60 @@
 import React from 'react';
-import { FormGroup, Button, FormControl } from '@erxes/ui/src';
-import { Block, FlexRow } from '../../../styles';
-import { ISlot } from '../../../types';
+import { SlotListItem as StyledSlotListItem } from '../../../styles';
+import { Button, Icon, Tip, __ } from '@erxes/ui/src';
 
-type Props = {
-  onChange: (slot: ISlot) => void;
-  removeItem: (_id: string) => void;
-  slot: ISlot;
-};
-
-export default class PosSlotItem extends React.Component<Props> {
-  onChangeInput = e => {
-    const { slot } = this.props;
-    const target = e.currentTarget as HTMLInputElement;
-    const value = target.value;
-    const name = target.name;
+const PosSlotItem = ({
+  setActiveSlot,
+  _id,
+  name,
+  code,
+  option,
+  posId,
+  setSlots
+}) => {
+  const deleteSlot = () => setSlots(prev => prev.filter(sl => sl._id !== _id));
 
-    this.props.onChange({
-      ...slot,
-      [name]: value
-    });
+  const copySlot = () => {
+    const copyId = Math.random().toString();
+    setSlots(prev => [
+      ...(prev || []),
+      {
+        _id: copyId,
+        name: `${name}Copy`,
+        code: `${code}Copy`,
+        posId,
+        option: {
+          ...(option || {}),
+          top: option.top + 20,
+          left: option.left + 20
+        }
+      }
+    ]);
+    setActiveSlot(copyId);
   };
+  return (
+    <StyledSlotListItem>
+      <strong>
+        {code} - {name}
+      </strong>
+      <div className="actions">
+        <Button btnStyle="link" onClick={copySlot}>
+          <Tip text={__('Copy')} placement="top">
+            <Icon icon="copy" />
+          </Tip>
+        </Button>
+        <Button btnStyle="link" onClick={() => setActiveSlot(_id)}>
+          <Tip text={__('Manage')} placement="top">
+            <Icon icon="edit-3" />
+          </Tip>
+        </Button>
+        <Button btnStyle="danger" onClick={deleteSlot}>
+          <Tip text={__('Delete')} placement="top">
+            <Icon icon="trash" />
+          </Tip>
+        </Button>
+      </div>
+    </StyledSlotListItem>
+  );
+};
 
-  render() {
-    const { slot, removeItem } = this.props;
-    return (
-      <>
-        <Block>
-          <FlexRow key={slot._id}>
-            <FormGroup>
-              <FormControl
-                id="code"
-                name="code"
-                type="text"
-                value={slot.code}
-                onChange={this.onChangeInput}
-              />
-            </FormGroup>
-            <FormGroup>
-              <FormControl
-                id="name"
-                name="name"
-                type="text"
-                value={slot.name}
-                onChange={this.onChangeInput}
-              />
-            </FormGroup>
-            <Button
-              btnStyle="danger"
-              icon="trash"
-              onClick={() => removeItem(slot._id || '')}
-            />
-          </FlexRow>
-        </Block>
-      </>
-    );
-  }
-}
+export default PosSlotItem;

packages/plugin-pos-ui/src/pos/components/productGroup/posSlotDetail.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { SlotDetailStyled } from '../../../styles';
+import { Button, ControlLabel, FormControl, FormGroup } from '@erxes/ui/src';
+
+const SlotDetail = ({ handleChange, _id, name, code, handleBack, option }) => {
+  const {
+    borderRadius,
+    width,
+    height,
+    top,
+    left,
+    color,
+    rotateAngle,
+    zIndex,
+    isShape
+  } = option || {};
+
+  const onChange = (e, key, isMain, isNumber?: boolean) => {
+    const target = e.currentTarget as HTMLInputElement;
+    handleChange(
+      { [key]: isNumber ? Number(target.value) : target.value },
+      _id,
+      isMain
+    );
+  };
+
+  return (
+    <SlotDetailStyled>
+      <div className="slot-detail-title">Slot Detail</div>
+
+      <FormGroup>
+        <ControlLabel>Name</ControlLabel>
+        <FormControl
+          id="name"
+          type="text"
+          value={name || ''}
+          onChange={e => onChange(e, 'name', true)}
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Code</ControlLabel>
+        <FormControl
+          id="code"
+          type="text"
+          value={code || ''}
+          onChange={e => onChange(e, 'code', true)}
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Rounded</ControlLabel>
+        <FormControl
+          id="borderRadius"
+          type="number"
+          value={borderRadius || 0}
+          onChange={e => onChange(e, 'borderRadius', false, true)}
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Width</ControlLabel>
+        <FormControl
+          id="width"
+          type="number"
+          value={width || 0}
+          onChange={e => onChange(e, 'width', false, true)}
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Height</ControlLabel>
+        <FormControl
+          id="height"
+          type="number"
+          value={height || 0}
+          onChange={e => onChange(e, 'height', false, true)}
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Top</ControlLabel>
+        <FormControl
+          id="top"
+          type="number"
+          value={top || 0}
+          onChange={e => onChange(e, 'top', false, true)}
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Left</ControlLabel>
+        <FormControl
+          id="left"
+          type="number"
+          value={left || 0}
+          onChange={e => onChange(e, 'left', false, true)}
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Rotate Angle</ControlLabel>
+        <FormControl
+          id="rotateAngle"
+          type="number"
+          max={359}
+          value={rotateAngle || 0}
+          onChange={e =>
+            handleChange(
+              {
+                rotateAngle:
+                  Number((e.currentTarget as HTMLInputElement).value) < 360
+                    ? Number((e.currentTarget as HTMLInputElement).value)
+                    : rotateAngle
+              },
+              _id
+            )
+          }
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Color</ControlLabel>
+        <input
+          id="color"
+          type="color"
+          value={color || '#6569DF'}
+          onChange={e => handleChange({ color: e.target.value }, _id)}
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Z-Index</ControlLabel>
+        <FormControl
+          id="zIndex"
+          type="number"
+          value={zIndex || 0}
+          onChange={e => onChange(e, 'zIndex', false, true)}
+        />
+      </FormGroup>
+      <FormGroup horizontal>
+        <input
+          id="isShape"
+          type="checkbox"
+          value={isShape || 0}
+          onChange={e => handleChange({ isShape: e.target.checked }, _id)}
+        />
+        <label htmlFor="isShape">Disabled</label>
+      </FormGroup>
+      <Button onClick={handleBack} btnStyle="success" icon={'plus-circle'}>
+        {'Save'}
+      </Button>
+    </SlotDetailStyled>
+  );
+};
+
+export default SlotDetail;

packages/plugin-pos-ui/src/pos/components/productGroup/posSlotHall.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Hall, HallContainer } from '../../../styles';
+import PosSlotHallItem from './posSlotHallItem';
+
+const PosSlotHall = ({
+  handleBack,
+  slots,
+  handleChange,
+  activeSlot,
+  setActiveSlot
+}) => {
+  return (
+    <HallContainer>
+      <Hall>
+        <div className="background" onClick={handleBack} />
+        {slots.map(sl => (
+          <PosSlotHallItem
+            {...sl}
+            key={sl._id}
+            handleChange={handleChange}
+            active={sl._id === activeSlot}
+            setActiveSlot={setActiveSlot}
+          />
+        ))}
+      </Hall>
+    </HallContainer>
+  );
+};
+
+export default PosSlotHall;