refactor(desktop): add mqtt properties component

src/components/MqttProperties.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="mqtt-properties">
+    <template v-for="field in propertyFields">
+      <p
+        v-if="properties[field.key]"
+        :key="field.key"
+        :class="['properties', direction, { 'user-properties': field.key === 'userProperties' }]"
+      >
+        <template v-if="field.key === 'userProperties'">
+          <KeyValueEditor
+            class="msg-item-props"
+            :title="$t('connections.userProperties')"
+            :disabled="true"
+            :value="properties.userProperties"
+          />
+        </template>
+        <template v-else>
+          <span>{{ $t(`connections.${field.key}`) }}: {{ properties[field.key] }}</span>
+        </template>
+      </p>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import KeyValueEditor from './KeyValueEditor.vue'
+
+interface PropertyField {
+  key: keyof PushPropertiesModel
+}
+
+@Component({
+  components: {
+    KeyValueEditor,
+  },
+})
+export default class MqttProperties extends Vue {
+  @Prop({ required: true }) public properties!: PushPropertiesModel
+  @Prop({ default: '' }) public direction!: string
+
+  private propertyFields: PropertyField[] = [
+    { key: 'subscriptionIdentifier' },
+    { key: 'contentType' },
+    { key: 'payloadFormatIndicator' },
+    { key: 'topicAlias' },
+    { key: 'responseTopic' },
+    { key: 'correlationData' },
+    { key: 'messageExpiryInterval' },
+    { key: 'userProperties' },
+  ]
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/MsgLeftItem.vue

@@ -34,37 +34,7 @@
         <span class="qos">QoS: {{ qos }}</span>
         <span v-if="retain" class="retain">Retained</span>
       </p>
-      <div class="meta">
-        <p v-if="properties.subscriptionIdentifier" class="properties left">
-          <span>{{ $t('connections.subscriptionIdentifier') }}: {{ properties.subscriptionIdentifier }}</span>
-        </p>
-        <p v-if="properties.contentType" class="properties left">
-          <span>{{ $t('connections.contentType') }}: {{ properties.contentType }}</span>
-        </p>
-        <p v-if="properties.payloadFormatIndicator" class="properties left">
-          <span>{{ $t('connections.payloadFormatIndicator') }}: {{ properties.payloadFormatIndicator }}</span>
-        </p>
-        <p v-if="properties.topicAlias" class="properties left">
-          <span>{{ $t('connections.topicAlias') }}: {{ properties.topicAlias }}</span>
-        </p>
-        <p v-if="properties.responseTopic" class="properties left">
-          <span>{{ $t('connections.responseTopic') }}: {{ properties.responseTopic }}</span>
-        </p>
-        <p v-if="properties.correlationData" class="properties left">
-          <span>{{ $t('connections.correlationData') }}: {{ properties.correlationData }}</span>
-        </p>
-        <p v-if="properties.messageExpiryInterval" class="properties left">
-          <span>{{ $t('connections.messageExpiryInterval') }}: {{ properties.messageExpiryInterval }}</span>
-        </p>
-        <p v-if="properties.userProperties" class="user-properties properties left">
-          <KeyValueEditor
-            class="msg-item-props"
-            :title="$t('connections.userProperties')"
-            :disabled="true"
-            :value="properties.userProperties"
-          />
-        </p>
-      </div>
+      <MqttProperties class="meta" :properties="properties" direction="left" />
       <template v-if="isLargeMsg">
         <div class="large-message { .el-button { margin-top: 12px;}}">
           <pre>{{ payload.substr(0, showMaxLen) }}<span><i class="iconfont icon-more"></i></span></pre>
@@ -92,16 +62,16 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import KeyValueEditor from './KeyValueEditor.vue'
 import FullMsgDialog from './FullMsgDialog.vue'
 import Prism from 'prismjs'
 import { Getter } from 'vuex-class'
 import { SHOW_MAX_LENGTH } from '@/utils/data'
+import MqttProperties from './MqttProperties.vue'
 
 @Component({
   components: {
-    KeyValueEditor,
     FullMsgDialog,
+    MqttProperties,
   },
 })
 export default class MsgLeftItem extends Vue {

src/components/MsgRightItem.vue

@@ -19,37 +19,7 @@
         <span class="topic">Topic: {{ topic }}</span>
         <span class="qos">QoS: {{ qos }}</span>
       </p>
-      <div class="meta">
-        <p v-if="properties.subscriptionIdentifier" class="properties right">
-          <span>{{ $t('connections.subscriptionIdentifier') }}: {{ properties.subscriptionIdentifier }}</span>
-        </p>
-        <p v-if="properties.contentType" class="properties right">
-          <span>{{ $t('connections.contentType') }}: {{ properties.contentType }}</span>
-        </p>
-        <p v-if="properties.payloadFormatIndicator" class="properties right">
-          <span>{{ $t('connections.payloadFormatIndicator') }}: {{ properties.payloadFormatIndicator }}</span>
-        </p>
-        <p v-if="properties.topicAlias" class="properties right">
-          <span>{{ $t('connections.topicAlias') }}: {{ properties.topicAlias }}</span>
-        </p>
-        <p v-if="properties.responseTopic" class="properties right">
-          <span>{{ $t('connections.responseTopic') }}: {{ properties.responseTopic }}</span>
-        </p>
-        <p v-if="properties.correlationData" class="properties right">
-          <span>{{ $t('connections.correlationData') }}: {{ properties.correlationData }}</span>
-        </p>
-        <p v-if="properties.messageExpiryInterval" class="properties right">
-          <span>{{ $t('connections.messageExpiryInterval') }}: {{ properties.messageExpiryInterval }}</span>
-        </p>
-        <p v-if="properties.userProperties" class="user-properties properties right">
-          <KeyValueEditor
-            class="msg-item-props"
-            :title="$t('connections.userProperties')"
-            :disabled="true"
-            :value="properties.userProperties"
-          />
-        </p>
-      </div>
+      <MqttProperties class="meta" :properties="properties" direction="right" />
       <pre>{{ payload }}</pre>
     </div>
     <p class="right-time time">{{ createAt }}</p>
@@ -58,11 +28,11 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import KeyValueEditor from './KeyValueEditor.vue'
+import MqttProperties from './MqttProperties.vue'
 
 @Component({
   components: {
-    KeyValueEditor,
+    MqttProperties,
   },
 })
 export default class MsgrightItem extends Vue {