Files: fix accessed_at.

2023-04-27 11:16:33 +08:00
parent cbde7b2d4c
commit b1161a82a7
10 changed files with 186 additions and 21 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "frontend",
-  "version": "0.2.0",
+  "version": "0.99.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "frontend",
-      "version": "0.2.0",
+      "version": "0.99.0",
      "dependencies": {
        "autoprefixer": "^10.4.13",
        "axios": "^1.2.2",
@@ -25,6 +25,7 @@
        "vue": "^3.2.45",
        "vue-axios": "^3.5.2",
        "vue-router": "^4.1.6",
+        "vue-sweetalert2": "^5.0.5",
        "vue-toast-notification": "^3.0.4",
        "vuedraggable": "^4.1.0"
      },
@@ -5474,6 +5475,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/sweetalert2": {
+      "version": "11.7.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.3.tgz",
+      "integrity": "sha512-fUN/fyVSBZNtY4Rr/Qtxn7tNNnlRAbUhQxTQ9uOo0xVMIHBmqq4/9pau5N9dB2pvkB353XL/ywRAycscLoYU3w==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6006,6 +6016,17 @@
        "vue": "^3.2.0"
      }
    },
+    "node_modules/vue-sweetalert2": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.5.tgz",
+      "integrity": "sha512-Q7+TjQxNwGruT2jfPaSKMz18HHWs81r4umEwlrrtOf/QL5Iwl1T+tUaNkcvKB7Rf9rYftubt7NnOMjfDMnDH3A==",
+      "dependencies": {
+        "sweetalert2": "11.x"
+      },
+      "peerDependencies": {
+        "vue": "*"
+      }
+    },
    "node_modules/vue-toast-notification": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-3.0.4.tgz",
@@ -10292,6 +10313,11 @@
      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
      "dev": true
    },
+    "sweetalert2": {
+      "version": "11.7.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.3.tgz",
+      "integrity": "sha512-fUN/fyVSBZNtY4Rr/Qtxn7tNNnlRAbUhQxTQ9uOo0xVMIHBmqq4/9pau5N9dB2pvkB353XL/ywRAycscLoYU3w=="
+    },
    "symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -10638,6 +10664,14 @@
        "@vue/devtools-api": "^6.4.5"
      }
    },
+    "vue-sweetalert2": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.5.tgz",
+      "integrity": "sha512-Q7+TjQxNwGruT2jfPaSKMz18HHWs81r4umEwlrrtOf/QL5Iwl1T+tUaNkcvKB7Rf9rYftubt7NnOMjfDMnDH3A==",
+      "requires": {
+        "sweetalert2": "11.x"
+      }
+    },
    "vue-toast-notification": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-3.0.4.tgz",
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
    "vue": "^3.2.45",
    "vue-axios": "^3.5.2",
    "vue-router": "^4.1.6",
+    "vue-sweetalert2": "^5.0.5",
    "vue-toast-notification": "^3.0.4",
    "vuedraggable": "^4.1.0"
  },
