build version 400

resources/assets/js/components/base/popup/NoteSelectPopup.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="tax-select">
+    <div class="flex flex-col w-full px-4 py-4">
+      <div class="relative flex w-full mb-2">
+        <sw-input
+          v-model="textSearch"
+          :placeholder="$t('general.search')"
+          focus
+          class="text-black"
+          icon="search"
+          type="text"
+        />
+      </div>
+      <div
+        v-if="filteredNotes.length > 0"
+        class="relative flex flex-col overflow-auto sw-scroll list"
+        style="max-height: 112px"
+      >
+        <div
+          v-for="(note, index) in filteredNotes"
+          :key="index"
+          class="flex justify-between p-4 border-b border-gray-200 border-solid cursor-pointer list-item last:border-b-0 hover:bg-gray-100"
+          @click="selectNote(index)"
+        >
+          <label
+            class="inline-block m-0 text-base font-normal leading-tight text-black font-base"
+          >
+            {{ note.name }}
+          </label>
+        </div>
+      </div>
+      <div v-else class="flex justify-center p-5 text-gray-400">
+        <label class="m-0">{{ $t('general.no_note_found') }}</label>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="flex items-center justify-center w-full px-2 py-3 bg-gray-200 border-none outline-none"
+      @click="openNoteModal"
+    >
+      <check-circle-icon class="h-5" />
+      <label
+        class="m-0 ml-3 text-sm leading-none cursor-pointer font-base text-primary-400"
+      >
+        {{ $t('settings.customization.notes.add_new_note') }}
+      </label>
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import { CheckCircleIcon } from '@vue-hero-icons/solid'
+
+export default {
+  components: {
+    CheckCircleIcon,
+  },
+  props: {
+    type: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      textSearch: null,
+    }
+  },
+  computed: {
+    ...mapGetters('notes', ['notes']),
+
+    filteredNotes() {
+      if (this.textSearch) {
+        var textSearch = this.textSearch
+        return this.notes.filter(function (el) {
+          return el.name.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1
+        })
+      } else {
+        return this.notes
+      }
+    },
+  },
+  created() {
+    this.fetchInitialData()
+  },
+  methods: {
+    ...mapActions('modal', ['openModal']),
+    ...mapActions('notes', ['fetchNotes']),
+    selectNote(index) {
+      this.$emit('select', { ...this.notes[index] })
+    },
+
+    async fetchInitialData() {
+      await this.fetchNotes({
+        filter: {},
+        orderByField: '',
+        orderBy: '',
+        type: this.type ? this.type : '',
+      })
+    },
+
+    openNoteModal() {
+      this.openModal({
+        title: this.$t('settings.customization.notes.add_note'),
+        componentName: 'NoteSelectModal',
+        variant: 'lg',
+        data: this.type,
+      })
+    },
+  },
+}
+</script>