feat: ✨ add exec query btton [skip ci]

haydenull · Mar 4, 2022 · 4ebb51f · 4ebb51f
1 parent 5e99ee0
commit 4ebb51f
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 11 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -147,6 +147,7 @@ const App: React.FC<{ env: string }> = ({ env }) => {
   }
   const onSettingChange = (values: ISettingsForm) => {
     console.log('[faiz:] === onSettingChange', values)
+    logseq.updateSettings({calendarList: 1})
     logseq.updateSettings(values)
     if (values.weekStartDay !== logseq.settings?.weekStartDay) {
       calendarRef.current?.setOptions({

diff --git a/src/components/QueryModal.tsx b/src/components/QueryModal.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import { Modal, Form, Input, Button, Row, Col, Radio } from 'antd'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
-import { ISettingsForm, ISettingsFormQuery } from '../util/util'
+import { Modal, Form, Input, Button, Row, Col, Radio, Tooltip } from 'antd'
+import { MinusCircleOutlined, PlusOutlined, PlayCircleOutlined } from '@ant-design/icons'
+import { ISettingsForm, ISettingsFormQuery, log } from '../util/util'
 
 const QueryModal: React.FC<Partial<{
   visible: boolean
@@ -17,6 +17,24 @@ const QueryModal: React.FC<Partial<{
     onOk?.(_values?.query)
   }
 
+  const onClickPlay = async (index) => {
+    const queryItem = form.getFieldsValue(true)?.query[index]
+    if (queryItem) {
+      console.log('')
+      log('[faiz:] === start exec your query:\n', 'blue')
+      console.log(queryItem?.script)
+      try {
+        const res = await logseq.DB.datascriptQuery(queryItem.script)
+        log('[faiz:] === exec your query success:\n', 'green')
+        console.log(res)
+      } catch (error) {
+        log('[faiz:] === exec your query failed:\n', 'red')
+        console.error(error)
+      }
+      console.log('')
+    }
+  }
+
   return (
     <Modal
       {...props}
@@ -58,7 +76,12 @@ const QueryModal: React.FC<Partial<{
                       </Col>
                     </Row>
                   </Form.Item>
-                  { index !== 0 && <MinusCircleOutlined className="absolute bottom-4 right-4" onClick={() => remove(field.name)} /> }
+                  <div className="absolute bottom-4 right-4">
+                    <Tooltip title="Execute this query statement in DevTool">
+                      <PlayCircleOutlined onClick={() => onClickPlay(index)} />
+                    </Tooltip>
+                    { index !== 0 && <MinusCircleOutlined className="ml-2" onClick={() => remove(field.name)} /> }
+                  </div>
                 </div>
               ))}
               <Form.Item>

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
-import { Modal, Form, Select, Input, Button, Switch } from 'antd'
+import { Modal, Form, Select, Input, Button, Switch, Tooltip, Popconfirm } from 'antd'
 import { QuestionCircleOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import { genDefaultQuery, getInitalSettings, ISettingsForm, ISettingsFormQuery } from '../util/util'
 import { useForm } from 'antd/lib/form/Form'
 import ColorPicker from './ColorPicker'
-import { CALENDAR_VIEWS } from '../util/constants'
+import { CALENDAR_VIEWS, DEFAULT_SETTINGS } from '../util/constants'
 import Query from './Query'
 import CreateCalendarModal from './CreateCalendarModal'
 
@@ -46,10 +46,26 @@ const Settings: React.FC<{
         width={700}
         destroyOnClose
         title="Calendar Setting"
-        okText="Save"
         visible={visible}
-        onCancel={onCancel}
-        onOk={onClickSettingSave}
+        footer={
+          <div className="flex justify-between" onClick={e => e?.stopPropagation?.()}>
+            <Popconfirm
+              title="Are you sure you want to restore default setting?"
+              onConfirm={() => {
+                logseq.updateSettings({ calendarList: 1 })
+                logseq.updateSettings(DEFAULT_SETTINGS)
+                window.location.reload()
+              }}
+              onCancel={() => { }}
+            >
+              <Button type="link" onClick={onCancel}>Restore Defaults</Button>
+            </Popconfirm>
+            <div>
+              <Button onClick={onCancel}>Cancel</Button>
+              <Button type="primary" onClick={onClickSettingSave}>Save</Button>
+            </div>
+          </div>
+        }
       >
         <Form initialValues={initialValues} labelCol={{ span: 7 }} preserve={true} form={settingForm}>
           <Form.Item label="Default View" name="defaultView" rules={[{ required: true }]}>
@@ -64,7 +80,9 @@ const Settings: React.FC<{
           <Form.Item label="Journal Date Formatter" required labelCol={{ span: 9 }}>
             <div className="flex items-center">
               <Form.Item name="journalDateFormatter" noStyle rules={[{ required: true }]} getValueFromEvent={(e) => e.target.value.trim()}><Input /></Form.Item>
-              <QuestionCircleOutlined className="ml-1" onClick={() => logseq.App.openExternalLink('https://day.js.org/docs/en/display/format')} />
+              <Tooltip title="View Formatter's rules">
+                <QuestionCircleOutlined className="ml-1" onClick={() => logseq.App.openExternalLink('https://day.js.org/docs/en/display/format')} />
+              </Tooltip>
             </div>
           </Form.Item>
           <Form.Item label="Log Key" name="logKey" getValueFromEvent={(e) => e.target.value.trim()}>

diff --git a/src/util/util.ts b/src/util/util.ts
@@ -42,6 +42,39 @@ export const getInitalSettings = (): ISettingsForm => {
   }
 }
 
+// {:query
+//   [:find
+//    (pull
+//     ?b
+//     [:db/id
+//      :block/uuid
+//      :block/parent
+//      :block/left
+//      :block/collapsed?
+//      :block/format
+//      :block/refs
+//      :block/_refs
+//      :block/path-refs
+//      :block/tags
+//      :block/content
+//      :block/marker
+//      :block/priority
+//      :block/properties
+//      :block/pre-block?
+//      :block/scheduled
+//      :block/deadline
+//      :block/repeated?
+//      :block/created-at
+//      :block/updated-at
+//      :block/file
+//      :block/heading-level
+//      {:block/page
+//       [:db/id :block/name :block/original-name :block/journal-day]}
+//      {:block/_parent ...}])
+//    :where
+//    [?b :block/path-refs [:block/name "daily log"]]],
+//   :query-string "[[Daily Log]]"}
+
 type IQueryWithCalendar = {
   calendarConfig: ISettingsForm['calendarList'][number]
   query: ISettingsFormQuery
@@ -457,4 +490,6 @@ export const genDefaultQuery = (pageName: string) => {
       }
     ],
   }
-}
+}
+
+export const log = (msg, color='blue') => console.log(`%c${msg}`, `color:${color}`)