Dynamic Generate NcActions/NcActionRadio with Array

💻 Development
1

Hi All,

I am designing an integration module to sync contacts and calendars from an external system. I am currently in the process of creating the configuration screen, and I need some advice on how to code the configuration interface as I am pretty new to NC and Vue development. I am currently stuck on how to use vue to produce the result I am looking for.

My source data comes from 3 arrays:

  • availableRemoteCollections (columns: id, name, count)
  • availableLocalCollections (columns: id, name, uri)
  • linkedCollections (columns: remoteId, localId)

What I am trying to produce is a list of remote collections with a NcActionRadio list of local collections that can be linked to the remote ones. I am partially there (see image below).

contacts-config
contacts-config942×347 17.4 KB

What I am struggling with is how to:

  1. How to properly bind the NcActionRadio options to the array (id and name)
  2. How to use the bind and update:checked to trigger my linking function
  3. How to disable the NcActionRadio options if they have already been selected for on another line (exist in linkedCollections array)

Here is the code I have so far:

<ul v-if="availableRemoteContactCollections.length > 0">
	<li v-for="ritem in availableRemoteContactCollections" :key="ritem.id" class="ews-collectionlist-item">
		<ContactIcon />
		<label>
			{{ ritem.name }} ({{ ritem.count }} Contacts)
		</label>
		<NcActions>
			<template #icon>
				<LinkIcon />
			</template>
			<template v-for="litem in availableLocalContactCollections">
				<NcActionRadio>
					{{ litem.name }}
				</NcActionRadio>
			</template>
		</NcActions>
	</li>
</ul>

Thank you in advance for any advice!
Sebastian

2

Hey.

The first thing I see is that you have the v-for applied to the template not the NcActionRadio.

I would register a Vue method (in the component you are just creating) with an item parameter. You can then call that with litem. The same is true for ritem. So, you would do something like

<template>
  <NcActionRadio
    v-for="litem in availableLocalContactCollectionsWithEnable"
    :disabled="litem.disabled"
    @change="linkCollection(ritem, litem)"
    >
    {{ litem.name }}
  </NcActionRadio>
</template>

Then, in the JS part, you have to add a method and a computed property.

<script>
  // ...
  computed: {
    availableLocalContactCollectionsWithEnable() {
      return availableLocalContactCollections.map(function (collection) {
        const ret = collection
        // Check for enable or disable state and set disabled property
        ret.disabled = false /* ... */
        return ret
      })
    },
  },
  methods: {
    // ...
    linkCollection(ritem, litem) {
      // Update the data (and possibly the backend) to match your needs
    }
  },
</script>

This code is probably not working as it is (I have not tested it) but you get the idea, I guess.