fix: time management

SMS-COSMO · Jan 21, 2024 · a494549 · a494549
1 parent dbc02f8
commit a494549
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 28 deletions.
diff --git a/components/NewTimeForm.vue → components/TimeCreateForm.vue b/components/NewTimeForm.vue → components/TimeCreateForm.vue
diff --git a/components/TimeEditForm.vue b/components/TimeEditForm.vue
@@ -26,47 +26,32 @@ const formSchema = toTypedSchema(z.object({
 
 const { handleSubmit, setValues, values } = useForm({
   validationSchema: formSchema,
-  initialValues: {
-    name: props.time.name,
-    startAt: props.time.startAt,
-    endAt: props.time.endAt,
-    repeats: props.time.repeats,
-    isActive: props.time.isActive,
-  },
+  initialValues: { ...props.time },
 });
 
 watch(props, (newValue: typeof props) => {
-  setValues({
-    name: newValue.time.name,
-    startAt: newValue.time.startAt,
-    endAt: newValue.time.endAt,
-    repeats: newValue.time.repeats,
-    isActive: newValue.time.isActive,
-  });
+  setValues({ ...newValue.time });
 });
 
 const submitButtonLoading = ref(false);
 const onSubmit = handleSubmit(async (values) => {
   submitButtonLoading.value = true;
   try {
-    const withId = Object.assign(values, { id: props.time.id });
+    const { startAt, endAt, ...info } = values;
     const notNullWithId = {
-      id: withId.id,
-      name: withId.name,
-      repeats: withId.repeats,
-      isActive: withId.isActive,
-      startAt: withId.startAt ?? props.time.startAt,
-      endAt: withId.endAt ?? props.time.endAt,
+      ...info,
+      startAt: startAt ?? props.time.startAt,
+      endAt: endAt ?? props.time.endAt,
+      id: props.time.id,
     };
 
     await $api.time.modify.mutate(notNullWithId);
     $toast.success('修改成功');
     emit('submitSuccess', notNullWithId);
-    submitButtonLoading.value = false;
   } catch (err) {
-    submitButtonLoading.value = false;
     useErrorHandler(err);
   }
+  submitButtonLoading.value = false;
 });
 
 const deleteButtonLoading = ref(false);

diff --git a/pages/manage/time.vue b/pages/manage/time.vue
@@ -27,12 +27,27 @@ function editSuccess(time: TTime) {
   updateKey.value += 1;
   const i = timeList.value.findIndex(item => item.id === time.id);
   timeList.value[i] = time;
+  selectedTime.value = time;
+}
+
+function moveFocus(last: boolean = true) {
+  if (timeList.value.length) {
+    selectedTime.value = timeList.value[last ? timeList.value.length - 1 : 0];
+    rightPanelMode.value = 'modify';
+  } else { rightPanelMode.value = 'nothing'; }
 }
 
 function deleteSuccess(id: string) {
   updateKey.value += 1;
   const i = timeList.value.findIndex(item => item.id === id);
   timeList.value.splice(i, 1);
+  moveFocus();
+}
+
+function createSuccess(time: TTime) {
+  timeList.value.push(time);
+  updateKey.value += 1;
+  moveFocus();
 }
 
 onMounted(async () => {
@@ -43,8 +58,7 @@ onMounted(async () => {
   }
   try {
     timeList.value = await $api.time.list.query();
-    selectedTime.value = timeList.value[0];
-    rightPanelMode.value = 'modify';
+    moveFocus(false);
   } catch (err) {
     useErrorHandler(err);
   }
@@ -69,7 +83,7 @@ onMounted(async () => {
           <TransitionGroup name="list" tag="ul">
             <li v-for="time in timeList" :key="time.id">
               <TimeCard
-                :time="time" :selected="selectedTime === time && rightPanelMode === 'modify'"
+                :key="updateKey" :time="time" :selected="selectedTime === time && rightPanelMode === 'modify'"
                 class="cursor-pointer" @click="rightPanelMode = 'modify'; selectedTime = time;"
                 @edit-success="updateKey += 1;"
               />
@@ -92,9 +106,9 @@ onMounted(async () => {
       </UiCardHeader>
       <UiCardContent class="px-4 lg:px-10">
         <UiScrollArea class="lg:h-[calc(100vh-10rem)]">
-          <NewTimeForm
+          <TimeCreateForm
             v-if="rightPanelMode === 'create'"
-            @submit-success="time => { timeList.push(time); updateKey += 1; }"
+            @submit-success="createSuccess"
           />
           <TimeEditForm
             v-else-if="rightPanelMode === 'modify'" :time="selectedTime" @submit-success="editSuccess"