From 4865bf77be4bced94da9c7c278c9f3ebfdacee8d Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Sun, 1 May 2022 16:35:58 +0200
Subject: [PATCH] Fix v-if with v-for

---
 front/.eslintrc.js                        |   6 +-
 front/src/components/auth/Plugin.vue      | 125 +++++++-------
 front/src/components/library/EditCard.vue |   6 +-
 front/src/components/library/EditForm.vue | 201 +++++++++++-----------
 front/src/embed/EmbedFrame.vue            |  30 ++--
 5 files changed, 186 insertions(+), 182 deletions(-)

diff --git a/front/.eslintrc.js b/front/.eslintrc.js
index 7ee26a281..6cba3c57e 100644
--- a/front/.eslintrc.js
+++ b/front/.eslintrc.js
@@ -24,7 +24,6 @@ module.exports = {
   ],
   rules: {
     'vue/no-v-html': 'off', // TODO: tackle this properly
-    'vue/no-use-v-if-with-v-for': 'off',
 
     // NOTE: Handled by typescript
     'no-undef': 'off',
@@ -42,6 +41,9 @@ module.exports = {
 
     // TODO (wvffle): Migration to pinia
     //                Vuex 3 store does not have types defined, hence we use `any`
-    '@typescript-eslint/no-explicit-any': 'off'
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    // TODO (wvffle): Migrate to <script setup>
+    'vue/require-explicit-emits': 'off'
   }
 }
diff --git a/front/src/components/auth/Plugin.vue b/front/src/components/auth/Plugin.vue
index 573a052d1..8d2046047 100644
--- a/front/src/components/auth/Plugin.vue
+++ b/front/src/components/auth/Plugin.vue
@@ -72,75 +72,74 @@
         </translate>
       </div>
     </div>
-    <template
-      v-for="(field, key) in plugin.conf"
-      v-if="plugin.conf && plugin.conf.length > 0"
-    >
-      <div
-        v-if="field.type === 'text'"
-        :key="key"
-        class="field"
-      >
-        <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
-        <input
-          :id="`plugin-${field.name}`"
-          v-model="values[field.name]"
-          type="text"
+    <template v-if="plugin.conf?.length > 0">
+      <template v-for="(field, key) in plugin.conf">
+        <div
+          v-if="field.type === 'text'"
+          :key="key"
+          class="field"
         >
+          <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
+          <input
+            :id="`plugin-${field.name}`"
+            v-model="values[field.name]"
+            type="text"
+          >
+          <div
+            v-if="field.help"
+            v-html="markdown.makeHtml(field.help)"
+          />
+        </div>
         <div
-          v-if="field.help"
-          v-html="markdown.makeHtml(field.help)"
-        />
-      </div>
-      <div
-        v-if="field.type === 'long_text'"
-        :key="key"
-        class="field"
-      >
-        <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
-        <textarea
-          :id="`plugin-${field.name}`"
-          v-model="values[field.name]"
-          type="text"
-          rows="5"
-        />
-        <div
-          v-if="field.help"
-          v-html="markdown.makeHtml(field.help)"
-        />
-      </div>
-      <div
-        v-if="field.type === 'url'"
-        :key="key"
-        class="field"
-      >
-        <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
-        <input
-          :id="`plugin-${field.name}`"
-          v-model="values[field.name]"
-          type="url"
+          v-if="field.type === 'long_text'"
+          :key="key"
+          class="field"
         >
+          <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
+          <textarea
+            :id="`plugin-${field.name}`"
+            v-model="values[field.name]"
+            type="text"
+            rows="5"
+          />
+          <div
+            v-if="field.help"
+            v-html="markdown.makeHtml(field.help)"
+          />
+        </div>
         <div
-          v-if="field.help"
-          v-html="markdown.makeHtml(field.help)"
-        />
-      </div>
-      <div
-        v-if="field.type === 'password'"
-        :key="key"
-        class="field"
-      >
-        <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
-        <input
-          :id="`plugin-${field.name}`"
-          v-model="values[field.name]"
-          type="password"
+          v-if="field.type === 'url'"
+          :key="key"
+          class="field"
         >
+          <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
+          <input
+            :id="`plugin-${field.name}`"
+            v-model="values[field.name]"
+            type="url"
+          >
+          <div
+            v-if="field.help"
+            v-html="markdown.makeHtml(field.help)"
+          />
+        </div>
         <div
-          v-if="field.help"
-          v-html="markdown.makeHtml(field.help)"
-        />
-      </div>
+          v-if="field.type === 'password'"
+          :key="key"
+          class="field"
+        >
+          <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
+          <input
+            :id="`plugin-${field.name}`"
+            v-model="values[field.name]"
+            type="password"
+          >
+          <div
+            v-if="field.help"
+            v-html="markdown.makeHtml(field.help)"
+          />
+        </div>
+      </template>
     </template>
     <button
       type="submit"
