Merge remote-tracking branch 'origin/master'

ui/src/pages/CustomerBalanceList.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page v-if="canReadFinance" class="q-pa-md page-layout">
-    <div class="filter-sticky">
-      <div class="top-actions row q-col-gutter-sm items-end q-mb-sm">
+    <div class="filter-sticky" :class="{ collapsed: filtersCollapsed }">
+      <div class="top-actions row q-col-gutter-sm items-end q-mb-sm" :class="{ 'single-line': filtersCollapsed }">
         <div class="col-12 col-sm-6 col-md-2">
           <q-input
             v-model="store.filters.selectedDate"
@@ -59,7 +59,8 @@
         </div>
       </div>
 
-      <div class="filters-panel q-pa-sm q-mb-md">
+      <q-slide-transition>
+        <div v-show="!filtersCollapsed" class="filters-panel q-pa-sm q-mb-md">
         <div class="row q-col-gutter-sm">
           <div class="col-12 col-sm-6 col-md-4">
             <q-input
@@ -358,7 +359,8 @@
             </q-select>
           </div>
         </div>
-      </div>
+        </div>
+      </q-slide-transition>
 
       <q-banner v-if="store.error" class="bg-red-1 text-negative q-mb-md rounded-borders">
         {{ store.error }}
@@ -408,6 +410,13 @@
             label="Excel"
             @click="downloadCustomerBalanceExcel"
           />
+          <q-btn
+            flat
+            color="primary"
+            :icon="filtersCollapsed ? 'unfold_more' : 'unfold_less'"
+            :label="filtersCollapsed ? 'Filtreleri Genişlet' : 'Filtreleri Daralt'"
+            @click="toggleFiltersCollapsed"
+          />
         </div>
       </div>
 
@@ -501,6 +510,7 @@
         </template>
       </q-table>
     </div>
+
   </q-page>
 
   <q-page v-else class="q-pa-md flex flex-center">
@@ -520,6 +530,7 @@ import { download, extractApiErrorDetail } from 'src/services/api'
 const store = useCustomerBalanceListStore()
 const expanded = ref({})
 const allDetailsOpen = ref(false)
+const filtersCollapsed = ref(false)
 const $q = useQuasar()
 
 const { canRead, canExport } = usePermission()
@@ -643,6 +654,10 @@ function onToggle13Changed (val) {
   }
 }
 
+function toggleFiltersCollapsed () {
+  filtersCollapsed.value = !filtersCollapsed.value
+}
+
 
 function toggleGroup (key) {
   expanded.value[key] = !expanded.value[key]
@@ -844,6 +859,28 @@ function formatRowPrBr (row, tip) {
   padding-bottom: 6px;
 }
 
+.filter-sticky.collapsed {
+  padding-bottom: 0;
+}
+
+.top-actions.single-line {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  padding-bottom: 4px;
+}
+
+.top-actions.single-line > [class*='col-'],
+.top-actions.single-line > .col-auto {
+  flex: 0 0 auto;
+  min-width: 220px;
+}
+
+.top-actions.single-line > .col-auto {
+  min-width: auto;
+}
+
 .filters-panel {
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 8px;