general-template/components/apps/medical/Odontogram/OdontogramToolbar.vue

<template>
  <SharedWidgetCard title="Alat Kondisi Gigi" :icon="mdi - tooth">
    <v-row>
      <v-col cols="12" md="8">
        <div class="mode-grid">
          <v-btn
            v-for="mode in odontogramModes"
            :key="mode.value"
            :color="props.currentMode === mode.value ? 'primary' : 'default'"
            :variant="
              props.currentMode === mode.value ? 'elevated' : 'outlined'
            "
            size="small"
            flat
            class="mode-btn"
            @click="setMode(mode.value)"
          >
            <v-icon size="small" :color="mode.color">{{ mode.icon }}</v-icon>
            {{ mode.label }}
          </v-btn>
        </div>
      </v-col>

      <v-col cols="12" md="4">
        <v-btn color="error" variant="elevated" block @click="clearAll">
          <v-icon left>mdi-delete</v-icon>
          Hapus Semua
        </v-btn>
      </v-col>
    </v-row>
  </SharedWidgetCard>
</template>

<script setup lang="ts">
import { SharedWidgetCard } from "#components";
import { defineEmits, defineProps } from "vue";
import { OdontogramMode } from "~/types/apps/medical/odontogram";

const props = defineProps({
  currentMode: {
    type: Number as () => OdontogramMode,
    required: true
  }
});

const emit = defineEmits(["modeChange", "clearAll"]);

const odontogramModes = [
  {
    value: OdontogramMode.DEFAULT,
    label: "Normal",
    icon: "mdi-cursor-default"
  },
  {
    value: OdontogramMode.AMF,
    label: "Amalgam",
    icon: "mdi-circle",
    color: "#222"
  },
  {
    value: OdontogramMode.COF,
    label: "Composite",
    icon: "mdi-circle",
    color: "#29b522"
  },
  {
    value: OdontogramMode.FIS,
    label: "Sealant",
    icon: "mdi-circle",
    color: "#ed3bed"
  },
  { value: OdontogramMode.NVT, label: "Non-vital", icon: "mdi-triangle" },
  { value: OdontogramMode.RCT, label: "Saluran Akar", icon: "mdi-triangle" },
  { value: OdontogramMode.NON, label: "Tidak Ada", icon: "mdi-text" },
  { value: OdontogramMode.UNE, label: "Un-Erupted", icon: "mdi-text" },
  { value: OdontogramMode.PRE, label: "Partial-Erupt", icon: "mdi-text" },
  { value: OdontogramMode.ANO, label: "Anomali", icon: "mdi-text" },
  { value: OdontogramMode.CARIES, label: "Caries", icon: "mdi-border-color" },
  { value: OdontogramMode.CFR, label: "Fraktur", icon: "mdi-pound" },
  {
    value: OdontogramMode.FMC,
    label: "Metal Crown",
    icon: "mdi-square-outline"
  },
  { value: OdontogramMode.POC, label: "Porcelain Crown", icon: "mdi-square" },
  { value: OdontogramMode.RRX, label: "Sisa Akar", icon: "mdi-tilde" },
  { value: OdontogramMode.MIS, label: "Hilang", icon: "mdi-close" },
  { value: OdontogramMode.IPX, label: "Implant", icon: "mdi-text" },
  { value: OdontogramMode.FRM_ACR, label: "Denture", icon: "mdi-text" },
  { value: OdontogramMode.BRIDGE, label: "Bridge", icon: "mdi-bridge" },
  {
    value: OdontogramMode.ARROW_TOP_LEFT,
    label: "Top Left Arrow",
    icon: "mdi-arrow-top-left"
  },
  {
    value: OdontogramMode.ARROW_TOP_RIGHT,
    label: "Top Right Arrow",
    icon: "mdi-arrow-top-right"
  },
  {
    value: OdontogramMode.ARROW_BOTTOM_LEFT,
    label: "Bottom Left Arrow",
    icon: "mdi-arrow-bottom-left"
  },
  {
    value: OdontogramMode.ARROW_BOTTOM_RIGHT,
    label: "Bottom Right Arrow",
    icon: "mdi-arrow-bottom-right"
  },
  {
    value: OdontogramMode.ARROW_TOP_TURN_LEFT,
    label: "Top Turn Left Arrow",
    icon: "mdi-arrow-top-left-bold"
  },
  {
    value: OdontogramMode.ARROW_TOP_TURN_RIGHT,
    label: "Top Turn Right Arrow",
    icon: "mdi-arrow-top-right-bold"
  },
  {
    value: OdontogramMode.ARROW_BOTTOM_TURN_LEFT,
    label: "Bottom Turn Left Arrow",
    icon: "mdi-arrow-bottom-left-bold"
  },
  {
    value: OdontogramMode.ARROW_BOTTOM_TURN_RIGHT,
    label: "Bottom Turn Right Arrow",
    icon: "mdi-arrow-bottom-right-bold"
  },
  { value: OdontogramMode.HAPUS, label: "Hapus", icon: "mdi-eraser" }
];

const setMode = (mode: OdontogramMode) => {
  emit("modeChange", mode);
};

const clearAll = () => {
  if (confirm("Apakah Anda yakin ingin menghapus semua kondisi gigi?")) {
    emit("clearAll", true);
  }
};
</script>

<style scoped>
.toolbar-card {
  margin-bottom: 16px;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.mode-btn {
  text-transform: none;
  font-size: 0.75rem;
}

@media (max-width: 600px) {
  .mode-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .mode-btn {
    font-size: 0.7rem;
  }
}
</style>