@vue-skuilder/edit-ui 0.1.1

package/src/components/ViewableDataInputForm/FieldInputs/MediaDragDropUploader.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="mr-2 mb-2">
+    <v-label class="text-h5">Add media:</v-label>
+    <div
+      class="drop-zone"
+      :class="{ 'drop-zone--over': isDragging }"
+      @drop="dropHandler"
+      @dragover.prevent="dragOverHandler"
+      @dragenter.prevent="dragEnterHandler"
+      @dragleave.prevent="dragLeaveHandler"
+    >
+      <input
+        ref="fileInput"
+        type="file"
+        accept="image/*,audio/*"
+        multiple
+        style="display: none"
+        @change="handleFileInput"
+      />
+      <!-- <template> -->
+      <div v-for="(item, index) in mediaItems" :key="index" class="media-item">
+        <template v-if="item.type === 'image'">
+          <img :src="item.thumbnailUrl" alt="Uploaded image thumbnail" class="thumbnail" />
+        </template>
+        <template v-else-if="item.type === 'audio'">
+          <audio controls :src="item.url"></audio>
+        </template>
+        <v-btn size="small" @click="removeMedia(index)">Remove</v-btn>
+      </div>
+      <!-- <template> -->
+      Drop image or audio files here...
+      <v-btn @click="triggerFileInput">Or Click to Upload</v-btn>
+      <!-- </template> -->
+      <!-- <v-btn @click="addMoreMedia">Add More Media</v-btn> -->
+      <!-- </template> -->
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FieldInput from './OptionsFieldInput';
+import { Status } from '@vue-skuilder/common';
+import { FieldInputSetupReturn } from './OptionsFieldInput';
+
+export interface MediaItem {
+  type: 'image' | 'audio';
+  file: File;
+  url: string;
+  thumbnailUrl?: string;
+}
+
+export default defineComponent({
+  name: 'MediaDragDropUploader',
+  extends: FieldInput,
+
+  setup(props, ctx) {
+    // Get the parent setup result
+    const parentSetup = FieldInput.setup?.(props, ctx) as FieldInputSetupReturn;
+
+    // Now you can access fieldStore and other parent setup properties
+    const { fieldStore } = parentSetup;
+
+    // Return both parent and child setup properties
+    return {
+      ...parentSetup,
+      fieldStore,
+      // Add any additional setup properties specific to this component
+    };
+  },
+
+  data() {
+    return {
+      isDragging: false,
+      mediaItems: [] as MediaItem[],
+    };
+  },
+
+  computed: {
+    hasMedia(): boolean {
+      return this.mediaItems.length > 0;
+    },
+  },
+
+  created() {
+    // this.validate();
+  },
+
+  methods: {
+    dragOverHandler(event: DragEvent) {
+      event.preventDefault();
+    },
+
+    dragEnterHandler(event: DragEvent) {
+      event.preventDefault();
+      this.isDragging = true;
+    },
+
+    dragLeaveHandler(event: DragEvent) {
+      event.preventDefault();
+      this.isDragging = false;
+    },
+
+    dropHandler(event: DragEvent) {
+      event.preventDefault();
+      this.isDragging = false;
+      const files = event.dataTransfer?.files;
+      if (files) {
+        this.processFiles(files);
+      }
+    },
+
+    triggerFileInput() {
+      (this.$refs.fileInput as HTMLInputElement).click();
+    },
+
+    handleFileInput(event: Event) {
+      const files = (event.target as HTMLInputElement).files;
+      if (files) {
+        this.processFiles(files);
+      }
+    },
+
+    processFiles(files: FileList) {
+      Array.from(files).forEach((file) => {
+        this.addMediaItem(file);
+      });
+      this.updateStore();
+    },
+
+    addMediaItem(file: File) {
+      const type = file.type.startsWith('image/') ? 'image' : 'audio';
+      const item: MediaItem = {
+        type,
+        file,
+        url: URL.createObjectURL(file),
+      };
+
+      if (type === 'image') {
+        this.createThumbnail(file).then((thumbnailUrl) => {
+          item.thumbnailUrl = thumbnailUrl;
+          this.$nextTick(() => {
+            this.$forceUpdate();
+          });
+        });
+      }
+
+      this.mediaItems.push(item);
+    },
+
+    async createThumbnail(file: File): Promise<string> {
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (e: ProgressEvent<FileReader>) => {
+          resolve(e.target?.result as string);
+        };
+        reader.readAsDataURL(file);
+      });
+    },
+
+    removeMedia(index: number) {
+      URL.revokeObjectURL(this.mediaItems[index].url);
+      this.mediaItems.splice(index, 1);
+      this.updateStore();
+    },
+
+    clearData() {
+      this.mediaItems.forEach((item) => {
+        URL.revokeObjectURL(item.url);
+      });
+      this.mediaItems = [];
+      this.updateStore();
+      // this.validate();
+    },
+
+    addMoreMedia() {
+      console.log('addMoreMedia');
+      this.triggerFileInput();
+    },
+
+    updateStore() {
+      // for (let i = 1; i <= 10; i++) {
+      //   delete this.dataInputForm.dataInputForm[`image-${i}`];
+      //   delete this.dataInputForm.dataInputForm[`audio-${i}`];
+      // }
+
+      let imageCount = 0;
+      let audioCount = 0;
+      this.mediaItems.forEach((item) => {
+        if (item.type === 'image') {
+          imageCount++;
+          this.fieldStore.setMedia(`image-${imageCount}`, {
+            content_type: item.file.type,
+            data: item.file,
+          });
+        } else if (item.type === 'audio') {
+          audioCount++;
+          this.fieldStore.setMedia(`audio-${audioCount}`, {
+            content_type: item.file.type,
+            data: item.file,
+          });
+        }
+      });
+      // this.validate();
+    },
+
+    getValidators() {
+      return [
+        () => ({
+          status: this.mediaItems.length > 0 ? Status.ok : Status.error,
+          msg: this.mediaItems.length > 0 ? '' : 'At least one media item is required',
+        }),
+      ];
+    },
+  },
+});
+</script>
+
+<style scoped>
+@import './FieldInput.css';
+
+.drop-zone {
+  border: 2px dashed #ccc;
+  border-radius: 4px;
+  padding: 20px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.drop-zone--over {
+  border-color: #000;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.thumbnail {
+  max-width: 100px;
+  max-height: 100px;
+  margin-right: 10px;
+}
+
+.media-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+</style>

package/src/components/ViewableDataInputForm/FieldInputs/MidiInput.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <div v-if="recording">
+      <span class="text-h5">
+        Now Recording from device:
+        <span class="font-weight-black">{{ midi.configuredInput }}</span>
+      </span>
+    </div>
+    <syllable-seq-vis v-if="true" ref="inputVis" :seq="SylSeq" last-t-ssuggestion="5000" />
+    <v-btn color="primary" :disabled="hasRecording()" @click="play">
+      Preview
+      <v-icon end>volume_up</v-icon>
+    </v-btn>
+    <v-btn color="error" :disabled="hasRecording()" @click="reset">
+      Clear and try again
+      <v-icon end>close</v-icon>
+    </v-btn>
+    <v-checkbox v-model="transpositions" label="Include Transpositions" @click.capture="reset"></v-checkbox>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FieldInput from './OptionsFieldInput';
+import {
+  SkMidi,
+  eventsToSyllableSequence,
+  SyllableSequence,
+  transposeSyllableSeq,
+  SyllableSeqVis,
+} from '@vue-skuilder/courses';
+
+export default defineComponent({
+  name: 'MidiInput',
+  components: {
+    SyllableSeqVis,
+  },
+  extends: FieldInput,
+
+  data() {
+    return {
+      midi: null as SkMidi | null,
+      recording: false,
+      SylSeq: eventsToSyllableSequence([]) as SyllableSequence,
+      display: false,
+      transpositions: false,
+    };
+  },
+
+  async created() {
+    try {
+      this.midi = await SkMidi.instance();
+      this.record();
+      // [ ] this wasn't updated when the dataInputFormStore / fieldInputStore components were created ?
+      this.store[this.field.name] = this.getTransposedSeqs;
+    } catch (e) {
+      throw new Error(`MidiInput.created: ${e}`);
+    }
+  },
+
+  methods: {
+    record() {
+      if (!this.midi) return;
+      this.midi.record();
+      this.midi.addNoteonListenter((e) => {
+        this.SylSeq.append(e);
+        (this.$refs.inputVis as InstanceType<typeof SyllableSeqVis>).updateBounds();
+      });
+      this.recording = true;
+    },
+
+    getTransposedSeqs() {
+      if (!this.midi) return [];
+      if (this.transpositions) {
+        return [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6].map((shift) => {
+          return transposeSyllableSeq(this.midi!.recording, shift);
+        });
+      } else {
+        return [this.midi.recording];
+      }
+    },
+
+    clearData() {
+      if (!this.midi) return;
+      console.log('midiInput clearing data...');
+      this.midi.stopRecording();
+      this.midi.eraseRecording();
+      this.SylSeq = eventsToSyllableSequence([]);
+      this.record();
+      this.recording = true;
+
+      this.store.convertedInput[this.field.name] = this.midi.recording;
+      this.store.validation[this.field.name] = false;
+      this.store[this.field.name] = this.getTransposedSeqs;
+    },
+
+    hasRecording(): boolean {
+      return this.midi?.hasRecording ?? false;
+    },
+
+    reset() {
+      this.clearData();
+    },
+
+    play() {
+      if (!this.midi) return;
+      this.midi.play();
+      this.display = true;
+      this.validate();
+    },
+  },
+});
+</script>

package/src/components/ViewableDataInputForm/FieldInputs/NumberInput.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-text-field
+    ref="inputField"
+    v-model="modelValue"
+    variant="filled"
+    type="number"
+    :name="field.name"
+    :label="field.name"
+    :rules="vuetifyRules()"
+    :hint="validationStatus.msg"
+    :autofocus="autofocus"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { numberValidator } from './typeValidators';
+import FieldInput from './OptionsFieldInput';
+import { ValidatingFunction } from '@vue-skuilder/common';
+
+export default defineComponent({
+  name: 'NumberInput',
+  extends: FieldInput,
+
+  setup(props, ctx) {
+    // Get all the setup logic from parent
+    const parentSetup = FieldInput.setup?.(props, ctx);
+
+    const validators = computed<ValidatingFunction[]>(() => {
+      const baseValidators = FieldInput.validators.call(this);
+
+      if (props.field.validator?.test) {
+        baseValidators.push(props.field.validator.test);
+      }
+
+      if (baseValidators) {
+        return [numberValidator, ...baseValidators];
+      } else {
+        return [numberValidator];
+      }
+    });
+
+    return {
+      ...parentSetup,
+      validators,
+    };
+  },
+});
+</script>

package/src/components/ViewableDataInputForm/FieldInputs/OptionsFieldInput.ts

@@ -0,0 +1,161 @@
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  PropType,
+  Ref,
+  ref,
+  watch,
+  WritableComputedRef,
+} from 'vue';
+import {
+  ValidatingFunction,
+  FieldDefinition,
+  ValidationResult,
+  validationFunctionToVuetifyRule,
+  VuetifyRule,
+  Status,
+  CourseElo,
+} from '@vue-skuilder/common';
+import { useFieldInputStore } from '../../../stores/useFieldInputStore';
+
+export interface FieldInputSetupReturn {
+  inputField: Ref<HTMLInputElement | null>;
+  fieldStore: ReturnType<typeof useFieldInputStore>;
+  modelValue: WritableComputedRef<unknown>;
+  validators: ComputedRef<ValidatingFunction[]>;
+  focus: () => void;
+  userInput: () => unknown;
+  clearData: () => void;
+  setData: (data: unknown) => void;
+  vuetifyRules: () => VuetifyRule[];
+  generateTags: () => string[];
+  generateELO: () => CourseElo | undefined;
+}
+
+export default defineComponent({
+  name: 'FieldInput',
+
+  props: {
+    autofocus: Boolean,
+    field: {
+      type: Object as PropType<FieldDefinition>,
+      required: true,
+    },
+  },
+  setup(props): FieldInputSetupReturn {
+    const fieldStore = useFieldInputStore();
+    const inputField = ref<HTMLInputElement | null>(null);
+    // [ ] TODO: Implement hint - need richer validation result
+    //     on the fieldStore to do this.
+    //
+    //     Exose / Retrieve it as a computed property
+    //
+    // const hint = ref('');
+
+    // Computed property for v-model binding in child components
+    const modelValue = computed({
+      get: () => fieldStore.inputs[props.field.name],
+      set: (value) => fieldStore.setFieldValue(props.field.name, value),
+    });
+
+    watch(modelValue, (newValue: unknown, oldValue: unknown) => {
+      console.log('[FieldInput] modelValue changed:', {
+        new: newValue,
+        old: oldValue,
+        currentStoreValue: fieldStore.inputs[props.field.name],
+      });
+      // Trigger validation when value changes
+      // props.uiValidationFunction();
+      //
+      // validate();
+      // fieldStore.setFieldValue(props.field.name, newValue);
+    });
+
+    const validators = computed(() => {
+      const ret = [];
+      if (props.field?.validator) {
+        ret.push(props.field.validator.test);
+      }
+      return ret;
+    });
+
+    const focus = () => {
+      if (inputField.value) {
+        inputField.value.focus();
+      }
+    };
+
+    const userInput = () => {
+      if (!props.field?.name) {
+        throw new Error('Field name is required for FieldInput component');
+      }
+      return fieldStore.inputs[props.field.name];
+    };
+
+    const setData = (data: unknown) => {
+      if (!props.field?.name) {
+        throw new Error('Field name is required for FieldInput component');
+      }
+      fieldStore.setFieldValue(props.field.name, data);
+    };
+
+    const clearData = () => {
+      console.log(
+        `[FieldInput] Running generic clearData() for ${props.field?.name} in FieldInput.ts`
+      );
+      if (inputField.value) {
+        // if (inputField.value.type === 'file') {
+        inputField.value.value = '';
+        // } else if (inputField.value.type === 'text') {
+        //   inputField.value.value = '';
+        // } else if (inputField.value.type === '')
+        if (!props.field?.name) return;
+
+        fieldStore.clearField(props.field.name);
+      }
+    };
+
+    const vuetifyRules = () => {
+      if (props.field?.validator) {
+        return validators.value.map((f) => {
+          return validationFunctionToVuetifyRule(f);
+        });
+      }
+      return [];
+    };
+
+    const generateTags = () => {
+      console.log('[FieldInput] Running generic generateTags() in FieldInput.ts');
+      return props.field?.tagger ? props.field.tagger(userInput()) : [];
+    };
+
+    const generateELO = () => {
+      console.log('[FieldInput] Running generic generateELO() in FieldInput.ts');
+      return props.field?.generateELO ? props.field.generateELO(userInput()) : undefined;
+    };
+
+    return {
+      inputField,
+      fieldStore,
+      modelValue,
+      validators,
+      focus,
+      userInput,
+      clearData,
+      setData,
+      vuetifyRules,
+      generateTags,
+      generateELO,
+    };
+  },
+
+  data() {
+    return {
+      validationStatus: {
+        status: Status.ok,
+        msg: '',
+      } as ValidationResult,
+    };
+  },
+});

