fredy goes multilingual 🇩🇪 🇺🇸

ui/src/components/table/JobsTable.jsx

@@ -17,112 +17,116 @@ import {
 } from '@douyinfe/semi-icons';
 
 import './JobsTable.less';
+import { useTranslation } from '../../services/i18n/i18n.jsx';
 
 /**
  * @param {{ jobs: object[], onRun: Function, onEdit: Function, onClone: Function, onDeleteListings: Function, onDeleteJob: Function, onStatusChange: Function }} props
  */
-const JobsTable = ({ jobs, onRun, onEdit, onClone, onDeleteListings, onDeleteJob, onStatusChange }) => (
-  <div className="jobsTable">
-    {jobs.map((job) => (
-      <div key={job.id} className={`jobsTable__row${!job.enabled ? ' jobsTable__row--inactive' : ''}`}>
-        <div className="jobsTable__row__dot">
-          <span
-            className={`jobsTable__row__dot__indicator${job.enabled ? ' jobsTable__row__dot__indicator--active' : ''}`}
-          />
-        </div>
+const JobsTable = ({ jobs, onRun, onEdit, onClone, onDeleteListings, onDeleteJob, onStatusChange }) => {
+  const t = useTranslation();
+  return (
+    <div className="jobsTable">
+      {jobs.map((job) => (
+        <div key={job.id} className={`jobsTable__row${!job.enabled ? ' jobsTable__row--inactive' : ''}`}>
+          <div className="jobsTable__row__dot">
+            <span
+              className={`jobsTable__row__dot__indicator${job.enabled ? ' jobsTable__row__dot__indicator--active' : ''}`}
+            />
+          </div>
 
-        <div className="jobsTable__row__name" title={job.name}>
-          {job.name}
-        </div>
+          <div className="jobsTable__row__name" title={job.name}>
+            {job.name}
+          </div>
 
-        <div className="jobsTable__row__stat jobsTable__row__stat--blue">
-          <IconHome size="small" />
-          {job.numberOfFoundListings || 0}
-        </div>
+          <div className="jobsTable__row__stat jobsTable__row__stat--blue">
+            <IconHome size="small" />
+            {job.numberOfFoundListings || 0}
+          </div>
 
-        <div className="jobsTable__row__stat jobsTable__row__stat--orange">
-          <IconBriefcase size="small" />
-          {job.provider?.length || 0}
-        </div>
+          <div className="jobsTable__row__stat jobsTable__row__stat--orange">
+            <IconBriefcase size="small" />
+            {job.provider?.length || 0}
+          </div>
 
-        <div className="jobsTable__row__stat jobsTable__row__stat--purple">
-          <IconBell size="small" />
-          {job.notificationAdapter?.length || 0}
-        </div>
+          <div className="jobsTable__row__stat jobsTable__row__stat--purple">
+            <IconBell size="small" />
+            {job.notificationAdapter?.length || 0}
+          </div>
 
-        <div className="jobsTable__row__badges">
-          <Switch
-            size="small"
-            checked={job.enabled}
-            disabled={job.isOnlyShared}
-            onChange={(checked) => onStatusChange(job.id, checked)}
-          />
-          {job.running && (
-            <Tag color="green" variant="light" size="small">
-              RUNNING
-            </Tag>
-          )}
-          {job.isOnlyShared && (
-            <Tooltip content="Shared with you - read only">
-              <span style={{ display: 'flex', alignItems: 'center' }}>
-                <IconAlertTriangle style={{ color: 'rgba(var(--semi-yellow-7), 1)' }} />
-              </span>
+          <div className="jobsTable__row__badges">
+            <Switch
+              size="small"
+              checked={job.enabled}
+              disabled={job.isOnlyShared}
+              onChange={(checked) => onStatusChange(job.id, checked)}
+            />
+            {job.running && (
+              <Tag color="green" variant="light" size="small">
+                {t('jobs.cardRunning')}
+              </Tag>
+            )}
+            {job.isOnlyShared && (
+              <Tooltip content={t('jobs.tableSharedTooltip')}>
+                <span style={{ display: 'flex', alignItems: 'center' }}>
+                  <IconAlertTriangle style={{ color: 'rgba(var(--semi-yellow-7), 1)' }} />
+                </span>
+              </Tooltip>
+            )}
+          </div>
+
+          <div className="jobsTable__row__actions">
+            <Tooltip content={t('jobs.tableRunJob')}>
+              <Button
+                type="primary"
+                style={{ background: '#21aa21b5' }}
+                size="small"
+                theme="solid"
+                icon={<IconPlayCircle />}
+                disabled={job.isOnlyShared || job.running}
+                onClick={() => onRun(job.id)}
+              />
             </Tooltip>
-          )}
+            <Tooltip content={t('jobs.tableEditJob')}>
+              <Button
+                type="secondary"
+                size="small"
+                icon={<IconEdit />}
+                disabled={job.isOnlyShared}
+                onClick={() => onEdit(job.id)}
+              />
+            </Tooltip>
+            <Tooltip content={t('jobs.tableCloneJob')}>
+              <Button
+                type="tertiary"
+                size="small"
+                icon={<IconCopy />}
+                disabled={job.isOnlyShared}
+                onClick={() => onClone(job.id)}
+              />
+            </Tooltip>
+            <Tooltip content={t('jobs.tableDeleteListings')}>
+              <Button
+                type="danger"
+                size="small"
+                icon={<IconDescend2 />}
+                disabled={job.isOnlyShared}
+                onClick={() => onDeleteListings(job.id)}
+              />
+            </Tooltip>
+            <Tooltip content={t('jobs.tableDeleteJob')}>
+              <Button
+                type="danger"
+                size="small"
+                icon={<IconDelete />}
+                disabled={job.isOnlyShared}
+                onClick={() => onDeleteJob(job.id)}
+              />
+            </Tooltip>
+          </div>
         </div>
-
-        <div className="jobsTable__row__actions">
-          <Tooltip content="Run Job">
-            <Button
-              type="primary"
-              style={{ background: '#21aa21b5' }}
-              size="small"
-              theme="solid"
-              icon={<IconPlayCircle />}
-              disabled={job.isOnlyShared || job.running}
-              onClick={() => onRun(job.id)}
-            />
-          </Tooltip>
-          <Tooltip content="Edit Job">
-            <Button
-              type="secondary"
-              size="small"
-              icon={<IconEdit />}
-              disabled={job.isOnlyShared}
-              onClick={() => onEdit(job.id)}
-            />
-          </Tooltip>
-          <Tooltip content="Clone Job">
-            <Button
-              type="tertiary"
-              size="small"
-              icon={<IconCopy />}
-              disabled={job.isOnlyShared}
-              onClick={() => onClone(job.id)}
-            />
-          </Tooltip>
-          <Tooltip content="Delete all found Listings">
-            <Button
-              type="danger"
-              size="small"
-              icon={<IconDescend2 />}
-              disabled={job.isOnlyShared}
-              onClick={() => onDeleteListings(job.id)}
-            />
-          </Tooltip>
-          <Tooltip content="Delete Job">
-            <Button
-              type="danger"
-              size="small"
-              icon={<IconDelete />}
-              disabled={job.isOnlyShared}
-              onClick={() => onDeleteJob(job.id)}
-            />
-          </Tooltip>
-        </div>
-      </div>
-    ))}
-  </div>
-);
+      ))}
+    </div>
+  );
+};
 
 export default JobsTable;