jeffemmett
/
postiz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add or edit modal fixes

This commit is contained in:
Nevo David 2024-12-26 20:27:37 +07:00
parent 9567c4ab25
commit 6853c5b1e1
3 changed files with 61 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
apps/frontend/src/components/launches/add.edit.model.tsx
View File

@ -1,13 +1,7 @@
'use client';
import React, {
FC,
Fragment,
MouseEventHandler,
useCallback,
useEffect,
useMemo,
useState,
FC, Fragment, MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState
} from 'react';
import dayjs from 'dayjs';
import { Integrations } from '@gitroom/frontend/components/launches/calendar.context';
@ -52,6 +46,7 @@ import Image from 'next/image';
import { weightedLength } from '@gitroom/helpers/utils/count.length';
import { uniqBy } from 'lodash';
import { Select } from '@gitroom/react/form/select';
import { useClickOutside } from '@gitroom/frontend/components/layout/click.outside';
function countCharacters(text: string, type: string): number {
if (type !== 'x') {
@ -411,6 +406,8 @@ export const AddEditModal: FC<{
});
}, [data, postFor, selectedIntegrations]);
useClickOutside(askClose);
return (
<>
{user?.tier?.ai && (
@ -465,6 +462,22 @@ export const AddEditModal: FC<{
</Select>
)}
<DatePicker onChange={setDateState} date={dateState} />
{!selectedIntegrations.length && (
<svg
width="10"
height="11"
viewBox="0 0 10 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="cursor-pointer"
onClick={askClose}
>
<path
d="M9.85403 9.64628C9.90048 9.69274 9.93733 9.74789 9.96247 9.80859C9.98762 9.86928 10.0006 9.93434 10.0006 10C10.0006 10.0657 9.98762 10.1308 9.96247 10.1915C9.93733 10.2522 9.90048 10.3073 9.85403 10.3538C9.80757 10.4002 9.75242 10.4371 9.69173 10.4622C9.63103 10.4874 9.56598 10.5003 9.50028 10.5003C9.43458 10.5003 9.36953 10.4874 9.30883 10.4622C9.24813 10.4371 9.19298 10.4002 9.14653 10.3538L5.00028 6.20691L0.854028 10.3538C0.760208 10.4476 0.63296 10.5003 0.500278 10.5003C0.367596 10.5003 0.240348 10.4476 0.146528 10.3538C0.0527077 10.26 2.61548e-09 10.1327 0 10C-2.61548e-09 9.86735 0.0527077 9.7401 0.146528 9.64628L4.2934 5.50003L0.146528 1.35378C0.0527077 1.25996 0 1.13272 0 1.00003C0 0.867352 0.0527077 0.740104 0.146528 0.646284C0.240348 0.552464 0.367596 0.499756 0.500278 0.499756C0.63296 0.499756 0.760208 0.552464 0.854028 0.646284L5.00028 4.79316L9.14653 0.646284C9.24035 0.552464 9.3676 0.499756 9.50028 0.499756C9.63296 0.499756 9.76021 0.552464 9.85403 0.646284C9.94785 0.740104 10.0006 0.867352 10.0006 1.00003C10.0006 1.13272 9.94785 1.25996 9.85403 1.35378L5.70715 5.50003L9.85403 9.64628Z"
fill="currentColor"
/>
</svg>
)}
</div>
</TopTitle>
@ -608,9 +621,6 @@ export const AddEditModal: FC<{
id="add-edit-post-dialog-buttons"
className="flex flex-row flex-wrap w-full h-full gap-[10px] justify-end items-center"
>
<Button className="rounded-[4px]" onClick={askClose}>
Cancel
</Button>
<Submitted
updateOrder={updateOrder}
postId={existingData?.posts?.[0]?.id}
@ -690,12 +700,22 @@ export const AddEditModal: FC<{
)}
>
<div className="mx-[16px]">
<TopTitle
title=""
expend={expend.show}
collapse={expend.hide}
shouldExpend={expend.expend}
/>
<TopTitle title="">
<svg
width="10"
height="11"
viewBox="0 0 10 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="cursor-pointer"
onClick={askClose}
>
<path
d="M9.85403 9.64628C9.90048 9.69274 9.93733 9.74789 9.96247 9.80859C9.98762 9.86928 10.0006 9.93434 10.0006 10C10.0006 10.0657 9.98762 10.1308 9.96247 10.1915C9.93733 10.2522 9.90048 10.3073 9.85403 10.3538C9.80757 10.4002 9.75242 10.4371 9.69173 10.4622C9.63103 10.4874 9.56598 10.5003 9.50028 10.5003C9.43458 10.5003 9.36953 10.4874 9.30883 10.4622C9.24813 10.4371 9.19298 10.4002 9.14653 10.3538L5.00028 6.20691L0.854028 10.3538C0.760208 10.4476 0.63296 10.5003 0.500278 10.5003C0.367596 10.5003 0.240348 10.4476 0.146528 10.3538C0.0527077 10.26 2.61548e-09 10.1327 0 10C-2.61548e-09 9.86735 0.0527077 9.7401 0.146528 9.64628L4.2934 5.50003L0.146528 1.35378C0.0527077 1.25996 0 1.13272 0 1.00003C0 0.867352 0.0527077 0.740104 0.146528 0.646284C0.240348 0.552464 0.367596 0.499756 0.500278 0.499756C0.63296 0.499756 0.760208 0.552464 0.854028 0.646284L5.00028 4.79316L9.14653 0.646284C9.24035 0.552464 9.3676 0.499756 9.50028 0.499756C9.63296 0.499756 9.76021 0.552464 9.85403 0.646284C9.94785 0.740104 10.0006 0.867352 10.0006 1.00003C10.0006 1.13272 9.94785 1.25996 9.85403 1.35378L5.70715 5.50003L9.85403 9.64628Z"
fill="currentColor"
/>
</svg>
</TopTitle>
</div>
{!!selectedIntegrations.length && (
<div className="flex-1 flex flex-col p-[16px] pt-0">

11
apps/frontend/src/components/launches/helpers/pick.platform.component.tsx
View File

@ -147,13 +147,6 @@ export const PickPlatforms: FC<{
);
const handler = async ({ integrationsId }: { integrationsId: string[] }) => {
console.log(
'setSelectedIntegration',
integrations,
integrationsId,
dayjs().unix()
);
const selected = selectedIntegrations.map((p) => p.id);
const notToRemove = selected.filter((p) => integrationsId.includes(p));
const toAdd = integrationsId.filter((p) => !selected.includes(p));
@ -225,7 +218,7 @@ export const PickPlatforms: FC<{
>
<path
d="M10.3541 12.6463C10.4006 12.6927 10.4374 12.7479 10.4626 12.8086C10.4877 12.8693 10.5007 12.9343 10.5007 13C10.5007 13.0657 10.4877 13.1308 10.4626 13.1915C10.4374 13.2522 10.4006 13.3073 10.3541 13.3538C10.3077 13.4002 10.2525 13.4371 10.1918 13.4622C10.1311 13.4874 10.0661 13.5003 10.0004 13.5003C9.9347 13.5003 9.86964 13.4874 9.80894 13.4622C9.74825 13.4371 9.6931 13.4002 9.64664 13.3538L4.64664 8.35378C4.60015 8.30735 4.56328 8.2522 4.53811 8.1915C4.51295 8.13081 4.5 8.06574 4.5 8.00003C4.5 7.93433 4.51295 7.86926 4.53811 7.80856C4.56328 7.74786 4.60015 7.69272 4.64664 7.64628L9.64664 2.64628C9.74046 2.55246 9.86771 2.49976 10.0004 2.49976C10.1331 2.49976 10.2603 2.55246 10.3541 2.64628C10.448 2.7401 10.5007 2.86735 10.5007 3.00003C10.5007 3.13272 10.448 3.25996 10.3541 3.35378L5.70727 8.00003L10.3541 12.6463Z"
fill="white"
fill="currentColor"
/>
</svg>
)}
@ -347,7 +340,7 @@ export const PickPlatforms: FC<{
>
<path
d="M5.64586 12.6463C5.5994 12.6927 5.56255 12.7479 5.53741 12.8086C5.51227 12.8693 5.49933 12.9343 5.49933 13C5.49933 13.0657 5.51227 13.1308 5.53741 13.1915C5.56255 13.2522 5.5994 13.3073 5.64586 13.3538C5.69231 13.4002 5.74746 13.4371 5.80816 13.4622C5.86886 13.4874 5.93391 13.5003 5.99961 13.5003C6.0653 13.5003 6.13036 13.4874 6.19106 13.4622C6.25175 13.4371 6.3069 13.4002 6.35336 13.3538L11.3534 8.35378C11.3998 8.30735 11.4367 8.2522 11.4619 8.1915C11.487 8.13081 11.5 8.06574 11.5 8.00003C11.5 7.93433 11.487 7.86926 11.4619 7.80856C11.4367 7.74786 11.3998 7.69272 11.3534 7.64628L6.35336 2.64628C6.25954 2.55246 6.13229 2.49976 5.99961 2.49976C5.86692 2.49976 5.73968 2.55246 5.64586 2.64628C5.55204 2.7401 5.49933 2.86735 5.49933 3.00003C5.49933 3.13272 5.55204 3.25996 5.64586 3.35378L10.2927 8.00003L5.64586 12.6463Z"
fill="white"
fill="currentColor"
/>
</svg>
</div>

23
apps/frontend/src/components/layout/click.outside.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useEffect } from 'react';
export const useClickOutside = (callback: () => Promise<void>) => {
const handleClick = (event: MouseEvent) => {
const selector = document.querySelector('#add-edit-modal');
if (selector && !selector.contains(event.target as HTMLElement)) {
callback();
}
};
useEffect(() => {
document
.querySelector('.mantine-Modal-root')
// @ts-ignore
?.addEventListener('click', handleClick);
return () => {
document
.querySelector('.mantine-Modal-root')
// @ts-ignore
?.removeEventListener('click', handleClick);
};
});
};