Skip to content

Commit 4bce902

Browse files
0xJacky0xJacky
committed
feat: drag to sort directives and locations block 🎉
1 parent cdafc62 commit 4bce902

File tree

2 files changed

+90
-63
lines changed

2 files changed

+90
-63
lines changed

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

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
import CodeEditor from '@/components/CodeEditor'
33
import {useGettext} from 'vue3-gettext'
44
import {reactive, ref} from 'vue'
5-
import {DeleteOutlined} from '@ant-design/icons-vue'
5+
import {DeleteOutlined, HolderOutlined} from '@ant-design/icons-vue'
6+
import draggable from 'vuedraggable'
67
78
const {$gettext} = useGettext()
89
@@ -11,7 +12,7 @@ const props = defineProps(['locations'])
1112
let location = reactive({
1213
comments: '',
1314
path: '',
14-
content: '',
15+
content: ''
1516
})
1617
1718
const adding = ref(false)
@@ -38,34 +39,46 @@ function remove(index: number) {
3839
<template>
3940
<h2 v-translate>Locations</h2>
4041
<a-empty v-if="!locations"/>
41-
<a-card v-for="(v,k) in locations" :key="k"
42-
:title="$gettext('Location')" size="small">
42+
<draggable
43+
:list="locations"
44+
item-key="name"
45+
class="list-group"
46+
ghost-class="ghost"
47+
handle=".ant-card-head"
48+
>
49+
<template #item="{ element: v, index }">
50+
<a-card :key="index" size="small">
51+
<template #title>
52+
<HolderOutlined/>
53+
{{ $gettext('Location') }}
54+
</template>
55+
<template #extra>
56+
<a-popconfirm @confirm="remove(index)"
57+
:title="$gettext('Are you sure you want to remove this location?')"
58+
:ok-text="$gettext('Yes')"
59+
:cancel-text="$gettext('No')">
60+
<a-button type="text">
61+
<template #icon>
62+
<DeleteOutlined style="font-size: 14px;"/>
63+
</template>
64+
</a-button>
65+
</a-popconfirm>
66+
</template>
4367

44-
<template #extra>
45-
<a-popconfirm @confirm="remove(k)"
46-
:title="$gettext('Are you sure you want to remove this location?')"
47-
:ok-text="$gettext('Yes')"
48-
:cancel-text="$gettext('No')">
49-
<a-button type="text">
50-
<template #icon>
51-
<DeleteOutlined style="font-size: 14px;"/>
52-
</template>
53-
</a-button>
54-
</a-popconfirm>
68+
<a-form layout="vertical">
69+
<a-form-item :label="$gettext('Comments')">
70+
<a-textarea v-model:value="v.comments" :bordered="false"/>
71+
</a-form-item>
72+
<a-form-item :label="$gettext('Path')">
73+
<a-input addon-before="location" v-model:value="v.path"/>
74+
</a-form-item>
75+
<a-form-item :label="$gettext('Content')">
76+
<code-editor v-model:content="v.content" default-height="200px" style="width: 100%;"/>
77+
</a-form-item>
78+
</a-form>
79+
</a-card>
5580
</template>
56-
57-
<a-form layout="vertical">
58-
<a-form-item :label="$gettext('Comments')">
59-
<a-textarea v-model:value="v.comments" :bordered="false"/>
60-
</a-form-item>
61-
<a-form-item :label="$gettext('Path')">
62-
<a-input addon-before="location" v-model:value="v.path"/>
63-
</a-form-item>
64-
<a-form-item :label="$gettext('Content')">
65-
<code-editor v-model:content="v.content" default-height="200px" style="width: 100%;"/>
66-
</a-form-item>
67-
</a-form>
68-
</a-card>
81+
</draggable>
6982

7083
<a-modal :title="$gettext('Add Location')" v-model:visible="adding" @ok="save">
7184
<a-form layout="vertical">

‎frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue‎

Lines changed: 49 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {If} from '@/views/domain/ngx_conf'
44
import DirectiveAdd from '@/views/domain/ngx_conf/directive/DirectiveAdd'
55
import {useGettext} from 'vue3-gettext'
66
import {reactive, ref} from 'vue'
7-
import {DeleteOutlined} from '@ant-design/icons-vue'
7+
import {DeleteOutlined, HolderOutlined} from '@ant-design/icons-vue'
8+
import draggable from 'vuedraggable'
89
910
const {$gettext} = useGettext()
1011
@@ -42,48 +43,61 @@ function onSave(idx: number) {
4243
<template>
4344
<h2>{{ $gettext('Directives') }}</h2>
4445

45-
<a-form-item v-for="(directive,index) in props.ngx_directives" @click="current_idx=index">
46-
47-
<div class="input-wrapper">
48-
<code-editor v-if="directive.directive === If" v-model:content="directive.params"
49-
defaultHeight="100px" style="width: 100%;"/>
50-
51-
<a-input v-else
52-
:addon-before="directive.directive"
53-
v-model:value="directive.params" @click="current_idx=index" @blur="current_idx=-1"/>
54-
55-
<a-popconfirm @confirm="remove(index)"
56-
:title="$gettext('Are you sure you want to remove this directive?')"
57-
:ok-text="$gettext('Yes')"
58-
:cancel-text="$gettext('No')">
59-
<a-button>
60-
<template #icon>
61-
<DeleteOutlined style="font-size: 14px;"/>
62-
</template>
63-
</a-button>
64-
</a-popconfirm>
65-
</div>
66-
<transition name="slide">
67-
<div v-if="current_idx===index" class="directive-editor-extra">
68-
<div class="extra-content">
69-
<a-form layout="vertical">
70-
<a-form-item :label="$gettext('Comments')">
71-
<a-textarea v-model:value="directive.comments"/>
72-
</a-form-item>
73-
</a-form>
74-
<directive-add :ngx_directives="props.ngx_directives" :idx="index" @save="onSave(index)"/>
46+
<draggable
47+
:list="props.ngx_directives"
48+
item-key="name"
49+
class="list-group"
50+
ghost-class="ghost"
51+
handle=".ant-input-group-addon"
52+
>
53+
<template #item="{ element: directive, index }">
54+
<a-form-item @click="current_idx=index">
55+
56+
<div class="input-wrapper">
57+
<code-editor v-if="directive.directive === If" v-model:content="directive.params"
58+
defaultHeight="100px" style="width: 100%;"/>
59+
60+
<a-input v-else
61+
v-model:value="directive.params" @click="current_idx=index" @blur="current_idx=-1">
62+
<template #addonBefore>
63+
<HolderOutlined/>
64+
{{ directive.directive }}
65+
</template>
66+
</a-input>
67+
68+
<a-popconfirm @confirm="remove(index)"
69+
:title="$gettext('Are you sure you want to remove this directive?')"
70+
:ok-text="$gettext('Yes')"
71+
:cancel-text="$gettext('No')">
72+
<a-button>
73+
<template #icon>
74+
<DeleteOutlined style="font-size: 14px;"/>
75+
</template>
76+
</a-button>
77+
</a-popconfirm>
7578
</div>
76-
</div>
77-
</transition>
78-
</a-form-item>
79+
<transition name="slide">
80+
<div v-if="current_idx===index" class="directive-editor-extra">
81+
<div class="extra-content">
82+
<a-form layout="vertical">
83+
<a-form-item :label="$gettext('Comments')">
84+
<a-textarea v-model:value="directive.comments"/>
85+
</a-form-item>
86+
</a-form>
87+
</div>
88+
</div>
89+
</transition>
90+
</a-form-item>
91+
</template>
92+
</draggable>
7993

8094
<directive-add :ngx_directives="props.ngx_directives"/>
8195
</template>
8296

8397
<style lang="less" scoped>
8498
.directive-editor-extra {
8599
background-color: #fafafa;
86-
padding: 10px 20px 20px;
100+
padding: 10px 20px;
87101
margin-bottom: 10px;
88102
}
89103

0 commit comments

Comments
 (0)