Tactic with Vue3

[Tegwick]

Hi Tactic Community,

I will be using TACTIC Open Source as a DAM&WF backend and administrative interface for a Vue3 based application.

In this thread I will try to capture relevant steps and milestones for the project and provide code snippets
that hopefully might be helpful. The basic idea is to document what I will be doing for reference at a later
stage and share the results.

As I might be hitting one or the other wall on the way:
a) this thread might contain solutions to overcome these walls in the future
b) while trying to climb walls I will obviously be glad for helpful suggestions

Be warned: I havn't been a fulltime dev for years. This is a spare time project and I consider myself as a courious amateur
if though ambitious for now. I might try stupid things, will probably get stuck and most probably there will be gaps between
phases of activity.

Welcome to all of you who nevertheless might want to follow along!

--Tegwick

To get this going, here is the list of resources I started from, as documented in my projects progress wiki:

## 2021-09-09 Trial to integrate Tactic as Digital Asset and Workflow Mgmt Solution
- https://www.southpawtech.com/tactic-open-source
- http://community.southpawtech.com/docs/quick-start/
- http://forum.southpawtech.com/
- https://github.com/diegocortassa/docker-tactic

[Tegwick]

Previously on Tactic with Vue3

Sep 9th 2021 Establish Tactic In My Dev Environment

- First step is to grab the Tactic Docker Image from https://github.com/diegocortassa/docker-tactic.
- Some fuzzing around later the container is up and running on DockerDesktop https://www.docker.com/products/docker-desktop.
- Problem was somehow I could not change the service from default port 80 to something else.
- In the end I rearanged some other services and that's that. Another problem for later on.
- My Docker Desktop currently is V3.6.0 (67351) btw.
- It's running on a Windows 10 Pro Laptop by Acer and hooks into WSFL2 running Ubuntu 20.04.2 LTS.

Sep 10th 2020 Create Account And Pick Up Some Tactic Basics

- First login establishes username/password as admin/admin. This is the playful no-security-what-so-ever stage of exploration.
- Watched one of the introductory vids on Youtube https://youtu.be/AkEld1mNd1c.
- My understanding is: everything has a workflow, I need to define searchableTypes (sType) and then store/publish searchableObjects (sObjects).
- The interface happens to spin my head and I need some time to adapt.
- It is unclear to me which project scope I am in.
- I also do not understand what's global and what is local.
- Nevertheless it's a start in the end I accomplished the following.
- I created a new sType.
- I created a coresponding sObject (Did I really? I'm nor sure actually.).
- With some thought, trial and error I could even repeat the steps.

Sep 12th 2020 Showcase Some Integration of Vue3 With Tactic

- Long story short I combined my limited expertise in Vue3, JS and Tactic and...
- Was able to show the Jobs from southpawtech demosystem on an experimental page of my app.
- This is what I used as a startingpoint: http://doc.southpawtech.com/doc/API/star...tart_rest/

Next on Tactic with Vue3
- Code samples for first integration
- I plan to retrieve and display an image, then do uploads, later PDF-files maybe
- I also should be reading http://community.southpawtech.com/docs/developer/

--t

[listy]

Hi!
Really interesting stuff.
Have you found Diego's attempts to use vue with tactic? It might be helpful for you.

Do You have plan of what you want to get doing this?

[Tegwick]

Hi Listy,

thanks for the pointer to Diego. Did not see that yet and will check it out. As for where I am headed to, my opinion
isn't fixed and will adapt as I get to understand Tactic some more.

The overall task is building an application to help sales representatives deliver and capture their interaction with prospects.

For a start I decided to build a collection of images with inspiring quotations. There should be
- some workflow to structure how they will be classified and stored using the Tactic UI
- a vue side component to retrieve and display quotations.

The quotations will be included in the app interface to spice up user experientce. More importantly I will gain some
understanding about how to use and interface with tactic.

BR --Tegwick

[listy]

As a good start i would plan the workflow and set up the database with all the columns for your needs.
When you get what is stypes, sobjects and other stuff, you can get back to vue things. It would be easier, believe me. I was doing python UI with deep dive into tactic. When i learned tactic more i had do rewrite my sources from the scratch 3 times.
Also if you create a good plan or schema, anyone can point you how you can use tactic better and in proper way.
(russian english, sorry )

---

Diego's vue thread: http://forum.southpawtech.com/showthread...hlight=vue

There is also a good example of using pure reactJS with tactic.
The next step i personally waiting now is JSX processor, so i could use tactic inner templates system with JSX

[Tegwick]

Hi Again,

let's share some progress or rather some comments on my lack of progress...

1) Missing Persistence in the Docker Setup

Following up on my latest experiments with tatic open source on docker desktop I recognized that the setup will need some tuning to keep whatever structures I set up persistent across restarts of the container. I did not go into this and hopefully there is some documentation with diegos docker image but for now restarting the container seems to provides me with a clean slate tactic installation. ... well doesn't quite look like any docs there. I guess I'll need to pull the database to some volume in order to gain persistence. Will leave that for another day.

