jws-frontend/src/components/shared/KebabAction.vue

<script lang="ts" setup>
import { ref } from 'vue';
import ToggleButton from '../button/ToggleButton.vue';
import { QMenu } from 'quasar';
import { watch } from 'vue';

const props = withDefaults(
  defineProps<{
    idName?: string;
    status?: string;
    hideToggle?: boolean;
    hideEdit?: boolean;
    hideView?: boolean;
    hideDelete?: boolean;
    useLink?: boolean;
    useUpload?: boolean;
    useCancel?: boolean;
    disableCancel?: boolean;
    disableDelete?: boolean;
  }>(),
  {
    idName: '',
    status: 'ACTIVE',
  },
);

defineEmits<{
  (e: 'view'): void;
  (e: 'edit'): void;
  (e: 'link'): void;
  (e: 'upload'): void;
  (e: 'delete'): void;
  (e: 'cancel'): void;
  (e: 'changeStatus'): void;
}>();

const refMenu = ref<InstanceType<typeof QMenu>>();

watch(
  () => props.status,
  () => {
    setTimeout(() => {
      refMenu.value?.hide();
    }, 100);
  },
);
</script>
<template>
  <q-btn
    flat
    dense
    round
    size="sm"
    icon="mdi-dots-vertical"
    :id="`btn-kebab-action-${idName}`"
    @click.stop
  >
    <q-menu class="bordered" ref="refMenu" :key="idName">
      <q-list>
        <q-item
          v-if="!hideView"
          v-close-popup
          dense
          clickable
          class="row q-py-sm"
          style="white-space: nowrap"
          :id="`btn-kebab-view-detail-${idName}`"
          @click.stop="() => $emit('view')"
        >
          <q-icon
            size="xs"
            class="col-3"
            name="mdi-eye-outline"
            style="color: hsl(var(--green-6-hsl))"
          />
          <span class="col-9 q-px-md flex items-center">
            {{ $t('general.viewDetail') }}
          </span>
        </q-item>

        <q-item
          v-if="status !== 'INACTIVE' && !hideEdit"
          v-close-popup
          dense
          clickable
          class="row q-py-sm"
          style="white-space: nowrap"
          :id="`btn-kebab-edit-${idName}`"
          @click.stop="() => $emit('edit')"
        >
          <q-icon
            size="xs"
            class="col-3"
            name="mdi-pencil-outline"
            style="color: hsl(var(--cyan-6-hsl))"
          />
          <span class="col-9 q-px-md flex items-center">
            {{ $t('general.edit') }}
          </span>
        </q-item>

        <q-item
          v-if="status !== 'INACTIVE' && useLink"
          v-close-popup
          dense
          clickable
          class="row q-py-sm"
          style="white-space: nowrap"
          :id="`btn-kebab-edit-${idName}`"
          @click.stop="() => $emit('link')"
        >
          <q-icon
            size="xs"
            class="col-3"
            name="mdi-link-variant"
            style="color: hsl(var(--yellow-6-hsl))"
          />
          <span class="col-9 q-px-md flex items-center">
            {{ $t('general.add', { text: $t('quotation.receipt') }) }}
          </span>
        </q-item>

        <q-item
          v-if="status !== 'INACTIVE' && useUpload"
          v-close-popup
          dense
          clickable
          class="row q-py-sm"
          style="white-space: nowrap"
          :id="`btn-kebab-edit-${idName}`"
          @click.stop="() => $emit('upload')"
        >
          <q-icon
            size="xs"
            class="col-3"
            name="mdi-upload"
            style="color: hsl(var(--blue-10-hsl))"
          />
          <span class="col-9 q-px-md flex items-center">
            {{ $t('general.upload', { msg: $t('general.attachment') }) }}
          </span>
        </q-item>

        <q-item
          v-if="status !== 'INACTIVE' && !hideDelete"
          v-close-popup
          dense
          class="row"
          style="white-space: nowrap"
          :clickable="!disableDelete"
          :id="`btn-kebab-delete-${idName}`"
          :class="{
            'surface-3': disableDelete,
            'app-text-muted': disableDelete,
          }"
          @click.stop="() => $emit('delete')"
        >
          <q-icon
            size="xs"
            name="mdi-trash-can-outline"
            class="col-3"
            :class="{
              'app-text-negative': !disableDelete,
            }"
          />
          <span class="col-9 q-px-md flex items-center">
            <slot name="labelDelete">
              {{ $t('general.delete') }}
            </slot>
          </span>
        </q-item>

        <q-item
          v-if="useCancel"
          v-close-popup
          dense
          class="row"
          style="white-space: nowrap"
          :clickable="!disableCancel"
          :id="`btn-kebab-delete-${idName}`"
          :class="{
            'surface-3': disableCancel,
            'app-text-muted': disableCancel,
          }"
          @click.stop="() => $emit('cancel')"
        >
          <q-icon
            size="xs"
            name="mdi-cancel"
            class="col-3"
            :class="{
              'app-text-negative': !disableCancel,
            }"
          />
          <span class="col-9 q-px-md flex items-center">
            <slot name="labelDelete">
              {{ $t('general.cancel') }}
            </slot>
          </span>
        </q-item>

        <q-item v-if="!hideToggle" dense>
          <q-item-section class="q-py-sm">
            <div class="q-pa-sm surface-2 rounded flex items-center">
              <ToggleButton
                two-way
                :id="`btn-kebab-status-${idName}`"
                :model-value="status !== 'INACTIVE'"
                @click="
                  () => {
                    $emit('changeStatus');
                  }
                "
              />
              <span class="q-pl-md">
                {{
                  status !== 'INACTIVE'
                    ? $t('general.open')
                    : $t('general.close')
                }}
              </span>
            </div>
          </q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>
</template>