feat(#37): fixed states by reworking them completely

app/components/Base/Collapsible.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-const { selectedFiles } = useFiles()
-const selectedFile = computed(() => selectedFiles.value[0] || null)
-
+const { firstSelectedFile } = useFileSelection()
 const { fileChanges } = useFileState()
 
 const amountOfChanges = computed(() => {
-  if (!selectedFile.value) {
+  if (!firstSelectedFile.value) {
     return 0
   }
 
-  return fileChanges(selectedFile.value?.id)
+  return fileChanges(firstSelectedFile.value.id)
 })
 </script>
 
@@ -30,7 +28,7 @@ const amountOfChanges = computed(() => {
         <div>
           <slot name="title" />
         </div>
-        <span v-if="amountOfChanges && selectedFile && !selectedFile.isDownloaded" class="text-sm text-gray-400">
+        <span v-if="amountOfChanges && firstSelectedFile && !firstSelectedFile.isDownloaded" class="text-sm text-gray-400">
           {{ amountOfChanges }} unsaved change{{ amountOfChanges === 1 ? '' : 's' }}
         </span>
       </div>

app/components/Editor/Categories.vue

@@ -2,6 +2,10 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 import { categories } from '~/utils/iptc-iim/categories'
 
+defineProps<{
+  fileId: string
+}>()
+
 const state = defineModel<IPTCFieldWithValue[]>()
 
 const categoryKeys = new Set(categories.map((category) => {
@@ -85,13 +89,14 @@ function updateExtraField(updatedFields: (IPTCFieldWithValue & { type: 'extra' }
   <div v-if="state" class="flex flex-col gap-5">
     <BaseCategory v-for="category in categories" :key="category.title" :title="category.title">
       <div class="flex flex-col gap-2">
-        <div v-for="(row, index) in category.rows" :key="row.join(':')" class="flex flex-col sm:flex-row items-center gap-2 w-full">
+        <div v-for="(row, index) in category.rows" :key="row.join(':')" class="flex flex-col sm:flex-row gap-2 w-full">
           <template v-for="{ key, width } in category.rows[index]" :key="`${index}-${key}`">
             <EditorField
               v-if="fieldsByKey[key]"
               v-model="fieldsByKey[key]"
               :extra="getExtraFields(key)"
               :style="width ? `width: ${width}%` : ''"
+              :file-id="fileId"
               @update:extra="updateExtraField"
             />
           </template>

app/components/Editor/Container.vue

@@ -1,44 +1,31 @@
 <script setup lang="ts">
-const { selectedFiles } = useFiles()
-const selectedFile = computed(() => selectedFiles.value[0] || null)
+const { getSelectedIds, firstSelectedFile } = useFileSelection()
+const { getFileState } = useFileState()
 
-const { updateFileData, getFileState, setupFileState } = useFileState()
-
-const selectedState = computed(() => getFileState(selectedFile.value?.id || ''))
-
-watch(selectedFile, (newFile) => {
-  if (newFile) {
-    if (getFileState(newFile.id).length === 0) {
-      setupFileState(newFile.id)
-      return
-    }
-    Object.entries(newFile.metadata).forEach(([key, value]) => updateFileData(newFile.id, key, value))
-  }
-}, { immediate: true })
+const selectedState = computed(() => getFileState(firstSelectedFile.value?.id || ''))
+const fileId = computed(() => firstSelectedFile.value?.id || '')
 </script>
 
 <template>
-  <div class="w-full h-full">
-    <template v-if="selectedFiles.length > 0">
-      <EditorFileInformation class="bg-accented/20 rounded-lg" :files="selectedFiles" />
-      <div class="pt-8 pb-14">
-        <BaseCollapsible>
-          <template #title>
-            <span>IPTC-IIM</span>
-          </template>
+  <div v-if="firstSelectedFile" class="w-full h-full">
+    <EditorFileInformation class="bg-accented/20 rounded-lg" :file-ids="getSelectedIds()" />
+    <div class="pt-8 pb-14">
+      <BaseCollapsible v-if="selectedState.length > 0">
+        <template #title>
+          <span>IPTC-IIM</span>
+        </template>
 
-          <template #content>
-            <div class="py-4">
-              <UForm v-if="selectedFile" :state="selectedState">
-                <EditorCategories v-model="selectedState" />
-              </UForm>
-            </div>
-          </template>
-        </BaseCollapsible>
-      </div>
-    </template>
-    <template v-else>
-      <p>No files selected!</p>
-    </template>
+        <template #content>
+          <div class="py-4">
+            <UForm v-if="firstSelectedFile" :state="selectedState">
+              <EditorCategories v-model="selectedState" :file-id="fileId" />
+            </UForm>
+          </div>
+        </template>
+      </BaseCollapsible>
+    </div>
+  </div>
+  <div v-else>
+    <p>No files selected!</p>
   </div>
 </template>

app/components/Editor/Field.vue

@@ -1,27 +1,95 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+defineProps<{
+  fileId: string
+}>()
+
+const { getOriginal } = useFiles()
+
 const field = defineModel<IPTCFieldWithValue>({ required: true })
 
 const extra = defineModel<(IPTCFieldWithValue & { type: 'extra' })[]>('extra', { required: true })
 </script>
 
 <template>
-  <EditorFieldDate v-if="isFieldType('date', field)" v-model="field" />
-  <EditorFieldNumber v-else-if="isFieldType('number', field)" v-model="field" />
-  <EditorFieldTime v-else-if="isFieldType('time', field)" v-model="field" />
-  <EditorFieldSelect v-else-if="isFieldType('select', field)" v-model="field" />
-  <EditorFieldObjectTypeOrAttribute v-else-if="isFieldType('object-type', field) || isFieldType('object-attribute', field)" v-model="field" />
-  <EditorFieldSubject v-else-if="isFieldType('subject-reference', field)" v-model="field" />
-  <EditorFieldTextArea v-else-if="isFieldType('textarea', field)" v-model="field" />
-  <EditorFieldText v-else-if="isFieldType('text', field)" v-model="field" />
-  <EditorFieldSlider v-else-if="isFieldType('slider', field)" v-model="field" />
-  <EditorFieldLocation v-else-if="isFieldType('location', field) && extra[0] && isFieldType('extra', extra[0])" v-model:code="field" v-model:name="extra[0]" />
+  <EditorFieldDate
+    v-if="isFieldType('date', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+
+  <EditorFieldNumber
+    v-else-if="isFieldType('number', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldTime
+    v-else-if="isFieldType('time', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldSelect
+    v-else-if="isFieldType('select', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldObjectTypeOrAttribute
+    v-else-if="isFieldType('object-type', field) || isFieldType('object-attribute', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldSubject
+    v-else-if="isFieldType('subject-reference', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldTextArea
+    v-else-if="isFieldType('textarea', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldText
+    v-else-if="isFieldType('text', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldSlider
+    v-else-if="isFieldType('slider', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldLocation
+    v-else-if="isFieldType('location', field) && extra[0] && isFieldType('extra', extra[0])"
+    v-model:code="field"
+    v-model:name="extra[0]"
+    :file-id="fileId"
+    :original-code="getOriginal(fileId, field.key)"
+    :original-name="getOriginal(fileId, extra[0].key)"
+  />
   <EditorFieldReference
     v-else-if="isFieldType('reference', field) && extra[0] && extra[1] && isFieldType('extra', extra[0]) && isFieldType('extra', extra[1])"
     v-model="field"
     v-model:date="extra[0]"
     v-model:number="extra[1]"
+    :file-id="fileId"
+    :original-service="getOriginal(fileId, field.key)"
+    :original-date="getOriginal(fileId, extra[0].key)"
+    :original-number="getOriginal(fileId, extra[1].key)"
+  />
+  <EditorFieldLanguage
+    v-else-if="isFieldType('language', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
   />
-  <EditorFieldLanguage v-else-if="isFieldType('language', field)" v-model="field" />
 </template>

app/components/Editor/Field/Date.vue

@@ -2,7 +2,9 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 import { CalendarDate } from '@internationalized/date'
 
-defineProps<{
+const props = defineProps<{
+  fileId: string
+  original?: string
   disabled?: boolean
   required?: boolean
 }>()
@@ -51,11 +53,12 @@ function updateDate(newDate?: CalendarDate) {
   }
 }
 
-const hasChanged = useHasChanged(field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" :required="required" @reset="updateDate(parseDate(field.original))">
+  <BaseField v-model="field" :has-changed="hasChanged" :required="required" @reset="updateDate(parseDate(props.original))">
     <template #default="{ error }">
       <UPopover arrow :content="{ side: 'top' }">
         <UButton :color="error ? 'error' : hasChanged ? 'secondary' : 'neutral'" variant="outline" :icon="field.icon ?? 'i-lucide-calendar'" :disabled="disabled" class="w-full h-8">

app/components/Editor/Field/Language.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'language' }>({ required: true })
 
-const hasChanged = useHasChanged(field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 
 const selectedLanguage = computed({
   get: () => languages.find(lang => lang.value === field.value.value),
@@ -14,7 +20,7 @@ const selectedLanguage = computed({
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = props.original ?? ''">
     <BaseSelect
       v-model="selectedLanguage"
       :options="languages"

app/components/Editor/Field/Location.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  originalCode?: string
+  originalName?: string
+}>()
+
 const code = defineModel<IPTCFieldWithValue & { type: 'location' }>('code', { required: true })
 const name = defineModel<IPTCFieldWithValue & { type: 'extra' }>('name', { required: true })
 
-const hasChanged = useHasChanged(code)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, code)
 
 const selectedCountry = computed({
   get: () => ({
@@ -29,7 +36,7 @@ const formattedTitle = computed(() => {
 </script>
 
 <template>
-  <BaseField v-model="code" class="w-full" :title="formattedTitle" :has-changed="hasChanged" @reset="selectedCountry = { label: code.original, value: name.original }">
+  <BaseField v-model="code" class="w-full" :title="formattedTitle" :has-changed="hasChanged" @reset="selectedCountry = { label: originalCode ?? '', value: originalName ?? '' }">
     <BaseSelect
       v-model="selectedCountry"
       :options="countries"

app/components/Editor/Field/Number.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'number' }>({ required: true })
 
 const rawValue = computed<number | undefined>({
@@ -17,11 +22,12 @@ const rawValue = computed<number | undefined>({
   },
 })
 
-const hasChanged = useHasChanged(field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = original ?? ''">
     <UInputNumber
       v-model="rawValue"
       :min="field.minValue"

app/components/Editor/Field/ObjectTypeOrAttribute.vue

@@ -2,6 +2,11 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 import { objectAttributes, objectTypes } from '~/utils/iptc-iim/mapping'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'object-type' | 'object-attribute' }>({ required: true })
 
 const objectData = computed(() => {
@@ -21,11 +26,12 @@ const rawValue = computed({
   },
 })
 
-const hasChanged = useHasChanged(field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = original ?? ''">
     <BaseSelect
       v-model="rawValue"
       :options="selectOptions"