Feat: select all days in schedule (#8796)
* feat: add select all * fix: fix deleted days * chore: add i18n select all * chore: check all days when select all * chore: use calcom checkbox --------- Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>pull/8630/head^2
parent
3088b1174a
commit
5e772530b2
|
@ -28,6 +28,7 @@ import {
|
||||||
Select,
|
Select,
|
||||||
SkeletonText,
|
SkeletonText,
|
||||||
Switch,
|
Switch,
|
||||||
|
Checkbox
|
||||||
} from "@calcom/ui";
|
} from "@calcom/ui";
|
||||||
import { Copy, Plus, Trash } from "@calcom/ui/components/icon";
|
import { Copy, Plus, Trash } from "@calcom/ui/components/icon";
|
||||||
|
|
||||||
|
@ -383,25 +384,41 @@ const CopyTimes = ({
|
||||||
<div className="p-2">
|
<div className="p-2">
|
||||||
<p className="h6 text-emphasis pb-3 pl-1 text-xs font-medium uppercase">{t("copy_times_to")}</p>
|
<p className="h6 text-emphasis pb-3 pl-1 text-xs font-medium uppercase">{t("copy_times_to")}</p>
|
||||||
<ol className="space-y-2">
|
<ol className="space-y-2">
|
||||||
|
<li key="select all">
|
||||||
|
<label className="text-default flex w-full items-center justify-between">
|
||||||
|
<span className="px-1">{t('select_all')}</span>
|
||||||
|
<Checkbox
|
||||||
|
description={""}
|
||||||
|
value={t('select_all')}
|
||||||
|
checked={selected.length === 7}
|
||||||
|
onChange={(e) => {
|
||||||
|
if (e.target.checked) {
|
||||||
|
setSelected([0, 1, 2, 3, 4, 5, 6]);
|
||||||
|
} else if (!e.target.checked) {
|
||||||
|
setSelected([]);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
{weekdayNames(i18n.language, weekStart).map((weekday, num) => {
|
{weekdayNames(i18n.language, weekStart).map((weekday, num) => {
|
||||||
const weekdayIndex = (num + weekStart) % 7;
|
const weekdayIndex = (num + weekStart) % 7;
|
||||||
return (
|
return (
|
||||||
<li key={weekday}>
|
<li key={weekday}>
|
||||||
<label className="text-default flex w-full items-center justify-between">
|
<label className="text-default flex w-full items-center justify-between">
|
||||||
<span className="px-1">{weekday}</span>
|
<span className="px-1">{weekday}</span>
|
||||||
<input
|
<Checkbox
|
||||||
|
description={""}
|
||||||
value={weekdayIndex}
|
value={weekdayIndex}
|
||||||
defaultChecked={disabled === weekdayIndex}
|
checked={selected.includes(weekdayIndex) || disabled === weekdayIndex}
|
||||||
disabled={disabled === weekdayIndex}
|
disabled={disabled === weekdayIndex}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
if (e.target.checked && !selected.includes(weekdayIndex)) {
|
if (e.target.checked && !selected.includes(weekdayIndex)) {
|
||||||
setSelected(selected.concat([weekdayIndex]));
|
setSelected(selected.concat([weekdayIndex]));
|
||||||
} else if (!e.target.checked && selected.includes(weekdayIndex)) {
|
} else if (!e.target.checked && selected.includes(weekdayIndex)) {
|
||||||
setSelected(selected.slice(selected.indexOf(weekdayIndex), 1));
|
setSelected(selected.filter(item => item !== weekdayIndex));
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
type="checkbox"
|
|
||||||
className="border-default bg-default text-emphasis disabled:text-muted focus:ring-emphasis dark:checked:bg-muted focus:bg-default dark:checked:focus:bg-default dark:checked:hover:bg-subtle dark:checked:hover:text-inverted inline-block rounded-[4px]"
|
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
|
|
Loading…
Reference in New Issue