Inline editors

<script setup lang="ts">
import { ref } from "vue";
import {
  VueGantt,
  type BatchChanges,
  type GanttConfigOptions,
  type Link,
  type Task
} from "@dhtmlx/trial-vue-gantt";
import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";

import { applyBatchChanges } from "../shared/applyBatchChanges";
import { formatDateYMD } from "../shared/date";
import { createProjectData } from "../shared/projectData";
import DateEditor from "./editors/DateEditor.vue";
import DurationEditor from "./editors/DurationEditor.vue";
import TextEditor from "./editors/TextEditor.vue";

const dataSet = createProjectData();
const tasks = ref<Task[]>(dataSet.tasks);
const links = ref<Link[]>(dataSet.links);

const config: Partial<GanttConfigOptions> = {
  row_height: 40,
  scale_height: 68,
  scales: [
    { unit: "year", step: 1, format: "%Y" },
    { unit: "month", step: 1, format: "%F, %Y" },
    { unit: "day", step: 1, format: "%d %M" }
  ],
  columns: [
    {
      name: "text",
      tree: true,
      width: 220,
      resize: true,
      editor: { type: "TextEditor", map_to: "text" }
    },
    {
      name: "start_date",
      align: "center",
      width: 170,
      resize: true,
      template: (task: Task) => formatDateYMD(task.start_date),
      editor: { type: "DateEditor", map_to: "start_date", min: 0 }
    },
    {
      name: "duration",
      align: "center",
      width: 90,
      resize: true,
      editor: { type: "DurationEditor", map_to: "duration", min: 0 }
    },
    { name: "add", width: 44 }
  ]
};

const inlineEditors = {
  TextEditor,
  DurationEditor,
  DateEditor
};

const data = {
  batchSave: (changes: BatchChanges) => {
    const next = applyBatchChanges(tasks.value, links.value, changes);
    tasks.value = next.tasks;
    links.value = next.links;
  }
};
</script>

<template>
  <section class="demo-panel" data-cy="inline-editors-demo">
    <VueGantt
      class="demo-gantt"
      :tasks="tasks"
      :links="links"
      :config="config"
      :inlineEditors="inlineEditors"
      :data="data"
    />
  </section>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUpdated, ref, watch } from "vue";
import { formatDateYMD, parseInputDate } from "../../shared/date";

interface DateEditorProps {
  initialValue: any;
  save: () => void;
  cancel: () => void;
}

const props = defineProps<DateEditorProps>();

const inputRef = ref<any>(null);
const value = ref("");

const normalize = (nextValue: any) => {
  if (nextValue === null || nextValue === undefined || nextValue === "") {
    return "";
  }
  return formatDateYMD(nextValue);
};

watch(
  () => props.initialValue,
  nextValue => {
    value.value = normalize(nextValue);
  },
  { immediate: true }
);

const getInputElement = () => {
  const candidate = inputRef.value?.$el ?? inputRef.value;
  if (!candidate || typeof candidate.querySelector !== "function") {
    return null;
  }
  return candidate.querySelector("input") as HTMLInputElement | null;
};

const syncInputHook = () => {
  const input = getInputElement();
  input?.setAttribute("data-cy", "inline-date-input");
  return input;
};

const focus = () => {
  inputRef.value?.focus?.();
  syncInputHook()?.focus();
};

const setValue = (nextValue: any) => {
  value.value = normalize(nextValue);
};

const getValue = () => parseInputDate(value.value);
const isChanged = (rawValue: any) => normalize(rawValue) !== value.value;
const isValid = () => Boolean(value.value);
const save = () => props.save();

onMounted(async () => {
  await nextTick();
  syncInputHook();
  focus();
});

onUpdated(() => {
  syncInputHook();
});

defineExpose({
  focus,
  setValue,
  getValue,
  isChanged,
  isValid,
  save
});
</script>

<template>
  <v-sheet class="editor-shell" border elevation="2" rounded="lg" data-cy="inline-date-editor">
    <v-text-field
      ref="inputRef"
      v-model="value"
      class="editor-field editor-field-date"
      density="compact"
      hide-details
      type="date"
      variant="outlined"
    />
  </v-sheet>
