From dff7e07b1c8a68796d606c938bc1ba70d61b4f73 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Tue, 21 May 2024 21:21:48 +0200
Subject: [PATCH] alles addchange assignment pagina aangepast + restrictie ui
 duidelijker gemaakt

---
 .../frontend/src/components/WarningPopup.tsx  |  14 +-
 frontend/frontend/src/i18n/en.ts              |  12 +-
 frontend/frontend/src/i18n/nl.ts              |  12 +-
 .../AddChangeAssignmentPage.tsx               | 191 +++++++++------
 .../AddRestrictionButton.tsx                  |  30 +--
 .../RestrictionTemplateUI.tsx                 |  19 +-
 .../RestrictionsDialog.tsx                    | 228 ++++++++++++++----
 7 files changed, 353 insertions(+), 153 deletions(-)

diff --git a/frontend/frontend/src/components/WarningPopup.tsx b/frontend/frontend/src/components/WarningPopup.tsx
index a173b971..cd55c52d 100644
--- a/frontend/frontend/src/components/WarningPopup.tsx
+++ b/frontend/frontend/src/components/WarningPopup.tsx
@@ -1,4 +1,4 @@
-import { Button } from './CustomComponents'
+import { Button, SecondaryButton } from './CustomComponents'
 import {
     DialogActions,
     DialogContent,
@@ -43,12 +43,18 @@ export default function WarningPopup({
         <>
             {/* Warning popup dialog */}
             <Dialog open={open} onClose={handleClose}>
-                <DialogTitle id='popUpTitle' sx={{ textAlign: 'center' }}>{title}</DialogTitle>
+                <DialogTitle id="popUpTitle" sx={{ textAlign: 'center' }}>
+                    {title}
+                </DialogTitle>
                 <DialogContent>
-                    <DialogContentText id='popUpText'>{content}</DialogContentText>
+                    <DialogContentText id="popUpText">
+                        {content}
+                    </DialogContentText>
                 </DialogContent>
                 <DialogActions sx={{ justifyContent: 'center' }}>
-                    <Button onClick={handleClose}>{t('cancel')}</Button>
+                    <SecondaryButton onClick={handleClose}>
+                        {t('cancel')}
+                    </SecondaryButton>
                     {/* Action button */}
                     <Button onClick={hanldeAction} autoFocus>
                         {buttonName}
diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 17f4c353..3362c661 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -121,12 +121,20 @@ const english = {
     open_with_ui: 'Open with UI',
     choose_existing: 'Choose existing',
     make_new_script: 'Make new script',
-    cant_add_teachers_to_student_list: 'You cannot add teachers to the student list',
-    cant_add_students_to_teacher_list: 'You cannot add students to the teacher list',
+    cant_add_teachers_to_student_list:
+        'You cannot add teachers to the student list',
+    cant_add_students_to_teacher_list:
+        'You cannot add students to the teacher list',
     cant_add_users_twice: 'You cannot add users to a subject twice',
     this_user_doesnt_exist: 'This user does not exist',
     status: 'Status',
+    visibility: 'Change Visibility',
+    template_saved_successfully: 'Template saved successfully',
     save_course_warning: 'Save Course?',
+    try_again: 'Try again',
+    openinUi: 'Open in UI',
+    openInEditor: 'Open in editor',
+    no_params: 'No parameters where found in the template.',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 16d1c4e1..ae5e1fc8 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -121,12 +121,20 @@ const dutch = {
     open_with_ui: 'Open met UI',
     choose_existing: 'Kies een bestaand script',
     make_new_script: 'Maak nieuw script aan',
-    cant_add_teachers_to_student_list: 'Je kan geen leerkrachten aan de studenten lijst toevoegen',
-    cant_add_students_to_teacher_list: 'Je kan geen studenten aan de leerkrachten lijst toevoegen',
+    cant_add_teachers_to_student_list:
+        'Je kan geen leerkrachten aan de studenten lijst toevoegen',
+    cant_add_students_to_teacher_list:
+        'Je kan geen studenten aan de leerkrachten lijst toevoegen',
     cant_add_users_twice: 'Je kan gebruikers geen twee keer toevoegen',
     this_user_doesnt_exist: 'Deze gebruiker bestaat niet',
     status: 'Status',
+    visibility: 'Verander Zichtbaarheid',
+    template_saved_successfully: 'Template succesvol opgeslagen',
     save_course_warning: 'Vak Opslaan?',
+    try_again: 'Probeer opnieuw',
+    openinUi: 'Open in UI',
+    openInEditor: 'Open in editor',
+    no_params: 'Geen parameters gevonden in de template.',
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index cf9458c3..887b1084 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -1,4 +1,8 @@
-import {Card, Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
+import {
+    Card,
+    Divider,
+    EvenlySpacedRow,
+} from '../../components/CustomComponents.tsx'
 import {
     Box,
     CircularProgress,
@@ -97,7 +101,7 @@ export function AddChangeAssignmentPage() {
     const [extraDueDate, setExtraDueDate] = useState<Dayjs | null>(null)
     const [oldRestrictions, setOldRestrictions] = useState<restriction[]>([])
     const [restrictions, setRestrictions] = useState<restriction[]>([])
-    const [visible, setVisible] = useState(false)
+    const [visible, setVisible] = useState(true)
     const [assignmentFile, setAssignmentFile] = useState<File>()
     const [maxScore, SetMaxScore] = useState<number>(20)
     const [cleared, setCleared] = useState<boolean>(false)
@@ -806,6 +810,7 @@ export function AddChangeAssignmentPage() {
                                         flexDirection={'row'}
                                         alignItems={'flex-end'}
                                         gap={1}
+                                        width={{ s: '70%', md: '60%' }}
                                     >
                                         <Card
                                             sx={{
@@ -817,32 +822,44 @@ export function AddChangeAssignmentPage() {
                                         >
                                             <Box
                                                 sx={{
-                                                    backgroundColor: 'secondary.main',
+                                                    backgroundColor:
+                                                        'secondary.main',
                                                     height: 48,
                                                     padding: 1,
                                                 }}
                                             >
-                                            <Typography
-                                                variant={'h5'}
-                                                fontWeight={'bold'}
-                                            >
-                                                {t('restrictions')}
-                                            </Typography>
-                                            <EvenlySpacedRow items={[
-                                                    <Typography variant="body1" fontWeight={'bold'}>
-                                                        {t('name')}
-                                                    </Typography>,
-                                                    <Typography variant="body1" fontWeight={'bold'}>
-                                                        {t('must_pass')}
-                                                    </Typography>,
-                                                    <Typography variant="body1" fontWeight={'bold'}>
-                                                        {t('remove')}
-                                                    </Typography>]}
-                                            />
+                                                <Typography
+                                                    variant={'h5'}
+                                                    fontWeight={'bold'}
+                                                >
+                                                    {t('restrictions')}
+                                                </Typography>
+                                                <EvenlySpacedRow
+                                                    items={[
+                                                        <Typography
+                                                            variant="body1"
+                                                            fontWeight={'bold'}
+                                                        >
+                                                            {t('name')}
+                                                        </Typography>,
+                                                        <Typography
+                                                            variant="body1"
+                                                            fontWeight={'bold'}
+                                                        >
+                                                            {t('must_pass')}
+                                                        </Typography>,
+                                                        <Typography
+                                                            variant="body1"
+                                                            fontWeight={'bold'}
+                                                        >
+                                                            {t('remove')}
+                                                        </Typography>,
+                                                    ]}
+                                                />
                                             </Box>
-                                            <Divider/>
+                                            <Divider />
                                             {/*This list will render the restrictions that are added to the assignment.*/}
-                                            <Box sx={{marginTop: -1.1}}>
+                                            <Box sx={{ marginTop: -1.1 }}>
                                                 <List
                                                     sx={{
                                                         maxHeight: '18vh',
@@ -862,8 +879,12 @@ export function AddChangeAssignmentPage() {
                                                                 ) => {
                                                                     return (
                                                                         <>
-                                                                            <Divider/>
-                                                                            <ListItem sx={{ maxHeight: '45px'}}
+                                                                            <Divider />
+                                                                            <ListItem
+                                                                                sx={{
+                                                                                    maxHeight:
+                                                                                        '45px',
+                                                                                }}
                                                                                 key={
                                                                                     index
                                                                                 }
@@ -897,25 +918,21 @@ export function AddChangeAssignmentPage() {
                                             justifyContent={'flex-end'}
                                             alignItems={'flex-end'}
                                         >
-                                            <Tooltip
-                                                title={t('add_restriction')}
-                                            >
-                                                <AddRestrictionButton
-                                                    // When this button is clicked, a pop up will show.
-                                                    // This popup will allow you to choose to make a restriction yourself,
-                                                    // create one starting from a template,
-                                                    // or choose a file from the system.
-                                                    restrictions={restrictions}
-                                                    setRestrictions={(
+                                            <AddRestrictionButton
+                                                // When this button is clicked, a pop up will show.
+                                                // This popup will allow you to choose to make a restriction yourself,
+                                                // create one starting from a template,
+                                                // or choose a file from the system.
+                                                restrictions={restrictions}
+                                                setRestrictions={(
+                                                    newRestrictions
+                                                ) =>
+                                                    setRestrictions(
                                                         newRestrictions
-                                                    ) =>
-                                                        setRestrictions(
-                                                            newRestrictions
-                                                        )
-                                                    }
-                                                    userid={user.user}
-                                                ></AddRestrictionButton>
-                                            </Tooltip>
+                                                    )
+                                                }
+                                                userid={user.user}
+                                            ></AddRestrictionButton>
                                         </Box>
                                     </Box>
                                     {/* Main actions section */}
@@ -925,6 +942,7 @@ export function AddChangeAssignmentPage() {
                                         display={'flex'}
                                         flexDirection={'row'}
                                         width={'100%'}
+                                        flexWrap={'wrap'}
                                         justifyContent={'space-between'}
                                     >
                                         <Box
@@ -932,6 +950,7 @@ export function AddChangeAssignmentPage() {
                                             display={'flex'}
                                             flexDirection={'row'}
                                             gap={10}
+                                            flexWrap={'wrap'}
                                             alignItems={'center'}
                                             padding={2}
                                         >
@@ -941,43 +960,61 @@ export function AddChangeAssignmentPage() {
                                                 flexDirection={'row'}
                                                 alignItems={'center'}
                                             >
-                                                {visible ? (
-                                                    <IconButton
-                                                        // Allows the teacher to select whether
-                                                        // the assignment is visible to students or not.
-                                                        color={'info'}
-                                                        onClick={() =>
-                                                            setVisible(!visible)
-                                                        }
-                                                    >
-                                                        <VisibilityIcon
-                                                            fontSize={'medium'}
-                                                        />
-                                                    </IconButton>
-                                                ) : (
-                                                    <IconButton
-                                                        color={'info'}
-                                                        onClick={() =>
-                                                            setVisible(!visible)
-                                                        }
+                                                <Tooltip
+                                                    title={t('visibility')}
+                                                >
+                                                    {visible ? (
+                                                        <IconButton
+                                                            // Allows the teacher to select whether
+                                                            // the assignment is visible to students or not.
+                                                            color={'info'}
+                                                            onClick={() =>
+                                                                setVisible(
+                                                                    !visible
+                                                                )
+                                                            }
+                                                        >
+                                                            <VisibilityIcon
+                                                                fontSize={
+                                                                    'medium'
+                                                                }
+                                                            />
+                                                        </IconButton>
+                                                    ) : (
+                                                        <IconButton
+                                                            color={'info'}
+                                                            onClick={() =>
+                                                                setVisible(
+                                                                    !visible
+                                                                )
+                                                            }
+                                                        >
+                                                            <VisibilityOffIcon
+                                                                fontSize={
+                                                                    'medium'
+                                                                }
+                                                            />
+                                                        </IconButton>
+                                                    )}
+                                                </Tooltip>
+                                                {assignmentId && !loading && (
+                                                    <Tooltip
+                                                        title={t('remove')}
                                                     >
-                                                        <VisibilityOffIcon
-                                                            fontSize={'medium'}
-                                                        />
-                                                    </IconButton>
+                                                        <IconButton
+                                                            color={'warning'}
+                                                            onClick={
+                                                                openDeleteConfirmation
+                                                            }
+                                                        >
+                                                            <DeleteForeverIcon
+                                                                fontSize={
+                                                                    'medium'
+                                                                }
+                                                            />
+                                                        </IconButton>
+                                                    </Tooltip>
                                                 )}
-                                                <Tooltip title={t('remove')}>
-                                                    <IconButton
-                                                        color={'warning'}
-                                                        onClick={
-                                                            openDeleteConfirmation
-                                                        }
-                                                    >
-                                                        <DeleteForeverIcon
-                                                            fontSize={'medium'}
-                                                        />
-                                                    </IconButton>
-                                                </Tooltip>
                                             </Box>
                                             {/* change group size allowed, no need for extra group switch*/}
                                             {!assignmentId && (
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
index c9c76d0d..0886c495 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
@@ -7,7 +7,7 @@ import DialogTitle from '@mui/material/DialogTitle'
 import AddIcon from '@mui/icons-material/Add'
 import RestrictionsDialog from './RestrictionsDialog'
 import { t } from 'i18next'
-import { IconButton } from '@mui/material'
+import { IconButton, Tooltip } from '@mui/material'
 import { restriction } from './AddChangeAssignmentPage.tsx'
 
 /**
@@ -36,19 +36,21 @@ export default function AddRestrictionButton({
     return (
         <>
             {/* Add Restriction Button */}
-            <IconButton
-                id="addRestrictionButton"
-                sx={{
-                    bgcolor: 'secondary.main',
-                    marginRight: 1,
-                }}
-                onClick={() => {
-                    setOpen(true)
-                    setScroll('paper')
-                }}
-            >
-                <AddIcon sx={{ color: 'secondary.contrastText' }}></AddIcon>
-            </IconButton>
+            <Tooltip title={t('add_restriction')}>
+                <IconButton
+                    id="addRestrictionButton"
+                    sx={{
+                        bgcolor: 'secondary.main',
+                        marginRight: 1,
+                    }}
+                    onClick={() => {
+                        setOpen(true)
+                        setScroll('paper')
+                    }}
+                >
+                    <AddIcon sx={{ color: 'secondary.contrastText' }}></AddIcon>
+                </IconButton>
+            </Tooltip>
             {/* Add Restriction Dialog */}
             <Dialog
                 open={open}
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 857cc83f..26ab5e32 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -1,13 +1,13 @@
 import { useState } from 'react'
 import {
     Box,
-    TextField,
+    Button,
     Checkbox,
+    IconButton,
     List,
     ListItem,
     ListItemText,
-    IconButton,
-    Button,
+    TextField,
 } from '@mui/material'
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
@@ -16,6 +16,7 @@ import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
 import CloseIcon from '@mui/icons-material/Close'
 import { restriction } from './AddChangeAssignmentPage.tsx'
+import { t } from 'i18next'
 
 // Define a type for the parameters
 type ParamValue = string | number | boolean | string[]
@@ -242,6 +243,18 @@ export default function RestrictionTemplateUI({
                 </Toolbar>
             </AppBar>
             <Box aria-label={'Content'} padding={1}>
+                {params.length === 0 && (
+                    <Box
+                        height={'100%'}
+                        alignItems={'center'}
+                        display={'flex'}
+                        justifyContent={'center'}
+                        width={'100%'}
+                        flexGrow={1}
+                    >
+                        <Typography variant={'h6'}>{t('no_params')}</Typography>
+                    </Box>
+                )}
                 {params.map((param, index) => (
                     <div key={index} style={{ marginBottom: '20px' }}>
                         {param.type === 'number' && (
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 4cf01292..67a5d2ff 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -11,20 +11,24 @@ import Toolbar from '@mui/material/Toolbar'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
 import CloseIcon from '@mui/icons-material/Close'
+import CodeIcon from '@mui/icons-material/Code'
 import {
+    Alert,
     Box,
-    ButtonGroup,
+    Collapse,
     FormControl,
     MenuItem,
     Select,
+    Stack,
     TextField,
+    Tooltip,
 } from '@mui/material'
 import { t } from 'i18next'
 import { restriction } from './AddChangeAssignmentPage.tsx'
-import Switch from '@mui/material/Switch'
 import WarningPopup from '../../components/WarningPopup.tsx'
 import RestrictionsTemplateUI from './RestrictionTemplateUI.tsx'
 import instance from '../../axiosConfig.ts'
+import BorderColorIcon from '@mui/icons-material/BorderColor'
 
 interface RestrictionsDialogProps {
     userid: number
@@ -81,7 +85,6 @@ export default function RestrictionsDialog({
 }: RestrictionsDialogProps) {
     const [openTextEditor, setOpenTextEditor] = useState(false)
     const [openTemplateInterface, setOpenTemplateInterface] = useState(false)
-    const [openTemplateInUI, setOpenTemplateInUI] = useState(false)
     const [code, setCode] = useState('' /*code*/) // code is currently not used
     const [textFieldContent, setTextFieldContent] = useState('')
     const [restrictionName, setRestrictionName] = useState('')
@@ -91,6 +94,8 @@ export default function RestrictionsDialog({
     const [popupOpen, setPopupOpen] = useState(false)
     const [myTemplates, setMyTemplates] = useState<Template[]>([])
 
+    const [saveAlert, setSaveAlert] = useState(false)
+    const [saveErrorAlert, setSaveErrorAlert] = useState(false)
     // function to handle the uploaded files and send them to the parent component
     const handleUploadedFiles = (e: ChangeEvent<HTMLInputElement>) => {
         const files = e.target.files
@@ -162,8 +167,18 @@ export default function RestrictionsDialog({
             formdata.append('user', userid.toString())
             formdata.append('bestand', file)
 
-            await instance.post(`/templates/`, formdata, config)
+            const result = await instance.post(`/templates/`, formdata, config)
+            if (result.status === 201) {
+                setSaveAlert(true) // Show the alert
+                setTimeout(() => {
+                    setSaveAlert(false) // Hide the alert after 5 seconds
+                }, 4000)
+            }
         } catch (error) {
+            setSaveErrorAlert(true)
+            setTimeout(() => {
+                setSaveErrorAlert(false)
+            }, 4000)
             console.error('Error updating data:', error)
         }
     }
@@ -257,57 +272,131 @@ export default function RestrictionsDialog({
                     }}
                 >
                     {/* This button groups shows the templates the teacher has made */}
-                    <ButtonGroup
-                        orientation="vertical"
-                        aria-label="My templates"
-                        variant={'outlined'}
-                        color={'primary'}
-                    >
+                    <Stack direction={'column'}>
                         {myTemplates.map((template) => (
-                            <Button
-                                key={template.template_id}
-                                onClick={async () => {
-                                    const response = await instance.get(
-                                        `/templates/${template.template_id}/template/?content=true`
-                                    )
-                                    // This textFieldContent will be used when a template is opened in textmode
-                                    setTextFieldContent(response.data.content)
-
-                                    // The code will be used when a template is opened in the UI
-                                    setCode(response.data.content)
-
-                                    const templatename = template.bestand
-                                        .replace(/^.*[\\/]/, '')
-                                        .split('.')[0]
-                                    const templateextension =
-                                        '.' + template.bestand.split('.')[1]
-                                    setRestrictionName(templatename)
-                                    setRestrictionType(
-                                        templateextension as restrictionExtension
-                                    )
-                                    if (openTemplateInUI) {
-                                        handleClickOpenTemplateInterface()
-                                    } else {
-                                        handleClickOpenTextEditor()
-                                    }
-                                }}
-                            >
-                                {template.bestand.replace(/^.*[\\/]/, '')}
-                            </Button>
+                            <Box marginY={0.5}>
+                                <Tooltip title={t('add_restriction')}>
+                                    <Button
+                                        sx={{ borderRadius: '10px 0 0 10px' }}
+                                        key={template.template_id}
+                                        onClick={async () => {
+                                            const response = await instance.get(
+                                                `/templates/${template.template_id}/template/?content=true`
+                                            )
+                                            // This textFieldContent will be used when a template is opened in textmode
+                                            setTextFieldContent(
+                                                response.data.content
+                                            )
+
+                                            // The code will be used when a template is opened in the UI
+                                            setCode(response.data.content)
+
+                                            const templatename =
+                                                template.bestand
+                                                    .replace(/^.*[\\/]/, '')
+                                                    .split('.')[0]
+                                            const templateextension =
+                                                '.' +
+                                                template.bestand.split('.')[1]
+                                            setRestrictionName(templatename)
+                                            setRestrictionType(
+                                                templateextension as restrictionExtension
+                                            )
+                                            handleSubmit()
+                                        }}
+                                    >
+                                        <Typography
+                                            width={150}
+                                            textOverflow={'ellipsis'}
+                                        >
+                                            {template.bestand.replace(
+                                                /^.*[\\/]/,
+                                                ''
+                                            )}
+                                        </Typography>
+                                    </Button>
+                                </Tooltip>
+                                <Tooltip title={t('openinUi')}>
+                                    <IconButton
+                                        sx={{
+                                            backgroundColor: 'secondary.main',
+                                            borderRadius: 0,
+                                            padding: 1,
+                                            margin: 0,
+                                        }}
+                                        aria-label={'openinUi'}
+                                        onClick={async () => {
+                                            const response = await instance.get(
+                                                `/templates/${template.template_id}/template/?content=true`
+                                            )
+                                            // This textFieldContent will be used when a template is opened in textmode
+                                            setTextFieldContent(
+                                                response.data.content
+                                            )
+
+                                            // The code will be used when a template is opened in the UI
+                                            setCode(response.data.content)
+
+                                            const templatename =
+                                                template.bestand
+                                                    .replace(/^.*[\\/]/, '')
+                                                    .split('.')[0]
+                                            const templateextension =
+                                                '.' +
+                                                template.bestand.split('.')[1]
+                                            setRestrictionName(templatename)
+                                            setRestrictionType(
+                                                templateextension as restrictionExtension
+                                            )
+                                            handleClickOpenTemplateInterface()
+                                        }}
+                                    >
+                                        <BorderColorIcon />
+                                    </IconButton>
+                                </Tooltip>
+                                <Tooltip title={t('openInEditor')}>
+                                    <IconButton
+                                        sx={{
+                                            backgroundColor: 'secondary.main',
+                                            borderRadius: '0 10px 10px 0',
+                                            padding: 1,
+                                            margin: 0,
+                                        }}
+                                        aria-label={'openinUi'}
+                                        onClick={async () => {
+                                            const response = await instance.get(
+                                                `/templates/${template.template_id}/template/?content=true`
+                                            )
+                                            // This textFieldContent will be used when a template is opened in textmode
+                                            setTextFieldContent(
+                                                response.data.content
+                                            )
+
+                                            // The code will be used when a template is opened in the UI
+                                            setCode(response.data.content)
+
+                                            const templatename =
+                                                template.bestand
+                                                    .replace(/^.*[\\/]/, '')
+                                                    .split('.')[0]
+                                            const templateextension =
+                                                '.' +
+                                                template.bestand.split('.')[1]
+                                            setRestrictionName(templatename)
+                                            setRestrictionType(
+                                                templateextension as restrictionExtension
+                                            )
+                                            handleClickOpenTextEditor()
+                                        }}
+                                    >
+                                        <CodeIcon />
+                                    </IconButton>
+                                </Tooltip>
+                            </Box>
                         ))}
-                    </ButtonGroup>
+                    </Stack>
                 </Box>
             </Box>
-            <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
-                {/* This box will contain the templates */}
-                <Typography variant={'body2'}>
-                    {t('open_with_ui') + ':'}
-                </Typography>
-                <Switch
-                    value={openTemplateInUI}
-                    onChange={() => setOpenTemplateInUI(!openTemplateInUI)}
-                />
-            </Box>
             {/* This is the template interface. */}
             <Dialog
                 fullScreen
@@ -488,6 +577,43 @@ export default function RestrictionsDialog({
                         </Card>
                     </Box>
                 </Box>
+                <Box
+                    display={'flex'}
+                    flexDirection={'row-reverse'}
+                    alignItems={'flex-end'}
+                    justifyContent={'flex-start'}
+                    flexGrow={1}
+                >
+                    {saveAlert && (
+                        <Collapse in={saveAlert} timeout={500}>
+                            <Alert
+                                variant={'outlined'}
+                                sx={{
+                                    width: 'fit-content',
+                                    margin: 1,
+                                }}
+                                severity="success"
+                            >
+                                {t('template_saved_successfully')}
+                            </Alert>
+                        </Collapse>
+                    )}
+
+                    {saveErrorAlert && (
+                        <Collapse in={saveErrorAlert} timeout={500}>
+                            <Alert
+                                variant={'outlined'}
+                                sx={{
+                                    width: 'fit-content',
+                                    margin: 1,
+                                }}
+                                severity="error"
+                            >
+                                {t('error') + ' ' + t('try_again')}
+                            </Alert>
+                        </Collapse>
+                    )}
+                </Box>
             </Dialog>
             <WarningPopup
                 title={t('add_restriction') + '?'}