feat: Personnel info

src/components/DrawerInfo.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  editData?: (...args: unknown[]) => void;
+  deleteData?: (...args: unknown[]) => void;
+  submit?: (...args: unknown[]) => void;
+  close?: (...args: unknown[]) => void;
+}>();
+
+const drawerOpen = defineModel<boolean>('drawerOpen', {
+  default: false,
+});
+</script>
+<template>
+  <q-drawer
+    @hide="close"
+    :width="1100"
+    :breakpoint="500"
+    v-model="drawerOpen"
+    behavior="mobile"
+    side="right"
+    show-if-above
+  >
+    <AppBox
+      class="column justify-between full-height"
+      style="padding: 0; border-radius: var(--radius-2)"
+    >
+      <div class="form-header col q-px-lg row items-center">
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-pencil-outline"
+          padding="xs"
+          class="q-mr-md"
+          :class="{ dark: $q.dark.isActive }"
+          style="color: var(--brand-1)"
+          @click="editData"
+        />
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-trash-can-outline"
+          padding="xs"
+          :class="{ dark: $q.dark.isActive }"
+          style="color: hsl(var(--negative-bg))"
+          @click="deleteData"
+        />
+
+        <div class="col text-subtitle1 text-weight-bold text-center">
+          {{ title }}
+        </div>
+
+        <div style="width: 31.98px"></div>
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-close"
+          padding="xs"
+          class="close-btn"
+          :class="{ dark: $q.dark.isActive }"
+          @click="close"
+        />
+      </div>
+
+      <div
+        class="col-10 form-body"
+        style="position: relative"
+        :class="{ dark: $q.dark.isActive }"
+        :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
+      >
+        <slot name="info"></slot>
+      </div>
+
+      <div
+        class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
+      >
+        <q-btn
+          dense
+          outline
+          unelevated
+          id="cancelBtn"
+          class="q-px-md app-text-negative"
+          :label="$t('cancel')"
+          @click="close"
+        />
+        <q-btn
+          dense
+          unelevated
+          id="submitBtn"
+          type="submit"
+          color="primary"
+          class="q-px-md"
+          :label="$t('save')"
+        />
+      </div>
+    </AppBox>
+  </q-drawer>
+</template>
+
+<style scoped lang="scss">
+.close-btn {
+  color: hsl(var(--negative-bg));
+  background-color: hsla(var(--negative-bg) / 0.1);
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative-bg));
+  }
+}
+
+.form-header {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.form-body {
+  --_body-bg: var(--sand-0);
+  background-color: var(--_body-bg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  &.dark {
+    --_body-bg: var(--gray-10);
+  }
+}
+
+.form-footer {
+  border-top: 1px solid var(--border-color);
+}
+</style>