diff --git a/front/src/components/library/EditCard.vue b/front/src/components/library/EditCard.vue
index 9149c8707..acf8d80d8 100644
--- a/front/src/components/library/EditCard.vue
+++ b/front/src/components/library/EditCard.vue
@@ -97,8 +97,7 @@
               </template>
               <template v-else>
                 <span
-                  v-for="(part, key) in field.diff"
-                  v-if="!part.added"
+                  v-for="(part, key) in field.diff.filter(p => !p.added)"
                   :key="key"
                   :class="['diff', {removed: part.removed}]"
                 >
@@ -125,8 +124,7 @@
               </template>
               <template v-else>
                 <span
-                  v-for="(part, key) in field.diff"
-                  v-if="!part.removed"
+                  v-for="(part, key) in field.diff.filter(p => !p.removed)"
                   :key="key"
                   :class="['diff', {added: part.added}]"
                 >
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index 68870b734..68813b262 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -95,108 +95,109 @@
           You don't have the permission to edit this object, but you can suggest changes. Once submitted, suggestions will be reviewed before approval.
         </translate>
       </div>
-      <div
-        v-for="fieldConfig in config.fields"
-        v-if="values"
-        :key="fieldConfig.id"
-        class="ui field"
-      >
-        <template v-if="fieldConfig.type === 'text'">
-          <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>
-          <input
-            :id="fieldConfig.id"
-            v-model="values[fieldConfig.id]"
-            :type="fieldConfig.inputType || 'text'"
-            :required="fieldConfig.required"
-            :name="fieldConfig.id"
-          >
-        </template>
-        <template v-else-if="fieldConfig.type === 'license'">
-          <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>
-
-          <select
-            :id="fieldConfig.id"
-            ref="license"
-            v-model="values[fieldConfig.id]"
-            :required="fieldConfig.required"
-            class="ui fluid search dropdown"
-          >
-            <option :value="null">
-              <translate translate-context="*/*/*">
-                N/A
-              </translate>
-            </option>
-            <option
-              v-for="license in licenses"
-              :key="license.code"
-              :value="license.code"
+      <template v-if="values">
+        <div
+          v-for="fieldConfig in config.fields"
+          :key="fieldConfig.id"
+          class="ui field"
+        >
+          <template v-if="fieldConfig.type === 'text'">
+            <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>
+            <input
+              :id="fieldConfig.id"
+              v-model="values[fieldConfig.id]"
+              :type="fieldConfig.inputType || 'text'"
+              :required="fieldConfig.required"
+              :name="fieldConfig.id"
             >
-              {{ license.name }}
-            </option>
-          </select>
-          <button
-            class="ui tiny basic left floated button"
-            form="noop"
-            @click.prevent="values[fieldConfig.id] = null"
-          >
-            <i class="x icon" />
-            <translate translate-context="Content/Library/Button.Label">
-              Clear
-            </translate>
-          </button>
-        </template>
-        <template v-else-if="fieldConfig.type === 'content'">
-          <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>
-          <content-form
-            v-model="values[fieldConfig.id].text"
-            :field-id="fieldConfig.id"
-            :rows="3"
-          />
-        </template>
-        <template v-else-if="fieldConfig.type === 'attachment'">
-          <attachment-input
-            :id="fieldConfig.id"
-            v-model="values[fieldConfig.id]"
-            :initial-value="initialValues[fieldConfig.id]"
-            :required="fieldConfig.required"
-            :name="fieldConfig.id"
-            @delete="values[fieldConfig.id] = initialValues[fieldConfig.id]"
-          >
-            <span>{{ fieldConfig.label }}</span>
-          </attachment-input>
-        </template>
-        <template v-else-if="fieldConfig.type === 'tags'">
-          <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>
-          <tags-selector
-            :id="fieldConfig.id"
-            ref="tags"
-            v-model="values[fieldConfig.id]"
-            required="fieldConfig.required"
-          />
-          <button
-            class="ui tiny basic left floated button"
-            form="noop"
-            @click.prevent="values[fieldConfig.id] = []"
-          >
-            <i class="x icon" />
-            <translate translate-context="Content/Library/Button.Label">
-              Clear
-            </translate>
-          </button>
-        </template>
-        <div v-if="fieldValuesChanged(fieldConfig.id)">
-          <button
-            class="ui tiny basic right floated reset button"
-            form="noop"
-            @click.prevent="resetField(fieldConfig.id)"
-          >
-            <i class="undo icon" />
-            <translate translate-context="Content/Library/Button.Label">
-              Reset to initial value
-            </translate>
-          </button>
+          </template>
+          <template v-else-if="fieldConfig.type === 'license'">
+            <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>
+
+            <select
+              :id="fieldConfig.id"
+              ref="license"
+              v-model="values[fieldConfig.id]"
+              :required="fieldConfig.required"
+              class="ui fluid search dropdown"
+            >
+              <option :value="null">
+                <translate translate-context="*/*/*">
+                  N/A
+                </translate>
+              </option>
+              <option
+                v-for="license in licenses"
+                :key="license.code"
+                :value="license.code"
+              >
+                {{ license.name }}
+              </option>
+            </select>
+            <button
+              class="ui tiny basic left floated button"
+              form="noop"
+              @click.prevent="values[fieldConfig.id] = null"
+            >
+              <i class="x icon" />
+              <translate translate-context="Content/Library/Button.Label">
+                Clear
+              </translate>
+            </button>
+          </template>
+          <template v-else-if="fieldConfig.type === 'content'">
+            <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>
+            <content-form
+              v-model="values[fieldConfig.id].text"
+              :field-id="fieldConfig.id"
+              :rows="3"
+            />
+          </template>
+          <template v-else-if="fieldConfig.type === 'attachment'">
+            <attachment-input
+              :id="fieldConfig.id"
+              v-model="values[fieldConfig.id]"
+              :initial-value="initialValues[fieldConfig.id]"
+              :required="fieldConfig.required"
+              :name="fieldConfig.id"
+              @delete="values[fieldConfig.id] = initialValues[fieldConfig.id]"
+            >
+              <span>{{ fieldConfig.label }}</span>
+            </attachment-input>
+          </template>
+          <template v-else-if="fieldConfig.type === 'tags'">
+            <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>
+            <tags-selector
+              :id="fieldConfig.id"
+              ref="tags"
+              v-model="values[fieldConfig.id]"
+              required="fieldConfig.required"
+            />
+            <button
+              class="ui tiny basic left floated button"
+              form="noop"
+              @click.prevent="values[fieldConfig.id] = []"
+            >
+              <i class="x icon" />
+              <translate translate-context="Content/Library/Button.Label">
+                Clear
+              </translate>
+            </button>
+          </template>
+          <div v-if="fieldValuesChanged(fieldConfig.id)">
+            <button
+              class="ui tiny basic right floated reset button"
+              form="noop"
+              @click.prevent="resetField(fieldConfig.id)"
+            >
+              <i class="undo icon" />
+              <translate translate-context="Content/Library/Button.Label">
+                Reset to initial value
+              </translate>
+            </button>
+          </div>
         </div>