--- a/src/assets/vendors.css
+++ b/src/assets/vendors.css
@@ -12,7 +12,7 @@

 /* vue-toast-notification */
 .v-toast__item {
-  @apply min-h-[48px]
+  @apply min-h-[48px] rounded-full
 }
 .v-toast__item .v-toast__text {
  @apply py-3
--- a/src/components/Discover/Filter/Funnel.vue
+++ b/src/components/Discover/Filter/Funnel.vue
@@ -1,10 +1,6 @@
 <template>
  <div class=" w-full h-full">
      <div class="h-[calc(100%_-_58px)] border-b border-neutral-400 mb-2 overflow-y-auto overflow-x-auto scrollbar">
-        temporaryData:{{ temporaryData }}<br/>
-        postRuleData:{{ postRuleData }}<br/>
-        isRuleData:{{ isRuleData }}<br/>
-        ruleData:{{ ruleData }}<br/>
        <div v-if="this.temporaryData.length === 0" class="h-full flex justify-center items-center">
          <span class="text-neutral-500">No Filter.</span>
        </div>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -34,9 +34,9 @@
          </label>
        </div>
        <!-- Other Page: Save and Download -->
-        <!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有跳動都不跳 -->
+        <!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有動都不跳 -->
        <div v-else class="space-x-4">
-          <button class="btn btn-sm btn-neutral">Save</button>
+          <button class="btn btn-sm btn-neutral" @click="showAlert">Save</button>
          <button class="btn btn-sm btn-neutral">Download</button>
        </div>
      </div>
@@ -48,6 +48,7 @@
 import filesStore from '@/stores/files.js';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
+import AllMapDataStore from '@/stores/allMapData.js';

 export default {
  data() {
@@ -59,16 +60,17 @@ export default {
        DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
      },
      navViewName: 'FILES',
+      sweetVal: '',
    };
  },
  watch: {
-    '$route':'getnavViewName',
+    '$route':'getNavViewName',
  },
  setup() {
    const store = filesStore();
-    return {
-      store,
-    }
+    const allMapDataStore = AllMapDataStore();
+
+    return { store, allMapDataStore}
  },
  components: {
    IconSearch,
@@ -76,15 +78,105 @@ export default {
  },
  mounted() {
    this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
-    this.getnavViewName();
+    this.getNavViewName();
  },
  methods: {
    switchNavItem(event) {
      this.store.filesTag = event.target.innerText;
    },
-    getnavViewName() {
+    getNavViewName() {
      this.navViewName = this.$route.name.toUpperCase();
    },
+    async showAlert() {
+      const customClass = {
+        htmlContainer: '!w-[564px]',
+        title: '!text-xl !font-semibold !mb-2',
+        htmlContainer: '!text-sm !font-normal !h-full !mb-4 !leading-5',
+        inputLabel: '!text-sm !font-normal',
+        input: '!h-8 !text-sm !font-normal !shadow-inner !shadow-black !border-neutral-200',
+        validationMessage: '!bg-neutral-10 !text-danger',
+        confirmButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]',
+        cancelButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ',
+      };
+
+      // 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走
+
+      // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
+      if(!this.allMapDataStore.tempFilterId) return this.$toast.error('Unable to overwrite original file.');
+
+     // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
+      const { value, isConfirmed } = await this.$swal({
+        title: 'SAVE NEW FILTER',
+        input: 'text',
+        inputPlaceholder: 'Enter Filter Name.',
+        inputValue: this.sweetVal,
+        inputValidator: (value) => {
+          if (!value) return 'You need to write something!';
+          this.sweetVal = value;
+        },
+        icon: 'info',
+        iconHtml: '<span class="material-symbols-outlined text-[58px]">cloud_upload</span>',
+        iconColor: '#0099FF',
+        reverseButtons:true,
+        confirmButtonColor: '#0099FF',
+        showCancelButton: true,
+        cancelButtonColor: '#94a3b8',
+        customClass: customClass,
+      });
+      // 存檔成功
+      if(isConfirmed){
+        // 打API
+        let logId = this.$route.params.logId;
+        const api = `/api/filters?log_id=${logId}`;
+        let createFilterObj = {
+          name: value,
+          rules: this.allMapDataStore.postRuleData
+        };
+
+        try {
+          const response = await this.axios.post(api, createFilterObj)
+          let createFilterId = response.data.id;
+
+        }catch(error) {
+          console.dir(error);
+        }
+      }
+      if (value) {
+        await this.$swal({
+          title: 'SAVE COMPLETE',
+          html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
+          showConfirmButton: false,
+          icon: 'success',
+          iconColor: '#0099FF',
+          customClass: customClass
+        })
+      };
+      // 有 aplly all 的話，是否存檔? 是:另存新檔或存檔 不是:離開
+      const result = await this.$swal({
+        title: 'ARE YOU SURE TO LEAVE MAP?',
+        html: 'Filter settings have not been saved.</br>Click “Save as” to save filtered results, “OK” to leave map.',
+        icon: 'warning',
+        iconColor: '#FF3366',
+        reverseButtons:true,
+        confirmButtonText: 'Save as',
+        confirmButtonColor: '#FF3366',
+        showCancelButton: true,
+        cancelButtonText: 'OK',
+        cancelButtonColor: '#94a3b8',
+        customClass: customClass
+      })
+      if(result.isConfirmed){
+        // 有 createFilterId 直接存檔
+        // 跳存檔成功 model
+        console.log('存檔');
+      }else if(result.dismiss === 'cancel'){
+        console.log('離開 discover');
+      }else if(result.dismiss === 'backdrop'){
+        console.log('停留在原本的頁面');
+      };
+      // 最後清空
+      this.sweetVal = '';
+    }
  },
 }
 </script>
--- a/src/main.js
+++ b/src/main.js
@@ -12,10 +12,12 @@ import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
 import popper from 'cytoscape-popper';
 import draggable from 'vuedraggable';
+import VueSweetalert2 from 'vue-sweetalert2';

 // import CSS
 import "./assets/main.css";
 import 'vue-toast-notification/dist/theme-sugar.css';
+import 'sweetalert2/dist/sweetalert2.min.css';

 // import PrimeVue
 import PrimeVue from 'primevue/config';
@@ -61,6 +63,7 @@ cytoscape.use( popper );
 app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);
