Skip to content

Commit

Permalink
fix(web): fix function page ui, update triger modal (#652)
Browse files Browse the repository at this point in the history
* fix: function page ui & button theme

* refactor: trigger modal
  • Loading branch information
LeezQ authored Jan 19, 2023
1 parent 2ee412c commit a7fcfa5
Show file tree
Hide file tree
Showing 21 changed files with 403 additions and 221 deletions.
8 changes: 5 additions & 3 deletions web/public/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,16 @@
"Function": "Function",
"FunctionList": "Function List",
"FunctionName": "Function Name",
"FunctionNameTip": "The unique identifier of the function, such as",
"FunctionNameTip": "The unique identifier of the function, such as get-user",
"InterfaceDebug": "Interface Debugging",
"Methods": "Request Method",
"Name": "Parameter Name",
"SearchPlaceholder": "Please enter the function name query",
"Select": "chosen",
"SystemDependence": "Built-In",
"Value": "Value",
"isSupport": "Whether to support"
"isSupport": "Whether to support",
"FunctionNameRule": "Function names can only be in letters"
},
"HomePanel": {
"APP": "Android or iOS app",
Expand Down Expand Up @@ -166,7 +167,8 @@
"SetTimeout": "timed task",
"Time": "Creation/update time",
"Trigger": "Trigger",
"Type": "Type"
"Type": "Type",
"CronHelp": "more examples"
},
"NoData": "Currently no data"
}
11 changes: 7 additions & 4 deletions web/public/locales/zh-CN/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"AddFunction": "添加函数",
"EditFunction": "编辑函数",
"FunctionName": "函数名",
"FunctionNameTip": "函数唯一标识, 如",
"FunctionNameTip": "函数唯一标识, 如 get-user",
"Methods": "请求方法",
"Description": "函数描述",
"Code": "函数模板",
Expand All @@ -79,7 +79,8 @@
"DependenceName": "依赖包名",
"DependenceVersion": "依赖版本",
"DependenceTip": "请输入依赖包名",
"Select": "已选择"
"Select": "已选择",
"FunctionNameRule": "函数名只能是英文"
},
"TriggerPanel": {
"Trigger": "触发器",
Expand All @@ -90,11 +91,13 @@
"Function": "关联函数",
"FunctionTip": "请选择关联的云函数",
"Type": "类型",
"Cron": "表达式",
"SetTimeout": "定时任务",
"Time": "创建/更新时间",
"Time": "更新时间",
"Express": "表达式",
"CornTip": "例:0/1 * * * * ?表示每 1 秒执行任务",
"DeleteConfirm": "确定删除该触发器吗"
"DeleteConfirm": "确定删除该触发器吗",
"CronHelp": "更多示例"
},
"LogPanel": {
"Log": "日志",
Expand Down
8 changes: 5 additions & 3 deletions web/public/locales/zh/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,16 @@
"Function": "函数",
"FunctionList": "函数列表",
"FunctionName": "函数名",
"FunctionNameTip": "函数唯一标识, 如",
"FunctionNameTip": "函数唯一标识, 如 get-user",
"InterfaceDebug": "接口调试",
"Methods": "请求方法",
"Name": "参数名",
"SearchPlaceholder": "请输入函数名查询",
"Select": "已选择",
"SystemDependence": "内置依赖",
"Value": "",
"isSupport": "是否支持"
"isSupport": "是否支持",
"FunctionNameRule": "函数名只能是英文"
},
"HomePanel": {
"APP": "Android or iOS 应用",
Expand Down Expand Up @@ -166,7 +167,8 @@
"SetTimeout": "定时任务",
"Time": "创建/更新时间",
"Trigger": "触发器",
"Type": "类型"
"Type": "类型",
"CronHelp": "更多示例"
},
"NoData": "当前无数据"
}
4 changes: 3 additions & 1 deletion web/src/apis/typing.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -198,12 +198,14 @@ export interface TFunction {
desc: string;
tags: any[];
websocket: boolean;
methods: string[];
methods: TMethod[];
createdAt: string;
updatedAt: string;
createdBy: string;
}

export type TMethod = "GET" | "POST" | "PUT" | "DELETE" | "HEAD" | "OPTIONS" | "PATCH";

