sfp_front_vue_diarista_prestador/src/components/dashboard/DashboardPriceSuggest.vue

<template>
  <div class="q-mx-md q-mb-md">
    <q-card
      class="price-suggest-card bg-surface shadow-card"
      :flat="false"
    >
      <q-card-section class="price-suggest-section">
        <div class="row items-center justify-between no-wrap q-mb-sm">
          <span class="text-suggest-label text-no-wrap">
            {{ $t('provider.dashboard.price_suggest.region_label_1') }}
            <span class="fontbold">
              {{ $t('provider.dashboard.price_suggest.region_label_2') }}
            </span>
          </span>

          <q-badge
            class="price-badge fontbold text-no-wrap gradient-diarista-bg"
            rounded
          >
            {{ formatCurrency(data?.average_price ?? 0) }}
          </q-badge>
        </div>

        <div class="row items-center justify-between no-wrap">
          <span class="text-suggest-label text-no-wrap">
            {{ $t('provider.dashboard.price_suggest.my_price_label_1') }}
            <span class="fontbold">
              {{ $t('provider.dashboard.price_suggest.my_price_label_2') }}
            </span>
          </span>

          <div class="my-price-chip row items-center no-wrap q-ml-xs">
            <span class="text-my-price fontmedium text-no-wrap">
              {{
                showMyPrice
                  ? formatCurrency(data?.your_price ?? 0)
                  : $t('common.price_masked')
              }}
            </span>

            <q-btn
              class="q-pa-none q-ml-xs"
              color="grey-6"
              dense
              flat
              :icon="showMyPrice ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
              size="xs"
              @click="showMyPrice = !showMyPrice"
            />
          </div>

          <q-btn
            class="q-ml-xs"
            color="primary"
            flat
            no-caps
            padding="0"
            size="xs"
            @click="openServiceDataDialog"
          >
            <div class="row items-center no-wrap alter-label">
              <span class="fontbold">
                {{ $t('common.alter') }}
              </span>

              <q-icon
                class="q-ml-xs"
                name="mdi-pencil-outline"
                size="14px"
              />
            </div>
          </q-btn>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import { formatCurrency } from 'src/helpers/utils';
import { ref } from 'vue';
import { useQuasar } from 'quasar';

import ServiceDataDialog from '../profile/ProfileServiceDataDialog.vue';

defineProps({
  data: {
    type: Object,
    default: () => ({
    })
  }
});

const showMyPrice = ref(false);

const $q = useQuasar()

const openServiceDataDialog = () => {
  $q.dialog({
    component: ServiceDataDialog
  })
}
</script>

<style scoped lang="scss">
.price-suggest-card {
  border-radius: 20px;
}

.price-suggest-section {
  padding: 14px 16px;
}

.text-suggest-label {
  color: #3a3a4a;
  font-size: clamp(10px, 3.2vw, 13px);
  line-height: 1.2;
}

.price-badge {
  border-radius: 20px;
  font-size: clamp(10px, 3.2vw, 13px);
  padding: 4px 12px;
}

.my-price-chip {
  border: 1px solid #b9b9c3;
  border-radius: 20px;
  padding: 2px 8px 2px 10px;
}

.text-my-price {
  color: #3a3a4a;
  font-size: clamp(9px, 2.9vw, 12px);
  letter-spacing: 0.5px;
}

.alter-label {
  font-size: clamp(10px, 3.1vw, 13px);
}
</style>