package/src/components/ViewableDataInputForm/FieldInputs/StringInput.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-text-field
+    ref="inputField"
+    v-model="modelValue"
+    variant="filled"
+    type="text"
+    :name="field.name"
+    :label="field.name"
+    :rules="vuetifyRules()"
+    :hint="validationStatus.msg"
+    :autofocus="autofocus"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import FieldInput from './OptionsFieldInput';
+import { ValidatingFunction } from '../../../../base-course/Interfaces/ValidatingFunction';
+
+export default defineComponent({
+  name: 'StringInput',
+  extends: FieldInput,
+
+  setup(props, ctx) {
+    // Get all the setup logic from parent
+    const parentSetup = FieldInput.setup?.(props, ctx);
+
+    // [ ] Test datashape-field-custom validators
+    const validators = computed<ValidatingFunction[]>(() => {
+      const baseValidators = FieldInput.validators.call(this);
+
+      if (props.field.validator?.test) {
+        baseValidators.push(props.field.validator.test);
+      }
+
+      if (baseValidators) {
+        return baseValidators;
+      } else {
+        return [];
+      }
+    });
+
+    return {
+      ...parentSetup,
+      validators,
+    };
+  },
+});
+</script>

package/src/components/ViewableDataInputForm/FieldInputs/typeValidators.ts

