1 files changed, 75 insertions, 0 deletions
diff --git a/front-end/src/views/Blog/components/Content/ContentTable.vue b/front-end/src/views/Blog/components/Content/ContentTable.vue
new file mode 100644
index 0000000..c47a063
--- /dev/null
+++ b/front-end/src/views/Blog/components/Content/ContentTable.vue
@@ -0,0 +1,75 @@
+<template>
+    <thead>
+        <tr>
+            <th>File Name</th>
+            <th>Id</th>
+            <th>Date</th>
+            <th>Content Type</th>
+            <th>Length</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr v-for="item in content" :key="item.id" class="table-row">
+            <td>
+                {{ getItemName(item) }}
+            </td>
+            <td>
+                {{ getItemId(item) }}
+            </td>
+            <td>
+                {{ getDateString(item.date) }}
+            </td>
+            <td>
+                {{ item.content_type }}
+            </td>
+            <td>
+                {{ getItemLength(item) }}
+            </td>
+            <td class="w-24">
+                <fieldset :disabled="waiting">
+                    <button class="btn xs no-border" @click="copyLink(item)">
+                        <fa-icon icon="link" />
+                    </button>
+                    <button class="btn xs no-border" @click="copy(item.id)">
+                        <fa-icon icon="copy" />
+                    </button>
+                    <button class="btn xs no-border" @click="openEdit(item)">
+                        <fa-icon icon="pencil" />
+                    </button>
+                </fieldset>
+            </td>
+        </tr>
+    </tbody>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { filter as _filter, truncate } from 'lodash';
+import { useClipboard } from '@vueuse/core';
+import { useWait } from '@vnuge/vnlib.browser';
+import { ContentMeta } from '@vnuge/cmnext-admin';
+
+const emit = defineEmits(['open-edit', 'copy-link'])
+
+const props = defineProps<{
+    content: ContentMeta[]
+}>()
+
+const { content } = toRefs(props)
+
+const { waiting } = useWait()
+const { copy } = useClipboard()
+
+const getDateString = (time?: number) => new Date((time || 0) * 1000).toLocaleString();
+const getItemLength = (item: ContentMeta) : string =>{
+    const length = item.length || 0;
+    return length > 1024 ? `${(length / 1024).toFixed(2)} KB` : `${length} B`
+}
+const getItemId = (item: ContentMeta) => truncate(item.id || '', { length: 20 })
+const getItemName = (item : ContentMeta) => truncate(item.name || '', { length: 30 })
+
+const openEdit = async (item: ContentMeta) => emit('open-edit', item)
+const copyLink = (item : ContentMeta) => emit('copy-link', item)
+
+</script>
+\ No newline at end of file