feat: Initial Scaffold for QTI editor components and add a development page

contentcuration/contentcuration/frontend/channelEdit/pages/QTIDemoPage.vue

@@ -0,0 +1,72 @@
+<template>
+
+  <div>
+    <div style="padding: 16px 24px 0">
+      <div
+        style="
+  padding: 16px;
+  color: #2196f3;
+  background-color: transparent;
+  border: 1px solid #2196f3;
+  border-radius: 4px;
+        "
+      >
+        <strong>QTI Editor — Dev Demo</strong>
+        &nbsp;Hardcoded items. Changes are local only and not persisted.
+      </div>
+    </div>
+
+    <QTIEditor
+      :assessments="assessments"
+      @update="onUpdate"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { ref, defineComponent } from 'vue';
+  import QTIEditor from 'shared/views/QTIEditor/index';
+  import { QtiInteraction } from 'shared/views/QTIEditor/constants';
+
+  /**
+   * Hardcoded items covering three interaction types so the closed-card
+   * type label can be visually verified.
+   */
+  const INITIAL_ASSESSMENTS = [
+    {
+      id: 'demo-item-1',
+      type: QtiInteraction.CHOICE,
+      title: 'Which planet is closest to the Sun?',
+    },
+    {
+      id: 'demo-item-2',
+      type: QtiInteraction.EXTENDED_TEXT,
+      title: 'Describe the water cycle in your own words.',
+    },
+    {
+      id: 'demo-item-3',
+      type: QtiInteraction.ORDER,
+      title: 'Arrange these events in chronological order.',
+    },
+  ];
+
+  export default defineComponent({
+    name: 'QTIDemoPage',
+
+    components: { QTIEditor },
+
+    setup() {
+      const assessments = ref(INITIAL_ASSESSMENTS);
+
+      function onUpdate(newList) {
+        assessments.value = newList;
+      }
+
+      return { assessments, onUpdate };
+    },
+  });
+
+</script>

contentcuration/contentcuration/frontend/channelEdit/router.js

@@ -9,6 +9,7 @@ import TrashModal from './views/trash/TrashModal';
 import SearchOrBrowseWindow from './views/ImportFromChannels/SearchOrBrowseWindow';
 import ReviewSelectionsPage from './views/ImportFromChannels/ReviewSelectionsPage';
 import EditModal from './components/edit/EditModal';
+import QTIDemoPage from './pages/QTIDemoPage';
 import ChannelDetailsModal from 'shared/views/channel/ChannelDetailsModal';
 import ChannelModal from 'shared/views/channel/ChannelModal';
 import { RouteNames as ChannelRouteNames } from 'frontend/channelList/constants';
@@ -244,6 +245,11 @@ const router = new VueRouter({
           });
       },
     },
+    {
+      name: 'QTI_DEMO',
+      path: '/qti-demo',
+      component: QTIDemoPage,
+    },
     {
       name: RouteNames.TREE_VIEW,
       path: '/:nodeId/:detailNodeId?',

contentcuration/contentcuration/frontend/shared/strings/commonStrings.js

@@ -42,4 +42,8 @@ export const commonStrings = createTranslator('CommonStrings', {
     message: 'Copy channel token',
     context: 'A label for an action that copies the channel token to the clipboard',
   },
+  optionsLabel: {
+    message: 'Options',
+    context: 'Tooltip for the generic options menu icon',
+  },
 });

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/CollapsibleToolbar/__tests__/CollapsibleToolbar.spec.js

