Sco 1771 add delete for non foldable list item

src/frontend/fields/list/flat-list.vue

@@ -15,37 +15,81 @@
       role="listitem"
       :class="[
         'subgrid relative my-2 gap-y-8',
-        isEmpty(index) ? '' : 'bg-gray-100 p-8',
+        isPlaceholder(index) || isRemoved(index) ? 'py-2' : 'bg-gray-100 p-8',
         { 'mr-2': shared.showSourceColumn && field.isFlexible },
       ]"
-      :style="{ gridRow: `span ${totalSpan}` }"
+      :style="{ gridRow: `span ${getItemSpan(index)}` }"
     >
-      <template v-if="!isEmpty(index)">
-        <div
-          v-if="canMutate"
-          class="absolute right-0 mr-3 cursor-pointer text-gray-500"
-          @click="emit('removeSet', index)"
-        >
-          <Icon
-            :name="field.isFlexible && canMutate ? 'minus' : 'trash'"
-            :class="field.isFlexible && canMutate ? 'size-5' : 'h-auto w-auto'"
-          />
-        </div>
+      <template v-if="!isPlaceholder(index) && !isRemoved(index)">
+        <template v-if="canMutate">
+          <button
+            v-if="field.isFlexible && shared.isTranslation && hasSourceItem(index)"
+            type="button"
+            class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
+            :style="{ right: `-${shared.sourceSectionWidth}px` }"
+            @click="toggleRemove(index)"
+          >
+            <span
+              v-if="!props.isReadOnly"
+              class="flex h-10 w-10 items-center justify-center"
+            >
+              <Icon name="minus" class="size-5" />
+            </span>
+          </button>
+          <button
+            v-else
+            type="button"
+            class="absolute right-0 z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
+            @click="emit('removeSet', index)"
+          >
+            <span
+              v-if="!props.isReadOnly"
+              class="flex h-10 w-10 items-center justify-center"
+            >
+              <Icon name="trash" class="h-auto w-auto" />
+            </span>
+          </button>
+        </template>
 
         <li
           v-for="(item, i) in fields"
           :key="item.name + `${i.toString()}`"
           :style="{ gridRow: `span ${getFieldSpan(item)}` }"
         >
           <component
-            :is="store.picker(item.widget)"
+            :is="widgets.picker(item.widget)"
             :field="item"
             :is-read-only="props.isReadOnly"
             :root-path="`${fieldPath}.${index.toString()}`"
             :is-nested="true"
           />
         </li>
       </template>
+      <template v-else-if="isRemoved(index)">
+        <template v-if="canMutate">
+          <li class="relative flex items-center justify-between">
+            <span
+              class="absolute left-0 right-0 top-1/2 border-t border-gray-300"
+              :style="{ width: `calc(100% + ${shared.sourceSectionWidth}px)` }"
+            ></span>
+            <div
+              class="z-[1] inline-flex items-center rounded-full border border-gray-300 bg-gray-200 px-4 py-1.5 text-sm font-medium leading-5 text-gray-500 shadow-sm"
+            >
+              <span>Removed</span>
+            </div>
+            <button
+              type="button"
+              class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
+              :style="{ right: `-${shared.sourceSectionWidth}px` }"
+              @click="toggleRemove(index)"
+            >
+              <span class="flex h-10 w-10 items-center justify-center">
+                <Icon name="plus-mini" class="size-5" />
+              </span>
+            </button>
+          </li>
+        </template>
+      </template>
     </ul>
     <div v-if="canMutate" class="mt-8 flex flex-row items-center gap-4">
       <AddItemButton :label="field.label" @add="emit('addSet')" />
@@ -67,7 +111,7 @@ import type { PropType } from 'vue';
 import type { FieldSpec } from '../../../types';
 import Icon from '../../shared/icon.vue';
 import AddItemButton from '../../shared/add-item-button.vue';