+app.use(VueSweetalert2);
 app.use(ToastPlugin, { // use `this.$toast` in Vue.js
  position: 'bottom',
  duration: 3000,
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -71,7 +71,7 @@ export default defineStore('filesStore', {
          o.fileType = "Log";
          o.ownerName = o.owner.name;
          o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:MM');
-          o.accessed_at = moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm');
+          o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
          return this.allEventLog
        })
        if(this.httpStatus < 300) loading.isLoading = false;
@@ -102,7 +102,7 @@ export default defineStore('filesStore', {
          o.fileType = "Filter";
          o.ownerName = o.owner.name;
          o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:MM');
-          o.accessed_at = moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:MM');
+          o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
        });
        if(this.httpStatus < 300) loading.isLoading = false;
      } catch(error) {
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -120,7 +120,7 @@
       */
      recentlyUsedFiles: function() {
        let recentlyUsedFiles = Array.from(this.store.allFiles);
-        recentlyUsedFiles.filter(item => item.accessed_at !== null);
+        recentlyUsedFiles = recentlyUsedFiles.filter(item => item.accessed_at !== null);
        recentlyUsedFiles.sort((x, y) => new Date(y.accessed_at) - new Date(x.accessed_at));
        return recentlyUsedFiles;
      },
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -31,12 +31,27 @@ export default {
    return { checkLogin, loadingStore, temporaryData, tempFilterId, postRuleData };
  },
  watch: {
-    $route: function(route) {
-      if(route.name !== 'Discover') {
+    $route: function(to, from) {
+      if(to.name !== 'Discover') {
        this.tempFilterId = null;
        this.temporaryData = []
        this.postRuleData = []
      }
+      // console.log(to, from);
+      // if(to.name === 'Discover'){
+      //   this.$swal({
+      //       title: '請問是否要離開頁面?',
+      //       showCancelButton: true,
+      //       confirmButtonText: '是',
+      //       cancelButtonText: '否',
+      //     }).then((result) => {
+      //       if (result.isConfirmed) {
+      //         window.history.back() // 或 window.close()
+      //       } else {
+      //         console.log('no')
+      //       }
+      //     })
+      // }
    }
  },
  components: {
@@ -55,5 +70,28 @@ export default {
     */
    this.checkLogin();
  },
+  beforeRouteUpdate(to, from, next) {
+    if (from.name === 'Discover') {
+      this.$swal({
+        title: '請問是否要離開頁面?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+      }).then((result) => {
+        if (result.isConfirmed) {
+          console.log('yes')
+          next()
+        } else {
+          console.log('no')
+          next(false)
+        }
+      })
+    } else {
+      next()
+    }
+  },
 };
 </script>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,8 @@ module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
-    "./src/**/**/*.{js,ts,jsx,tsx,vue}"],
+    "./src/**/**/*.{js,ts,jsx,tsx,vue}",
+    "./src/**/**/**/*.{js,ts,jsx,tsx,vue}"],
  theme: {
    colors: {
      transparent: 'transparent',