Merge pull request #139 from moevm/136-my-addresses-function

136 my addresses function
moevm · Dec 23, 2024 · 52eadf1 · 52eadf1
2 parents 7398eb2 + ec0304d
commit 52eadf1
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 4 deletions.
diff --git a/frontend/src/components/admin/AdminOrdersPage.vue b/frontend/src/components/admin/AdminOrdersPage.vue
@@ -99,6 +99,7 @@ function submitSearch(): void {
     date_time_end: formatToRFC3339(endDate.value)
   })
   .then((response) => {
+    closeDialog()
     orders.value = response
   })
 }

diff --git a/frontend/src/components/createOrderStep/ContactInfo.vue b/frontend/src/components/createOrderStep/ContactInfo.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted } from 'vue';
+import Dialog from '../../ui/uikit/Dialog.vue'
+import Address from '../../api/models/address'
+import { getClientAddresses, getUserInfo } from '../../api/request';
 import ActionButton from '../../ui/uikit/ActionButton.vue'
 import InputTextField from '../../ui/uikit/inputs/InputTextField.vue'
 import { VTimePicker} from 'vuetify/labs/VTimePicker'
 import { VDateInput } from 'vuetify/labs/components'
 
 const emit = defineEmits(['update-form-validity', 'update-address-data'])
+const clientAddresses = ref<Address[]>([])
+const isDialogOpen = ref(false);
+
+function openSelectAddressDialog() {
+  isDialogOpen.value = !isDialogOpen.value;
+}
+
 const menu = ref<boolean>(false)
 const contactData = ref({
   city: "",
@@ -17,6 +27,12 @@ const contactData = ref({
   date: new Date(""),
   time: null
 })
+const minDate = computed(() => {
+  const today = new Date();
+  const tomorrow = new Date(today);
+  tomorrow.setDate(today.getDate() + 1);
+  return tomorrow.toISOString().substr(0, 10);
+});
 const isFormValid = computed(() => {
   return Object.values(contactData.value).every(value => value !== "" && value !== null);
 })
@@ -28,6 +44,27 @@ watch(isFormValid, (newVal) => {
 watch(contactData, (newVal) => {
   emit('update-address-data', newVal);
 }, { deep: true })
+
+function onAddressSelect(address: Address) {
+  contactData.value.city = address.city
+  contactData.value.street = address.street
+  contactData.value.building = address.building
+  contactData.value.entrance = address.entrance
+  contactData.value.floor = address.floor
+  contactData.value.doorNumber = address.door_number
+  openSelectAddressDialog()
+}
+
+onMounted(() => {
+  getUserInfo('me')
+  .then((response) => {
+    getClientAddresses(response.id)
+    .then((response) => clientAddresses.value = response)
+  })
+  .catch((error) => {
+    console.error("Error get worker info:", error)
+  })
+})
 </script>
 
 <template>
@@ -60,10 +97,37 @@ watch(contactData, (newVal) => {
         <ActionButton
           id="my-address-btn"
           text="Мои адреса"
-          type="my-address"
+          type="button"
           variant="flat"
           color="#394cc2"
+          @click="openSelectAddressDialog"
         ></ActionButton>
+        <Dialog
+          title="Выбор адресса"
+          :visible="isDialogOpen"
+          dialogMaxWidth="40%"
+          @update:visible="openSelectAddressDialog">
+          <template #body>
+            <ul>
+              <li 
+                v-for="address in clientAddresses"
+                :key="address.id"
+                class="address-item"
+                @click="onAddressSelect(address)">
+                г.{{ address.city }}, ул. {{ address.street }}, д.{{ address.building }}, кв.{{ address.door_number }}
+              </li>
+            </ul>
+          </template>
+          <template #footer>
+            <ActionButton
+              text="Закрыть"
+              type="cancel"
+              variant="flat"
+              color="#394cc2"
+              @click="openSelectAddressDialog"
+            ></ActionButton>
+          </template>
+        </Dialog>
       </div>
       <div class="input-row">
         <InputTextField
@@ -93,6 +157,7 @@ watch(contactData, (newVal) => {
           variant="solo"
           rounded="xl"
           prepend-icon=""
+          :min="minDate"
         ></v-date-input>
         <InputTextField
           v-model="contactData.time"
@@ -164,4 +229,17 @@ h1 {
   font-weight: bold;
   margin-bottom: 10px;
 }
+
+.address-item {
+  background-color: #959FDE;
+  border-radius: 20px;
+  padding: 10px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.address-item:hover {
+  background-color: #8a95d4;
+}
 </style>
diff --git a/frontend/src/ui/uikit/items/AdminOrderItem.vue b/frontend/src/ui/uikit/items/AdminOrderItem.vue
@@ -38,7 +38,7 @@ const statusClass = computed(() => {
     <p>{{ formatDate() }}</p>
     <p>{{ formatAddress() }}, </p>
     <div class="order-price">
-      <p>{{ props.order.price }}</p>
+      <p>{{ props.order.price }}₽</p>
       <div :class="['order-status', statusClass]">
         <p>{{ props.order.status }}</p>
       </div>

diff --git a/frontend/src/ui/uikit/items/ServiceItem.vue b/frontend/src/ui/uikit/items/ServiceItem.vue
@@ -7,7 +7,7 @@ import Dialog from '../Dialog.vue'
 import Service from '../../../api/models/service'
 import { deleteService, updateService } from '../../../api/request'
 
-const emit = defineEmits(['update-service-item']);
+const emit = defineEmits(['add-service-price', 'remove-service-price', 'update-service-item'])
 
 const props = defineProps<{
   isAdmin: boolean;
@@ -53,6 +53,11 @@ function closeDialog(): void {
 }
 
 function toggleServicePrice(): void {
+  if (isServiceAdded.value) {
+    emit('remove-service-price', props.service);
+  } else {
+    emit('add-service-price', props.service);
+  }
   isServiceAdded.value = !isServiceAdded.value;
 }