-      </div>
+      </template>
       <div class="field">
         <label for="summary"><translate translate-context="*/*/*">Summary (optional)</translate></label>
         <textarea
diff --git a/front/src/embed/EmbedFrame.vue b/front/src/embed/EmbedFrame.vue
index 38042dc95..fcd6e28e1 100644
--- a/front/src/embed/EmbedFrame.vue
+++ b/front/src/embed/EmbedFrame.vue
@@ -189,8 +189,7 @@
       <table class="queue">
         <tbody>
           <tr
-            v-for="(track, index) in tracks"
-            v-if="track.sources.length > 0"
+            v-for="(track, index) in filteredTracks"
             :id="'queue-item-' + index"
             :key="index"
             role="button"
@@ -249,6 +248,7 @@ import axios from 'axios'
 import Logo from '~/components/Logo.vue'
 import updateQueryString from '~/composables/updateQueryString'
 import time from '~/utils/time'
+import { reactive, computed } from 'vue'
 
 function getURLParams () {
   let match
@@ -265,6 +265,12 @@ function getURLParams () {
 export default {
   name: 'App',
   components: { Logo },
+  setup () {
+    const tracks = reactive([])
+    const filteredTracks = computed(() => tracks.filter(track => track.sources.length > 0))
+
+    return { tracks, filteredTracks }
+  },
   data () {
     return {
       time,
@@ -273,7 +279,6 @@ export default {
       error: null,
       type: null,
       id: null,
-      tracks: [],
       autoplay: false,
       url: null,
       isLoading: true,
@@ -404,26 +409,25 @@ export default {
       })
     },
     fetchTrack (id) {
-      const self = this
       const url = `${this.baseUrl}/api/v1/tracks/${id}/`
-      axios.get(url).then(response => {
-        self.tracks = self.parseTracks([response.data])
-        self.isLoading = false
+      axios.get(url).then(() => {
+        this.tracks = this.parseTracks([response.data])
+        this.isLoading = false
       }).catch(error => {
         if (error.response) {
           if (error.response.status === 404) {
-            self.error = 'server_not_found'
+            this.error = 'server_not_found'
           } else if (error.response.status === 403) {
-            self.error = 'server_requires_auth'
+            this.error = 'server_requires_auth'
           } else if (error.response.status === 500) {
-            self.error = 'server_error'
+            this.error = 'server_error'
           } else {
-            self.error = 'server_unknown_error'
+            this.error = 'server_unknown_error'
           }
         } else {
-          self.error = 'server_unknown_error'
+          this.error = 'server_unknown_error'
         }
-        self.isLoading = false
+        this.isLoading = false
       })
     },
     fetchTracks (filters, path) {