bmd-extension 1.6.3

package/snippets-tsr.json

@@ -0,0 +1,512 @@
+{
+  "FL": {
+    "prefix": "fl",
+    "body": [
+      "<FlatList",
+      "data={${data}}",
+      "renderItem={({ item }) => <HistoryListItem data={item} />}",
+      "keyExtractor={(item, index) => index.toString()}",
+      "showsHorizontalScrollIndicator={false}",
+      "showsVerticalScrollIndicator={false}",
+      "refreshing={${refreshing}}",
+      "onEndReachedThreshold={0.4}",
+      "onEndReached={${onLoadMore}}",
+      "refreshControl={",
+      "  <RefreshControl",
+      "    refreshing={this.state.isRefreshing}",
+      "    onRefresh={this.onRefresh}",
+      "  />",
+      "}",
+      "/>"
+    ],
+    "description": "Log output to console"
+  },
+  "useNavigate React router  ": {
+    "prefix": "useNavigate",
+    "body": ["const navigate = useNavigate();"],
+    "description": "useNavigate React router  "
+  },
+  "crud crema": {
+    "prefix": "crudCrema",
+    "body": [
+      "import { PlusOutlined, SearchOutlined } from \"@ant-design/icons\";",
+      "import { Button, Input, Space, Spin, Table } from \"antd\";",
+      "import { ${1}Api } from \"api/${1}.api\";",
+      "import { Pagination } from \"components/Pagination\";",
+      "import { useCallback, useEffect, useState } from \"react\";",
+      "import { ModalStatus } from \"types/modal\";",
+      "import { QueryParam } from \"types/query\";",
+      "import { ${1/(.*)/${1:/capitalize}/} } from \"types/${1}\";",
+      "import { getTitle } from \"utils\";",
+      "import AppComponentHeader from \"@crema/core/AppComponentHeader\";",
+      "import StatsCard from \"components/StatsCard/StatsCard\";",
+      "import { RiUserSettingsLine } from \"react-icons/ri\";",
+      "import AppsContainer from \"@crema/core/AppsContainer\";",
+      "import AppsContent from \"@crema/core/AppsContainer/AppsContent\";",
+      "import AppsFooter from \"@crema/core/AppsContainer/AppsFooter\";",
+      "import { ${1/(.*)/${1:/capitalize}/}Modal } from \"./components/${1/(.*)/${1:/capitalize}/}Modal\";",
+      "import { debounce } from \"lodash\";",
+      "",
+      "const { ColumnGroup, Column } = Table;",
+      "",
+      "export const ${TM_FILENAME_BASE} = ({ title = \"\" }) => {",
+      "  const [query, setQuery] = useState<QueryParam>({",
+      "    page: 1,",
+      "    limit: 10,",
+      "    search: \"\",",
+      "  });",
+      "  const [loading, setLoading] = useState(false);",
+      "  const [data, setData] = useState<${1/(.*)/${1:/capitalize}/}[]>([]);",
+      "  const [total, setTotal] = useState(0);",
+      "  const [visibleModal, setVisibleModal] = useState(false);",
+      "  const [selected${1/(.*)/${1:/capitalize}/}, setSelected${1/(.*)/${1:/capitalize}/}] = useState<Partial<${1/(.*)/${1:/capitalize}/}>>(",
+      "    {}",
+      "  );",
+      "  const [modalStatus, setModalStatus] = useState<ModalStatus>(\"create\");",
+      "  const [search, setSearch] = useState(\"\");",
+      "",
+      "  const debounceSearch = useCallback(",
+      "    debounce((keyword) => setQuery({ ...query, search: keyword }), 500),",
+      "    [query]",
+      "  );",
+      "",
+      "  useEffect(() => {",
+      "    document.title = getTitle(title);",
+      "  }, []);",
+      "",
+      "  useEffect(() => {",
+      "    fetchData();",
+      "  }, [query]);",
+      "",
+      "  const fetchData = async () => {",
+      "    setLoading(true);",
+      "    const {data} = await ${1}Api.findAll(query);",
+      "    setLoading(false);",
+      "    setData(data.${1}s);",
+      "    setTotal(data.total);",
+      "  };",
+      "",
+      "  return (",
+      "    <div>",
+      "      <Space",
+      "        style={{",
+      "          width: \"100%\",",
+      "          justifyContent: \"space-between\",",
+      "          alignItems: \"end\",",
+      "        }}",
+      "      >",
+      "        <Space direction=\"vertical\">",
+      "          <AppComponentHeader title={title} />",
+      "          <Space align=\"end\">",
+      "            <Input",
+      "              allowClear",
+      "              suffix={<SearchOutlined />}",
+      "              placeholder=\"Tìm kiếm\"",
+      "              size=\"large\"",
+      "              onChange={(e) => {",
+      "                setSearch(e.target.value);",
+      "                debounceSearch(e.target.value);",
+      "              }}",
+      "              onKeyDown={(e) => {",
+      "                if (e.key === \"Enter\") {",
+      "                  setQuery({ ...query, search });",
+      "                }",
+      "              }}",
+      "            />",
+      "",
+      "            <Button",
+      "              size=\"large\"",
+      "              type=\"primary\"",
+      "              color=\"primary\"",
+      "              icon={<PlusOutlined />}",
+      "              onClick={() => {",
+      "                setModalStatus(\"create\");",
+      "                setVisibleModal(true);",
+      "              }}",
+      "            >",
+      "              Thêm mới",
+      "            </Button>",
+      "          </Space>",
+      "        </Space>",
+      "        <StatsCard",
+      "          icon={<RiUserSettingsLine />}",
+      "          data={total}",
+      "          heading={\"Tổng ${2}\"}",
+      "        />",
+      "      </Space>",
+      "",
+      "      <Spin spinning={loading}>",
+      "        <AppsContainer title=\"\" type=\"bottom\" fullView>",
+      "          <AppsContent>",
+      "            <Table dataSource={data} pagination={false}>",
+      "              <Column title=\"Mã KH\" dataIndex=\"code\" />",
+      "",
+      "              <Column title=\"Tên khách hàng\" dataIndex=\"name\" />",
+      "",
+      "              <Column title=\"Mã số thuế\" dataIndex=\"\" />",
+      "            </Table>",
+      "          </AppsContent>",
+      "",
+      "          <AppsFooter>",
+      "            <Pagination",
+      "              total={total}",
+      "              currentPage={query.page}",
+      "              onChange={({ limit, page }) => {",
+      "                query.page = page;",
+      "                query.limit = limit;",
+      "                setQuery({ ...query });",
+      "              }}",
+      "            />",
+      "          </AppsFooter>",
+      "        </AppsContainer>",
+      "      </Spin>",
+      "      <${1/(.*)/${1:/capitalize}/}Modal",
+      "        onClose={() => {",
+      "        }}",
+      "        onSubmitOk={()=>{",
+      "          fetchData()",
+      "        }}",
+      "      />",
+      "    </div>",
+      "  );",
+      "};",
+      "",
+      "export { ${TM_FILENAME_BASE} as default };",
+      ""
+    ],
+    "description": "crud crema"
+  },
+  "CRUD": {
+    "prefix": "crud",
+    "body": [
+      "import { PlusOutlined, SearchOutlined } from \"@ant-design/icons\";",
+      "import { Button, Input, Space, Spin, Table } from \"antd\";",
+      "import { ${1}Api } from \"api/${1}.api\";",
+      "import { Pagination } from \"components/Pagination\";",
+      "import React, { useEffect, useState, useRef } from \"react\";",
+      "import { ModalStatus } from \"types/modal\";",
+      "import { QueryParam } from \"types/query\";",
+      "import { ${1/(.*)/${1:/capitalize}/} } from \"types/${1}\";",
+      "import { getTitle } from \"utils\";",
+      "import { \\$url } from \"utils/url\";",
+      "import { ${1/(.*)/${1:/capitalize}/}Modal } from \"./components/${1/(.*)/${1:/capitalize}/}Modal\";",
+      "import { use${1/(.*)/${1:/capitalize}/} } from \"hooks/use${1/(.*)/${1:/capitalize}/}\";",
+      "",
+      "const { ColumnGroup, Column } = Table;",
+      "",
+      "export const ${TM_FILENAME_BASE} = ({ title = \"\" }) => {",
+      "  const {",
+      "   ${1}s,",
+      "   total${1/(.*)/${1:/capitalize}/},",
+      "   fetch${1/(.*)/${1:/capitalize}/},",
+      "   loading${1/(.*)/${1:/capitalize}/},",
+      "   setQuery${1/(.*)/${1:/capitalize}/},",
+      "   query${1/(.*)/${1:/capitalize}/},",
+      "} = use${1/(.*)/${1:/capitalize}/}({initQuery: {page: 1, limit: 10}})",
+      "  const [selected${1/(.*)/${1:/capitalize}/}, setSelected${1/(.*)/${1:/capitalize}/}] = useState<Partial<${1/(.*)/${1:/capitalize}/}>>({});",
+      "  const modalRef = useRef<${TM_FILENAME_BASE}Modal>(null)",
+      "",
+      "  useEffect(() => {",
+      "    document.title = getTitle(title);",
+      "  }, []);",
+      "",
+      "  useEffect(() => {",
+      "    fetch${1/(.*)/${1:/capitalize}/}();",
+      "  }, [query${1/(.*)/${1:/capitalize}/}]);",
+      "",
+      "  return (",
+      "    <div>",
+      "      <div className=\"filter-container\">",
+      "        <Space>",
+      "          <div className=\"filter-item\">",
+      "            <label htmlFor=\"\">Tìm kiếm</label>",
+      "            <Input",
+      "              onKeyDown={(ev) => {",
+      "                if (ev.code == \"Enter\") {",
+      "                  query${1/(.*)/${1:/capitalize}/}.page = 1;",
+      "                  setQuery${1/(.*)/${1:/capitalize}/}({ ...query${1/(.*)/${1:/capitalize}/} });",
+      "                }",
+      "              }}",
+      "              size=\"middle\"",
+      "              onChange={(ev) => {",
+      "                query${1/(.*)/${1:/capitalize}/}.search = ev.currentTarget.value;",
+      "              }}",
+      "              placeholder=\"Tìm kiếm\"",
+      "            />",
+      "          </div>",
+      "",
+      "          <div className=\"filter-item btn\">",
+      "            <Button onClick={fetch${1/(.*)/${1:/capitalize}/}} type=\"primary\" icon={<SearchOutlined />}>",
+      "              Tìm kiếm",
+      "            </Button>",
+      "          </div>",
+      "",
+      "          <div className=\"filter-item btn\">",
+      "            <Button",
+      "              onClick={() => {",
+      "                modalRef.current?.handleCreate();",
+      "              }}",
+      "              type=\"primary\"",
+      "              icon={<PlusOutlined />}",
+      "            >",
+      "              Thêm mới",
+      "            </Button>",
+      "          </div>",
+      "        </Space>",
+      "      </div>",
+      "",
+      "        <Table loading={loading${1/(.*)/${1:/capitalize}/}} pagination={false} rowKey=\"id\" dataSource={${1}s}>",
+      "          <Column",
+      "            title=\"Username\"",
+      "            dataIndex=\"username\"",
+      "            key=\"username\"",
+      "            render={(text, record: ${1/(.*)/${1:/capitalize}/}) => {",
+      "              return (",
+      "                <div>",
+      "                  {record.avatar && (",
+      "                    <img",
+      "                      width={40}",
+      "                      height={40}",
+      "                      style={{ objectFit: \"cover\" }}",
+      "                      src={\\$url(record.avatar)}",
+      "                      alt=\"\"",
+      "                    />",
+      "                  )}",
+      "                  <br />",
+      "                  <label htmlFor=\"\">{text}</label>",
+      "                </div>",
+      "              );",
+      "            }}",
+      "          />",
+      "          <Column title=\"Name\" dataIndex=\"name\" key=\"name\" />",
+      "          <Column title=\"Phone\" dataIndex=\"phone\" key=\"phone\" />",
+      "          <Column title=\"Email\" dataIndex=\"email\" key={\"email\"} />",
+      "",
+      "          <Column",
+      "            title=\"Action\"",
+      "            key=\"action\"",
+      "            render={(text, record: ${1/(.*)/${1:/capitalize}/}) => (",
+      "              <span>",
+      "                <Button",
+      "                  type=\"primary\"",
+      "                  onClick={() => {",
+      "                    modalRef.current?.handleUpdate(record)",
+      "                  }}",
+      "                >",
+      "                  Cập nhật",
+      "                </Button>",
+      "              </span>",
+      "            )}",
+      "          />",
+      "        </Table>",
+      "",
+      "        <Pagination",
+      "          currentPage={query${1/(.*)/${1:/capitalize}/}.page}",
+      "          total={total${1/(.*)/${1:/capitalize}/}}",
+      "          onChange={({ limit, page }) => {",
+      "            query${1/(.*)/${1:/capitalize}/}.page = page;",
+      "            query${1/(.*)/${1:/capitalize}/}.limit = limit;",
+      "            setQuery${1/(.*)/${1:/capitalize}/}({ ...query${1/(.*)/${1:/capitalize}/} });",
+      "          }}",
+      "        />",
+      "",
+      "      <${1/(.*)/${1:/capitalize}/}Modal",
+      "        onSubmitOk={fetch${1/(.*)/${1:/capitalize}/}}",
+      "        onClose={() => {}}",
+      "        ref={modalRef}",
+      "      />",
+      "    </div>",
+      "  );",
+      "};",
+      ""
+    ],
+    "description": "FE CRUD"
+  },
+  "modal": {
+    "prefix": "modal",
+    "body": [
+      "import { Col, Form, Input, message, Modal, Row } from \"antd\";",
+      "import { Rule } from \"antd/lib/form\";",
+      "import { ${1}Api } from \"api/${1}.api\";",
+      "import { SingleImageUpload } from \"components/Upload/SingleImageUpload\";",
+      "import React, { useEffect, useImperativeHandle, useState } from \"react\";",
+      "import { ModalStatus } from \"types/modal\";",
+      "import { ${1/(.*)/${1:/capitalize}/} } from \"types/${1}\";",
+      "",
+      "const rules: Rule[] = [{ required: true }];",
+      "",
+      "export interface ${1/(.*)/${1:/capitalize}/}Modal {",
+      "  handleCreate: () => void;",
+      "  handleUpdate: (${1}: ${1/(.*)/${1:/capitalize}/}) => void;",
+      "}",
+      "interface ${1/(.*)/${1:/capitalize}/}ModalProps {",
+      "  onClose: () => void;",
+      "  onSubmitOk: () => void;",
+      "}",
+      "",
+      "export const ${1/(.*)/${1:/capitalize}/}Modal = React.forwardRef(",
+      "  (",
+      "    {",
+      "      onClose,",
+      "      onSubmitOk,",
+      "    }: ${1/(.*)/${1:/capitalize}/}ModalProps,",
+      "    ref",
+      "  ) => {",
+      "    const [form] = Form.useForm<${1/(.*)/${1:/capitalize}/}>();",
+      "    const [loading, setLoading] = useState(false);",
+      "    const [visible, setVisible] = useState(false);",
+      "    const [status, setStatus] = useState<ModalStatus>(\"create\");",
+      "    const [selected${1/(.*)/${1:/capitalize}/}, setSelected${1/(.*)/${1:/capitalize}/}] = useState<${1/(.*)/${1:/capitalize}/}>();",
+      "",
+      "    useImperativeHandle<any, ${1/(.*)/${1:/capitalize}/}Modal>(",
+      "      ref,",
+      "      () => ({",
+      "        handleCreate() {",
+      "          form.resetFields();",
+      "          setVisible(true);",
+      "          setStatus(\"create\");",
+      "          setSelected${1/(.*)/${1:/capitalize}/}(undefined);",
+      "        },",
+      "        handleUpdate(${1}: ${1/(.*)/${1:/capitalize}/}) {",
+      "          form.setFieldsValue({ ...${1}});",
+      "          setVisible(true);",
+      "          setStatus(\"update\");",
+      "          setSelected${1/(.*)/${1:/capitalize}/}(${1});",
+      "        },",
+      "      }),",
+      "      []",
+      "    );",
+      "",
+      "const getPayload = () => {",
+      "  const {...rest} = form.getFieldsValue();",
+      "  return { ${1}: rest};",
+      "}",
+      "",
+      "const submitForm = async () => {",
+      "  try{",
+      "    setLoading(true);",
+      "    const valid = await form.validateFields();",
+      "    const data = getPayload()",
+      "    let res: any = undefined;",
+      "    switch(status){",
+      "      case \"create\":",
+      "        res = await ${1}Api.create(data);",
+      "        message.success(\"Create ${1/(.*)/${1:/capitalize}/} successfully!\");",
+      "        break;",
+      "      case \"update\":",
+      "        res = await ${1}Api.update(selected${1/(.*)/${1:/capitalize}/}?.id || 0, data);",
+      "        message.success(\"Update ${1/(.*)/${1:/capitalize}/} successfully!\");",
+      "        break;",
+      "    }",
+      "      onSubmitOk();",
+      "      handleClose();",
+      "  }",
+      "  finally {",
+      "    setLoading(false);",
+      "  }",
+      "}",
+      "",
+      "const handleClose = () => {",
+      "  onClose?.();",
+      "  setVisible(false);",
+      "  setSelected${1/(.*)/${1:/capitalize}/}(undefined)",
+      "}",
+      "",
+      "    return (",
+      "      <Modal",
+      "        onCancel={()=> {",
+      "         handleClose();",
+      "         }}",
+      "        visible={visible}",
+      "        title={status == \"create\" ? \"Create ${1/(.*)/${1:/capitalize}/}\" : \"Update ${1/(.*)/${1:/capitalize}/}\"}",
+      "        style={{ top: 20 }}",
+      "        width={700}",
+      "        confirmLoading={loading}",
+      "        onOk={submitForm}",
+      "      >",
+      "        <Form layout=\"vertical\" form={form}>",
+      "          <Row gutter={16}>",
+      "            <Col span={12}>",
+      "              <Form.Item label=\"Username\" name=\"username\" rules={rules}>",
+      "                <Input placeholder=\"\" />",
+      "              </Form.Item>",
+      "            </Col>",
+      "",
+      "            {status == \"create\" && (",
+      "              <Col span={12}>",
+      "                <Form.Item label=\"Password\" name=\"password\" rules={rules}>",
+      "                  <Input placeholder=\"\" />",
+      "                </Form.Item>",
+      "              </Col>",
+      "            )}",
+      "",
+      "            <Col span={12}>",
+      "              <Form.Item label=\"Name\" name=\"name\" rules={rules}>",
+      "                <Input placeholder=\"\" />",
+      "              </Form.Item>",
+      "            </Col>",
+      "",
+      "            <Col span={12}>",
+      "              <Form.Item label=\"Phone\" name=\"phone\" rules={rules}>",
+      "                <Input placeholder=\"\" />",
+      "              </Form.Item>",
+      "            </Col>",
+      "",
+      "            <Col span={12}>",
+      "              <Form.Item label=\"Email\" name=\"email\">",
+      "                <Input placeholder=\"\" />",
+      "              </Form.Item>",
+      "            </Col>",
+      "          </Row>",
+      "",
+      "          <Form.Item shouldUpdate={true}>",
+      "            {() => {",
+      "              return (",
+      "                <Form.Item label=\"Avatar\" name=\"avatar\">",
+      "                  <SingleImageUpload",
+      "                    onUploadOk={(path: string) => {",
+      "                      console.log(\"onUploadOk:\", path);",
+      "                      form.setFieldsValue({",
+      "                        avatar: path,",
+      "                      });",
+      "                    }}",
+      "                    imageUrl={form.getFieldValue(\"avatar\")}",
+      "                  />",
+      "                </Form.Item>",
+      "              );",
+      "            }}",
+      "          </Form.Item>",
+      "        </Form>",
+      "      </Modal>",
+      "    );",
+      "  }",
+      ");",
+      ""
+    ],
+    "description": "modal"
+  },
+  "form-milk": {
+    "prefix": "form-milk",
+    "body": [
+      "<Formik",
+      " initialValues={{ ...initValues }}",
+      "onSubmit={(values, formikActions) => {",
+      "formikActions.setSubmitting(false);",
+      "}}",
+      "validationSchema={yup.object().shape({",
+      "})}",
+      ">",
+      "{({",
+      " values,handleChange,errors,setFieldTouched,touched,setFieldValue,handleSubmit,isValid,",
+      "}) => (",
+      "    <>",
+      "</>",
+      ")}",
+      "   </Formik>"
+    ]
+  },
+  "json-string": {
+    "prefix": "json-string",
+    "body": "JSON.stringify($0)"
+  }
+}