@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/sections/tour/tour-item.jsx

@@ -1,227 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import MenuItem from '@mui/material/MenuItem';
-import IconButton from '@mui/material/IconButton';
-import ListItemText from '@mui/material/ListItemText';
-
-import { paths } from 'src/routes/paths';
-import { RouterLink } from 'src/routes/components';
-
-import { fDateTime } from 'src/utils/format-time';
-import { fCurrency } from 'src/utils/format-number';
-
-import Image from 'src/components/image';
-import Iconify from 'src/components/iconify';
-import { shortDateLabel } from 'src/components/custom-date-range-picker';
-import CustomPopover, { usePopover } from 'src/components/custom-popover';
-
-// ----------------------------------------------------------------------
-
-export default function TourItem({ tour, onView, onEdit, onDelete }) {
-  const popover = usePopover();
-
-  const {
-    id,
-    name,
-    price,
-    images,
-    bookers,
-    createdAt,
-    available,
-    priceSale,
-    destination,
-    ratingNumber,
-  } = tour;
-
-  const shortLabel = shortDateLabel(available.startDate, available.endDate);
-
-  const renderRating = (
-    <Stack
-      direction="row"
-      alignItems="center"
-      sx={{
-        top: 8,
-        right: 8,
-        zIndex: 9,
-        borderRadius: 1,
-        position: 'absolute',
-        p: '2px 6px 2px 4px',
-        typography: 'subtitle2',
-        bgcolor: 'warning.lighter',
-      }}
-    >
-      <Iconify icon="eva:star-fill" sx={{ color: 'warning.main', mr: 0.25 }} /> {ratingNumber}
-    </Stack>
-  );
-
-  const renderPrice = (
-    <Stack
-      direction="row"
-      alignItems="center"
-      sx={{
-        top: 8,
-        left: 8,
-        zIndex: 9,
-        borderRadius: 1,
-        bgcolor: 'grey.800',
-        position: 'absolute',
-        p: '2px 6px 2px 4px',
-        color: 'common.white',
-        typography: 'subtitle2',
-      }}
-    >
-      {!!priceSale && (
-        <Box component="span" sx={{ color: 'grey.500', mr: 0.25, textDecoration: 'line-through' }}>
-          {fCurrency(priceSale)}
-        </Box>
-      )}
-      {fCurrency(price)}
-    </Stack>
-  );
-
-  const renderImages = (
-    <Stack
-      spacing={0.5}
-      direction="row"
-      sx={{
-        p: (theme) => theme.spacing(1, 1, 0, 1),
-      }}
-    >
-      <Stack flexGrow={1} sx={{ position: 'relative' }}>
-        {renderPrice}
-        {renderRating}
-        <Image alt={images[0]} src={images[0]} sx={{ borderRadius: 1, height: 164, width: 1 }} />
-      </Stack>
-      <Stack spacing={0.5}>
-        <Image alt={images[1]} src={images[1]} ratio="1/1" sx={{ borderRadius: 1, width: 80 }} />
-        <Image alt={images[2]} src={images[2]} ratio="1/1" sx={{ borderRadius: 1, width: 80 }} />
-      </Stack>
-    </Stack>
-  );
-
-  const renderTexts = (
-    <ListItemText
-      sx={{
-        p: (theme) => theme.spacing(2.5, 2.5, 2, 2.5),
-      }}
-      primary={`Posted date: ${fDateTime(createdAt)}`}
-      secondary={
-        <Link component={RouterLink} href={paths.dashboard.tour.details(id)} color="inherit">
-          {name}
-        </Link>
-      }
-      primaryTypographyProps={{
-        typography: 'caption',
-        color: 'text.disabled',
-      }}
-      secondaryTypographyProps={{
-        mt: 1,
-        noWrap: true,
-        component: 'span',
-        color: 'text.primary',
-        typography: 'subtitle1',
-      }}
-    />
-  );
-
-  const renderInfo = (
-    <Stack
-      spacing={1.5}
-      sx={{
-        position: 'relative',
-        p: (theme) => theme.spacing(0, 2.5, 2.5, 2.5),
-      }}
-    >
-      <IconButton onClick={popover.onOpen} sx={{ position: 'absolute', bottom: 20, right: 8 }}>
-        <Iconify icon="eva:more-vertical-fill" />
-      </IconButton>
-
-      {[
-        {
-          label: destination,
-          icon: <Iconify icon="mingcute:location-fill" sx={{ color: 'error.main' }} />,
-        },
-        {
-          label: shortLabel,
-          icon: <Iconify icon="solar:clock-circle-bold" sx={{ color: 'info.main' }} />,
-        },
-        {
-          label: `${bookers.length} Booked`,
-          icon: <Iconify icon="solar:users-group-rounded-bold" sx={{ color: 'primary.main' }} />,
-        },
-      ].map((item) => (
-        <Stack
-          key={item.label}
-          spacing={1}
-          direction="row"
-          alignItems="center"
-          sx={{ typography: 'body2' }}
-        >
-          {item.icon}
-          {item.label}
-        </Stack>
-      ))}
-    </Stack>
-  );
-
-  return (
-    <>
-      <Card>
-        {renderImages}
-
-        {renderTexts}
-
-        {renderInfo}
-      </Card>
-
-      <CustomPopover
-        open={popover.open}
-        onClose={popover.onClose}
-        arrow="right-top"
-        sx={{ width: 140 }}
-      >
-        <MenuItem
-          onClick={() => {
-            popover.onClose();
-            onView();
-          }}
-        >
-          <Iconify icon="solar:eye-bold" />
-          View
-        </MenuItem>
-
-        <MenuItem
-          onClick={() => {
-            popover.onClose();
-            onEdit();
-          }}
-        >
-          <Iconify icon="solar:pen-bold" />
-          Edit
-        </MenuItem>
-
-        <MenuItem
-          onClick={() => {
-            popover.onClose();
-            onDelete();
-          }}
-          sx={{ color: 'error.main' }}
-        >
-          <Iconify icon="solar:trash-bin-trash-bold" />
-          Delete
-        </MenuItem>
-      </CustomPopover>
-    </>
-  );
-}
-
-TourItem.propTypes = {
-  onDelete: PropTypes.func,
-  onEdit: PropTypes.func,
-  onView: PropTypes.func,
-  tour: PropTypes.object,
-};

