@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/sections/kanban/kanban-details-toolbar.jsx

@@ -1,133 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState, useCallback } from 'react';
-
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
-import IconButton from '@mui/material/IconButton';
-
-import { useBoolean } from 'src/hooks/use-boolean';
-import { useResponsive } from 'src/hooks/use-responsive';
-
-import Iconify from 'src/components/iconify';
-import { ConfirmDialog } from 'src/components/custom-dialog';
-import CustomPopover, { usePopover } from 'src/components/custom-popover';
-
-// ----------------------------------------------------------------------
-
-export default function KanbanDetailsToolbar({
-  liked,
-  onLike,
-  taskName,
-  onDelete,
-  taskStatus,
-  onCloseDetails,
-}) {
-  const smUp = useResponsive('up', 'sm');
-
-  const confirm = useBoolean();
-
-  const popover = usePopover();
-
-  const [status, setStatus] = useState(taskStatus);
-
-  const handleChangeStatus = useCallback(
-    (newValue) => {
-      popover.onClose();
-      setStatus(newValue);
-    },
-    [popover]
-  );
-
-  return (
-    <>
-      <Stack
-        direction="row"
-        alignItems="center"
-        sx={{
-          p: (theme) => theme.spacing(2.5, 1, 2.5, 2.5),
-        }}
-      >
-        {!smUp && (
-          <Tooltip title="Back">
-            <IconButton onClick={onCloseDetails} sx={{ mr: 1 }}>
-              <Iconify icon="eva:arrow-ios-back-fill" />
-            </IconButton>
-          </Tooltip>
-        )}
-
-        <Button
-          size="small"
-          variant="soft"
-          endIcon={<Iconify icon="eva:arrow-ios-downward-fill" width={16} sx={{ ml: -0.5 }} />}
-          onClick={popover.onOpen}
-        >
-          {status}
-        </Button>
-
-        <Stack direction="row" justifyContent="flex-end" flexGrow={1}>
-          <Tooltip title="Like">
-            <IconButton color={liked ? 'default' : 'primary'} onClick={onLike}>
-              <Iconify icon="ic:round-thumb-up" />
-            </IconButton>
-          </Tooltip>
-
-          <Tooltip title="Delete task">
-            <IconButton onClick={confirm.onTrue}>
-              <Iconify icon="solar:trash-bin-trash-bold" />
-            </IconButton>
-          </Tooltip>
-
-          <IconButton>
-            <Iconify icon="eva:more-vertical-fill" />
-          </IconButton>
-        </Stack>
-      </Stack>
-
-      <CustomPopover
-        open={popover.open}
-        onClose={popover.onClose}
-        arrow="top-right"
-        sx={{ width: 140 }}
-      >
-        {['To Do', 'In Progress', 'Ready To Test', 'Done'].map((option) => (
-          <MenuItem
-            key={option}
-            selected={status === option}
-            onClick={() => {
-              handleChangeStatus(option);
-            }}
-          >
-            {option}
-          </MenuItem>
-        ))}
-      </CustomPopover>
-
-      <ConfirmDialog
-        open={confirm.value}
-        onClose={confirm.onFalse}
-        title="Delete"
-        content={
-          <>
-            Are you sure want to delete <strong> {taskName} </strong>?
-          </>
-        }
-        action={
-          <Button variant="contained" color="error" onClick={onDelete}>
-            Delete
-          </Button>
-        }
-      />
-    </>
-  );
-}
-
-KanbanDetailsToolbar.propTypes = {
-  liked: PropTypes.bool,
-  onCloseDetails: PropTypes.func,
-  onDelete: PropTypes.func,
-  onLike: PropTypes.func,
-  taskName: PropTypes.string,
-  taskStatus: PropTypes.string,
-};

package/minimal/src/sections/kanban/kanban-details.jsx

