feat: handle external mail lists

Author: enxg

src/i18n.ts

@@ -53,6 +53,10 @@ i18n
               email: "E-posta",
               full_name: "Ad Soyad",
               actions: "İşlemler",
+              external: "Harici",
+            },
+            warnings: {
+              external_source: "Bu liste harici bir kaynaktan sağlanmaktadır. Düzenleme ve silme işlemleri devre dışıdır.",
             },
           },
           applications: {

src/pages/mailing-lists/edit.tsx

@@ -1,13 +1,24 @@
 import { Edit, useForm } from "@refinedev/antd";
+import { useNavigation } from "@refinedev/core";
 import { Form, Input } from "antd";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 export const MailingListEdit = () => {
     const { t } = useTranslation();
-    const { formProps, saveButtonProps } = useForm({
+    const { list } = useNavigation();
+    const { formProps, saveButtonProps, query } = useForm({
         resource: "mailing_lists"
     });
 
+    const record = query?.data?.data;
+
+    useEffect(() => {
+        if (record && record.source !== "internal") {
+            list("mailing_lists");
+        }
+    }, [record]);
+
     return (
         <Edit 
             saveButtonProps={{ ...saveButtonProps, children: t("buttons.save") }} 

src/pages/mailing-lists/list.tsx

@@ -6,7 +6,7 @@ import {
     ShowButton,
     useTable,
 } from "@refinedev/antd";
-import { Space, Table } from "antd";
+import { Space, Table, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 
 export const MailingListList = () => {
@@ -24,20 +24,39 @@ export const MailingListList = () => {
         }>
             <Table {...tableProps} rowKey="id">
                 <Table.Column dataIndex="id" title={t("mailing_lists.fields.id")} />
-                <Table.Column dataIndex="name" title={t("mailing_lists.fields.name")} />
+                <Table.Column
+                    dataIndex="name"
+                    title={t("mailing_lists.fields.name")}
+                    render={(value: string, record: any) => (
+                        <Space size="small">
+                            {value}
+                            {record.source !== "internal" && (
+                                <Tag color="orange">{t("mailing_lists.fields.external")}</Tag>
+                            )}
+                        </Space>
+                    )}
+                />
                 <Table.Column
                     dataIndex="created_at"
                     title={t("mailing_lists.fields.created_at")}
-                    render={(value: string) => <DateField value={value} format="LLL" />}
+                    render={(value: string, record: any) =>
+                        record.source === "internal"
+                            ? <DateField value={value} format="LLL" />
+                            : <span style={{ color: "rgba(0,0,0,0.25)" }}>—</span>
+                    }
                 />
                 <Table.Column
                     title={t("mailing_lists.fields.actions")}
                     dataIndex="actions"
                     render={(_, record: any) => (
                         <Space>
-                            <EditButton hideText size="small" recordItemId={record.id} />
+                            {record.source === "internal" && (
+                                <EditButton hideText size="small" recordItemId={record.id} />
+                            )}
                             <ShowButton hideText size="small" recordItemId={record.id} />
-                            <DeleteButton hideText size="small" recordItemId={record.id} />
+                            {record.source === "internal" && (
+                                <DeleteButton hideText size="small" recordItemId={record.id} />
+                            )}
                         </Space>
                     )}
                 />

src/pages/mailing-lists/show.tsx

@@ -1,6 +1,6 @@
-import { DateField, Show, useModalForm, useTable } from "@refinedev/antd";
+import { DateField, DeleteButton, EditButton, RefreshButton, Show, useModalForm, useTable } from "@refinedev/antd";
 import { useShow, useDelete } from "@refinedev/core";
-import { Typography, Card, Row, Col, Table, Button, Space, Modal, Form, Input } from "antd";
+import { Alert, Typography, Card, Row, Col, Table, Button, Space, Modal, Form, Input } from "antd";
 import { useTranslation } from "react-i18next";
 import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 
@@ -46,6 +46,8 @@ export const MailingListShow = () => {
     });
   };
 
+  const isInternal = record?.source === "internal";
+
   return (
     <Show
       isLoading={isLoading}
@@ -54,23 +56,40 @@ export const MailingListShow = () => {
                     {t("mailing_lists.titles.show")}
                 </span>
       }
+      headerButtons={({ editButtonProps, deleteButtonProps, refreshButtonProps }) => (
+        <>
+          {isInternal && editButtonProps && <EditButton {...editButtonProps} />}
+          {isInternal && deleteButtonProps && <DeleteButton {...deleteButtonProps} />}
+          {refreshButtonProps && <RefreshButton {...refreshButtonProps} />}
+        </>
+      )}
     >
+      {!isInternal && !isLoading && (
+        <Alert
+          type="warning"
+          showIcon
+          message={t("mailing_lists.warnings.external_source")}
+          style={{ marginBottom: 16 }}
+        />
+      )}
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Card size="small">
             <Row>
-              <Col span={6}>
+              <Col span={isInternal ? 6 : 8}>
                 <Title level={5} style={{ margin: 0 }}>{t("mailing_lists.fields.id")}</Title>
                 <Text>{record?.id}</Text>
               </Col>
-              <Col span={12}>
+              <Col span={isInternal ? 12 : 16}>
                 <Title level={5} style={{ margin: 0 }}>{t("mailing_lists.fields.name")}</Title>
                 <Text>{record?.name}</Text>
               </Col>
-              <Col span={6}>
-                <Title level={5} style={{ margin: 0 }}>{t("mailing_lists.fields.created_at")}</Title>
-                <DateField value={record?.created_at} format="LLL"/>
-              </Col>
+              {isInternal && (
+                <Col span={6}>
+                  <Title level={5} style={{ margin: 0 }}>{t("mailing_lists.fields.created_at")}</Title>
+                  <DateField value={record?.created_at} format="LLL"/>
+                </Col>
+              )}
             </Row>
           </Card>
         </Col>
@@ -82,13 +101,15 @@ export const MailingListShow = () => {
                             </span>
             }
             extra={
-              <Button
-                type="primary"
-                icon={<PlusOutlined/>}
-                onClick={() => show()}
-              >
-                {t("mailing_lists.fields.add_recipient")}
-              </Button>
+              isInternal && (
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined/>}
+                  onClick={() => show()}
+                >
+                  {t("mailing_lists.fields.add_recipient")}
+                </Button>
+              )
             }
           >
             <Table
@@ -103,12 +124,14 @@ export const MailingListShow = () => {
                 dataIndex="actions"
                 render={(_, record: any) => (
                   <Space>
-                    <Button
-                      danger
-                      size="small"
-                      icon={<DeleteOutlined/>}
-                      onClick={() => handleDelete(record.id)}
-                    />
+                    {isInternal && (
+                      <Button
+                        danger
+                        size="small"
+                        icon={<DeleteOutlined/>}
+                        onClick={() => handleDelete(record.id)}
+                      />
+                    )}
                   </Space>
                 )}
               />