Add ability to change confirmation confirm button

deploy-dev.sh

@@ -0,0 +1,7 @@
+BASEDIR=$(dirname "$0")
+
+npx webpack --mode production --progress || exit $?
+
+rsync -azv $BASEDIR/public/* system-praktyk@kadet.net:~/dev/front
+rsync -azv $BASEDIR/build/* system-praktyk@kadet.net:~/dev/front
+

src/api/index.ts

@@ -13,7 +13,7 @@ import * as internship from "./internship";
 import * as upload from "./upload";
 
 export const axios = Axios.create({
-    baseURL: process.env.API_BASE_URL || "https://system-praktyk.stg.kadet.net/api/",
+    baseURL: process.env.API_BASE_URL || `https://${window.location.hostname}/api/`,
 })
 
 axios.interceptors.request.use(config => {

src/components/confirm.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import React from "react";
 import { createPortal } from "react-dom";
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core";
+import { Button, ButtonProps, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 
 export type ConfirmProps = {
@@ -10,9 +10,10 @@ export type ConfirmProps = {
     content?: React.ReactNode,
     onConfirm?: () => void,
     onCancel?: () => void,
+    confirm?: (props: Pick<ButtonProps, 'onClick'>) => React.ReactNode,
 }
 
-export function Confirm({ children, title, content, onConfirm, onCancel }: ConfirmProps) {
+export function Confirm({ children, title, content, confirm, onConfirm, onCancel }: ConfirmProps) {
     const [ open, setOpen ] = useState<boolean>(false);
     const { t } = useTranslation();
 
@@ -35,7 +36,7 @@ export function Confirm({ children, title, content, onConfirm, onCancel }: Confi
                     <DialogContentText>{ content || t('confirmation') }</DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button color="primary" variant="contained" autoFocus onClick={ handleConfirm }>{ t('confirm') }</Button>
+                    { confirm ? confirm({ onClick: handleConfirm }) : <Button color="primary" variant="contained" autoFocus onClick={ handleConfirm }>{ t('confirm') }</Button> }
                     <Button onClick={ handleCancel }>{ t('cancel') }</Button>
                 </DialogActions>
             </Dialog>,

src/management/page/list.tsx

@@ -17,6 +17,7 @@ import { Add, Edit } from "@material-ui/icons";
 import { createPortal } from "react-dom";
 import { EditStaticPageDialog } from "@/management/page/edit";
 import { Confirm } from "@/components/confirm";
+import useTheme from "@material-ui/core/styles/useTheme";
 
 export const StaticPageManagement = () => {
     const { t } = useTranslation("management");
@@ -69,6 +70,8 @@ export const StaticPageManagement = () => {
     }
 
     const DeleteStaticPageAction = ({ page, children }: { page: OneOrMany<StaticPage>, children?: (action: any) => React.ReactNode }) => {
+        const theme = useTheme();
+
         const handlePageDeletion = async () => {
             await api.page.remove(page);
             updatePageList();
@@ -88,7 +91,20 @@ export const StaticPageManagement = () => {
             }
         </>;
 
-        return <Confirm onConfirm={ handlePageDeletion } content={ confirmation }>
+        return <Confirm
+            onConfirm={ handlePageDeletion }
+            content={ confirmation }
+            confirm={ props =>
+                <Button variant="contained" startIcon={ <Delete /> }
+                        style={{
+                            backgroundColor: theme.palette.error.dark,
+                            color: theme.palette.error.contrastText,
+                        }}
+                        { ...props }>
+                    { t("actions.delete") }
+                </Button>
+            }
+        >
             { action => children ? children(action) : <Tooltip title={ t("actions.delete") as string }><IconButton onClick={ action }><Delete /></IconButton></Tooltip> }
         </Confirm>;
     }
@@ -153,6 +169,7 @@ export const StaticPageManagement = () => {
                 <Button onClick={ updatePageList } startIcon={ <Refresh /> }>{ t("refresh") }</Button>
             </Actions>
             { selected.length > 0 && <Actions>
+                <Typography variant="subtitle2">{ t("actions.bulk") }: </Typography>
                 <DeleteStaticPageAction page={ selected }>
                     { action => <Button startIcon={ <Delete /> } onClick={ action }>{ t("actions.delete") }</Button> }
                 </DeleteStaticPageAction>

translations/management.pl.yaml

@@ -7,6 +7,7 @@ cancel: anuluj
 
 actions:
   label: Akcje
+  bulk: Akcje masowe
   preview: Podgląd
   delete: Usuń
   edit: Edytuj