@@ -1,303 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState, useCallback } from 'react';
-
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import Drawer from '@mui/material/Drawer';
-import Button from '@mui/material/Button';
-import Avatar from '@mui/material/Avatar';
-import Divider from '@mui/material/Divider';
-import Tooltip from '@mui/material/Tooltip';
-import TextField from '@mui/material/TextField';
-import IconButton from '@mui/material/IconButton';
-import { alpha, styled } from '@mui/material/styles';
-
-import { useBoolean } from 'src/hooks/use-boolean';
-
-import Iconify from 'src/components/iconify';
-import Scrollbar from 'src/components/scrollbar';
-import CustomDateRangePicker, { useDateRangePicker } from 'src/components/custom-date-range-picker';
-
-import KanbanInputName from './kanban-input-name';
-import KanbanDetailsToolbar from './kanban-details-toolbar';
-import KanbanContactsDialog from './kanban-contacts-dialog';
-import KanbanDetailsPriority from './kanban-details-priority';
-import KanbanDetailsAttachments from './kanban-details-attachments';
-import KanbanDetailsCommentList from './kanban-details-comment-list';
-import KanbanDetailsCommentInput from './kanban-details-comment-input';
-
-// ----------------------------------------------------------------------
-
-const StyledLabel = styled('span')(({ theme }) => ({
-  ...theme.typography.caption,
-  width: 100,
-  flexShrink: 0,
-  color: theme.palette.text.secondary,
-  fontWeight: theme.typography.fontWeightSemiBold,
-}));
-
-// ----------------------------------------------------------------------
-
-export default function KanbanDetails({
-  task,
-  openDetails,
-  onCloseDetails,
-  //
-  onUpdateTask,
-  onDeleteTask,
-}) {
-  const [priority, setPriority] = useState(task.priority);
-
-  const [taskName, setTaskName] = useState(task.name);
-
-  const like = useBoolean();
-
-  const contacts = useBoolean();
-
-  const [taskDescription, setTaskDescription] = useState(task.description);
-
-  const rangePicker = useDateRangePicker(task.due[0], task.due[1]);
-
-  const handleChangeTaskName = useCallback((event) => {
-    setTaskName(event.target.value);
-  }, []);
-
-  const handleUpdateTask = useCallback(
-    (event) => {
-      try {
-        if (event.key === 'Enter') {
-          if (taskName) {
-            onUpdateTask({
-              ...task,
-              name: taskName,
-            });
-          }
-        }
-      } catch (error) {
-        console.error(error);
-      }
-    },
-    [onUpdateTask, task, taskName]
-  );
-
-  const handleChangeTaskDescription = useCallback((event) => {
-    setTaskDescription(event.target.value);
-  }, []);
-
-  const handleChangePriority = useCallback((newValue) => {
-    setPriority(newValue);
-  }, []);
-
-  const renderHead = (
-    <KanbanDetailsToolbar
-      liked={like.value}
-      taskName={task.name}
-      onLike={like.onToggle}
-      onDelete={onDeleteTask}
-      taskStatus={task.status}
-      onCloseDetails={onCloseDetails}
-    />
-  );
-
-  const renderName = (
-    <KanbanInputName
-      placeholder="Task name"
-      value={taskName}
-      onChange={handleChangeTaskName}
-      onKeyUp={handleUpdateTask}
-    />
-  );
-
-  const renderReporter = (
-    <Stack direction="row" alignItems="center">
-      <StyledLabel>Reporter</StyledLabel>
-      <Avatar alt={task.reporter.name} src={task.reporter.avatarUrl} />
-    </Stack>
-  );
-
-  const renderAssignee = (
-    <Stack direction="row">
-      <StyledLabel sx={{ height: 40, lineHeight: '40px' }}>Assignee</StyledLabel>
-
-      <Stack direction="row" flexWrap="wrap" alignItems="center" spacing={1}>
-        {task.assignee.map((user) => (
-          <Avatar key={user.id} alt={user.name} src={user.avatarUrl} />
-        ))}
-
-        <Tooltip title="Add assignee">
-          <IconButton
-            onClick={contacts.onTrue}
-            sx={{
-              bgcolor: (theme) => alpha(theme.palette.grey[500], 0.08),
-              border: (theme) => `dashed 1px ${theme.palette.divider}`,
-            }}
-          >
-            <Iconify icon="mingcute:add-line" />
-          </IconButton>
-        </Tooltip>
-
-        <KanbanContactsDialog
-          assignee={task.assignee}
-          open={contacts.value}
-          onClose={contacts.onFalse}
-        />
-      </Stack>
-    </Stack>
-  );
-
-  const renderLabel = (
-    <Stack direction="row">
-      <StyledLabel sx={{ height: 24, lineHeight: '24px' }}>Labels</StyledLabel>
-
-      {!!task.labels.length && (
-        <Stack direction="row" flexWrap="wrap" alignItems="center" spacing={1}>
-          {task.labels.map((label) => (
-            <Chip key={label} color="info" label={label} size="small" variant="soft" />
-          ))}
-        </Stack>
-      )}
-    </Stack>
-  );
-
-  const renderDueDate = (
-    <Stack direction="row" alignItems="center">
-      <StyledLabel> Due date </StyledLabel>
-
-      {rangePicker.selected ? (
-        <Button size="small" onClick={rangePicker.onOpen}>
-          {rangePicker.shortLabel}
-        </Button>
-      ) : (
-        <Tooltip title="Add due date">
-          <IconButton
-            onClick={rangePicker.onOpen}
-            sx={{
-              bgcolor: (theme) => alpha(theme.palette.grey[500], 0.08),
-              border: (theme) => `dashed 1px ${theme.palette.divider}`,
-            }}
-          >
-            <Iconify icon="mingcute:add-line" />
-          </IconButton>
-        </Tooltip>
-      )}
-
-      <CustomDateRangePicker
-        variant="calendar"
-        title="Choose due date"
-        startDate={rangePicker.startDate}
-        endDate={rangePicker.endDate}
-        onChangeStartDate={rangePicker.onChangeStartDate}
-        onChangeEndDate={rangePicker.onChangeEndDate}
-        open={rangePicker.open}
-        onClose={rangePicker.onClose}
-        selected={rangePicker.selected}
-        error={rangePicker.error}
-      />
-    </Stack>
-  );
-
-  const renderPriority = (
-    <Stack direction="row" alignItems="center">
-      <StyledLabel>Priority</StyledLabel>
-
-      <KanbanDetailsPriority priority={priority} onChangePriority={handleChangePriority} />
-    </Stack>
-  );
-
-  const renderDescription = (
-    <Stack direction="row">
-      <StyledLabel> Description </StyledLabel>
-
-      <TextField
-        fullWidth
-        multiline
-        size="small"
-        value={taskDescription}
-        onChange={handleChangeTaskDescription}
-        InputProps={{
-          sx: { typography: 'body2' },
-        }}
-      />
-    </Stack>
-  );
-
-  const renderAttachments = (
-    <Stack direction="row">
-      <StyledLabel>Attachments</StyledLabel>
-      <KanbanDetailsAttachments attachments={task.attachments} />
-    </Stack>
-  );
-
-  const renderComments = <KanbanDetailsCommentList comments={task.comments} />;
-
-  return (
-    <Drawer
-      open={openDetails}
-      onClose={onCloseDetails}
-      anchor="right"
-      slotProps={{
-        backdrop: { invisible: true },
-      }}
-      PaperProps={{
-        sx: {
-          width: {
-            xs: 1,
-            sm: 480,
-          },
-        },
-      }}
-    >
-      {renderHead}
-
-      <Divider />
-
-      <Scrollbar
-        sx={{
-          height: 1,
-          '& .simplebar-content': {
-            height: 1,
-            display: 'flex',
-            flexDirection: 'column',
-          },
-        }}
-      >
-        <Stack
-          spacing={3}
-          sx={{
-            pt: 3,
-            pb: 5,
-            px: 2.5,
-          }}
-        >
-          {renderName}
-
-          {renderReporter}
-
-          {renderAssignee}
-
-          {renderLabel}
-
-          {renderDueDate}
-
-          {renderPriority}
-
-          {renderDescription}
-
-          {renderAttachments}
-        </Stack>
-
-        {!!task.comments.length && renderComments}
-      </Scrollbar>
-
-      <KanbanDetailsCommentInput />
-    </Drawer>
-  );
-}
-
-KanbanDetails.propTypes = {
-  onCloseDetails: PropTypes.func,
-  onDeleteTask: PropTypes.func,
-  onUpdateTask: PropTypes.func,
-  openDetails: PropTypes.bool,
-  task: PropTypes.object,
-};

