Minor: Format code

assets/vue/views/documents/List.vue

@@ -89,22 +89,36 @@
   <!--        </template>-->
   <!--      </q-table>-->
   <!--  </div>-->
-  <div v-if="isAuthenticated && isCurrentTeacher"  class="q-card">
+  <div
+    v-if="isAuthenticated && isCurrentTeacher"
+    class="q-card"
+  >
     <div class="p-4 flex flex-row gap-1 mb-2">
       <div class="flex flex-row gap-2">
         <!--         <Button label="New" icon="pi pi-plus" class="p-button-primary p-button-sm p-mr-2" @click="openNew" />-->
-        <Button class="btn btn--primary" @click="openNew">
+        <Button
+          class="btn btn--primary"
+          @click="openNew"
+        >
           <v-icon icon="mdi-folder-plus" />
           {{ $t('New folder') }}
         </Button>
 
         <!--         <Button label="New folder" icon="pi pi-plus" class="p-button-success p-mr-2" @click="addHandler()" />-->
         <!--         <Button label="New document" icon="pi pi-plus" class="p-button-sm p-button-primary p-mr-2" @click="addDocumentHandler()" />-->
-        <Button label="{{ $t('New document') }}" class="btn btn--primary" @click="addDocumentHandler()" >
+        <Button
+          class="btn btn--primary"
+          label="{{ $t('New document') }}"
+          @click="addDocumentHandler()"
+        >
           <v-icon icon="mdi-file-plus" />
           {{ $t('New document') }}
         </Button>
-        <Button label="{{ $t('Upload') }}" class="btn btn--primary" @click="uploadDocumentHandler()">
+        <Button
+          class="btn btn--primary"
+          label="{{ $t('Upload') }}"
+          @click="uploadDocumentHandler()"
+        >
           <v-icon icon="mdi-file-upload" />
           {{ $t('Upload') }}
         </Button>
@@ -114,7 +128,12 @@
           {{ $t('Download') }}
         </Button>
         -->
-        <Button label="{{ $t('Delete selected') }}" class="btn btn--danger " @click="confirmDeleteMultiple" :disabled="!selectedItems || !selectedItems.length">
+        <Button
+          :disabled="!selectedItems || !selectedItems.length"
+          class="btn btn--danger "
+          label="{{ $t('Delete selected') }}"
+          @click="confirmDeleteMultiple"
+        >
           <v-icon icon="mdi-delete" />
           {{ $t('Delete selected') }}
         </Button>
@@ -134,30 +153,38 @@
   <!--  :scrollable="true"-->
   <!--  scrollHeight="height:100%"-->
   <DataTable
-      class="p-datatable-sm"
-      :value="items"
-      v-model:selection="selectedItems"
-      dataKey="iid"
     v-model:filters="filters"
-      filterDisplay="menu"
+    v-model:selection="selectedItems"
+    :global-filter-fields="['resourceNode.title', 'resourceNode.updatedAt']"
     :lazy="true"
+    :loading="isLoading"
     :paginator="true"
     :rows="10"
-      :totalRecords="totalItems"
+    :rows-per-page-options="[5, 10, 20, 50]"
-      :loading="isLoading"
+    :total-records="totalItems"
+    :value="items"
+    class="p-datatable-sm"
+    current-page-report-template="Showing {first} to {last} of {totalRecords}"
+    data-key="iid"
+    filter-display="menu"
+    paginator-template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
+    responsive-layout="scroll"
     @page="onPage($event)"
     @sort="sortingChanged($event)"
-      paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
+  >
-      :rowsPerPageOptions="[5, 10, 20, 50]"
-      responsiveLayout="scroll"
-      currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
-      :globalFilterFields="['resourceNode.title', 'resourceNode.updatedAt']">
-
     <span v-if="isCurrentTeacher">
-      <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
+      <Column
+        :exportable="false"
+        selection-mode="multiple"
+        style="width: 3rem"
+      />
     </span>
 
