refactoring: update severals components

src/components/AdminCategoriesCustom.vue

@@ -16,73 +16,86 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div>
-    <ul class="side-menu-setting-list" :class="{hide: values.length === 0}">
-      <li v-for="item in values" class="side-menu-setting-list-item" v-on:click="showEditForm(item)">
-        <span v-text="item.en"></span>
+    <ul
+      class="side-menu-setting-list"
+      :class="{ hide: values.length === 0 }"
+    >
+      <li
+        v-for="(item, key) in values"
+        :key="key"
+        class="side-menu-setting-list-item"
+        @click="showEditForm(item)"
+      >
+        {{ item.en }}
       </li>
     </ul>
 
     <NcActions>
-      <NcActionButton @click="showAddForm" icon="icon-add"></NcActionButton>
+      <NcActionButton
+        icon="icon-add"
+        @click="showAddForm"
+      ></NcActionButton>
     </NcActions>
 
-    <NcModal v-if="addForm" @close="hideAddForm">
+    <NcModal
+      v-if="addForm"
+      @close="hideAddForm"
+    >
       <div class="modal__content">
-        <div v-for="lang in langs">
-          <span class="lang" v-text="lang"></span>
-          <input type="text" v-model="newValue[lang]" required style="width: calc(100% - 100px)">
+        <div v-for="(lang, key) in langs" :key="key">
+          <span class="lang">{{ lang }}</span>
+          <input
+            v-model="newValue[lang]"
+            type="text"
+            required
+            style="width: calc(100% - 100px)"
+          />
         </div>
 
         <NcActions>
-          <NcActionButton @click="saveAdd" icon="icon-checkmark"></NcActionButton>
+          <NcActionButton
+            icon="icon-checkmark"
+            @click="saveAdd"
+          ></NcActionButton>
         </NcActions>
       </div>
     </NcModal>
 
-    <NcModal v-if="editForm" @close="hideEditForm">
+    <NcModal
+      v-if="editForm"
+      @close="hideEditForm"
+    >
       <div class="modal__content">
-        <div v-for="lang in langs">
-          <span class="lang" v-text="lang"></span>
-          <input type="text" v-model="editValue[lang]" required style="width: calc(100% - 100px)">
+        <div v-for="(lang, key) in langs" :key="key">
+          <span class="lang">{{ lang }}</span>
+          <input
+            v-model="editValue[lang]"
+            type="text"
+            required
+            style="width: calc(100% - 100px)"
+          />
         </div>
 
         <div class="pull-right">
           <NcActions>
-            <NcActionButton @click="removeEdit" icon="icon-delete"></NcActionButton>
+            <NcActionButton
+              icon="icon-delete"
+              @click="removeEdit"
+            ></NcActionButton>
           </NcActions>
         </div>
 
         <NcActions>
-          <NcActionButton @click="saveEdit" icon="icon-checkmark"></NcActionButton>
+          <NcActionButton
+            icon="icon-checkmark"
+            @click="saveEdit"
+          ></NcActionButton>
         </NcActions>
       </div>
     </NcModal>
   </div>
 </template>
 
-<style>
-.modal__content {
-  padding: 10px;
-}
-
-.modal__content .lang {
-  width: 60px;
-  display: inline-block;
-  padding: 4px;
-  box-sizing: border-box;
-}
-
-.pull-right {
-  float: right;
-}
-</style>
-
-<style scoped>
-.hide {
-  display: none;
-}
-</style>
-
 <script>
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
@@ -106,6 +119,10 @@ export default {
       editValue: {},
     }
   },
+  mounted() {
+    this.input = document.querySelector('input[name="categories-custom"]')
+    this.init()
+  },
   methods: {
     init() {
       this.values = JSON.parse(this.input.value)
@@ -115,12 +132,12 @@ export default {
       this.input.value = JSON.stringify(this.values)
     },
     showAddForm() {
-      this.newValue = {id: 'cat' + Math.random().toString().replace('0.', '')}
+      this.newValue = { id: 'cat' + Math.random().toString().replace('0.', '') }
 
       this.addForm = true
     },
     showEditForm(value) {
-      this.editValue = {id: value.id}
+      this.editValue = { id: value.id }
 
       for (let i of this.langs) {
         this.editValue[i] = typeof value[i] !== 'undefined' ? value[i] : ''
@@ -159,7 +176,7 @@ export default {
     removeEdit() {
       for (let i in this.values) {
         if (this.values[i].id === this.editValue.id) {
-          this.values.splice(i, 1);
+          this.values.splice(i, 1)
         }
       }
 
@@ -173,9 +190,28 @@ export default {
       this.editForm = false
     },
   },
-  mounted() {
-    this.input = document.querySelector('input[name="categories-custom"]')
-    this.init()
-  }
 }
 </script>
+
+<style>
+.modal__content {
+  padding: 10px;
+}
+
+.modal__content .lang {
+  width: 60px;
+  display: inline-block;
+  padding: 4px;
+  box-sizing: border-box;
+}
+
+.pull-right {
+  float: right;
+}
+</style>
+
+<style scoped>
+.hide {
+  display: none;
+}
+</style>