@@ -0,0 +1,49 @@
+import { Status } from '@vue-skuilder/common';
+import { ValidationResult } from '@vue-skuilder/common';
+
+const okResult: ValidationResult = {
+  status: Status.ok,
+  msg: '',
+};
+
+export function numberValidator(value: string): ValidationResult {
+  const errorResult: ValidationResult = {
+    status: Status.error,
+    msg: 'This input must be a number',
+  };
+
+  if (isNumeric(value)) {
+    return okResult;
+  } else {
+    return errorResult;
+  }
+}
+
+export function integerValidator(value: string): ValidationResult {
+  const errorResult: ValidationResult = {
+    status: Status.error,
+    msg: 'This input must be an integer (..., -2, -1, 0, 1, 2, ...).',
+  };
+
+  if (numberValidator(value).status === Status.error) {
+    return numberValidator(value);
+  }
+
+  if (isInteger(value)) {
+    return okResult;
+  } else {
+    return errorResult;
+  }
+}
+
+function isNumeric(value: unknown): boolean {
+  // pilfered from Angular and assumed to be correctish:
+  // https://github.com/angular/angular/blob/4.3.x/packages/common/src/pipes/number_pipe.ts#L172
+
+  // @ts-expect-error - see above
+  return !isNaN(value - parseFloat(value));
+}
+
+function isInteger(value: string) {
+  return /^[+,-]?\s?\d+$/.test(value);
+}

