Refactor grid

lukso-network · Oct 18, 2024 · cc640cc · cc640cc
1 parent d4b34e0
commit cc640cc
Show file tree

Hide file tree

Showing 31 changed files with 459 additions and 462 deletions.
diff --git a/app.vue b/app.vue
@@ -23,7 +23,7 @@ const { cacheValue } = useCache()
 const { currencyList } = storeToRefs(useCurrencyStore())
 const { initProvider, reconnect } = useWalletConnectProvider()
 const { formatMessage } = useIntl()
-const { gridChainId, tempGridLayout } = storeToRefs(useGridStore())
+const { gridChainId, tempGrid } = storeToRefs(useGridStore())
 
 const setupTranslations = () => {
   useIntl().setupIntl(defaultConfig)
@@ -117,7 +117,7 @@ const setupNetwork = async () => {
 
     // reset temp grid layout if network is changed
     if (gridChainId.value !== selectedChainId.value) {
-      tempGridLayout.value = []
+      tempGrid.value = []
     }
 
     gridChainId.value = selectedChainId.value

diff --git a/components/ModalTemplateAddEditGrid.vue b/components/ModalTemplateAddEditGrid.vue
@@ -4,7 +4,7 @@ import type { SelectStringOption } from '@lukso/web-components'
 
 const { modal, closeModal } = useModal()
 const { formatMessage } = useIntl()
-const { tempGridLayout, selectedLayoutId } = storeToRefs(useGridStore())
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
 const { addGrid, updateGrid } = useGrid()
 
 const INPUT_FOCUS_DELAY = 10 // small delay for focusing input after element render
@@ -73,13 +73,13 @@ const handleSave = () => {
     })
   } else {
     const newGrid: Grid<GridWidget> = {
-      id: createGridId<GridWidget>(grid, tempGridLayout.value),
+      id: createGridId<GridWidget>(grid, tempGrid.value),
       ...grid,
       grid: [],
     }
 
     addGrid(newGrid)
-    selectedLayoutId.value = newGrid.id
+    selectedGridId.value = newGrid.id
   }
 
   handleCancel()

diff --git a/components/ModalTemplateDeleteGridWidget.vue b/components/ModalTemplateDeleteGridWidget.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 const { closeModal, modal } = useModal()
 const { formatMessage } = useIntl()
-const { removeGridLayoutItem } = useGrid()
+const { removeGridWidget } = useGrid()
 
 const handleDelete = async () => {
-  removeGridLayoutItem(modal?.data?.id)
+  removeGridWidget(modal?.data?.id)
   closeModal()
 }
 </script>

diff --git a/components/ModalTemplateMoveGridWidget.vue b/components/ModalTemplateMoveGridWidget.vue
@@ -3,25 +3,21 @@ import type { SelectStringOption } from '@lukso/web-components'
 
 const { modal, closeModal } = useModal()
 const { formatMessage } = useIntl()
-const { tempGridLayout, selectedLayoutId } = storeToRefs(useGridStore())
-const { addGridLayoutItem, removeGridLayoutItem, getGridById } = useGrid()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const { addGridWidget, removeGridWidget, getGridById } = useGrid()
 const selectedOption = ref<string>()
 