export interface Source {
code: string;
compiled: string;
Expand Down
13 changes: 11 additions & 2 deletions web/src/chakraTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,16 @@ const Tabs = {
const Table = {
baseStyle: {},
variants: {
unstyled: {
simple: {
parts: ["th", "td"],
th: {
border: "none",
},
td: {
border: "none",
},
},
border: {
parts: ["th", "td"],
th: {
border: "1px solid #dddddd",
Expand All @@ -212,7 +221,7 @@ const Table = {
},
},
defaultProps: {
variant: "unstyled",
variant: "border",
},
};

Expand Down
9 changes: 8 additions & 1 deletion web/src/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ export const SmallNavHeight = 42;

export const Pages = {
function: "function",
trigger: "trigger",
storage: "storage",
database: "database",
logs: "logs",
Expand All @@ -24,6 +23,14 @@ export enum APP_STATUS {

export const DEFAULT_REGION = "default";

export enum SUPPORTED_METHODS {
GET = "GET",
POST = "POST",
PUT = "PUT",
PATCH = "PATCH",
DELETE = "DELETE",
}

export enum APP_PHASE_STATUS {
Creating = "Creating",
Started = "Started",
Expand Down
40 changes: 24 additions & 16 deletions web/src/pages/app/functions/mods/DebugPanel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { keyBy, mapValues } from "lodash";

import { Row } from "@/components/Grid";
import Panel from "@/components/Panel";
import { Pages } from "@/constants";
import { Pages, SUPPORTED_METHODS } from "@/constants";

import { useCompileMutation } from "../../service";
import useFunctionStore from "../../store";
Expand All @@ -27,6 +27,7 @@ import BodyParamsTab from "./BodyParamsTab";
import QueryParamsTab from "./QueryParamsTab";
import HeaderParamsTab from "./QueryParamsTab";

import { TMethod } from "@/apis/typing";
import useFunctionCache from "@/hooks/useFunctionCache";
import useHotKey, { DEFAULT_SHORTCUTS } from "@/hooks/useHotKey";
import useGlobalStore from "@/pages/globalStore";
Expand All @@ -44,7 +45,7 @@ export default function DebugPanel() {

const [runningResData, setRunningResData] = useState();
const [isLoading, setIsLoading] = useState(false);
const [runningMethod, setRunningMethod] = useState<string>("");
const [runningMethod, setRunningMethod] = useState<TMethod>();

const compileMutation = useCompileMutation();

Expand Down Expand Up @@ -126,7 +127,7 @@ export default function DebugPanel() {
value={runningMethod}
disabled={getFunctionUrl() === ""}
onChange={(e) => {
setRunningMethod(e.target.value);
setRunningMethod(e.target.value as TMethod);
}}
>
{currentFunction.methods?.map((item: string) => {
Expand Down Expand Up @@ -158,12 +159,15 @@ export default function DebugPanel() {
<span className="ml-1">({queryParams.length})</span>
)}
</Tab>
<Tab>
Body
{Object.keys(bodyParams).length > 0 && (
<span className="ml-1">({Object.keys(bodyParams).length})</span>
)}
</Tab>
{runningMethod === SUPPORTED_METHODS.POST && (
<Tab>
Body
{Object.keys(bodyParams).length > 0 && (
<span className="ml-1">({Object.keys(bodyParams).length})</span>
)}
</Tab>
)}

<Tab>
Headers
{headerParams.length > 0 && (
Expand All @@ -187,13 +191,17 @@ export default function DebugPanel() {
}}
/>
</TabPanel>
<TabPanel px={2} py={3}>
<BodyParamsTab
onChange={(values) => {
setBodyParams(values);
}}
/>
</TabPanel>

{runningMethod === SUPPORTED_METHODS.POST && (
<TabPanel px={2} py={3}>
<BodyParamsTab
onChange={(values) => {
setBodyParams(values);
}}
/>
</TabPanel>
)}

<TabPanel
px={0}
py={1}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@ const functionTemplates = [
label: "hello laf",
value: `import cloud from '@lafjs/cloud'
exports.main = async function (ctx: FunctionContext) {
export async function main(ctx: FunctionContext) {
console.log('Hello World')
return { data: 'hi, laf' }
}
`,
},
{
label: "database 示例",
value: `import cloud from '@lafjs/cloud'
exports.main = async function (ctx: FunctionContext) {
export async function main(ctx: FunctionContext) {
// you should add a collection named 'test' first
const res = await cloud.database().collection('test').getOne();
console.log(res);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,14 @@ import {
} from "@chakra-ui/react";
import { t } from "i18next";

import { SUPPORTED_METHODS } from "@/constants";

import { useCreateFunctionMutation, useUpdateFunctionMutation } from "../../../service";
import useFunctionStore from "../../../store";

import functionTemplates from "./functionTemplates";

import { TMethod } from "@/apis/typing";
import useGlobalStore from "@/pages/globalStore";

const CreateModal = (props: { functionItem?: any; children?: React.ReactElement }) => {
Expand All @@ -51,7 +54,7 @@ const CreateModal = (props: { functionItem?: any; children?: React.ReactElement
name: string;
description: string;
websocket: boolean;
methods: string[];
methods: TMethod[];
code: string;
};

Expand Down Expand Up @@ -113,10 +116,13 @@ const CreateModal = (props: { functionItem?: any; children?: React.ReactElement
<FormLabel htmlFor="name">{t("FunctionPanel.FunctionName")}</FormLabel>
<Input
{...register("name", {
required: "name is required",
pattern: {
value: /^[A-Za-z][A-Za-z0-9-_]+$/,
message: t("FunctionPanel.FunctionNameRule"),
},
})}
id="name"
placeholder={t("FunctionPanel.FunctionNameTip") + "get-user "}
placeholder={String(t("FunctionPanel.FunctionNameTip"))}
disabled={isEdit}
variant="filled"
/>
Expand All @@ -131,11 +137,13 @@ const CreateModal = (props: { functionItem?: any; children?: React.ReactElement
control={control}
render={({ field: { ref, ...rest } }) => (
<CheckboxGroup {...rest}>
<Checkbox value="GET">GET</Checkbox>
<Checkbox value="POST">POST</Checkbox>
<Checkbox value="HEAD">HEAD</Checkbox>
<Checkbox value="PATCH">PATCH</Checkbox>
<Checkbox value="DELETE">DELETE</Checkbox>
{Object.keys(SUPPORTED_METHODS).map((item) => {
return (
<Checkbox value={item} key={item}>
{item}
</Checkbox>
);
})}
</CheckboxGroup>
)}
rules={{
Expand Down
12 changes: 6 additions & 6 deletions web/src/pages/app/functions/mods/FunctionPanel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ import { Pages } from "@/constants";

import { useDeleteFunctionMutation, useFunctionListQuery } from "../../service";
import useFunctionStore from "../../store";
import TriggerModal from "../TriggerModal";

import CreateModal from "./CreateModal";

import { TFunction } from "@/apis/typing";
import AddTriggerModal from "@/pages/app/trigger/AddTriggerModal";
import useGlobalStore from "@/pages/globalStore";

export default function FunctionList() {
Expand Down Expand Up @@ -64,6 +64,11 @@ export default function FunctionList() {
<Panel.Header
title={t`FunctionPanel.FunctionList`}
actions={[
<TriggerModal key="trigger_modal">
<IconWrap size={20} tooltip={t("TriggerPanel.Trigger").toString()}>
<TriggerIcon fontSize={13} />
</IconWrap>
</TriggerModal>,
<CreateModal key="create_modal">
<IconWrap size={20} tooltip={t("FunctionPanel.AddFunction").toString()}>
<AddIcon fontSize={12} />
Expand Down Expand Up @@ -102,11 +107,6 @@ export default function FunctionList() {
<span className="ml-2 font-medium text-black">{func?.name}</span>
</div>
<div className="invisible flex items-center group-hover:visible">
<AddTriggerModal targetFunc={func.name}>
<IconWrap size={20} tooltip={t("TriggerPanel.AddTrigger").toString()}>
<TriggerIcon fontSize={13} />
</IconWrap>
</AddTriggerModal>
<CreateModal functionItem={func}>
<IconWrap size={20} tooltip={t("Edit").toString()}>
<EditIcon fontSize={13} />
Expand Down
Loading

0 comments on commit a7fcfa5

Please sign in to comment.