package/minimal/src/sections/kanban/kanban-input-name.jsx

@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types';
-
-import InputBase, { inputBaseClasses } from '@mui/material/InputBase';
-
-// ----------------------------------------------------------------------
-
-export default function KanbanInputName({ sx, ...other }) {
-  return (
-    <InputBase
-      sx={{
-        [`&.${inputBaseClasses.root}`]: {
-          py: 0.75,
-          borderRadius: 1,
-          typography: 'h6',
-          borderWidth: 2,
-          borderStyle: 'solid',
-          borderColor: 'transparent',
-          transition: (theme) => theme.transitions.create(['padding-left', 'border-color']),
-          [`&.${inputBaseClasses.focused}`]: {
-            pl: 1.5,
-            borderColor: 'text.primary',
-          },
-        },
-        [`& .${inputBaseClasses.input}`]: {
-          typography: 'h6',
-        },
-        ...sx,
-      }}
-      {...other}
-    />
-  );
-}
-
-KanbanInputName.propTypes = {
-  sx: PropTypes.object,
-};

package/minimal/src/sections/kanban/kanban-skeleton.jsx

@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import Skeleton from '@mui/material/Skeleton';
-
-// ----------------------------------------------------------------------
-
-export function KanbanColumnSkeleton({ index, sx, ...other }) {
-  return (
-    <Stack
-      component={Paper}
-      variant="outlined"
-      sx={{
-        p: 2,
-        width: 310,
-        borderRadius: 2,
-        ...sx,
-      }}
-      {...other}
-    >
-      <Stack spacing={2} sx={{ width: 280 }}>
-        <Skeleton sx={{ paddingTop: '75%', borderRadius: 1.5 }} />
-        {[0].includes(Number(index)) && <Skeleton sx={{ paddingTop: '50%', borderRadius: 1.5 }} />}
-        {[0, 1].includes(Number(index)) && (
-          <Skeleton sx={{ paddingTop: '25%', borderRadius: 1.5 }} />
-        )}
-        {[0, 1, 2].includes(Number(index)) && (
-          <Skeleton sx={{ paddingTop: '25%', borderRadius: 1.5 }} />
-        )}
-      </Stack>
-    </Stack>
-  );
-}
-
-KanbanColumnSkeleton.propTypes = {
-  index: PropTypes.number,
-  sx: PropTypes.object,
-};