-import { useWidgetsStore, useSharedStore } from '../../store';
+import { useWidgetsStore, useSharedStore, useModelStore } from '../../store';
 
 const props = defineProps({
   field: {
@@ -97,8 +141,9 @@ const props = defineProps({
 const emit = defineEmits(['addSet', 'removeSet']);
 const field = computed(() => props.field as FieldSpec);
 const fields = field.value.fields as FieldSpec[];
-const store = useWidgetsStore();
+const widgets = useWidgetsStore();
 const shared = useSharedStore();
+const model = useModelStore();
 
 const canMutate = computed(() => {
   if (props.isReadOnly) return false;
@@ -118,12 +163,26 @@ const showEmptyListWarning = (): boolean => {
   return false;
 };
 
-const isEmpty = (index: number): boolean => {
+const isPlaceholder = (index: number): boolean => {
   if (!props.isReadOnly) return false;
   const item = props.listItems[index] as Record<string, unknown>;
   return Object.keys(item).length === 0;
 };
 
+const hasSourceItem = (index: number): boolean => {
+  const sourceList = model.getSourceField(props.fieldPath, []) as any[];
+  return Array.isArray(sourceList) && index < sourceList.length;
+};
+
+
+const toggleRemove = (index: number) => {
+  widgets.toggleRemovedIndex(props.fieldPath, index);
+};
+
+const isRemoved = (index: number): boolean => {
+  return widgets.isInRemovedList(props.fieldPath, index);
+};
+
 const getFieldSpan = (field: FieldSpec): number => {
   if (field.widget === 'object' && field.fields) {
     return Object.keys(field.fields).length;
@@ -135,7 +194,15 @@ const totalSpan = computed(() => {
   return fields.reduce((acc, field) => acc + getFieldSpan(field), 0);
 });
 
+const getItemSpan = (index: number): number => {
+  return isRemoved(index) ? 1 : totalSpan.value;
+};
+
 const containerSpan = computed(() => {
-  return props.listItems.length * totalSpan.value + 1;
+  let span = 1;
+  for (let i = 0; i < props.listItems.length; i++) {
+    span += getItemSpan(i);
+  }
+  return span;
 });
 </script>

src/frontend/fields/list/foldable-list.vue

@@ -68,7 +68,7 @@
 
           <template v-if="canMutate">
             <button
-              v-if="field.isFlexible"
+              v-if="field.isFlexible && shared.isTranslation && hasSourceItem(index)"
               type="button"
               class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
               :style="{ right: `-${shared.sourceSectionWidth}px` }"
@@ -223,6 +223,11 @@ const isRemoved = (index: number): boolean => {
   return removedIndices.value.has(index);
 };
 
+const hasSourceItem = (index: number): boolean => {
+  const sourceList = model.getSourceField(props.fieldPath, []) as any[];
+  return Array.isArray(sourceList) && index < sourceList.length;
+};
+
 const sectionTitle = (index: number): string => {
   const peek = title(index);
   return `${field.value.label} : ${peek}`;

src/frontend/store/widgets.ts

@@ -38,7 +38,7 @@ export const useWidgetsStore = defineStore('widgets', () => {
     picker.value = fresh;
   };
 
-  // list toggles
+  // track folding in foldable lists
 
   const listToggles = ref<Record<string, boolean[]>>({});
   const setListToggles = (path: string, value: boolean[]): void => {
@@ -48,6 +48,22 @@ export const useWidgetsStore = defineStore('widgets', () => {
   };
   const getListToggles = (path: string): boolean[] => listToggles.value[path] || [];
 
+  // track removed items in flexible lists
+
+  const removedItems = ref<Record<string, number[]>>({});
+  const toggleRemovedIndex = (path: string, index: number): void => {
+    const fresh = { ...removedItems.value };
+    fresh[path] = Array.from(removedItems.value[path] || []);
+    if (fresh[path].includes(index)) {
+      fresh[path].splice(fresh[path].indexOf(index), 1);
+    } else {
+      fresh[path].push(index);
+    }
+    removedItems.value = fresh;
+  };
+  const isInRemovedList = (path: string, index: number): boolean =>
+    removedItems.value[path]?.includes(index) || false;
+
   // providers
 
   const providers = ref<Providers>(defaultProviders);
@@ -68,6 +84,9 @@ export const useWidgetsStore = defineStore('widgets', () => {
     getListToggles,
     setListToggles,
 
+    toggleRemovedIndex,
+    isInRemovedList,
+
     setProviders,
     providers,
 

src/frontend/stories/draft-index.story.vue

@@ -22,7 +22,15 @@
 
 <script setup lang="ts">
 import DraftIndex from './draft-index.vue';
-import { sharedProps, listSpec, listModel, story, miniSidebar } from '../test/mocks';
+import {
+  sharedProps,
+  listSpec,
+  listModel,
+  listInListSpec,
+  listInListModel,
+  story,
+  miniSidebar,
+} from '../test/mocks';
 import { FieldSpec } from '../../types';
 
 const fields: FieldSpec[] = [
@@ -55,6 +63,7 @@ const fields: FieldSpec[] = [
     ],
   },
   { ...listSpec },
+  { ...listInListSpec },
   { name: 'image', label: 'Image', widget: 'image' },
   { name: 'description', label: 'Description', widget: 'string' },
   { name: 'body', label: 'Body', widget: 'markdown' },
@@ -78,6 +87,7 @@ const bundle = {
   animationUrl:
     'https://res.cloudinary.com/onesheep/raw/upload/v1685641667/cmsplayground/fnu2m4ogxi9wdhi91iqi.riv',
   ...listModel,
+  ...listInListModel,
   image: 'https://source.unsplash.com/random/800x600',
   description: 'We will look at the first chapter of the book of John.',
   body: '## The Word Became Flesh\n\nIn the beginning was the Word, and the Word was with God, and the Word was God. He was with God in the beginning. Through him all things were made; without him nothing was made that has been made. In him was life, and that life was the light of all mankind. The light shines in the darkness, and the darkness has not overcome it.',

src/frontend/stories/translation-index.story.vue

@@ -84,6 +84,50 @@
         :exclude="[]"
       />
     </Variant>
+    <Variant title="AFS Course" :setup-app="miniSidebar">
+      <TranslationIndex
+        :meta="sharedProps.meta"
+        :user="sharedProps.user"
+        :language="spanish"
+        :languages="sharedProps.languages"
+        :errors="sharedProps.errors"
+        :draft="afsCourseStory.draft"
+        :bundle="afsCourseStory.bundle"
+        :source="afsCourseStory.source"
+        :providers="{}"
+        :last-published="'2021-10-10T14:48:00.000000Z'"
+        :story="{
+          ...afsCourseStory.story,
+          fields: afsCourseStory.story.fields as FieldSpec[],
+          chapterLimit: 16,
+        }"
+        :has-edit-review="false"
+        :bookmarks="sharedProps.bookmarks"
+        :exclude="[]"
+      />
+    </Variant>
+    <Variant title="Simple Flexible List" :setup-app="miniSidebar">
+      <TranslationIndex
+        :meta="sharedProps.meta"
+        :user="sharedProps.user"
+        :language="spanish"
+        :languages="sharedProps.languages"
+        :errors="sharedProps.errors"
+        :draft="simpleFlexibleListStory.draft"
+        :bundle="simpleFlexibleListStory.bundle"
+        :source="simpleFlexibleListStory.source"
+        :providers="{}"
+        :last-published="'2021-10-10T14:48:00.000000Z'"
+        :story="{
+          ...simpleFlexibleListStory.story,
+          fields: simpleFlexibleListStory.story.fields as FieldSpec[],
+          chapterLimit: 16,
+        }"
+        :has-edit-review="false"
+        :bookmarks="sharedProps.bookmarks"
+        :exclude="[]"
+      />
+    </Variant>
   </Story>
 </template>
 
@@ -98,7 +142,9 @@ import {
   miniSidebar,
   alMassira,
   flexibleListStory,
+  simpleFlexibleListStory,
   alphaCourseStory,
+  afsCourseStory,
 } from '../test/mocks';
 import { FieldSpec } from '../../types';