Documents: Fix ui

assets/css/app.scss

@@ -40,7 +40,7 @@
 //@import "~bootstrap-select/sass/bootstrap-select";
 //@import '~pretty-checkbox/src/pretty-checkbox.scss';
 //@import '~jquery-ui/themes/base/all.css';
-/*
+
 @layer components {
   .card {
     @apply bg-white rounded shadow-lg;
@@ -62,6 +62,10 @@
     @apply text-white bg-blue-700 hover:bg-blue-800;
   }
 
+  .btn-success {
+    @apply text-white bg-green-700 hover:bg-green-800;
+  }
+
   .btn-danger {
     @apply text-white bg-red-700 hover:bg-red-800;
   }
@@ -135,7 +139,7 @@
   }
 
   @import "scss/index.scss";
-}*/
+}
 
 a.router-link-exact-active {
   //@apply border-b-2 bg-gray-100 border-gray-500 text-gray-500 rounded-t;

assets/vue/components/ActionCell.vue

@@ -1,7 +1,10 @@
 <template>
-  <q-td slot="body-cell-action" auto-width>
+<!--  auto-width-->
+  <q-td slot="body-cell-action" >
+    <div class="p-4 flex flex-row gap-1">
       <q-btn
           v-if="handleShow"
+          no-caps
           dense
           color="secondary"
           @click="handleShow"
@@ -9,6 +12,7 @@
       />
       <q-btn
           v-if="handleEdit"
+          no-caps
              dense
              color="secondary"
              @click="handleEdit"
@@ -16,6 +20,7 @@
       />
       <q-btn
           v-if="handleDelete"
+          no-caps
           label="Delete"
           dense
           color="red"
@@ -27,6 +32,7 @@
           :handle-delete="handleDelete"
           :handle-cancel="() => (confirmDeleteClick = false)"
       />
+    </div>
   </q-td>
 </template>
 

assets/vue/components/Toolbar.vue

@@ -1,8 +1,8 @@
 <template>
-  <q-toolbar class="q-my-md">
+  <div class="q-card">
     <slot name="left" />
-    <q-space />
-
+<!--    <q-space />-->
+    <div class="p-4 flex flex-row gap-1">
       <q-btn
         v-if="handleList"
         :loading="isLoading"
@@ -12,10 +12,12 @@
       >
         {{ $t('List') }}
       </q-btn>
+
       <q-btn
         v-if="handleEdit"
+        no-caps
+        class="btn btn-primary"
         :loading="isLoading"
-      color="primary"
         @click="editItem"
         unelevated
       >
@@ -24,8 +26,9 @@
 
       <q-btn
         v-if="handleSubmit"
+        no-caps
+        class="btn btn-primary"
         :loading="isLoading"
-      color="primary"
         @click="submitItem"
         unelevated
       >
@@ -42,33 +45,40 @@
       <!--      </v-btn>-->
       <q-btn
         v-if="handleDelete"
-      color="red"
+        no-caps
+        class="btn btn-danger"
         unelevated
-      class="ml-sm-2"
         @click="confirmDelete = true"
       >
         {{ $t('Delete') }}
       </q-btn>
 
+
+<!--      color="primary"-->
+
       <q-btn
         v-if="handleAdd"
-      color="primary"
+        no-caps
+        class="btn btn-primary"
         @click="addItem"
       >
-      <font-awesome-icon icon="folder-plus" /> New folder
+        <font-awesome-icon icon="folder-plus" />
+        New folder
       </q-btn>
 
       <q-btn
+        no-caps
+        class="btn btn-primary"
         v-if="handleAddDocument"
-      color="primary"
         @click="addDocument"
       >
         <font-awesome-icon icon="file-alt" /> New document
       </q-btn>
 
       <q-btn
+        no-caps
+        class="btn btn-primary"
         v-if="handleUploadDocument"
-      color="primary"
         @click="uploadDocument"
       >
         <font-awesome-icon icon="cloud-upload-alt" /> File upload
@@ -92,7 +102,8 @@
         :handle-delete="handleDelete"
         @close="confirmDelete = false"
       />
-  </q-toolbar>
+    </div>
+  </div>
 </template>
 
 <script>

assets/vue/components/documents/Form.vue

@@ -1,15 +1,13 @@
 <template>
-
+<!--  @input="$v.item.title.$touch()"-->
+<!--  @blur="$v.item.title.$touch()"-->
         <q-input
           id="item_title"
           v-model="item.title"
           :error-messages="titleErrors"
           :placeholder="$t('Title')"
           required
-          @input="$v.item.title.$touch()"
-          @blur="$v.item.title.$touch()"
         />
-
 </template>
 
 <script>
@@ -45,16 +43,15 @@ export default {
     };
   },
   computed: {
-    // eslint-disable-next-line
     item() {
       return this.initialValues || this.values;
     },
     titleErrors() {
       const errors = [];
 
-      if (!this.$v.item.title.$dirty) return errors;
+      /*if (!this.$v.item.title.$dirty) return errors;
       has(this.violations, 'title') && errors.push(this.violations.title);
-      !this.$v.item.title.required && errors.push(this.$t('Field is required'));
+      !this.$v.item.title.required && errors.push(this.$t('Field is required'));*/
 
       return errors;
     },

assets/vue/hooks/useState.js

@@ -5,11 +5,9 @@ const toggleSidebar = () => {
   isSidebarOpen.value = !isSidebarOpen.value
 }
 
-const isSettingsPanelOpen = ref(false)
-
-const isSearchPanelOpen = ref(false)
-
-const isNotificationsPanelOpen = ref(false)
+const isSettingsPanelOpen = ref(false);
+const isSearchPanelOpen = ref(false);
+const isNotificationsPanelOpen = ref(false);
 
 export default function useState() {
   return {

assets/vue/mixins/ListMixin.js

@@ -15,7 +15,7 @@ export default {
         sortBy: 'resourceNode.title',
         descending: false,
         page: 1, // page to be displayed
-        rowsPerPage: 3, // maximum displayed rows
+        rowsPerPage: 10, // maximum displayed rows
         rowsNumber: 10, // max number of rows
       },
       nextPage: null,
@@ -26,7 +26,7 @@ export default {
         //sortBy: [], vuetify
         //sortDesc: [], , vuetify
         page: 1,
-        itemsPerPage: 3
+        itemsPerPage: 10
       },
       //filters: {}
     };
@@ -70,6 +70,9 @@ export default {
       const filter = props.filter;
 
       this.nextPage = page;
+      if (isEmpty(this.nextPage)) {
+        this.nextPage = 1;
+      }
 
       let params = {};
       if (itemsPerPage > 0) {
@@ -133,12 +136,14 @@ export default {
 
     onSendFilter() {
       this.resetList = true;
-      this.onUpdateOptions(this.options);
+      this.pagination.page = 1;
+      this.onRequest({pagination: this.pagination})
     },
 
     resetFilter() {
       this.filters = {};
-      this.onUpdateOptions(this.options);
+      this.pagination.page = 1;
+      this.onRequest({pagination: this.pagination})
     },
 
     addHandler() {
@@ -216,7 +221,10 @@ export default {
     },
     deleteHandler(item) {
       console.log(item);
-      this.deleteItem(item).then(() => this.onUpdateOptions(this.options));
+      this.pagination.page = 1;
+      this.deleteItem(item).then(() =>
+          this.onRequest({pagination: this.pagination})
+      );
     },
     formatDateTime
   }

assets/vue/store/index.js

@@ -2,9 +2,9 @@ import { createStore, createLogger } from "vuex";
 import notifications from './modules/notifications';
 import SecurityModule from "./security";
 import createPersistedState from "vuex-persistedstate";
-
+//createLogger(),
 export default createStore({
-    plugins: [createLogger(), createPersistedState()],
+    plugins: [createPersistedState()],
     modules: {
         notifications,
         security: SecurityModule,

assets/vue/store/modules/crud.js

@@ -94,7 +94,6 @@ export default function makeCrudModule({
           .catch(e => handleError(commit, e));
       },
       del: ({ commit }, item) => {
-
         console.log('del');
         commit(ACTIONS.TOGGLE_LOADING);
 

assets/vue/utils/fetch.js

@@ -52,7 +52,6 @@ export default function(id, options = {}) {
             .join('&');
         id = `${id}?${queryString}`;
 
-
         console.log(id, 'id');
     }
 
@@ -124,6 +123,8 @@ export default function(id, options = {}) {
     }*/
 
   return global.fetch(new URL(id, entryPoint), options).then(response => {
+    console.log(response);
+
     if (response.ok) return response;
 
     return response.json().then(json => {

assets/vue/views/documents/List.vue

@@ -1,5 +1,4 @@
 <template>
-   <div class="q-pa-md">
   <Toolbar
      :handle-add="addHandler"
      :handle-add-document="addDocumentHandler"
@@ -11,7 +10,6 @@
 
     <q-table
         dense
-          flat
         :rows="items"
         :columns="columns"
         row-key="@id"
@@ -22,6 +20,7 @@
         :no-results-label="$t('No results')"
         :loading-label="$t('Loading...')"
         :rows-per-page-label="$t('Records per page:')"
+        :rows-per-page-options="[10, 20, 50, 0]"
         :loading="isLoading"
         selection="multiple"
         v-model:selected="selectedItems"
@@ -75,7 +74,7 @@
           </q-tr>
         </template>
       </q-table>
-   </div>
+
 </template>
 
 <script>
@@ -87,12 +86,8 @@ import Toolbar from '../../components/Toolbar.vue';
 import ResourceFileIcon from './ResourceFileIcon.vue';
 import { useRoute } from 'vue-router'
 
-//import { useToast } from 'primevue/usetoast';
 import { ref, reactive, onMounted, computed } from 'vue';
 import { useStore } from 'vuex';
-/*const servicePrefix = 'documents';
-const { getters, actions } = list(servicePrefix);*/
-
 import isEmpty from 'lodash/isEmpty';
 
 export default {
@@ -114,7 +109,7 @@ export default {
         {name: 'resourceNode.resourceFile.size', label: this.$i18n.t('Size'), field: 'resourceNode.resourceFile.size', sortable: true},
         {name: 'action', label: this.$i18n.t('Actions'), field: 'action', sortable: false}
       ],
-      pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
+      //pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
       selected: [],
       isBusy: false,
       options: [],