Compare commits
14 Commits
7a04012b60
...
copilot/up
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
cdf4b6452d | ||
| 88b5f8deaf | |||
|
|
678658b40e | ||
|
|
6864026497 | ||
|
|
6f23f9b6e9 | ||
|
|
ece803ee1d | ||
|
|
ea564b18c5 | ||
|
|
e9afcf2b28 | ||
|
|
8c03616a7e | ||
|
|
dccb632cd9 | ||
|
|
8e2e6332d8 | ||
|
|
921002a3c6 | ||
|
|
21d233965d | ||
|
|
3d92f4902d |
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { api } from '../api.js';
|
import { api } from '../api.js';
|
||||||
import { isInspectionExpirySoon } from '../utils/carUtils.js';
|
import { isInspectionExpirySoon } from '../utils/carUtils.js';
|
||||||
import styles from './CarManagement.module.css';
|
import styles from './CarManagement.module.css';
|
||||||
@@ -20,8 +20,6 @@ export default function CarManagement({ reloadKey = 0 }) {
|
|||||||
const [editEtc, setEditEtc] = useState(false);
|
const [editEtc, setEditEtc] = useState(false);
|
||||||
const [editTire, setEditTire] = useState('ノーマル');
|
const [editTire, setEditTire] = useState('ノーマル');
|
||||||
const [submitting, setSubmitting] = useState(false);
|
const [submitting, setSubmitting] = useState(false);
|
||||||
const [dragOverIdx, setDragOverIdx] = useState(null);
|
|
||||||
const dragSrcIdx = useRef(null);
|
|
||||||
|
|
||||||
const loadCars = useCallback(async () => {
|
const loadCars = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
@@ -118,7 +116,11 @@ export default function CarManagement({ reloadKey = 0 }) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const applyReorder = async (newCars) => {
|
const handleReorder = async (index, direction) => {
|
||||||
|
const newCars = [...cars];
|
||||||
|
const swapIndex = index + direction;
|
||||||
|
if (swapIndex < 0 || swapIndex >= newCars.length) return;
|
||||||
|
[newCars[index], newCars[swapIndex]] = [newCars[swapIndex], newCars[index]];
|
||||||
setCars(newCars);
|
setCars(newCars);
|
||||||
try {
|
try {
|
||||||
await api.reorderCars(newCars.map((c) => c.id));
|
await api.reorderCars(newCars.map((c) => c.id));
|
||||||
@@ -128,40 +130,6 @@ export default function CarManagement({ reloadKey = 0 }) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleReorder = async (index, direction) => {
|
|
||||||
const swapIndex = index + direction;
|
|
||||||
if (swapIndex < 0 || swapIndex >= cars.length) return;
|
|
||||||
const newCars = [...cars];
|
|
||||||
[newCars[index], newCars[swapIndex]] = [newCars[swapIndex], newCars[index]];
|
|
||||||
await applyReorder(newCars);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDragStart = (index) => {
|
|
||||||
dragSrcIdx.current = index;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDragOver = (e, index) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setDragOverIdx(index);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDragEnd = () => {
|
|
||||||
setDragOverIdx(null);
|
|
||||||
dragSrcIdx.current = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDrop = async (e, dropIndex) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const srcIndex = dragSrcIdx.current;
|
|
||||||
setDragOverIdx(null);
|
|
||||||
dragSrcIdx.current = null;
|
|
||||||
if (srcIndex === null || srcIndex === dropIndex) return;
|
|
||||||
const newCars = [...cars];
|
|
||||||
const [moved] = newCars.splice(srcIndex, 1);
|
|
||||||
newCars.splice(dropIndex, 0, moved);
|
|
||||||
await applyReorder(newCars);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<h2 className={styles.heading}>代車管理</h2>
|
<h2 className={styles.heading}>代車管理</h2>
|
||||||
@@ -249,15 +217,7 @@ export default function CarManagement({ reloadKey = 0 }) {
|
|||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
{cars.map((car, carIdx) => (
|
{cars.map((car, carIdx) => (
|
||||||
<tr
|
<tr key={car.id}>
|
||||||
key={car.id}
|
|
||||||
draggable
|
|
||||||
onDragStart={() => handleDragStart(carIdx)}
|
|
||||||
onDragOver={(e) => handleDragOver(e, carIdx)}
|
|
||||||
onDragEnd={handleDragEnd}
|
|
||||||
onDrop={(e) => handleDrop(e, carIdx)}
|
|
||||||
className={dragOverIdx === carIdx ? styles.dragOver : ''}
|
|
||||||
>
|
|
||||||
<td className={styles.idCell}>
|
<td className={styles.idCell}>
|
||||||
<div className={styles.orderBtns}>
|
<div className={styles.orderBtns}>
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -111,16 +111,6 @@
|
|||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table tbody tr[draggable] {
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dragOver {
|
|
||||||
background: #eff6ff !important;
|
|
||||||
outline: 2px dashed #1a56db;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.idCell {
|
.idCell {
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
|
|||||||
@@ -224,8 +224,6 @@ export default function ScheduleView({ reloadKey = 0 }) {
|
|||||||
end_date: newEndDate,
|
end_date: newEndDate,
|
||||||
customer_name: reservation.customer_name,
|
customer_name: reservation.customer_name,
|
||||||
notes: reservation.notes,
|
notes: reservation.notes,
|
||||||
start_period: reservation.start_period,
|
|
||||||
end_period: reservation.end_period,
|
|
||||||
});
|
});
|
||||||
await loadData();
|
await loadData();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
|||||||
Reference in New Issue
Block a user