Merge pull request #37 from dapplets/dap-4799

feat: fork of own documents (DAP-4799)
dapplets · Nov 20, 2024 · 5999786 · 5999786
2 parents ad49180 + a059b32
commit 5999786
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 87 deletions.
diff --git a/apps/extension/src/contentscript/multitable-panel/components/application-card.tsx b/apps/extension/src/contentscript/multitable-panel/components/application-card.tsx
@@ -42,14 +42,14 @@ const CardContent = styled.div`
   width: 100%;
 `
 
-type TTextLink = {
+type TText = {
   bold?: boolean
   small?: boolean
   ellipsis?: boolean
   $color?: string
 }
 
-const TextLink = styled.div<TTextLink>`
+const Text = styled.div<TText>`
   display: block;
   margin: 0;
   font-size: 14px;
@@ -117,7 +117,7 @@ const SideLine = styled.div`
 `
 
 const DocumentCardList = styled.div`
-  width: 100%;
+  width: calc(100% - 32px);
   margin-right: 10px;
   display: flex;
   flex-direction: column;
@@ -241,16 +241,27 @@ const ApplicationCard: React.FC<IApplicationCard> = ({
         </Thumbnail>
 
         <CardContent>
-          <TextLink $color={textColor} bold ellipsis>
+          <Text $color={textColor} bold ellipsis>
             {metadata.name || appId}
-          </TextLink>
+          </Text>
 
-          <TextLink small ellipsis>
+          <Text small ellipsis>
             {source === EntitySourceType.Local && (
-              <Badge margin="0 8px 0 0" text={source} theme={'yellow'} />
+              <Badge
+                margin="0 8px 0 0"
+                text={source}
+                theme={'yellow'}
+                style={{ transform: 'translate(0px, -1px)' }}
+              />
             )}{' '}
             {accountId ? `@${accountId}` : null}
-          </TextLink>
+          </Text>
+
+          {src ? (
+            <Text small ellipsis title={src}>
+              {`ID: ${src}`}
+            </Text>
+          ) : null}
         </CardContent>
 
         <ButtonLink

diff --git a/apps/extension/src/contentscript/multitable-panel/components/badge.tsx b/apps/extension/src/contentscript/multitable-panel/components/badge.tsx
@@ -59,16 +59,26 @@ export interface IBadgeProps {
   size?: keyof typeof SizeMap
   icon?: React.JSX.Element
   onClick?: React.MouseEventHandler<HTMLSpanElement>
+  style?: React.CSSProperties
 }
 
-export const Badge: FC<IBadgeProps> = ({ text, theme, margin, icon, onClick, size = 'tiny' }) => {
+export const Badge: FC<IBadgeProps> = ({
+  text,
+  theme,
+  margin,
+  icon,
+  onClick,
+  size = 'tiny',
+  style,
+}) => {
   return (
     <Wrapper
       $margin={margin}
       $theme={theme}
       onClick={onClick}
       $isClickable={!!onClick}
       $size={size}
+      style={style}
     >
       {icon ? <span style={{ fontSize: SizeMap[size].iconSize }}>{icon}</span> : null}
       <span>{text}</span>

diff --git a/apps/extension/src/contentscript/multitable-panel/components/document-card.tsx b/apps/extension/src/contentscript/multitable-panel/components/document-card.tsx
@@ -10,7 +10,6 @@ const Card = styled.div`
   border-radius: 10px;
   background: #f8f9ff;
   border: 1px solid #eceef0;
-  font-family: sans-serif;
   &:hover {
     background: rgba(24, 121, 206, 0.1);
   }
@@ -90,7 +89,7 @@ const CardContent = styled.div`
   width: 100%;
 `
 
-const TextLink = styled.div<{ bold?: boolean; small?: boolean; ellipsis?: boolean }>`
+const Text = styled.div<{ bold?: boolean; small?: boolean; ellipsis?: boolean }>`
   display: block;
   margin: 0;
   font-size: 14px;
@@ -171,16 +170,22 @@ export const DocumentCard: React.FC<Props> = ({
         </ThumbnailGroup>
 
         <CardContent>
-          <TextLink bold ellipsis>
+          <Text bold ellipsis>
             {metadata?.name || (srcParts && srcParts[2]) || 'New Document'}
-          </TextLink>
+          </Text>
 
-          <TextLink small ellipsis>
+          <Text small ellipsis>
             {source === EntitySourceType.Local && (
               <Badge margin="0 8px 0 0" text={source} theme={'yellow'} />
             )}{' '}
             {srcParts?.[0] && `@${srcParts[0]}`}
-          </TextLink>
+          </Text>
+
+          {src ? (
+            <Text small ellipsis title={src}>
+              {`ID: ${src}`}
+            </Text>
+          ) : null}
         </CardContent>
         <ButtonLink className={disabled ? 'disabled' : ''} disabled={disabled} onClick={onChange}>
           <CheckedIcon />

diff --git a/libs/backend/src/services/document/document.service.ts b/libs/backend/src/services/document/document.service.ts
@@ -114,55 +114,61 @@ export class DocumentSerivce {
 
     const document = await this.documentRepository.constructItem(dto)
 
-    if (mutation.authorId === loggedInAccountId) {
-      // create document remotely, add id to mutation remotely ? (need to be merged)
+    // ToDo: should mutation be saved locally or remote?
+    // if (mutation.authorId === loggedInAccountId) {
+    //   // create document remotely, add id to mutation remotely ? (need to be merged)
+
+    //   // can be null if mutation was locally edited before
+    //   const editingMutation = this._replaceAppInstance(mutation, appId, null, document.id)
+
+    //   if (!editingMutation) {
+    //     throw new Error('No app in mutation with that ID and empty document')
+    //   }
+
+    //   const [savedDocument, savedMutation] = await this.unitOfWorkService.runInTransaction((tx) =>
+    //     Promise.all([
+    //       this.documentRepository.createItem(document, tx),
+    //       this.mutationService.editMutation(
+    //         { ...editingMutation, source: EntitySourceType.Origin },
+    //         undefined,
+    //         tx
+    //       ), // ToDo: undefined
+    //     ])
+    //   )
+
+    //   return {
+    //     document: savedDocument.toDto(),
+    //     mutation: savedMutation,
+    //   }
+    // } else {
+    // create document remotely, make mutation local, add id to mutation
+
+    const savedDocument = await this.documentRepository.createItem(document)
+
+    if (
+      !mutation.apps.some((app) => app.appId === appId && app.documentId === document.id) ||
+      mutation.source === EntitySourceType.Origin
+    ) {
+      // ToDo: navie implementation
+      mutation.apps = mutation.apps
+        .filter((app) => !(app.appId === appId && app.documentId === null)) // remove apps without documents
+        .concat({ appId, documentId: document.id }) // add new document
 
-      // can be null if mutation was locally edited before
-      const editingMutation = this._replaceAppInstance(mutation, appId, null, document.id)
-
-      if (!editingMutation) {
-        throw new Error('No app in mutation with that ID and empty document')
-      }
-
-      const [savedDocument, savedMutation] = await this.unitOfWorkService.runInTransaction((tx) =>
-        Promise.all([
-          this.documentRepository.createItem(document, tx),
-          this.mutationService.editMutation(
-            { ...editingMutation, source: EntitySourceType.Origin },
-            undefined,
-            tx
-          ), // ToDo: undefined
-        ])
-      )
+      const savedMutation = await this.mutationService.saveMutation({
+        ...mutation,
+        source: EntitySourceType.Local,
+      })
 
       return {
         document: savedDocument.toDto(),
         mutation: savedMutation,
       }
-    } else {
-      // create document remotely, make mutation local, add id to mutation
-
-      const savedDocument = await this.documentRepository.createItem(document)
-
-      // ToDo: null authorId is possible here
-      const editingMutation = this._replaceAppInstance(mutation, appId, null, document.id)
-
-      if (editingMutation || mutation.source === EntitySourceType.Origin) {
-        const savedMutation = await this.mutationService.saveMutation({
-          ...(editingMutation ?? mutation),
-          source: EntitySourceType.Local,
-        })
-
-        return {
-          document: savedDocument.toDto(),
-          mutation: savedMutation,
-        }
-      }
+    }
 
-      return {
-        document: savedDocument.toDto(),
-      }
+    return {
+      document: savedDocument.toDto(),
     }
+    // }
   }
 
   private async _editLocalDocumentInMutation(

diff --git a/libs/shared-components/src/mini-overlay/index.tsx b/libs/shared-components/src/mini-overlay/index.tsx
@@ -159,39 +159,46 @@ interface IMiniOverlayProps extends Partial<IWalletConnect> {
   trackingRefs?: Set<React.RefObject<HTMLDivElement>>
 }
 
-export const AppSwitcher: FC<IAppSwitcherProps> = ({ app, enableApp, disableApp, isLoading }) => (
-  <>
-    {isLoading ? (
-      <Loading>
-        <Spinner animation="border" variant="primary"></Spinner>
-      </Loading>
-    ) : (
-      <MutationIconWrapper
-        title={app.localId}
-        $isStopped={!app.settings.isEnabled}
-        $isButton={true}
-      >
-        {app?.metadata.image ? <Image image={app?.metadata.image} /> : <MutationFallbackIcon />}
+export const AppSwitcher: FC<IAppSwitcherProps> = ({ app, enableApp, disableApp, isLoading }) => {
+  const docMeta = (app as any).documentId?.split('/')
+  return (
+    <>
+      {isLoading ? (
+        <Loading>
+          <Spinner animation="border" variant="primary"></Spinner>
+        </Loading>
+      ) : (
+        <MutationIconWrapper
+          title={
+            (app as any).documentId
+              ? `${app.localId}:\n${docMeta?.[2]}\nby ${docMeta?.[0]}`
+              : app.localId
+          }
+          $isStopped={!app.settings.isEnabled}
+          $isButton={true}
+        >
+          {app?.metadata.image ? <Image image={app?.metadata.image} /> : <MutationFallbackIcon />}
 
-        {!app.settings.isEnabled ? (
-          <LabelAppTop className="labelAppTop">
-            <StopTopIcon />
-          </LabelAppTop>
-        ) : null}
+          {!app.settings.isEnabled ? (
+            <LabelAppTop className="labelAppTop">
+              <StopTopIcon />
+            </LabelAppTop>
+          ) : null}
 
-        {app.settings.isEnabled ? (
-          <LabelAppCenter className="labelAppCenter" onClick={disableApp}>
-            <StopCenterIcon />
-          </LabelAppCenter>
-        ) : (
-          <LabelAppCenter className="labelAppCenter" onClick={enableApp}>
-            <PlayCenterIcon />
-          </LabelAppCenter>
-        )}
-      </MutationIconWrapper>
-    )}
-  </>
-)
+          {app.settings.isEnabled ? (
+            <LabelAppCenter className="labelAppCenter" onClick={disableApp}>
+              <StopCenterIcon />
+            </LabelAppCenter>
+          ) : (
+            <LabelAppCenter className="labelAppCenter" onClick={enableApp}>
+              <PlayCenterIcon />
+            </LabelAppCenter>
+          )}
+        </MutationIconWrapper>
+      )}
+    </>
+  )
+}
 
 export const MiniOverlay: FC<IMiniOverlayProps> = ({
   baseMutation,