Initial commit

src/components/editors/PersonEditorOrganizations.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  organizations: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-organization': []
+  'remove-organization': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="(organizations || []).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Organizations</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-organization')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Organization
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(org, key) in organizations" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-domain" size="small" class="mr-2" />
+            <strong>{{ org.Label || 'Unnamed Organization' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(org.Label || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Units: {{ (org.Units || []).join(', ') || 'None' }}
+        </div>
+        <div class="text-caption text-grey">
+          Context: {{ org.context || 'Not set' }} |
+          Priority: {{ org.priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(org, index) in organizations" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Organization</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-organization', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="org.Label"
+              label="Label"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="org.sortName"
+              label="Sort Name"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="org.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="org.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12">
+            <v-text-field
+              v-model="org.Units"
+              label="Units (comma-separated)"
+              variant="outlined"
+              density="compact"
+              hint="Enter units separated by commas"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>