add timestamp reaveal in work card

Author: Xanonymous-GitHub

README.md

@@ -20,7 +20,7 @@ Works! is a Simple To-do list website.
 1. Clone this repo from Github.
 2. Install node v14+ on your device.
 3. In the root of project folder, run `npm install`.
-    - if you meet some error on this step, try to add `--legacy-peer-deps` after previous command and run again.
+    - if you meet some error on this step, try to add `--force` after previous command and run again.
 
 4. run `npm run serve`, and you may see the website serve on http://localhost:8080 (port number may different).
 

package-lock.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.6.0",
-    "@types/bootstrap": "^5.0.1",
+    "@types/bootstrap": "^5.0.2",
     "@types/lozad": "^1.9.0",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
     "@typescript-eslint/parser": "^4.12.0",
@@ -25,12 +25,13 @@
     "@vue/cli-service": "^4.5.10",
     "@vue/compiler-sfc": "^3.0.5",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "autoprefixer": "^10.2.0",
+    "autoprefixer": "^10.2.1",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.0-beta1",
+    "dayjs": "^1.10.2",
     "eslint": "^7.17.0",
     "eslint-plugin-vue": "^7.4.1",
-    "firebase": "^8.2.1",
+    "firebase": "^8.2.2",
     "lint-staged": "^10.5.3",
     "lozad": "^1.16.0",
     "postcss": "^8.2.3",

package.json

@@ -65,7 +65,7 @@ export default defineComponent({
 
       for (let i = 0; i < data.imageList.length; i++) {
         data.forceLoad[i] = true
-        await new Promise<void>(resolve => setTimeout(() => resolve(), 300))
+        await new Promise<void>(resolve => setTimeout(() => resolve(), 500))
       }
     })
 

src/components/Carousel.vue

@@ -41,7 +41,7 @@ export default defineComponent({
     })
 
     const forceLoadService = () => {
-      watchEffect(() => {
+      watchEffect(async () => {
         if (props['forceLoad']) {
           observer.triggerLoad(img.value)
         }

src/components/LazyImg.vue

@@ -7,6 +7,7 @@
     </div>
     <LazyImg :d-src="finalThumbnail" class="card-img-top img-fluid rounded-3 py-3 px-3"/>
     <div class="card-body">
+      <span class="badge bg-light rounded-pill text-dark user-select-none">{{ createdAt }}</span>
       <h5 class="card-title text-dark">{{ title }}</h5>
       <p class="card-subtitle text-dark">{{ subtitle }}</p>
     </div>
@@ -39,6 +40,11 @@ export default defineComponent({
       type: String,
       default: '',
       required: true
+    },
+    createdAt: {
+      type: String,
+      default: '',
+      required: true
     }
   },
   components: {

src/components/Work.vue

@@ -23,6 +23,7 @@
       <div :key="workViewKey" :class="{'invisible':processing}"
            class="row mw-100 position-relative mx-auto justify-content-center">
         <WorkCard v-for="(work, k) in works" :key="k"
+                  :created-at="timestampConversion(work.createdAt)"
                   :subtitle="work.subtitle"
                   :thumbnail="work.thumbnail"
                   :title="work.title" :uid="work.id" class="col-3" @remove="remove"/>
@@ -43,10 +44,11 @@
 <script lang="ts">
 import {defineComponent, inject, onMounted, reactive, toRefs, defineAsyncComponent, nextTick} from 'vue';
 import '@/scss/components/work-view.scss'
-import {dbType, Work} from "@/firebase/type";
+import {dbType, Work, time} from "@/firebase/type";
 import {getCurrentWorks, liveSubscribe} from "@/firebase/getWork";
 import '@/svg/todo.svg'
 import '@/svg/add.svg'
+import timeFormater from "@/util/timeFormater";
 
 export default defineComponent({
   name: 'WorkView',
@@ -91,6 +93,10 @@ export default defineComponent({
       })
     }
 
+    const timestampConversion = (timestamp: time): string => {
+      return timeFormater(timestamp.toDate().valueOf())
+    }
+
     onMounted(async () => {
       data.processing = true
       await displayWorks()
@@ -100,6 +106,7 @@ export default defineComponent({
 
     return {
       remove,
+      timestampConversion,
       ...toRefs(data)
     }
   }

src/components/WorkView.vue

@@ -3,7 +3,6 @@ import firebase from "firebase";
 export type firebaseType = firebase.app.App
 export type dbType = firebase.firestore.Firestore
 export type time = firebase.firestore.Timestamp
-export type querySnapshot = firebase.firestore.QuerySnapshot<firebase.firestore.DocumentData>
 
 export interface WorkDocument {
   title: string;

src/firebase/type.ts

@@ -0,0 +1,28 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-tw'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import isYesterday from 'dayjs/plugin/isYesterday'
+import isToday from 'dayjs/plugin/isToday'
+
+dayjs.extend(isToday)
+dayjs.extend(isYesterday)
+dayjs.extend(customParseFormat)
+dayjs.locale('zh-tw')
+
+export default function (time?: number | undefined): string {
+  const now = dayjs()
+  const product = dayjs(time)
+  let year: string | undefined
+  const yearDistance = now.year() - product.year()
+  switch (yearDistance) {
+    case 0:
+      year = undefined
+      break
+    default:
+      year = product.format('YYYY/')
+      break
+  }
+  const monthAndDay = product.isToday() ? undefined : (product.isYesterday() ? '昨天' : product.format('M/D'))
+  const hourAndMinute = product.format('h:mm a')
+  return [year ? (year + monthAndDay) : monthAndDay, hourAndMinute].join('\n')
+}