</template>

<style scoped>
.editor-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--dhx-gantt-border-radius);
  /* padding: 6px; */
  background: #fff;
  border: 1px solid #b7c8d8;
}

.editor-field {
  flex: 0 0 auto;
}

.editor-field-date {
  width: 100%;
  min-width: 100%;
}

</style>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from "vue";

interface DurationEditorProps {
  initialValue: any;
  save: () => void;
  cancel: () => void;
}

const props = defineProps<DurationEditorProps>();

const inputRef = ref<any>(null);
const value = ref(1);

const normalize = (nextValue: any) => {
  const numberValue = Number(nextValue);
  if (Number.isNaN(numberValue) || numberValue < 0) {
    return 0;
  }
  return numberValue;
};

watch(
  () => props.initialValue,
  nextValue => {
    value.value = normalize(nextValue);
  },
  { immediate: true }
);

const getInputElement = () => {
  const candidate = inputRef.value?.$el ?? inputRef.value;
  if (!candidate || typeof candidate.querySelector !== "function") {
    return null;
  }
  return candidate.querySelector("input") as HTMLInputElement | null;
};

const focus = () => {
  inputRef.value?.focus?.();
  getInputElement()?.focus();
};

const setValue = (nextValue: any) => {
  value.value = normalize(nextValue);
};

const onModelUpdate = (nextValue: any) => {
  value.value = normalize(nextValue);
};

const getValue = () => value.value;
const isChanged = (rawValue: any) => normalize(rawValue) !== value.value;
const isValid = () => value.value >= 0;
const save = () => props.save();

onMounted(async () => {
  await nextTick();
  focus();
});

defineExpose({
  focus,
  setValue,
  getValue,
  isChanged,
  isValid,
  save
});
</script>

<template>
  <v-sheet class="editor-shell" border elevation="2" rounded="lg">
    <v-text-field
      ref="inputRef"
      :model-value="String(value)"
      class="editor-field editor-field-duration"
      density="compact"
      hide-details
      min="0"
      step="1"
      type="number"
      variant="outlined"
      @update:model-value="onModelUpdate"
    />
  </v-sheet>
</template>

<style scoped>
.editor-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
}

.editor-field {
  flex: 0 0 auto;
}

.editor-field-duration {
  width: 100%;
  min-width: 100%;
}

</style>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from "vue";

interface TextEditorProps {
  initialValue: any;
  save: () => void;
  cancel: () => void;
}

const props = defineProps<TextEditorProps>();

const inputRef = ref<any>(null);
const value = ref("");

const normalize = (nextValue: any) => String(nextValue ?? "");

watch(
  () => props.initialValue,
  nextValue => {
    value.value = normalize(nextValue);
  },
  { immediate: true }
);

const getInputElement = () => {
  const candidate = inputRef.value?.$el ?? inputRef.value;
  if (!candidate || typeof candidate.querySelector !== "function") {
    return null;
  }
  return candidate.querySelector("input") as HTMLInputElement | null;
};

const focus = () => {
  inputRef.value?.focus?.();
  getInputElement()?.focus();
};

const setValue = (nextValue: any) => {
  value.value = normalize(nextValue);
};

const getValue = () => value.value;
const isChanged = (rawValue: any) => normalize(rawValue) !== value.value;
const isValid = () => value.value.trim().length > 0;
const save = () => props.save();

onMounted(async () => {
  await nextTick();
  focus();
});

defineExpose({
  focus,
  setValue,
  getValue,
  isChanged,
  isValid,
  save
});
</script>

<template>
  <v-sheet class="editor-shell" border elevation="2" rounded="lg">
    <v-text-field
      ref="inputRef"
      v-model="value"
      class="editor-field editor-field-text"
      density="compact"
      hide-details
      type="text"
      variant="outlined"
    />
  </v-sheet>
</template>

<style scoped>
.editor-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
}

.editor-field {
  flex: 0 0 auto;
}

.editor-field-text {
  width: 100%;
  min-width: 100%;
}

</style>