feat: edit-site collapsible locations #65, #30

Author: 0xJacky

frontend/components.d.ts

@@ -13,6 +13,8 @@ declare module '@vue/runtime-core' {
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACol: typeof import('ant-design-vue/es')['Col']
+    ACollapse: typeof import('ant-design-vue/es')['Collapse']
+    ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']

frontend/src/views/dashboard/DashBoard.vue

@@ -61,7 +61,7 @@ onMounted(() => {
         disk_io_analytic[0].data = disk_io_analytic[0].data.concat(r.disk_io.writes)
         disk_io_analytic[1].data = disk_io_analytic[1].data.concat(r.disk_io.reads)
 
-        websocket = ws('api/analytic')
+        websocket = ws('/api/analytic')
         websocket.onmessage = wsOnMessage
 
     })

frontend/src/views/domain/ngx_conf/LocationEditor.vue

@@ -40,43 +40,48 @@ function remove(index: number) {
     <h2 v-translate>Locations</h2>
     <a-empty v-if="!locations"/>
     <draggable
+        v-else
         :list="locations"
         item-key="name"
         class="list-group"
         ghost-class="ghost"
-        handle=".ant-card-head"
+        handle=".ant-collapse-header"
     >
         <template #item="{ element: v, index }">
-            <a-card :key="index" size="small">
-                <template #title>
-                    <HolderOutlined/>
-                    {{ $gettext('Location') }}
-                </template>
-                <template #extra v-if="!readonly">
-                    <a-popconfirm @confirm="remove(index)"
-                                  :title="$gettext('Are you sure you want to remove this location?')"
-                                  :ok-text="$gettext('Yes')"
-                                  :cancel-text="$gettext('No')">
-                        <a-button type="text">
-                            <template #icon>
-                                <DeleteOutlined style="font-size: 14px;"/>
-                            </template>
-                        </a-button>
-                    </a-popconfirm>
-                </template>
-
-                <a-form layout="vertical">
-                    <a-form-item :label="$gettext('Comments')">
-                        <a-textarea v-model:value="v.comments" :bordered="false"/>
-                    </a-form-item>
-                    <a-form-item :label="$gettext('Path')">
-                        <a-input addon-before="location" v-model:value="v.path"/>
-                    </a-form-item>
-                    <a-form-item :label="$gettext('Content')">
-                        <code-editor v-model:content="v.content" default-height="200px" style="width: 100%;"/>
-                    </a-form-item>
-                </a-form>
-            </a-card>
+            <a-collapse :bordered="false">
+                <a-collapse-panel>
+                    <template #header>
+                        <div>
+                            <HolderOutlined/>
+                            {{ $gettext('Location') }}
+                            {{ v.path }}
+                        </div>
+                    </template>
+                    <template #extra v-if="!readonly">
+                        <a-popconfirm @confirm="remove(index)"
+                                      :title="$gettext('Are you sure you want to remove this location?')"
+                                      :ok-text="$gettext('Yes')"
+                                      :cancel-text="$gettext('No')">
+                            <a-button type="text" size="small">
+                                <template #icon>
+                                    <DeleteOutlined style="font-size: 14px;"/>
+                                </template>
+                            </a-button>
+                        </a-popconfirm>
+                    </template>
+                    <a-form layout="vertical">
+                        <a-form-item :label="$gettext('Comments')">
+                            <a-textarea v-model:value="v.comments" :bordered="false"/>
+                        </a-form-item>
+                        <a-form-item :label="$gettext('Path')">
+                            <a-input addon-before="location" v-model:value="v.path"/>
+                        </a-form-item>
+                        <a-form-item :label="$gettext('Content')">
+                            <code-editor v-model:content="v.content" default-height="200px" style="width: 100%;"/>
+                        </a-form-item>
+                    </a-form>
+                </a-collapse-panel>
+            </a-collapse>
         </template>
     </draggable>
 
@@ -100,8 +105,15 @@ function remove(index: number) {
 </template>
 
 <style lang="less" scoped>
-.ant-card {
+.ant-collapse {
     margin: 10px 0;
-    box-shadow: unset;
+}
+
+.ant-collapse-item {
+    border: 0 !important;
+}
+
+.ant-collapse-header {
+    align-items: center;
 }
 </style>