mirrors/nginx-ui
1
0
Fork 0
mirror of https://github.com/0xJacky/nginx-ui.git synced 2025-05-11 02:15:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: drag to sort directives and locations block 🎉

Browse source
This commit is contained in:
0xJacky 2022-11-13 00:26:09 +08:00
parent cdafc62009
commit 4bce9025af
No known key found for this signature in database
GPG key ID: B6E4A6E4A561BAF0
2 changed files with 87 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

69
frontend/src/views/domain/ngx_conf/LocationEditor.vue
View file

@ -2,7 +2,8 @@
import CodeEditor from '@/components/CodeEditor'
import {useGettext} from 'vue3-gettext'
import {reactive, ref} from 'vue'
import {DeleteOutlined} from '@ant-design/icons-vue'
import {DeleteOutlined, HolderOutlined} from '@ant-design/icons-vue'
import draggable from 'vuedraggable'
const {$gettext} = useGettext()
@ -11,7 +12,7 @@ const props = defineProps(['locations'])
let location = reactive({
comments: '',
path: '',
content: '',
content: ''
})
const adding = ref(false)
@ -38,34 +39,46 @@ function remove(index: number) {
<template>
<h2 v-translate>Locations</h2>
<a-empty v-if="!locations"/>
<a-card v-for="(v,k) in locations" :key="k"
:title="$gettext('Location')" size="small">
<draggable
:list="locations"
item-key="name"
class="list-group"
ghost-class="ghost"
handle=".ant-card-head"
>
<template #item="{ element: v, index }">
<a-card :key="index" size="small">
<template #title>
<HolderOutlined/>
{{ $gettext('Location') }}
</template>
<template #extra>
<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>
<template #extra>
<a-popconfirm @confirm="remove(k)"
: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>
<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>
</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>
</draggable>
<a-modal :title="$gettext('Add Location')" v-model:visible="adding" @ok="save">
<a-form layout="vertical">

78
frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
View file

@ -4,7 +4,8 @@ import {If} from '@/views/domain/ngx_conf'
import DirectiveAdd from '@/views/domain/ngx_conf/directive/DirectiveAdd'
import {useGettext} from 'vue3-gettext'
import {reactive, ref} from 'vue'
import {DeleteOutlined} from '@ant-design/icons-vue'
import {DeleteOutlined, HolderOutlined} from '@ant-design/icons-vue'
import draggable from 'vuedraggable'
const {$gettext} = useGettext()
@ -42,40 +43,53 @@ function onSave(idx: number) {
<template>
<h2>{{ $gettext('Directives') }}</h2>
<a-form-item v-for="(directive,index) in props.ngx_directives" @click="current_idx=index">
<draggable
:list="props.ngx_directives"
item-key="name"
class="list-group"
ghost-class="ghost"
handle=".ant-input-group-addon"
>
<template #item="{ element: directive, index }">
<a-form-item @click="current_idx=index">
<div class="input-wrapper">
<code-editor v-if="directive.directive === If" v-model:content="directive.params"
defaultHeight="100px" style="width: 100%;"/>
<div class="input-wrapper">
<code-editor v-if="directive.directive === If" v-model:content="directive.params"
defaultHeight="100px" style="width: 100%;"/>
<a-input v-else
:addon-before="directive.directive"
v-model:value="directive.params" @click="current_idx=index" @blur="current_idx=-1"/>
<a-input v-else
v-model:value="directive.params" @click="current_idx=index" @blur="current_idx=-1">
<template #addonBefore>
<HolderOutlined/>
{{ directive.directive }}
</template>
</a-input>
<a-popconfirm @confirm="remove(index)"
:title="$gettext('Are you sure you want to remove this directive?')"
:ok-text="$gettext('Yes')"
:cancel-text="$gettext('No')">
<a-button>
<template #icon>
<DeleteOutlined style="font-size: 14px;"/>
</template>
</a-button>
</a-popconfirm>
</div>
<transition name="slide">
<div v-if="current_idx===index" class="directive-editor-extra">
<div class="extra-content">
<a-form layout="vertical">
<a-form-item :label="$gettext('Comments')">
<a-textarea v-model:value="directive.comments"/>
</a-form-item>
</a-form>
<directive-add :ngx_directives="props.ngx_directives" :idx="index" @save="onSave(index)"/>
<a-popconfirm @confirm="remove(index)"
:title="$gettext('Are you sure you want to remove this directive?')"
:ok-text="$gettext('Yes')"
:cancel-text="$gettext('No')">
<a-button>
<template #icon>
<DeleteOutlined style="font-size: 14px;"/>
</template>
</a-button>
</a-popconfirm>
</div>
</div>
</transition>
</a-form-item>
<transition name="slide">
<div v-if="current_idx===index" class="directive-editor-extra">
<div class="extra-content">
<a-form layout="vertical">
<a-form-item :label="$gettext('Comments')">
<a-textarea v-model:value="directive.comments"/>
</a-form-item>
</a-form>
</div>
</div>
</transition>
</a-form-item>
</template>
</draggable>
<directive-add :ngx_directives="props.ngx_directives"/>
</template>
@ -83,7 +97,7 @@ function onSave(idx: number) {
<style lang="less" scoped>
.directive-editor-extra {
background-color: #fafafa;
padding: 10px 20px 20px;
padding: 10px 20px;
margin-bottom: 10px;
}