-const canSubmit = computed(
-  () => selectedOption.value !== selectedLayoutId.value
-)
+const canSubmit = computed(() => selectedOption.value !== selectedGridId.value)
 
 const options = computed<SelectStringOption[]>(() => {
-  return tempGridLayout.value.map(grid => ({
+  return tempGrid.value.map(grid => ({
     id: grid.id,
     value: grid.title,
   }))
 })
 
 const selectedOptionValue = computed(() => {
-  const grid = tempGridLayout.value.find(
-    grid => grid.id === selectedOption.value
-  )
+  const grid = tempGrid.value.find(grid => grid.id === selectedOption.value)
   return {
     id: grid?.id,
     value: grid?.title,
@@ -50,16 +46,16 @@ const handleSave = () => {
     h: modal?.data?.h,
   })
 
-  removeGridLayoutItem(modal?.data?.id)
-  addGridLayoutItem(
+  removeGridWidget(modal?.data?.id)
+  addGridWidget(
     duplicatedWidget,
-    getGridById(tempGridLayout.value, selectedOption.value)
+    getGridById(tempGrid.value, selectedOption.value)
   )
   handleCancel()
 }
 
 onMounted(() => {
-  selectedOption.value = selectedLayoutId.value
+  selectedOption.value = selectedGridId.value
 })
 </script>
 

diff --git a/domains/grid/components/AddWidgetBasic.vue b/domains/grid/components/AddWidgetBasic.vue
@@ -10,8 +10,8 @@ type Props = {
 const props = defineProps<Props>()
 const { formatMessage } = useIntl()
 const { closeModal, showModal } = useModal()
-const { addGridLayoutItem, updateGridLayoutItem, getGridById } = useGrid()
-const { tempGridLayout, selectedLayoutId } = storeToRefs(useGridStore())
+const { addGridWidget, updateGridWidget, getGridById } = useGrid()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
 
 const TEXTAREA_FOCUS_DELAY = 10 // small delay for focusing textarea after element render
 const inputValue = ref('')
@@ -30,7 +30,7 @@ const handleSave = () => {
   }
 
   if (isEdit.value) {
-    updateGridLayoutItem(props.id, {
+    updateGridWidget(props.id, {
       properties,
       w: props.width,
       h: props.height,
@@ -43,10 +43,7 @@ const handleSave = () => {
       h: props.height,
     })
 
-    addGridLayoutItem(
-      newWidget,
-      getGridById(tempGridLayout.value, selectedLayoutId.value)
-    )
+    addGridWidget(newWidget, getGridById(tempGrid.value, selectedGridId.value))
   }
 
   handleCancel()

diff --git a/domains/grid/components/AddWidgetGenericPlatform.vue b/domains/grid/components/AddWidgetGenericPlatform.vue
@@ -10,8 +10,8 @@ type Props = {
 const props = defineProps<Props>()
 const { formatMessage } = useIntl()
 const { closeModal, showModal } = useModal()
-const { addGridLayoutItem, updateGridLayoutItem, getGridById } = useGrid()
-const { tempGridLayout, selectedLayoutId } = storeToRefs(useGridStore())
+const { addGridWidget, updateGridWidget, getGridById } = useGrid()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
 
 const TEXTAREA_FOCUS_DELAY = 10 // small delay for focusing textarea after element render
 const inputValue = ref('')
@@ -32,7 +32,7 @@ const handleSave = async () => {
     )
 
     if (isEdit.value) {
-      updateGridLayoutItem(props.id, {
+      updateGridWidget(props.id, {
         properties,
         w: props.width,
         h: props.height,
@@ -45,9 +45,9 @@ const handleSave = async () => {
         h: props.height,
       })
 
-      addGridLayoutItem(
+      addGridWidget(
         newWidget,
-        getGridById(tempGridLayout.value, selectedLayoutId.value)
+        getGridById(tempGrid.value, selectedGridId.value)
       )
     }
 

diff --git a/domains/grid/components/AddWidgetText.vue b/domains/grid/components/AddWidgetText.vue
@@ -12,8 +12,8 @@ type Props = {
 const props = defineProps<Props>()
 const { formatMessage } = useIntl()
 const { closeModal, showModal } = useModal()
-const { addGridLayoutItem, updateGridLayoutItem, getGridById } = useGrid()
-const { tempGridLayout, selectedLayoutId } = storeToRefs(useGridStore())
+const { addGridWidget, updateGridWidget, getGridById } = useGrid()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
 
 const INPUT_FOCUS_DELAY = 10 // small delay for focusing input after element render
 const DEFAULT_PROPERTIES = {
@@ -41,7 +41,7 @@ const handleSave = () => {
   const properties = toRaw(inputValues)
 
   if (isEdit.value) {
-    updateGridLayoutItem(props.id, {
+    updateGridWidget(props.id, {
       properties,
       w: props.width,
       h: props.height,
@@ -54,10 +54,7 @@ const handleSave = () => {
       h: props.height,
     })
 
-    addGridLayoutItem(
-      newWidget,
-      getGridById(tempGridLayout.value, selectedLayoutId.value)
-    )
+    addGridWidget(newWidget, getGridById(tempGrid.value, selectedGridId.value))
   }
 
   handleCancel()

diff --git a/domains/grid/components/GridTabs.vue b/domains/grid/components/GridTabs.vue
@@ -8,7 +8,7 @@ type Props = {
 }
 
 const props = defineProps<Props>()
-const { selectedLayoutId } = storeToRefs(useGridStore())
+const { selectedGridId } = storeToRefs(useGridStore())
 const { formatMessage } = useIntl()
 const { showModal } = useModal()
 const { canEditGrid } = useGrid()
@@ -40,7 +40,7 @@ const handleAddGrid = () => {
         v-for="tab in tabs"
         :key="tab.grid.id"
         :grid="tab.grid"
-        :is-active="tab.grid.id === selectedLayoutId"
+        :is-active="tab.grid.id === selectedGridId"
       />
       <li
         v-if="canEditGrid"

diff --git a/domains/grid/components/GridTabsItem.vue b/domains/grid/components/GridTabsItem.vue
@@ -10,7 +10,7 @@ const props = defineProps<Props>()
 const { formatMessage } = useIntl()
 const { canEditGrid, addGrid } = useGrid()
 const { showModal } = useModal()
-const { selectedLayoutId, tempGridLayout } = storeToRefs(useGridStore())
+const { selectedGridId, tempGrid } = storeToRefs(useGridStore())
 const dropdownId = `dropdown-${generateItemId()}`
 
 const styleVariants = tv({
@@ -60,18 +60,18 @@ const handleDelete = () => {
 
 const handleDuplicate = () => {
   const newGrid: Grid<GridWidget> = {
-    id: createGridId<GridWidget>(props.grid, tempGridLayout.value),
+    id: createGridId<GridWidget>(props.grid, tempGrid.value),
     title: formatMessage('grid_tabs_copy_of', { title: props.grid.title }),
     grid: props.grid.grid,
     gridColumns: props.grid.gridColumns,
   }
 
   addGrid(newGrid)
-  selectedLayoutId.value = newGrid.id
+  selectedGridId.value = newGrid.id
 }
 
 const handleSelectTab = (id: string) => {
-  selectedLayoutId.value = id
+  selectedGridId.value = id
 }
 </script>