-    <Column field="resourceNode.title" :header="$t('Title')" :sortable="true">
+    <Column
+      :header="$t('Title')"
+      :sortable="true"
+      field="resourceNode.title"
+    >
       <template #body="slotProps">
         <div v-if="slotProps.data && slotProps.data.resourceNode && slotProps.data.resourceNode.resourceFile">
           <ResourceFileLink :resource="slotProps.data" />
@@ -165,8 +192,9 @@
         <div v-else>
           <a
             v-if="slotProps.data"
+            class="cursor-pointer "
             @click="handleClick(slotProps.data)"
-              class="cursor-pointer " >
+          >
             <v-icon icon="mdi-folder" />
             {{ slotProps.data.resourceNode.title }}
           </a>
@@ -189,7 +217,11 @@
       <!--      </template>-->
     </Column>
 
-    <Column field="resourceNode.resourceFile.size" :header="$t('Size')" :sortable="true">
+    <Column
+      :header="$t('Size')"
+      :sortable="true"
+      field="resourceNode.resourceFile.size"
+    >
       <template #body="slotProps">
         {{
           slotProps.data.resourceNode.resourceFile ? $filters.prettyBytes(slotProps.data.resourceNode.resourceFile.size) : ''
@@ -197,7 +229,11 @@
       </template>
     </Column>
 
-    <Column field="resourceNode.updatedAt" :header="$t('Modified')" :sortable="true">
+    <Column
+      :header="$t('Modified')"
+      :sortable="true"
+      field="resourceNode.updatedAt"
+    >
       <template #body="slotProps">
         {{ $filters.relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
       </template>
@@ -206,20 +242,41 @@
     <Column :exportable="false">
       <template #body="slotProps">
         <div class="flex flex-row gap-2">
-          <Button class="btn btn--primary" @click="showHandler(slotProps.data)">
+          <Button
+            class="btn btn--primary"
+            @click="showHandler(slotProps.data)"
+          >
             <v-icon icon="mdi-information" />
           </Button>
 
-          <Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn--primary" @click="changeVisibilityHandler(slotProps.data, slotProps)">
+          <Button
-            <v-icon v-if="RESOURCE_LINK_PUBLISHED === slotProps.data.resourceLinkListFromEntity[0].visibility" icon="mdi-eye"/>
+            v-if="isAuthenticated && isCurrentTeacher"
-            <v-icon v-if="RESOURCE_LINK_DRAFT === slotProps.data.resourceLinkListFromEntity[0].visibility" icon="mdi-eye-off"/>
+            class="btn btn--primary"
+            @click="changeVisibilityHandler(slotProps.data, slotProps)"
+          >
+            <v-icon
+              v-if="RESOURCE_LINK_PUBLISHED === slotProps.data.resourceLinkListFromEntity[0].visibility"
+              icon="mdi-eye"
+            />
+            <v-icon
+              v-if="RESOURCE_LINK_DRAFT === slotProps.data.resourceLinkListFromEntity[0].visibility"
+              icon="mdi-eye-off"
+            />
           </Button>
 
-          <Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn--primary p-mr-2" @click="editHandler(slotProps.data)">
+          <Button
+            v-if="isAuthenticated && isCurrentTeacher"
+            class="btn btn--primary p-mr-2"
+            @click="editHandler(slotProps.data)"
+          >
             <v-icon icon="mdi-pencil" />
           </Button>
 
-          <Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn--danger" @click="confirmDeleteItem(slotProps.data)" >
+          <Button
+            v-if="isAuthenticated && isCurrentTeacher"
+            class="btn btn--danger"
+            @click="confirmDeleteItem(slotProps.data)"
+          >
             <v-icon icon="mdi-delete" />
           </Button>
         </div>
@@ -234,45 +291,100 @@
     <!--    </template>-->
   </DataTable>
 
-  <Dialog v-model:visible="itemDialog" :style="{width: '450px'}" :header="$t('New folder')" :modal="true" class="p-fluid">
+  <Dialog
+    v-model:visible="itemDialog"
+    :header="$t('New folder')"
+    :modal="true"
+    :style="{width: '450px'}"
+    class="p-fluid"
+  >
     <div class="p-field">
       <label for="name">{{ $t('Name') }}</label>
       <InputText
-          autocomplete="off"
         id="title"
         v-model.trim="item.title"
-          required="true"
-          autofocus
         :class="{'p-invalid': submitted && !item.title}"
+        autocomplete="off"
+        autofocus
+        required="true"
       />
-      <small class="p-error" v-if="submitted && !item.title">$t('Title is required')</small>
+      <small
+        v-if="submitted && !item.title"
+        class="p-error"
+      >$t('Title is required')</small>
     </div>
 
     <template #footer>
-      <Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/>
+      <Button
-      <Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveItem" />
+        class="p-button-text"
+        icon="pi pi-times"
+        label="Cancel"
+        @click="hideDialog"
+      />
+      <Button
+        class="p-button-text"
+        icon="pi pi-check"
+        label="Save"
+        @click="saveItem"
+      />
     </template>
   </Dialog>
 
-  <Dialog v-model:visible="deleteItemDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
+  <Dialog
+    v-model:visible="deleteItemDialog"
+    :modal="true"
+    :style="{width: '450px'}"
+    header="Confirm"
+  >
     <div class="confirmation-content">
-      <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+      <i
+        class="pi pi-exclamation-triangle p-mr-3"
+        style="font-size: 2rem"
+      />
       <span v-if="item">Are you sure you want to delete <b>{{ item.title }}</b>?</span>
     </div>
     <template #footer>
-      <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteItemDialog = false"/>
+      <Button
-      <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteItemButton" />
+        class="p-button-text"
+        icon="pi pi-times"
+        label="No"
+        @click="deleteItemDialog = false"
+      />
+      <Button
+        class="p-button-text"
+        icon="pi pi-check"
+        label="Yes"
+        @click="deleteItemButton"
+      />
     </template>
   </Dialog>
 
-  <Dialog v-model:visible="deleteMultipleDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
+  <Dialog
+    v-model:visible="deleteMultipleDialog"
+    :modal="true"
+    :style="{width: '450px'}"
+    header="Confirm"
+  >
     <div class="confirmation-content">
-      <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+      <i
+        class="pi pi-exclamation-triangle p-mr-3"
+        style="font-size: 2rem"
+      />
       <span v-if="item">{{ $t('Are you sure you want to delete the selected items?') }}</span>
     </div>
     <template #footer>
-      <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteMultipleDialog = false"/>
+      <Button
-      <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteMultipleItems" />
+        class="p-button-text"
+        icon="pi pi-times"
+        label="No"
+        @click="deleteMultipleDialog = false"
+      />
+      <Button
+        class="p-button-text"
+        icon="pi pi-check"
+        label="Yes"
+        @click="deleteMultipleItems"
+      />
     </template>
   </Dialog>
 
@@ -316,33 +428,23 @@
   <!--            />-->
   <!--          </template>-->
   <!--        </q-table>-->
-
 </template>
 
 <script>
 import { mapActions, mapGetters, useStore } from 'vuex';
 import { mapFields } from 'vuex-map-fields';
 import ListMixin from '../../mixins/ListMixin';
-import ActionCell from '../../components/ActionCell.vue';
-//import Toolbar from '../../components/Toolbar.vue';
-import ResourceFileIcon from '../../components/documents/ResourceFileIcon.vue';
 import ResourceFileLink from '../../components/documents/ResourceFileLink.vue';
-import DataFilter from '../../components/DataFilter';
+import { RESOURCE_LINK_DRAFT, RESOURCE_LINK_PUBLISHED } from '../../components/resource_links/visibility';
-import DocumentsFilterForm from '../../components/documents/Filter';
+import isEmpty from 'lodash/isEmpty';
-import {RESOURCE_LINK_PUBLISHED, RESOURCE_LINK_DRAFT} from "../../components/resource_links/visibility";
+import toInteger from 'lodash/toInteger';
-import isEmpty from "lodash/isEmpty";
+import { useRoute } from 'vue-router';
-import toInteger from "lodash/toInteger";
-import {useRoute, useRouter} from "vue-router";
 
 export default {
   name: 'DocumentsList',
   servicePrefix: 'Documents',
   components: {
-    ActionCell,
-    ResourceFileIcon,
     ResourceFileLink,
-    DocumentsFilterForm,
-    DataFilter
   },
   mixins: [ListMixin],
   setup () {
@@ -397,32 +499,6 @@ export default {
       submitted: false,
     };
   },
-  mounted() {
-    this.filters['loadNode'] = 1;
-    this.onUpdateOptions(this.options);
-
-    // Detect when scrolled to bottom.
-    /*const listElm = document.querySelector('#documents');
-    listElm.addEventListener('scroll', e => {
-      console.log('aaa');
-      if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
-        this.onScroll();
-      }
-    });*/
-    //const tableScrollBody = this.$refs['selectableTable'].$el;
-    /* Consider debouncing the event call */
-    //tableScrollBody.addEventListener("scroll", this.onScroll);
-    //window.addEventListener('scroll', this.onScroll)
-    window.addEventListener('scroll', () =>{
-      /*if(window.top.scrollY > window.outerHeight){
-        if (!this.isBusy) {
-          this.fetchItems();
-        }
-      }*/
-    });
-    /*const tableScrollBody = this.$refs['documents'];
-    tableScrollBody.addEventListener("scroll", this.onScroll);*/
-  },
   computed: {
     // From crud.js list function
     ...mapGetters('resourcenode', {
@@ -450,6 +526,32 @@ export default {
       view: 'view'
     }),
   },
+  mounted () {
+    this.filters['loadNode'] = 1;
+    this.onUpdateOptions(this.options);
+
+    // Detect when scrolled to bottom.
+    /*const listElm = document.querySelector('#documents');
+    listElm.addEventListener('scroll', e => {
+      console.log('aaa');
+      if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
+        this.onScroll();
+      }
+    });*/
+    //const tableScrollBody = this.$refs['selectableTable'].$el;
+    /* Consider debouncing the event call */
+    //tableScrollBody.addEventListener("scroll", this.onScroll);
+    //window.addEventListener('scroll', this.onScroll)
+    window.addEventListener('scroll', () => {
+      /*if(window.top.scrollY > window.outerHeight){
+        if (!this.isBusy) {
+          this.fetchItems();
+        }
+      }*/
+    });
+    /*const tableScrollBody = this.$refs['documents'];
+    tableScrollBody.addEventListener("scroll", this.onScroll);*/
+  },
   methods: {
     // prime
     onPage (event) {
@@ -483,8 +585,7 @@ export default {
       this.submitted = true;
 
       if (this.item.title.trim()) {
-        if (this.item.id) {
+        if (!this.item.id) {
-        } else {
           this.item.filetype = 'folder';
           this.item.parentResourceNodeId = this.$route.params.node;
           this.item.resourceLinkList = JSON.stringify([{
@@ -563,13 +664,13 @@ export default {
       return true;
     },
     onRowSelected (items) {
-      this.selected = items
+      this.selected = items;
     },
     selectAllRows () {
-      this.$refs.selectableTable.selectAllRows()
+      this.$refs.selectableTable.selectAllRows();
     },
     clearSelected () {
-      this.$refs.selectableTable.clearSelected()
+      this.$refs.selectableTable.clearSelected();
     },
     async deleteSelected () {
       console.log('deleteSelected');