@canmingir/link 1.1.0

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

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,303 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,94 @@
+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,
+};