Home.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <div class="bg-accent rounded-b-2xl absolute top-0 left-0 h-32 w-full"></div>
  3. <div
  4. class="flex dark placeholder-black text-white px-5 pt-8 mb-6 items-center"
  5. >
  6. <ui-input
  7. v-model="query"
  8. autofocus
  9. prepend-icon="riSearch2Line"
  10. class="flex-1 search-input"
  11. placeholder="Search..."
  12. ></ui-input>
  13. <ui-button
  14. v-tooltip="
  15. haveAccess ? 'Element selector' : 'Don\'t have access to this site'
  16. "
  17. icon
  18. class="ml-3"
  19. @click="selectElement"
  20. >
  21. <v-remixicon name="riFocus3Line" />
  22. </ui-button>
  23. <ui-button icon title="Dashboard" class="ml-3" @click="openDashboard">
  24. <v-remixicon name="riHome5Line" />
  25. </ui-button>
  26. </div>
  27. <div class="px-5 pb-5 space-y-2">
  28. <ui-card v-if="Workflow.all().length === 0" class="text-center">
  29. <img src="@/assets/svg/alien.svg" />
  30. <p class="font-semibold">It looks like you don't have any workflows</p>
  31. <ui-button
  32. variant="accent"
  33. class="mt-6"
  34. @click="openDashboard('/workflows')"
  35. >
  36. New workflow
  37. </ui-button>
  38. </ui-card>
  39. <home-workflow-card
  40. v-for="workflow in workflows"
  41. :key="workflow.id"
  42. :workflow="workflow"
  43. @details="openDashboard(`/workflows/${$event.id}`)"
  44. @execute="executeWorkflow"
  45. @rename="renameWorkflow"
  46. @delete="deleteWorkflow"
  47. />
  48. </div>
  49. </template>
  50. <script setup>
  51. import { ref, computed, onMounted } from 'vue';
  52. import browser from 'webextension-polyfill';
  53. import { useDialog } from '@/composable/dialog';
  54. import { sendMessage } from '@/utils/message';
  55. import Workflow from '@/models/workflow';
  56. import HomeWorkflowCard from '@/components/popup/home/HomeWorkflowCard.vue';
  57. const dialog = useDialog();
  58. const query = ref('');
  59. const haveAccess = ref(true);
  60. const workflows = computed(() =>
  61. Workflow.query()
  62. .where(({ name }) =>
  63. name.toLocaleLowerCase().includes(query.value.toLocaleLowerCase())
  64. )
  65. .orderBy('createdAt', 'desc')
  66. .get()
  67. );
  68. function executeWorkflow(workflow) {
  69. sendMessage('workflow:execute', workflow, 'background');
  70. }
  71. function renameWorkflow({ id, name }) {
  72. dialog.prompt({
  73. title: 'Rename workflow',
  74. placeholder: 'Workflow name',
  75. okText: 'Rename',
  76. inputValue: name,
  77. onConfirm: (newName) => {
  78. Workflow.update({
  79. where: id,
  80. data: {
  81. name: newName,
  82. },
  83. });
  84. },
  85. });
  86. }
  87. function deleteWorkflow({ id, name }) {
  88. dialog.confirm({
  89. title: 'Delete workflow',
  90. okVariant: 'danger',
  91. body: `Are you sure you want to delete "${name}" workflow?`,
  92. onConfirm: () => {
  93. Workflow.delete(id);
  94. },
  95. });
  96. }
  97. function openDashboard(url) {
  98. const tabOptions = {
  99. active: true,
  100. url: browser.runtime.getURL(
  101. `/newtab.html#${typeof url === 'string' ? url : ''}`
  102. ),
  103. };
  104. browser.tabs
  105. .query({ url: browser.runtime.getURL('/newtab.html') })
  106. .then(([tab]) => {
  107. if (tab) {
  108. browser.tabs.update(tab.id, tabOptions).then(() => {
  109. browser.tabs.reload(tab.id);
  110. });
  111. } else {
  112. browser.tabs.create(tabOptions);
  113. }
  114. });
  115. }
  116. async function selectElement() {
  117. const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
  118. try {
  119. await browser.tabs.sendMessage(tab.id, {
  120. type: 'content-script-exists',
  121. });
  122. browser.tabs.sendMessage(tab.id, {
  123. type: 'select-element',
  124. });
  125. } catch (error) {
  126. if (error.message.includes('Could not establish connection.')) {
  127. await browser.tabs.executeScript(tab.id, {
  128. file: './contentScript.bundle.js',
  129. });
  130. selectElement();
  131. }
  132. console.error(error);
  133. }
  134. }
  135. onMounted(async () => {
  136. const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
  137. haveAccess.value = /^(https?)/.test(tab.url);
  138. });
  139. </script>