CRM_Montzar/apps/web/src/components/routines/RelatedTasksPanel.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import type { RoutineEntityRefDto, RoutineTaskDto } from '@mento/shared';
import UiIcon from '@/components/UiIcon.vue';
import QuickTaskModal from '@/components/routines/QuickTaskModal.vue';
import RoutineTaskRow, { type RoutineTaskRowAction } from '@/components/routines/RoutineTaskRow.vue';
import RoutineTaskModals from '@/components/routines/RoutineTaskModals.vue';
import { UiButton } from '@/components/ui';
import { api } from '@/lib/api';
import { toFaDigits } from '@/lib/jalali';
import { apiError, isOpenStatus } from '@/lib/routines';
import { useRoutineTaskActions } from '@/lib/useRoutineTaskActions';
import { useAuthStore } from '@/stores/auth';

const props = withDefaults(
  defineProps<{
    entity: RoutineEntityRefDto;
    title?: string;
  }>(),
  { title: 'کارهای مرتبط' },
);

const router = useRouter();
const auth = useAuthStore();

const enabled = computed(() => {
  const mods = auth.user?.enabledModules;
  return !mods || mods.includes('routines');
});

const items = ref<RoutineTaskDto[]>([]);
const loading = ref(false);
const error = ref('');
const showClosed = ref(false);
const quickOpen = ref(false);

async function load() {
  if (!enabled.value || !props.entity.id) return;
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<RoutineTaskDto[]>('/routine-tasks/by-entity', {
      params: { [`${props.entity.type}Id`]: props.entity.id },
    });
    items.value = data;
  } catch (e) {
    error.value = apiError(e, 'بارگذاری کارهای مرتبط ممکن نشد.');
  } finally {
    loading.value = false;
  }
}

watch(() => `${props.entity.type}:${props.entity.id}`, load, { immediate: true });

const actions = useRoutineTaskActions((updated) => {
  const i = items.value.findIndex((t) => t.id === updated.id);
  if (i >= 0) items.value[i] = updated;
});

function onAction(kind: RoutineTaskRowAction, task: RoutineTaskDto) {
  if (kind === 'start') void actions.start(task);
  else if (kind === 'complete-note') actions.openComplete(task);
  else if (kind === 'reschedule') actions.openReschedule(task);
  else if (kind === 'move-today') void actions.moveToday(task);
  else if (kind === 'skip') actions.openSkip(task);
  else actions.openCancel(task);
}

const open = computed(() => items.value.filter((t) => isOpenStatus(t.status)));
const closed = computed(() => items.value.filter((t) => !isOpenStatus(t.status)));

function openTask(t: RoutineTaskDto) {
  void router.push({ path: '/routines', query: { task: t.id } });
}

function onCreated(t: RoutineTaskDto) {
  items.value = [t, ...items.value];
}
</script>

<template>
  <section v-if="enabled" class="related">
    <header>
      <h3>
        <UiIcon name="check" :size="16" />
        {{ title }}
        <em v-if="open.length">{{ toFaDigits(open.length) }} باز</em>
      </h3>
      <UiButton size="sm" variant="outline" @click="quickOpen = true">
        <template #icon><UiIcon name="plus" :size="14" /></template>
        ایجاد Task
      </UiButton>
    </header>

    <p v-if="error" class="error">{{ error }}</p>
    <p v-if="actions.error.value" class="error">{{ actions.error.value }}</p>
    <div v-if="loading && !items.length" class="muted">در حال بارگذاری…</div>
    <p v-else-if="!items.length" class="muted">هنوز کاری برای این پرونده ثبت نشده.</p>

    <div v-else class="rows">
      <RoutineTaskRow
        v-for="t in open"
        :key="t.id"
        :task="t"
        :busy="actions.busyId.value === t.id"
        show-date
        show-assignee
        show-delay
        @toggle="actions.toggle"
        @open="openTask"
        @action="onAction"
      />
      <button v-if="closed.length" type="button" class="toggle-closed" @click="showClosed = !showClosed">
        {{ showClosed ? 'پنهان کردن' : 'نمایش' }} {{ toFaDigits(closed.length) }} کار انجام‌شده / بسته
      </button>
      <template v-if="showClosed">
        <RoutineTaskRow
          v-for="t in closed"
          :key="t.id"
          :task="t"
          :busy="actions.busyId.value === t.id"
          show-date
          show-assignee
          @toggle="actions.toggle"
          @open="openTask"
          @action="onAction"
        />
      </template>
    </div>

    <QuickTaskModal :open="quickOpen" :preset="entity" @close="quickOpen = false" @created="onCreated" />
    <RoutineTaskModals :actions="actions" />
  </section>
</template>

<style scoped>
.related {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

h3 em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--accent-subtle);
  color: var(--accent-deep);
}

.rows {
  display: grid;
  gap: var(--sp-2);
}

.muted {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.toggle-closed {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--accent-deep);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 4px 0;
}

.error {
  margin: 0;
}
</style>