Migrate description page to Composition API & use omorphia components

pages/[type]/[id]/settings/description.vue

@@ -16,7 +16,7 @@
       <MarkdownEditor
         v-model="description"
         :on-image-upload="onUploadHandler"
-        :disabled="(currentMember.permissions & EDIT_BODY) !== EDIT_BODY"
+        :disabled="(props.currentMember.permissions & EDIT_BODY) !== EDIT_BODY"
       />
       <div class="input-group markdown-disclaimer">
         <button
@@ -33,91 +33,75 @@
   </div>
 </template>
 
-<script>
-import { MarkdownEditor } from 'omorphia'
-import Chips from '~/components/ui/Chips.vue'
-import SaveIcon from '~/assets/images/utils/save.svg'
-import { renderHighlightedString } from '~/helpers/highlight.js'
+<script setup>
+import { MarkdownEditor, SaveIcon } from 'omorphia'
 import { useImageUpload } from '~/composables/image-upload.ts'
 
-export default defineNuxtComponent({
-  components: {
-    Chips,
-    SaveIcon,
-    MarkdownEditor,
-  },
-  props: {
-    project: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    allMembers: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    currentMember: {
-      type: Object,
-      default() {
-        return null
-      },
+const props = defineProps({
+  project: {
+    type: Object,
+    default() {
+      return {}
     },
-    patchProject: {
-      type: Function,
-      default() {
-        return () => {
-          this.$notify({
-            group: 'main',
-            title: 'An error occurred',
-            text: 'Patch project function not found',
-            type: 'error',
-          })
-        }
-      },
-    },
-  },
-  data() {
-    return {
-      description: this.project.body,
-      bodyViewMode: 'source',
-    }
   },
-  computed: {
-    patchData() {
-      const data = {}
-
-      if (this.description !== this.project.body) {
-        data.body = this.description
-      }
-
-      return data
-    },
-    hasChanges() {
-      return Object.keys(this.patchData).length > 0
+  allMembers: {
+    type: Array,
+    default() {
+      return []
     },
   },
-  created() {
-    this.EDIT_BODY = 1 << 3
+  currentMember: {
+    type: Object,
+    default() {
+      return null
+    },
   },
-  methods: {
-    renderHighlightedString,
-    saveChanges() {
-      if (this.hasChanges) {
-        this.patchProject(this.patchData)
+  patchProject: {
+    type: Function,
+    default() {
+      return () => {
+        addNotification({
+          group: 'main',
+          title: 'An error occurred',
+          text: 'Patch project function not found',
+          type: 'error',
+        })
       }
     },
-    async onUploadHandler(file) {
-      const response = await useImageUpload(file, {
-        context: 'project',
-        projectID: this.project.id,
-      })
-      return response.url
-    },
   },
 })
+
+const description = ref(props.project.body)
+
+const EDIT_BODY = 1 << 3
+
+const patchData = computed(() => {
+  const data = {}
+
+  if (description.value !== props.project.body) {
+    data.body = description.value
+  }
+
+  return data
+})
+
+const hasChanges = computed(() => {
+  return Object.keys(patchData.value).length > 0
+})
+
+function saveChanges() {
+  if (hasChanges.value) {
+    props.patchProject(patchData.value)
+  }
+}
+
+async function onUploadHandler(file) {
+  const response = await useImageUpload(file, {
+    context: 'project',
+    projectID: props.project.id,
+  })
+  return response.url
+}
 </script>
 
 <style scoped>