|
@@ -1,6 +1,11 @@
|
|
|
-<script setup lang="ts">
|
|
|
+<script setup lang="tsx">
|
|
|
import {useGettext} from 'vue3-gettext'
|
|
|
-import {ref} from 'vue'
|
|
|
+import {h, ref} from 'vue'
|
|
|
+import StdTable from '@/components/StdDataDisplay/StdTable.vue'
|
|
|
+import cert from '@/api/cert'
|
|
|
+import {customRender, datetime} from '@/components/StdDataDisplay/StdTableTransformer'
|
|
|
+import {input} from '@/components/StdDataEntry'
|
|
|
+import {Badge} from 'ant-design-vue'
|
|
|
|
|
|
const {$gettext} = useGettext()
|
|
|
|
|
@@ -8,9 +13,84 @@ const props = defineProps(['directivesMap'])
|
|
|
|
|
|
const visible = ref(false)
|
|
|
|
|
|
+const columns = [{
|
|
|
+ title: () => $gettext('Name'),
|
|
|
+ dataIndex: 'name',
|
|
|
+ sorter: true,
|
|
|
+ pithy: true,
|
|
|
+ customRender: (args: customRender) => {
|
|
|
+ const {text, record} = args
|
|
|
+ if (!text) {
|
|
|
+ return h('div', record.domain)
|
|
|
+ }
|
|
|
+ return h('div', text)
|
|
|
+ },
|
|
|
+ edit: {
|
|
|
+ type: input
|
|
|
+ },
|
|
|
+ search: true
|
|
|
+}, {
|
|
|
+ title: () => $gettext('Domain'),
|
|
|
+ dataIndex: 'domain',
|
|
|
+ sorter: true,
|
|
|
+ pithy: true,
|
|
|
+ edit: {
|
|
|
+ type: input
|
|
|
+ },
|
|
|
+ search: true
|
|
|
+}, {
|
|
|
+ title: () => $gettext('Auto Cert'),
|
|
|
+ dataIndex: 'auto_cert',
|
|
|
+ customRender: (args: customRender) => {
|
|
|
+ const template: any = []
|
|
|
+ const {text, column} = args
|
|
|
+ if (text === true || text > 0) {
|
|
|
+ template.push(<Badge status="success"/>)
|
|
|
+ template.push($gettext('Enabled'))
|
|
|
+ } else {
|
|
|
+ template.push(<Badge status="warning"/>)
|
|
|
+ template.push($gettext('Disabled'))
|
|
|
+ }
|
|
|
+ return h('div', template)
|
|
|
+ },
|
|
|
+ sorter: true,
|
|
|
+ pithy: true
|
|
|
+}, {
|
|
|
+ title: () => $gettext('SSL Certificate Path'),
|
|
|
+ dataIndex: 'ssl_certificate_path',
|
|
|
+ edit: {
|
|
|
+ type: input
|
|
|
+ },
|
|
|
+ display: false
|
|
|
+}, {
|
|
|
+ title: () => $gettext('SSL Certificate Key Path'),
|
|
|
+ dataIndex: 'ssl_certificate_key_path',
|
|
|
+ edit: {
|
|
|
+ type: input
|
|
|
+ },
|
|
|
+ display: false
|
|
|
+}, {
|
|
|
+ title: () => $gettext('Updated at'),
|
|
|
+ dataIndex: 'updated_at',
|
|
|
+ customRender: datetime,
|
|
|
+ sorter: true,
|
|
|
+ pithy: true
|
|
|
+}, {
|
|
|
+ title: () => $gettext('Action'),
|
|
|
+ dataIndex: 'action'
|
|
|
+}]
|
|
|
+
|
|
|
function open() {
|
|
|
visible.value = true
|
|
|
}
|
|
|
+
|
|
|
+function onSelect() {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function onSelectedRecord() {
|
|
|
+
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -21,7 +101,13 @@ function open() {
|
|
|
v-model:visible="visible"
|
|
|
:mask="false"
|
|
|
>
|
|
|
-
|
|
|
+ <std-table
|
|
|
+ :api="cert"
|
|
|
+ :pithy="true"
|
|
|
+ :columns="columns"
|
|
|
+ @onSelected="onSelect"
|
|
|
+ @onSelectedRecord="onSelectedRecord"
|
|
|
+ />
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|