@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
+import CollapsibleToolbar from '../index.vue';
+import { commonStrings } from 'shared/strings/commonStrings';
+
+const { optionsLabel$ } = commonStrings;
+
+const makeAction = (overrides = {}) => ({
+  id: 'action-1',
+  icon: 'edit',
+  label: 'Edit',
+  handler: jest.fn(),
+  collapsed: false,
+  disabled: false,
+  ...overrides,
+});
+
+const renderComponent = (actions = [], optionsLabel = null) => {
+  return render(CollapsibleToolbar, {
+    props: { actions, optionsLabel },
+    routes: new VueRouter(),
+  });
+};
+
+describe('CollapsibleToolbar', () => {
+  describe('visible icon actions', () => {
+    test('renders icon buttons for non-collapsed actions with icons', () => {
+      const actions = [
+        makeAction({ id: 'a1', label: 'Edit', icon: 'edit', collapsed: false }),
+        makeAction({ id: 'a2', label: 'Move up', icon: 'chevronUp', collapsed: false }),
+      ];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Move up' })).toBeInTheDocument();
+    });
+
+    test('does not render an icon button for collapsed actions', () => {
+      const actions = [
+        makeAction({ id: 'a1', label: 'Edit', icon: 'edit', collapsed: false }),
+        makeAction({ id: 'a2', label: 'Delete', icon: 'delete', collapsed: true }),
+      ];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+      // 'Delete' only appears inside the dropdown, not as a standalone icon button
+      expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();
+    });
+
+    test('calls the action handler when an icon button is clicked', async () => {
+      const user = userEvent.setup();
+      const handler = jest.fn();
+      const actions = [
+        makeAction({ id: 'a1', label: 'Edit', icon: 'edit', collapsed: false, handler }),
+      ];
+      renderComponent(actions);
+      await user.click(screen.getByRole('button', { name: 'Edit' }));
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('collapsed dropdown menu', () => {
+    test('does not render the options button when there are no collapsed actions', () => {
+      const actions = [makeAction({ id: 'a1', icon: 'edit', collapsed: false })];
+      renderComponent(actions);
+      expect(screen.queryByRole('button', { name: optionsLabel$() })).not.toBeInTheDocument();
+    });
+
+    test('renders the options button when there are collapsed actions', () => {
+      const actions = [
+        makeAction({ id: 'a1', icon: 'edit', collapsed: false }),
+        makeAction({ id: 'a2', icon: null, label: 'Delete', collapsed: true, handler: jest.fn() }),
+      ];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: optionsLabel$() })).toBeInTheDocument();
+    });
+
+    test('renders the options button when an action has no icon (forces it to menu)', () => {
+      const actions = [makeAction({ id: 'a1', icon: null, label: 'Delete', collapsed: false })];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: optionsLabel$() })).toBeInTheDocument();
+    });
+
+    test('uses the provided optionsLabel prop for the menu button', () => {
+      const actions = [makeAction({ id: 'a1', icon: null, label: 'Delete', collapsed: true })];
+      renderComponent(actions, 'Custom options label');
+      expect(screen.getByRole('button', { name: 'Custom options label' })).toBeInTheDocument();
+    });
+  });
+
+  describe('disabled state', () => {
+    test('renders the icon button as disabled when action.disabled is true', () => {
+      const actions = [
+        makeAction({ id: 'a1', label: 'Edit', icon: 'edit', collapsed: false, disabled: true }),
+      ];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: 'Edit' })).toBeDisabled();
+    });
+  });
+});

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/CollapsibleToolbar/index.vue

@@ -0,0 +1,130 @@
+<template>
+
+  <div class="collapsible-toolbar">
+    <div class="icon-actions-wrapper">
+      <KIconButton
+        v-for="action in visibleIconActions"
+        :key="action.id"
+        :icon="action.icon"
+        :tooltip="action.label"
+        :ariaLabel="action.label"
+        :disabled="action.disabled"
+        :color="action.disabled ? $themeTokens.textDisabled : $themePalette.grey.v_800"
+        @click="action.handler"
+      />
+    </div>
+
+    <KIconButton
+      v-if="collapsedMenuActions.length > 0"
+      icon="optionsVertical"
+      :color="$themePalette.grey.v_800"
+      :tooltip="optionsLabel || optionsLabel$()"
+      :ariaLabel="optionsLabel || optionsLabel$()"
+    >
+      <template #menu>
+        <KDropdownMenu
+          :options="dropdownOptions"
+          @select="handleSelect"
+        />
+      </template>
+    </KIconButton>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import { commonStrings } from 'shared/strings/commonStrings';
+
+  export default {
+    name: 'CollapsibleToolbar',
+
+    setup(props) {
+      const { optionsLabel$ } = commonStrings;
+      /** Actions with an icon that are not explicitly collapsed */
+      const visibleIconActions = computed(() => {
+        return props.actions.filter(a => !a.collapsed && Boolean(a.icon));
+      });
+
+      /** Actions without an icon MUST go to the menu, along with explicitly collapsed ones */
+      const collapsedMenuActions = computed(() => {
+        return props.actions.filter(a => a.collapsed || !a.icon);
+      });
+
+      const dropdownOptions = computed(() => {
+        return collapsedMenuActions.value.map(action => ({
+          label: action.label,
+          value: action.id,
+          disabled: action.disabled,
+        }));
+      });
+
+      function handleSelect(option) {
+        const action = collapsedMenuActions.value.find(a => a.id === option.value);
+        if (action && action.handler) {
+          action.handler();
+        }
+      }
+
+      return {
+        visibleIconActions,
+        collapsedMenuActions,
+        dropdownOptions,
+        handleSelect,
+        optionsLabel$,
+      };
+    },
+
+    props: {
+      /**
+       * Array of actions:
+       * {
+       *   id: string,
+       *   icon: string | null,
+       *   label: string,
+       *   handler: Function,
+       *   collapsed?: boolean,
+       *   disabled?: boolean
+       * }
+       */
+      actions: {
+        type: Array,
+        required: true,
+        validator(actions) {
+          return actions.every(
+            a =>
+              typeof a.id === 'string' &&
+              typeof a.label === 'string' &&
+              typeof a.handler === 'function',
+          );
+        },
+      },
+      /** Tooltip text for the generic options menu icon */
+      optionsLabel: {
+        type: String,
+        default: null,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .collapsible-toolbar {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .icon-actions-wrapper {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+</style>