package/minimal/src/sections/kanban/kanban-task-add.jsx

@@ -1,94 +0,0 @@
-import PropTypes from 'prop-types';
-import { useMemo, useState, useCallback } from 'react';
-
-import Paper from '@mui/material/Paper';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import InputBase, { inputBaseClasses } from '@mui/material/InputBase';
-
-import uuidv4 from 'src/utils/uuidv4';
-
-import { _mock } from 'src/_mock';
-
-// ----------------------------------------------------------------------
-
-export default function KanbanTaskAdd({ status, onAddTask, onCloseAddTask }) {
-  const [name, setName] = useState('');
-
-  const defaultTask = useMemo(
-    () => ({
-      id: uuidv4(),
-      status,
-      name: name.trim(),
-      priority: 'medium',
-      attachments: [],
-      labels: [],
-      comments: [],
-      assignee: [],
-      due: [null, null],
-      reporter: {
-        id: _mock.id(16),
-        name: _mock.fullName(16),
-        avatarUrl: _mock.image.avatar(16),
-      },
-    }),
-    [name, status]
-  );
-
-  const handleKeyUpAddTask = useCallback(
-    (event) => {
-      if (event.key === 'Enter') {
-        if (name) {
-          onAddTask(defaultTask);
-        }
-      }
-    },
-    [defaultTask, name, onAddTask]
-  );
-
-  const handleClickAddTask = useCallback(() => {
-    if (name) {
-      onAddTask(defaultTask);
-    } else {
-      onCloseAddTask();
-    }
-  }, [defaultTask, name, onAddTask, onCloseAddTask]);
-
-  const handleChangeName = useCallback((event) => {
-    setName(event.target.value);
-  }, []);
-
-  return (
-    <ClickAwayListener onClickAway={handleClickAddTask}>
-      <Paper
-        sx={{
-          borderRadius: 1.5,
-          bgcolor: 'background.default',
-          boxShadow: (theme) => theme.customShadows.z1,
-        }}
-      >
-        <InputBase
-          autoFocus
-          multiline
-          fullWidth
-          placeholder="Task name"
-          value={name}
-          onChange={handleChangeName}
-          onKeyUp={handleKeyUpAddTask}
-          sx={{
-            px: 2,
-            height: 56,
-            [`& .${inputBaseClasses.input}`]: {
-              typography: 'subtitle2',
-            },
-          }}
-        />
-      </Paper>
-    </ClickAwayListener>
-  );
-}
-
-KanbanTaskAdd.propTypes = {
-  onAddTask: PropTypes.func,
-  onCloseAddTask: PropTypes.func,
-  status: PropTypes.string,
-};