Spaces:

Jack698
/

velo

Sleeping

velo / web /src /pages /Message /EditMessage.js

Upload folder using huggingface_hub

adc1e1c verified about 1 year ago

8.38 kB

/*
Copyright (c) 2025 Tethys Plex
This file is part of Veloera.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { useState, useEffect } from 'react';
import { API, isMobile, showError, showSuccess } from '../../helpers';
import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import { 
  Button, 
  Input, 
  SideSheet, 
  Space, 
  Spin, 
  TextArea,
  RadioGroup,
  Radio,
  Table,
  Tag,
  Descriptions
} from '@douyinfe/semi-ui';
import { useTranslation } from 'react-i18next';

const EditMessage = (props) => {
  const { t } = useTranslation();
  
  const [inputs, setInputs] = useState({
    title: '',
    content: '',
    format: 'markdown',
  });
  
  const [loading, setLoading] = useState(false);
  const [messageDetails, setMessageDetails] = useState(null);
  const [recipients, setRecipients] = useState([]);
  const [recipientLoading, setRecipientLoading] = useState(false);
  
  const { title, content, format } = inputs;

  const handleInputChange = (name, value) => {
    setInputs((inputs) => ({ ...inputs, [name]: value }));
  };

  const loadMessageDetails = async (messageId) => {
    if (!messageId) return;
    
    setLoading(true);
    try {
      const res = await API.get(`/api/admin/messages/${messageId}`);
      const { success, message, data } = res.data;
      if (success) {
        setMessageDetails(data);
        setInputs({
          title: data.title || '',
          content: data.content || '',
          format: data.format || 'markdown',
        });
        loadRecipients(messageId);
      } else {
        showError(message);
      }
    } catch (error) {
      showError(error.message);
    }
    setLoading(false);
  };

  const loadRecipients = async (messageId) => {
    setRecipientLoading(true);
    try {
      const res = await API.get(`/api/admin/messages/${messageId}/recipients`);
      const { success, message, data } = res.data;
      if (success) {
        setRecipients(data || []);
      } else {
        showError(message);
      }
    } catch (error) {
      showError(error.message);
    }
    setRecipientLoading(false);
  };

  useEffect(() => {
    if (props.visible && props.editingMessage?.id) {
      loadMessageDetails(props.editingMessage.id);
    }
  }, [props.visible, props.editingMessage?.id]);

  const recipientColumns = [
    {
      title: 'ID',
      dataIndex: 'user_id',
      width: 80,
    },
    {
      title: t('用户名'),
      dataIndex: 'username',
    },
    {
      title: t('显示名称'),
      dataIndex: 'display_name',
      render: (text) => text || '-',
    },
    {
      title: t('阅读状态'),
      dataIndex: 'read_at',
      width: 120,
      render: (text) => (
        <Tag color={text ? 'green' : 'orange'} size='small'>
          {text ? t('已读') : t('未读')}
        </Tag>
      ),
    },
    {
      title: t('阅读时间'),
      dataIndex: 'read_at',
      width: 180,
      render: (text) => {
        return text ? new Date(text).toLocaleString() : '-';
      },
    },
  ];

  const submit = async () => {
    setLoading(true);
    
    if (!inputs.title.trim()) {
      showError(t('请输入消息标题'));
      setLoading(false);
      return;
    }
    
    if (!inputs.content.trim()) {
      showError(t('请输入消息内容'));
      setLoading(false);
      return;
    }

    const messageData = {
      title: inputs.title.trim(),
      content: inputs.content.trim(),
      format: inputs.format,
    };

    try {
      const res = await API.put(`/api/admin/messages/${props.editingMessage.id}`, messageData);
      const { success, message } = res.data;
      if (success) {
        showSuccess(t('消息更新成功'));
        props.refresh();
        props.handleClose();
      } else {
        showError(message);
      }
    } catch (error) {
      showError(error.message);
    }
    setLoading(false);
  };

  const handleCancel = () => {
    setInputs({
      title: '',
      content: '',
      format: 'markdown',
    });
    setMessageDetails(null);
    setRecipients([]);
    props.handleClose();
  };

  return (
    <>
      <SideSheet
        placement={'right'}
        title={<Title level={3}>{t('编辑消息')}</Title>}
        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
        visible={props.visible}
        footer={
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Space>
              <Button theme='solid' size={'large'} onClick={submit} loading={loading}>
                {t('更新消息')}
              </Button>
              <Button
                theme='solid'
                size={'large'}
                type={'tertiary'}
                onClick={handleCancel}
              >
                {t('取消')}
              </Button>
            </Space>
          </div>
        }
        closeIcon={null}
        onCancel={() => handleCancel()}
        width={isMobile() ? '100%' : 900}
      >
        <Spin spinning={loading}>
          <div style={{ padding: '20px 0' }}>
            {messageDetails && (
              <div style={{ marginBottom: 24 }}>
                <Descriptions
                  data={[
                    { key: t('消息ID'), value: messageDetails.id },
                    { key: t('创建时间'), value: new Date(messageDetails.created_at).toLocaleString() },
                    { key: t('收件人数'), value: recipients.length },
                    { key: t('已读人数'), value: recipients.filter(r => r.read_at).length },
                  ]}
                  row
                  size="small"
                />
              </div>
            )}
            <Input
              label={t('消息标题')}
              placeholder={t('请输入消息标题')}
              value={title}
              onChange={(value) => handleInputChange('title', value)}
              style={{ marginBottom: 20 }}
            />
            <div style={{ marginBottom: 20 }}>
              <label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
                {t('内容格式')}
              </label>
              <RadioGroup
                type="button"
                value={format}
                onChange={(e) => handleInputChange('format', e.target.value)}
              >
                <Radio value="markdown">Markdown</Radio>
                <Radio value="html">HTML</Radio>
              </RadioGroup>
            </div>
            <div style={{ marginBottom: 20 }}>
              <label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
                {t('消息内容')}
              </label>
              <TextArea
                placeholder={format === 'html' ? t('请输入HTML格式的消息内容') : t('请输入Markdown格式的消息内容')}
                value={content}
                onChange={(value) => handleInputChange('content', value)}
                rows={8}
                style={{ fontFamily: 'monospace' }}
              />
            </div>
            <div>
              <label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
                {t('收件人列表')}
              </label>
              
              <Table
                columns={recipientColumns}
                dataSource={recipients}
                loading={recipientLoading}
                pagination={{
                  pageSize: 10,
                  showSizeChanger: false,
                  size: 'small',
                }}
                size="small"
                style={{ maxHeight: 400, overflow: 'auto' }}
              />
            </div>
          </div>
        </Spin>
      </SideSheet>
    </>
  );
};

export default EditMessage;

	/*
	Copyright (c) 2025 Tethys Plex

	This file is part of Veloera.

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	GNU General Public License for more details.

	You should have received a copy of the GNU General Public License
	along with this program. If not, see <https://www.gnu.org/licenses/>.
	*/
	import React, { useState, useEffect } from 'react';
	import { API, isMobile, showError, showSuccess } from '../../helpers';
	import Title from '@douyinfe/semi-ui/lib/es/typography/title';
	import {
	Button,
	Input,
	SideSheet,
	Space,
	Spin,
	TextArea,
	RadioGroup,
	Radio,
	Table,
	Tag,
	Descriptions
	} from '@douyinfe/semi-ui';
	import { useTranslation } from 'react-i18next';

	const EditMessage = (props) => {
	const { t } = useTranslation();

	const [inputs, setInputs] = useState({
	title: '',
	content: '',
	format: 'markdown',
	});

	const [loading, setLoading] = useState(false);
	const [messageDetails, setMessageDetails] = useState(null);
	const [recipients, setRecipients] = useState([]);
	const [recipientLoading, setRecipientLoading] = useState(false);

	const { title, content, format } = inputs;

	const handleInputChange = (name, value) => {
	setInputs((inputs) => ({ ...inputs, [name]: value }));
	};

	const loadMessageDetails = async (messageId) => {
	if (!messageId) return;

	setLoading(true);
	try {
	const res = await API.get(`/api/admin/messages/${messageId}`);
	const { success, message, data } = res.data;
	if (success) {
	setMessageDetails(data);
	setInputs({
	title: data.title \|\| '',
	content: data.content \|\| '',
	format: data.format \|\| 'markdown',
	});
	loadRecipients(messageId);
	} else {
	showError(message);
	}
	} catch (error) {
	showError(error.message);
	}
	setLoading(false);
	};

	const loadRecipients = async (messageId) => {
	setRecipientLoading(true);
	try {
	const res = await API.get(`/api/admin/messages/${messageId}/recipients`);
	const { success, message, data } = res.data;
	if (success) {
	setRecipients(data \|\| []);
	} else {
	showError(message);
	}
	} catch (error) {
	showError(error.message);
	}
	setRecipientLoading(false);
	};

	useEffect(() => {
	if (props.visible && props.editingMessage?.id) {
	loadMessageDetails(props.editingMessage.id);
	}
	}, [props.visible, props.editingMessage?.id]);

	const recipientColumns = [
	{
	title: 'ID',
	dataIndex: 'user_id',
	width: 80,
	},
	{
	title: t('用户名'),
	dataIndex: 'username',
	},
	{
	title: t('显示名称'),
	dataIndex: 'display_name',
	render: (text) => text \|\| '-',
	},
	{
	title: t('阅读状态'),
	dataIndex: 'read_at',
	width: 120,
	render: (text) => (
	<Tag color={text ? 'green' : 'orange'} size='small'>
	{text ? t('已读') : t('未读')}
	</Tag>
	),
	},
	{
	title: t('阅读时间'),
	dataIndex: 'read_at',
	width: 180,
	render: (text) => {
	return text ? new Date(text).toLocaleString() : '-';
	},
	},
	];

	const submit = async () => {
	setLoading(true);

	if (!inputs.title.trim()) {
	showError(t('请输入消息标题'));
	setLoading(false);
	return;
	}

	if (!inputs.content.trim()) {
	showError(t('请输入消息内容'));
	setLoading(false);
	return;
	}

	const messageData = {
	title: inputs.title.trim(),
	content: inputs.content.trim(),
	format: inputs.format,
	};

	try {
	const res = await API.put(`/api/admin/messages/${props.editingMessage.id}`, messageData);
	const { success, message } = res.data;
	if (success) {
	showSuccess(t('消息更新成功'));
	props.refresh();
	props.handleClose();
	} else {
	showError(message);
	}
	} catch (error) {
	showError(error.message);
	}
	setLoading(false);
	};

	const handleCancel = () => {
	setInputs({
	title: '',
	content: '',
	format: 'markdown',
	});
	setMessageDetails(null);
	setRecipients([]);
	props.handleClose();
	};

	return (
	<>
	<SideSheet
	placement={'right'}
	title={<Title level={3}>{t('编辑消息')}</Title>}
	headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
	bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
	visible={props.visible}
	footer={
	<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
	<Space>
	<Button theme='solid' size={'large'} onClick={submit} loading={loading}>
	{t('更新消息')}
	</Button>
	<Button
	theme='solid'
	size={'large'}
	type={'tertiary'}
	onClick={handleCancel}
	>
	{t('取消')}
	</Button>
	</Space>
	</div>
	}
	closeIcon={null}
	onCancel={() => handleCancel()}
	width={isMobile() ? '100%' : 900}
	>
	<Spin spinning={loading}>
	<div style={{ padding: '20px 0' }}>
	{messageDetails && (
	<div style={{ marginBottom: 24 }}>
	<Descriptions
	data={[
	{ key: t('消息ID'), value: messageDetails.id },
	{ key: t('创建时间'), value: new Date(messageDetails.created_at).toLocaleString() },
	{ key: t('收件人数'), value: recipients.length },
	{ key: t('已读人数'), value: recipients.filter(r => r.read_at).length },
	]}
	row
	size="small"
	/>
	</div>
	)}

	<Input
	label={t('消息标题')}
	placeholder={t('请输入消息标题')}
	value={title}
	onChange={(value) => handleInputChange('title', value)}
	style={{ marginBottom: 20 }}
	/>

	<div style={{ marginBottom: 20 }}>
	<label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
	{t('内容格式')}
	</label>
	<RadioGroup
	type="button"
	value={format}
	onChange={(e) => handleInputChange('format', e.target.value)}
	>
	<Radio value="markdown">Markdown</Radio>
	<Radio value="html">HTML</Radio>
	</RadioGroup>
	</div>

	<div style={{ marginBottom: 20 }}>
	<label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
	{t('消息内容')}
	</label>
	<TextArea
	placeholder={format === 'html' ? t('请输入HTML格式的消息内容') : t('请输入Markdown格式的消息内容')}
	value={content}
	onChange={(value) => handleInputChange('content', value)}
	rows={8}
	style={{ fontFamily: 'monospace' }}
	/>
	</div>

	<div>
	<label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
	{t('收件人列表')}
	</label>

	<Table
	columns={recipientColumns}
	dataSource={recipients}
	loading={recipientLoading}
	pagination={{
	pageSize: 10,
	showSizeChanger: false,
	size: 'small',
	}}
	size="small"
	style={{ maxHeight: 400, overflow: 'auto' }}
	/>
	</div>
	</div>
	</Spin>
	</SideSheet>
	</>
	);
	};

	export default EditMessage;