feat: improve schedule style and track opened rows by id

wiremind · Oct 29, 2021 · 22a18fc · 22a18fc
1 parent c64ce72
commit 22a18fc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/src/messages/components/CMessageRow.vue b/src/messages/components/CMessageRow.vue
@@ -78,12 +78,12 @@ export default {
   name: 'CMessageRow',
   props: {
     message: Object,
-    isTopLevel: Boolean
+    isTopLevel: Boolean,
+    isOpened: Boolean
   },
   data() {
     return {
       canCancel: true,
-      isOpened: false,
       response: null
     };
   },
@@ -145,7 +145,6 @@ export default {
         });
     },
     onToggle() {
-      this.isOpened = !this.isOpened;
       this.$emit('toggle', this.message.messageId);
     },
     searchActor() {

diff --git a/src/messages/components/CTable.vue b/src/messages/components/CTable.vue
@@ -19,15 +19,12 @@
         <c-message-row
           :message="message"
           :isTopLevel="name === 'main_table'"
-          @toggle="toggleRow(index)"
+          @toggle="toggleRow(message.messageId)"
           :key="name + '_' + index + '_row'"
           :name="name + '_' + index + '_row'"
         />
         <tr
-          v-if="
-            openedRows.includes(index) ||
-            (message.compositionType && openedRows.includes(message.messages[0].messageId))
-          "
+          v-if="openedRows.includes(message.messageId)"
           :is="contentType(message)"
           :key="name + '_' + index + '_content'"
           :colspan="columns.length"
@@ -88,8 +85,8 @@ export default {
     };
   },
   methods: {
-    toggleRow(index) {
-      this.openedRows = utils.toggleItemFromList(index, this.openedRows);
+    toggleRow(id) {
+      this.openedRows = utils.toggleItemFromList(id, this.openedRows);
     },
     contentType: function (message) {
       if (message.compositionType === 'pipeline') {

diff --git a/src/schedule/components/CJobRow.vue b/src/schedule/components/CJobRow.vue
@@ -1,15 +1,15 @@
 <template>
   <tr class="border-b text-xs border-gray-200 hover:bg-blue-100">
-    <td class="border px-4 py-2">
+    <td class="border px-4">
       {{ actorName }}
     </td>
-    <td class="border px-4 py-2">
+    <td class="border px-4">
       <div class="flex">
         <input v-model="editableEnabled" type="checkbox" class="h-5 w-5 mr-2" />
         {{ editableEnabled }}
       </div>
     </td>
-    <td class="border px-4 py-2">
+    <td class="border pl-4">
       <div class="flex items-center space-x-2">
         <div class="w-1/3">{{ interval | formatSeconds }}</div>
         <input v-model.number="editableInterval" class="w2/3" type="number" />
@@ -23,7 +23,7 @@
         v-model="editableDailyTime"
       />
     </td>
-    <td class="border px-4 py-2">
+    <td class="border px-4">
       {{ lastQueued | formatDistance }}
     </td>
     <td class="border w-28">
@@ -46,13 +46,13 @@
         </option>
       </select>
     </td>
-    <td class="border px-4 py-2">
+    <td class="border">
       <input v-model="editableArgs" :class="{ 'invalid-input': !isArgsValid }" />
     </td>
-    <td class="border px-4 py-2">
+    <td class="border">
       <input v-model="editableKwargs" :class="{ 'invalid-input': !isKwargsValid }" />
     </td>
-    <td class="border px-4 py-2">
+    <td class="border">
       <input v-model="editableTz" />
     </td>
   </tr>