WIP Доделала календарь

src/pages/newCalendar/components/CalendarHeader.vue

@@ -17,7 +17,8 @@
         dense,
         icon="arrow_back_ios_new",
         text-color="primary",
-        padding="2px 11px 2px 8px"
+        padding="2px 11px 2px 8px",
+        @click="previousWeek"
       )
       base-input(
         outlined,
@@ -25,40 +26,30 @@
         fontSize="16px",
         lineHeight="19px",
         iconRight,
-        id="calendarIcon"
+        v-model="currentWeek",
+        readonly
       )
-        q-icon.text(name="app:calendar", size="20px", ref="calendarIcon", @click="changeCalendarVisibility(false)")
-          //q-popup-proxy(
-            cover,
-            transition-show="scale",
-            transition-hide="scale"
-            anchor="bottom middle", self="top middle"
-          //)
-            //q-date(v-model="date", minimal, range)
-              .flex.items-center.justify-end
-                q-btn(
-                  v-close-popup,
-                  label="Закрыть",
-                  color="primary",
-                  flat
-                )
-        q-menu(
-          :style="{'margin-top': '4px !important'}"
-          target="#calendarIcon"
-          v-model="calendarVisibility",
-          transition-show="scale",
-          transition-hide="scale"
-          anchor="bottom middle",
-          self="top middle"
-        )
-          base-calendar(v-model="date", range)
+        .h-5.w-5.flex.items-center.justify-center
+          q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
+            :size="calendarVisibility ? '10px' : '16px'"
+          )
+            q-menu(
+              :style="{'margin-top': '4px !important'}"
+              v-model="calendarVisibility",
+              transition-show="scale",
+              transition-hide="scale"
+              self="top middle",
+              :offset="[118, 14]"
+            )
+              base-calendar(v-model="date", range, :range-count="7")
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",
         round,
         size="14px",
         text-color="primary",
-        dense
+        dense,
+        @click="nextWeek"
       ) 
     .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
       q-btn-toggle(
@@ -91,18 +82,29 @@ export default {
         },
       ],
       date: {
-        from: moment().clone().add(1, "month"),
-        to: moment().clone().add(2, "month"),
+        from: moment(),
+        to: moment().clone().add(6, "day"),
       },
       calendarVisibility: false,
     };
   },
-  methods: {
-    changeCalendarVisibility(value) {
-      this.calendarVisibility = value;
+  computed: {
+    currentWeek() {
+      return `${this.date?.from?.format(
+        "D MMMM YYYY"
+      )} - ${this.date?.to?.format("D MMMM YYYY")}`;
+    },
+  },
+  methods: {
+    previousWeek() {
+      this.date.from = this.date.from.clone().subtract(1, "week");
+      this.date.to = this.date.to.clone().subtract(1, "week");
+    },
+    nextWeek() {
+      this.date.from = this.date.from.clone().add(1, "week");
+      this.date.to = this.date.to.clone().add(1, "week");
     },
   },
-  watch: {},
 };
 </script>
 
@@ -134,3 +136,7 @@ export default {
 .q-btn-group :deep(.q-btn-item)
   border-radius: 4px !important
 </style>
+<style lang="sass">
+.q-field--outlined.q-field--readonly .q-field__control:before
+  border-style: solid !important
+</style>