Migrate EditList.vue

front/src/components/library/EditCard.vue

@@ -98,6 +98,7 @@ const updatedFields = computed(() => {
 
     if (state?.[id]) {
       const oldState = state[id]
+      console.log(oldState)
       result.old = oldState
       result.oldRepr = getValueRepr(typeof oldState === 'string' ? oldState : oldState?.value) ?? ''
 

front/src/components/library/EditList.vue

@@ -1,3 +1,49 @@
+<script setup lang="ts">
+import type { BackendError, ReviewState, Review } from '~/types'
+import { ref, watchEffect } from 'vue'
+
+import axios from 'axios'
+
+import EditCard from '~/components/library/EditCard.vue'
+
+interface Props {
+  url: string
+  filters?: object
+  currentState?: ReviewState
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  filters: () => ({}),
+  currentState: () => ({})
+})
+
+const errors = ref([] as string[])
+const previousPage = ref()
+const nextPage = ref()
+const objects = ref([] as Review[])
+const isLoading = ref(false)
+const fetchData = async (url = props.url) => {
+  isLoading.value = true
+  const params = {
+    ...props.filters,
+    page_size: 5
+  }
+
+  try {
+    const response = await axios.get(url, { params })
+    previousPage.value = response.data.previous
+    nextPage.value = response.data.next
+    objects.value = response.data.results
+  } catch (error) {
+    errors.value = (error as BackendError).backendErrors
+  }
+
+  isLoading.value = false
+}
+
+watchEffect(() => fetchData())
+</script>
+
 <template>
   <div class="wrapper">
     <h3 class="ui header">
@@ -9,7 +55,7 @@
     />
     <button
       v-if="nextPage || previousPage"
-      :disabled="!previousPage || null"
+      :disabled="!previousPage"
       :class="['ui', {disabled: !previousPage}, 'circular', 'icon', 'basic', 'button']"
       @click="fetchData(previousPage)"
     >
@@ -17,7 +63,7 @@
     </button>
     <button
       v-if="nextPage || previousPage"
-      :disabled="!nextPage || null"
+      :disabled="!nextPage"
       :class="['ui', {disabled: !nextPage}, 'circular', 'icon', 'basic', 'button']"
       @click="fetchData(nextPage)"
     >
@@ -40,62 +86,3 @@
     />
   </div>
 </template>
-
-<script>
-import { clone } from 'lodash-es'
-import axios from 'axios'
-
-import EditCard from '~/components/library/EditCard.vue'
-
-export default {
-  components: {
-    EditCard
-  },
-  props: {
-    url: { type: String, required: true },
-    filters: { type: Object, required: false, default: () => { return {} } },
-    currentState: { type: Object, required: false, default: () => { return { } } }
-  },
-  data () {
-    return {
-      objects: [],
-      limit: 5,
-      isLoading: false,
-      errors: null,
-      previousPage: null,
-      nextPage: null
-    }
-  },
-  watch: {
-    filters: {
-      handler () {
-        this.fetchData(this.url)
-      },
-      deep: true
-    }
-  },
-  created () {
-    this.fetchData(this.url)
-  },
-  methods: {
-    fetchData (url) {
-      if (!url) {
-        return
-      }
-      this.isLoading = true
-      const self = this
-      const params = clone(this.filters)
-      params.page_size = this.limit
-      axios.get(url, { params }).then((response) => {
-        self.previousPage = response.data.previous
-        self.nextPage = response.data.next
-        self.isLoading = false
-        self.objects = response.data.results
-      }, error => {
-        self.isLoading = false
-        self.errors = error.backendErrors
-      })
-    }
-  }
-}
-</script>

front/src/types.ts

@@ -407,8 +407,8 @@ export interface ReviewState {
 
 export interface Review {
   uuid: string
-  is_applied: boolean
-  is_approved: boolean
+  is_applied: boolean | null
+  is_approved: boolean | null
   created_by: Actor
   previous_state: ReviewState
   payload: ReviewState