Merge branch 'main' of github.com:hainatravel/GHHub

src/main.jsx

@@ -9,6 +9,7 @@ import RootStore from "@/stores/Root";
 import { StoreContext } from '@/stores/StoreContext';
 import "@/assets/global.css";
 import App from "@/views/App";
+import Standlone from "@/views/Standlone";
 import Login from "@/views/Login";
 import SignOut from "@/views/SignOut";
 import Index from "@/views/index";
@@ -52,7 +53,7 @@ const router = createBrowserRouter([
     ]
   },
   {
-    element: <App />,
+    element: <Standlone />,
     children: [
       { path: "/login", element: <Login /> },
       { path: "/sign-out", element: <SignOut /> }

src/stores/Auth.js

@@ -1,4 +1,7 @@
-import { makeAutoObservable } from "mobx";
+import { makeAutoObservable, runInAction } from "mobx";
+import { fetchJSON } from '@/utils/request';
+import { HT_HOST } from "@/config";
+import { prepareUrl } from '@/utils/commons';
 
 class Auth {
 
@@ -7,10 +10,56 @@ class Auth {
     this.root = root;
   }
 
+  valdateUserPassword(usr, pwd) {
+    const fetchUrl = prepareUrl(HT_HOST + '/service-Cooperate/Cooperate/Login')
+      .append('username', usr)
+      .append('password', pwd)
+      .build();
+
+    return fetchJSON(fetchUrl)
+      .then(json => {
+        if (json.errcode == 0) {
+          runInAction(() => {
+            this.login = {
+              userId: json.Result.WU_LMI_SN,
+              username: json.Result.WU_UserName,
+            }
+          });
+        } else {
+          throw new Error(json.errmsg + ': ' + json.errcode);
+        }
+      });
+  }
+
+  fetchUserDetail(userId) {
+    const fetchUrl = prepareUrl(HT_HOST + '/service-Cooperate/Cooperate/GetLinkManInfo')
+      .append('LMI_SN', userId)
+      .build();
+
+    return fetchJSON(fetchUrl)
+      .then(json => {
+        if (json.errcode == 0) {
+          runInAction(() => {
+            this.login = {
+              userId: json.Result.LMI_SN,
+              username: json.Result.LoginName,
+              travelAgencyId: json.Result.LMI_VEI_SN,
+              travelAgencyName: json.Result.VName,
+              cityId: json.Result.citysn
+            }
+          });
+        } else {
+          throw new Error(json.errmsg + ': ' + json.errcode);
+        }
+      });
+  }
+
   login = {
     userId: 1,
-    username: 'Vu Xuan Giang(ANP)',
+    username: 'Vu Xuan Giang',
-    travelAgencyId: 32531  //30008供应商id对应HT的VEI_SN
+    travelAgencyId: 32531,  //30008供应商id对应HT的VEI_SN
+    travelAgencyName: 'ANP',
+    cityId: 0
   }
 }
 

src/stores/Reservation.js

@@ -1,5 +1,5 @@
 import { makeAutoObservable, runInAction } from "mobx";
-import { fetchJSON } from '@/utils/request';
+import { fetchJSON, postForm } from '@/utils/request';
 import { HT_HOST } from "@/config";
 import { prepareUrl } from '@/utils/commons';
 
@@ -31,7 +31,7 @@ class Reservation {
             this.reservationList = json.Result.map((data, index) => {
               return {
                 key: data.vas_gri_sn,
-                referenceId: data.vas_gri_sn,
+                reservationId: data.vas_gri_sn,
                 referenceNumber: data.GriName,
                 arrivalDate: data.GetGDate,
                 pax: data.PersonNum,
@@ -96,11 +96,10 @@ class Reservation {
             this.cityList = json.Result.map((data, index) => {
               return {
                 key: data.CII_SN,
+                cityId: data.CII_SN,
                 cityName: data.CityName,
                 tourGuideId: data.TGI_SN,
-                tourGuide: data.GuideName,
+                tourGuide: data.GuideName
-                reservationId: reservationId,
-                travelAgencyId: this.root.authStore.login.travelAgencyId,
               }
             });
           } else {
@@ -110,17 +109,17 @@ class Reservation {
       });
   }
 
-  setupCityGuide() {
+  setupCityGuide(cityId, guideId) {
     let formData = new FormData();
-    formData.append('GRI_SN', 1);
+    formData.append('GRI_SN', this.selectedReservation.reservationId);
-    formData.append('VEI_SN', 1);
+    formData.append('VEI_SN', this.root.authStore.login.travelAgencyId);
-    formData.append('TGI_SN', 1);
+    formData.append('TGI_SN', cityId);
-    formData.append('CII_SN', 1);
+    formData.append('CII_SN', guideId);
-    formData.append('GetDate', '2023-06-01');
+    formData.append('GetDate', this.selectedReservation.reservationDate);
-    formData.append('LMI_SN', 1);
+    formData.append('LMI_SN', this.root.authStore.login.userId);
     const postUrl = HT_HOST + '/service-cusservice/PTAddGuide';
 
-    return req.postForm(postUrl, formData)
+    return postForm(postUrl, formData)
       .then(json => {
         console.info(json);
       });
@@ -149,9 +148,15 @@ class Reservation {
       });
   }
 
+  editReservation(reservation) {
+    this.selectedReservation = reservation;
+  }
+
   guideList = [];
   cityList = [];
 
+  selectedReservation = null;
+
   reservationList = [];
 
   reservationDetail = {

src/views/Login.jsx

@@ -1,109 +1,90 @@
-import { Button, Checkbox, Form, Input, Row, Typography, Layout } from 'antd';
+import { Button, Checkbox, Form, Input, Row, App } from 'antd';
-const { Header, Footer, Sider, Content } = Layout;
+import { useStore } from '@/stores/StoreContext.js';
-const { Title } = Typography;
-const headerStyle = {
-  textAlign: 'center',
-  // color: '#fff',
-  height: 64,
-  paddingInline: 50,
-  lineHeight: '64px',
-  backgroundColor: '#f5f5f5',
-};
-const contentStyle = {
-  textAlign: 'center',
-  minHeight: 600,
-  lineHeight: '120px',
-  // color: '#fff',
-  // backgroundColor: '#108ee9',
-};
-const footerStyle = {
-  textAlign: 'center',
-  // color: '#fff',
-  // backgroundColor: '#7dbcea',
-};
-const onFinish = (values) => {
-  console.log('Success:', values);
-};
-const onFinishFailed = (errorInfo) => {
-  console.log('Failed:', errorInfo);
-};
-const Login = () => (
-  <Layout>
-    <Header style={headerStyle}>      
-      <Title>Global Highlights Hub</Title>
-    </Header>
-    <Content style={contentStyle}>
-      <Row justify="center" align="middle" style={{minHeight: 600}}>
-          <Form
-            name="basic"
-            labelCol={{
-              span: 8,
-            }}
-            wrapperCol={{
-              span: 16,
-            }}
-            style={{
-              maxWidth: 600,
-            }}
-            initialValues={{
-              remember: true,
-            }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="Username"
-              name="username"
-              rules={[
-                {
-                  required: true,
-                  message: 'Please input your username!',
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
 
-            <Form.Item
-              label="Password"
-              name="password"
-              rules={[
-                {
-                  required: true,
-                  message: 'Please input your password!',
-                },
-              ]}
-            >
-              <Input.Password />
-            </Form.Item>
 
-            <Form.Item
+function Login() {
-              name="remember"
+  const { authStore } = useStore();
-              valuePropName="checked"
+  const { notification } = App.useApp();
-              wrapperCol={{
-                offset: 8,
-                span: 16,
-              }}
-            >
-              <Checkbox>Remember me</Checkbox>
-            </Form.Item>
 
-            <Form.Item
+  const onFinish = (values) => {
-              wrapperCol={{
+    console.log('Success:', values);
-                offset: 8,
+    authStore.valdateUserPassword(values.username, values.password);
-                span: 16,
+  };
-              }}
+  
-            >
+  const onFinishFailed = (errorInfo) => {
-              <Button type="primary" htmlType="submit">
+    console.log('Failed:', errorInfo);
-                Submit
+  };
-              </Button>
+  
-            </Form.Item>
+  return (
-          </Form>
+    <Row justify="center" align="middle" style={{ minHeight: 500 }}>
-      </Row>
+      <Form
-    </Content>
+        name="basic"
-    <Footer style={footerStyle}>Footer</Footer>
+        labelCol={{
-  </Layout>
+          span: 8,
+        }}
+        wrapperCol={{
+          span: 16,
+        }}
+        style={{
+          maxWidth: 600,
+        }}
+        initialValues={{
+          remember: true,
+        }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
+      >
+        <Form.Item
+          label="Username"
+          name="username"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your username!',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Password"
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your password!',
+            },
+          ]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item
+          name="remember"
+          valuePropName="checked"
+          wrapperCol={{
+            offset: 8,
+            span: 16,
+          }}
+        >
+          <Checkbox>Remember me</Checkbox>
+        </Form.Item>
+
+        <Form.Item
+          wrapperCol={{
+            offset: 8,
+            span: 16,
+          }}
+        >
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
+    </Row>
+  );
+}
 
-);
 export default Login;

src/views/Standlone.jsx

@@ -0,0 +1,57 @@
+import { Outlet, Link, useHref, useLocation } from "react-router-dom";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { Layout, Menu, ConfigProvider, theme, Typography, Space, Row, Col, Alert, App as AntApp } from "antd";
+import { DownOutlined } from "@ant-design/icons";
+import "antd/dist/reset.css";
+import AppLogo from "@/assets/logo-gh.png";
+import { useStore } from "@/stores/StoreContext.js";
+
+const { Title } = Typography;
+const { Header, Content, Footer } = Layout;
+
+function Standlone() {
+	const { authStore } = useStore();
+
+	const {
+		token: { colorBgContainer },
+	} = theme.useToken();
+
+	return (
+		<ConfigProvider
+			theme={{
+				token: {
+					colorPrimary: "#00b96b",
+				},
+				algorithm: theme.defaultAlgorithm,
+			}}>
+			<AntApp>
+				<Layout
+					style={{
+						minHeight: "100vh",
+					}}>
+					<Header className="header" style={{ position: "sticky", top: 0, zIndex: 1, width: "100%" }}>
+						<Row gutter={{ md: 24 }} justify="center">
+							<Col span={4}>
+								<img src={AppLogo} className="logo" alt="App logo" />
+							</Col>
+							<Col span={20}><Title style={{ color: "white", marginTop: "3.5px" }}>Global Highlights Hub</Title></Col>
+						</Row>
+					</Header>
+					<Content
+						style={{
+							padding: 24,
+							margin: 0,
+							minHeight: 280,
+							background: colorBgContainer,
+						}}>
+						<Outlet />
+					</Content>
+					<Footer></Footer>
+				</Layout>
+			</AntApp>
+		</ConfigProvider>
+	);
+}
+
+export default observer(Standlone);

src/views/reservation/Newest.jsx

@@ -13,7 +13,7 @@ function Newest() {
       title: 'Reference number',
       dataIndex: 'referenceNumber',
       key: 'Reference number',
-      render: (text, record) => <NavLink to={`/reservation/${record.referenceId}`}>{text}</NavLink>,
+      render: (text, record) => <NavLink to={`/reservation/${record.reservationId}`}>{text}</NavLink>,
     },
     {
       title: 'Arrival date',
@@ -71,11 +71,12 @@ function Newest() {
         allowClear
         placeholder="Select a guide"
         optionFilterProp="children"
-        onChange={(value) => {
+        onChange={(guideId) => {
           console.log(`selected:`);
-          console.log(value);
+          console.log(guideId);
           console.log(`city:`);
           console.log(city);
+          reservationStore.setupCityGuide(city.cityId, guideId);
         }}
         onSearch={(value) => {
           console.log('search:', value);
@@ -105,8 +106,9 @@ function Newest() {
   const showCityGuideModal = (reservation) => {  
     setDataLoading(true);  
     setIsModalOpen(true);
+    reservationStore.editReservation(reservation);
     reservationStore.fetchGuideList();
-    reservationStore.fetchCityList(reservation.referenceId)
+    reservationStore.fetchCityList(reservation.reservationId)
       .catch(ex => {
         notification.error({
           message: `Notification`,