ayanova/src/views/svc-task-group.vue

@@ -29,7 +29,56 @@
               @change="fieldValueChanged('active')"
             ></v-checkbox>
           </v-col>
+          <v-col cols="12" class="mb-10">
+            <span class="text-subtitle-2"> {{ $ay.t("TaskList") }}</span
+            ><v-btn v-if="!formState.readOnly" large icon @click="addItem()">
+              <v-icon small color="primary">$ayiPlus</v-icon>
+            </v-btn>
 
+            <v-simple-table>
+              <template v-slot:default>
+                <thead>
+                  <tr>
+                    <th class="text-left">
+                      {{ $ay.t("Task") }}
+                    </th>
+                    <th class="text-right">
+                      {{ $ay.t("Sequence") }}
+                    </th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(item, index) in itemList"
+                    :key="item.Id"
+                    :class="form().childRowErrorClass(thisVm(), 'Items', index)"
+                  >
+                    <td class="text-left">
+                      {{ item.task }}
+                    </td>
+                    <th class="text-right">
+                      {{ $ay.dec(item.sequence) }}
+                    </th>
+
+                    <td class="text-right">
+                      <v-btn
+                        v-if="!formState.readOnly"
+                        large
+                        icon
+                        @click="editItem(index)"
+                        class="ml-4"
+                      >
+                        <v-icon small>
+                          $ayiEdit
+                        </v-icon>
+                      </v-btn>
+                    </td>
+                  </tr>
+                </tbody>
+              </template>
+            </v-simple-table>
+          </v-col>
           <!------------------------------------->
           <v-col cols="12">
             <v-textarea
@@ -53,6 +102,114 @@
         :size="60"
       ></v-progress-circular>
     </template>
+    <!-- #########################################################################################################-->
+    <!-- ##########################  ITEM EDIT FORM  ###############################-->
+    <!-- #########################################################################################################-->
+    <template v-if="obj.items.length && editItemIndex != -1">
+      <v-row justify="center">
+        <v-dialog v-model="editItemDialog">
+          <v-card>
+            <v-card-title> </v-card-title>
+            <v-card-text>
+              <v-row>
+                <v-col cols="12">
+                  <v-textarea
+                    v-model="obj.items[editItemIndex].task"
+                    :readonly="formState.readOnly"
+                    :label="$ay.t('Task')"
+                    :error-messages="
+                      form().serverErrors(this, `Items[${editItemIndex}].task`)
+                    "
+                    @input="fieldValueChanged(`Items[${editItemIndex}].task`)"
+                    ref="task"
+                    data-cy="task"
+                    auto-grow
+                  ></v-textarea>
+                </v-col>
+
+                <v-col cols="12" sm="6" lg="4" xl="3">
+                  <v-text-field
+                    v-model="obj.items[editItemIndex].sequence"
+                    :readonly="formState.readOnly"
+                    :label="$ay.t('Sequence')"
+                    ref="Items.sequence"
+                    data-cy="Items.sequence"
+                    :rules="[
+                      form().integerValid(this, 'Items.sequence'),
+                      form().required(this, 'Items.sequence')
+                    ]"
+                    :error-messages="
+                      form().serverErrors(
+                        this,
+                        `Items[${editItemIndex}].sequence`
+                      )
+                    "
+                    @input="
+                      fieldValueChanged(`Items[${editItemIndex}].sequence`)
+                    "
+                    type="number"
+                  ></v-text-field>
+                </v-col>
+              </v-row>
+            </v-card-text>
+            <v-card-actions>
+              <template v-if="!$vuetify.breakpoint.xs">
+                <v-btn color="red darken-1" text @click="deleteItem()">{{
+                  $ay.t("Delete")
+                }}</v-btn>
+                <v-spacer></v-spacer>
+
+                <v-btn
+                  color="blue darken-1"
+                  text
+                  @click="addItem()"
+                  class="ml-4"
+                  >{{ $ay.t("New") }}</v-btn
+                >
+
+                <v-btn
+                  color="blue darken-1"
+                  text
+                  @click="editItemDialog = false"
+                  class="ml-4"
+                  >{{ $ay.t("OK") }}</v-btn
+                >
+              </template>
+              <template v-else>
+                <!-- MOBILE FORMAT -->
+                <v-row>
+                  <v-btn
+                    class="mt-4"
+                    block
+                    text
+                    color="blue darken-1"
+                    @click="editItemDialog = false"
+                    >{{ $ay.t("OK") }}</v-btn
+                  >
+                  <v-btn
+                    class="mt-4"
+                    block
+                    text
+                    color="blue darken-1"
+                    @click="addItem()"
+                    >{{ $ay.t("New") }}</v-btn
+                  >
+
+                  <v-btn
+                    class="mt-8 mb-6"
+                    block
+                    text
+                    color="red darken-1"
+                    @click="deleteItem()"
+                    >{{ $ay.t("Delete") }}</v-btn
+                  >
+                </v-row>
+              </template>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
   </div>
 </template>
 
@@ -147,7 +304,10 @@ export default {
         serverError: {}
       },
       rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.TaskGroup
+      ayaType: window.$gz.type.TaskGroup,
+      selectedItem: null,
+      editItemDialog: false,
+      editItemIndex: 0
     };
   },
   //WATCHERS
@@ -195,6 +355,9 @@ export default {
     form() {
       return window.$gz.form;
     },
+    thisVm() {
+      return this;
+    },
     fieldValueChanged(ref) {
       if (
         this.formState.ready &&
@@ -352,6 +515,20 @@ export default {
       }
     }
     //end methods
+  },
+  computed: {
+    itemList: function() {
+      return this.obj.items
+        .map((x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            sequence: x.sequence,
+            task: x.task
+          };
+        })
+        .sort((a, b) => a.sequence - b.sequence);
+    }
   }
 };
 
@@ -460,7 +637,9 @@ async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "TaskGroupName",
     "TaskGroupNotes",
-    "Task"
+    "Task",
+    "TaskList",
+    "Sequence"
   ]);
 }
 </script>