Inputform.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div class="flex-col">
  3. <div class="show-on-large-screen">
  4. <input
  5. v-model="message"
  6. :aria-label="$t('label')"
  7. type="text"
  8. autofocus
  9. :placeholder="$t('paste_a_note')"
  10. class="rounded-t-lg"
  11. @keyup.enter="formPost"
  12. />
  13. </div>
  14. <div class="border-b show-on-large-screen border-divider">
  15. <input
  16. v-model="label"
  17. :aria-label="$t('label')"
  18. type="text"
  19. autofocus
  20. :placeholder="$t('label')"
  21. @keyup.enter="formPost"
  22. />
  23. <button
  24. class="icon"
  25. :disabled="!(message || label)"
  26. value="Save"
  27. @click="formPost"
  28. >
  29. <i class="material-icons">add</i>
  30. <span>Add</span>
  31. </button>
  32. </div>
  33. </div>
  34. </template>
  35. <script lang="ts">
  36. import Vue from "vue"
  37. import { writeFeed } from "~/helpers/fb/feeds"
  38. export default Vue.extend({
  39. data() {
  40. return {
  41. message: null as string | null,
  42. label: null as string | null,
  43. }
  44. },
  45. methods: {
  46. formPost() {
  47. // TODO: Check this ?
  48. if (!(this.message || this.label)) {
  49. return
  50. }
  51. writeFeed(this.label as string, this.message as string)
  52. this.message = null
  53. this.label = null
  54. },
  55. },
  56. })
  57. </script>