feat: add and/all and or/any function to excluded tags in notificatio…

…n rules
gapitio · Nov 26, 2024 · a1f2be8 · a1f2be8
1 parent c5a80fa
commit a1f2be8
Showing 1 changed file with 123 additions and 41 deletions.
diff --git a/src/components/NotificationRuleList.vue b/src/components/NotificationRuleList.vue
@@ -578,32 +578,84 @@
                 </v-flex>
 
                 <v-flex xs12>
-                  <v-combobox
-                    v-model="editedItem.excludedTags"
-                    :items="currentTags"
-                    :label="$t('Excluded Tags')"
-                    multiple
-                    chips
-                  >
-                    <template
-                      slot="selection"
-                      slot-scope="data"
-                    >
-                      <v-chip
-                        :key="JSON.stringify(data.item)"
-                        :selected="data.selected"
-                        :disabled="data.disabled"
-                        class="v-chip--select-multi"
-                        label
-                        small
-                        @input="data.parent.selectItem(data.item)"
+                  <v-card>
+                    <v-toolbar>
+                      <v-toolbar-title>Excluded Tags</v-toolbar-title>
+
+                      <v-spacer />
+
+                      <v-btn
+                        icon
+                        @click="
+                          editedItem.excludedTags = [...editedItem.excludedTags, { all: [], any: []}]
+                        "
+                      >
+                        add
+                        <v-icon>add</v-icon>
+                      </v-btn>
+                      <v-spacer />
+
+                      <v-btn
+                        icon
+                        @click="editedItem.excludedTags = []"
                       >
-                        <v-icon left>
-                          label
-                        </v-icon>{{ data.item }}
-                      </v-chip>
-                    </template>
-                  </v-combobox>
+                        clear
+                        <v-icon>
+                          clear
+                        </v-icon>
+                      </v-btn>
+                    </v-toolbar>
+                    <v-container>
+                      <v-layout
+                        v-for="(tag, index) in editedItem.excludedTags"
+                        :key="index"
+                        wrap
+                        xs12
+                      >
+                        <v-flex xs10>
+                          <v-layout> 
+                            <v-flex xs6>
+                              <v-combobox 
+                                v-model="tag.all"
+                                v-tooltip="'start'"
+                                :items="currentTags"
+                                :label="$t('AND')"
+                                tooltip="test"
+                                chips
+                                multiple
+                                xs4
+                              />
+                            </v-flex>
+                            <v-flex xs6>
+                              <v-combobox
+                                v-model="tag.any"
+                                :items="currentTags"
+                                :label="$t('OR')"
+                                chips
+                                multiple
+                              />
+                            </v-flex>         
+                          </v-layout>
+                        </v-flex>                                                 
+                        <v-flex 
+                          xs2
+                          align-self-center
+                        >
+                          <v-btn
+                            icon
+                            @click="
+                              editedItem.excludedTags.splice(index, 1)
+                            "
+                          >
+                            <v-icon>delete</v-icon>
+                          </v-btn>
+                        </v-flex>
+                        <v-flex>
+                          <v-divider />
+                        </v-flex>
+                      </v-layout>
+                    </v-container>
+                  </v-card>
                 </v-flex>
 
                 <v-flex xs12>
@@ -892,12 +944,12 @@
                   >
                     AND:
                     <v-chip
-                      v-for="severity in tag.all"
-                      :key="severity"
+                      v-for="t in tag.all"
+                      :key="t"
                       outline
                       small
                     >
-                      {{ severity }}
+                      {{ t }}
                     </v-chip>
                   </v-flex>
                   <v-flex 
@@ -906,12 +958,12 @@
                   >
                     OR:
                     <v-chip
-                      v-for="severity in tag.any"
-                      :key="severity"
+                      v-for="t in tag.any"
+                      :key="t"
                       outline
                       small
                     >
-                      {{ severity }}
+                      {{ t }}
                     </v-chip>
                   </v-flex>
                 </v-layout>
@@ -920,16 +972,46 @@
             </div>
           </td>
           <td>
-            <v-chip
-              v-for="tag in props.item.excludedTags"
-              :key="tag"
-              label
-              small
-            >
-              <v-icon left>
-                label
-              </v-icon>{{ tag }}
-            </v-chip>
+            <div style="margin: auto;">
+              <v-container
+                v-for="(tag, index) in props.item.excludedTags"
+                :key="index"
+                grid-list-md
+                style="padding: 1px;"
+              >
+                <v-layout>
+                  <v-flex 
+                    v-if="!emptyArray(tag.all)"
+                    xs12
+                  >
+                    AND:
+                    <v-chip
+                      v-for="t in tag.all"
+                      :key="t"
+                      outline
+                      small
+                    >
+                      {{ t }}
+                    </v-chip>
+                  </v-flex>
+                  <v-flex 
+                    v-if="!emptyArray(tag.any)"
+                    xs12 
+                  >
+                    OR:
+                    <v-chip
+                      v-for="t in tag.any"
+                      :key="t"
+                      outline
+                      small
+                    >
+                      {{ t }}
+                    </v-chip>
+                  </v-flex>
+                </v-layout>
+                <v-divider v-if="index < props.item.excludedTags.length - 1" />
+              </v-container>
+            </div>
           </td>
           <td class="text-xs-left">
             {{ props.item.user }}