Initial commit

app/components/people/People.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="columns mx-0 px-0 py-2">
+    <div
+      :class="`column is-narrow ${viewport === 1 ? 'px-0' : ''}`"
+      :style="`${viewport === 1 ? '' : 'border-right: 1px solid #B0B0B0;'}`"
+    >
+      <template v-if="viewport > 1">
+        <div
+          v-for="(v, i) in tabs"
+          :class="['is-clickable py-3 px-3', i !== 0 && 'mt-2', getStyle(v)]"
+          style="width: 130px; border-radius: 4px"
+          @click="changeTab(v)"
+        >
+          {{ v.name }}
+        </div>
+      </template>
+      <div class="field is-grouped is-grouped-multiline" v-else>
+        <div class="control" v-for="(v, i) in tabs" :key="i" @click="changeTab(v)">
+          <div style="width: 110px">
+            <div :class="`py-3 px-3 ${getStyle(v)}`">{{ v.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <PeopleInfo
+        v-if="tab === 'info' && record !== undefined"
+        v-bind="{ row: record, pagename }"
+        @update="update"
+      ></PeopleInfo>
+      <template v-if="record">
+        <ImageGallery
+          v-if="tab === 'image'"
+          v-bind="{ row: record, pagename, api: 'peoplefile', show: ['delete'] }"
+          @update="update"
+        ></ImageGallery>
+      </template>
+      <PeopleView v-bind="{ row: record, pagename }" v-if="tab === 'summary'" />
+    </div>
+  </div>
+</template>
+<script setup>
+import PeopleInfo from "~/components/people/PeopleInfo";
+const { $dialog } = useNuxtApp()
+const props = defineProps({
+  pagename: String,
+  row: Object,
+});
+const emit = defineEmits(["modalevent", "close"]);
+const viewport = 5;
+const tabs = [
+  { code: "info", name: "1. Thông tin" },
+  { code: "image", name: "2. Hình ảnh" },
+  { code: "summary", name: "3. Bản in" },
+];
+const tab = ref("info");
+const record = ref(props.row || null);
+function getStyle(v) {
+  let check = record.value ? record.value.id : false;
+  if (v.tab === "info") check = true;
+  return v.code === tab.value
+    ? "has-background-primary has-text-white"
+    : `has-background-light ${check ? "" : "has-text-grey"}`;
+}
+function changeTab(v) {
+  if (tab.value === v.code) return;
+  if (!record.value)
+    return $dialog(
+      "Vui lòng <b>lưu dữ liệu</b> trước khi chuyển sang mục tiếp theo",
+      "Thông báo"
+    );
+
+  tab.value = v.code;
+}
+function update(v) {
+  record.value = {
+    ...v,
+    label: `${v.code} / ${v.fullname} / ${v.phone || ""}`
+  }
+
+  emit("modalevent", { name: "dataevent", data: record.value });
+  if (!props.row) emit("close");
+}
+</script>