Feat: List Patient

list-patient/components/changeBirthdayDialog.vue

@@ -0,0 +1,95 @@
+<template>
+  <v-dialog v-model="menuChangeBirthday" width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3 elevation-6">
+        <v-card-title>
+          {{ $t("message.changeBirthday.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text
+        class="font-weight-bold d-flex justify-center ga-3 text-h6 pt-5"
+      >
+        <v-menu
+          v-model="menuBirthday"
+          :close-on-content-click="false"
+          transition="scale-transition"
+          offset-y
+          min-width="330px"
+          max-width="290px"
+        >
+          <template v-slot:activator="{ props }">
+            <v-text-field
+              :model-value="formatBirthday()"
+              :label="$t('message.changeBirthday.datePicker')"
+              prepend-inner-icon="mdi-calendar"
+              hide-details
+              readonly
+              variant="outlined"
+              v-bind="props"
+            ></v-text-field>
+          </template>
+          <v-date-picker
+            hide-header
+            show-adjacent-months
+            rounded="lg"
+            color="primary"
+            v-model="birthday"
+            @update:modelValue="menuBirthday = false"
+          ></v-date-picker>
+        </v-menu>
+      </v-card-text>
+
+      <v-card-actions class="px-7">
+        <v-btn
+          :text="$t('message.changeBirthday.close')"
+          variant="text"
+          class="text-error"
+          @click="onCloseMenuChangeBirthday()"
+        ></v-btn>
+        <v-btn
+          :text="$t('message.changeBirthday.save')"
+          variant="text"
+          class="text-primary"
+          @click="onSaveChangeBirthday()"
+        ></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "ChangeBirthdayDialog",
+  data() {
+    return {
+      menuBirthday: false,
+    };
+  },
+  computed: {
+    menuChangeBirthday() {
+      return this.$store.state.collection.menuChangeBirthday;
+    },
+    birthday: {
+      get() {
+        return this.$store.state.collection.birthday;
+      },
+      set(val) {
+        this.$store.commit("setBirthday", val);
+      },
+    },
+  },
+  methods: {
+    onCloseMenuChangeBirthday() {
+      this.$store.commit("setMenuChangeBirthday", false);
+    },
+    formatBirthday() {
+      if (!this.birthday) return null;
+
+      return moment(this.birthday).format("DD-MM-YYYY");
+    },
+    onSaveChangeBirthday() {
+      this.$store.commit("setMenuChangeBirthday", false);
+    },
+  },
+};
+</script>