Remove vuex from some document components

assets/vue/components/Toolbar.vue

@@ -1,11 +1,11 @@
 <template>
   <PrimeToolbar>
     <template #start>
-      <PrimeButton
+      <BaseButton
         v-if="handleBack"
         :label="$t('Back')"
-        icon="mdi mdi-arrow-left"
-        class="p-button-outlined"
+        type="primary"
+        icon="back"
         @click="backAction"
       />
 
@@ -26,12 +26,12 @@
         @click="editItem"
       />
 
-      <PrimeButton
+      <BaseButton
         v-if="handleSubmit"
-        :loading="isLoading"
-        :title="$t('Submit')"
-        class="p-button-outlined"
-        icon="mdi mdi-content-save"
+        :is-loading="isLoading"
+        :label="$t('Submit')"
+        type="success"
+        icon="save"
         @click="submitItem"
       />
 
@@ -81,12 +81,14 @@
 </template>
 
 <script>
-import PrimeToolbar from 'primevue/toolbar';
-import PrimeButton from 'primevue/button';
+import PrimeToolbar from "primevue/toolbar"
+import PrimeButton from "primevue/button"
+import BaseButton from "./basecomponents/BaseButton.vue"
 
 export default {
-  name: 'Toolbar',
+  name: "Toolbar",
   components: {
+    BaseButton,
     PrimeToolbar,
     PrimeButton,
   },
@@ -96,105 +98,105 @@ export default {
     },
     handleFilter: {
       type: Function,
-      required: false
+      required: false,
     },
     handleList: {
       type: Function,
-      required: false
+      required: false,
     },
     handleEdit: {
       type: Function,
-      required: false
+      required: false,
     },
     handleBack: {
       type: Function,
-      required: false
+      required: false,
     },
     handleSubmit: {
       type: Function,
-      required: false
+      required: false,
     },
     handleReset: {
       type: Function,
-      required: false
+      required: false,
     },
     handleDelete: {
       type: Function,
-      required: false
+      required: false,
     },
     handleAdd: {
       type: Function,
-      required: false
+      required: false,
     },
     handleSend: {
       type: Function,
-      required: false
+      required: false,
     },
     handleAddDocument: {
       type: Function,
-      required: false
+      required: false,
     },
     onSendFilter: {
       type: Function,
-      required: false
+      required: false,
     },
     resetFilter: {
       type: Function,
-      required: false
+      required: false,
     },
     handleUploadDocument: {
       type: Function,
-      required: false
+      required: false,
     },
     title: {
       type: String,
-      required: false
+      required: false,
     },
     isLoading: {
       type: Boolean,
       required: false,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
   methods: {
     backAction() {
       if (this.handleBack) {
-        this.handleBack();
+        this.handleBack()
       }
     },
     listItem() {
       if (this.handleList) {
-        this.handleList();
+        this.handleList()
       }
     },
     addItem() {
       if (this.handleAdd) {
-        this.handleAdd();
+        this.handleAdd()
       }
     },
     addDocument() {
       if (this.addDocument) {
-        this.handleAddDocument();
+        this.handleAddDocument()
       }
     },
     uploadDocument() {
       if (this.uploadDocument) {
-        this.handleUploadDocument();
+        this.handleUploadDocument()
       }
     },
     editItem() {
       if (this.handleEdit) {
-        this.handleEdit();
+        this.handleEdit()
       }
     },
     sendItem() {
       if (this.handleSend) {
-        this.handleSend();
+        this.handleSend()
       }
     },
     submitItem() {
       if (this.handleSubmit) {
-        this.handleSubmit();
+        this.handleSubmit()
       }
     },
     onHandleDelete() {
@@ -208,9 +210,9 @@ export default {
     },
     resetItem() {
       if (this.handleReset) {
-        this.handleReset();
+        this.handleReset()
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>

assets/vue/components/basecomponents/BaseButton.vue

@@ -13,6 +13,7 @@
     :text="onlyIcon"
     :title="onlyIcon ? label : undefined"
     :type="isSubmit ? 'submit' : 'button'"
+    :loading="isLoading"
     @click="$emit('click', $event)"
   />
 </template>
@@ -62,6 +63,10 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 defineEmits(["click"])

assets/vue/components/documents/DocumentAudioRecorder.vue

@@ -9,7 +9,11 @@
       class="max-w-full self-center mb-4 w-60"
     />
 
-    <audio v-if="audio" class="max-w-full self-center mb-4" controls>
+    <audio
+      v-if="audio"
+      class="max-w-full self-center mb-4"
+      controls
+    >
       <source :src="window.URL.createObjectURL(audio)" />
     </audio>
 
@@ -22,62 +26,76 @@
       @recorded-audio="processAudio($event)"
     />
 
-    <div v-if="audio" class="flex">
-      <BaseButton :label="t('Start recording')" class="mr-2" icon="restart" type="black" @click="recordAudio" />
-      <BaseButton :label="t('Save recorded audio')" class="mr-2" icon="send" type="success" @click="saveAudio" />
+    <div
+      v-if="audio"
+      class="flex"
+    >
+      <BaseButton
+        :label="t('Start recording')"
+        class="mr-2"
+        icon="restart"
+        type="black"
+        @click="recordAudio"
+      />
+      <BaseButton
+        :label="t('Save recorded audio')"
+        class="mr-2"
+        icon="send"
+        type="success"
+        @click="saveAudio"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
-import BaseInputText from "../basecomponents/BaseInputText.vue";
-import AudioRecorder from "../AudioRecorder.vue";
-import BaseButton from "../basecomponents/BaseButton.vue";
-import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility";
-import { useCidReq } from "../../composables/cidReq";
+import { ref } from "vue"
+import { useI18n } from "vue-i18n"
+import BaseInputText from "../basecomponents/BaseInputText.vue"
+import AudioRecorder from "../AudioRecorder.vue"
+import BaseButton from "../basecomponents/BaseButton.vue"
+import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility"
+import { useCidReq } from "../../composables/cidReq"
+import documentsService from "../../services/documents"
 
-const { t } = useI18n();
-const queryParams = useCidReq();
-const store = useStore();
+const { t } = useI18n()
+const queryParams = useCidReq()
 
 const props = defineProps({
   parentResourceNodeId: {
     type: String,
     required: true,
   },
-});
+})
 
-const emit = defineEmits(["document-saved", "document-not-saved"]);
+const emit = defineEmits(["document-saved", "document-not-saved"])
 
-const recordName = ref("");
-const recordError = ref("");
-const audioRecorder = ref(null);
-const showAudioRecorderButtons = ref(true);
-const audio = ref();
+const recordName = ref("")
+const recordError = ref("")
+const audioRecorder = ref(null)
+const showAudioRecorderButtons = ref(true)
+const audio = ref()
 
 const processAudio = (recordedAudio) => {
-  audio.value = recordedAudio;
-  showAudioRecorderButtons.value = false;
-};
+  audio.value = recordedAudio
+  showAudioRecorderButtons.value = false
+}
 
 const recordAudio = () => {
-  recordError.value = "";
-  audio.value = null;
-  showAudioRecorderButtons.value = true;
-  audioRecorder.value.record();
-};
+  recordError.value = ""
+  audio.value = null
+  showAudioRecorderButtons.value = true
+  audioRecorder.value.record()
+}
 
-const saveAudio = () => {
+const saveAudio = async () => {
   if (recordName.value === "") {
-    recordError.value = t("It is necessary a file name before save recorded audio");
-    return;
+    recordError.value = t("It is necessary a file name before save recorded audio")
+    return
   }
 
-  let fileName = recordName.value + ".wav";
-  let uploadFile = new File([audio.value], fileName);
+  let fileName = recordName.value + ".wav"
+  let uploadFile = new File([audio.value], fileName)
   let data = {
     title: fileName,
     filetype: "file",
@@ -89,10 +107,13 @@ const saveAudio = () => {
         visibility: RESOURCE_LINK_PUBLISHED,
       },
     ]),
-  };
-  store
-    .dispatch("documents/createWithFormData", data)
-    .then(() => emit("document-saved"))
-    .catch((error) => emit("document-not-saved", error));
-};
+  }
+
+  try {
+    await documentsService.createWithFormData(data)
+    emit("document-saved")
+  } catch (error) {
+    emit("document-not-saved", error)
+  }
+}
 </script>