feat(dashboard): improvments

frontend/js/components/dashboard/Capital.vue

@@ -13,7 +13,7 @@
         v-if="data.length > 0"
         :data="compute(data, precision, dateFrom, dateTo)"
         :options="options()"
-        :style="chartStyle(300)"
+        :style="chartStyle(380)"
       />
       <div v-else>Aucune donnée</div>
     </div>

frontend/js/components/dashboard/SavingAccounts.vue

@@ -5,7 +5,7 @@
       <Bar
         :data="compute(data)"
         :options="options()"
-        :style="chartStyle(300)"
+        :style="chartStyle(380)"
       />
     </div>
   </div>

frontend/js/views/DashboardView.vue

@@ -8,23 +8,21 @@
         categories.length > 0
       "
     >
-      <div class="d-flex">
-        <Filters
-          v-model:account="account"
-          v-model:date-from="dateFrom"
-          v-model:date-to="dateTo"
-          :accounts="accounts"
-          @update="refresh"
-        />
-
-        <div class="ms-auto">
-          <BButton @click="toggleMode()" variant="none">
-            <i class="fa-solid fa-gear"></i>
-          </BButton>
-        </div>
+      <div class="float-end">
+        <BButton @click="toggleMode()" variant="none">
+          <i class="fa-solid fa-gear"></i>
+        </BButton>
       </div>
 
-      <Draggable v-model="config" class="row" handle=".handle" @change="refresh()">
+      <Filters
+        v-model:account="account"
+        v-model:date-from="dateFrom"
+        v-model:date-to="dateTo"
+        :accounts="accounts"
+        @update="refresh"
+      />
+
+      <Draggable v-model="config" class="row" handle=".handle" @change="updateConfig()">
         <transition-group>
           <div
             v-for="(item, key) in config"
@@ -36,19 +34,18 @@
               v-if="mode === 'edit'"
               class="mb-3 d-flex justify-content-beetween"
             >
-              <BButton variant="none" size="sm" class="handle">
-                <i class="fa-solid fa-up-down-left-right"></i>
-              </BButton>
+              <i class="handle fa-solid fa-up-down-left-right"></i>
               <BButtonGroup size="sm" class="d-sm-none d-md-block">
                 <BButton
                   v-for="i in [
-                    {size: 3, label: '1'},
-                    {size: 6, label: '2'},
-                    {size: 9, label: '3'},
-                    {size: 12, label: '4'},
+                    {size: 4, label: '4'},
+                    {size: 6, label: '6'},
+                    {size: 8, label: '8'},
+                    {size: 10, label: '10'},
+                    {size: 12, label: '12'},
                   ]"
                   :variant="i.size == config[key].size ? 'primary' : 'secondary'"
-                  @click="config[key].size = i.size"
+                  @click="config[key].size = i.size; updateConfig()"
                 >{{ i.label }}</BButton>
               </BButtonGroup>
             </div>
@@ -115,7 +112,7 @@ const mode = ref('view')
 const account = ref(getStorage(`dashboard:account`))
 const dateFrom = ref(getStorage(`dashboard:dateFrom`))
 const dateTo = ref(getStorage(`dashboard:dateTo`))
-const config = reactive(
+const config = ref(
   getStorage(`dashboard:config`, [
     {component: 'Capital', size: 8},
     {component: 'SavingAccounts', size: 4},
@@ -159,10 +156,7 @@ const componentClasses = (item) => {
 watch(dateFrom, (v) => saveStorage(`dashboard:dateFrom`, v))
 watch(dateTo, (v) => saveStorage(`dashboard:dateTo`, v))
 watch(account, (v) => saveStorage(`dashboard:account`, v))
-watch(config, (v) => {
-  saveStorage(`dashboard:config`, v)
-  refresh()
-})
+
 
 window.addEventListener('resize', () => {
   if (Math.abs(window.innerWidth - winWidth) < 20) {
@@ -176,6 +170,11 @@ window.addEventListener('resize', () => {
   }, 500)
 })
 
+const updateConfig = () => {
+  saveStorage(`dashboard:config`, config.value)
+  refresh()
+}
+
 const refresh = () => {
   let query = {
     order: 'date',
@@ -234,5 +233,7 @@ onMounted(() => {
 
 .handle {
   cursor: grab;
+  margin-right: 10px;
+  margin-top: 6px;
 }
 </style>