Minor UI fixes

This commit is contained in:
grimsi
2024-09-29 17:53:40 +02:00
parent a6c6c7510b
commit 47565e7fd2
4 changed files with 27 additions and 23 deletions
@@ -55,7 +55,7 @@ function MessageManagementLayout({getConfig, getConfigs, formik}: any) {
<div className="flex flex-row"> <div className="flex flex-row">
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1">
<div className="flex flex-row gap-8"> <div className="flex flex-row gap-8">
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1 h-fit">
<Section title="E-Mail"/> <Section title="E-Mail"/>
<ConfigFormField configElement={getConfig("messages.providers.email.enabled")}/> <ConfigFormField configElement={getConfig("messages.providers.email.enabled")}/>
<ConfigFormField configElement={getConfig("messages.providers.email.host")} <ConfigFormField configElement={getConfig("messages.providers.email.host")}
@@ -74,7 +74,7 @@ function MessageManagementLayout({getConfig, getConfigs, formik}: any) {
formik.values.messages.providers.email.port && formik.values.messages.providers.email.port &&
formik.values.messages.providers.email.username)}>Test</Button> formik.values.messages.providers.email.username)}>Test</Button>
</div> </div>
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1 h-fit">
<Section title="Message Templates"/> <Section title="Message Templates"/>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{availableTemplates.map((template: MessageTemplateDto) => {availableTemplates.map((template: MessageTemplateDto) =>
@@ -34,6 +34,7 @@ export default function SendTestNotificationModal({
<> <>
<Formik <Formik
initialValues={{}} initialValues={{}}
isInitialValid={false}
onSubmit={async (values) => { onSubmit={async (values) => {
await MessageEndpoint.sendTestNotification(selectedTemplate?.key, values); await MessageEndpoint.sendTestNotification(selectedTemplate?.key, values);
toast.success("Test notification to you has been sent"); toast.success("Test notification to you has been sent");
@@ -41,25 +42,28 @@ export default function SendTestNotificationModal({
}} }}
validationSchema={generateValidationSchema(selectedTemplate?.availablePlaceholders as string[])} validationSchema={generateValidationSchema(selectedTemplate?.availablePlaceholders as string[])}
> >
<Form> {(formik) => (
<ModalHeader className="flex flex-col gap-1"> <Form>
Send {selectedTemplate?.name} Test Message <ModalHeader className="flex flex-col gap-1">
</ModalHeader> Send {selectedTemplate?.name} Test Message
<ModalBody> </ModalHeader>
<p className="text-ls font-semibold mb-4">Fill the placeholders of the template</p> <ModalBody>
{selectedTemplate?.availablePlaceholders?.map((placeholder) => <p className="text-ls font-semibold mb-4">Fill the placeholders of the
<Input key={placeholder} label={placeholder} name={placeholder}/> template</p>
)} {selectedTemplate?.availablePlaceholders?.map((placeholder) =>
</ModalBody> <Input key={placeholder} label={placeholder} name={placeholder}/>
<ModalFooter> )}
<Button color="danger" variant="light" onPress={onClose}> </ModalBody>
Close <ModalFooter>
</Button> <Button color="danger" variant="light" onPress={onClose}>
<Button color="primary" type="submit"> Close
Send </Button>
</Button> <Button color="primary" type="submit" isDisabled={!formik.isValid}>
</ModalFooter> Send
</Form> </Button>
</ModalFooter>
</Form>
)}
</Formik> </Formik>
</> </>
)} )}
@@ -139,7 +139,7 @@ export default function withConfigPage(WrappedComponent: React.ComponentType<any
<Button <Button
color="primary" color="primary"
isLoading={formik.isSubmitting} isLoading={formik.isSubmitting}
disabled={formik.isSubmitting || configSaved || !formik.dirty} isDisabled={formik.isSubmitting || configSaved || !formik.dirty}
type="submit" type="submit"
> >
{formik.isSubmitting ? "" : configSaved ? <Check/> : "Save"} {formik.isSubmitting ? "" : configSaved ? <Check/> : "Save"}
@@ -130,7 +130,7 @@ export function UserManagementCard({user}: { user: UserInfoDto }) {
<Dropdown placement="bottom-end" size="sm" backdrop="opaque"> <Dropdown placement="bottom-end" size="sm" backdrop="opaque">
<DropdownTrigger> <DropdownTrigger>
<DotsThreeVertical/> <DotsThreeVertical cursor="pointer"/>
</DropdownTrigger> </DropdownTrigger>
<DropdownMenu aria-label="Static Actions" items={dropdownItems} disabledKeys={disabledKeys}> <DropdownMenu aria-label="Static Actions" items={dropdownItems} disabledKeys={disabledKeys}>
{(item) => ( {(item) => (