2) Minimal Workflow, sType, sObject, Asset Managment Example

To provide myself with some practial insight, I am about to figure out some basic blogging workflow. Here is my idea of what to achive:

- Define a workflow with ideation, creation, review and publication of blogposts.
- Define blogposts as sType
- Capture some blogpost examples as sObjects
- Use the workflow to add a blogpost
- Include "published" blogposts in my vue application

3) The Plan Refined

To roughly capture what I happen to understand (somewhat) from watching videos and looking at the introductury workflow example here is what I come up with:

- project: "Sales Pitch Blog"
- workflow: "Create New Blog Post": "Capture Idea" -> "Draft Outline" -> "Write Post" -> "Add Header Image" -> "Review Post" -> "Accept for Publication" -> "Publish Post"
- sType: "BlogPost": "blogidea", "blogtitle", "blogoutline", "blogopener", "blogcontent", "blogauthor", "blogdate". All text except the last which is of type date. The image to be displayed will be an asset associated with the post. Maybe idea, outline, opener and content should be assets not columns, too? What about search then?
- sObjects: I'll add two examples from the "+"-Button in the Search Type Manager View...
- Finally try to figure how to retrieve the examples via the REST-API

4) Start and Stumble

- I actually do not get the user interface very well
- Some clicking and opening and closing of tabs I create a project
- Some more clicking, opening and closing later I create a workflow
- I am not sure if and how the workflow is associated to the project for now but we'll see
- Creating the sType feels independent of workflow and I think I missed saving the custom fields or there might have been a bug
- I add the custom fields again and hit the create button not loose them again
- I try to add an example, but can't find the custom fields to provide entries for them
- Also I get an error about the "Search type [default/blogpost_in_blogpost] not registered" and a stack trace I do not dig at this point in time
- So this is the wall to be hit for today. :/

5) Final Remarks Today

- Tactic Open Source seems to be more of a blank slate than to be accessible to follow the youtube tutorial videos.
- I miss a simple tutorial providing me with basic understanding of how project, workflow, sType, sObject and assets can be used to model a use case in the first place.
- If I figure this out, I should provide one.
- Maybe there is a tutorial but I missed it?
- The docker image needs some attention. I does not provide for a useful environment without persistence. This should at the least be a warning in the README.

BR

[listy]

Hi!
Nice progress!
The basis of the tactic is SOBJECT. It is from the core a basic element, which is inherited from very "close to metal" database methods. Just like Object in the Python.
Every other things like SearchType (stype), Project, Snapshot, File, Note and etc are children of Sobjects.
This is just to get what is the core of TACTIC structure.
From this point everything starts to be more clear. You can create any table aka table of sobjects, name it any name you want, and make big or simple structures yourself. Something similar you can get from Django.
> Tactic Open Source seems to be more of a blank slate than to be accessible to follow the youtube tutorial videos.
Yes, it is. It is how it was planned, to be really fast customizable, scaled and changed for any kind of work, pipeline and etc. It's super fluid, and if you get the core of it, you can build anything using TACTIC as a basis.

Also, you can find some example projects of tactic, i think its still can be downloaded as WM machine.

Remko can correct me where I'm wrong

[Tegwick]

Thanks for the encouragement!

I'll dig into the docs for a moment:

http://community.southpawtech.com/docs/d...-concepts/

Quote: "In TACTIC, each sObject is represented as a table in the database."

That sounds weird. Isn't it that each sType corresponds to a table in the database and an sObject is represented as a row in the table specified by its sType? Just asking!

Quote: "sObject can be uniquely identified by two parameters: a search type and a search ID. Often these two parameters are combined into a "search key" defined as <search_type>|<search_id>"

I kind of figured that. I read you might combine databases and sync content between these. How does Tactic provide for unique search-ids for each search-type?

Quote: "Checkin/checkout is the framework for filesystem interaction. All interaction within the checkin/checkout framework is done through the SObjects themselves so that they can determine their own checkin/checkout conditions and mechanisms. The checkin framework creates a 'snapshot' SObject that is related to the original SObject through a search_id. It assigns a unique file ID for every transaction, and creates snapshot attributes for the SObjects."

Ok that's interesting. I suspect policies for naming files apply here. Will need to have a look how this representation on the filesystem works but it should be powerful. From what I understand TACTIC uses the filesystem as a storage for files and not as a bidirectional interface. Correct?

Some time ago I thought about maybe one could use git as a natural CMS backend. Might be too complicated. Anybody tried something like that based on tactic?

Quote: "Engineering requirements for a particular application must be gathered and translated into widgets, including definitions of the widgets' relationships to each other.:

I see. My understanding is that commercial Tactic provides prebuilt stuff to use for various domains of requirements. Is there some example that one might study as a blueprint of how to do that. Are there building blocks in the free version to be considered?

Quote: "Directories and file naming are handled slightly differently. TACTIC builds file names procedurally and then stores them in the database. On the other hand, TACTIC never stores directory names directly in the database, but always builds them up procedurally. This additional level of abstraction provides the opportunity to reorganize your asset structure as needed"

