sfp_front_vue_diarista_cliente/src/components/profile/ProfilePrivacyDialog.vue

<template>
  <q-dialog
    ref="dialogRef"
    maximized
    persistent
    transition-hide="slide-right"
    transition-show="slide-left"
  >
    <div class="bg-page full-height column no-shadow">
      <div
        class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile bg-surface"
      >
        <q-btn
          v-close-popup
          class="header-back-btn"
          color="primary"
          dense
          flat
          icon="mdi-chevron-left"
          round
        />

        <q-space />

        <span
          class="text-subtitle1 text-primary font16 fontbold gradient-diarista"
        >
          {{ $t("profile.privacy.title") }}
        </span>

        <q-space />

        <div style="width: 32px"></div>
      </div>

      <div
        v-if="loading"
        class="col flex flex-center"
      >
        <q-spinner
          color="primary"
          size="3em"
        />
      </div>

      <div
        v-else-if="blocks.length === 0"
        class="col column items-center justify-center q-px-xl q-pb-xl"
      >
        <q-img
          class="q-mb-lg"
          fit="contain"
          style="width: 220px; height: 220px"
          :src="diarinho"
        />

        <p class="text-center q-mb-xs font16 fontbold text-primary">
          {{ $t("profile.privacy.empty_message") }}
        </p>

        <p class="text-grey-6 text-center q-mb-xl font12 fontregular">
          {{ $t("profile.privacy.empty_sub") }}
        </p>
      </div>

      <div
        v-else
        class="col overflow-auto q-pb-xl"
      >
        <div class="q-px-md q-mt-md">
          <p class="text-primary q-mb-md font16 fontbold gradient-diarista">
            {{ $t("profile.privacy.blocked_title") }}
          </p>

          <div
            v-for="block in blocks"
            :key="block.id"
            class="block-item row items-center no-wrap q-mb-md"
          >
            <q-avatar
              class="flex-shrink-0 q-mr-sm"
              size="48px"
            >
              <span
                class="full-width full-height flex flex-center"
                style="border-radius: 50%"
                :style="avatarStyle(block)"
              >
                {{ block.provider_name?.slice(0, 2).toUpperCase() ?? "??" }}
              </span>
            </q-avatar>

            <div class="col column no-wrap overflow-hidden">
              <span
                class="font12 fontbold text-text"
                style="line-height: 1.3"
              >
                {{ block.provider_name }}
              </span>

              <span
                v-if="block.provider_district"
                class="text-grey-7 font9 fontbold"
              >
                {{ block.provider_district }}
              </span>

              <div
                v-if="block.provider_rating"
                class="row items-center q-mt-xs"
              >
                <q-icon
                  class="q-mr-xs"
                  color="amber"
                  name="mdi-star"
                  size="12px"
                />

                <span class="text-grey-7 font9 fontregular">
                  {{ Number(block.provider_rating).toFixed(1) }}
                </span>
              </div>
            </div>

            <q-btn
              class="flex-shrink-0"
              color="primary"
              no-caps
              padding="4px 12px"
              rounded
              size="sm"
              :label="$t('profile.privacy.unblock_btn')"
              :loading="unblockingId === block.id"
              @click="unblock(block)"
            />
          </div>
        </div>
      </div>
    </div>
  </q-dialog>
</template>

<script setup>
import diarinho from "src/assets/diarinho_perfil_cliente_favoritos.svg";

import { avatarColorsWithPurple as avatarColors } from "src/helpers/avatarColors";

import {
  deleteClientProviderBlock,
  getClientProviderBlocks,
} from "src/api/clientProviderBlock";

import { onMounted, ref } from "vue";
import { useDialogPluginComponent } from "quasar";
import { userStore } from "src/stores/user";

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef } = useDialogPluginComponent();
const store = userStore();

const blocks = ref([]);
const loading = ref(false);
const unblockingId = ref(null);

const avatarStyle = (block) => {
  const idx = (block?.provider_id ?? 0) % avatarColors.length;

  return avatarColors[idx];
};

const unblock = async (block) => {
  unblockingId.value = block.id;

  try {
    await deleteClientProviderBlock(block.id);

    blocks.value = blocks.value.filter((b) => b.id !== block.id);
  } finally {
    unblockingId.value = null;
  }
};

onMounted(async () => {
  loading.value = true;

  try {
    blocks.value = (await getClientProviderBlocks(store.user.client.id)) ?? [];
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped lang="scss">
.shadow-profile {
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
}

.block-item {
  border-radius: 12px;
  padding: 12px;
}

.flex-shrink-0 {
  flex-shrink: 0;
}
</style>