package/src/components/index.ts

@@ -0,0 +1,21 @@
+// Edit UI Components - Core editing components migrated from platform-ui
+
+export { default as CourseEditor } from './CourseEditor.vue';
+export { default as DataInputForm } from './ViewableDataInputForm/DataInputForm.vue';
+export { default as BulkImportView } from './BulkImportView.vue';
+
+// Field Input Components
+export { default as StringInput } from './ViewableDataInputForm/FieldInputs/StringInput.vue';
+export { default as MarkdownInput } from './ViewableDataInputForm/FieldInputs/MarkdownInput.vue';
+export { default as NumberInput } from './ViewableDataInputForm/FieldInputs/NumberInput.vue';
+export { default as IntegerInput } from './ViewableDataInputForm/FieldInputs/IntegerInput.vue';
+export { default as MediaDragDropUploader } from './ViewableDataInputForm/FieldInputs/MediaDragDropUploader.vue';
+export { default as ChessPuzzleInput } from './ViewableDataInputForm/FieldInputs/ChessPuzzleInput.vue';
+export { default as MidiInput } from './ViewableDataInputForm/FieldInputs/MidiInput.vue';
+// export { default as AudioInput } from './ViewableDataInputForm/FieldInputs/AudioInput.vue'; // Commented out - file is deprecated
+// export { default as ImageInput } from './ViewableDataInputForm/FieldInputs/ImageInput.vue'; // Commented out - file is deprecated
+
+// Field Input Base and Utilities
+export { default as OptionsFieldInput } from './ViewableDataInputForm/FieldInputs/OptionsFieldInput';
+export * from './ViewableDataInputForm/FieldInputs/typeValidators';
+export * from './ViewableDataInputForm/FieldInput.types';

package/src/index.ts

@@ -0,0 +1,6 @@
+// Edit UI Library - Vue Component Library for Course Editing
+export * from './components';
+
+// Stores
+export { useDataInputFormStore } from './stores/useDataInputFormStore';
+export { useFieldInputStore } from './stores/useFieldInputStore';