Not hard coding the directory structure is an interesting take. Makes me think about directory structures based on e.g. tags or keywords. There will be the time when you want to reorganise your tagging scheme. If you do you might have the filesystem structure adapt to the new structure. Well, that definitely is a topic for a later date.

Quote: "This is a service within TACTIC that enables specified folders to be “watched”. Any file dropped into a registered folder will be checked in.
Currently the implementation will create an entry per file. Subsequent drops of a file with the same name will be checked in as a new version. It is designed for high volume ingestions."

I like that a lot!

Enough for now. Need to get some sleep...

---

Ok, one some questions keep buzzing, so I should get it out before going to sleep...

Considering my simplistic BlogPost Example from above. My idea was to have several metadata fields defined like blogidea, blogtitle, blogoutline, etc. I also wanted to provide some image as a header. That would be a file associated with the sObject obviously.

Now consider the BlogPost should contain more images, maybe for illustration purposes or the like. Is there some concept to define additional slots where other files should be placed. Those slots might be present, to be filled later on, eg. when a certain step in some workflow has been reached.

Is this
A) a common idea implemented in the framework or
B) less common but has been implemented by someone or
C) uncommon and should be avided as a not-tactic-like pattern better solved with <insert-favorite-suggestion> here
D) cool but has never been tried?

BR

[listy]

Quote:  "In TACTIC, each sObject is represented as a table in the database."

That sounds weird. Isn't it that each sType corresponds to a table in the database and an sObject is represented as a row in the table specified by its sType? Just asking!

Yes, Search Type contains representation of sObjects. Its structure, columns, names etc.
For examle search type called Task (sthpw/task) it is built in, and this table created with tactic.
All search types are sobjects too, and can be found in search types table. 

---

For the blog posting, i would create project first. Name it Blog.

Then create search type for posts: "blog/posts"

Make custom columns for the search "blog/posts": Title, Text, etc...

Then i can create SObject using api:

data = {"title": "First blog post Title", "text": "First blog post text"}
server.insert(search_type='blog/posts', data)

Then when it is added query it when necessary:
filters = []
server.query(search_type='blog/posts'', filters)


Any blog post can now contain Snapshots:
file_path = "c:/hello.jpg"
server.simple_checkin(search_key='blog/posts?project=blog&code=BLOG00001', context='attachment', file_path=file_path)

This all is python, but can be js, and within your web app

[Tegwick]

Hi There, I am back again learning about tactic... what a ride.

Previously on Tactic with Vue3:

Sep 28th 2021 Create a first blogpost sObject and retrieve it's name and other attributes from vue

- I established a default/blogpost sType
- and create an sObject with sType blogpost
- from my vue3 application I can grab lists of blogpost sobjects
- and I can grab one sobject using its code which happens to be "BLOGPOST000002"



- Next I added an image to the blogpost sobject
- Struggling with my minimal understanding of the tactic user interface I added an image
- I should say "stumbling" not "struggling", because the interface feels so flabbergastingly strange to me. My brain actually does not manage to remember what I do or enable me to repeat what I did in any way that would feel like actually learning to use the ui. Reminds me of trying to find my path through a number of dark rooms at some event trying to convey how blind people need to try and orient themselves in the world. Well, I felt kind of oriented about the rooms in the end which I do not about the Tactic UI (yet) (hopefully).
- Steep learning curve. Nuff said.

--t

---

Task for today: Show the image from the tactic blogpost sobject in my Vue3 App...

Stage 1:
- Try some reading in the documentation
- Try to get a grip on the API documentation
- Revisit the documentation
- Maybe I am just too dumb or approaching this fram a weird angle...
- Think!
- Ok, lets see. I can display the blogpost sobject in the tactiv ui (doing this gives me kind of a headache but I managed)
- Let's open the image in a separate browser tab and just look at the URI it ist provided from!
- Horray: it's "localhost/assets/salespitch/blogpost/New Ideas_v001_web.jpg"
- That's nice, let's just copy this to my code and include the image to have some progress...
- Well, this kind of thinking obviously is way too simplistic.
- Just giving the url won't do any good in my vue template because the url will be prefixed with basepath, which in turn obviously messes up retrieval of my image.

So for today I remain with two questions:
1) In Vue3: How do I integrate external content like images served from another location e.g. tactic or whatever?
2) In Tactic: How do I retrieve the accesspath to the asset using the api?
- Maybe I need to request latest snapshot from the sobject and then grab the info from there?
- I there an easier way?
- Does this answer my thoughts about slots from the above?
- An sobject can have multiple associate files. The default one is the "main" asset. This is kind of slot in my thinking above.

Too, tired to dig into this for now. Stay tuned for our next episode of "Tactic with Vue3"

BTW: I actually came up with about 3 to 5 new ideas about how I might leverage using tactic in different scenarios. This feels much more easy to me than to implement them for now.

---

Entrypoints I like:
- http://community.southpawtech.com/docs/d...-overview/
- http://community.southpawtech.com/tactic.../link/docs
- http://community.southpawtech.com/docs/d...reference/