mirrors/nginx-ui
1
0
Fork 0
mirror of https://github.com/0xJacky/nginx-ui.git synced 2025-05-12 19:05:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

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 CodeEditor from '@/components/CodeEditor'
import {useGettext} from 'vue3-gettext' import {useGettext} from 'vue3-gettext'
import {reactive, ref} from 'vue' 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() const {$gettext} = useGettext()
@ -11,7 +12,7 @@ const props = defineProps(['locations'])
let location = reactive({ let location = reactive({
comments: '', comments: '',
path: '', path: '',
content: '', content: ''
}) })
const adding = ref(false) const adding = ref(false)
@ -38,34 +39,46 @@ function remove(index: number) {
<template> <template>
<h2 v-translate>Locations</h2> <h2 v-translate>Locations</h2>
<a-empty v-if="!locations"/> <a-empty v-if="!locations"/>
<a-card v-for="(v,k) in locations" :key="k" <draggable
:title="$gettext('Location')" size="small"> :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-form layout="vertical">
<a-popconfirm @confirm="remove(k)" <a-form-item :label="$gettext('Comments')">
:title="$gettext('Are you sure you want to remove this location?')" <a-textarea v-model:value="v.comments" :bordered="false"/>
:ok-text="$gettext('Yes')" </a-form-item>
:cancel-text="$gettext('No')"> <a-form-item :label="$gettext('Path')">
<a-button type="text"> <a-input addon-before="location" v-model:value="v.path"/>
<template #icon> </a-form-item>
<DeleteOutlined style="font-size: 14px;"/> <a-form-item :label="$gettext('Content')">
</template> <code-editor v-model:content="v.content" default-height="200px" style="width: 100%;"/>
</a-button> </a-form-item>
</a-popconfirm> </a-form>
</a-card>
</template> </template>
</draggable>
<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-modal :title="$gettext('Add Location')" v-model:visible="adding" @ok="save"> <a-modal :title="$gettext('Add Location')" v-model:visible="adding" @ok="save">
<a-form layout="vertical"> <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 DirectiveAdd from '@/views/domain/ngx_conf/directive/DirectiveAdd'
import {useGettext} from 'vue3-gettext' import {useGettext} from 'vue3-gettext'
import {reactive, ref} from 'vue' 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() const {$gettext} = useGettext()
@ -42,40 +43,53 @@ function onSave(idx: number) {
<template> <template>
<h2>{{ $gettext('Directives') }}</h2> <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"> <div class="input-wrapper">
<code-editor v-if="directive.directive === If" v-model:content="directive.params" <code-editor v-if="directive.directive === If" v-model:content="directive.params"
defaultHeight="100px" style="width: 100%;"/> defaultHeight="100px" style="width: 100%;"/>
<a-input v-else <a-input v-else
:addon-before="directive.directive" v-model:value="directive.params" @click="current_idx=index" @blur="current_idx=-1">
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)" <a-popconfirm @confirm="remove(index)"
:title="$gettext('Are you sure you want to remove this directive?')" :title="$gettext('Are you sure you want to remove this directive?')"
:ok-text="$gettext('Yes')" :ok-text="$gettext('Yes')"
:cancel-text="$gettext('No')"> :cancel-text="$gettext('No')">
<a-button> <a-button>
<template #icon> <template #icon>
<DeleteOutlined style="font-size: 14px;"/> <DeleteOutlined style="font-size: 14px;"/>
</template> </template>
</a-button> </a-button>
</a-popconfirm> </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)"/>
</div> </div>
</div> <transition name="slide">
</transition> <div v-if="current_idx===index" class="directive-editor-extra">
</a-form-item> <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"/> <directive-add :ngx_directives="props.ngx_directives"/>
</template> </template>
@ -83,7 +97,7 @@ function onSave(idx: number) {
<style lang="less" scoped> <style lang="less" scoped>
.directive-editor-extra { .directive-editor-extra {
background-color: #fafafa; background-color: #fafafa;
padding: 10px 20px 20px; padding: 10px 20px;
margin-bottom: 10px; margin-bottom: 10px;
} }