package/minimal/src/sections/tour/tour-list.jsx

@@ -1,74 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback } from 'react';
-
-import Box from '@mui/material/Box';
-import Pagination, { paginationClasses } from '@mui/material/Pagination';
-
-import { paths } from 'src/routes/paths';
-import { useRouter } from 'src/routes/hooks';
-
-import TourItem from './tour-item';
-
-// ----------------------------------------------------------------------
-
-export default function TourList({ tours }) {
-  const router = useRouter();
-
-  const handleView = useCallback(
-    (id) => {
-      router.push(paths.dashboard.tour.details(id));
-    },
-    [router]
-  );
-
-  const handleEdit = useCallback(
-    (id) => {
-      router.push(paths.dashboard.tour.edit(id));
-    },
-    [router]
-  );
-
-  const handleDelete = useCallback((id) => {
-    console.info('DELETE', id);
-  }, []);
-
-  return (
-    <>
-      <Box
-        gap={3}
-        display="grid"
-        gridTemplateColumns={{
-          xs: 'repeat(1, 1fr)',
-          sm: 'repeat(2, 1fr)',
-          md: 'repeat(3, 1fr)',
-        }}
-      >
-        {tours.map((tour) => (
-          <TourItem
-            key={tour.id}
-            tour={tour}
-            onView={() => handleView(tour.id)}
-            onEdit={() => handleEdit(tour.id)}
-            onDelete={() => handleDelete(tour.id)}
-          />
-        ))}
-      </Box>
-
-      {tours.length > 8 && (
-        <Pagination
-          count={8}
-          sx={{
-            mt: 8,
-            [`& .${paginationClasses.ul}`]: {
-              justifyContent: 'center',
-            },
-          }}
-        />
-      )}
-    </>
-  );
-}
-
-TourList.propTypes = {
-  tours: PropTypes.array,
-};

