fix

2026-07-07 17:36:43 +03:30
parent b9ef684b51
commit 38a396ba21
89 changed files with 1815 additions and 478 deletions
@@ -0,0 +1,181 @@
+<template>
+  <div class="missionary-request" @click="emit('show-details', request)">
+    <div class="missionary-request__heading">
+      <p class="missionary-request__title">{{ request.title }}</p>
+      <p class="missionary-request__subtitle">{{ request.requesterName }}</p>
+    </div>
+
+    <div class="missionary-request__meta">
+      <div class="missionary-request__pill">
+        <span class="missionary-request__pill-label">تاریخ درخواست :</span>
+        <span class="missionary-request__pill-value">
+          {{ formatJalaaliDate(request.requestedDate) || '—' }}
+        </span>
+      </div>
+      <div class="missionary-request__pill">
+        <span class="missionary-request__pill-label">مکان :</span>
+        <span class="missionary-request__pill-value missionary-request__pill-value--fa">
+          {{ request.location || '—' }}
+        </span>
+      </div>
+      <Badge :variant="statusVariant" :dot="true" :value="statusLabel" />
+    </div>
+
+    <div class="missionary-request__actions" @click.stop>
+      <CircleButton
+        v-if="request.status !== 'accepted'"
+        tooltip="پذیرش درخواست"
+        bg-color="rgba(0, 154, 18, 0.08)"
+        size="2.5rem"
+        @click="emit('change-status', { id: request.id, status: 'accepted' })"
+      >
+        <template #icon>
+          <SvgIcon name="check" :size="20" color="var(--color-secondary)" />
+        </template>
+      </CircleButton>
+      <CircleButton
+        v-if="request.status !== 'rejected'"
+        tooltip="رد درخواست"
+        bg-color="rgba(204, 40, 49, 0.08)"
+        size="2.5rem"
+        @click="emit('change-status', { id: request.id, status: 'rejected' })"
+      >
+        <template #icon>
+          <SvgIcon name="close" :size="20" color="var(--color-error)" />
+        </template>
+      </CircleButton>
+      <BaseButton
+        text="جزئیات درخواست"
+        custom-class="missionary-request__details-btn"
+        @click="emit('show-details', request)"
+      >
+        <template #appendIcon>
+          <SvgIcon name="caret-left" :size="16" color="#fff" />
+        </template>
+      </BaseButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import Badge from '@/components/Badge.vue'
+import { MISSIONARY_REQUEST_STATUS } from '@/enums'
+import BaseButton from '@/components/BaseButton.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import { formatJalaaliDate } from '@/utils/date-utils'
+import CircleButton from '@/components/CircleButton.vue'
+
+const STATUS_VARIANTS = {
+  pending: 'warning',
+  seen: 'info',
+  accepted: 'success',
+  rejected: 'danger',
+}
+
+const props = defineProps({
+  request: { type: Object, required: true },
+})
+
+const emit = defineEmits(['show-details', 'change-status'])
+
+const statusLabel = computed(() => MISSIONARY_REQUEST_STATUS[props.request.status] || '—')
+const statusVariant = computed(() => STATUS_VARIANTS[props.request.status] || 'neutral')
+</script>
+
+<style lang="scss" scoped>
+.missionary-request {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 58%);
+  box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
+  border-radius: 0.875rem;
+  margin-bottom: 0.625rem;
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 75%);
+  }
+
+  @media (min-width: 1024px) {
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  &__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    flex: 1 1 33%;
+    min-width: 0;
+  }
+
+  &__title {
+    font-family: var(--font-family-fa);
+    font-weight: 400;
+    font-size: 0.95rem;
+    color: #4b4b4b;
+    margin: 0;
+  }
+
+  &__subtitle {
+    font-family: var(--font-family-fa);
+    font-weight: 300;
+    font-size: 0.75rem;
+    color: #848484;
+    margin: 0;
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+    flex: 1 1 40%;
+  }
+
+  &__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: rgba(107, 107, 107, 5%);
+    padding: 0.25rem 1rem;
+    border-radius: 0.875rem;
+    white-space: nowrap;
+    line-height: 1.5;
+  }
+
+  &__pill-label {
+    font-family: var(--font-family-fa);
+    font-weight: 300;
+    font-size: 0.75rem;
+    color: #848484;
+  }
+
+  &__pill-value {
+    font-family: var(--font-family-en);
+    font-size: 0.75rem;
+    color: #5d5d5d;
+
+    &--fa {
+      font-family: var(--font-family-fa);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  &__details-btn {
+    min-width: 9rem;
+    padding: 0 0.625rem;
+  }
+}
+</style>