浏览代码

feat: persist workflows and logs sort

Ahmad Kholid 3 年之前
父节点
当前提交
fcd2db9733
共有 2 个文件被更改,包括 27 次插入6 次删除
  1. 14 3
      src/newtab/pages/Workflows.vue
  2. 13 3
      src/newtab/pages/logs.vue

+ 14 - 3
src/newtab/pages/Workflows.vue

@@ -58,7 +58,7 @@
   </div>
 </template>
 <script setup>
-import { computed, shallowReactive } from 'vue';
+import { computed, shallowReactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useDialog } from '@/composable/dialog';
 import { sendMessage } from '@/utils/message';
@@ -76,10 +76,11 @@ const menu = [
   { id: 'delete', name: t('common.delete'), icon: 'riDeleteBin7Line' },
 ];
 
+const savedSorts = JSON.parse(localStorage.getItem('workflow-sorts') || '{}');
 const state = shallowReactive({
   query: '',
-  sortBy: 'createdAt',
-  sortOrder: 'desc',
+  sortBy: savedSorts.sortBy || 'createdAt',
+  sortOrder: savedSorts.sortOrder || 'desc',
 });
 
 const workflows = computed(() =>
@@ -141,6 +142,16 @@ const menuHandlers = {
   rename: renameWorkflow,
   delete: deleteWorkflow,
 };
+
+watch(
+  () => [state.sortOrder, state.sortBy],
+  ([sortOrder, sortBy]) => {
+    localStorage.setItem(
+      'workflow-sorts',
+      JSON.stringify({ sortOrder, sortBy })
+    );
+  }
+);
 </script>
 <style>
 .workflow-sort select {

+ 13 - 3
src/newtab/pages/logs.vue

@@ -83,7 +83,7 @@
   </div>
 </template>
 <script setup>
-import { shallowReactive, ref, computed } from 'vue';
+import { shallowReactive, ref, computed, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useDialog } from '@/composable/dialog';
@@ -96,6 +96,8 @@ const { t } = useI18n();
 const store = useStore();
 const dialog = useDialog();
 
+const savedSorts = JSON.parse(localStorage.getItem('logs-sorts') || '{}');
+
 const selectedLogs = ref([]);
 const pagination = shallowReactive({
   perPage: 10,
@@ -107,8 +109,8 @@ const filtersBuilder = shallowReactive({
   byStatus: 'all',
 });
 const sortsBuilder = shallowReactive({
-  order: 'desc',
-  by: 'startedAt',
+  order: savedSorts.order || 'desc',
+  by: savedSorts.by || 'startedAt',
 });
 const exportDataModal = shallowReactive({
   show: false,
@@ -186,6 +188,14 @@ function selectAllLogs() {
 
   selectedLogs.value = logIds;
 }
+
+watch(
+  () => sortsBuilder,
+  (value) => {
+    localStorage.setItem('logs-sorts', JSON.stringify(value));
+  },
+  { deep: true }
+);
 </script>
 <style>
 .logs-list-data {