package/minimal/src/sections/tour/tour-new-edit-form.jsx

@@ -1,413 +0,0 @@
-import * as Yup from 'yup';
-import PropTypes from 'prop-types';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { useForm, Controller } from 'react-hook-form';
-import { useMemo, useEffect, useCallback } from 'react';
-
-import Chip from '@mui/material/Chip';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import Avatar from '@mui/material/Avatar';
-import Switch from '@mui/material/Switch';
-import Grid from '@mui/material/Unstable_Grid2';
-import CardHeader from '@mui/material/CardHeader';
-import Typography from '@mui/material/Typography';
-import LoadingButton from '@mui/lab/LoadingButton';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-import { paths } from 'src/routes/paths';
-import { useRouter } from 'src/routes/hooks';
-
-import { useResponsive } from 'src/hooks/use-responsive';
-
-import { countries } from 'src/assets/data';
-import { _tags, _tourGuides, TOUR_SERVICE_OPTIONS } from 'src/_mock';
-
-import Iconify from 'src/components/iconify';
-import { useSnackbar } from 'src/components/snackbar';
-import FormProvider, {
-  RHFEditor,
-  RHFUpload,
-  RHFTextField,
-  RHFAutocomplete,
-  RHFMultiCheckbox,
-} from 'src/components/hook-form';
-
-// ----------------------------------------------------------------------
-
-export default function TourNewEditForm({ currentTour }) {
-  const router = useRouter();
-
-  const mdUp = useResponsive('up', 'md');
-
-  const { enqueueSnackbar } = useSnackbar();
-
-  const NewTourSchema = Yup.object().shape({
-    name: Yup.string().required('Name is required'),
-    content: Yup.string().required('Content is required'),
-    images: Yup.array().min(1, 'Images is required'),
-    //
-    tourGuides: Yup.array().min(1, 'Must have at least 1 guide'),
-    durations: Yup.string().required('Duration is required'),
-    tags: Yup.array().min(2, 'Must have at least 2 tags'),
-    services: Yup.array().min(2, 'Must have at least 2 services'),
-    destination: Yup.string().required('Destination is required'),
-    available: Yup.object().shape({
-      startDate: Yup.mixed().nullable().required('Start date is required'),
-      endDate: Yup.mixed()
-        .required('End date is required')
-        .test(
-          'date-min',
-          'End date must be later than start date',
-          (value, { parent }) => value.getTime() > parent.startDate.getTime()
-        ),
-    }),
-  });
-
-  const defaultValues = useMemo(
-    () => ({
-      name: currentTour?.name || '',
-      content: currentTour?.content || '',
-      images: currentTour?.images || [],
-      //
-      tourGuides: currentTour?.tourGuides || [],
-      tags: currentTour?.tags || [],
-      durations: currentTour?.durations || '',
-      destination: currentTour?.destination || '',
-      services: currentTour?.services || [],
-      available: {
-        startDate: currentTour?.available.startDate || null,
-        endDate: currentTour?.available.endDate || null,
-      },
-    }),
-    [currentTour]
-  );
-
-  const methods = useForm({
-    resolver: yupResolver(NewTourSchema),
-    defaultValues,
-  });
-
-  const {
-    watch,
-    reset,
-    control,
-    setValue,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = methods;
-
-  const values = watch();
-
-  useEffect(() => {
-    if (currentTour) {
-      reset(defaultValues);
-    }
-  }, [currentTour, defaultValues, reset]);
-
-  const onSubmit = handleSubmit(async (data) => {
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      reset();
-      enqueueSnackbar(currentTour ? 'Update success!' : 'Create success!');
-      router.push(paths.dashboard.tour.root);
-      console.info('DATA', data);
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  const handleDrop = useCallback(
-    (acceptedFiles) => {
-      const files = values.images || [];
-
-      const newFiles = acceptedFiles.map((file) =>
-        Object.assign(file, {
-          preview: URL.createObjectURL(file),
-        })
-      );
-
-      setValue('images', [...files, ...newFiles], { shouldValidate: true });
-    },
-    [setValue, values.images]
-  );
-
-  const handleRemoveFile = useCallback(
-    (inputFile) => {
-      const filtered = values.images && values.images?.filter((file) => file !== inputFile);
-      setValue('images', filtered);
-    },
-    [setValue, values.images]
-  );
-
-  const handleRemoveAllFiles = useCallback(() => {
-    setValue('images', []);
-  }, [setValue]);
-
-  const renderDetails = (
-    <>
-      {mdUp && (
-        <Grid md={4}>
-          <Typography variant="h6" sx={{ mb: 0.5 }}>
-            Details
-          </Typography>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            Title, short description, image...
-          </Typography>
-        </Grid>
-      )}
-
-      <Grid xs={12} md={8}>
-        <Card>
-          {!mdUp && <CardHeader title="Details" />}
-
-          <Stack spacing={3} sx={{ p: 3 }}>
-            <Stack spacing={1.5}>
-              <Typography variant="subtitle2">Name</Typography>
-              <RHFTextField name="name" placeholder="Ex: Adventure Seekers Expedition..." />
-            </Stack>
-
-            <Stack spacing={1.5}>
-              <Typography variant="subtitle2">Content</Typography>
-              <RHFEditor simple name="content" />
-            </Stack>
-
-            <Stack spacing={1.5}>
-              <Typography variant="subtitle2">Images</Typography>
-              <RHFUpload
-                multiple
-                thumbnail
-                name="images"
-                maxSize={3145728}
-                onDrop={handleDrop}
-                onRemove={handleRemoveFile}
-                onRemoveAll={handleRemoveAllFiles}
-                onUpload={() => console.info('ON UPLOAD')}
-              />
-            </Stack>
-          </Stack>
-        </Card>
-      </Grid>
-    </>
-  );
-
-  const renderProperties = (
-    <>
-      {mdUp && (
-        <Grid md={4}>
-          <Typography variant="h6" sx={{ mb: 0.5 }}>
-            Properties
-          </Typography>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            Additional functions and attributes...
-          </Typography>
-        </Grid>
-      )}
-
-      <Grid xs={12} md={8}>
-        <Card>
-          {!mdUp && <CardHeader title="Properties" />}
-
-          <Stack spacing={3} sx={{ p: 3 }}>
-            <Stack>
-              <Typography variant="subtitle2" sx={{ mb: 1.5 }}>
-                Tour Guide
-              </Typography>
-
-              <RHFAutocomplete
-                multiple
-                name="tourGuides"
-                placeholder="+ Tour Guides"
-                disableCloseOnSelect
-                options={_tourGuides}
-                getOptionLabel={(option) => option.name}
-                isOptionEqualToValue={(option, value) => option.id === value.id}
-                renderOption={(props, tourGuide) => (
-                  <li {...props} key={tourGuide.id}>
-                    <Avatar
-                      key={tourGuide.id}
-                      alt={tourGuide.avatarUrl}
-                      src={tourGuide.avatarUrl}
-                      sx={{ width: 24, height: 24, flexShrink: 0, mr: 1 }}
-                    />
-
-                    {tourGuide.name}
-                  </li>
-                )}
-                renderTags={(selected, getTagProps) =>
-                  selected.map((tourGuide, index) => (
-                    <Chip
-                      {...getTagProps({ index })}
-                      key={tourGuide.id}
-                      size="small"
-                      variant="soft"
-                      label={tourGuide.name}
-                      avatar={<Avatar alt={tourGuide.name} src={tourGuide.avatarUrl} />}
-                    />
-                  ))
-                }
-              />
-            </Stack>
-
-            <Stack spacing={1.5}>
-              <Typography variant="subtitle2">Available</Typography>
-              <Stack direction={{ xs: 'column', md: 'row' }} spacing={2}>
-                <Controller
-                  name="available.startDate"
-                  control={control}
-                  render={({ field, fieldState: { error } }) => (
-                    <DatePicker
-                      {...field}
-                      format="dd/MM/yyyy"
-                      slotProps={{
-                        textField: {
-                          fullWidth: true,
-                          error: !!error,
-                          helperText: error?.message,
-                        },
-                      }}
-                    />
-                  )}
-                />
-                <Controller
-                  name="available.endDate"
-                  control={control}
-                  render={({ field, fieldState: { error } }) => (
-                    <DatePicker
-                      {...field}
-                      format="dd/MM/yyyy"
-                      slotProps={{
-                        textField: {
-                          fullWidth: true,
-                          error: !!error,
-                          helperText: error?.message,
-                        },
-                      }}
-                    />
-                  )}
-                />
-              </Stack>
-            </Stack>
-
-            <Stack spacing={1.5}>
-              <Typography variant="subtitle2">Duration</Typography>
-              <RHFTextField name="durations" placeholder="Ex: 2 days, 4 days 3 nights..." />
-            </Stack>
-
-            <Stack spacing={1.5}>
-              <Typography variant="subtitle2">Destination</Typography>
-              <RHFAutocomplete
-                name="destination"
-                placeholder="+ Destination"
-                options={countries.map((option) => option.label)}
-                getOptionLabel={(option) => option}
-                renderOption={(props, option) => {
-                  const { code, label, phone } = countries.filter(
-                    (country) => country.label === option
-                  )[0];
-
-                  if (!label) {
-                    return null;
-                  }
-
-                  return (
-                    <li {...props} key={label}>
-                      <Iconify
-                        key={label}
-                        icon={`circle-flags:${code.toLowerCase()}`}
-                        width={28}
-                        sx={{ mr: 1 }}
-                      />
-                      {label} ({code}) +{phone}
-                    </li>
-                  );
-                }}
-              />
-            </Stack>
-
-            <Stack spacing={1}>
-              <Typography variant="subtitle2">Services</Typography>
-              <RHFMultiCheckbox
-                name="services"
-                options={TOUR_SERVICE_OPTIONS}
-                sx={{
-                  display: 'grid',
-                  gridTemplateColumns: 'repeat(2, 1fr)',
-                }}
-              />
-            </Stack>
-
-            <Stack spacing={1.5}>
-              <Typography variant="subtitle2">Tags</Typography>
-              <RHFAutocomplete
-                name="tags"
-                placeholder="+ Tags"
-                multiple
-                freeSolo
-                options={_tags.map((option) => option)}
-                getOptionLabel={(option) => option}
-                renderOption={(props, option) => (
-                  <li {...props} key={option}>
-                    {option}
-                  </li>
-                )}
-                renderTags={(selected, getTagProps) =>
-                  selected.map((option, index) => (
-                    <Chip
-                      {...getTagProps({ index })}
-                      key={option}
-                      label={option}
-                      size="small"
-                      color="info"
-                      variant="soft"
-                    />
-                  ))
-                }
-              />
-            </Stack>
-          </Stack>
-        </Card>
-      </Grid>
-    </>
-  );
-
-  const renderActions = (
-    <>
-      {mdUp && <Grid md={4} />}
-      <Grid xs={12} md={8} sx={{ display: 'flex', alignItems: 'center' }}>
-        <FormControlLabel
-          control={<Switch defaultChecked />}
-          label="Publish"
-          sx={{ flexGrow: 1, pl: 3 }}
-        />
-
-        <LoadingButton
-          type="submit"
-          variant="contained"
-          size="large"
-          loading={isSubmitting}
-          sx={{ ml: 2 }}
-        >
-          {!currentTour ? 'Create Tour' : 'Save Changes'}
-        </LoadingButton>
-      </Grid>
-    </>
-  );
-
-  return (
-    <FormProvider methods={methods} onSubmit={onSubmit}>
-      <Grid container spacing={3}>
-        {renderDetails}
-
-        {renderProperties}
-
-        {renderActions}
-      </Grid>
-    </FormProvider>
-  );
-}
-
-TourNewEditForm.propTypes = {
-  currentTour: PropTypes.object,
-};