Skip to content

Commit

Permalink
feat(north group): mqtt and gewu plugin support edit group
Browse files Browse the repository at this point in the history
  • Loading branch information
orangegzx authored and ysfscream committed Sep 6, 2023
1 parent 9ed6282 commit b455c92
Show file tree
Hide file tree
Showing 8 changed files with 438 additions and 28 deletions.
3 changes: 3 additions & 0 deletions src/api/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ export const addSubscriptions = (data: SubscriptionsData) => {
export const deleteSubscription = (data: SubscriptionData) => {
return http.delete('/subscribe', { data })
}
export const updateSubscription = (data: SubscriptionData) => {
return http.put('/subscribe', data)
}

export const querySubscription = async (node: string): Promise<Array<SubscriptionData>> => {
try {
Expand Down
118 changes: 93 additions & 25 deletions src/composables/config/useSubscription.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { addSubscription, addSubscriptions, deleteSubscription, queryGroupList, querySubscription } from '@/api/config'
import {
addSubscription,
addSubscriptions,
deleteSubscription,
updateSubscription,
queryGroupList,
querySubscription,
} from '@/api/config'
import type { GroupData, SubscriptionData, SubscriptionsData, SubscriptionDataForm } from '@/types/config'
import type { Ref } from 'vue'
import { ref, computed, nextTick } from 'vue'
Expand All @@ -10,6 +17,7 @@ import useSouthDriver from './useSouthDriver'
import { createCommonErrorMessage, OmitArrayFields } from '@/utils/utils'
import { EN_NUMBER_REGEX } from '@/utils/regexps'
import { useDriverInfo } from '@/composables/config/useDriver'
import { cloneDeep, omit } from 'lodash'

interface SubscriptionDataInTable extends SubscriptionData {
checked: boolean
Expand All @@ -21,6 +29,20 @@ export const useSubscriptionList = () => {

const isListLoading = ref(false)
const subscriptionList: Ref<Array<SubscriptionDataInTable>> = ref([])

const isEditGroup = ref(false)
const showEditGroupDailog = ref(false)
const isSubmitting = ref(false)
const editGroupForm: Ref<SubscriptionData> = ref({
app: '',
driver: '',
group: '',
params: {
topic: '',
productKey: '',
},
})

const node = computed(() => route.params.node.toString())

const allChecked = computed({
Expand Down Expand Up @@ -77,6 +99,32 @@ export const useSubscriptionList = () => {

const batchUnsubscribeGroups = () => unsubscribe(t('config.unsubscribeInBulkConfirm'), subCheckedList.value)

const showEditGroupDialog = (group: SubscriptionDataInTable) => {
const groupData = cloneDeep(group)
isEditGroup.value = true
showEditGroupDailog.value = true
editGroupForm.value = omit(groupData, ['checked'])
}
const updateGroup = async (data: SubscriptionData) => {
try {
isSubmitting.value = true
const params = {
...data,
app: node.value,
}
showEditGroupDailog.value = false

EmqxMessage.success(t('common.submitSuccess'))

await updateSubscription(params)
getSubscriptionList()
} catch (error) {
console.error(error)
} finally {
isSubmitting.value = false
}
}

getSubscriptionList()

return {
Expand All @@ -90,6 +138,13 @@ export const useSubscriptionList = () => {
unsubscribeGroup,
clearSubscription,
batchUnsubscribeGroups,

isEditGroup,
showEditGroupDailog,
showEditGroupDialog,
editGroupForm,
updateGroup,
isSubmitting,
}
}

Expand All @@ -98,31 +153,8 @@ type AddSubscriptionProps = Readonly<{
currentNode: string
}>

export const useAddSubscription = (props: AddSubscriptionProps) => {
export const useSubscriptionGroup = () => {
const { t } = useI18n()
const { isMQTTPugin, isGewuPugin, isSupportBatchSub } = useDriverInfo()

const createRawSubscriptionForm = (): SubscriptionDataForm => ({
app: null,
driver: '',
group: '',
driverGroups: {},
topic: '',
productKey: '',
})

const formCom = ref()

const topicWarning = computed(() => {
let warningContent = ''
const { topic } = subscriptionForm.value
if (topic) {
const isContainWildcard = topic.includes('#') || topic.includes('+')
warningContent = isContainWildcard ? t('config.topicContainWildcard') : ''
}
return warningContent
})

const checkDriverGroups = async (rule: unknown, value: string, callback: any) => {
const keys = Object.keys(value)
const values = Object.values(value)
Expand Down Expand Up @@ -152,13 +184,49 @@ export const useAddSubscription = (props: AddSubscriptionProps) => {
{ required: true, message: createCommonErrorMessage('select', t('config.subscribeSouthDriverData')) },
{ validator: checkDriverGroups, trigger: ['blur'] },
],
'params.topic': [{ required: true, message: createCommonErrorMessage('input', t('config.topic')) }],
topic: [{ required: true, message: createCommonErrorMessage('input', t('config.topic')) }],

'params.productKey': [
{ required: true, message: createCommonErrorMessage('input', ' productKey') },
{ validator: checkProductKey, trigger: ['blur'] },
],
productKey: [
{ required: true, message: createCommonErrorMessage('input', ' productKey') },
{ validator: checkProductKey, trigger: ['blur'] },
],
}
})
return {
rules,
}
}
export const useAddSubscription = (props: AddSubscriptionProps) => {
const { t } = useI18n()
const { isMQTTPugin, isGewuPugin, isSupportBatchSub } = useDriverInfo()

const createRawSubscriptionForm = (): SubscriptionDataForm => ({
app: null,
driver: '',
group: '',
driverGroups: {},
topic: '',
productKey: '',
})

const formCom = ref()

const topicWarning = computed(() => {
let warningContent = ''
const { topic } = subscriptionForm.value
if (topic) {
const isContainWildcard = topic.includes('#') || topic.includes('+')
warningContent = isContainWildcard ? t('config.topicContainWildcard') : ''
}
return warningContent
})

const { rules } = useSubscriptionGroup()

const subscriptionForm: Ref<SubscriptionDataForm> = ref(createRawSubscriptionForm())
const isSubmitting = ref(false)
Expand Down
1 change: 0 additions & 1 deletion src/composables/data/useWriteDataCheckNParse.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@ export default (isWriteValue = true) => {
try {
await isJSONData(value)
const arrValue = JSON.parse(value)
console.log('arrValue', arrValue)
if (!Array.isArray(arrValue)) {
return Promise.reject(new Error(WriteDataErrorCode.FormattingError.toString()))
}
Expand Down
4 changes: 2 additions & 2 deletions src/types/config.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ export interface SubscriptionData extends SubscriptionDataForm {
driver: string
group: string
params?: {
topic?: string
productKey?: string
topic?: string | null
productKey?: string | null
}
}

Expand Down
96 changes: 96 additions & 0 deletions src/views/config/components/DriverListSelector.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<template>
<emqx-select
v-model="driver"
clearable
:size="size"
class="plugin_select"
:placeholder="selectorPlaceholder"
:disabled="disabled"
@change="changeDriver"
>
<emqx-option v-for="item in driverList" :key="item.name" :value="item.name" :label="item.name" />
</emqx-select>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, watch, ref, nextTick } from 'vue'
import type { PropType, Ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { DriverDirection } from '@/types/enums'
import { querySouthDriverList, queryNorthDriverList } from '@/api/config'
import type { RawDriverData } from '@/types/config'
const props = defineProps({
modelValue: { type: String, default: '' },
type: { type: Number as PropType<DriverDirection | null>, default: null },
placeholder: { type: String, default: '' },
size: { type: String, default: '' },
disabled: { type: Boolean, default: false },
width: { type: String, default: '220px' },
})
const emits = defineEmits(['update:modelValue', 'change'])
const { t } = useI18n()
const driverList: Ref<Array<RawDriverData>> = ref([])
const driver = computed({
get: () => props.modelValue,
set: (val) => {
emits('update:modelValue', val)
},
})
watch(
() => props.type,
(newV) => {
nextTick(() => {
getList(newV)
})
},
{ immediate: true },
)
const getAllDrivers = async (): Promise<Array<RawDriverData>> => {
try {
const listArray = await Promise.all([await queryNorthDriverList(), await querySouthDriverList()])
const list = listArray.reduce((ret, cur) => {
return ret.concat(cur)
}, [])
return Promise.resolve(list)
} catch (error) {
console.error(error)
return Promise.reject(error)
}
}
const getList = async (type: DriverDirection | null | undefined) => {
try {
if (!type) {
driverList.value = await getAllDrivers()
}
if (type === DriverDirection.South) {
driverList.value = await querySouthDriverList()
}
if (type === DriverDirection.North) {
driverList.value = await queryNorthDriverList()
}
} catch (error) {
console.error(error)
}
}
const selectorPlaceholder = computed(() => {
return props.placeholder || t('config.southDeviceRequired')
})
const changeDriver = (val: string) => {
emits('change', val)
}
</script>

<style lang="scss" scoped>
.plugin_select {
width: v-bind(width);
}
</style>
73 changes: 73 additions & 0 deletions src/views/config/components/GroupListSelector.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<emqx-select
v-model="group"
clearable
:size="size"
class="plugin_select"
:placeholder="selectorPlaceholder"
:disabled="disabled"
@change="changeGroup"
>
<emqx-option v-for="{ name } in groupList" :key="name" :value="name" :label="name" />
</emqx-select>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, watch, ref, nextTick } from 'vue'
import type { Ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { queryGroupList } from '@/api/config'
import type { GroupData } from '@/types/config'
const props = defineProps({
modelValue: { type: String, default: '' },
driver: { type: String, required: true },
placeholder: { type: String, default: '' },
size: { type: String, default: '' },
disabled: { type: Boolean, default: false },
width: { type: String, default: '220px' },
})
const emits = defineEmits(['update:modelValue', 'change'])
const { t } = useI18n()
const groupList: Ref<Array<GroupData>> = ref([])
const group = computed({
get: () => props.modelValue,
set: (val) => {
emits('update:modelValue', val)
},
})
watch(
() => props.driver,
(newV) => {
nextTick(() => {
getList(newV)
})
},
{ immediate: true },
)
const getList = async (driver: string) => {
try {
groupList.value = driver ? await queryGroupList(driver as string) : []
} catch (error) {
console.error(error)
}
}
const selectorPlaceholder = computed(() => {
return props.placeholder || t('config.groupPlaceholder')
})
const changeGroup = (val: string) => {
emits('change', val)
}
</script>

<style lang="scss" scoped>
.plugin_select {
width: v-bind(width);
}
</style>
Loading

0 comments on commit b455c92

Please sign in to comment.