8000 chore(web): refactor asset and func id handling by paulocsanz · Pull Request #2711 · systeminit/si · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

chore(web): refactor asset and func id handling #2711

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 29, 2023
Merged

chore(web): refactor asset and func id handling #2711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/web/src/components/AssetDetailsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ const cloneAsset = async () => {
if (assetStore.selectedAsset?.id) {
const result = await assetStore.CLONE_ASSET(assetStore.selectedAsset.id);
if (result.result.success) {
assetStore.SELECT_ASSET(result.result.data.id);
assetStore.selectAsset(result.result.data.id);
}
}
};
Expand Down
47 changes: 14 additions & 33 deletions app/web/src/components/AssetEditorTabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@
<script lang="ts" setup>
import isEqual from "lodash-es/isEqual";
import { watch, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
TabGroup,
TabGroupItem,
Expand All @@ -60,13 +59,11 @@ import FuncEditor from "./FuncEditor/FuncEditor.vue";

const assetStore = useAssetStore();
const funcStore = useFuncStore();
const route = useRoute();
const router = useRouter();

const tabGroupRef = ref<InstanceType<typeof TabGroup>>();

const selectedFuncId = computed(() => assetStore.urlSelectedFuncId);
const selectedAssetId = computed(() => assetStore.urlSelectedAssetId);
const selectedFuncId = computed(() => assetStore.selectedFuncId);
const selectedAssetId = computed(() => assetStore.selectedAssetId);

const loadAssetsRequestStatus = assetStore.getRequestStatus("LOAD_ASSET_LIST");

Expand All @@ -78,7 +75,7 @@ const currentTabs = ref<{ type: string; label: string; id: string }[]>([]);
watch(
[
loadAssetsRequestStatus,
() => assetStore.urlSelectedAssetId,
() => assetStore.selectedAssetId,
assetStore.openAssetFuncIds,
],
([requestStatus, assetId, openAssetFuncIds]) => {
Expand Down Expand Up @@ -107,31 +104,15 @@ watch(
},
);

const string | undefined) => {
if (!tabSlug) {
return;
}
// tabSlugs are just func ids here, besides the asset tab, which is just
// "asset"
const (tabSlug: string | undefined) => {
// tabSlugs are just func ids here, besides the asset tab, which is just "asset"
if (tabSlug === "asset") {
router.replace({
name: "workspace-lab-assets",
params: {
...route.params,
assetId: assetStore.urlSelectedAssetId,
funcId: undefined,
},
});
} else if (tabSlug !== selectedFuncId.value) {
router.replace({
name: "workspace-lab-assets",
params: {
...route.params,
assetId: assetStore.urlSelectedAssetId,
funcId: tabSlug,
},
});
tabSlug = undefined;
} else if (!tabSlug || tabSlug === selectedFuncId.value) {
return;
}

assetStore.selectAsset(assetStore.urlSelectedAssetId, tabSlug);
};

const string) => {
Expand All @@ -141,12 +122,12 @@ const string) => {
};

watch(
[() => assetStore.urlSelectedAssetId, () => assetStore.urlSelectedFuncId],
[() => assetStore.selectedAssetId, () => assetStore.selectedFuncId],
() => {
if (assetStore.urlSelectedAssetId && !assetStore.urlSelectedFuncId) {
if (assetStore.selectedAssetId && !assetStore.selectedFuncId) {
tabGroupRef.value?.selectTab("asset");
} else if (assetStore.urlSelectedAssetId && assetStore.urlSelectedFuncId) {
tabGroupRef.value?.selectTab(assetStore.urlSelectedFuncId);
} else if (assetStore.selectedAssetId && assetStore.selectedFuncId) {
tabGroupRef.value?.selectTab(assetStore.selectedFuncId);
}
},
);
Expand Down
6 changes: 1 addition & 5 deletions app/web/src/components/AssetFuncAttachModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,11 +226,7 @@ const attributeOutputLocationOptions = ref<{ label: string; value: string }[]>(
const attrToValidate = ref<string | undefined>();
const validationOptions = ref<{ label: string; value: string }[]>([]);

const assetName = computed(() =>
assetStore.selectedAssetId
? assetStore.assetsById[assetStore.selectedAssetId]?.name ?? "none"
: "none",
);
const assetName = computed(() => assetStore.selectedAsset?.name ?? " none");

const existingOrNew = computed(() =>
attachExisting.value ? "existing" : "new",
Expand Down
5 changes: 1 addition & 4 deletions app/web/src/components/AssetFuncListPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,7 @@
<span class="pt-1">Asset Functions</span>
<AssetFuncAttachDropdown
v-if="assetStore.selectedAssetId && !changeSetsStore.headSelected"
:disabled="
!assetStore.assetsById[assetStore.selectedAssetId]
?.schemaVariantId
"
:disabled="!assetStore.selectedAsset?.schemaVariantId"
label="Attach Function"
@selected-attach-type="openAttachFuncModal"
/>
Expand Down
19 changes: 2 additions & 17 deletions app/web/src/components/AssetListPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@

<script lang="ts" setup>
import * as _ from "lodash-es";
import { onMounted, computed, ref } from "vue";
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import {
Collapsible,
Expand All @@ -84,7 +84,6 @@ import {
Modal,
RequestStatusMessage,
} from "@si/vue-lib/design-system";
import { useRouter } from "vue-router";
import SiSearch from "@/components/SiSearch.vue";
import { AssetListEntry, useAssetStore } from "@/store/asset.store";
import { useChangeSetsStore } from "@/store/change_sets.store";
Expand All @@ -96,7 +95,6 @@ const changeSetsStore = useChangeSetsStore();
const assetStore = useAssetStore();
const featureFlagsStore = useFeatureFlagsStore();
const { assetList } = storeToRefs(assetStore);
const router = useRouter();
const loadAssetsReqStatus = assetStore.getRequestStatus("LOAD_ASSET_LIST");
const contributeAssetModalRef = ref<InstanceType<typeof ModuleExportModal>>();
const exportSuccessModalRef = ref<InstanceType<typeof Modal>>();
Expand Down 6D47 Expand Up @@ -128,12 +126,6 @@ const props = defineProps({
assetId: { type: String },
});

onMounted(() => {
if (!props.assetId) {
assetStore.SELECT_ASSET(null);
}
});

const searchString = ref("");

const string) => {
Expand Down Expand Up @@ -166,14 +158,7 @@ const categorizedAssets = computed(() =>
const newAsset = async () => {
const result = await assetStore.CREATE_ASSET(assetStore.createNewAsset());
if (result.result.success) {
assetStore.SELECT_ASSET(result.result.data.id);
router.push({
name: "workspace-lab-assets",
params: {
...router.currentRoute.value.params,
assetId: result.result.data.id,
},
});
assetStore.selectAsset(result.result.data.id);
}
};

Expand Down
101 changes: 49 additions & 52 deletions
View file
Open in desktop
F438
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,23 @@

<div class="relative flex-grow">
<CustomizeTabs tabContentSlug="assets">
<AssetListPanel :assetId="assetId" />
<AssetListPanel :assetId="assetStore.selectedAssetId" />
</CustomizeTabs>
</div>
</div>
</template>
<template #subpanel2>
<AssetFuncListPanel :assetId="assetId" />
<AssetFuncListPanel :assetId="assetStore.selectedAssetId" />
</template>
</ResizablePanel>
<div
class="grow overflow-hidden bg-shade-0 dark:bg-neutral-800 dark:text-shade-0 font-semi-bold flex flex-col relative"
>
<div class="left-2 right-2 top-0 bottom-2 absolute">
<AssetEditorTabs :selectedAssetId="assetId" :selectedFuncId="funcId" />
<AssetEditorTabs
:selectedAssetId="assetStore.selectedAssetId"
:selectedFuncId="assetStore.selectedFuncId"
/>
</div>
</div>
<ResizablePanel rememberSizeKey="func-details" side="right" :minSize="200">
Expand All @@ -38,19 +41,25 @@
<ApplyChangeSetButton class="w-full" />
</div>
<SidebarSubpanelTitle>
{{ funcId ? "Asset Function Details" : "Asset Details" }}
{{
assetStore.selectedFuncId ? "Asset Function Details" : "Asset Details"
}}
</SidebarSubpanelTitle>
<template v-if="assetId">
<template v-if="assetStore.selectedAssetId">
<FuncDetails
v-if="funcId"
:funcId="funcId"
:schemaVariantId="assetStore.assetsById[assetId]?.schemaVariantId"
v-if="assetStore.selectedFuncId"
:funcId="assetStore.selectedFuncId"
:schemaVariantId="assetStore.selectedAsset?.schemaVariantId"
singleModelScreen
@detached="onDetach"
/>
<!-- the key here is to force remounting so we get the proper asset
request statuses -->
<AssetDetailsPanel v-else :key="assetId" :assetId="assetId" />
<AssetDetailsPanel
v-else
:key="assetStore.selectedAssetId"
:assetId="assetStore.selectedAssetId"
/>
</template>
<div
v-else
Expand All @@ -61,25 +70,25 @@
</div>
<template v-else>
<AssetDetailsPanel
v-if="assetId && !funcId"
:key="assetId"
:assetId="assetId"
v-if="assetStore.selectedAssetId && !assetStore.selectedFuncId"
:key="assetStore.selectedAssetId"
:assetId="assetStore.selectedAssetId"
/>
<FuncDetails
v-else-if="assetId && funcId"
:funcId="funcId"
:schemaVariantId="assetStore.assetsById[assetId]?.schemaVariantId"
v-else-if="assetStore.selectedAssetId && assetStore.selectedFuncId"
:funcId="assetStore.selectedFuncId"
:schemaVariantId="assetStore.selectedAsset?.schemaVariantId"
@detached="onDetach"
/>
</template>
</ResizablePanel>
</template>

<script lang="ts" setup>
import { computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { computed, watch } from "vue";
import { ResizablePanel } from "@si/vue-lib/design-system";
import { useAssetStore } from "@/store/asset.store";
import { useFuncStore } from "@/store/func/funcs.store";
import { useFeatureFlagsStore } from "@/store/feature_flags.store";
import SidebarSubpanelTitle from "@/components/SidebarSubpanelTitle.vue";
import ApplyChangeSetButton from "@/components/ApplyChangeSetButton.vue";
Expand All @@ -92,6 +101,7 @@ import AssetDetailsPanel from "../AssetDetailsPanel.vue";
import AssetFuncListPanel from "../AssetFuncListPanel.vue";
import FuncDetails from "../FuncEditor/FuncDetails.vue";

const funcStore = useFuncStore();
const featureFlagsStore = useFeatureFlagsStore();
const FF_SINGLE_MODEL_SCREEN = computed(
() => featureFlagsStore.SINGLE_MODEL_SCREEN,
Expand All @@ -100,51 +110,38 @@ const FF_SINGLE_MODEL_SCREEN = computed(
const changeSetsStore = useChangeSetsStore();

const assetStore = useAssetStore();
const router = useRouter();
const loadAssetsReqStatus = assetStore.getRequestStatus("LOAD_ASSET_LIST");

const assetId = computed(() => assetStore.urlSelectedAssetId);
const funcId = computed(() => assetStore.urlSelectedFuncId);
watch(
[
() => assetStore.urlSelectedAssetId,
() => assetStore.urlSelectedFuncId,
loadAssetsReqStatus,
],
async () => {
if (loadAssetsReqStatus.value.isSuccess && assetStore.urlSelectedAssetId) {
if (assetStore.urlSelectedAssetId && !assetStore.selectedAsset) {
await assetStore.LOAD_ASSET(assetStore.urlSelectedAssetId);
}

watch([assetId, funcId], () => {
if (funcId.value && assetId.value) {
assetStore.SELECT_FUNC(assetId.value, funcId.value);
}
});
if (assetStore.urlSelectedFuncId && !assetStore.selectedFunc) {
await funcStore.FETCH_FUNC_DETAILS(assetStore.urlSelectedFuncId);
}

watch(
[assetId, funcId, loadAssetsReqStatus],
() => {
if (loadAssetsReqStatus.value.isSuccess && assetId.value && !funcId.value) {
assetStore.SELECT_ASSET(assetId.value);
if (assetStore.selectedAssetId && assetStore.selectedFuncId) {
assetStore.openFunc(
assetStore.selectedAssetId,
assetStore.selectedFuncId,
);
}
}
},
{ immediate: true },
);

onMounted(async () => {
// if (!assetId.value && assetStore.getLastSelectedAssetId()) {
// router.push({
// name: "workspace-lab-assets",
// params: {
// ...router.currentRoute.value.params,
// assetId: assetStore.getLastSelectedAssetId(),
// },
// });
// }
});

const () => {
if (assetStore.urlSelectedAssetId) {
await assetStore.LOAD_ASSET(assetStore.urlSelectedAssetId);
router.push({
name: "workspace-lab-assets",
params: {
...router.currentRoute.value.params,
funcId: assetStore.urlSelectedFuncId,
assetId: assetStore.urlSelectedAssetId,
},
});
if (assetStore.selectedAssetId && assetStore.selectedFuncId) {
assetStore.closeFunc(assetStore.selectedAssetId, assetStore.selectedFuncId);
}
};
</script>
Loading
0